![Page 1: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/1.jpg)
All you ever needed to know…and more!
![Page 2: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/3.jpg)
TAGS
Beginning tag <>
Ending tag </>
Example:<H1>HELLO</
H1>
![Page 4: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/4.jpg)
HEADINGS
Change font sizes H1=largest H2 H3 H4 H5 H6=smallest
![Page 5: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/5.jpg)
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!
![Page 6: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/6.jpg)
Line Formatting
<p>=new paragraph
<br>=line break (spacing)
<hr>=horizontal rule
<p align=center>= paragraph alignment
![Page 7: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/8.jpg)
Ending tags
</body> Ends body of web page
</html> Ends entire page
*These tags must be at the end of every page!
![Page 9: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/10.jpg)
Practice Time…
Open notepad Use beginning tags Add 2 lines of text Ending tags Save and browse
![Page 11: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/11.jpg)
BACKGROUND & font COLORS Add after </head> tag <body bgcolor=“blue” text=“white”>
![Page 12: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/13.jpg)
Advanced tags
Change font size and type Under body tag or with it
<font size=“30” face=“Comic Sans MS”> </font>
Save & view
![Page 14: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/16.jpg)
ADVANCED TAGS Link your pages together
<a href=“file:///h|/pets.html”>My Pet Page</a>
Save & view
![Page 17: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/17.jpg)
ADVANCED TAGS Insert picture instead of text for links
<a href=file:///h|/pets.html><img src=“samspup_small.jpg”></img></a>
Save & view
![Page 18: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/18.jpg)
ADVANCED TAGS Use picture as background
<body background=“filename.ext”> Instead of <body bgcolor…> End with same tag </body> at bottom
Save & view
![Page 19: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/19.jpg)
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!!
![Page 20: 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](https://reader033.vdocuments.us/reader033/viewer/2022051820/56649ea95503460f94baccf5/html5/thumbnails/20.jpg)
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