html hypertext markup language. text files an array of bytes stored on disk each element of the...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/1.jpg)
HTML
HyperText Markup Language
![Page 2: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/3.jpg)
NotePad - a simple text editor
• Menu path to find NotePad• Menus are trees too!
– Start->Programs->Accessories->NotePad
![Page 4: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/5.jpg)
Publishing Web Pages
NotePad<html>my first web page</html>
Web Browser
Computer Disk
Web Server
Internet
![Page 6: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/6.jpg)
Publishing Web pages
NotePad<html>my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page</html>
![Page 7: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/7.jpg)
Special Problems with NotePad• Wants to store files as myPage.txt not
myPage.html
![Page 8: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/8.jpg)
Special Problems with NotePad• Wants to store files as myPage.txt not
myPage.html
![Page 9: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/9.jpg)
Special Problems with NotePad
![Page 10: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/10.jpg)
Publishing Web pages
NotePad<html>my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page</html>
![Page 11: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/11.jpg)
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
![Page 12: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/13.jpg)
NotePad / Web Browser Demo
![Page 14: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/15.jpg)
Bold Demo
![Page 16: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/17.jpg)
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>
![Page 18: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/18.jpg)
Save Demo
![Page 19: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/22.jpg)
Multiple Lines Demo
• Web browsers arrange lines according to the width of the window, not the lines in the HTML file
![Page 23: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/23.jpg)
Other formatting tags
• <P> make a new paragraph
• <I> </I> italic
• <ul> unordered list– <li> list item
![Page 24: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/24.jpg)
<p> paragraph
![Page 25: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/25.jpg)
<I> </I> italic
![Page 26: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/26.jpg)
<ul> <li> lists
![Page 27: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/27.jpg)
<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
![Page 28: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/28.jpg)
<img src=“ “>
![Page 29: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/29.jpg)
<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
![Page 30: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/30.jpg)
Hyperlink Example
![Page 31: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/31.jpg)
Image Hyperlink Example
![Page 32: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/32.jpg)
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>
![Page 33: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/33.jpg)
Publishing Web pages
NotePad<html>my first web page</html>
Netscape
myPage.html
Web Server
Internet
Save <html>my first web page</html>
![Page 34: 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](https://reader035.vdocuments.us/reader035/viewer/2022062322/5697c0071a28abf838cc5de3/html5/thumbnails/34.jpg)
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