0% found this document useful (0 votes)

62 views27 pages

Unit-I: Example Explained

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, and more. A basic HTML document structure includes html, head, title, and body tags. Common text elements are headings (<h1>-<h6>), paragraphs (<p>), and line breaks (<br>). Links are defined using <a> tags with an href attribute. Lists are created with unordered (<ul>), ordered (<ol>), and description (<dl>) lists.

Uploaded by

Dinesh Srinivas

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

0% found this document useful (0 votes)

62 views27 pages

Unit-I: Example Explained

Uploaded by

Dinesh Srinivas

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/ 27

UNIT-I

What is HTML?
 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
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
A Simple HTML Document :Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

The HyperText Markup Language, or HTML is the standard markup

language for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.
 Filename extension: .html, .htm
 Internet media type: text/html
 Developed by WHATWG(Tim Berners-Lee)

1
 Initial release 1993; 28 years ago
 Extended from SGML
 Extended to XHTML
 Open format? Yes

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Web Browsers
 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.
 A browser does not display the HTML tags, but uses them to determine
how to display the document:
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
HTML Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

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

2
<p>This is another paragraph.</p>

 With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.

 The browser will automatically remove any extra spaces and lines when
the page is displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
 The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.

 The <hr> element is used to separate content (or define a change) in an

HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element

 The HTML <pre> element defines preformatted text.

3
 The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

HTML Text Formatting

Formatting elements were designed to display special types of text:

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML Quotation and Citation Elements:

1)HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by

4
1.2 million members in the United States and
close to 5 million globally.</blockquote>
2)HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

3)HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

4)HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA

5
</address>

5)HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

6)HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Comments:
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

HTML Links – 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
little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

 The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

 The link text is the part that will be visible to the reader.
6
 Clicking on the link text, will send the reader to the specified URL
address.

Example
This example shows how to create a link to google.com:

<a href="https://www.google.com/">Visit google.com!</a>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - The target Attribute:

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link. The target attribute
specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list

7
<dd> Describes the term in a description list
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists

HTML also supports description lists.

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

The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>

8
</dl>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Example
Let the first row be table headers:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Table Colspan & Rowspan
HTML tables can have cells that spans over multiple rows and/or columns.

9
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:

Example
<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>
Name Age
Jill Smith 43
Eve Jackson 57

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example
<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>

10
Name Jill
555-1234
Phone
555-8745

HTML <frame> tag (Not supported in HTML5)

HTML <frame> tag define the particular area within an HTML file where
another HTML web page can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into

multiple sections or frames, and each frame can contain different web pages.

Syntax
< frame src = "URL" >

Example 1
Create Vertical frames:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Example 2:
Create Horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>

11
HTML 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:

<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form
Elements.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type

attribute.

Here are some examples:

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

Text Fields
The <input type="text"> defines a single-line input field for text input.

12
Example
A form with input fields for text:

<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>

The <label> Element

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 focus on the input element.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example
A form with radio buttons:

<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>
13
This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

 HTML
 CSS
 JavaScript

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

Example
A form with 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>
This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a
form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

14
Example
A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes

The Action Attribute
The action attribute defines the action to be performed when the form is
submitted.

Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

In the example below, the form data is sent to a file called

"action_page.php". This file contains a server-side script that handles the
form data:

Example
On submit, send form data to "action_page.php":

The Target Attribute

The target attribute specifies where to display the response that is received
after submitting the form.

The target attribute can have one of the following values:

15
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
The default value is _self which means that the response will open in the
current window.

Example
Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting
the form data.

The form-data can be sent as URL variables (with method="get") or as

HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example
This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Notes on GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data
is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the
result

16
 GET is good for non-secure data, like query strings in Google
Notes on POST:

 Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts
of data.
 Form submissions with POST cannot be bookmarked

HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an
HTML element.

Example
Set the background color for a page to powderblue:

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

</body>

Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

17
</body>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>.
Fonts
The CSS font-family property defines the font to be used for an HTML
element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Styles – CSS

 CSS stands for Cascading Style Sheets.

 CSS saves a lot of work. It can control the layout of multiple web
pages all at once.

18
 With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!

Using CSS
CSS can be added to HTML documents in 3 ways:

1. Inline - by using the style attribute inside HTML elements

2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

Example

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a

<style> element.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:

Example

19
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each
HTML page:

Example
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
20
}
p{
color: red;
}

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

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

21
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property:

p{
border: 2px solid powderblue;
}

CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.

Example
Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of
element it is.

22
There are two display values: block and inline.

Block-level Elements
 A block-level element always starts on a new line.

 A block-level element always takes up the full width available (stretches

out to the left and right as far as it can).

 A block level element has a top and a bottom margin, whereas an inline
element does not.

The <div> element is a block-level element.

Example
<div>Hello World</div>

Here are the block-level elements in HTML:

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.

Example
<span>Hello World</span>
Here are the inline elements in HTML:

The <div> Element

 The <div> element is often used as a container for other HTML elements.

23
 The <div> element has no required attributes, 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>

The <span> Element

 The <span> element is an inline container used to mark up a part of a
text, or a part of a document.

 The <span> element has no required attributes, but style, class and id are
common.

 When used together with CSS, the <span> element can be used to style
parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>

HTML class Attribute

 The class attribute is often 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.

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then,
define the CSS properties within curly braces {}:

Example
Create a class named "city":

24
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

Multiple Classes
HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div
class="city main">. The element will be styled according to all the classes
specified.

In the following example, the first <h2> element belongs to both the city class
and also to the main class, and will get the CSS styles from both of the classes:

Example

<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;

25
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London
also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the "city" class and will
share the same style:

Example

<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can both
point to the same class, and get the same CSS styling:</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
HTML id Attribute

26
The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It

is also used by JavaScript to access and manipulate the element with the
specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader
style definition in the head section:
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Web Development Short Notes
No ratings yet
Web Development Short Notes
39 pages
HTML&CSS Bells
No ratings yet
HTML&CSS Bells
230 pages
Web Full Stack Virtual Internship
No ratings yet
Web Full Stack Virtual Internship
33 pages
Cours Bosstrap Sas
No ratings yet
Cours Bosstrap Sas
102 pages
HTML
No ratings yet
HTML
21 pages
Grade 10 Ict HTML
No ratings yet
Grade 10 Ict HTML
18 pages
Webdesigning Through HTML - SA-1
No ratings yet
Webdesigning Through HTML - SA-1
4 pages
HTML XML
No ratings yet
HTML XML
30 pages
WEB TECHNOLOGY Notes
No ratings yet
WEB TECHNOLOGY Notes
79 pages
Project Portfolio Documentation
No ratings yet
Project Portfolio Documentation
98 pages
HTML
No ratings yet
HTML
61 pages
Web Deginss
No ratings yet
Web Deginss
267 pages
Unit-1 Exposure To HTML
No ratings yet
Unit-1 Exposure To HTML
51 pages
HTML5 Course
No ratings yet
HTML5 Course
51 pages
14 SGML, HTML, XML
No ratings yet
14 SGML, HTML, XML
63 pages
SAP Ui5 Fiori OData CDS Course Content PDF
100% (1)
SAP Ui5 Fiori OData CDS Course Content PDF
13 pages
HTML
No ratings yet
HTML
33 pages
HTML
No ratings yet
HTML
188 pages
Module3 HTML Source Coding 1
No ratings yet
Module3 HTML Source Coding 1
39 pages
WT Unit-1
No ratings yet
WT Unit-1
15 pages
0 - HTML Notes For BCA
80% (5)
0 - HTML Notes For BCA
22 pages
Unit4 CompletePPT 2024
No ratings yet
Unit4 CompletePPT 2024
62 pages
HTML
No ratings yet
HTML
100 pages
Dark Patterns in E-Commerce: A Dataset and Its Baseline Evaluations
No ratings yet
Dark Patterns in E-Commerce: A Dataset and Its Baseline Evaluations
8 pages
HTML
No ratings yet
HTML
55 pages
Fswd@unit 1@aiml
No ratings yet
Fswd@unit 1@aiml
56 pages
Unit-2 HTML
No ratings yet
Unit-2 HTML
52 pages
Hypertext Markup Language
No ratings yet
Hypertext Markup Language
10 pages
HTML
No ratings yet
HTML
59 pages
01 HTML
No ratings yet
01 HTML
96 pages
HTML Training by Thiru
No ratings yet
HTML Training by Thiru
122 pages
HTML
No ratings yet
HTML
45 pages
Chapter 2 Introduction To HTML
No ratings yet
Chapter 2 Introduction To HTML
46 pages
Web Development Basics of HTML
No ratings yet
Web Development Basics of HTML
40 pages
Primefaces Extension
No ratings yet
Primefaces Extension
34 pages
WAD Notes
No ratings yet
WAD Notes
54 pages
HTML
No ratings yet
HTML
15 pages
1 - HTML Notes
No ratings yet
1 - HTML Notes
86 pages
HTML Unit1 Notes
No ratings yet
HTML Unit1 Notes
22 pages
HTML SYlABUS
No ratings yet
HTML SYlABUS
50 pages
JSP Life Cycle JSP Elements JSP Directives JSP Implicit Objects MVC Design Pattern Dynamic DB Connection
No ratings yet
JSP Life Cycle JSP Elements JSP Directives JSP Implicit Objects MVC Design Pattern Dynamic DB Connection
90 pages
HTML
No ratings yet
HTML
26 pages
Unit-I - HTML
No ratings yet
Unit-I - HTML
65 pages
Front End - HTML, CSS
No ratings yet
Front End - HTML, CSS
44 pages
HTML - Note
100% (1)
HTML - Note
8 pages
HTML
No ratings yet
HTML
47 pages
HTML 1
No ratings yet
HTML 1
16 pages
CSE-AI-Syllabus 18 10
No ratings yet
CSE-AI-Syllabus 18 10
21 pages
Sneha New
No ratings yet
Sneha New
47 pages
Notes Grade+7
No ratings yet
Notes Grade+7
34 pages
Programming With HTML, Css and Javascript (55320A) : Module 1: A Quick Overview of Web Development
No ratings yet
Programming With HTML, Css and Javascript (55320A) : Module 1: A Quick Overview of Web Development
11 pages
Update Weather App Project Report
No ratings yet
Update Weather App Project Report
35 pages
Function of Clothing
100% (1)
Function of Clothing
7 pages
Summer Training
No ratings yet
Summer Training
14 pages
Css 1
No ratings yet
Css 1
20 pages
Web Programming Chapter Two
No ratings yet
Web Programming Chapter Two
26 pages
Htmlnotes 180924151434
No ratings yet
Htmlnotes 180924151434
47 pages
HTML
No ratings yet
HTML
50 pages
CMA Unit1
No ratings yet
CMA Unit1
38 pages
Hypertext Markup Langauge
No ratings yet
Hypertext Markup Langauge
9 pages
HTML Ref Guide: Mithilesh Kumar
No ratings yet
HTML Ref Guide: Mithilesh Kumar
29 pages
10 Steps in Testing Your Web Application
No ratings yet
10 Steps in Testing Your Web Application
5 pages
HTML Mcqs
No ratings yet
HTML Mcqs
34 pages
HTML
No ratings yet
HTML
12 pages
Hyper Text Markup Language: What Is HTML?
No ratings yet
Hyper Text Markup Language: What Is HTML?
15 pages
Lab 3
No ratings yet
Lab 3
4 pages
Training Course
No ratings yet
Training Course
51 pages
Class - 10 HTML-1
No ratings yet
Class - 10 HTML-1
62 pages
Module 4
No ratings yet
Module 4
15 pages
Module 7: Inserting Tables Module 7: Inserting Tables
No ratings yet
Module 7: Inserting Tables Module 7: Inserting Tables
25 pages
HTML (BScCsit 5th Semester)
No ratings yet
HTML (BScCsit 5th Semester)
59 pages
Dept No.: 10-MT-304 SUB: Elective General - Office Automation Date: 21-03-2011 Submitted By: D.Mathan Kumar Submitted To: Ms - Rexilin
No ratings yet
Dept No.: 10-MT-304 SUB: Elective General - Office Automation Date: 21-03-2011 Submitted By: D.Mathan Kumar Submitted To: Ms - Rexilin
10 pages
B.tech 2 1 Computer Science Engineering R20 Course Structure Syllabi
No ratings yet
B.tech 2 1 Computer Science Engineering R20 Course Structure Syllabi
22 pages
Previous Next Chapter : What Is HTML?
No ratings yet
Previous Next Chapter : What Is HTML?
14 pages
HTML and It's Properties
No ratings yet
HTML and It's Properties
24 pages
HTML Course
No ratings yet
HTML Course
9 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
23 pages
What Is HTML
No ratings yet
What Is HTML
23 pages
Chapter 2 Introduction To HTML
No ratings yet
Chapter 2 Introduction To HTML
20 pages
22PLC15A
No ratings yet
22PLC15A
3 pages
HTML
No ratings yet
HTML
30 pages
Introduction To HTML
No ratings yet
Introduction To HTML
17 pages
Assignment 1
No ratings yet
Assignment 1
4 pages
HTML Interview Questions
No ratings yet
HTML Interview Questions
5 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
HTML
No ratings yet
HTML
14 pages
WTL Assignment No.2
No ratings yet
WTL Assignment No.2
7 pages
What Is HTML?
No ratings yet
What Is HTML?
16 pages
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet

), paragraphs (), and line breaks (). Links are defined using tags with an href attribute. Lists are created with unordered (), ordered (), and description () lists.">-

Unit-I: Example Explained

Uploaded by

Unit-I: Example Explained

Uploaded by

UNIT-I

The HyperText Markup Language, or HTML is the standard markup

What is an HTML Element?

 The <hr> element is used to separate content (or define a change) in an

HTML Line Breaks

The HTML <pre> Element

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Text Formatting

<b> - Bold text

HTML Quotation and Citation Elements:

1)HTML <blockquote> for Quotations

Browsers usually indent <blockquote> elements.

Browsers normally insert quotation marks around the quotation.

3)HTML <abbr> for Abbreviations

Marking abbreviations can give useful information to browsers, translation

4)HTML <address> for Contact Information

5)HTML <cite> for Work Title

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

6)HTML <bdo> for Bi-Directional Override

HTML Links – Hyperlinks:

 You can click on a link and jump to another document.

<a href="url">link text</a>

<a href="https://www.google.com/">Visit google.com!</a>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

HTML Links - The target Attribute:

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was

Ordered HTML List

The list items will be marked with numbers by default:

HTML Description Lists

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

HTML Table Tags

HTML Table - Rowspan

HTML <frame> tag (Not supported in HTML5)

A <frame> tag is used with <frameset>, and it divides a webpage into

The <form> Element

The <input> Element

An <input> element can be displayed in many ways, depending on the type

Here are some examples:

The <label> Element

Radio buttons let a user select ONE of a limited number of choices.

<p>Choose your favorite Web language:</p>

Choose your favorite Web language:

Checkboxes let a user select ZERO or MORE options of a limited number of

The Submit Button

The form-handler is specified in the form's action attribute.

HTML Form Attributes

In the example below, the form data is sent to a file called

The Target Attribute

The target attribute can have one of the following values:

<form action="/action_page.php" target="_blank">

The Method Attribute

The form-data can be sent as URL variables (with method="get") or as

The default HTTP method when submitting form data is GET.

<form action="/action_page.php" method="get">

<form action="/action_page.php" method="post">

 Appends the form data to the URL, in name/value pairs

The HTML Style Attribute

The HTML style attribute has the following syntax:

<h1 style="background-color:powderblue;">This is a heading</h1>

HTML Styles – CSS

 CSS stands for Cascading Style Sheets.

1. Inline - by using the style attribute inside HTML elements

An inline CSS uses the style attribute of an HTML element.

<h1 style="color:blue;">A Blue Heading</h1>

An internal CSS is defined in the <head> section of an HTML page, within a

Here is what the "styles.css" file looks like:

CSS Colors, Fonts and Sizes

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.