Embed Size (px)
Making your HTML more exciting
HTML -- Let’s ReviewHTML’s basic four tags
<html></html><head></head><title></title><body></body>
HTML – Let’s review Container vs empty tags
Container <p></p>; <a></a>Empty <br>
Attributes (modify HTML tags)
<img src=“my.jpg” height=“25” width=“30” alt=“My Image”>
Four attributes (src, height, width, alt)
HTML - Heading/ParagraphHeading Elements - varies font size
Levels 1 (largest) to 6 (smallest)<h1></h1>Inserts a line break before and after
Paragraph Tag
<p></p>Inserts a line break before and after
HTML -- ListsLists
Ordered <ol></ol> -- numberedUnordered <ul></ul> -- bulletedDefinition <dl></dl>
ImagesPut this in your file for image display<img src=“logo.gif” height=“25” width=“30” alt=“MU logo”>
Make it a link<a href=http://www.missouri.edu><img src=“logo.gif” height=“25” width=“30” align=“left” alt=“MU logo”></a>
HTML -- ColorColor
Predefined Color NamesRGB color values (lots of charts on Web)
HTML—Links (review)Link examples
<a href=“file2.html”>File</a><a href=“class/file2.html”>File</a><a href=“http://www.google.com”>Google</a><a href=“mailto:[email protected]”>Email</a>(Cont.)
Now for some extrasTablesSpecial charactersMore <a> anchor ideasCommentsMeta tagsDTD
HTML -- TablesTags to remember
<table><tr><td></td></tr></table>Table attributes to remember
Cellpadding, cellspacing, border, width,
summmary, headingTable data cell attributes to remember
Align, valign, colspan, rowspan
More Extras Special charactersExamples
(nonbreaking space)St.&npsp;Louis
& (ampersand)Milk & Cookies
" (quotation mark)"Go Cards"
More ExtrasComment
Begin <!--Nothing below will display
End -->Check out source of
bengal.missouri.edu/~knottsb
Yes more goodiesOpen in new browser window
<a href="http://cnn.com"target="_blank">CNN</a>
Link to another section of page<a href="#C4">See also Chapter 4</a><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains bla bla bla</p>
Meta TagsHow are they used
Search engine indexingCan we prevent indexing
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
Google example (similar info. on Yahoo help) http://www.google.com/remove.html
HTML – Meta TagsMeta tags
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<meta name=“description” content=“A short paragraph about the page.”>
<meta name=“keywords” content=“library, libraries, MU libraries”>
<meta name=“author” content=“Barbara Knotts”>
Document Type DefinitionDTD—tells browser which version HTML
usedHTML 4.01 Transitional DTDInclude before opening HTML tag <!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd>
Taking it to bengalYour webspace:
http://bengal.missouri.edu/yourpawprintUse SecureFX to move your files
Check out our BlackboardDo from home – not here
Create Your Own (you should be able to do for Portfolio)DTDFour required tagsMetaLink
bookmarkImageListCombination of
above
TableColorHeadingFonts Paragraph/Line
breakMailto:StylesCombination
CopyrightRights given to the creator of a work to
reproduce, prepare derivative works, distribute copies & publicly perform or display his/her work.
(taken from Missouri Digitization Project’s Copyright & Intellectual Property Issues).
Copyright LawsCover length of copyright protection &
unpublished works – also distribution Copyright Act of 1976Digital Millennium Copyright Act of 1998Sonny Bono Copyright Term Extension Act of
1998Others - Tasini
CopyrightDigitizing is publishing—format may
change but copyright protection remainsPublic Domain – when copyright
protection no longer appliesFair Use - Obtain permission when
needed—DOCUMENT your search
Copyright – Fair UseFair use factors
Purpose of your useNature of copyrighted workAmount takenEffect on potential marketLet’s go to
http://www.copyright.cornell.edu/training/Hirtle_Public_Domain.htm
Copyright – New initiativesCreative Commons --
http://creativecommons.org/Open Access (PubMed one example)
http://pubmed.gov/Open Archives
Initiativehttp://www.openarchives.org/
![[Basic HTML/CSS] 1. html - basic tags](https://img.dokumen.tips/doc/110x75/58ce75c41a28abdc578b67db/basic-htmlcss-1-html-basic-tags.jpg?t=1685574835)
![[Basic HTML/CSS] 2. html - list tags](https://img.dokumen.tips/doc/110x75/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg?t=1685574835)
