Scribd
Upload
2 views23 pages

HTML lAB MANUAL

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, consisting of elements that structure content. It includes various tags for text formatting, media embedding, lists, tables, and forms, allowing developers to create organized and interactive web content. Key elements include headings, paragraphs, images, links, and input fields for user interaction.

Uploaded by

231501132
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
2 views23 pages

HTML lAB MANUAL

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, consisting of elements that structure content. It includes various tags for text formatting, media embedding, lists, tables, and forms, allowing developers to create organized and interactive web content. Key elements include headings, paragraphs, images, links, and input fields for user interaction.

Uploaded by

231501132
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/ 23

HTML (HYPERTEXT MARKUP LANGUAGE)

HTML stands for Hyper Text Markup Language


HTML is the standard markup language for creating 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
Structure
<!DOCTYPE html>
<html>
<head>
<title>…..</title>
</head>
<body>
/* A container for all the visible contents*/
</body>
</html>
HTML (HYPERTEXT MARKUP LANGUAGE)
Text Formatting Tags
1.Heading Tag
<h1> to <h6>
<h1> is the biggest and <h6> is the smallest.
Eg:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
2. Paragraph Tag
<p>….</p>
Eg:
<p>This is a paragraph.</p>
3. <br>
Line break (no closing tag).
Eg:
First Line<br>Second Line
HTML (HYPERTEXT MARKUP LANGUAGE)
4. <hr>
Horizontal rule (divider line).
Eg:
<p>Topic 1</p>
<hr>
<p>Topic 2</p>
5. <strong>
Bold text (important)
Eg: <strong>Important!</strong>
6. <em>
Italic (emphasis)
Eg: <em>Note this</em>
7. <mark>
Highlights text
Eg:
<mark>Highlight me</mark>
HTML (HYPERTEXT MARKUP LANGUAGE)
8. <small>
Smaller text
Eg:<small>Fine print</small>
9. <i>
Italic text
Eg:<i> Sandhiya </i>
10. <b>
Bold text
Eg: <b> Web Programming </b>
11. <sup>
Superscript
Eg: 2<sup>nd</sup>
12. <sub>
Subscript
Eg: H<sub>2</sub>O
HTML (HYPERTEXT MARKUP LANGUAGE)
MEDIA TAG
1.<img> - Images can improve the design and the appearance of a web page.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
The width and height attributes always define the width and height of the image in pixels.

2. <a> - anchor tags defines a hyperlink.


<a href="url">link text</a>
Attributes:
href - indicates the link's destination.
HTML (HYPERTEXT MARKUP LANGUAGE)
3. <video> - to embed video into a webpage
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes:
src: path to video
controls: show video controls( play, pause and volume)
width/height: set size
HTML (HYPERTEXT MARKUP LANGUAGE)
4. <audio> - to embed audio to a webpage.
<audio controls>
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Attributes:
src: path to audio file.
controls: Adds play/pause UI
HTML (HYPERTEXT MARKUP LANGUAGE)
LISTS
HTML lists allow web developers to group a set of related items in lists.
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1.First item
2.Second item
3.Third item
4.Fourth item
HTML (HYPERTEXT MARKUP LANGUAGE)
Unordered HTML List
<ul> - unordered tag
<li>- List of items
NOTE: The list items will be marked with bullets (small black circles) by default:
Eg:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
HTML (HYPERTEXT MARKUP LANGUAGE)
Unordered HTML List - Choose List Item Marker
list-style-type property is used to define the style of the list item marker. It can have one
of the following values:
Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Example:
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
<ol> - ordered list
<li> - List Item
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Output
HTML (HYPERTEXT MARKUP LANGUAGE)
Ordered HTML List - The Type Attribute
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Example:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML Description Lists

A description list is a list of terms, with a description of each term.


<dl> - tag defines the description list
<dt> - tag defines the term (name)
<dd> - tag describes each term
Eg:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML (HYPERTEXT MARKUP LANGUAGE)
TABLE
HTML tables allow web developers to arrange data into rows and columns.
Tags used in table
<table>
Attribute: border (line around the outside of whole table)
<caption> - to give title for displayed table
<tr> - row tag
<th> - table heading
<td> - table data
HTML (HYPERTEXT MARKUP LANGUAGE)
<table border=“3”>
<caption> NAME LIST </caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</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 (HYPERTEXT MARKUP LANGUAGE)
HTML Table – Colspan
* To make a cell span over multiple columns, use the colspan attribute.
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML Table - Rowspan
To make a cell span over, multiple rows, use the rowspan attribute.
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML Table - Rowspan
To make a cell span over, multiple rows, use the rowspan attribute.
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML (HYPERTEXT MARKUP LANGUAGE)
FORMS
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
* The <form> Element
* The HTML <form> element is used to create an html form for user input.
• The <form> element is a container for different types of input elements, such as: text fields, checkboxes,
radio button, submit buttons:
The <input> Element
An <input> element can be displayed in many ways , depending on the type attribute.
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)

<input type="button"> Displays a clickable button


HTML (HYPERTEXT MARKUP LANGUAGE)
FORMS
Text Fields
The <input type=“text”> defines a single line input field for text input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
HTML (HYPERTEXT MARKUP LANGUAGE)
FORMS
Radio Buttons
The <input type=“radio”> defines a radio button.
<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>
Output:
HTML (HYPERTEXT MARKUP LANGUAGE)
FORMS
Checkboxes
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

The Submit Button


The <input type=“submit” > defines a button for submitting the form data to a form-handler.
<input type="submit" value="Submit">
HTML (HYPERTEXT MARKUP LANGUAGE)
FORMS

You might also like