HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The...
27
HTML BASICS
-
Upload
norman-williamson -
Category
Documents
-
view
213 -
download
1
Transcript of HTML BASICS Why can we see images and text, hear sounds, and view video files on the Web? The...
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.
HyperText Markup Language
<HTML>
What IS that
anyway?
ANSWER:
Coding language used to create hypertext (linking) documents for use on the World Wide Web
HTML coding is read by a browser, such as Netscape or Internet
» Explorer
• 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 </ >
• 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...
• Here comes the HTML coding...
Let’s look at a basic one…just for fun, of course!
<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??
Here’s What You’ll See Title Bar
Heading Body
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.
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.
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.
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.
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!
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.
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>
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/
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
Now for the HTML
• We’ll type it in Notepad
• Start/Programs/
Accessories/
Notepad/
• New File
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>
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>
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
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)
ABRACADABRA!!
You did it!!!
---If it didn’t work, find errors and try again. It will work!
<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>
