Scribd
Upload
16 views110 pages

HTML Basics for Web Designers

This document serves as a comprehensive tutorial on HTML, aimed at aspiring web designers and developers. It covers the basics of HTML, including its definition, history, structure, tags, elements, attributes, and formatting options, along with practical examples. Additionally, it discusses deprecated tags and the importance of using CSS for styling in modern web development.

Uploaded by

sherabi120
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views110 pages

HTML Basics for Web Designers

This document serves as a comprehensive tutorial on HTML, aimed at aspiring web designers and developers. It covers the basics of HTML, including its definition, history, structure, tags, elements, attributes, and formatting options, along with practical examples. Additionally, it discusses deprecated tags and the importance of using CSS for styling in modern web development.

Uploaded by

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

HTML

DESIGNED FOR THE ASPIRING WEB DESIGNERS AND DEVELOPERS


PREREQUISITES
Before proceeding with this tutorial you should have a basic working
knowledge with Windows or Linux operating system, additionally you must be
familiar with:

▪ Experience with any text editor like notepad, notepad+


+, or Editplus etc.

▪ How to create directories and files on your computer.

▪ How to navigate through different directories.

▪ How to type content in a file and save them on a computer.

▪ Understanding about images in different formats like


JPEG, PNG format.
DEFINITION
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus the link available on a webpage are called
Hypertext.
As its name suggests, HTML is a Markup Language, which means
you use HTML to simply "mark up" a text document with tags that
tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
DEFINITION
In HTML you describe the content in pure text, by defining text as
headings, paragraphs, lists, etc. A tag is a text surrounded by angle
brackets.
Tags usually have a beginning and end and contain other text between
the start and end tag. The normal content of the webpage is placed
between the <body> </body> tags, the <head> </head> tag contains
general information about the webpage
HISTORY
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Ragget drafted HTML+
1995 HTML working group defined HTML 2.0
1997 W3C recommendation: HTML 3.2
1999 W3C recommendation: HTML 4.01
2000 W3C recommendation: XHTML 1.0
2012 WHATWG HTML5 living standard
2016 W3C candidate recommendation: HTML 5.1
HTML TAGS
As told earlier, HTML is a markup language and makes use of various
tags to format the content. These tags are enclosed within angle
braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example <html> has its closing tag
</html> and <body> tag has its closing tag </body> tag etc.
TAG DESCRIPTION

<!DOCTYPE... This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented
by <body>...</body> tags.

<head> This tag represents the document's header which can keep
other HTML tags like <title>, <link> etc.

The <title> tag is used inside the <head> tag to mention


<title> the document title

This tag represents the document's body which keeps other


<body> HTML tags like <h1>, <div>, <p> etc.

<h1> and <p> This tag represents the heading and paragraph respectively
To learn HTML, you will need to study various tags and understand
how do they behave while formatting a textual document. Learning
HTML is simple as users have to learn the usage of different tags in
order to format the text or images to make a beautiful webpage.

World Wide Web Consortium (W3C) recommends to use lowercase


tags starting from HTML
HTML DOCUMENT
STRUCTURE
<!doctype html>

<html>

<head>
<meta charset=“UTF-8”>
<title> Title of the document</title>
</head>

<body>

Document body related tags

</body>

</html>
THE <!DOCTYPE>
DECLARATION
The <!DOCTYPE> declaration tag is used by the web browser to
understand the version of the HTML used in the document. Current
version of HTML is 5 and it makes use of the following declaration:
HEADING TAGS
Any document starts with a heading. You can use different
sizes for your headings. HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>.

While displaying any heading, browser adds one line before


and one line after that heading.
EXAMPLE
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
LINE BREAK TAG
Whenever you use the <br /> element, anything following it starts
from the next line. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is nothing
to go in between them.

The <br /> tag has a space between the characters br and the
forward slash. If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward slash
character and just use <br> it is not valid in XHTML
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Linebreak Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment
ontime.<br />
Thanks<br />
Mahnaz
</p>
</body>
</html>
CENTERING CONTENT
You can use <center> tag to put any content in the center of the
page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Center Example</title>
</head>
<body>
<center>
<p> This text is centered </p>
</center>
</body>
</html>
HORIZONTAL LINES
Horizontal lines are used to visually break up sections of a
document. The <hr> tag creates a line from the current position in
the document to the right margin and breaks the line accordingly.
<!DOCTYPE html>
<html>
<head> <title>Horizontal Line Example</title>
</head>
<body>
<p> This line is on top</p>
<hr/>
<p> This line is on top</p>
</body>
</html>
HTML ELEMENTS
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash

So here <p>....</p> is an HTML element, <h1>...</h1> is another


HTML element. There are some HTML elements which don't need to
be closed, such as <img.../>, <hr /> and <br /> elements. These are
known as void elements.
HTML TAGS VS. ELEMENT
An HTML element is defined by a starting tag. If the element contains
other content, it ends with a closing tag.

For example <p> is starting tag of a paragraph and </p> is closing tag
of the same paragraph but <p>This is paragraph</p> is a paragraph
element.
HTML TAGS
HTML Phrase Tag
Phrase Tag: In HTML, phrase tag is used to indicate
the structural meaning of a block of text. For example,
abbr tag indicates that the phrase contained the
abbreviation word. Some examples of phrase tags are
<abbr>, <strong>, <mark>, . . . etc.
Emphasized Text: The <em> tag is used to
emphasized the text and this tag displays the italic
font in a browser. It simply means anything written
within em tag is shown as emphasized Text.
Syntax:
HTML TAGS
NESTED HTML ELEMENTS
It is very much allowed to keep one HTML element inside another HTML element:

<!DOCTYPE html>
<html>
<head>
<title>nested elements</title>
</head>
<body>
<h1> This text is <i>italic</i></h1>
<p> This text is <u>underlined</u></p>
</body>
</html>
HTML ATTRIBUTES
An attribute is used to define the characteristics of an HTML element
and is placed inside the element's opening tag.
All attributes are made up of two parts: a name and a value:
• The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the
page.

• The value is what you want the value of the property to be set and
always put within quotations. The below example shows three
possible values of align attribute: left, center and right.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Line Break Example</title>
</head>
<body>
<p align=“left”> This is aligned left</P>
<p align=“center”> This is aligned center</P>
<p align=“right”> This is aligned right</P>
</body>
</html>
SOME GENERIC ATTRIBUTES
Attributes Options Functions

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags


within an HTML element.

bgcolor numeric, hexadecimal, Places a background color


RGB values behind an element

Places a background
background URL
image behind an element
FORMATING
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline
Strike Text
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size
used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
FORMATING
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is
the same as the characters surrounding it, but is displayed half a character's height
beneath the other characters.
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest
of the text surrounding it
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than
the rest of the text surrounding it
FORMATING
Text Abbreviation: To abbreviate a text in HTML
use abbr tag. Abbreviation of text written within
opening and closing abbr tag.
Syntax:

<abbr title = “joytutoials">CRISPYLIPS</abbr>


Example:
FORMATING
<!DOCTYPE html>
<html>
<body>

<h1>MYJOY</h1>
<!-- abbr tag is used in below paragraph-->

<p><abbr title = “joytutorials">JOY TUTORIALS</abbr>


abbreviation tag</p>

</body>
</html>
FORMATING
Marked Text: The content written within the
open and close mark tag will display as a
yellow mark. Basically, it works like a
highlighter and it is used to highlight some
words in a sentence.
Syntax:
<mark> Text Content </mark>
FORMATING
<html>
<body>

<h1>MYJOYONLINE</h1>

<!-- mark tag is used in below paragraph-->

<p><mark>MyJoyOnline</mark> mark tag</p>

</body>
</html>
HTML BACKGROUNDS
By default, your webpage background is white in color. You may not like it, but no
worries. HTML provides you following two good ways to decorate your webpage
background.
• Html Background with Colors
• Html Background with Images

The bgcolor attribute is used to control the background of an HTML element,


specifically page body and table backgrounds.
HTML MARQUEES
An HTML marquee is a scrolling piece of text displayed either horizontally across or
vertically down your webpage depending on the settings. This is created by using
HTML <marquees> tag.
Note: The HTML <marquee> tag may not be supported by
various browsers so its not recommended to rely on this tag,
instead you can use Javascript and CSS to create such effects.
Syntax
A simple syntax to use HTML <marquee> tag is as follows:

<marquee attribute_name="attribute_value"....more attributes>


One or more lines or text message or image
</marquee>
MARQUEE ATTRIBUTES
Following is the list of important attributes which can be used with <marquee> tag.

Attribute Description
This specifies the width of the marquee. This can be a value like 10 or
width 20% etc.

This specifies the height of the marquee. This can be a value like
height 10 or 20% etc.
This specifies the direction in which marquee should scroll. This
direction can be a value like up, down, left or right.
This specifies the type of scrolling of the marquee. This can
behavior have a value like scroll, slide and alternate.
This specifies how long to delay between each jump. This will
scrolldelay have a value like 10 etc.
MARQUEE ATTRIBUTES
Following is the list of important attributes which can be used with <marquee> tag.

Attribute Description
This specifies the speed of marquee text. This can have a value like 10
scrollamount etc.
This specifies how many times to loop. The default value is
loop INFINITE, which means that the marquee loops endlessly.

This specifies background color in terms of color name or color


bgcolor hex value.
This specifies horizontal space around the marquee. This can be
hspace a value like 10 or 20% etc.
This specifies vertical space around the marquee. This can be a
vspace value like 10 or 20% etc.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>
This is basic example of marquee
</marquee>
</body>
</html>
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width=“50%” bgcolor=“gray”
behavior=“alternate”>
This is basic example of marquee
</marquee>
</body>
</html>
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction=“right”>
This is basic example of marquee
</marquee>
</body>
</html>
HTML FONTS
Fonts play very important role in making a website more user
friendly and increasing content readability. Font face and color
depends entirely on the computer and browser that is being used
to view your page but you can use HTML <font> tag to add style,
size, and color to the text on your website. You can use a
<basefont> tag to set all of your text to the same size, face, and
color.

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 webpage, simply use the
<font> tag. The text that follows will remain changed until you
close with the </font> tag. You can change one or all of the
font attributes within one <font> tag.
HTML FONTS
Note: The font and basefont tags are deprecated and it is
supposed to be removed in a future version of HTML. So they
should not be used rather, it's suggested to use CSS styles to
manipulate your fonts. But still for learning purpose, this
chapter will explain font and basefont tags in detail.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1“</font><br />
<font size="2">Font size="2“</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
</body>
</html>
RELATIVE FONT SIZE
You can specify how many sizes larger or how many sizes smaller
than the preset font size should be. You can specify it like
<font size="+n"> or <font size="-n">
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Setting Font Size</title>
</head>
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>
</body>
</html>
SETTING FONT FACE
You can set font face using face attribute but be aware that if
the user viewing the page doesn't have the font installed, they
will not be able to see it. Instead user will see the default font
face applicable to the user's computer.

A visitor will only be able to see your font if they have that font installed on
their computer. So, it is possible to specify two or more font face alternatives
by listing the font face names, separated by a comma.
<font face="arial,helvetica"> <font face="Lucida Calligraphy,Comic
Sans MS,Lucida Console">
When your page is loaded, their browser will display the first font face
available. If none of the given fonts are installed, then it will display the
default font face Times New Roman.

Note: Check a complete list of HTML Standard Fonts.


SETTING FONT COLOR
You can set any font color you like using color attribute. You can
specify the color that you want by either the color name or
hexadecimal code for that color.

THE <BASEFONT> ELEMENT


The <basefont> element is supposed to set a default font size, color, and
typeface for any parts of the document that are not otherwise contained
within a <font> tag. You can use the <font> elements to override the
<basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will
support relative font setting by giving size a value of +1 for a size larger or -
2 for two sizes smaller.
EXAMPLE FONT FACE
<!DOCTYPE html>
<html>
<head> <title>Setting Font Size</title>
</head>
<body>
<font face="Times New Roman" size="5">Times New
Roman</font><br /> <font face="Verdana"
size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>
EXAMPLE FONT COLOR
<!DOCTYPE html>
<html>
<head> <title>Setting Font Size</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>
EXAMPLE BASE FONT
<!DOCTYPE html>
<html>
<head> <title>Setting Font Size</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2"
color="#ff0000"> <p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="darkgray"> This is darkgray text with
two sizes larger </font></p>
<p><font face="courier" size="-1" color="#000000"> It is a courier
font, a size smaller and black in color. </font></p>
</body>
</html>
HTML TABLES
The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used
to create data cells.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>tables example</title>
</head>
<body>
<table border=“1”>
<tr>
<td>row1column1</td>
<td>row1column2</td>
</tr>

<tr>
<td>row2column1</td>
<td>row2column2</td>
</tr>

</body>
</html>
TABLE HEADING
Table heading can be defined using <th> tag. This tag will be
put to replace <td> tag, which is used to represent actual data
cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any row.

There are two attribiutes called cellpadding and cellspacing which


you will use to adjust the white space in your table cells.
The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the
content within a cell.
EXAMPLE(table heading)
<!DOCTYPE html>
<html>
<head>
<title>tables example</title>
</head>
<body>
<table border=“1”>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>

<tr>
<td>Kofi Kumi</td>
<td>Ghc 1000</td>
</tr>

<tr>
<td>Adwoa Kwaata</td>
<td>Ghc 1000</td>
</tr>
</table>

</body>
EXAMPLE(cellpading/
cellspacing)
<!DOCTYPE html>
<html>
<head>
<title>tables example</title>
</head>
<body>
<table border=“1” cellpading=“5” cellspacing=“5” >
<tr>
<th>Name</th>
<th>Salary</th>
</tr>

<tr>
<td>Kofi Kumi</td>
<td>Ghc 1000</td>
</tr>

<tr>
<td>Adwoa Kwaata</td>
<td>Ghc 1000</td>
</tr>

</body>
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.
EXAMPLE(colspan and rowspan)
<!DOCTYPE html>
<html>
<head>
<title>tables example</title>
</head>
<body>
<table border=“1” cellpading=“5” cellspacing=“5” >
<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>

</body>
</html>
TABLES BACKGROUND
You can set table background using one of the following two
ways:

BGCOLOR ATTRIBUTE - You can set background color for whole table
or just for one cell.
BACKGROUND ATTRIBUTE - You can set background image for whole
table or just for one cell.

You can also set border color also using BORDERCOLOR ATTRIBUTE.
TABLES HEIGHT AND WIDTH
You can set a table width and height using width and height attrubutes.
You can specify table width or height in terms of pixels or in terms of
percentage of available screen area.
EXAMPLE
<table height=“400” width=“150”>
TABLE
CAPTION
The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table. This tag is deprecated in newer version
of HTML/XHTML.
<caption>This is caption</caption>
TABLE HEADER, BODY, AND
FOOTER
Tables can be divided into three portions: a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content holder of
the table.
The three elements for separating the head, body, and foot of a table are:
<THEAD> - to create a separate table header.
<TBODY> - to indicate the main body of the table.
<TFOOT> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or
groups of data. But it is notable that <thead> and <tfoot> tags should
appear before <tbody>
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr> <td colspan="4">This is the head of the table</td> </tr> </thead>
<tfoot>
<tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
LINKS
A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known
as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking


on words, phrases, and images. Thus you can create hyperlinks
using text or images available on a webpage.

A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach to
the linked document. Following is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link Text</a>
LINKING DOCUMENTS
A link is specified using HTML tag <a>. This tag is
called anchor tag and anything between the opening <a> tag
and the closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document. Following
is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link
Text</a>
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="[Link] target="_self">Tutorials
Point</a>
</body>
</html>
THE TARGET ATTRIBUTE
We have used target attribute in our previous example. This
attribute is used to specify the location where linked document
is opened. Following
Option are possible options:
Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the
window.
targetframe Opens the linked document in a named
targetframe.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Hyperlink Example</title>
<base href="[Link]
</head>
<body>
<p>Click any of the following links</p>
<a href="/[Link]" target="_blank">Opens in New</a> |
<a href="/[Link]" target="_self">Opens in Self</a> |
<a href="/[Link]" target="_parent">Opens in Parent</a> |
<a href="/[Link]" target="_top">Opens in Body</a>
</body>
</html>
USE OF BASE PATH
When you link HTML documents related to the same website, it
is not required to give a complete URL for every link. You can
get rid of it if you use <base> tag in your HTML document
header. This tag is used to give a base path for all the links. So
your browser will concatenate given relative path to this base
path and will make a complete URL.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Hyperlink Example</title>
<base href="[Link]
</head>
<body>
<p>Click following link</p>
<a href="/[Link]" target="_blank">HTML Tutorial</a>
</body>
</html>
NAV,ASIDE,ARTICLE,FOOTER,ADDRE
SS
HTML5 introduced several new ways of classifying content of the
webpage, e.g., <nav> </nav> for the navigation part of the page,
<article> to represent an independent article,<aside> </aside> to
represent a sidebar with related information.<footer> </footer> for
a footer in the HTML page and <address> </address> for the
contact information of the author.
HTML <img> /<picture> Tag
Syntax
The basic syntax of the <picture> tag is given with:

<picture>
<img src="URL" alt="text">
</picture>
The example below shows the <picture> tag in action.

ExampleTry this code »


<picture>
<source media="(min-width: 1024px)" srcset="images/banner-
[Link]">
<source media="(max-width: 768px)" srcset="images/banner-
[Link]">
<img src="images/[Link]" alt="Banner">
</picture>
HTML EMBED MULTIMEDIA
Sometimes you need to add music or video into your web
page. The easiest way to add video or sound to your web site
is to include the special HTML tag called <embed>. This tag
causes the browser itself to include controls for the multimedia
automatically provided browser supports <embed> tag and
given media type.

You can also include a <noembed> tag for the browsers which
don't recognize the <embed> tag. You could, for example, use
<embed> to display a movie of your choice, and <noembed>
to display a single JPG image if browser does not support
<embed> tag.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/[Link]" width="100%" height="60" >
<noembed><img src="[Link]" alt="Alternative Media" >
</noembed>
</embed>
</body>
</html>
THE <EMBED> TAG
ATTRIBUTES
Following is the list of important attributes which can be used
with <embed> tag.
Attribute Description
align Determines how to align the object. It can be set to
either center, left or right.
autostart This boolean attribute indicates if the media should start
automatically. You can set it either true or 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)
playcount Specifies the number of times to play the sound. This is
alternate option for loop if you are usiong IE.
hidden Specifies if the multimedia object should be shown on
the page. A false value means no and true values means
yes.
width Width of the object in pixels
height Height of the object in pixels
name A name used to reference the object.
src URL of the object to be embedded.
volume Controls volume of the sound. Can be from 0 (off) to 100
(full volume).
SUPPORTED VIDEO TYPES
You can use various media types like Flash movies (.swf), AVI's
(.avi), and MOV's (.mov) file types inside embed tag.

.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.
BACKGROUND AUDIO
You can use HTML <bgsound> tag to play a soundtrack in the
background of your webpage.
This tag is supported by Internet Explorer only and most of the
other browsers ignore this tag. It downloads and plays an audio
file when the host document is first downloaded by the user and
displayed. The background sound file also will replay whenever
the user refreshes the browser.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML embed Tag</title>
</head>
<body>
<bgsound src="/html/[Link]">
<noembed><img src="[Link]" >
</noembed>
</bgsound>
</body>
</html>
Attribute Description

autoplay
This Boolean attribute if specified, the video will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
autobuffer
This Boolean attribute if specified, the video will automatically begin buffering even if it's
not set to automatically play.
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)
poster
This is a URL of an image to show until the user plays or seeks.
width Width of the object in pixels
height Height of the object in pixels
preload
This attribute specifies that the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.
Src: The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
Controls:
If this attribute is present, it will allow the user to control video playback, including volume,
seeking, and pause/resume playback.
HTML FORMS
HTML Forms are required when you want to collect some data from the site
visitor. For example during user registration you would like to collect
information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application
will perform required processing on the passed data based on defined business
logic inside the application.
There are various form elements available like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following
syntax:

<form action="Script URL" method="GET|POST"> form elements like


input, textarea etc. </form>
FORM ATTRIBUTES
Apart from common attributes, following is a list of the most frequently used
form attributes:

Attribute Description

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are
GET and POST methods.

target Specify the target window or frame where the result of the script
will be displayed. It takes values like _blank, _self, _parent etc.
You can use the enctype attribute to specify how the browser encodes the
data before it sends it to the server. Possible values are:

enctype • application/x-www-form-urlencoded - This is the standard method most


forms use in simple scenarios.

• mutlipart/form-data - This is used when you want to upload binary data


in the form of files like image, word file etc.

Note: You can refer to Perl & CGI for a detail on how form data upload works.
HTML FORM CONTROLS
There are different types of form controls that you can use to collect data using
HTML form:
• Text Input
Controls
• Checkboxes
Controls
• Radio Box
Controls
• Select Box
Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset
Button
TEXT INPUT CONTROLS
There are three types of text input used on forms:

• Single-line text input controls - This control is used for items


that require only one line of user input, such as search boxes
or names. They are created using HTML <input> tag.

• Password input controls - This is also a single-line text input


but it masks the character as soon as a user enters it. They
are also created using HTMl <input> tag.
• Multi-line text input controls - This is used when the user is
required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML
<textarea> tag.
SINGLE-LINE TEXT INPUT
CONTROLS
This control is used for items that require only one line of user
input, such as search boxes or names. They are created using
HTML <input> tag.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML embed Tag</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" /> <br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <input> tag for creating text field.

Attribute Description
type Indicates the type of input control and for text input control it
will be set to text.
name Used to give a name to the control which is sent to the server to
be recognized and get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of


characters.

maxlength Allows to specify the maximum number of characters a user


can enter into the text box.
PASSWORD INPUT CONTROLS
This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTML
<input> tag but type attribute is set to password.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title> password input controls</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" /> <br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <input> tag for creating password fields.

Attribute Description
type Indicates the type of input control and for password input
control it will be set to password.
name Used to give a name to the control which is sent to the server to
be recognized and get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of


characters.

maxlength Allows to specify the maximum number of characters a user


can enter into the text box
MULTIPLE-LINE TEXT INPUT
CONTROLS
This is used when the user is required to give details that may
be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Multiple line text input controls</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description"> Enter description here...
</textarea>
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <textarea> tag.

Attribute Description
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
row Indicates the number of rows of text area box

Column Indicates the number of columns of text area box


CHECKBOX CONTROL
Checkboxes are used when more than one option is required to
be selected. They are also created using HTML <input> tag but
type attribute is set to checkbox.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>Multiple line text input controls</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <checkbox> tag.

Attribute Description
type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.


RADIO BUTTON CONTROL
Radio buttons are used when out of many options, just one option
is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>radio button control</title>
</head>
<body>
<form>
<input type=“radio" name=“subject" value=“maths"> Maths
<input type=“radio" name=“subject" value="physics"> Physics
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for radio button.

Attribute Description
type Indicates the type of input control and for checkbox input
control it will be set to radio.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.


SELECT BOX CONTROL
A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from where
a user can select one or more options.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>select box control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
ATTRIBUTES
Following is the list of important attributes of <select> tag:

Attribute Description
value The value that will be used if an option in the select box box is
selected.
selected Specifies that this option should be the initially selected value
when the page loads.

label An alternative way of labeling options


ATTRIBUTES
Following is the list of important attributes of <option> tag:

Attribute Description
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
size This can be used to present a scrolling list box.

value If set to "multiple" then allows a user to select multiple items


from the menu.
FILE UPLOAD BOX
If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is
also created using the <input> element but type attribute is set to file.

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>file upload box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*/”>
</form>
</body>
</html>
ATTRIBUTES
Following is the list of important attributes of <select> tag:

Attribute Description

name Used to give a name to the control which is sent


to the server to be recognized and get the value.

accept Specifies the types of files that the server accepts.


BUTTON CONTROLS
There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input> tag by setting its type attribute
to button. The type attribute can take the following values:

EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>button controls</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/[Link]" />
</form>
</body>
ATTRIBUTES
Following is the list of important attributes of <select> tag:

Attribute Description
submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form


controls to their initial values.

button This creates a button that is used to trigger a client-side


script when the user clicks that button.

image This creates a clickable button but we can use an image


as background of the button.
BUTTON CONTROLS
Hidden form controls are used to hide data inside the page which
later on can be pushed to the server. This control hides inside the
code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number.
When a user will click next page then the value of hidden control
will be sent to the web server and there it will decide which page
has be displayed next based on the passed current page
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
HTML STYLE SHEET
Cascading Style Sheets (CSS) describe how documents are presented
on screens, in print, or perhaps how they are pronounced. W3C has
actively promoted the use of style sheets on the Web since the
Consortium was founded in 1994.

Cascading Style Sheets (CSS) provide easy and effective alternatives to


specify various attributes for the HTML tags. Using CSS, you can specify
a number of style properties for a given HTML element. Each property
has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML CSS</title>
</head>
<body>
<p><font color="green" size="5">Hello, World!</font></p>
</body>
</html>

We can re-write above example with the help of Style Sheet as follows:

<!DOCTYPE html>
<html>
<head> <title>HTML CSS</title>
</head>
<body> <p style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>
HTML STYLE SHEET
You can use CSS in three ways in your HTML document:

• External Style Sheet - Define style sheet rules in a separate .css file
and then include that file in your HTML document using HTML <link>
tag.

• Internal Style Sheet - Define style sheet rules in header section of


the HTML document using <style> tag.

• Inline Style Sheet - Define style sheet rules directly along-with the
HTML elements using style attribute.

Let's see all the three cases one by one with the help of suitable
examples.
EXTERNAL STYLE SHEET
If you need to use your style sheet to various pages, then its always
recommended to define a common style sheet in a separate file. A
cascading style sheet file will have extension as .css and it will be
included in HTML files using <link> tag.

EXAMPLE
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
EXTERNAL STYLE SHEET
Here we defined three CSS rules which will be applicable to
three different classes defined for the HTML tags. I suggest
you should not bother about how these rules are being
defined because you will learn them while studying CSS.
Now let's make use of the above external CSS file in our
following HTML document:
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML External CSS</title> <link
rel="stylesheet" type="text/css" href="/html/[Link]">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
INTERNAL STYLE SHEET
If you want to apply Style Sheet rules to a single document only then you can
include those rules in header section of the HTML document using <style> tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS
file.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML Internal CSS</title>
<style type="text/css"> .red{ color: red; } .thick{ font-
size:20px; } .green{ color:green; }
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
INLINE STYLE SHEET
You can apply style sheet rules directly to any HTML element using style attribute
of the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an external
CSS file as well as the rules defined in <style> element.
EXAMPLE
<!DOCTYPE html>
<html>
<head> <title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">This is thick and
green</p> </body>
</html>
THE END
THAT’S ALL FOLKS

You might also like