Download
1 / 35
370 likes | 492 Views
HTML. HTML stands for Hypertext Markup Language. It is a type of computer language created just for the internet. It tells your computer what to do. Basic Rules. HTML is written in all lowercase Tags must be enclosed with brackets < >
E N D
HTML HTML stands for Hypertext Markup Language. It is a type of computer language created just for the internet. It tells your computer what to do.
Basic Rules • HTML is written in all lowercase • Tags must be enclosed with brackets < > • Tags should be written on separate lines unless they are part of the same paragraph • If one item is missing or misplaced, the tag will not work.
Open vs. Closed An open tag looks like this: <html> A closed tag looks like this: </html> Not all tags need a closed tag.
Examples With a closed tag: The <b>dog</b> barked The dog barked Without a closed tag: The <b>dog barked The dog barked
Attributes Some tags need extra direction. These extra directions need to be surrounded by quotation marks so that the computer understands that what exactly you want.
Example Look at the following tag: <font color=“66ffcc”> The quotations tell the computer exactly what color to change the font to.
Starting Tags The following 4 tags will ALWAYS start every web page.
<html> This tag tells the computer to start reading the html language. Closing Tag: </html>
<head> This tag holds information about your web page such as keywords (meta tags), titles, etc. Closing Tag: </head>
<title> This tag creates a title for the browser Closing Tag: </title>
<body> This tag starts the main part of the web page that viewers will see, such as text, graphics, etc. Closing Tag: </body>
The start of EVERY web page should look like this: <html> <head> <title> <body>
The closing tags for <html>, <head>, and <body> go at the END of the entire web page document.
Formatting Formatting tags allow you to change colors, font, size, etc.
<h…1-6> Creates a heading Open Tag with Attribute: <h1> or <h3> Closing Tag: </h>
<body bgcolor> This tag allows you to set a solid color for the background. You must use a web safe color. Open Tag with Attribute: <body bgcolor= “#0099CC”> No closing tag
<body background> This tag allows you to put a picture in the background Open Tag with Attribute: <body background=“picture.gif”> <body background=“http:www….”> No closing tag
<i> Italicizes text Closing Tag: </i>
<b> bolds text Closing Tag: </b>
<u> underlines text Closing Tag: </u>
<font color> This tag allows you to change the color of your text Open Tag with Attribute: <font color=“#66ccff”> Closing Tag: </font color>
<font size> This tag allows you to change the size of your text Open Tag with Attribute: <font size=“3”> Closing Tag: </font size>
<imgsrc> Places a photo or graphic Open Tag with Attribute: <img src=“picture.gif”> <img src=“http:www….”>
<height> <width> Changes the pixel size of an image Combined tag with attribute: <img src=“picture.gif” height=100 width=100>
<p> Creates a new paragraph No Closing Tag
<br> Creates a line break No Closing Tag
<hr> Creates a separating line Closing Tag: </hr>
<a href> Creates a link Open and Closing Tag with Attribute: <a href=“http://www.google.com”> Google </a>
<a href=“mailto:”> Creates an e-mail link Open and Closing Tag with Attribute: <a href=“mailto: estrella.webdesign@yahoo.com”> E-mail </a>
<ul> Makes an unordered (bulleted list) Closing Tag: </ul>
<ol> Makes an ordered (numbered list) Closing Tag: </ol>
<li> Creates list items No Closing Tag
Example of <ul> list <ul> Favorite Movies <li> Hangover <li> Flicka <li> Rugrats Movie <li> Despicable Me </ul> • Favorite Movies • Hangover • Flicka • Rugrats Movie • Despicable Me
Example of <ol> list <ol> Classes <li> English <li> Math <li> Web Design <li> Government </ol> Classes English Math Web Design Government
