Topics Available
HTML Headings:
HTML headings are used to create headings or titles on a web page. They are used to give structure and hierarchy to the content on a web page, making it easier for users to understand the content and navigate the page. HTML has six different levels of headings, from <h1> to <h6>, with <h1> being the most important and <h6> being the least important.
Here’s an example of how HTML headings can be used:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Sub-Subheading</h3>
<p>This is some text.</p>
<h2>This is Another Subheading</h2>
<p>This is some more text.</p>
</body>
</html>
In this example, we have used three different levels of headings to create a hierarchy of content. The <h1> tag is used for the main heading, while the <h2> tags are used for the subheadings. The <p> tag is used for paragraphs of text that come after the headings.
HTML Paragraphs:
HTML paragraphs are used to group together related text content on a web page. They are denoted using the <p> tag and allow developers to create blocks of text with consistent formatting, such as font size and line spacing.
Here’s an example of how HTML paragraphs can be used:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This is a paragraph of text. It can be used to provide additional information about the main heading or to introduce a new topic.</p>
<p>Another paragraph of text can follow, which may contain more detailed information on the topic introduced in the previous paragraph.</p>
</body>
</html>
In this example, we have used two <p> tags to create two separate paragraphs of text. The content of each paragraph is related to the main heading, but provides more detailed information on the topic.
Line Breaking:
In HTML, line breaks can be created using the <br> tag. The <br> tag is an empty tag, which means that it doesn’t require a closing tag.
Here’s an example of how the <br> tag can be used:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This is a paragraph of text.<br>It has a line break in the middle of the sentence.</p>
<p>Another paragraph of text can follow, which may contain more detailed information on the topic introduced in the previous paragraph.</p>
</body>
</html>
In this example, we have used the <br> tag to create a line break within the first paragraph of text. The line break is inserted after the word “text” and creates a new line of text within the same paragraph.
Horizontal Line:
In HTML, a horizontal line can be created using the <hr> tag. The <hr> tag is an empty tag, which means that it doesn’t require a closing tag.
Here’s an example of how the <hr> tag can be used:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This is a paragraph of text.</p>
<hr>
<p>Another paragraph of text can follow, which may contain more detailed information on the topic introduced in the previous paragraph.</p>
</body>
</html>
In this example, we have used the <hr> tag to create a horizontal line between two paragraphs of text. The line spans the entire width of the container element and provides a clear visual break between the two paragraphs.
Text formatting tags:
HTML provides several tags that can be used to format text in different ways. Here are some of the most commonly used text formatting tags:
Bold text: To make text bold, use the <strong> or <b> tag. Both tags will make the text bold, but the <strong> tag is preferred as it is used to indicate important or emphasized text.
<strong>This text will be bold.</strong>
Italic text: To make text italicized, use the <em> or <i> tag. Both tags will make the text italicized, but the <em> tag is preferred as it is used to indicate emphasis or importance.
<em>This text will be italicized.</em>
Underlined text: To make the text underlined, use the <u> or <ins> tag.
<u>This text will be underlined.</u>
Strikethrough text: To create text with a strikethrough effect, use the <s> or <strike> tag.
<s>This text will have a strikethrough effect.</s>
Subscript and Superscript text: To create text that is either subscripted or superscripted, use the <sub> or <sup> tag.
H<sub>2</sub>O
CO<sup>2</sup>
Some other Text formatting tags:
- <abbr> or <acronym>
<p>
The <acronym title=”World Wide Web”>WWW</acronym> is only a component of the
Internet.
</p>
- <big> and <small>
<p>
This is the first sentence.
<big>This whole sentence is in bigger letters.</big>
</p>
- <center>
<center>
This text will be centered.
<p>So will this paragraph.</p>
</center>
- <del>
<del>I am a deleted text.</del>
- <dfn>
<p>A <dfn> validator </dfn> is a program that checks for syntax errors in code or documents.</p>
- <pre>
<pre>Hello
Hi</pre>
- <mark>
<mark> Hello</mark>
HTML Lists:
HTML provides three types of lists: ordered lists, unordered lists, and definition lists. Each type of list is created using a different set of HTML tags and is used for a different purpose.
Ordered Lists:
Ordered lists are used when a list of items needs to be numbered or ordered. To create an ordered list, use the <ol> tag. Each item in the list is created using the <li> tag. By default, ordered lists are numbered with Arabic numerals.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Note: To change the list item marker, you can use the ‘type’ attribute in <ol> tag. For example, if you want the list to start from A, just add type=” A” in your <ol> tag. Similarly, the value of the ‘type’ attribute will be a, i, I if you want lowercase alphabet, lowercase Roman, and uppercase Roman respectively. In addition to this, if you want to start a list from 4 just add ‘start=4’ in your <ol> tag as an attribute.
Ordered List Exercise:
Unordered Lists:
Unordered lists are used when a list of items needs to be displayed with bullet points or other markers. To create an unordered list, use the <ul> tag. Each item in the list is created using the <li> tag.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Note: There are some values of type attribute in <ul> tag which are disc for bullet, circle for circle, and square for black color filled square as list item marker.
Unordered List Exercise
Definition Lists:
Definition lists are used when a list of terms and their definitions need to be displayed. To create a definition list, use the <dl> tag. Each term in the list is created using the <dt> tag, and each definition is created using the <dd> tag.
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
<dt>Term 3</dt>
<dd>Definition of Term 3</dd>
</dl>
Nested List:
In HTML, a nested list is a list that contains one or more sub-lists. This means that each item in the parent list can contain its own list of items. Nested lists are created by placing a list within another list using the appropriate HTML tags.
Here’s an example of a nested list:
<ol>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item 3</li>
</ol>
In this example, we have an ordered list with three items. The second item in the list contains an unordered sub-list with three sub-items. To create a nested list, we simply place the sub-list within the list item that contains it.
Nested List Exercise
HTML Table:
HTML tables are used to display data in rows and columns. They consist of a series of rows and columns, where each cell contains text, images, or other HTML elements. Tables are created using a combination of HTML tags, including the <table>, <tr>, <th>, and <td> tags.
Here’s an example of a basic HTML table:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>
In this example, we have a table with three columns and four rows. The first row of the table is used to define the column headers using the <th> tag. The remaining rows of the table contain the data, with each cell containing text or other HTML elements enclosed in the <td> tag.
Tables can be customized using a variety of attributes, including cellpadding, cellspacing, height, width and border.
border: This attribute specifies the width of the border around the table and its cells. The value is specified in pixels or can be set to 0 to remove the border. For example, border=”1″ will create a 1-pixel wide border around the table.
height: This attribute sets the height of the table. It can be specified in pixels or as a percentage of the available space. For example, height=”200″ sets the table height to 200 pixels.
width: This attribute sets the width of the table. Like the height attribute, it can be specified in pixels or as a percentage. For example, width=”50%” sets the table width to 50% of the available space.
cellspacing: This attribute controls the spacing between cells. It specifies the amount of space (in pixels) to be added between adjacent cells. For example, cellspacing=”5″ will add a 5-pixel gap between cells.
cellpadding: This attribute controls the padding within cells. It specifies the amount of space (in pixels) to be added between the content of a cell and its borders. For example, cellpadding=”10″ will add a 10-pixel padding within each cell.
Differences between <th> and <td> tag:
The <th> and <td> tags are both used in HTML tables, but they serve different purposes.
The <th> tag is used to define table headers, while the <td> tag is used to define table data.
Here are some of the key differences between the two tags:
Purpose: The <th> tag is used to define the header cells of a table, which typically contain column or row headings. The <td> tag is used to define the data cells of a table, which contain the actual content.
Styling: By default, <th> cells are displayed in bold and centered, while <td> cells are displayed with normal font weight and left-aligned. However, both types of cells can be styled using CSS.
rowspan and colspan attribute:
rowspan: This attribute defines the number of rows a cell should span vertically. It is applied to a <td> (table cell) or <th> (table header) element. By using rowspan, you can make a cell extend vertically and occupy multiple rows. The value of rowspan indicates the number of rows the cell should span.
Example of rowspan attribute:
HTML Code:
<table border=1>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan=”2″>Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Output:
colspan: This attribute defines the number of columns a cell should span horizontally. Similar to rowspan, it is applied to a <td> or <th> element. By using colspan, you can make a cell extend horizontally and occupy multiple columns. The value of colspan indicates the number of columns the cell should span.
Example of colspan attribute:
HTML Code:
<table border=1>
<tr>
<th colspan=”2″>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
</table>
Output:
Exercise:
HTML Hyperlinks
HTML hyperlinks, also known as links, allow users to navigate between web pages by clicking on a clickable text or image. Links are created using the HTML <a> (anchor) tag, which defines the clickable area and the destination URL of the link.
Here’s an example of an HTML hyperlink:
<a href=”https://www.example.com”>Click here to visit Example.com</a>
In this example, the <a> tag is used to define the clickable area of the hyperlink and the “href” attribute is used to specify the URL of the destination page. The text “Click here to visit Example.com” is the visible text of the hyperlink, and will be underlined and displayed in a different color than regular text in most browsers.
Links can also be used to navigate to specific sections of a page using anchor tags. For example:
<a href=”#section1″>Go to Section 1</a>
In this example, the # symbol followed by “section1” indicates that the link should navigate to the section of the page with an ID of “section1”.
HTML Multimedia
HTML provides several tags that can be used to embed multimedia content such as audio, video, and images in a web page.
Audio: The <audio> tag is used to embed audio content in a web page. Here’s an example:
<audio controls>
<source src=”example.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
In this example, the “src” attribute specifies the URL of the audio file, and the “type” attribute specifies the MIME type of the audio file. The “controls” attribute adds basic audio controls to the player, such as a play button, pause button, and volume slider.
Video: The <video> tag is used to embed video content in a web page. Here’s an example:
<video controls width=”320″ height=”240″>
<source src=”example.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>
In this example, the “src” attribute specifies the URL of the video file, and the “type” attribute specifies the MIME type of the video file. The “controls” attribute adds basic video controls to the player, such as a play button, pause button, and volume slider. The “width” and “height” attributes can be used to specify the dimensions of the video player.
Image: The <img> tag is used to embed images in a web page. Here’s an example:
<img src=”example.jpg” alt=”Example Image” width=”300″ height=”200″>
In this example, the “src” attribute specifies the URL of the image file, and the “alt” attribute provides a text description of the image for accessibility purposes. The “width” and “height” attributes can be used to specify the dimensions of the image.
Overall, these multimedia tags allow web developers to embed various types of media content in their web pages, enhancing the user experience and engagement of the website.
HTML Form:
HTML forms provide a way for users to input data and interact with a website. Forms are created using the <form> tag and can contain various types of form elements such as text fields, radio buttons, checkboxes, dropdown menus, and more.
Some frequently used form elements are:
- <form> – This tag is used to create a form on a web page.
- <input> – This tag is used to create an input field, such as a text box, radio button, or checkbox.
- <label> – This tag is used to add a label to an input field to provide a description of the field.
- <textarea> – This tag is used to create a multi-line text input field.
- <select> – This tag is used to create a drop-down list of options for the user to choose from.
- <option> – This tag is used to define the options in a drop-down list created with the <select> tag.
- <button> – This tag is used to create a clickable button.
- <fieldset> – This tag is used to group related form elements together.
- <legend> – This tag is used to add a title or caption to a <fieldset> element.
- <form action=””> – This attribute is used to specify the URL that the form data should be submitted to.
- <form method=”POST”> – This attribute is used to specify the HTTP method used to submit the form data to the server.
- <input type=”text”> – This attribute is used to create a single-line text input field.
- <input type=”checkbox”> – This attribute is used to create a checkbox input field.
- <input type=”radio”> – This attribute is used to create a radio button input field.
- <input type=”submit”> – This attribute is used to create a submit button that submits the form data to the server.
- <input type=”reset”> – This attribute is used to create a reset button that resets the form data to its initial values.
- <input type=”password”> – This attribute is used to create a password input field that obscures the user’s input.
- <input type=”file”> – This attribute is used to create a file upload input field.
- <input type=”hidden”> – This attribute is used to create a hidden input field that is not displayed on the web page.
- <input type=”email”> – This attribute is used to create an email input field that checks if the entered value is a valid email address.
Homework:
HTML Frames:
HTML frames were a feature of early versions of HTML that allowed multiple HTML documents to be displayed within a single browser window. A frame is essentially a sub-window within a browser window, and each frame can display its own HTML document. Frames were popular in the early days of the web as a way to create complex layouts and navigation menus.
Here’s an example of an HTML frame:
<!DOCTYPE html>
<html>
<head>
<title>My Frameset</title>
</head>
<frameset cols=”25%,75%”>
<frame src=”menu.html”>
<frame src=”content.html”>
</frameset>
</html>
In this example, we have a frameset with two columns. The left column is 25% of the total width, and the right column is 75% of the total width. The <frame> tag is used to define each frame, and the “src” attribute is used to specify the HTML document to be displayed in each frame.
Frames are no longer recommended for use in modern web development, as they have a number of drawbacks. One major issue with frames is that they can make it difficult for search engines to index a website’s content, since each frame is essentially a separate HTML document. Frames can also create issues with navigation and bookmarking, as links may not work as expected when a user bookmarks or shares a specific page within a frameset.
Today, frames have been largely replaced by other techniques such as CSS grid layouts and responsive design, which offer more flexible and robust ways to create complex page layouts.
End of Chapter IV
