HTML Tutorial 1 – Swati Lathia

Introduction

HTML stands for Hyper Text Markup Language
It is used to create static Web pages
HTML describes the structure of a Web page
HTML is made up of elements or tags
These elements tell the browser how to display the content

HTML Page Structure

Let’s check every tag/element of HTML:

HTML document begins with <html> and ends with </html>
The <html> element is the root element of an HTML web page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, form & its controls etc.
The <p> element defines a paragraph
The <h1> element defines a large heading

HTML Attributes

HTML attributes provide additional information about HTML elements
HTML elements can have attributes
Attributes are always specified in the start tag
Attributes usually come in name=value pairs like: name=”value” or color=”red”
Example : width & height attributes of <table> element, which specifies the width & height of a table in % in below example

<table width=”50%” height=”50%”>
             <tr><td>Bhavan’s </td></tr>
</table>

Heading Tags – <H1> to <H6>

HTML headings are titles or subtitles which is used to display on a web page.
HTML has <h1> to <h6> heading tags in which <h1> means the most important heading &<h6> means the least important heading.
According to the importance <H1> gives biggest text & <H6> gives smallest text. As we move from <H1> to <H6>, the size of the text decreases.

Example

<html>            
<head>
<title>Heading tags h1 to h6 example</title>            
</head> 
<body> 
<h1>We belong to H J Doshi Jamnagar</h1> 
<h2>We belong to H J Doshi Jamnagar</h2> 
<h3>We belong to H J Doshi Jamnagar</h3> 
<h4>We belong to H J Doshi Jamnagar</h4> 
<h5>We belong to H J Doshi Jamnagar</h5> 
<h6>We belong to H J Doshi Jamnagar</h6> 
</body> 
</html>

Browsers automatically add some white space (a margin) before and after a heading.

Steps to save & run HTML web page

Write your HTML code in any editor like notepad, notepad++, etc.
After writing your complete code, click on File ->save.
This will give you a window in which you can choose your location to save the file : Say D:/
Now write your file name with extension like “webpage1.html” in File Name option.
Choose “All Files” in Save as type & click on Save button.
To run HTML web page, just go to the location where you have saved your file “webpage1.html“. Say in our case, we have saved the file at D:/ (D drive).
Now you will have your file “webpage1.html” in D drive. Right click on the file & open it with any of the browser , say Chrome or Firefox or Internet Explorer or any other.
Now check your output.

Paragraphs – <p>

<p> element defines an HTML paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Horizontal Rules – <hr>

The <hr> tag defines a thematic break in an HTML web page, and is displayed as a horizontal rule (horizontal line).
It is used to separate content in an HTML web page.

<html> 
     <body> 
        <p>Hello Students</p> 
        <hr> 
        <p>Good Morning</p> 
        <hr> 
        <p>Have a nice day!!</p> 
     </body> 
</html>

Line Breaks – <br>

To define a line break, HTML uses <br> element.
It gives you a content in a new line.

<html>
     <body>
          <p>This is<br>a paragraph<br>with line breaks.</p>
     </body>
</html>

Preformatted Text – <pre>

HTML <pre> element defines preformatted text.
It means the text will be displayed exactly as written in the HTML code.
The text inside a <pre> element is displayed in a fixed-width font (Courier), and it preserves both spaces and line breaks.

<html> 
<body>                         
<p>The pre tag preserves both spaces and line breaks:</p> 
<pre>             “Bhavan’s H J Doshi Information Technology Institute                                     
                         1, Patel Colony,             
                         Mahila college campus,             
                         Jamnagar - 361008 
</pre>           
</body> 
</html>

Text Formatting tags

<b> – Bold text: It defines bold text, without any extra importance.
<strong> – Important text: It defines text with strong importance. The content inside is typically displayed in bold.
<i> – Italic text: It defines a part of text in an alternate voice or mood. The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
<em> – Emphasized text: It defines emphasized text. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
<mark> – Marked text: It defines text that should be marked or highlighted.
<small> – Smaller text: It defines smaller text.
<del> – Deleted text: It defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.
<ins> – Inserted text: It defines a text that has been inserted into a document. Browsers will usually underline inserted text.
Example: I would like to eat <del>Punjabi dish</del> <ins>Gujarati Dish</ins>
<sub> – Subscript text: It defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O:
Example: H<sub>2</sub>O
<sup> – Superscript text: It defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like (a+b)²:
Example: (a+b)<sup>2</sup>

How to write a comment

You can add comments to your HTML source code by using the following syntax:

<!– Write your comments here –>

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Comments are not displayed by the browser, but they can help document your HTML source code.
With comments you can place notifications and reminders in your HTML code.

List Tags

HTML lists allow you to group a set of related items in lists.

Unordered List

An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The <li> tag defines a list item.
The <li> tag is used inside ordered lists(<ol>) & unordered lists (<ul>) too.
The list items will be marked with bullets (small black circles) by default

<body>                         
<h2>An unordered HTML list example</h2> 
<ul>   
<li>Language C</li>   
<li>Networking</li>   
<li>HTML</li> 
<li>Computer Fundamentals</li>
</ul>  
</body>

If you want to change the style of list items from bullets to others, use the followings

Item Type

<body>
            <h2>An unordered HTML list</h2>
            <ul type=”square”>
                   <li>Language C</li>
                   <li>C++</li>
                   <li>PHP</li>
           </ul> 
</body>

You can also use images & links as list items <li>.

Ordered Lists

This is used to display list items in numbers or alphabets
An ordered list can be numerical or alphabetical.
This list is created by using <ol> tag.
The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

<ol> tag has other attributes too as follows

<html>    
          <head>       
                       <title>Ordered List of Search Engines</title>    
         </head>    
        <body>       
	<ol>        			      <li>Google</li>          
<li>Yahoo!</li>          		<li>Bing</li>          			<li>MSN</li>       
	</ol>    
		</body> 
</html>

Example: type=”A”

<html>    
	<head>       
		<title>HTML Ordered List</title>    
	</head>    
	<body>       
		<ol type = "A">          
		<li>Google</li>    	<li>Yahoo!</li>          
			<li>MSN</li>          <li>Bing</li>       
		</ol>    
	</body> 
</html>

start : You can use start attribute for <ol> tag to specify the starting point of numbering that you want. Following are the options:

<ol type = “1” start = “5”> – Numbers starts with 5.
<ol type = “I” start = “5”> – Numbers starts with V.
<ol type = “i” start = “5”> – Numbers starts with v.
<ol type = “a” start = “5”> – Letters starts with e.
<ol type = “A” start = “5”> – Letters starts with E.

Definition List tags

The definition list is the perfect way to present a glossary, list of terms, or other name/value list.
This tag makes use of 3 different tags :

<dl> − Defines the list
<dt> − A term
<dd> − Term definition

<html>
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         	<dd>HTML stands for HyperText Markup Language</dd>
         <dt><b>CSS</b></dt>
         	<dd>CSS stands for Cascading Style Sheets</dd>
      </dl>
   </body>
</html>

Link – Hyperlinks – Anchor tag : <a>

Links are nothing but a text with underline, when you move your mouse at the text, it will show you a “hand” icon.
If you click on it, it will open another page.
Links are found in usually all web pages. Links allow users to move from one page to another page, when you click on it.
This link is known as hyperlink.
You can click on a link and jump to another document.
A link does not only have to be text. It can also be an image or any other HTML element.
To create a hyperlink, <a> element is used.

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination (where you want to go).
The link text is the text that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

<a href=”d:/webpage1.html”>Click here</a>

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Target: By default, the linked page will be displayed in the current browser window.
If you want to change it, you have to apply another target for the link.The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self – Default: Opens the document in the same window/tab as it was clicked
_blank: Opens the document in a new window or tab
_parent: – Opens the document in the parent frame
_top: Opens the document in the full body of the window

<html>
	<body>
		<a href="d:/webpage1.html" target="_blank">Click to open in New tab</a>
		<p>This link will open in a new browser window or tab.</p>
	</body>
</html>

Absolute URLs & Relative URLs

Above example have used an absolute URL (a full path from drive to filename.extension) in the href attribute.
A local link (a link to a page within the same drive or folder) is specified with a relative URL (without the “folder or drive name” part):

<html>
	<body>
		<h2>Absolute URLs</h2>
		<p><a href="D:/html/Webpage1.html">Demo Example 1</a></p>
		<p><a href=" D:/format_tag/Webpage2.html"> Demo Example 2</a></p>
	        <h2>Relative URLs</h2>
		<p><a href="html_images.html">HTML Images</a></p>
		<p><a href="/css/default.html">CSS Tutorial</a></p>
	</body>
</html>

Links – Use an Image as a Link

If you want to use image as link, you have to take <img> inside <a> element.

<html>
	<body>
        <h2>Image as a Link</h2>
	<p>The image below is a link. Click on it</p>
	<a href="webpage.html"><img src="sunset.jpg" alt="A scenic view of sunset at river   side" height=”50%” width=”50%”></a>
	</body>
</html>

Inserting Special Characters & Symbols

For adding special characters in HTML, type an ampersand followed by a pound sign (&#) at the place within your HTML document where you want to add a special character
Type the number of the proper code for the character to add.
Type a semicolon (;) to finish.

You can also use entity names @copy;

<img> tag

The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

Attributes:

Src: It specifies the path to the image
Alt: It specifies an alternate text for an image, if the image for some reason cannot be displayed
Width: It specifies the width of an image in pixels or %
Height: It specifies the height of an image in pixels or %
Align: Aligns the image with its surrounding context. Allowed values: top, middle, bottom, left, right
Border: The width of a border around the image.
Hspace: The number of pixels of white space on the left and right of the image.
Vspace: The number of pixels of white space on the top and bottom of the image.

<img src="sunset.jpg" 
	height="180" 
	width="300" 
	alt="Sunset image" 
	border=”3” 
	hspace=”50” 
	vspace=”100”
	align=”middle”>

Usemap: It is used to specify the image as a client-side image-map. The image-map is the clickable image areas. The usemap attribute is used to create a relationship between the image and map.

<img usemap="#mapname">

mapname: It is used to hold the map name containing hash (#) character.

<Bgsound>tag

It is used to play the soundtrack in the background, when you leave the page behind and open a new tab this tag will continuously play the track in the background.
This tag is not for other browsers except the Internet Explorer.
It does not display any graphical interface just play the track in the background.

src: This attribute holds the path of the track that will be played in the background.
loop: This attribute holds a number that the number of times the track will play looping around.

<bgsound src="song.mp3" loop=2>

The Embed External Content element <embed>

Height: The displayed height of the resource in pixels. This must be an absolute value; percentages are not allowed.
Src: The URL of the resource being embedded.
Type: The MIME type to use to select the plug-in to instantiate.
Width: The displayed width of the resource in pixels. This must be an absolute value; percentages are not allowed.