Making your HTML more exciting HTML -- Let’s Review HTML’s basic four tags z.

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 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/

Making your HTML more exciting HTML -- Let’s Review HTML’s basic four tags z.

Documents

Transcript of Making your HTML more exciting HTML -- Let’s Review HTML’s basic four tags z.