Scribd
Upload
151 views

Hyper Text Markup Language: What Is HTML?

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, lists, links and images. Some key tags include <html> to define an HTML document, <head> for metadata, <body> for content, <h1-6> for headings, <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, <a> for links, and <img> for images. HTML documents are displayed in web browsers using the tags to interpret and display the page's content.

Uploaded by

shetty33
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
151 views

Hyper Text Markup Language: What Is HTML?

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, lists, links and images. Some key tags include <html> to define an HTML document, <head> for metadata, <body> for content, <h1-6> for headings, <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, <a> for links, and <img> for images. HTML documents are displayed in web browsers using the tags to interpret and display the page's content.

Uploaded by

shetty33
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

HYPER TEXT MARKUP LANGUAGE

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 Documents = Web Pages

 HTML documents describe web pages


 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML tags, but
uses the tags to interpret the content of the page:

Example
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Example Explained
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

.HTM or .HTML File Extension?


When you save an HTML file, you can use either the .htm or the .html file extension.
The following are the different tags used in a HTML page

1. <!--This is a comment.-->
The comment tag is used to insert a comment in the source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
you edit the source code at a later date.

2. <html>
The <html> tag tells the browser that this is an HTML document.
The html element is the outermost element in HTML and XHTML documents. The html element
is also known as the root element.

3. <head>
The head element is a container for all the head elements. Elements inside <head> can
include scripts, instruct the browser where to find style sheets, provide meta information, and
more.
The following tags can be added to the head section: <base>, <link>, <meta>, <script>,
<style>,  and <title>.

4. <title>
The <title> tag defines the title of the document. The title element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results

5. <body>
The body element defines the document's body.The body element contains
all the contents of an HTML document, such as text, hyperlinks, images, tables,
lists, etc.
Attributes of BODY TAG:
BACKGROUND: The background attribute specifies a background image for a document.
Syntax: <body background="value">

BGCOLOR: The bgcolor attribute specifies the background color of a document.


Syntax : <body bgcolor="value">

TEXT: The text attribute specifies the color of the text in a document.
Syntax: <body text="value">

LINK: The link attribute specifies the default color of unvisited links in a document.
Syntax: <body link="value">

VLINK: The vlink attribute specifies the color of visited links in a document
.Syntax: <body vlink="value">

6. <font>
The font tag specifies the font face, font size, and font color of text.

Attributes of FONT TAG:


COLOR: The color attribute specifies the color of the text inside a font element.
Syntax : <font color="value">

FACE: The face attribute specifies the font of the text inside a font element.
Syntax : <font face="value">

SIZE: The size attribute specifies the size of the text inside a font element.
Syntax: <font size="value">

7. Heading tags (<h1>to<h6>)


The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the largest heading and <h6> defines the smallest heading.

8. Scripting tags

Subscript: The <sub> tag defines subscript text. Subscript text appears half a character
below the baseline. Subscript text can be used for chemical formulas, like H2O.
Syntax : <sub>text</sub>

Superscript: The <sup> tag defines superscript text. Superscript text appears half a
character above the baseline. Superscript text can be used for footnotes, like WWW[1].
Syntax: <sup>text</sup>

9. Paragraphs(<p>&</p>)
The <p> tag defines a paragraph. The ‘p’ element automatically creates some space
before and after itself. The space is automatically applied by the browser, or you can specify it in
a style sheet.

10. Emphasis(<em>&</em>)
To emphasis certain words in paragraphs, simply enclose them between an <em> tag and
an </em> tag. Emphasized words appear in italics when Web-page is shown.

11. Line Breaks(<br />)


The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it
has no end tag.

12. Non-Breaking Spaces(&nbsp)


When you want to keep words together, even though a space character separates them in
that case use a non-breaking space in place of normal space character. You indicate a non-
breaking space character by placing “&nbsp”; in your HTML page.

13. Pre-formatting Text(<pre>&</pre>)


The <pre> tag defines preformatted text. Text in a pre element is displayed in a fixed-
width font (usually Courier), and it preserves both spaces and line breaks.

14. Creating Lists


In HTML there are 3 different types of Lists: Unordered lists, Ordered lists and
Definition lists.

HTML Unordered Lists


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
EX: <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML code above looks in a browser as follows:
OUTPUT:
 Coffee
 Milk

HTML Ordered Lists


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
EX: <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML code above looks in a browser as follows:
OUTPUT:
1. Coffee
2. Milk

HTML Definition Lists


A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.The <dl> tag is used in conjunction with <dt> (defines the
item in the list) and <dd> (describes the item in the list)
EX: <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML code above looks in a browser as follows:
OUTPUT: Coffee
- black hot drink
Milk
- white cold drink
15. HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
a new document or a new section within the current document. When you move the cursor over a
link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute


2. To create a bookmark inside a document, by using the name attribute

1. HTML Link Syntax: The HTML code for a link is simple. It looks like this:

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


The href attribute specifies the destination of a link.
EX: <a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools.Clicking on this hyperlink will send the user to
W3Schools' homepage.
The "Link text" doesn't have to be text. You can link from an image or any other HTML element.

HTML Links - The target Attribute


The target attribute specifies where to open the linked document.

2. HTML Links - The name Attribute


The name attribute specifies the name of an anchor. The name attribute is used to create a
bookmark inside an HTML document. Bookmarks are not displayed in any special way. They
are invisible to the reader.

EX: A named anchor inside an HTML document:


<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

NOTE: If a browser does not find the named anchor specified, it goes to the top of the
document. No error occurs.

16. HTML The <img> Tag and the Src Attribute


In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means
that it contains attributes only, and has no closing tag.

The Src Attribute


To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display.

Syntax: <img src="url" alt="some_text"/>


The URL points to the location where the image is stored.

EX: An image named "boat.gif", located in the "images" directory on "www.w3schools.com"


has the URL: http://www.w3schools.com/images/boat.gif.

The Alt Attribute


The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
EX: <img src="boat.gif" alt="Big Boat" />

The alt attribute provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).

17. HTML Table(<table>&</table>)


Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag).
td stands for "table data," and holds the content of a data cell. A <td> tag can contain text,
links, images, lists, forms, other tables, etc.

EX: <table border="1">


<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

The HTML code above looks in a browser as follows:

OUTPUT:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML Table Headers
Header information in a table are defined with the <th> tag. The text in a th element will
be bold and centered.

EX: <table border="1">


<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
The HTML code above looks in a browser as follows:

OUTPUT:

The Border Attribute


If you do not specify a border attribute, the table will be displayed without borders.
Sometimes this can be useful, but most of the time, we want the borders to show.

EX: <table border="1">

HTML Forms
HTML forms are used to pass data to a server.A form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists,
textarea, fieldset and label elements.

Syntax: The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms - The Input Element


The most important form element is the input element. The input element is used to select
user information.
An input element can vary in many ways, depending on the type attribute. An input
element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below:

Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into.

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

The HTML code above looks in a browser as follows:

OUTPUT:

Note: The form itself is not visible. Also note that the default width of a text field is 20
characters. 

Password Field
<input type="password" /> defines a password field.

EX: <form>
Password: <input type="password" name="pwd" />
</form>

The HTML code above looks in a browser as follows:

OUTPUT:

Note: The characters in a password field are masked (shown as asterisks or circles). 

Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of
a limited number of choices.
EX: <form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

The HTML code above looks in a browser as follows:

OUTPUT:

Check Boxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.

EX: <form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

The HTML code above looks in a browser as follows:

OUTPUT:

Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually does
something with the received input.

EX: <form name="input" action="html_form_action.asp" method="get">


Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

The HTML code above looks in a browser as follows:

OUTPUT:

HTML Frames
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the others.

The HTML frameset Element


The frameset element holds two or more frame elements. Each frame element holds a
separate document. The frameset element states only HOW MANY columns or rows there will
be in the frameset.

The HTML frame Element


The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns:
The first column is set to 25% of the width of the browser window. The second column is set to
75% of the width of the browser window. The document "frame_a.htm" is put into the first column, and
the document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>

Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the
columns can be set to use the remaining space, with an asterisk (cols="25%,*").

CASCADING STYLE SHEETS (CSS)


HTML was never intended to contain tags for formatting a document.HTML was
intended to define the content of a document, like:

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

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large web sites, where fonts and color
information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a
separate CSS file. All browsers support CSS today.

What is CSS?

 CSS stands for Cascading Style Sheets


 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files.

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

1. The selector is normally the HTML element you want to style.

2. Each declaration consists of a property and a value.

3. The property is the style attribute you want to change. Each property has a value.

CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded
by curly brackets:
EX: p{color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:
p
{
color:red;
text-align:center;
}

EX:
<html>
<head>
<style type="text/css">
p{color:red;text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

OUTPUT:
Hello World!
This paragraph is styled with CSS.

CSS Comments
Comments are used to explain your code, and may help you when you edit the source
code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/

EX: p{text-align:center;/*This is another comment*/color:black;font-family:arial;}

Three Ways to Insert CSS


There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style

External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file.

Each page must link to the style sheet using the <link> tag. The <link> tag goes inside
the head section:
<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;}
body {background-image:url("images/back40.gif");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.

Internal Style Sheet


An internal style sheet should be used when a single document has a unique style.

You define internal styles in the head section of an HTML page, by using the <style> tag,
like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles
Inline style uses the style attribute in the relevant tag. The style attribute can contain any
CSS property.
An inline style loses many of the advantages of style sheets by mixing content with
presentation.

The example shows how to change the color and the left margin of a paragraph:
EX: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets


If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet. 
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties
for h3 will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-
size is replaced by the internal style sheet.

Grouping Selectors
In style sheets there are often elements with the same style.

h1{color:green;}
h2{color:green;}
p{color:green;}

To minimize the code, you can group selectors. Separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
h1,h2,p
{
color:green;
}

You might also like