Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

HTML Unit1 Notes

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through markup tags that come in pairs. An HTML document consists of a head and body section, where the head contains metadata and the body displays content. HTML also supports various elements such as lists, images, forms, and frames, allowing for structured and styled web content.

Uploaded by

Dr. J.Nelson Raja
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML Unit1 Notes

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through markup tags that come in pairs. An HTML document consists of a head and body section, where the head contains metadata and the body displays content. HTML also supports various elements such as lists, images, forms, and frames, allowing for structured and styled web content.

Uploaded by

Dr. J.Nelson Raja
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

What is HTML?

HTML is a language for describing web pages.


 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags

HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>

Write about the Structure of HTML Document


All html documents begins with the <html> tag and ends with the corresponding end tag </html>. An
HTML document has two main parts:
1. Head.

The head element contains title and meta data of a web document.
2. Body

The body element contains the information that you want to display on a web page. It will include
headers, paragraphs, images, videos, lists, tables, and more. The <body> tag is used to start the
BODY element and the </body> tag ends it.
Figure : Structure of HTML Documents
Example for HTML Program
<html>
<head>
<title> Thiagarajar College </title>
</head>

Definition and Usage of Meta in HTML.

The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.

<meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document, and
viewport settings.

Metadata will not be displayed on the page, but is machine parsable.


Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials for HTML and


CSS">

Define the author of a page:

<meta name="author" content="John Doe">

HTML stands for hypertext markup language. A markup language consists of a set of markup tags.

HTML uses markup tags to describe web pages. HTML tags are keywords surrounded by angle brackets
like

<html>.

Most HTML tags normally come in pairs like <b> and </b>. The first tag is called the start tag (or opening
tag) and the second tag is called the end tag (or closing tag).

HTML documents describe Web pages. HTML documents contain HTML tags and plain text. HTML
documents are also called Web pages.

A web browser read HTML documents and displays them as Web pages. The browser does not display
the HTML tags, but uses the tags to interpret the content of the page

We can Save HTML page with .html or .htm extension.

HTML Elements

HTML documents are defined by HTML elements. An HTML element is everything from the start tag to
the end tag.

For example, <p>My first paragraph</p>.

An HTML element consists of start tag, end tag, and element content. The element content is everything
between the start tag and end tag.

Empty elements are closed in the start tag.

Most HTML elements can have attributes. For example, src attribute of img tag.
HTML Attributes

Attributes provide additional information about HTML elements. Attributes are always specified in the
start tag. Attributes come in name/value pair like name = “value”.

For example, HTML links are defined with <a> tag and the link address is provided as an attribute href
like

<a href = “http://www.tu.edu.np”>cdcsit</a>.

Note: Always quote attribute values and use lowercase attributes.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> displays largest text and

<h6> smallest. For example, <h1>My first heading</h1>.

HTML Paragraphs

HTML paragraphs are defined with <p> tag. For example, <p>My first paragraph</p>.

HTML Rules (Lines)

We use <hr /> tag to create horizontal line.

HTML Comments

We use comments to make our HTML code more readable and understandable. Comments

are ignored by the browser and are not displayed. Comments are written between

<!-- and -->. For example, <!-- This is a comment -->.


HTML Line Breaks

If you want a new line (line break) without starting a new paragraph, use <br /> tag.

HTML Formatting Tags

We use different tags for formatting output. For example, <b> is used for bold and <i> is used for italic

text. Some other tags are <big>, <small>, <sup>, <sub> etc.

FORMATTING TEXT BY LISTS

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

lists.HTML Lists are used to specify lists of information. All lists may

contain one or more list elements. There are three different types of

HTML lists:

 Ordered List or Numbered List (ol)

 Unordered List or Bulleted List (ul)

 Description List or Definition List (dl)

Ordered List or Numbered List:

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

If we do not use type attribute, items are marked with numbers. We use
type = “a” for lowercase letters list,
type = “I” for roman numbers list, and type = “i” for lowercase numbers
list.
<ol>

<li>Sachin</li>

<li>Kapil</li>

<li>Rahul</li>

<li>Rohit</li>

</ol>

Unordered List or Bulleted List:

In HTML Unordered list, all the list items are marked with bullets.
It is also known as bulleted list also. The Unordered list starts with <ul>

tag and list items start with the <li> tag.

<ul>

<li>Sachin</li>

<li>Kapil</li>

<li>Rahul</li>

<li>Rohit</li>

</ul>

HTML Images

HTML images are defined with <img> tag. To display an image on a page, you need to use the src

attribute. We can also use width and height attributes with img tag. For

example,

<img src = “photo1.jpg” width = “104” height = “142” />.

We can use alt attribute to define an alternate text for an image. For example, <img src

= “photo1.jpg” width = “104” height = “142” alt = “My best poto”/>. The "alt" attribute tells the reader

what he or she is missing on a page if the browser can't load images. The browser will then display

the alternate text instead of the image. It is a g ood practice to include the "alt" attribute for each

image on a page, to improve the display and usefulness of your document for people who have text‐
only

browsers.

HTML Lists
HTML supports ordered, unordered and definition lists. Ordered lists items are
marked with numbers,
letter etc. We use <ol> tag for ordered list and each list item starts with
<li>
tag. For example,
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Output:
A. Apples
B. Bananas
C. Lemons
D. Oranges
If we do not use type attribute, items are marked with numbers. We use
type = “a” for lowercase letters list,
type = “I” for roman numbers list, and type = “i” for lowercase numbers
list.
Unordered lists items are marked with bullets. We use <ul> tag for
unordered list and each list item starts
with <li> tag. For example,
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

If we do not use type attribute, items are marked with discs. We use type =
“circle” for circle bullets list, and type = “square” for square bullets list.

List Box
We can create a simple drop-down box on an HTML page. A drop-down box is
a selectable list. See
code below:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

HTML Frames
We can use frames to display more than one web page in the same browser
window. Each HTML document is called a frame, and each frame is
independent of the others. The disadvantages of using
frames are:
 The web developer must keep track of more HTML documents
 It is difficult to print the entire page
We use <frameset> tag to define how to divide the window into frames.
Each frameset defines a set of rows
or columns. Within frameset, we use <frame> tag to define what HTML
document to put into each frame.

If a frame has visible borders, the user can resize it by dragging the border.
To prevent a user from doing
this, you can add noresize="noresize" to the <frame> tag. Add the
<noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the
<frameset></frameset> tags. However, if you add a <noframes> tag
containing some text for browsers
that do not support frames, you will have to enclose the text in
<body></body> tags.
Example 1:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" noresize="noresize"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
Example 2:
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
Example 3: Mixed Frameset
<frameset rows="50%,50%">
<frame src="frame_a.htm"/>
<frameset cols="25%,75%">
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
</frameset>
HTML Fonts
The <font> tag in HTML is deprecated. It is supposed to be removed in a
future version of
HTML. For example,
<p>
<font size="2" face="Verdana" color = "red">
This is a paragraph.
</font>
</p>

5 FORMATTING OF BACKGROUNDS

There are a couple of properties you can use to define color –HTML background-color and HTML color.
As the name suggests, the first one is used to change the color of the background. By using the simple

color property, you will change the color of the text.

The background-color property provides a color for the background of the text, but not for the whole
document. If you wish to change the HTML color for the whole page, you should use the bgcolor

attribute in the opening tag of the <body> section:

Example:

<body bgcolor="C7B4B1">

<body bgcolor="DarkSalmon">

HTML Forms

A form is an area that contains different form elements (like text fields, text area fields, drop-down
menus, radio buttons,

Also, Forms are used to select different types of user input. checkboxes etc.). Form elements are
elements that allow the user to enter information in a form.
A form is defined with the <form> tag. For example,

<form>

input elements

</form>

The most commonly used form tag is <input> tag. The type of input is
specified with the
type attribute within the <input> tag. For example,

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Submit Button
Another input type is submit button. When the user clicks on the "Submit"
button, the content of the form is
sent to the server. The form's action attribute defines the name of the file
to send the content to. The
file defined in the action attribute usually does something with the received
input. For example,

<form name="input" action=" submit.php" method="get"> Username:


<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
If you type some characters in the text field above, and click the "Submit"
button, the browser will send your
input to a page called "submit.php". The page will show you the received
input.
Note: You can use other different form elements as well.
The method attribute of <form> tag specifies how to send form-data (the
form-data is sent to the page
specified in the action attribute). We can use “get” and “post” as values of
method attribute. When we use
get, form-data can be sent as URL variables and when we use post, form-
data are sent as HTTP post.

Notes on the "get" method:


 This method appends the form-data to the URL in name/value pairs
 There is a limit to how much data you can place in a URL (varies between
browsers), therefore, you
cannot be sure that all of the form-data will be correctly transferred
 Never use the "get" method to pass sensitive information! (password or
other
sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
 This method sends the form-data as an HTTP post transaction
 The "post" method is more robust and secure than "get", and "post" does
not have size limitations

HTML Frames
We can use frames to display more than one web page in the same browser
window. Each
HTML document is called a frame, and each frame is independent of the
others. The disadvantages of using
frames are:
 The web developer must keep track of more HTML documents
 It is difficult to print the entire page
We use <frameset> tag to define how to divide the window into frames.
Each frameset defines a set of rows
or columns. Within frameset, we use <frame> tag to define what HTML
document to put into each frame.

If a frame has visible borders, the user can resize it by dragging the border.
To prevent a user from doing
this, you can add noresize="noresize" to the <frame> tag. Add the
<noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the
<frameset></frameset> tags. However, if you add a <noframes> tag
containing some text for browsers
that do not support frames, you will have to enclose the text in
<body></body> tags.
Example 1:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" noresize="noresize"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
Example 2:
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm"/>
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
Example 3: Mixed Frameset
<frameset rows="50%,50%">
<frame src="frame_a.htm"/>
<frameset cols="25%,75%">
<frame src="frame_b.htm"/>
<frame src="frame_c.htm"/>
</frameset>
</frameset>

HTML Fonts
The <font> tag in HTML is deprecated. It is supposed to be removed in a
future version of
HTML. For example,
<p>
<font size="2" face="Verdana" color = "red">
This is a paragraph.
</font>
</p>

CSS (Cascading Style Sheets)


CSS stands for cascading style sheets. It was first developed in 1997, as a
way for Web developers to define the look and feel of their Web pages. It
was intended to allow developers to separate content from design and layout
so that HTML could perform more of the function without worry about the
design and layout. It is used to separate style from content.
A CSS rule has the following Two main parts:
1. Selector
2. Declarations.

1. Selector
Selector indicates the HTML element you want to style. It could be any tag
like <h1>, <title> etc.

2. Declaration Block
The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
color: blue;
font-size: 12 px;
Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be


color, border etc.

Value: Values are assigned to CSS properties. In the above example, value
"yellow" is assigned to color property.

We can use style sheets in Three different ways in HTML document.

Three types of CSS:


1. Internal style sheet
2. Inline style.
3. External style sheet

1. Internal Style Sheet


If you want a unique style to a single document, an internal style sheet
should be used.
You define internal styles in the head section of an HTML page, by using the
<style> tag.

For example,
<head>
<style type="text/css">
hr {color:red;}
p {margin‐left:20px;}
body {background‐image:url("images/back40.gif");}
</style>
</head>

2. Inline Styles
If you want a unique style to a single element, an inline style sheet should be
used. An
inline style loses many of the advantages of style sheets by mixing content
with presentation.
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. Forexample,
<p style="color:yellow;margin‐left:20px">This is a paragraph.</p>
3. External Style Sheet
If we want to apply the same style to many pages, we use external style
sheet.
With an external style sheet, you can change the look of an entire Web site
by changing one style
sheet file.
Each page must link to the style sheet using the <link> tag. The <link> tag
goes inside the head section.

For example,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

An external style sheet can be written in any text editor. The file should not
contain any html tags.
Your style sheet should be saved with a .css extension.

An example of a style sheet file is shown below:


hr {color:sienna;}
p {margin‐left:20px;}
/*Note: Do not leave space between property value and units*/
body {background‐image:url("images/back40.gif");}
p {color:red;text‐align:center;}
Inserting CSS
We can use style sheets in three different ways in out HTML document. There
are external
style sheet, internal style sheet and inline style.
External Style Sheet
If we want to apply the same style to many pages, we use external style
sheet. With an
external style sheet, you can change the look of an entire Web site by
changing one style
sheet file. Each page must link to the style sheet using the <link> tag. The
<link> tag goes inside the head
section. For example,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:
hr {color:sienna;}
p {margin‐left:20px;} /*Note: Do not leave space between property value and units*/
body {background‐image:url("images/back40.gif");}
Internal Style Sheet
If you want a unique style to a single document, an internal style sheet
should be used. You
define internal styles in the head section of an HTML page, by using the
<style> tag. For
example,
<head>
<style type="text/css">
hr {color:red;}
p {margin‐left:20px;}
body {background‐image:url("images/back40.gif");}
</style>
</head>
Inline Styles
If you want a unique style to a single element, an inline style sheet should be
used. An
inline style loses many of the advantages of style sheets by mixing content
with presentation. To use inline
styles you use the style attribute in the relevant tag. The style attribute
can contain any CSS property. For
example,
<p style="color:yellow;margin‐left:20px">This is a paragraph.</p>

Id and Class Selectors


The id selector is used to specify a style for a single, unique element. The id
selector uses
id attribute of the HTML element and is defined with “#”. For example,
<head>
<style type="text/css">
#para1
{
text‐align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector
is most often used on several elements. This allows you to set a particular
style for any HTML elements with
the same class. The class selector uses the HTML class attribute, and is
defined with a ".". For example,
<head>
<style type="text/css">
.center
{
text‐align:center;
}
</style>
</head>
<body>
<h1 class="center">Center‐aligned heading</h1>
<p class="center">Center‐aligned paragraph.</p>
</body>

Id and Class Selectors


Id Selector
The id selector is used to specify a style for a single, unique element. The id selector uses
id attribute of the HTML element and is defined with “#”. For example,
<head>
<style type="text/css">
#para1
{
text‐align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
Class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector
is most often used on several elements. This allows you to set a particular style for any HTML
elements with
the same class. The class selector uses the HTML class attribute, and is defined with a ".". For
example,
<head>
<style type="text/css">
.center
{
text‐align:center;
}
</style>
</head>
<body>
<h1 class="center">Center‐aligned heading</h1>
<p class="center">Center‐aligned paragraph.</p>
</body>

You can also specify that only specific HTML elements should be affected by a class. For
example,
<head>
<style type="text/css">
p.center
{
text‐align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center‐aligned.</p>
</body>

Display the font-style property using CSS Class


<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style property</h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>

Output:

Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the
following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will
override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a
default value).
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the
external style sheet will override the internal style sheet!

You might also like