4.3 HTML
.png)
4.3.1 Introduction to HTML
What is HTML?
HTML stands for Hypertext Markup Language, the standard language used to create and structure web pages.
Hypertext refers to the ability to link to other texts or web pages.
Markup refers to the collection of tags and instructions used to format and structure a document.
HTML allows us to create webpages by defining elements such as text, images, forms, and links, and how they should be displayed in the browser. HTML is considered the skeleton of a webpage, providing the basic structure without focusing on design or styling.
History of HTML:
Invented by Tim Berners-Lee in 1990 at CERN (European Particle Physics Laboratory).
Public Release: HTML was made public in 1993, bringing the World Wide Web to life.
The latest major version is HTML5, which supports modern features like audio, video, and responsive design.
W3C (World Wide Web Consortium) controls the development of HTML.
HTML Editors:
To create HTML documents, you can use simple text editors such as Notepad, or feature-rich text editors like:
Sublime Text
Visual Studio Code
Notepad++
Common Uses of HTML
HTML is used for various purposes in web development:
Creating Webpage Layouts: Defining the structure of web pages.
Formatting Text: Creating headings, paragraphs, and lists.
Embedding Media: Adding images, videos, and audio to web pages.
Interactive Elements: Creating tables, forms, and links.
4.3.2 HTML Tags
What Are HTML Tags?
HTML Tags are predefined commands that browsers use to display content on a web page. They tell the browser how to structure and format content.
HTML tags are enclosed in angle brackets (e.g.,
<h1>).
Types of HTML Tags:
Container (Paired) Tags: These tags have both an opening and a closing tag. Example:
<p>Text</p>.The opening tag activates the tag, and the closing tag deactivates it.
Empty (Unpaired) Tags: These tags don’t have a closing tag. Example:
<br>(line break),<img>(image).
HTML Attributes:
Attributes modify the behavior of HTML tags. They are written within the opening tag. For example,
<p align="center">This is a centered text.</p>wherealign="center"is an attribute.
4.3.3 Structure of HTML
A typical HTML document follows this structure:
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that contains all HTML code.
<head>: Contains metadata like the page title, character encoding, and links to CSS or scripts.
<body>: Contains the visible content of the page.
Organizing Text in HTML
Comment Tag:
Used to insert comments or notes in the HTML code for developers. Comments are ignored by the browser.
Syntax:
<!-- This is a comment -->.
Line Break
<br>:Inserts a line break to move the content to the next line, similar to pressing the "Enter" key.
Non-breaking Space
:Used to add extra spaces between words or elements. One
equals one space.
Paragraph
<p>:Defines a paragraph. Text inside
<p>tags is grouped together.Example:
<p>This is a paragraph of text.</p>.You can align paragraphs using the
alignattribute:align="left",align="center", oralign="right".
4.3.4 Text Formatting Tags
Text formatting tags are used to enhance the appearance of the content on a webpage.
Heading Tags
<h1>…<h6>:Used to create headings of different sizes.
<h1>is the largest, and<h6>is the smallest.Example:
<h1>This is Heading One</h1>,<h6>This is Heading Six</h6>.
Horizontal Line
<hr>:Creates a horizontal line or a "rule" across the page.
It is a self-closing tag.
Example:
<hr align="center" width="50%" size="3" color="blue">.
Text Styles:
Bold
<b>: Makes text bold. Example:<b>This is bold text</b>.Italic
<i>: Makes text italic. Example:<i>This is italic text</i>.Underline
<u>: Underlines the text. Example:<u>This text is underlined</u>.Superscript
<sup>: Places text above the baseline. Example:E = mc<sup>2</sup>.Subscript
<sub>: Places text below the baseline. Example:H<sub>2</sub>O.
Font
<font>(older HTML, still exam-important):Used to control the font, size, and color of text.
Example:
<font face="Times New Roman" size="5" color="red">This is red text.</font>.
Marquee Tag
<marquee>:Used to create scrolling text or moving images.
Example:
<marquee behavior="scroll" direction="left" bgcolor="yellow">Scrolling text here!</marquee>.
4.3.5 Anchor, List, Table, Image Tags and Their Properties
Anchor Tag <a>:
Used to create hyperlinks to other web pages, sections, or external sites.
Syntax:
<a href="URL">Link Text</a>.Example:
<a href="https://www.example.com">Visit Example</a>.
List Tags:
Unordered List
<ul>: Displays items with bullet points.Example:
Ordered List
<ol>: Displays items with numbers or letters.Example:
Definition List
<dl>: Displays terms and their definitions.Example:
Table Tag <table>:
Used to display tabular data.
Example:
Image Tag <img>:
Used to insert images on a webpage.
Syntax:
<img src="image.jpg" alt="description" width="500" height="300">.
4.3.6 Form and Div Tags
Form Tag <form>:
Used to collect input from users and send it to the server for processing.
Example:
Div Tag <div>:
A container element used for grouping content. It is helpful in structuring the layout of a webpage.
Example:
Conclusion
HTML is the fundamental building block of web development, providing the structure and layout for web pages. By combining tags like headings, paragraphs, lists, images, and links, web developers can create organized and interactive web content. Understanding HTML tags and their attributes is essential for anyone looking to develop websites or web applications.
.png)
.png)
.png)
.png)
