all you ever needed to know…and more!. h.t.m.l. hypertext mark-up language web’s programming...
TRANSCRIPT
All you ever needed to know…and more!
H.T.M.L.
HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with tags
(special codes) Make web sites
TAGS
Beginning tag <>
Ending tag </>
Example:<H1>HELLO</
H1>
HEADINGS
Change font sizes H1=largest H2 H3 H4 H5 H6=smallest
Appearance tags (how fonts look)
<b>=bold <I>=italics <u>=underline <blink>text</blink>
*To combine heading & appearance:
<h2><I>This is cool!</h2></I>
This is cool!
Line Formatting
<p>=new paragraph
<br>=line break (spacing)
<hr>=horizontal rule
<p align=center>= paragraph alignment
SAMPLE PAGE
What the beginning of a page looks like: <html> <head> <title>Everything About Me</title> </head> <body bgcolor=“blue” text=“white”> <h1>My name is Alice Lingo</h1> etc.
Each tag needs to be on a separate line
Ending tags
</body> Ends body of web page
</html> Ends entire page
*These tags must be at the end of every page!
How to start programming Open notepad Beginning tags Add info Save as:
filename.html Changes to a web
browser file
Open in explorer View sample page
Practice Time…
Open notepad Use beginning tags Add 2 lines of text Ending tags Save and browse
BACKGROUND & font COLORS Add after </head> tag <body bgcolor=“blue” text=“white”>
Other tags
Ordered list (numbered) <h3>My Favorite
Places</h3> <OL>=indicates beginning of list <LI>Orlando <LI>Hawaii <LI>North Clarion </OL>=indicates end of list
Unordered List (bulleted) Same, but change <OL>
to <UL> Save and view
Advanced tags
Change font size and type Under body tag or with it
<font size=“30” face=“Comic Sans MS”> </font>
Save & view
ADVANCED TAGS Insert images & change their size
Place tag where you want picture to appear <img src=“filename.ext” width=“100” height=“100”> </img>
Save & view
ADVANCED TAGS Link pages to another site
Place tag where you want link to appear <a href=“www.wal-mart.com>WalMart</a>
Save & view
ADVANCED TAGS Link your pages together
<a href=“file:///h|/pets.html”>My Pet Page</a>
Save & view
ADVANCED TAGS Insert picture instead of text for links
<a href=file:///h|/pets.html><img src=“samspup_small.jpg”></img></a>
Save & view
ADVANCED TAGS Use picture as background
<body background=“filename.ext”> Instead of <body bgcolor…> End with same tag </body> at bottom
Save & view
WEB PAGE PROJECT
Create a web site about yourself Must have at least 4 pages Hyperlinks
3 links to favorite web sites All pages linked back and forward
Ordered or Unordered list Horizontal rules Clipart, Fonts and backgrounds used
*Make sure all fonts are visible and readable; check spelling and links!!
Beginning tags <HTML>
must be at the top and bottom of every web page
Indicates beginning and end of an HTML
<head> contains info about the web page
<title>name of web site</title> Title of your web page
Blue title at top
</head> Ends heading info