HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The...
-
Upload
norman-williamson -
Category
Documents
-
view
214 -
download
1
Transcript of HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The...
![Page 1: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/1.jpg)
HTML
BASICS
![Page 2: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/2.jpg)
Why can we see images and text, hear sounds, and view
video files on the Web?
The browser and a language called HTML are largely responsible.
![Page 3: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/3.jpg)
HyperText Markup Language
<HTML>
What IS that
anyway?
ANSWER:
Coding language used to create hypertext (linking) documents for use on the World Wide Web
![Page 4: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/4.jpg)
HTML coding is read by a browser, such as Netscape or Internet
» Explorer
![Page 5: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/5.jpg)
• You can write your own HTML files with simple “coding tags”
• Tags work in pairs to begin and end a command.
Write html? Who, me?
beginning tag < > ending tag </ >
![Page 6: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/6.jpg)
• Browsers read these coded <tags> and create what you see and hear in your browser including colored backgrounds,
graphics, font size and style, .midi and .wav files, videos...
![Page 7: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/7.jpg)
• Here comes the HTML coding...
Let’s look at a basic one…just for fun, of course!
![Page 8: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/8.jpg)
<html><head><title>Artesian/Letcher Fifth Grade</title><h1 align=“center” font face=“ComicSans MS”>Artesian/Letcher Fifth Grade</font></h1></head><body><center><img src=“kids3.jpg”></center><font face=“Comic Sans MS”>Yadda, yadda, yadda</font face></body></html>
Huh??
![Page 9: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/9.jpg)
Here’s What You’ll See Title Bar
Heading Body
![Page 10: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/10.jpg)
Here are some basic tags:
<html> </html>Explanation: These tags tell the
browser to begin and end reading an html file.
<head> </head>Explanation: The browser will read what
is between these tags as the heading.
![Page 11: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/11.jpg)
The Title of Your Webpage
<title>A/L Fifth Grade</title>
Explanation: Whatever you type between the <title> tags will appear in the title bar at the top of the browser window.
![Page 12: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/12.jpg)
More tags
<center> </center>Explanation:Center whatever is between these tags
<h1> <h1>Explanation: These tags indicate heading size. You can choose from 1-5, 1 being the largest.
![Page 13: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/13.jpg)
Huh??
Font Style, Size, and Color<font face= “ComicSans MS”><font color="#0000FF"><font size=+1>
Explanation:These tags command the font style, color, and size. Each color has a code.
![Page 14: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/14.jpg)
The Body of Your Page
<body> </body> Explanation: Whatever appears between these tags will be read as the body or “meat” of the webpage.
Hey, I think I understand this!
![Page 15: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/15.jpg)
An image in the body??
<img src=“kids3.jpg”>
Explanation:Insert an image (img) here. The source is named “kids3.jpg” NOTE: You must have the image in the file in order for the browser to read it.
![Page 16: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/16.jpg)
Text in the Body
Type whatever you want to say in the body of your webpage between the body tags.
Example: <body>Yadda, yadda, yadda…</body>
![Page 17: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/17.jpg)
HTML is a great help when you need to trouble shoot in the WYSIWYG web development software!
• Of course, there’s much much
much MUCH more to html!
• A super site to learn more is called HTML Goodies located at http://www.htmlgoodies.com/
![Page 18: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/18.jpg)
![Page 19: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/19.jpg)
Let’s Make One!
• Make a new folder under “personal” called HTML
• Find an image you’d like to use on your page
• Save it in your HTML folder– It must be in .jpg or .gif format
![Page 20: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/20.jpg)
Now for the HTML
• We’ll type it in Notepad
• Start/Programs/
Accessories/
Notepad/
• New File
![Page 21: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/21.jpg)
Here’s the code:• <html>• <head>• <title>Type what you want in the title bar
here• </title>• <h1 align=“center”>< font face=“ComicSans
MS”>– Type what you want your heading to say here.
• </center></font face> </h1>• </head>
![Page 22: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/22.jpg)
The body• <body>• <center>• <img src=“kids3.jpg”>• </center>• <font face=“Comic Sans MS”>• <center>• Type what you want to say in the body under
your image here.• </center>• </font face>• </body>• </html>
![Page 23: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/23.jpg)
Let’s Save It!!
• File/Save As
• Type in a file name with the extension .html
• Example name: school.html
• Put it in your HTML folder with your graphic
![Page 24: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/24.jpg)
Let’s Browse It!
• Open a browser (Netscape or Internet Explorer)
• NETSCAPE--File/Open Page/Choose File
– Browse to your file (OK)
• INTERNET EXPLORER--File/Open
– Browse to your file (open,OK)
![Page 25: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/25.jpg)
ABRACADABRA!!
You did it!!!
---If it didn’t work, find errors and try again. It will work!
![Page 26: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/26.jpg)
<html><head><title>Artesian/Letcher Fifth Grade</title><h1 align="center"><font face="Comic Sans MS">Artesian/Letcher Fifth Grade</center></font face></h1> </head><body><center><img src="kids3.jpg"></center><font face="Comic Sans MS"><center>Yadda, yadda, yadda</font face></center></body></html>
![Page 27: HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The browser and a language called HTML are largely responsible.](https://reader035.fdocuments.net/reader035/viewer/2022070413/5697bfde1a28abf838cb20c0/html5/thumbnails/27.jpg)