1 / 26

HTML tutorial

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

yuri-santana
Download Presentation

HTML tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML tutorial

  2. 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.

  3. 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>

  4. 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.

  5. 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.

  6. 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}

  7. 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>

  8. Headings and alignment • Headings & Alignment • <H1></H1> • <H2></H2> • <H3></H3> • <H4></H4> • <H5></H5> • <H6></H6> • ALIGN {LEFT, CENTER, RIGHT} • <CENTER></CENTER>

  9. 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 -->

  10. Text Formatting • Bold <b></b> • Italics <i></i> • Subscript <sub></sub> • Superscript <sup></sup> • Underlined <u></u> • Strike-through <strike></strike>

  11. 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}

  12. 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!

  13. 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

  14. <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

  15. <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>

  16. <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>

  17. 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}

  18. <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>

  19. 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>

  20. 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}

  21. 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>

  22. 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>

  23. 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>

  24. 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,%}

  25. 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: "&nbsp;"

  26. 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>

More Related