html document। .pptx

Unit I
INTRODUCTION TO WEB TECHNOLOGIES

HTML
Getting started with HTML
Basic Structure of an HTML Document
• HTML (Hypertext Markup Language)
• HTML is the standard language used to create webpages.
• Every HTML document has a basic structure that includes a few
essential elements

• <!DOCTYPE html> 
• <html lang="en"> 
• <head> 
• <meta charset="UTF-8"> 
• <meta name="viewport" content="width=device-width, initial-scale=1.0">

• <title>Page Title</title> 
• </head>
• <body> 
• <h1>Welcome to HTML!</h1> 
• <p>This is your first HTML document.</p> 
• </body>
• </html>

Important Tags in HTML
<html>: This tag wraps the entire HTML document.
<head>: Contains metadata about the page (like title, character set, etc.).
<title>: The text that appears in the browser tab.
<body>: Contains the visible content on the page (text, images, links, etc.).
<h1> to <h6>: Header tags used for headings (from most important to least).
<p>: Defines a paragraph.
<a>: Used to create links.
<img>: Embeds an image.
<ul>: Defines an unordered (bulleted) list.
<ol>: Defines an ordered (numbered) list.
<li>: Defines a list item.

HTML Elements
• An HTML element consists of two main parts: the opening tag and the
closing tag (and sometimes, just an opening tag if it's self-closing).
The element also contains content between the tags.
Basic Structure of an Element:
html
<tagname>content</tagname>
•Opening tag: <tagname>
•Content: The text or other elements inside the tags.
•Closing tag: </tagname> (not needed for self-closing elements like <img>)

<p>This is a paragraph element.</p>
In this example:
•This is a paragraph element. is the content inside the paragraph.
•<p> is the opening tag, defining a paragraph element.
</p> is the closing tag.

Some common HTML elements include:
•<h1> to <h6>: Header elements for different levels of headings.
•<p>: Paragraph element.
•<a>: Anchor tag for links.
•<div>: Generic container for block-level content.
•<span>: Inline container for text or other inline elements.

HTML Attributes
• An attribute provides additional information about an element.
• Attributes are added to elements in the opening tag, and they define
properties like behavior, appearance, or relationship with other
elements.
Basic Syntax for Attributes:
<tagname attribute="value">con tent</tagname>
•Attribute name: The name of the attribute, like href, src, class, etc.
•Attribute value: The value assigned to the attribute, enclosed in quotes
>
•.

Example of an Element with an Attribute:
<a href="https://www.example.com">Visit Example</a>
In this example:
•href is the attribute of the <a> element (used to specify the URL of the link).
•"https://www.example.com" is the value of the href attribute.

Some common attributes in HTML include:
•href: Used in <a> to define the destination URL.
•src: Used in <img> to define the image source.
•alt: Describes an image for accessibility (used with <img>).
•class: Specifies one or more class names for an element (used for
styling).
•id: Identifies an element with a unique identifier.
•style: Inline CSS styles for an element.
•type: Defines the type of input for form elements (e.g., type="text" for
a text input).

Self-Closing Elements
Some HTML elements do not have a closing tag. These are called self-closing or void elements.
These elements don’t wrap content but instead define a single point in the page structure.
Examples:
<img src="image.jpg" alt="An image"> <br> <hr>
•<img>: This tag is used for images. It doesn't need a closing tag but has attributes like src
(image source) and alt (image description).
•<br>: A line break element that inserts a new line in the text.
•<hr>: A horizontal rule or line that separates content.
Nesting Elements
HTML elements can be nested inside one another to build complex structures. Nesting means
placing one element inside another.
Example of Nesting:
<div> <h2>My Heading</h2> <p>This is a paragraph of text.</p> </div>
In this example:
•The <div> element is the parent, containing both an <h2> (header) and a <p> (paragraph) inside
it.

LINKS
• HTML links are created using the <a> (anchor) element.
• Links are used to navigate between web pages or to specific locations on
a webpage or an external site.
Basic Structure of a Link
The most basic form of a link is an anchor tag with an href (hypertext reference) attribute. The
href attribute defines the destination URL of the link.
<a href="https://www.example.com">Click here to visit Example</a>
•<a>: This is the anchor tag used to create a link.
•href="https://www.example.com": The href attribute specifies the target URL that the link
points to.
•Click here to visit Example: The link's clickable text.
•</a>: The closing anchor tag.

Key Concepts for Links:
•<a href="URL">: Basic link structure.
•target="_blank": Open in a new tab.
•mailto:: Email link.
•tel:: Phone number link.
•download: Enable file downloads.
•Styling: Use CSS to change link appearance.
•Accessibility: Ensure links are descriptive and accessible.

TABLES
• HTML, tables and images are essential elements used to display
structured data and visual content.
•<table>: Defines the table element.
•<thead>: Groups the header section of the table.
•<tbody>: Groups the body section of the table (the actual data).
•<tr>: Defines a table row.
•<th>: Defines a table header cell (text is bold and centered by
default).
•<td>: Defines a table data cell (where actual data goes).
•<

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>YEOLA SND</td>
</tr>
<tr>
<td>Mary</td>
<td>25</td>
<td>BABHULGOAN</td>
</tr>
</tbody>
</table>
Example Table with Data
Basic Structure of a Table
Key Attributes for Tables:
•border: Adds a border to the table
(you can style it using CSS instead).
•colspan: Specifies how many
columns a <td> or <th> element
should span.
•rowspan: Specifies how many
rows a <td> or <th> element should
span.
https://www.tutorialspoint.com/online_html_editor.php

HTML Images
Images are added to an HTML page using the <img> tag. This tag is self-closing
and requires at least the src (source) attribute to specify the image file location.
Basic Structure of an Image:
<img src="image.jpg" alt="Description of Image">
•src: Specifies the location of the image (can be a file path or a URL).
•alt: Provides alternative text for the image (important for accessibility and search
engines).
Example of an Image:
<img src="landscape.jpg" alt="A beautiful landscape">

Image Attributes:
•width and height: Define the dimensions of the image (in pixels).
<img src="landscape.jpg" alt="A beautiful landscape" width="400"
height="300">
•title: Provides additional information about the image when hovered over.
html
<img src="landscape.jpg" alt="A beautiful landscape" title="Click for more
information">
•loading="lazy": Improves page performance by delaying image loading until
it’s visible on the screen.
<img src="image.jpg" alt="Lazy load image" loading="lazy">

Animated Images
• You can also use animated images (having .gif extensions) on
the webpages.
• There is no specific attribute required to show animated
images; you can simply set the path of the animated image
(.gif) in the src attribute.

<!DOCTYPE html>
<html> <head>
<title>Using Animated Images in
HTML
</title> </head>
<body>
<h1>Using Animated Images in
HTML</h1>
<img
src="/html/images/animated_image
.gif" alt="Animated Images" />
</body> </html>
https://www.tutorialspoint.com/online_html_editor.php
<!DOCTYPE html>
<html>
<head>
<title>Animated Image</title>
</head>
<body>
<h1>Animated Image</h1>
<img
src="https://media.giphy.com/me
dia/3o6UBpHgaXFDNAuttm/gip
hy.gif">
</body>
</html>

•Tables: Used for displaying structured data in rows and columns. Key tags
include <table>, <thead>, <tr>, <th>, and <td>.
•Images: Added with the <img> tag. Key attributes include src, alt, width, and
height. You can make images responsive and even clickable.

HTML Form
• An HTML form is an element in HTML that allows users to input data
that can be sent to a server for processing.
• Forms can contain various types of input elements like text fields,
radio buttons, checkboxes, dropdowns, and buttons.
• HTML Forms use the <form> tag to collect user input through various
interactive controls.
• These controls range from text fields, numeric inputs, and email fields
to password fields, checkboxes, radio buttons, and submit buttons.

•Key Elements in the Form:
• <form>: The container for form elements, with action (URL where
data is sent) and method (HTTP method to use, typically GET or
POST).
• <input>: Used for various types of data, such as text, email, and
buttons. The type attribute determines the kind of input (text, email,
submit, etc.).
• <label>: Defines labels for input fields to improve accessibility and
user experience.
• <select> and <option>: Used to create a dropdown menu.
• <textarea>: Provides a multiline text box for longer input.
• <button>: Triggers form submission (optional, can use <input> with
type="submit").

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html Forms</title>
</head>
<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
https://www.tutorialspoint.com/
online_html_editor.php

The <input> Element
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)

Semantic HTML5 Elements.
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
A semantic
element clearly
describes its
meaning to both
the browser and
the developer.

1. <header>
• Represents introductory content or navigational links.
• Typically used for the top section of a webpage or a section of a page (e.g., logo, navigation menus, etc.).
2. <nav>
• Defines navigation links or menus on a webpage.
• It helps search engines and other user agents identify the main navigation links on the page.
3. <article>
• Represents a self-contained piece of content that could be distributed independently, like a blog post, news article, or forum
post.
4. <section>
• Represents a section of content within a document, such as a part of an article, a group of related content, or a chapter.
5. <aside>
• Represents content that is tangentially related to the content around it, such as sidebars, pull quotes, or ads.
• It can be placed alongside content but should not be essential to the main flow of the document.
6. <footer>
• Represents the footer of a document or section. Typically used for copyright information, links to privacy policies, or
contact details.
• It appears at the bottom of a webpage or a section.

Media (Audio, Video)
1. Audio Element (<audio>)
• The <audio> element is used to embed audio content in a web page. It
allows users to play, pause, adjust volume, and sometimes even control
the playback speed.
• Basic Syntax:
html
<audio controls>
<source src="audiofile.mp3" type="audio/mp3"> Your browser does not
support the audio element.
</audio> https://www.tutorialspoint.com/
online_html_editor.php

• Attributes for <audio>:
• controls: Adds playback controls (play, pause, volume, etc.).
• autoplay: Automatically starts playback when the page loads
(optional).
• loop: Loops the audio once it finishes playing (optional).
• muted: Mutes the audio when it loads (optional).
• preload: Specifies how the audio should be loaded when the page
is accessed. It can be auto, metadata, or none.
• src: Specifies the path to the audio file (you can also use
<source> elements for multiple

2. Video Element (<video>)
• The <video> element is used to embed video content in a webpage. It
has similar controls as the audio element, and you can include multiple
video sources to ensure compatibility with different browsers.
• Basic Syntax:
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogv">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>

•Attributes for <video>:
• controls: Displays the built-in video controls (play, pause, volume,
etc.).
• autoplay: Automatically starts the video when the page loads
(optional).
• loop: Loops the video once it finishes playing (optional).
• muted: Mutes the video when it loads (optional).
• poster: Specifies an image to be shown as a placeholder before the
video starts playing (optional).
• width and height: Control the size of the video player.
• preload: Specifies if the video should be loaded when the page is
loaded (auto, metadata, none).

html document। .pptx

More Related Content

Similar to html document। .pptx

Recently uploaded

html document। .pptx