Scribd
Upload
103 views9 pages

Unit 5

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define elements like headings, paragraphs, links, images, and tables. An HTML document contains HTML tags and plain text. The basic structure of an HTML page includes <html>, <head>, and <body> tags. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables with rows and cells. Attributes provide additional information about elements and come in name/value pairs.

Uploaded by

Navdeep Negi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
103 views9 pages

Unit 5

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define elements like headings, paragraphs, links, images, and tables. An HTML document contains HTML tags and plain text. The basic structure of an HTML page includes <html>, <head>, and <body> tags. Common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <table> for tables with rows and cells. Attributes provide additional information about elements and come in name/value pairs.

Uploaded by

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

1 Unit- 5 HTML _ MHM

HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can
be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web
page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements,
are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also
called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-
based content.

HTML is a language for describing web pages.


HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describes document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

HTML Tags

HTML markup tags are usually called HTML tags


HTML tags are keywords (tag names) 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
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

HTML Page Structure

Below is a visualization of an HTML page structure:


<html>
<head>

<title> WebPage </title>


</head>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Elements

HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair
of tags, a "start tag" and "end tag"; some attributes within the start tag; and finally, any textual and graphical  content between
2 Unit- 5 HTML _ MHM

the start and end tags, perhaps including other nested elements. The  HTML element is everything between and including the
start and end tags. Each tag is enclosed in angle brackets.

The general form of an HTML element is therefore: <tag attribute1="value1" attribute2="value2">content</tag> . Some HTML
elements are defined as empty elements and take the form <tag attribute1="value1" attribute2="value2" >. Empty elements may
enclose no content, for instance, the BR tag or the inline IMG tag. The name of an HTML element is the name used in the tags.
Note that the end tag's name is preceded by a slash character, "/", and that in empty elements the end tag is neither required nor
allowed. If attributes are not mentioned, default values are used in each case.

Element examples

Header of the HTML document:<head>...</head>. Usually the title should be included in the head, for example:

<head>

<title>The Title</title>

</head>

Headings: HTML headings are defined with the <h1> to <h6> tags:

<h1>Heading1</h1>

<h2>Heading2</h2>

<h3>Heading3</h3>

<h4>Heading4</h4>

<h5>Heading5</h5>

<h6>Heading6</h6>

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>


3 Unit- 5 HTML _ MHM

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like  bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

HTML Images - 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.

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 for defining an image:

<img src="url" alt="some_text">

Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align attribute with a
paragraph tag as well.
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>
Line Breaks

The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place
it. It is similar to single spacing in a document

Horizontal Rule

The <hr> element is used for horizontal LINE that act as dividers between sections,

<hr width="50%" align="center">

HTML Links
HTML uses the <a> anchor tag to create a link to another document or web page.
The Anchor Tag and the Href Attribute
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of
creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, Would Display
the href attribute is used to tell the address of the
document or page we are linking to, and the words
between the open and close of the anchor tag will be
displayed as a hyperlink. This Code
4 Unit- 5 HTML _ MHM

<a href="http://www.austincc.edu/">Visit ACC! Visit ACC!


</a>

HTML Images
The Image Tag and the Src Attribute
The <img> tag is empty, which means that it Would Display
contains attributes only and it has no closing tag.
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 on your page. The syntax of
defining an image: This Code
<img src="graphics/chef.gif">

The Alt Attribute


The alt attribute is used to define an alternate text for an image. The value of the alt attribute is author-defined text:
<img src="graphics/chef.gif" alt="Smiling Happy Chef ">
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 good 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 or use screen
readers.
Image Dimensions
When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image
dimensions in pixels however, the browser simply reserves a space for the image, then loads the rest of the page. Once
the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser
has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

Tables
Tables are defined with the <table> tag. A table is Would Display
divided into rows (with the <tr> tag), and each row
is divided into data cells (with the <td> tag). The
letters td stands for table data, which is the content
of a data cell. A data cell can contain text, images,
lists, paragraphs, forms, horizontal rules, tables, etc.
This Code
<table> <tr> <td>row 1, cell 1</td> <td>row row 1, cell 1
1, cell 2</td> </tr> <tr> <td>row 2, cell row 1, cell 2
1</td> <td>row 2, cell 2</td> </tr> </table> row 2, cell 1
row 2, cell 2

Cell Padding and Spacing


The <table> tag has two attributes known as Would Display
cellspacing and cellpadding. Here is a table example
without these properties. These properties may be
used separately or together. This Code
<table border="1"> <tr> <td>some text</td> some text
<td>some text</td> </tr> <tr> <td>some some text
text</td> <td>some text</td> </tr> </table> some text
some text
5 Unit- 5 HTML _ MHM

Cellspacing is the pixel width between the individual Would Display


data cells in the table (The thickness of the lines
making the table grid). The default is zero. If the
border is set at 0, the cellspacing lines will be
invisible. This Code
<table border="1" cellspacing="5"> <tr> some text
<td>some text</td> <td>some text</td> some text
</tr><tr> <td>some text</td> <td>some some text
text</td> </tr> </table> some text
6 Unit- 5 HTML _ MHM

Colspan and Rowspan Attributes:


You will use colspan attribute if you want to merge two or more columns
into a single column. Similar way you will use rowspan if you want to
merge two or more rows. Following is the example: <table
border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>

<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Tables Backgrounds
You can set table background using of the following two ways:
 Using bgcolor attribute - You can set background color for whole table
or just for one cell.
 Using background attribute - You can set background image for whole
table or just for one cell.

HTML Fonts

Font tag is used to set the font of any text. The font tag is having three attributes called size, color, and face to customize your fonts.

To change any of the font attributes at any time within your page, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can
change any or all of the font attributes at the one time, by including all the required changes within the one <font> tag.

p><font size="+2" color="darkgray" face=”Times New Roman”>

HTML Lists

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list: An unordered list:

The first list item List item

The second list item List item

The third list item List item

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).
7 Unit- 5 HTML _ MHM

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

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.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

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):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
8 Unit- 5 HTML _ MHM

Frames Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. One of
the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the
browser window. A collection of frames in the browser window is known as a frameset.

The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. The simplest of framesets
might just divide the screen into two rows, while a complex frameset could use several rows and columns.

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

ADDING ANIMATION

Here is a simple example to play embed a midi file:

<embed src="/html/yourfile.mid" width="100%" height="60" >


<noembed><img src="yourimage.gif" ></noembed>
</embed>

Attributes:

Following is the list of important attributes for <embed> element.

 align - Determines how to align the object. It takes either center, left or right.

 autostart - Indicates if the media should start automatically. Netscape default is true, Internet Explorer is false.

 loop - Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at
all (false). This is supported by Netscape only.

 playcount - Specifies the number of times to play the sound. This is alternat option forloop if you are usiong IE.

 hidden - Defines if the object shows on the page. A false value means no and true means yes.

 height - Height of the object in pixels or en.

 width - Width of the object in pixels or en.

 pluginspage - Specifies the URL to get the plugin software.

 name - A name used to reference the object.

 src - URL of the object to be embedded. This can be any recognizable by the user's browser. It could be .mid, .wav, .mp3, .avi and
so on).

 volume - Controls volume of the sound. Can be from 0 (off) to 100 (full volume). This attribute is supported by Netscape only.

HTML - Video Media Types

Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types are supported by the embed tag.
9 Unit- 5 HTML _ MHM

 .swf files - are the file types created by Macromedia's Flash program.
 .wmv files - are Microsoft's Window's Media Video file types.
 .mov files - are Apple's Quick Time Movie format.
 .mpeg files - are movie files created by the Moving Pictures Expert Group.

Here is a simple example to play a flash file.

<embed src="/html/yourfile.swf" width="100%" height="250" >


<noembed><img src="yourimage.gif" alt="yourimage.gif" /></noembed>
</embed>

You might also like