Scribd
Upload
2 views

HTML Assignment[1]

The document provides an overview of HTML, explaining its purpose as the core language for structuring and presenting web content. It covers basic HTML structure, including essential tags and elements, text formatting, lists, media, links, and forms for user input. The document serves as a foundational guide for understanding and using HTML effectively.

Uploaded by

narkhedevedant9
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML Assignment[1]

The document provides an overview of HTML, explaining its purpose as the core language for structuring and presenting web content. It covers basic HTML structure, including essential tags and elements, text formatting, lists, media, links, and forms for user input. The document serves as a foundational guide for understanding and using HTML effectively.

Uploaded by

narkhedevedant9
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Unveiling the World

of HTML .

By group 9

IT (D)

Batch 2
Team Members

Prathmesh Pandao (50)


Sai Parab (54)
Shourya Panchariya (49)
Siddhart Pandharipande (52)
Nitin Pandharkar (53)
Aayush Pande (51)
What is HTML?
HyperText Markup Language Tags and Elements

HTML stands for HyperText Markup Language. It's the HTML uses tags to define elements like headings,
core language used to structure and present content paragraphs, images, and links. These tags tell browsers
on the web. It defines the basic building blocks of web how to display the content.
pages.
The Foundation: Basic HTML Structure
DOCTYPE Declaration
1 Tells the browser which HTML version to use.

HTML Tag
2
Encloses the entire document.

Head Section
3
Contains metadata about the document.

Body Section
4
Holds the visible content of the webpage.
Html basic code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<script src="script.js"></script>
</body>
</html>
Heading Tags: Setting the Tone
H1
1
The most important heading, usually used for the main title.

H2
2
A secondary heading used for section titles.

H3
3
Tertiary heading for sub-sections.

H4-H6
4
Smaller headings for further division of content.
<h1>Main Title of the Document</h1>
<p>This is a paragraph under the main title.</p>
<h2>Subheading of a Section</h2>
<p>This is a paragraph under the subheading.</p>
<h3>Sub-subheading of a Subsection</h3>
<p>This is a paragraph under the sub-subheading.</p>
<h4>Sub-sub-subheading</h4>
<p>This is a paragraph under the sub-sub-
subheading.</p>
<h5>Lesser Subheading</h5>
<p>This is a paragraph under the lesser
subheading.</p>
<h6>Least Important Heading</h6>
<p>This is a paragraph under the least
important.</p>
Paragraphs and Text
Formatting

Paragraph (p) Bold (b)


Used to create a block of text. Makes text bold.

Italic (i) Underline (u)


Makes text italic. Underlines text.
<h1>Text Formatting Example</h1>
<p>This is a paragraph with <b>bold text</b> and
<strong>important bold text</strong>.</p>
<p>This is a paragraph with <i>italic text</i> and
<em>emphasized italic text</em>.</p>
<p>This is a paragraph with <u>underlined
text</u>.</p>
<p>This is a paragraph with <s>strikethrough text</s>
and <del>deleted text</del>.</p>
<p>This is a paragraph with <sup>superscript
text</sup> and <sub>subscript text</sub>.</p>
<p>This is a paragraph with <code>monospaced
text</code>.</p>
<p>This is a paragraph with <mark>highlighted
text</mark>.</p>
Lists: Organizing Information
1 Unordered List (ul) Ordered List (ol)
2
Creates a bulleted list. Use li for each list item. Creates a numbered list. Use li for each list item.
<h2>Ordered List Example</h2>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List Example</h2>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Enriching Content: Media
and Links
1 Image (img)
Inserts an image into the webpage. Use src for the
image URL and alt for alternative text.

2 Anchor Tag (a)


Creates a hyperlink to another webpage or resource.
Use href for the target URL and text for the link label.

orientation=horizontal twosided=true
<h2>Example of an Image Link</h2>
<a href="https://www.example.com" target="_blank" title="Go to
Example">
<img src="./image.png" alt="Description of the image" width="300"
height="200">
</a>
Forms: Gathering User Input

1 2
Form (form) Input (input)
Creates a form for collecting user Creates various input fields like
data. text boxes, radio buttons, and
checkboxes.

3 4
Select (select) Textarea (textarea)
Creates a dropdown menu for Creates a multiline text area for
selecting options. user input.
<div class="form-container">
<h2>Contact Us</h2>
<form action="/submit-form" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
Thank You !!!

You might also like