creating a web page html: the language of the web
TRANSCRIPT
![Page 1: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/1.jpg)
Creating a Web Page
HTML: The Language of the WEB
![Page 2: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/2.jpg)
HTML• To create a web page you use a special
language that Browsers can read.
Hyper Text
Markup
Language
![Page 3: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/3.jpg)
The Web Browser• is the software program on YOUR
computer
![Page 4: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/4.jpg)
The Web Browser
• Can locate HTML documents on any server anywhere in the world.
![Page 5: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/5.jpg)
HTML Documents
• Simple TEXT documents.
• Created with a simple text editor
![Page 6: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/6.jpg)
Some Text Editors
• The WordPad in Windows– Start Accessories WordPad
• The NotePad in Windows– Start Accessories NotePad
• MS WORD in Windows
![Page 7: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/7.jpg)
Start an HTML document
<HTML>
</HTML>
•These are <TAGS>•They tell the Browser that an HTML document is coming.
![Page 8: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/8.jpg)
Header Stuff
<HTML>
<HEAD>
<TITLE> My Page
</TITLE>
</HEAD>
• Goes into the Blue line
• A place for a title
![Page 9: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/9.jpg)
Next comes the <Body>
<BODY>
</BODY>
This is the main part of your document.
![Page 10: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/10.jpg)
Modifiers
• <BODY BGCOLOR=“006600”>
![Page 11: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/11.jpg)
HTML Codes entered in a TEXT editor
<HTML>
< HEAD >
< TITLE >
< /TITLE >
< /HEAD >
< BODY >
</ BODY >
</HTML>
<HTML> tags indicate code is written in HTML
< TITLE > tags identify the Title.
< HEAD > tags surround information about the web page
< BODY > tags surround the portion of the document that will appear in the browser window.
![Page 12: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/12.jpg)
SPACES . .The paragraph tag
• < P > • < / P >
• Adds extra blank lines before text to separate it from any text that precedes it.
![Page 13: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/13.jpg)
Section headings
<H1></H1>
• Makes the headings BIG and Black
and Bold
![Page 14: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/14.jpg)
How Big???
This is <H1>This is <H2>This is <H3>This is <H4>This is <H5>
This is <H6>
![Page 15: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/15.jpg)
Center It…Formats the heading< H1 ALIGN=CENTER >
My favorite Sport.
< /H1 >
•Also try < Center >
•Don’t forget to close the tag
</H1>
![Page 16: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/16.jpg)
< H1 ALIGN = LEFT >
• Just use <P> </P>
• This is the Default
![Page 17: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/17.jpg)
Creating Lists
HTML supports three kinds of lists:– Ordered lists
– Unordered lists
– Definition lists
![Page 18: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/18.jpg)
Ordered Lists
a list in numeric order
My Favorite Movies1. Mouse Hunt
2. Mary Poppins
3. Something about Mary
![Page 19: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/19.jpg)
Ordered Lists
<H3>My Favorite Movies</H3>
<OL>
<LI>Something About Mary
<LI>Mary Poppins
<LI>Mouse Hunt
</OL>
![Page 20: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/20.jpg)
Unordered Lists
• Items have no particular orderFamous Male Actors
• Roy Rogers
• Gene Autry
• Hopalong Cassity
http://westerns.com/sounds/roy_rogers-west_is_in_my_soul.mp3
![Page 21: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/21.jpg)
Unordered List bullet list
<H3>Famous Male Actors</H3>
<UL>
<LI>Roy Rogers
<LI>Gene Autry
<LI> Hopalong Cassity
</UL>
![Page 22: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/22.jpg)
The Definition List
• A list of Terms followed by a definition line
Famous Movie Horses– Topper
• Hopilong Cassidy’s horse
– Trigger• Roy Roger’s Horse
– Champion• Gene Autry’s Horse
![Page 23: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/23.jpg)
Definition List
<H3>Famous Movie Horses</H3><DL><DT>Topper
<DD>Hopalong Cassity’s Horse<DT>Trigger
<DD>Roy Roger’s Horse<DT>Champion
<DD>Gene Autry’s Horse</DL>
![Page 24: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/24.jpg)
Character Tags
A <Tag> you apply to an individual character.
2 Kinds– Logical - how you use text
– Physical – how text looks
![Page 25: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/25.jpg)
Logical Tags
<EM> Emphasized mode
• Indicates that characters should be emphasized in some way..itallics
<STRONG>
• Emphasizes text more strongly than <EM>
![Page 26: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/26.jpg)
Physical Character Tags
• How characters look<B> bold
<I> Itallics
<BIG> big
<SMALL> small
<SUB> subscript
<SUP> superscript
![Page 27: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/27.jpg)
Big BLACK Lines
• <HR> Horizontal Rule
• Adjust the WIDTH to ¾
<HR WIDTH=75%>
• Center the HR
<HR ALIGN=CENTER>
• Set the SIZE <HR SIZE=12>
![Page 28: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/28.jpg)
More < HR > stuff
• Do it All in one HR TAG
<HR ALIGN=CENTER
SIZE=12
WIDTH=75%>
• Or<HR ALIGN=CENTER SIZE=12 WIDTH=75%>
![Page 29: Creating a Web Page HTML: The Language of the WEB](https://reader035.vdocuments.mx/reader035/viewer/2022062322/56649d835503460f94a68f98/html5/thumbnails/29.jpg)