Unit 01 Introduction To HTML

 Introduction to HTML

HTML (HyperText Markup Language) is the standard language used to create and design
websites. It is used to structure content on the web by defining the elements on a page such as
headings, paragraphs, links, images, tables, forms, and more. HTML uses a system of "tags" to
define different types of content and their structure within a web page.

1.2 Terminologies used in Web Design:

World Wide Web(www)

Web Pages

Web Site

Web Browsers

Web Servers and types of sites.

Static vs. dynamic web sites,

Search Engine.
1. World Wide Web (WWW)

The World Wide Web (WWW) is a system of interlinked hypertext documents and multimedia
content accessed via the Internet. It is often referred to simply as "the Web." It was created in
1989 by Tim Berners-Lee, and it enables users to browse and interact with content, such as text,
images, videos, and links to other pages, all through web browsers.

 The WWW relies on the Internet for communication, which is a vast global network of
computers and servers connected by communication protocols (primarily TCP/IP).

2. Web Pages

A Web Page is a single document on the World Wide Web that can be viewed in a web browser.
It is typically written in HTML (HyperText Markup Language) and can contain text, images,
videos, links, and other multimedia elements. A web page is part of a larger collection of related
pages called a website.

 Static Web Page: A page with fixed content that doesn't change unless manually updated.
 Dynamic Web Page: A page whose content can change based on user interaction or time (e.g.,
real-time data from a server).

3. Web Site

A Website is a collection of related web pages that are typically identified by a common domain
name (such as www.example.com). Websites are hosted on web servers and are accessed by users
through web browsers. A website can contain many pages, such as home pages, contact pages,
blogs, and product pages.

 A website might consist of several web pages, images, and other digital assets, structured using
folders and files.
4. Web Browsers

A Web Browser is a software application used to access and navigate the World Wide Web.
Browsers interpret and display web pages written in HTML, CSS, and JavaScript. Examples of
popular web browsers include:

 Google Chrome
 Mozilla Firefox
 Safari
 Microsoft Edge
 Opera

When you enter a URL (Uniform Resource Locator) into the browser's address bar, the browser
sends a request to the server that hosts the webpage and displays the requested content.

5. Web Servers

A Web Server is a computer that hosts a website and serves web pages to users' browsers. It
processes requests from browsers (for example, when a user types in a URL) and sends the
appropriate web pages, images, or other resources back to the client.

 Web servers run software like Apache, Nginx, or Microsoft IIS (Internet Information Services).
 Web servers work using HTTP (Hypertext Transfer Protocol) or HTTPS (HTTP Secure) to
transfer data.

7. Static vs. Dynamic Websites

 Static Websites:

o These are simpler websites where the content is fixed and doesn’t change unless
manually updated by the website owner.
o Typically built using HTML, CSS, and sometimes JavaScript.
o Examples: Personal blogs, portfolios, or informational websites.
o Advantages: Faster load times, lower cost to develop and host, easier to maintain.
  Dynamic Websites:

o These websites display content that changes based on user interaction or real-time data.
They often rely on server-side programming languages (PHP, Node.js, Python) and
databases (MySQL, MongoDB).
o Examples: Social media platforms, e-commerce sites, and news portals.
o Advantages: Can provide personalized content, better interactivity, and dynamic features
like user logins, comment sections, etc.

8. Search Engine

A Search Engine is a web-based tool that allows users to search for information on the internet.
Search engines index billions of web pages and return the most relevant results based on a user's
query. Some well-known search engines include:

 Google (the most widely used)

 Bing
 Yahoo!
 DuckDuckGo

1.3 Web page structure:

DOCTYPE, HTML, TITLE,HEAD, BODY and other meta tags with attributes.

1. DOCTYPE
  Definition: The DOCTYPE declaration is the very first thing in an HTML document. It
tells the web browser what version of HTML the page is using. This helps ensure that the
page is rendered correctly and consistently across different browsers.

Syntax:

<!DOCTYPE html>

Explanation:

 <!DOCTYPE html> specifies that the document is an HTML5 document.

 In earlier versions of HTML (such as HTML 4.01), different DOCTYPE declarations were
used to support various document types (e.g., strict, transitional, frameset).
 The HTML5 declaration is simpler and ensures the page is interpreted using the most
modern and flexible HTML specifications.

2. <html> Element

 Definition: The <html> tag is the root element of an HTML document. All other elements
(like <head> and <body>) are contained within it.
 Syntax

<html lang="en">

<!-- Content here -->

</html>

Explanation:

 The <html> element wraps the entire document and contains all other HTML elements.
  The lang attribute specifies the language of the document's content. For example, lang="en"
indicates that the document is in English. This is useful for accessibility and search
engines.

3. <head> Element

 Definition: The <head> section contains meta-information about the HTML document,
such as the title, character encoding, linked resources (like stylesheets or scripts), and
other metadata.
 Syntax:

<head>

<!-- Meta tags and other resources -->

</head>

Explanation:

 The <head> element doesn't directly display content on the web page but provides
important information that helps the browser interpret the content correctly.
 Key elements inside the <head> include <meta>, <title>, <link>, and <script> tags.

4. <title> Element

 Definition: The <title> tag defines the title of the web page. This title is displayed in the
browser's title bar or tab, and it is also used by search engines when indexing the page.
 Syntax:

<title>My Web Page Title</title>

Explanation:

 The content inside the <title> tag should be descriptive and relevant to the content of the
page. It plays a key role in search engine optimization (SEO).
 Example: <title>Best Web Design Practices - Web Development Guide</title>

5. . <body> Element

 Definition: The <body> tag contains all the visible content of a web page. This is what
users see when they load a page in their browser, including text, images, videos, forms,
etc.
 Syntax:

<body>

<!-- Visible content here -->

</body>

Explanation:

 The <body> section is where all the elements that users interact with on the page are
placed. It contains headings, paragraphs, images, links, lists, forms, and other interactive
content.

6. <meta> Tags

 Definition: <meta> tags provide metadata about the document, such as the character set,
author, description, keywords, and viewport settings. They are typically placed inside the
<head> section.

 Common <meta> Tags and Their Attributes:

1. Character Set:
  Specifies the character encoding for the document, ensuring that the text is
displayed correctly.
 Syntax: <meta charset="UTF-8">

Explanation: UTF-8 is the most commonly used character encoding for modern web pages, supporting a
wide range of characters from different languages

 Description:

 Provides a brief description of the page's content, often used by search engines to
display a snippet in search results.

Syntax: <meta name="description" content="This is a description of my web page.">

Explanation: This is important for SEO as search engines may use it to display a summary of the
page in search results.

1.4 Block Level Elements:

Headings, Paragraphs, Breaks, Divisions, Centered Text, Block Quotes, Preformatted text, types
of Address, HR tag. Horizontal Rue.

Block-Level Elements in HTML

In HTML, elements are categorized as either block-level elements or inline elements. Block-
level elements are typically used to structure the layout of a web page, as they create a new block
of content that occupies the full width of its container (like a box). These elements generally start
on a new line and extend to the full width available.
1. Headings (<h1> to <h6>)

 Definition: Headings are used to define titles or subtitles on a web page. HTML provides
six levels of headings, with <h1> being the most important and <h6> being the least.
 Syntax:

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Sub-subheading</h3>

Explanation:

 <h1> is typically used for the main title of the page (and should ideally be used once per
page for SEO purposes).
 <h2> to <h6> represent subheadings, with decreasing importance.
 Block-level: Headings create a new block of content and each heading starts on a new
line.

2. Paragraph (<p>)

 Definition: The <p> tag defines a paragraph of text. It automatically adds some space
above and below the content.
 Syntax:

<p>This is a paragraph of text.</p>

Explanation:

 The <p> element is commonly used for wrapping text that forms a distinct paragraph.
 Block-level: The paragraph element occupies the full width of its container and is
separated from other elements with space.
3. Line Break (<br>)

 Definition: The <br> tag is used to insert a line break within text, forcing the content to
continue on the next line.
 Syntax: <p>This is the first line.<br>This is the second line.</p>

Explanation:

 The <br> tag is self-closing (no closing tag is required).

 It is useful for breaking lines in the middle of text without starting a new paragraph.

4. Division (<div>)

 Definition: The <div> tag is a block-level container element used to group content
together. It doesn’t add any visual formatting by itself, but it is commonly used for layout
purposes with CSS or JavaScript.
 Syntax:

<div>

<h2>Section Title</h2>

<p>This is a paragraph inside a div.</p>

</div>

Explanation:

 <div> is typically used to wrap multiple elements or sections of a page, making it easier to
apply styling or manipulate the content through JavaScript.
 It is block-level, so it creates a block box around its content.
5. Centered Text (<center>)

 Definition: The <center> tag was used in earlier HTML versions to horizontally center-
align text or other elements. However, it is deprecated in HTML5, and CSS should be
used for centering content instead.
 Syntax (deprecated):

<center>This text is centered.</center>

6. Blockquote (<blockquote>)

 Definition: The <blockquote> tag is used to define a block of text that is a quotation from
another source. It typically appears indented to show that the text is a direct quote.

Syntax: <blockquote>

This is a blockquote from an external source.

</blockquote>

Explanation:

 The text inside the <blockquote> element is usually indented, making it visually distinct
from the rest of the content. It is often used for long quotes or citations.
 Block-level: A blockquote occupies the full width of its container and is often indented
on the left.


7. Preformatted Text (<pre>)

  Definition: The <pre> tag is used for displaying preformatted text, where whitespace
(spaces, tabs, and newlines) is preserved.

Syntax: <pre>

This text

preserves spacing

and formatting.

</pre>

Explanation:

 Text inside the <pre> tag is displayed exactly as it is written, including spaces and line
breaks.
 Block-level: The content inside the <pre> element is displayed in a monospaced font,
which is often used for code snippets or formatting-sensitive text.

8. Address (<address>)

 Definition: The <address> tag is used to provide contact information for the author or
owner of a document or website.
 Syntax:

<address>

You can contact us at:<br>

<a href="mailto:[email protected]">[email protected]</a>
 </address>

Explanation:

 Typically used to display information such as an email address, physical address, or

phone number.
 Block-level: This element groups contact information and often includes links like mailto:
for emails.
 The content inside <address> is often displayed in italics by browsers.

9. Horizontal Rule (<hr>)

 Definition: The <hr> tag creates a horizontal line (or rule) across the page, typically used
to separate content visually.
 Syntax:

<hr>

Explanation:

 The <hr> tag is self-closing, and it creates a horizontal line that extends across the full
width of its container.
 It is often used for separating sections of content (such as between different topics in an
article or between paragraphs).
 The appearance of the horizontal line can be customized with CSS (e.g., thickness, color,
style).

Summary of Block-Level Elements

Tag Description Example

<h1> to <h6> Defines headings, with <h1> <h1>Main Heading</h1>

being the most important.
<p> Defines a paragraph of text. <p>This is a paragraph.</p>

<br> Inserts a line break (self-closing). <p>First line<br>Second line</p>

<div> Defines a block-level division <div><h2>Title</h2><p>Content</p></div>

used for layout or grouping
content.

<center> Deprecated element used to <div style="text-align:center;">Centered content</div>

center content (use CSS instead).

<blockquote> Defines a block of text that is a <blockquote>Quote</blockquote>

quotation.

<pre> Defines preformatted text with <pre>Code block</pre>

preserved whitespace.

<address> Defines contact information for a <address>Contact info</address>

person or organization.

<hr> Creates a horizontal rule to <hr>

separate content.

1.5 Text Level Elements:

Bold, Italic, Teletype, Underline,Strikethrough, Superscript, Subscript, DIV tag, displaying

special characters, comments.
Text-Level Elements in HTML

Text-level elements are used to style and format text within a block-level structure without
creating a new block. These elements usually work inline, meaning they do not break the flow of
content or create new lines. Text-level elements are crucial for adding emphasis, styling, and
formatting individual parts of text within paragraphs or other content.

1. Bold (<b>)

 Definition: The <b> tag makes the enclosed text bold. It is purely for styling and does not
imply any special importance or emphasis semantically.
 Syntax:

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

Explanation:

 The text within the <b> tag will appear bold on the screen, but it doesn't carry any
semantic meaning about the importance of the text.
 Modern use: For semantic emphasis, it's often recommended to use the <strong> tag
instead of <b>, as <strong> indicates that the text is of strong importance.

2. Italic (<i>)

 Definition: The <i> tag is used to italicize text. Like the <b> tag, <i> is a styling element
but does not convey any semantic meaning.
 Syntax:

<i>This text is italicized.</i>

Explanation:

 The text inside the <i> tag will be displayed in an italic font.
  Modern use: For semantic meaning, it’s better to use the <em> tag instead of <i>, as <em>
indicates emphasized text (typically displayed in italics).

3. Teletype or Monospace (<tt>)

 Definition: The <tt> tag was used in older HTML versions to display text in a
monospaced (teletype) font. It is now deprecated in HTML5 and is replaced by CSS font-
family with a monospace font.
 Syntax: <tt>This text is displayed in a monospace font.</tt>

Explanation:

 Text within the <tt> tag will appear in a monospaced font, where each character takes up
the same amount of space.

4. Underline (<u>)

 Definition: The <u> tag is used to underline text.

 Syntax: <u>This text is underlined.</u>

Explanation:

 Text inside the <u> tag will be displayed with a line beneath it.
 Modern use: The <u> tag is often used for emphasis in special cases (e.g., hyperlinks),
but for general text styling, it's often recommended to use CSS text-decoration for
underlining.

5. Strikethrough (<s>)

 Definition: The <s> tag indicates text that has been struck through or deleted. It visually
shows the text with a line through it.
  Syntax:<s>This text is struck through.</s>

Explanation:

 Text inside the <s> tag is rendered with a strikethrough line.

 Modern use: The <s> tag is semantically used for text that is no longer relevant or has
been deleted. It can be used to indicate corrections or changes in documents.

6. Superscript (<sup>)

 Definition: The <sup> tag is used to display text as superscript (above the normal text
line), commonly used for mathematical expressions, footnotes, or exponents.
 Syntax: E = mc²

Explanation:

 Text inside the <sup> tag appears smaller and raised above the baseline. It's often used for
exponents in formulas or to represent footnotes.
 Example: The equation for energy in physics, E=mc2E = mc^2E=mc2, uses superscript
for the exponent.

7. Subscript (<sub>)

 Definition: The <sub> tag is used to display text as subscript (below the normal text line),
commonly used for chemical formulas or indices in math.
 Syntax: H₂O

 Explanation:
 o Text inside the <sub> tag appears smaller and placed below the baseline. It's
commonly used for representing subscripts in chemical formulas (e.g., water,
H2OH_2OH2​O).

8. Division (<div>)

 Definition: The <div> tag is used as a container for grouping block-level content.
Although it is a block-level element, it is commonly used for layout purposes and styling.
It does not have a specific semantic meaning, but it is useful for grouping content for
styling and scripting.
 Syntax:

<div>

<h1>Title</h1>

<p>Content inside the div.</p>

</div>

 Explanation:
o The <div> tag is often used to wrap multiple block-level elements and apply styles
or layouts to them using CSS. It helps with organization and separation of content
on a page.

9. Displaying Special Characters

 Definition: Special characters (such as symbols, punctuation, or reserved characters) are

displayed using HTML character entities. These entities start with & and end with ;.
  Common Special Characters:
o Less-than sign: &lt; → <
o Greater-than sign: &gt; → >
o Ampersand: &amp; → &
o Quotation mark: &quot; → "
o Apostrophe: &apos; → '
o Copyright symbol: &copy; → ©
o Registered trademark symbol: &reg; → ®
o Euro symbol: &euro; → €

 Syntax:

<p>5 &lt; 10</p> <!-- Displays: 5 < 10 -->

<p>&copy; 2024</p> <!-- Displays: © 2024 -->

Explanation:

 These entities are used to represent characters that have special meanings in HTML or
that cannot be typed directly in the code.

10. Comments (<!-- -->)

 Definition: HTML comments are used to add notes or explanations within the HTML
code. They are not displayed in the browser and serve only for documentation purposes.
 Syntax:

<!-- This is a comment and will not appear in the browser -->

Explanation:
  Comments are enclosed within <!-- and -->.
 Comments are useful for documenting sections of code, leaving reminders, or
temporarily disabling parts of the code during development.
 Note: Comments are not visible to users in the web page's output.

Summary of Text-Level Elements

Tag Description Example

<b> Makes the text bold. <b>This is bold text.</b>

<i> Makes the text italic. <i>This is italic text.</i>

<tt> Displays text in a monospaced (teletype) font <tt>This is monospaced text.</tt>

(deprecated).

<u> Underlines the text. <u>This text is underlined.</u>

<s> Strikes through the text (used for deleted text). <s>This text is struck through.</s>

<sup> Displays text as superscript (raised above the E = mc²

baseline).
<sub> Displays text as subscript (below the baseline). H₂O

<div> Groups block-level elements for layout or styling. <div><h1>Heading</h1><p>Text</p></div>

Special Display characters that cannot be typed directly in &amp;, &lt;, &gt;, &copy;
characters HTML.

<!-- --> Adds comments in the code that are not displayed <!-- This is a comment -->
in the browser.