Scribd
Upload
17 views11 pages

HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and describes their structure through a series of elements. It includes various components such as attributes, links, tables, and forms, which allow for the embedding of content and user interaction. HTML elements can be nested, and attributes provide additional information about these elements, enabling customization and styling of web content.

Uploaded by

Arpit Jaiswal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views11 pages

HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and describes their structure through a series of elements. It includes various components such as attributes, links, tables, and forms, which allow for the embedding of content and user interaction. HTML elements can be nested, and attributes provide additional information about these elements, enabling customization and styling of web content.

Uploaded by

Arpit Jaiswal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for crea ng Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content

Example
<!DOCTYPE html>
<html>
<head>
< tle>Page Title</ tle>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Elements
The HTML element is everything from the start tag to the end tag:
<h1></h1>
<p></p>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

HTML A ributes
 All HTML elements can have a ributes
 A ributes provide addi onal informa on about elements
 A ributes are always specified in the start tag
 A ributes usually come in name/value pairs like: name="value"

The href A ribute


The <a> tag defines a hyperlink. The href a ribute specifies the URL of the page the link
goes to:

Example
<a href="h ps://www.w3schools.com">Visit W3Schools</a>

The src A ribute


The <img> tag is used to embed an image in an HTML page. The src a ribute specifies
the path to the image to be displayed:

Example
<img src="img_85.jpg">
The width and height A ributes
Example
<img src="img_85.jpg" width="500" height="600">

The alt A ribute


Example
<img src="img_85.jpg" alt="Girl with a jacket">

The style A ribute


Example
<p style="color:red;">This is a red paragraph.</p>

The lang A ribute


Example
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

HTML Comments
<!-- Write your comments here -->
Add Comments
Example
<!-- This is a comment -->

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

<!-- Remember to add more informa on here -->

HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to
page.

HTML Links - Hyperlinks


HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a li le hand.

HTML Links - Syntax


The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important a ribute of the <a> element is the href a ribute, which indicates
the link's des na on.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
<a href="h ps://www.xyz.com/">Visit XYZ</a>

HTML Favicon
A favicon is a small image displayed next to the page tle in the browser tab.
Example
<!DOCTYPE html>
<html>
<head>
< tle>My Page Title</ tle>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Tables
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Fu erkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

HTML Lists

HTML Block and Inline Elements


Block-level Elements
A block-level element always starts on a new line, and the browsers automa cally add
some space (a margin) before and a er the element.
A block-level element always takes up the full width available (stretches out to the le
and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a sec on in an HTML document.

Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.

The <div> Element


The <div> element is o en used as a container for other HTML elements.
The <div> element has no required a ributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
HTML class A ribute
The HTML class a ribute is used to specify a class for an HTML element.
Mul ple HTML elements can share the same class.

The class A ribute


The class a ribute is o en used to point to a class name in a style sheet. It can also be
used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class a ribute with the
value of "city". All of the three <div> elements will be styled equally according to
the .city style defini on in the head sec on

Example
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>

Different Elements Can Share Same Class


A class name can be used by mul ple HTML elements, while
an id name must only be used by one HTML element within
the page:

HTML Forms
An HTML form is used to collect user input. The user input is most o en sent to a server
for processing.

The <form> Element


The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio bu ons, submit bu ons, etc.

The <label> Element


No ce the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions
(such as radio bu ons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio bu on/checkbox.
The for a ribute of the <label> tag should be equal to the id a ribute of
the <input> element to bind them together.
Radio Bu ons
The <input type="radio"> defines a radio bu on.
Radio bu ons let a user select ONE of a limited number of choices.
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

You might also like