Unit 2: Front End Development using HTML
Website and Webpage. Basic concept of Markup Language. Introduction to HTML. Basic HTML
structure. Text
formatting Tags headings, paragraph, line break, horizontal rule. Link and Navigation - anchor
tags. Lists ordered, unordered,
definition list. Image and multimedia tags. Tables in HTML. Forms and Input types - text, email,
password, radio, select,
checkbox, textarea, date, url, submit, button. Semantic HTML. Sectioning elements - header,
nav, main, section, article, aside, footer.
provide notes from this website LIKE GREEKSFORGREEKS and explain each topic long in
1500+words with detail/table/diagram
Here is a comprehensive, detailed set of notes on Unit 2: Front End Development using HTML,
covering the specified topics with explanations, examples, and structure inspired by resources
like GeeksforGeeks:
Website and Webpage
A Website is a collection of related web pages that are linked together and identified by a
common domain name. It represents an entire online presence with multiple pages, media, and
interactive elements. Examples include [Link] or [Link].
A Webpage is a single document or page on the web, which can be viewed in a web browser.
Each webpage contains content such as text, images, links, and multimedia that forms part of
the website.
Basic Concept of Markup Language
A Markup Language is a system for annotating a document in a way that is syntactically
distinguishable from the text. HTML (HyperText Markup Language) is the primary markup
language used to create web pages. It uses "tags" enclosed in angle brackets < > to format and
structure the content on a webpage.
Tags are used to define elements like headings, paragraphs, links, and images. These
annotations tell the browser how to display the content. For example:
<p>This is a paragraph.</p>
Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language used for creating
and designing webpages and web applications. It structures the content by using elements
enclosed in tags.
Key points:
HTML documents are plain text files saved with .html or .htm extensions.
The browser reads and renders HTML, creating a visual webpage.
- HTML tags usually come in pairs: an opening tag `<tag>` and a closing tag `</tag>`.
Some tags are self-closing, like <img> for images.
Basic HTML Structure
A basic HTML document has the following structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content of the webpage -->
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explanation:
<!DOCTYPE html> declares the document type and version of HTML.
<html> is the root element containing all other HTML elements.
<head> includes metadata such as the page title and links to stylesheets.
<body> contains the content to be displayed on the webpage.
Text Formatting Tags
Headings
HTML provides six levels of headings from `<h1>` (largest) to `<h6>` (smallest):
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
...
<h6>This is Heading 6</h6>
Paragraph
Paragraphs are defined by the <p> tag:
<p>This is a paragraph.</p>
Line Break
A line break without starting a new paragraph can be inserted using <br>:
First line<br>Second line
Horizontal Rule
The <hr> tag creates a horizontal line or thematic break:
<hr>
Link and Navigation - Anchor Tags
The <a> (anchor) tag defines hyperlinks. It uses the href attribute to specify the link destination:
<a href="[Link] GeeksforGeeks</a>
For navigation menus, multiple anchor tags are grouped inside `<nav>` or `<div>` elements
Lists
Ordered List (<ol>)
An ordered list is numbered:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List (<ul>)
An unordered list has bullet points:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
Definition List (<dl>)
Used for terms and their definitions:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Image and Multimedia Tags
Image Tag <img>
Displays images using the src attribute for source and alt for alternative text:
<img src="[Link]" alt="Company Logo" width="200" height="100">
Multimedia Tags
To embed audio and video:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Tables in HTML
Tables organize data in rows and columns:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
<table> creates the table.
<tr> is a table row.
<th> is a header cell (bold and centered).
<td> is a data cell.
Forms and Input Types
Forms collect user input. Common tags:
<form action="/submit" method="POST">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
Password: <input type="password" name="password"><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female <br>
Country:
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select><br>
Subscribe:
<input type="checkbox" name="subscribe" value="yes"> Yes<br>
Comments:<br>
<textarea name="comments"></textarea><br>
Date of Birth: <input type="date" name="dob"><br>
Website: <input type="url" name="website"><br>
<input type="submit" value="Submit">
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</form>
Input types described:
text - single-line text.
email - validated email input.
password - masked text.
radio - single option from many.
select - dropdown menu.
checkbox - select multiple options.
textarea - multi-line text.
date - date picker.
url - validated URL.
submit - sends form data.
button - generic clickable button.
Semantic HTML
Semantic HTML uses tags that clearly describe their meaning and role in the document
structure:
Examples:
<header>: Introductory content or navigation links.
<nav>: Navigation links.
<main>: Main content of the page.
<section>: Thematic grouping of content.
<article>: Self-contained content like a blog post.
<aside>: Content aside from the main content, like sidebars.
<footer>: Footer for the page or section.
Sectioning Elements Explained
Element Purpose Example Usage
<header> Represents the introductory part of a page or section Website logo, navigation menu
<nav> Defines a section with navigation links Main menu, sidebar navigation
<main> Contains main content exclusive to the page Blog posts, articles
<section> Groups related content with a thematic purpose Chapters, feature description
<article> Represents independent content that could stand alone Blog entry, news story
<aside> Content related tangentially to the main content Ads, related links
Element Purpose Example Usage
<footer> Footer content for page or section, often with legal info Copyright info, contact links
Diagram: Basic HTML Document Structure with Sectioning Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<header>Header content</header>
<nav>Navigation links</nav>
<main>
<section>Section content</section>
<article>Article content</article>
<aside>Aside content</aside>
</main>
<footer>Footer content</footer>
</body>
</html>
This detailed explanation covers all requested topics with examples, structure, and descriptive
tables for easy understanding. It is suitable for a study note or learning guide on front-end
development with HTML.
If you want, a more formatted document or a downloadable version can also be prepared. Let
me know if you need that.
⁂
1. [Link]
2. [Link]
3. [Link]
nology-unit-2/81839337
4. [Link]
5. [Link] - COMMERCE UNIT - [Link]
6. [Link]
7. [Link]
8. [Link]
9. [Link]
10. [Link]