Table of Contents
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 H2O:
- 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)2:
- 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.
- Example: The © (copyright) symbol can be displayed by using ©.
- 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.