Embed Size (px)
Citation preview
HTMLHyper Text Markup Language
1
First developed by Tim Berners-Lee in 1990, HTML isshort for HyperText Markup Language. HTML is used tocreate electronic documents (called pages) that aredisplayed on the World Wide Web. Each page containsa series of connections to other pages called hyperlinks.Every web page you see on the Internet is written usingone version of HTML code or another.
2
HTML code ensures the proper formatting oftext and images so that your Internetbrowser may display them as they are intendedto look. Without HTML, a browser would notknow how to display text as elements or loadimages or other elements.
3
Tag Description
<html>...</html> Defines an HTML document
<body>...<body> Defines the document's body
<h1> to <h6>Defines HTML headings<h1> defines the largest heading. <h6> defines the smallest heading.
<p>...</p> Paragraphs are defined with <p> tags.
<center>...</center> It centers the text.
<b>...</b>, <i>...</i>,<u>...</u>
It defines bold, italic and underline text respectively.
<hr/> Defines a horizontal line
<br> the <br> tag defines a line break. It is an empty element without a closing tag .
<!--> Defines a comment
SOME IMPORTANT TAGS
4
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
5
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br>
HTML Elements
An HTML element is everything from the start tag
to the end tag:
* The start tag is often called the opening tag. The end tag is often
called the closing tag.
6
• Don't Forget the End Tag
• Use Lowercase Tags
• <br> is an empty element without a closing tag (the <br> tag defines a line break)
• Use HTML headings for headings only. Don't use headings to make text BIG or bold.
• <!-- This is a comment -->
7
<html>
<body>
Hello World!!!
This is my first website.
</body>
</html>
8
<html><body>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body></html>
HTML Headings
9
HTML Paragraphs
<html>
<body>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
10
Center Texts
<html>
<body>
<center>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</center>
</body>
</html>
11
Text Formatting<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
12
Hidden Comments
Comments can be inserted into the HTML codeto make it more readable and understandable.Comments are ignored by the browser and arenot displayed.
Comments are written like this:
<!-- This is a comment -->
13
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
14
HTML Lines
• The <hr/> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
15
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr/>
<p>This is a paragraph</p>
<hr/>
<p>This is a paragraph</p>
<hr/>
<p>This is a paragraph</p>
</body>
</html>
16
HTML Background color
<html>
<body bgcolor= "red ">
</body>
</html>
17
HTML Background image
<html>
<body background="images/back.gif" >
</body>
</html>
18
HTML Links
<html>
<body>
<p><a href="http://www.google.com/">Visit Google</a> </p>
<p>
<a href="http://www.google.com/" target="_blank“ > Visit Google!</a>
</p>
</body>
</html>
19
HTML Images
<html>
<body>
<h2>Mehmet Akif College Prizren</h2>
<img border="0" src="images/mac.jpg" alt= “MAC" width= " 500" height= "400" />
</body>
</html>
20
HTML FONTS<html><body bgcolor="yellow" ><p><font size="5" face="arial" color="red">This paragraph is in Arial, size 5, and in red text color.</font></p>
<p><font size="3" face="verdana" color="blue">This paragraph is in Verdana, size 3, and in blue text color.</font></p></body></html>
21
<html><body>
<table border="1">
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
</body></html>
HTML Tables
22
<html><body>
<table border="1"><tr>
<th>Month</th><th>Savings</th>
</tr><tr>
<td>January</td><td>$100</td>
</tr></table>
</body></html>
HTML Tables
<html><body>
<table border="1"><tr>
<th>Header 1</th><th>Header 2</th>
</tr><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table> </body></html>
1 2
23
ORDERED LIST
<html><body>
<h4>An Ordered List:</h4><ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
</body></html>
<html><body>
<h4>An Unordered List:</h4><ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
</body></html>
UNORDERED LIST
1 2
HTML Styles<html><body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">This text is in Verdana and red</p>
<p style="font-family:times;color:green;">This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body></html>
25
Image Alignment-1<html>
<body>
<p>An image
<img src= "images/smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html> 26
Image Alignment-2<html><body>
<p><img src=" images/smiley.gif" alt="Smiley face" 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>
<p><img src=" images/smiley.gif" alt="Smiley face" align="right" width="32" height="32" />A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.</p>
</body></html>
27
Image Alignment-3<html><body>
<p>Create a link of an image:<a href="default.asp"><img src=" images/smiley.gif" alt="HTML tutorial" width="32" height="32" /></a></p>
<p>No border around the image, but still a link:<a href="default.asp"><img border="0" src=" images/smiley.gif" alt="HTML tutorial" width="32" height="32" /></a></p>
</body></html>
28
