Download
1 / 26
280 likes | 487 Views
HTML tutorial. HTML DOCUMENT. HTML documents are text files made up of HTML elements . (remember “index.htm”?) We edited these files in notepad and saved them as .htm or .html HTML elements are defined using HTML tags. HTML TAGS. HTML tags are used to mark-up HTML elements
E N D
HTML DOCUMENT • HTML documents are text files made up of HTML elements. (remember “index.htm”?) We edited these files in notepad and saved them as .htm or .html • HTML elements are defined using HTML tags.
HTML TAGS • HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • The surrounding characters are called angle brackets • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The text between the start and end tags is the element content • HTML tags are not case sensitive, <b> means the same as <B>
Example <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Lower case tags are recommended and standard now.
TAG ATTRIBUTES • Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. • This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">. • This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0"> • Attributes always come in name/value pairs like this: name="value". • Attributes are always added to the start tag of an HTML element. • Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.
Mandatory tags • Mandatory Tags • <HTML></HTML> • <HEAD></HEAD> • <TITLE></TITLE> • <BODY></BODY> • TEXT {COLOR} • BGCOLOR {COLOR} • BGSOUND {*.MIDI, *.WAV, *.MP3} • BACKGROUND {*.BMP, *.GIF, *.JPG, *.PNG} • LINK, ALINK, VLINK {COLOR}
Paragraph Formatting • Paragraphs, Line Breaks, Horizontal Rules, and Basic Formatting • <P></P> • <BR> • <HR> • SIZE {1-N, %} • WIDTH {1-N, %} • COLOR {COLOR} • ALIGN {LEFT, CENTER, RIGHT} • <B></B> • <U></U> • <I></I>
Headings and alignment • Headings & Alignment • <H1></H1> • <H2></H2> • <H3></H3> • <H4></H4> • <H5></H5> • <H6></H6> • ALIGN {LEFT, CENTER, RIGHT} • <CENTER></CENTER>
Comments • The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. • <!-- This is a comment -->
Text Formatting • Bold <b></b> • Italics <i></i> • Subscript <sub></sub> • Superscript <sup></sup> • Underlined <u></u> • Strike-through <strike></strike>
Advanced Text Formatting Font The <font> tag specifies the font face, font size, and font color of text. <font> </font> {color: rgb(x,x,x), #xxxxxx, colorname} {face: list_of_fontnames} {size: 1-7}
Font Example • <font size="3" color="red">This is some text!</font><font size="1" color="blue">This is some text!</font><font face="arial" color="red">This is some text!</font> This is some text!This is some text!This is some text!
Links (Anchors) The <a> tag defines an anchor. An anchor can be used in two ways: • To create a link to another document by using the href attribute • To create a bookmark inside a document, by using the name or id attribute
<a> Continued.. <a> </a> {href: URL} {name: section_name} {target: _blank,_parent,_self,_top} _blank: the target URL will open in a new window _parent: the target URL will open in the parent frameset _self: the target URL will open in the same frame as it was clicked _top: the target URL will open in the full body of the window
<a> Examples: Linking to another page <html> <body> <p> <a href="lastpage.htm">This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p> </body> </html>
<a> Examples: Linking to Section on same page <html> <body> <a href="#C4">See also Chapter 4</a> <h2>Chapter 1</h2> This chapter explains ba bla bla <h2>Chapter 2</h2> This chapter explains ba bla bla <h2>Chapter 3</h2> This chapter explains ba bla bla <h2><a name="C4">Chapter 4</a></h2> This chapter explains ba bla bla </body> </html>
Adding Images <img> • The img element defines an image. <img /> {alt: text } {src: URL } {align: top,bottom,middle,left,right} {border: pixels} {height: pixels,%} {width: pixels,%} {usemap: URL}
<img> example: adding images <html> <body> An image from another folder: <img src="/images/netscape.gif" alt="Netscape" width="33" height="32" /> An image from W3Schools: <img src="http://www.w3schools.com/images/ie.gif" alt="IE" width="73" height="68" /> </body> </html>
Aligning Images <p> <img src="angry.gif" alt="Angry" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p>
Image Maps <map> and <area> <map> defines an Image map. An image-map is an image with clickable regions. Note: The area element is always nested inside the map element. The area element defines the regions in the image map. The usemap attribute in <image> refers to the id or name (browser dependant) attribute in <map>. {name: unique_name} {id: unique_name} <area> Defines a region in the image map. This element is always nested in the <map> tag. {coords: For shape=“rectangle” coords=“left,top,right,bottom” For shape=“circ” coords=“centerx,centery,radius” For shape=“poly” coords=“x1,y1,x2,y2,x3,y3……xn,yn”} {href: URL} {shape: rect,rectangle,circ,circle,poly,polygon} {target: _blank,_top,_self,_parent}
Image Map Example <p>Click on one of the planets:</p> <img src ="planets.gif“ width="145" height="126“ alt="Planets“ usemap ="#planetmap" /><map id ="planetmap“ name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /></map>
Lists • Unordered Lists <ul> </ul> {type: disc,square,curcle} • Ordered Lists <ol> </ol> {type: A,a,1,i} • List Element <li> </li> • Definition Lists <dl> </dl> • Definition Term <dt> </dt> • Definition <dd> </dd>
Lists Examples UNORDERED LIST <ul> <li>Coffee</li> <li>Milk</li> </ul> ORDERED LIST <ol> <li>Coffee</li> <li>Milk</li> </ol> DEFINITION LIST <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Basic Tables The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables. {align: left,center,right} {bgcolor: COLOR} {background: URL} {border: pixel} {cellpadding: pixel,%} {cellspacing: pixel,%} {width: pixel,%}
Table Row <tr> Table data<td> <tr> </tr> defines a row in a table; {align: } {bgcolor: } <td> </td> defines a CELL in a table; {align: left,right,center} {bgcolor: COLOR} {height: pixel,%} {width: pixel,%} {valign: top,middle,bottom,baseline} {nowarp: } Non breaking SPACE: " "
Table Example <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
