Embed Size (px)
Citation preview
HTML
HyperText Markup Language
Text Files
• An array of bytes stored on disk
• Each element of the array is a text character
• A text editor is a user program for changing text files
• HTML is a text file that is written in a special language for talking to web browsers
NotePad - a simple text editor
• Menu path to find NotePad• Menus are trees too!
– Start->Programs->Accessories->NotePad
HTML in NotePad
• <html> and </html> are called tags– Anything inside of < > in HTML is a tag
– Tags are instructions about the text for the browser
Publishing Web Pages
NotePad<html>my first web page</html>
Web Browser
Computer Disk
Web Server
Internet
Publishing Web pages
NotePad<html>my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page</html>
Special Problems with NotePad• Wants to store files as myPage.txt not
myPage.html
Special Problems with NotePad• Wants to store files as myPage.txt not
myPage.html
Special Problems with NotePad
Publishing Web pages
NotePad<html>my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page</html>
Publishing Web pages
NotePad<html>my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page</html>
http://there.com/myPage.html
GET
my first web page
Web pages on one computer
NotePad<html>my first web page</html>
Web Browser
myPage.html
Save <html>my first web page</html>
myPage.html
my first web page
Open Page
NotePad / Web Browser Demo
Bold text
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save <html>my first web page</html>
myPage.html
Open Page
my first web page
Bold Demo
Why didn’t bold appear?
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save <html>my first web page</html>
myPage.html
Open Page
my first web page
Do Save
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
Open Page
my first web page
<html>my <b>first</b> web page</html>
Save Demo
It Still Didn’t Appear
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page</html>
Open Page
Reload
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page</html>
Reload
Multiple Lines
NotePad<html>my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page</html>
Reload
Multiple Lines Demo
• Web browsers arrange lines according to the width of the window, not the lines in the HTML file
Other formatting tags
• <P> make a new paragraph
• <I> </I> italic
• <ul> unordered list– <li> list item
<p> paragraph
<I> </I> italic
<ul> <li> lists
<img> - adding images
• <img src=“any URL”>– <img src=“http://icie.cs.byu.edu/cs100.gif”>
• <img src=“file name”>– If the image file is in the same folder as the html file
– <img src=“cs100.gif”>
• Demo
<img src=“ “>
<a> - anchor
• Used to create hyperlinks
• <a href=“any URL”>text for the link</a>• <a href=“file name”>text for the link</a>
– Linked file must be in the same folder
• Demo
Hyperlink Example
Image Hyperlink Example
Review
• HTML is just text with special tags
• <html> </html>
• <b> </b>
• <I> </I>
• <ul> <li> <li> <li> </ul>
• <img src=“image.gif”>
• <a href=“link.html”>link text</a>
Publishing Web pages
NotePad<html>my first web page</html>
Netscape
myPage.html
Web Server
Internet
Save <html>my first web page</html>
Web pages on one computer
NotePad<html>my first web page</html>
Netscape
myPage.html
Save <html>my first web page</html>
myPage.html
my first web page
Open Page / Reload
