INTERNET BASIC
INTRODUCTION TO HTML
1. With HTML you can create own website.
2. HTML stands for Hyper Text Mark-up Language.
3. HTML is derived from a language SGML(Standard Graphics Mark-up Language).
4. The future of HTML is XML(eXtended Mark-up language).
5. HTML is not a programming language, it is a mark-up language.
6. A mark-up language is a set of mark-up tags.
7. HTML uses mark-up tags to describe web pages.
8. HTML is not case sensitive language.
9. HTML documents contain HTML tags and plain text.
HTML ELEMENTS AND TAGS
1. A tag is always enclosed in angle bracket < > like <HTML>.
2. HTML tags normally come in pairs like <HTML> and </HTML> i.e.
Start tag = <HTML>
End tag = </HTML>
3. Starts and end tags are also called opening tags and closing tags.
HOW TO START
1. Write html code in notepad.
2. Save the file with (.html) or (.htm) extension.
3. View the page in any web browser Internet explorer, Mozilla Firefox, Netscape navigator
etc.
4. The purpose of a web browser (like, internet explorer or Firefox) is to read html
documents and display them as web pages.
CODE WITH HTML
<html>
<head> <title> MY FIRST PAGE </title> </head>
<body>
FIRST WEBPAGE
</body>
</html>
EXPLAIN THESE TAGS
1. <html> - Describe HTML webpage that is to be viewed by a web browser.
2. <head> - This defines the header section of the page.
3. <body> - This tag show contents of the web page will be displayed.
TYPES OF HTML TAGS
There are two different types of tags
1. Container Element
Container tags contains start tag & end tag i.e. <html> </html>.
2. Empty Element (or) Standalone Element
Empty tags contains start tag i.e. <br>, <img>, <hr>.
HEADING ELEMENT
1. There are six heading elements(<h1>,<h2>,<h3>,<h4>,<h5>,<h6>).
2. All the six heading elements are container tag and requires a closing tag.
3. <h1> will print the largest heading.
4. <h6> will print the smallest heading.
HEADING TAG CODE
<html>
<head> <title> Heading </title> </head>
<body>
<h1> H1 HEADING </h1>
<h2> H2 HEADING </h2>
<h3> H3 HEADING </h3>
<h4> H4 HEADING </h4>
<h5> H5 HEADING </h5>
<h6> H6 HEADING </h6>
</body>
</html>
OUTPUT
PARAGRAPH ELEMENT
1. HTML documents are divided into paragraph.
2. Paragraphs are defined with the <p> tag. i.e.
<p> This is a paragraph </p>
<p> This is another paragraph </p>
<pre> This text is preformatted </pre>
PARAGRAPH TAG CODE
<html>
<head> <title> Paragraph </title> </head>
<body>
<p> This is a paragraph </p>
<p> This is a another paragraph </p>
<pre> This text is preformatted </pre>
</body>
</html>
OUTPUT
LINE BREAK & HORIZONTAL LINE TAG
1. If you want a line break or a new line without starting a new paragraph use the <br> tag.
2. Defines a horizontal line use <hr> tag.
3. <br> <hr> elements are empty HTML element i.e. horizontal <hr> break <br> tag.
CODE
<html>
<head> <title> HR&BR </title> </head>
<body>
<p> Horizontal line <hr> Line <br> break </p>
</body>
</html>
OUTPUT
TEXT FORMATTING TAGS
<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.
<ins> - Defines inserted text.
<del> - Defines deleted text.
<tt> - Defines teletype text.
<u> - Defines underline text.
<strike> - Defines strike text.
TEXT FORMTTING CODE
<html>
<head> <title> Text Formatting </title> </head>
<body>
<b> This text is Bold </b> <br>
<em> This text is Emphasized </em> <br>
<i> This text is Italic </i> <br>
<small> This text is Small </small> <br>
This is <sub> Subscript </sub> and <sup> Superscript </sup> <br>
<strong> This text is Strong </strong> <br>
<big> This text is Big </big> <br>
<u> This text is Underline </u> <br>
<strike> This text is Strike </strike> <br>
<tt> This text is Teletype </tt>
</body>
</html>
FONT TAG
1. This element is used to format the size typeface and color of the enclosed text.
2. The commonly used fonts web pages are Arial, Comic Sans MS, Lucida Sans Unicode,
Arial Block, Courier New, Times New Roman, Arial Narrow, Impact, Verdana.
3. The size attribute in font tag takes values from 1 to 7.
FONT TAG CODE
<html>
<head> <title> Font Tag </title> </head>
<body>
<font color="green" size="7" face="Arial" > The text is Arial font size 7 </font> <br>
<font color=”green” size="6" face="comic sans ms" > The text is comic sans ms font size 6
</font> <br>
<font color=”green” size="5" face="luida sans Unicode" > The text is luida sans Unicode font
size 5 </font> <br>
<font color=”green” size="4" face="courier new" > The text is courier new font size 4 </font>
<br>
<font color=”green” size="3" face="Times new roman" > The text is Times new roman font size
3</font> <br>
<font color=”green” size="2" face="arial black" > The text is Arial black font size 2 </font> <br>
<font color=”green” size="1" face=”impact” > The text is impact font size 1 </font> <br>
</body>
</html>
BACKGROUND & TEXT COLOR TAG
1. The attribute bgcolor is used for changing the background color of the page. <body bgcolor=”green”>
2. Text is use to change the color of the enclosed text. <body text=”white”>
TEXT ALIGNMENT TAG
It is use to align of the text.
Left alignment <align=”left”>
Right alignment <align=”right”>
Center alignment <align=”center”>
CODE
<html>
<head> <title> Align </title> </head>
<body>
<h1 align="left">This is left alignment</h1>
<h1 align="center">This is center alignment</h1>
<h1 align="right">This is right alignment</h1>
</body>
</html>
HYPERLINK TAG
1. A hyperlink is a reference (an address) to a resource on the web.
2. Hyperlinks can point to any resource on the web: an HTML page, an Image, a sound file, a movie, etc.
3. The HTML anchor element <a> is used to define both hyperlinks and anchors. <a href=”url”></a>
CODE
<html>
<head> <title> Hyperlink</title> </head>
<body>
<a href="C:\Users\Vignesh KumarV\Desktop\BOOK\[Link]">Open Image</a>
</body>
</html>
Click Open Image
IMAGE TAG
1. To display an image on a page. You need to use the src(source) attribute.
2. Src stands for “Source”. The value of the src attributes is the URL of the image you want to display on you
page.
3. It is a empty tag. <img src=”url (or) location”> <img src=”[Link]”> <img src=”[Link]” height=”30”
width=”50”>
IMAGE ATTRIBUTES - <img> tag
<img> - Defines an image.
<src> - Display an image on a page src stands for “source”.
<alt> - Defines “alternate text” for an image.
<width> - Defines the width of the image.
<height> - Defines the height of the image.
<border> - Defines the border of the image.
<h space> - Horizontal space of the image.
<v space> - Vertical space of the image.
<align> - Align an image within the text.
<background> - Add a background image to an HTML page.
CODE