Unit-4: HTML

HTML stands for HyperText Markup Language, and it is the standard language used for creating web pages. HTML is a markup language, which means that it consists of tags and attributes that are used to structure and format the content of a web page.

The basic building blocks of an HTML document are elements, which are represented by tags. For example, the tag <p> is used to create a paragraph of text, and the tag <h1> is used to create a header. Elements can have attributes, which provide additional information about the element. For example, the tag <a href=”http://www.example.com”>Example</a&gt; is used to create a link, and the “href” attribute specifies the URL that the link should go to.

Here is a simple example of an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Document</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first HTML document.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

In this example, the document starts with a DOCTYPE declaration that specifies which version of HTML is being used. The rest of the document is contained within the <html>, <head>, and <body> tags. The <head> section contains information about the document, such as the title, which is displayed in the browser’s title bar. The <body> section contains the actual content of the page, such as the header and the list.

HTML is used in conjunction with other technologies, such as CSS (Cascading Style Sheets) and JavaScript, to create dynamic and interactive web pages. With these technologies, web developers can create complex and sophisticated websites that can run on a variety of devices, including desktops, laptops, tablets, and smartphones

use of commenting, headers, text styling, images

  1. Commenting: Comments are used to add notes to the HTML code that are not displayed in the final web page. They are useful for documenting the code and making it easier to understand and maintain. Comments are added using the <!-- and --> tags, like this:
<!-- This is a comment -->
  1. Headers: Headers are used to create different levels of headings for the text in an HTML document. The six different levels of headings are represented by the tags <h1> to <h6>, with <h1> being the largest and <h6> being the smallest. Here’s an example:
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
  1. Text styling: HTML provides several tags for styling text, such as <strong> for bold text, <em> for italic text, and <u> for underlined text. For example:
<p>This is a <strong>bold</strong> paragraph.</p>
<p>This is an <em>italic</em> paragraph.</p>
<p>This is an <u>underlined</u> paragraph.</p>
  1. Images: Images can be added to an HTML document using the <img> tag. The src attribute is used to specify the URL of the image file, and the alt attribute is used to provide a text description of the image for accessibility purposes. Here’s an example:
<img src="image.jpg" alt="A description of the image">

Note that the <img> tag does not have a closing tag and is an empty element, meaning it does not have a closing tag

  1. Formatting text with bold and italic:

<b>This text is bold.</b> <i>This text is italic.</i>

  1. Using special characters:

© This symbol represents the copyright symbol. > This symbol represents the greater than symbol.

  1. Creating horizontal rules:

<hr>

This creates a horizontal line that can be used to separate sections of a webpage.

  1. Adding line breaks:

Line 1.<br> Line 2.<br> Line 3.

The <br> tag is used to add line breaks in the text

  1. Creating tables:

<table border=”1″> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

The <table> tag is used to create a table and the <tr> tag is used to create a row in the table. The <th> tag is used for the header and <td> for the data cells.

  1. Creating forms:

<form action=””> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”><br><br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”><br><br> <input type=”submit” value=”Submit”> </form>

The <form> tag is used to create a form and the <input> tag is used to create form elements such as text fields, email fields, and submit buttons.

  1. Creating image maps:

<img src=”image.jpg” usemap=”#map”> <map name=”map”> <area shape=”rect” coords=”0,0,100,100″ alt=”Area 1″> <area shape=”rect” coords=”100,0,200,100″ alt=”Area 2″> </map>

The <img> tag is used to display an image and the <map> tag is used to create an image map. The <area> tag is used to define the clickable areas on the image.

  1. Image formats:

There are several image formats used in web design including:

a. JPEG (.jpg): This format is used for photographs and images with many colors. b. PNG (.png): This format is used for images with transparent backgrounds or for graphics with sharp lines. c. GIF (.gif): This format is used for animations or for images with few colors. d. SVG (.svg): This format is used for vector graphics and images that can be scaled without losing quality.

Example:<img src=”image.jpg” alt=”Image”>.