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

More HTML Stuff

Making your HTML more exciting

HTML -- Let’s Review

HTML’s basic four tags<html></html><head></head><title></title><body></body>

HTML – Let’s review

Container vs empty tagsContainer <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/Paragraph

Heading Elements - varies font sizeLevels 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 -- Lists

ListsOrdered <ol></ol> -- numberedUnordered <ul></ul> -- bulletedDefinition <dl></dl>

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.)

http://www.google.com/

HTML – Link (new)

Linking to a section within a document

<a href=“http://slpl.org”><img src=“bookworm.gif” alt=“Bookworm”></a>

<a name=“top”></a><a href=“barb1.html#top”>Return to

top</a>

http://slpl.org/

http://slpl.org/

http://slpl.org/

HTML -- Tables

Tags to remember<table><tr><td></td></tr></table>

Table attributes to rememberCellpadding, cellspacing, border, width, summmary, heading

Table data cell attributes to rememberAlign, valign, colspan, rowspan

Now for some extras

Meta tagsDTDSpecial charactersComments

Meta Tags

How are they used Search engine indexing Can we prevent indexing

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

Google example (similar info. on Yahoo help)http://www.google.com/remove.html

http://www.google.com/remove.html



HTML – Meta Tags

Meta 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 Definition

DTD—tells browser which version HTML used HTML 4.01 Transitional DTD Include before opening HTML tag <!DOCTYPE HTML PUBLIC “-//W3C//DTD

HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd>

http://www.w3.org/TR/html4/loose.dtd

More Extras

Special charactersExamples

(nonbreaking space)St.&npsp;Louis

& (ampersand)Milk & Cookies

" (quotation mark)"Go Cards"

http://www.w3schools.com/HTML/html_entities.asp

More Extras

Comment

Begin Check out source of

bengal.missouri.edu/~knottsb

Create Your Own (you should be able to do for Portfolio)

DTDFour required tagsMetaLink

bookmark

ImageListCombination of

above

TableColorHeadingFonts Paragraph/Line

breakMailto:StylesCombination

Writing & Designingfor theWeb

Writing for the Web

4 C’s Creditable Clear Concise Coherent

Writing for the Web

Creditable Avoid exaggerations Avoid being too chatty or cutesy Take care with humor Understand the user – age, skill level,

culture Let them know who you are and why

what you say is relevant and worth their time

Writing for the Web

Clear Assume your audience ‘knows nothing about

subject’ Make titles and headers meaningful Make icons and links apparent Define terms/Minimize jargon (use links) Use active voice Allow searching & sitemap Use lots of white space

Writing for the Web

Concise Keep it short – users Scan/Browse/Skim Use short words, sentences, paragraphs One idea per paragraph and state in

first sentence Use of bulleted lists

Writing for the Web

Coherent Intuitive Good menus – consistent & at top or

bottom Links work Good connections between paragraphs,

pages, ideas EDIT, EDIT, EDIT – spell and grammar

check & then EDIT again – Tools can help

Sample 1

St. Louis is filled with internationally recognized attractions that draw large numbers of people every year without fail. In 2006 some of the most popular places were the Gateway Arch (over 3 million visitors), Scott Joplin’s home (about 350,000 visitors), and the St. Louis Zoo (over 5 million visitors).

Sample 1 – concise, scannable, & objective

In 2006, three of St. Louis’ most visited attractions were: Gateway Arch Scott Joplin’s home St. Louis Zoo

Other suggestions???

Designing for the Web

Getting you started to think about issues – MU’s website design class provides you opportunity to explore in depth.

Let’s look at presentation of content, navigation, and design itself

Designing for the Web – Content Pet Peeves

Content (much of this is review)Too long – too much scrollingNot relevant or creditableLack of summariesInconsistency in language – style

and tonePunctuation and grammar errors

Designing for the Web – Content Solutions

Content – some answersDate each page (include reviewed

date)Use of logo and tag lineIdeas from our discussion on

Writing for the WebCustomize it for each user

Designing for the Web – Navigation Pet Peeves

Navigation – the concernsInability to find contentToo many clicks to get to linksToo many links (or too few)Poorly labeled links OR icons that look

like links but are notDead-end pagesGetting lost

Designing for the Web – Navigation Solutions

Navigation – some answersKeep navigation simple and

repetitive (same place & function on each page)

Organize information in order your user will look for it

Designing for the Web – Design Pet Peeves

Design itself – concernsToo many fonts and colorsClutterSlow downloads due to graphicsPop up windowsPlugins Accessibility – (multiple browsers and

special users)

Designing for the Web – Design Solutions

Design itself – some answersUse sans serif typefaces (Arial or Helvetica)Use large enough/not too large fonts—not too

manyAvoid caps and overuse of bold/italicsText flush left for optimum readingKeep pages to 50KB (3-10 sec. download)Don’t design for newest onlyContact Us!!! -- & meaningful URLs

Our successful website

Conveys its own distinctive image (to help enhance your organization’s)

Attractive & up-to-dateUnderstands and meets its users

needs (and changes as those needs change)

Offers choices and customization

Evaluate these websites

http://www.nypl.orghttp://www.plcmc.lib.nc.us/http://www.lib.fsu.edu/http://espn.go.com/http://www.kidsclick.org/http://www.sisseton.k12.sd.us/default.

htm

http://www.nypl.org/



http://www.plcmc.lib.nc.us/





http://www.lib.fsu.edu/





http://espn.go.com/

http://espn.go.com/

http://espn.go.com/

http://www.kidsclick.org/



http://www.sisseton.k12.sd.us/default.htm






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

Documents

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