Scribd
Upload
3 views24 pages

HTML

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, using elements represented by tags to structure content. The document covers the basics of HTML, including its structure, tags, and various elements such as headings, paragraphs, lists, links, images, and colors. It also provides examples and guidance on using HTML editors and saving HTML files.

Uploaded by

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

HTML

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, using elements represented by tags to structure content. The document covers the basics of HTML, including its structure, tags, and various elements such as headings, paragraphs, lists, links, images, and colors. It also provides examples and guidance on using HTML editors and saving HTML files.

Uploaded by

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

1 HTML

HTML (HYPER TEXT MARKUP LANGUAGE)


WHAT IS HTML?
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page

A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

WHAT IS HTML TAGS


HTML tags are element names surrounded by angle brackets:
Tip: The start tag is also called the opening tag, and the end tag the closing tag.

WEB BROWSERS
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display
them.
The browser does not display the HTML tags, but uses them to determine how to display the document:

HTML VERSIONS
VERSION YEAR
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTM 2000
HTML 5 2014
2 HTML

HTML PAGE STRUCTURE

HTML EDITORS
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or Notepad++ etc.

SAVING HTML PAGE IN NOTEPAD


For Example Type the Following Codes

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Click on File Menu
Click on Save As
Select save as type: All Files and Type File name with .htm or .html like as [Link]
Click on save
3 HTML

HTML TAGS Example:

<!DOCTYPE html>
HTML HEADINGS
<html><body>
HTML headings are defined with <a
the <h1> to <h6> tags. href="[Link]
<h1> defines the most important heading. <h6> ck Here to open Google Site</a>
defines the least important heading: </body></html>

Example:
<!DOCTYPE html>
<html><body>
BOLD, ITALIC & UNDERLINE TAG
<h1>This is heading
1</h1>
<h2>This is heading <B> tag is Used for Bold, <i> tag is Used for
2</h2> italic, & <U> Tag is used for Underline
<h3>This is heading
3</h3> EXAMPLE:
<h4>This is heading <!DOCTYPE html>
4</h4> <html><body>
<h5>This is heading <B>Text Shown In Bold</B>
5</h5> <I>Text Shown in Italic
<h6>This is heading </I>
6</h6> <U>Underline</U>
</body></html> </body></html>

HTML PARAGRAPHS
HTML paragraphs are defined with
the <p> tag: <!DOCTYPE html>
Example: <html><body>
<B><I>Text Shown in
<! DOCTYPE html> Bold & Italic
<html><body> Format</I></B>
<p>This is a <B><i><u>Text will be
paragraph.</p> in Bold, italic &
<p>This is a Underline
paragraph.</p> Format</u></i></B>
<p>This is a </body></html>
paragraph.</p>
</body></html>

HTML LINKS
HTML links are defined with the <a> tag:
4 HTML

HTML LISTS ORDERED HTML LIST - THE TYPE


You can insert a bulleted list onto your page ATTRIBUTE
with HTML. There are two types of lists to The type attribute of the <ol> tag, defines the
choose from: Ordered List and Unordered. An type of the list item marker:
Ordered list is one that uses number, letters, Type Description
roman numerals, or a combination. Like This type="1" The list items will be
numbered with numbers
(default)
type="A" The list items will be
numbered with uppercase
letters
type="a" The list items will be
numbered with lowercase
letters
type="I" The list items will be
numbered with uppercase
An Unordered List is one that uses bullets, roman numbers
type="i" The list items will be
Circles, Squares etc. Like This
numbered with lowercase
roman numbers
NUMBERS LIST

<!DOCTYPE html>
<html><body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
ORDERED HTML LIST
</body></html>
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items will be marked with numbers by
default:
<!DOCTYPE html><html><body>
Upper Case Letters
<h2>An ordered HTML list</h2>
<ol> <h2>Ordered List with Letters</h2>
<li>Coffee</li> <ol type="A">
<li>Tea</li> <li>Coffee</li>
<li>Milk</li> <li>Tea</li>
</ol> <li>Milk</li>
</body></html> </ol>
5 HTML

UNORDERED HTML LIST


UNORDERED CIRCLE LIST
An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag. <!DOCTYPE html>
The list items will be marked with bullets (small <html><body>
black circles) by default: <h2>Unordered List with Circle</h2>
<Ul type="Circle">
<!DOCTYPE html><html><body> <li>Coffee</li>
<h2>An Unordered HTML list</h2> <li>Tea</li>
<Ul> <li>Milk</li>
<li>Coffee</li> </Ul>
<li>Tea</li> </body></html>
<li>Milk</li>
</Ul>
</body></html>

UNORDERED SQUARE LIST

<!DOCTYPE html>
UNORDERED HTML LIST - THE TYPE <html><body>
ATTRIBUTE <h2>Unordered List with Square</h2>
<Ul type="Square">
The type attribute of the <ul> tag, defines the
<li>Coffee</li>
type of the list item marker: <li>Tea</li>
Type Description <li>Milk</li>
disc Sets the list item marker </Ul>
to a bullet (default) </body></html>
circle Sets the list item marker
to a circle
square Sets the list item marker
to a square
none The list items will not be
marked UNORDERED NONE LIST
Unordered Disc List
<!DOCTYPE html> <!DOCTYPE html>
<html><body> <html><body>
<h2>Unordered List with Disc</h2> <h2>Unordered List with None</h2>
<Ul type="Disc"> <Ul type="None">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</Ul> </Ul>
</body></html> </body></html>
6 HTML

HTML IMAGES The HTML5 standard does not require


lowercase tags
HTML images are defined with
the <img> tag. HTML ATTRIBUTES
 All HTML elements can have attributes
EXAMPLE:  Attributes provide additional
<html> <body> information about an element
<img src="[Link]"></img>  Attributes are always specified in the
</body> </html>
start tag
HTML ELEMENTS  Attributes usually come in name/value
An HTML element usually consists of a start tag pairs like: name="value"
and end tag, with the content inserted in
ATTRIBUTES LIST
between:

<TAGNAME>CONTENT GOES HERE...</TAGNAME> THE TITLE ATTRIBUTE


Here, a title attribute is added to
The HTML element is everything from the start the <p> element. The value of the title attribute
tag to the end tag: will be displayed as a tooltip when you mouse
over the paragraph:
<P>MY FIRST PARAGRAPH.</P>
EMPTY ELEMENT EXAMPLE:
HTML elements with no content are called <html> <body>
empty elements. Empty elements do not have <h2>The title attribute</h2>
an end tag, such as the <br> element (which <p title="I'm a tooltip">
indicates a line break). Mouse over this paragraph, to
display the title attribute as a
DO NOT FORGET THE END TAG tooltip.
Some HTML elements will display correctly, </p>
even if you forget the end tag: </body> </html>
Example:
THE HREF ATTRIBUTE
<html> <body>
HTML links are defined with the <a> tag. The
<p>This is a paragraph
link address is specified in the href attribute:
<p>This is a paragraph
</body> </html> EXAMPLE:
<html> <body>
The example above works in all browsers, <a href="[Link]">Open
because the closing tag is considered optional. Google Website</a>
Never rely on this. It might produce </body> </html>
unexpected results and/or errors if you forget
the end tag.
You will learn more about links and the <a> tag
USE LOWERCASE TAGS later in this tutorial.
HTML tags are not case sensitive: <P> means
the same as <p>.
7 HTML

SIZE ATTRIBUTES </body> </html>


HTML images are defined with the <img> tag.
HTML LINE BREAKS
The filename of the source (src), and the size of
The HTML <br> element defines a line break.
the image (width and height) are all provided
Use <br> if you want a line break (a new line)
as attributes:
without starting a new paragraph:
EXAMPLE:
<html> <body>
<html> <body>
<p>This is<br>a
<img src="[Link]"
paragraph<br>with line
width="104" height="142">
breaks</p>
</body> </html>
</body> </html>
The image size is specified in pixels:
THE POEM PROBLEM
width="104" means 104 screen pixels wide.
This poem will display on a single line:
You will learn more about images and the
<img> tag later. <html> <body>
<p>In HTML, spaces and new lines
THE ALT ATTRIBUTE are ignored:</p>
<p>
The alt attribute specifies an alternative text My Bonnie lies over the ocean.
to be used, when an image cannot be
displayed. My Bonnie lies over the sea.

EXAMPLE:
My Bonnie lies over the ocean.
<html> <body>
<img src="[Link]" Oh,bring back my Bonnie to me.
alt=”Image Has Removed"
</p>
width="104" height="142"> </body> </html>
</body> </html>
THE HTML <PRE> ELEMENT
HTML HORIZONTAL RULES
The <hr> tag defines a thematic break in an
The HTML <pre> element defines
HTML page, and is most often displayed as a preformatted text.
horizontal rule.
The <hr> element is used to separate content <html> <body>
(or define a change) in an HTML page: <p>The pre tag preserves both spaces and
line breaks:</p>
<pre>
<html> <body> My Bonnie lies over the ocean.
<h1>This is heading 1</h1>
<p>This is some text.</p> My Bonnie lies over the sea.
<hr>
<h2>This is heading 2</h2> My Bonnie lies over the ocean.
<p>This is some other text.</p>
<hr> Oh, bring back my Bonnie to me.
<h2>This is heading 2</h2> </pre>
<p>This is some other text.</p> </body> </html>
8 HTML

HTML COLORS 3. For example, rgb(255,0,0) is displayed


In HTML, a color can be specified by using a as red, because red is set to its highest
color name, an RGB value, or a HEX value. value (255) and the others are set to 0.
4. To display the color black, all color
COLOR NAMES parameters must be set to 0, like this:
In HTML, a color can be specified by using a rgb(0,0,0).
color names Like as Red, Orange, Yellow, Cyan, 5. To display the color white, all color
Blue, etc. parameters must be set to 255, like
Exercise: this: rgb(255,255,255).
<html> <body> <html> <body>
<h2 style="background- <h2 style="background-
color:red"> color:rgb(255,0,0)">
Background-color set by using Background-color set by using
red rgb(255,0,0)
</h2> </h2>
<h2 style="background- <h2 style="background-
color:orange"> color:rgb(0,255,0)">
Background-color set by using Background-color set by using
orange rgb(0,255,0)
</h2> </h2>
<h2 style="background- <h2 style="background-
color:yellow"> color:rgb(0,0,255)">
Background-color set by using Background-color set by using
yellow rgb(0,0,255)
</h2> </h2>
<h2 style="background- <h2 style="background-
color:blue;color:white"> color:rgb(255,255,0)">
Background-color set by using Background-color set by using
blue rgb(255,255,0)
</h2> </h2>
<h2 style="background- <h2 style="background-
color:cyan"> color:rgb(255,0,255)">
Background-color set by using Background-color set by using
cyan rgb(255,0,255)
</h2> </h2>
</body> </html> <h2 style="background-
color:rgb(0,255,255)">
RGB VALUE Background-color set by using
1. In HTML, a color can also be specified as rgb(0,255,255)
an RGB value, using this formula: </h2>
rgb(red, green, blue) </body> </html>
2. Each parameter (red, green, and blue)
defines the intensity of the color
between 0 and 255.
9 HTML

HEX VALUE HTML STYLES


In HTML, a color can also be specified using a Every HTML Element has a default style
hexadecimal value in the form: #RRGGBB, (Background color is white, text color is black,
where RR (red), GG (green) and BB (blue) are text size is 12 px)
hexadecimal values between 00 and FF (same
as decimal 0-255). THE HTML STYLE ATTRIBUTE
For example, #FF0000 is displayed as red, Setting the style of an HTML element, can be
because red is set to its highest value (FF) and done with the style attribute.
the others are set to the lowest value (00). The HTML style attribute has the
following syntax:
Example:
<html> <body> <TAGNAME STYLE="PROPERTY:VALUE;">
<h2 style="background-
color:#FF0000"> The property is a CSS property. The value is a
Background-color set by using CSS value.
#FF0000 You will learn more about CSS later in this
</h2> tutorial.
<h2 style="background-
color:#00FF00"> HTML BACKGROUND COLOR
Background-color set by using The background-color property defines the
#00FF00 background color for an HTML element.
</h2>
<h2 style="background- EXAMPLE:
color:#0000FF"> <HTML> <BODY>
Background-color set by using <H1 style="background-
#0000FF color:blue">This is a
</h2> heading</h1>
<h2 style="background- <p>This is a paragraph.</p>
color:#FFFF00">
Background-color set by using HTML TEXT COLOR
#FFFF00 The color property defines the text color for an
</h2> HTML element
<h2 style="background- Example:
color:#FF00FF">
Background-color set by using </BODY> </HTML>
#FF00FF <html> <body>
</h2> <h1 style="color:blue;">This is a heading</h1>
<h2 style="background- <p style="color:red;">This is a paragraph.</p>
color:#00FFFF"> </body> </html>
Background-color set by using
#00FFFF
</h2>
</body> </html>
10 HTML

HTML FONTS defines strong text, with added semantic


The font-family property defines the font to be (अर्थपर्
ू )थ "strong" importance.
used for an HTML element:
<html> <body>
<html> <body>
<p>This text is normal.</p>
<h1 style="font-
<p><strong>This text is
family:verdana;">This is a
strong.</strong></p>
heading</h1>
<p><b>This text is
<p style="font-
strong</b></p>
family:courier;">This is a
</body> </html>
paragraph.</p>
</body> </html> HTML <I> AND <EM> ELEMENTS
The HTML <i> element defines italic text,
HTML TEXT SIZE
without any extra importance.
The font-size property defines the text size for
The HTML <em> element
an HTML element:
defines emphasized text, with added semantic
<html> <body> importance.
<h1 style="font-size:300%;">This
is a heading</h1> <html> <body>
<p style="font-size:160%;">This <p>This text is normal.</p>
is a paragraph.</p> <p><em>This text is
</body> </html> emphasized.</em></p>
<p><i>This text is
HTML TEXT ALIGNMENT italic</i></p>
</body> </html>
The text-align property defines the
HTML <SMALL> ELEMENT
horizontal text alignment for an HTML
element: The HTML <small> element defines smaller text:

<html> <body>
<html> <body>
<h2>HTML <small>Small</small>
<h1 style="text-
Formatting</h2>
align:center;">Centered
</body> </html>
Heading</h1>
<p style="text- HTML <MARK> ELEMENT
align:center;">Centered The HTML <mark> element
paragraph.</p>
defines marked or highlighted text.
</body> </html>
<html> <body>
HTML FORMATTING ELEMENTS <h2>HTML <mark>Marked</mark>
Formatting</h2>
HTML <B> AND <STRONG> ELEMENTS </body> </html>

The HTML <b> element defines bold text, HTML <DEL> ELEMENT
without any extra importance. But The The HTML <del> element defines deleted
HTML <strong> element (removed) text.
11 HTML

<html> <body> HTML QUOTATION AND CITATION


<p>The del element represents ELEMENTS
deleted (removed) text.</p>
HTML <Q> FOR SHORT QUOTATIONS
<p>My favorite color is
The HTML <q> element defines a short
<del>blue</del> red.</p>
</body> </html> quotation.
Browsers usually insert quotation marks around
HTML <INS> ELEMENT the <q> element.
The HTML <ins> element defines inserted
<html> <body>
(added) text.
<p>Browsers usually insert
<html> <body> quotation marks around the q
<p>The ins element represent element.</p>
inserted (added) text.</p> <p>WWF's goal is to: <q>Build a
<p>My favorite <ins>color</ins> future where people live in
is red.</p> harmony with nature.</q></p>
</body> </html> </body> </html>

HTML <SUB> ELEMENT HTML <BLOCKQUOTE> FOR QUOTATIONS


The HTML <sub> element The HTML <blockquote> element defines a
defines subscripted text. section that is quoted from another source.
Browsers usually indent <blockquote>
<html> <body> elements.
<p>H<sub>2</sub>O.</p>
</body> </html> <html> <body>
<p>Browsers usually indent
HTML <SUP> ELEMENT blockquote elements.</p>
The HTML <sup> element <blockquote
defines superscripted text. cite="[Link]
rg/who/[Link]">
<html> <body> For 50 years, WWF has been
<p>A<sup>2</sup>B</p> protecting the future of nature.
</body> </html> The world's leading conservation
organization,
EXERCISE: TYPE THE FOLLOWING
WWF works in 100 countries and
SUBSCRIPT. is supported by
H2O; H2SO4; MNO2; 1.2 million members in the
KMNO4; NaCO3; CO2; Fe(OH)3; United States and
Fe(NO3)2; CH4(NH4)2SO4 close to 5 million globally.
</blockquote>
EXERCISE: TYPE THE FOLLOWING </body> </html>
SUPERSCRIPT.
A2; A2B; X3YZ; HTML <ABBR> FOR ABBREVIATIONS
(A+B)2=A2+B2+2AB; The HTML <abbr> element defines an
(A+B)3=A3+B3+3AB(A+B); abbreviation or an acronym.
A2-B2=(A+B)(A-B); P=C(1+r)T
<html> <body>
12 HTML

<p>The <abbr title="World Health <html> <body>


Organization">WHO</abbr> was <p>Programming code example:</p>
founded in 1948.</p> <code>
<p>Marking up abbreviations can var x = 5;
give useful information to var y = 6;
browsers, translation systems [Link]("demo").
and search-engines.</p> innerHTML = x + y;
</body> </html> </code>
</body> </html>
HTML <ADDRESS> FOR CONTACT
INFORMATION HTML <KBD> FOR KEYBOARD INPUT
The HTML <address> element defines contact The HTML <kbd> element defines keyboard
information (author/owner) of a document or input:
an article.
<html> <body>
<html> <body> <p>The kbd element represents
<p>The HTML address element keyboard input:</p>
defines contact information <p><kbd>File | Open...</kbd></p>
(author/owner) of a document or </body> </html>
article.</p>
<address>
HTML <SAMP> FOR COMPUTER OUTPUT
Written by John Doe.<br> The HTML <samp> element defines sample
Visit us at:<br> output from a computer program:
[Link]<br>
<html> <body>
Box 564, Disneyland<br>
<p>The samp element represents
USA
sample output from a computer
</address>
program:</p>
</body> </html>
<samp>
HTML <BDO> FOR BI-DIRECTIONAL [Link] login: Apr 12
09:10:17
OVERRIDE
Linux 2.6.10-
The HTML <bdo> element defines bi-directional grsec+gg3+e+fhs6b+nfs+gr0501+++p
override. 3+c4a+gr2b-reslog-v6.189
</samp>
<html> <body>
</body> </html>
<p>If your browser supports bi-
directional override (bdo), the
HTML <VAR> FOR VARIABLES
next line will be written from
The HTML <var> element defines a variable.
right to left (rtl):</p>
<bdo dir="rtl">This line will be <html> <body>
written from right to left</bdo> <p>Einstein wrote: <var>E</var>
</body> </html> =
<var>m</var><var>c</var><sup>2</
HTML <CODE> FOR COMPUTER CODE sup>.</p>
The HTML <code> element defines a piece of </body> </html>
programming code:
13 HTML

HTML LINKS <a


Links are found in nearly all web pages. Links href="[Link]
allow users to click their way from page to page. l/" target="_blank">Visit our
HTML tutorial!</a>
 HTML links are hyperlinks.
</body> </html>
 You can click on a link and jump to
another document. HTML LINKS - IMAGE AS LINK
 When you move the mouse over a link, <html> <head>
the mouse arrow will turn into a little </head>
hand. <body>
<a href="[Link]">
HTML LINKS - SYNTAX <img src="[Link]"
In HTML, links are defined with the <a> tag: alt="HTML tutorial"
style="width:42px;height:42px>
<a href="url">link text</a> </a>

EXAMPLE HTML LINKS - CREATE A BOOKMARK


<a href="[Link] HTML bookmarks are used to allow readers to
/html/">Visit our facebook jump to specific parts of a Web page.
site</a>
Bookmarks can be useful if your webpage is
LOCAL LINKS very long.
The example above used an absolute URL (A full <html> <body>
web address). <p><a href="#C4">Jump to Chapter
A local link (link to the same web site) is 4</a></p>
specified with a relative URL (without <h2>Chapter 1</h2>
[Link] <p>This chapter explains ba bla
bla</p>
EXAMPLE <h2>Chapter 2</h2>
<a href="[Link]">HTML <p>This chapter explains ba bla
Images</a> bla</p>
<h2>Chapter 3</h2>
HTML LINK COLORS <p>This chapter explains ba bla
By default, a link will appear like this (in all bla</p>
browsers): <h2 id="C4">Chapter 4</h2>
 An unvisited link is underlined and blue <p>This chapter explains ba bla
 A visited link is underlined and purple bla</p>
 An active link is underlined and red <h2>Chapter 5</h2>
<p>This chapter explains ba bla
HTML LINKS - THE TARGET ATTRIBUTE bla</p>
The target attribute specifies where to open <h2>Chapter 6</h2>
the linked document. If you set the target <p>This chapter explains ba bla
attribute to "_blank", the link will open in a new bla</p>
<h2>Chapter 7</h2>
browser window or tab.
<p>This chapter explains ba bla
<html> <body> bla</p>
</body> </html>
14 HTML

HTML IMAGES IMAGE FLOATING


<html> <body>
<h2>Spectacular Mountain</h2> <html> <body>
<img src="pic_mountain.jpg" <p><strong>Float the image to
alt="Mountain View" the right:</strong></p>
style="width:304px;height:228px; <p>
"> <img src="[Link]"
</body> </html> alt="Smiley face"
style="float:right;width:42px;he
THE ALT ATTRIBUTE ight:42px;">
<p><strong>Float the image to
The alt attribute provides an alternate text for the left:</strong></p>
an image, if the user for some reason cannot <p>
view it (because of slow connection, an error in <img src="[Link]"
the src attribute, or if the user uses a screen alt="Smiley face"
reader). style="float:left;width:42px;hei
ght:42px;">
Alternatively, you can use
</body> </html>
the width and height attributes.
Here, the values are specified in HOW TO ADD A BACKGROUND IMAGE?
pixels by default: <html>
<body background="[Link]">
<img src="[Link]" alt="HTML5 <h1>Hello world!</h1>
Icon" width="128" height="128"> <p><a href="[Link]
>Visit Social Site!</a></p>
IMAGES IN ANOTHER FOLDER </body> </html>

<html> <body> HOW TO CHANGE BACKGROUND COLOR


<h2>Spectacular Mountain</h2> <html>
<img src="My <body bgcolor="#E6E6FA">
Documents/Images/pic_mountain.jp <h1>Hello world!</h1>
g" alt="Mountain View" <p><a
style="width:304px;height:228px; href="[Link]
"> Social Site!</a></p>
</body> </html> </body> </html>

ANIMATED IMAGES

The GIF standard allows animated images:

<html> <body>
<h2>Spectacular Mountain</h2>
<img src="[Link]"
alt="Mountain View"
style="width:304px;height:228px;
">
</body> </html>
15 HTML

STYLING HTML WITH CSS <html> <head>


<link rel="stylesheet" href="[Link]">
CSS stands for Cascading Style Sheets. </head>
CSS describes how HTML elements are to be <body>
displayed on screen, paper, or in other media. <h1>This is a heading</h1><p>This is a
CSS saves a lot of work paragraph.</p></body> </html>
CSS can be added to HTML elements in 3 ways: An external style sheet can be written in any
INLINE - by using the style attribute in HTML text editor. The file must not contain any HTML
elements code, and must be saved with a .css extension.
INTERNAL - by using a <style> element in the Here is how the "[Link]" looks:
<head> section body {
EXTERNAL - by using an external CSS file background-color: powderblue;
}
INLINE CSS h1 {
An inline CSS is used to apply a unique style to a color: blue;
single HTML element. }
An inline CSS uses the style attribute of an p{
HTML element. color: red;
<h1 style="color:blue;">This is }
a Blue Heading</h1>
CSS FONTS
INTERNAL CSS The CSS color property defines the text color to
An internal CSS is used to define a style for a be used.
single HTML page. The CSS font-family property defines the font to
An internal CSS is defined in the <head> section be used.
of an HTML page, within a <style> element: The CSS font-size property defines the text size
<html> <head> to be used.
<style> <html> <head>
body {background- <style>
color: powderblue;} h1 {
h1 {color: blue;} color: blue;
p {color: red;} font-family: verdana;
</style> font-size: 300%;
</head> <body> }
<h1>This is a heading</h1> p {
<p>This is a paragraph.</p> color: red;
</body> </html> font-family: courier;
font-size: 160%;
EXTERNAL CSS }
An external style sheet is used to define the </style>
style for many HTML pages. </head>
With an external style sheet, you can change <body>
the look of an entire web site, by changing one <h1>This is a heading</h1>
file! <p>This is a paragraph.</p>
</body> </html>
16 HTML

CSS BORDER margin: 50px;


The CSS border property defines a border }
around an HTML element: </style>
</head>
<html> <head> <body>
<style> <h1>This is a heading</h1>
p { <p>This is a paragraph.</p>
border: 1px solid <p>This is a paragraph.</p>
powderblue; <p>This is a paragraph.</p>
} </body> </html>
</style>
</head> THE ID ATTRIBUTE
<body> To define a specific style for one special
<h1>This is a heading</h1> element, add an id attribute to the element:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> <html> <head>
<p>This is a paragraph.</p> <style>
</body> </html> #p01 {color: blue;}
</style>
CSS PADDING </head>
The CSS padding property defines a padding <body>
(space) between the text and the border: <p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<html> <head> <p id="p01">I am different.</p>
<style> </body> </html>
p {
border: 1px solid THE CLASS ATTRIBUTE
powderblue; To define a style for a special type of elements,
padding: 30px; add a class attribute to the element:
}
</style> <html> <head>
</head> <style>
<body> [Link] { color: red;}
<h1>This is a heading</h1> </style>
<p>This is a paragraph.</p> </head>
<p>This is a paragraph.</p> <body>
<p>This is a paragraph.</p> <p>This is a paragraph.</p>
</body> </html> <p>This is a paragraph.</p>
<p class="error">I am
CSS MARGIN different.</p>
The CSS margin property defines a margin <p>This is a paragraph.</p>
(space) outside the border: <p class="error">I am different
too.</p>
<html> <head> </body> </html>
<style>
p {
border: 1px solid
powderblue;
17 HTML

table, th, td {border: 1px solid


HTML TABLE
black;}
 An HTML table is defined with </style>
</head> <body>
the <table> tag.
<table style="width:100%">
 Each table row is defined with
Next step is just previous step.
the <tr> tag.
 A table header is defined with Remember to define borders for both
the <th> tag. By default, table headings the table and the table cells.
are bold and centered.
 A table data/cell is defined with HTML TABLE – COLLAPSED (SOLID)
the <td> tag. BORDERS
If you want the borders to collapse into one
<html> <body>
border, add the CSS border-collapse property:
<table style="width:100%">
<tr> <html> <head>
<th>Firstname</th><th>Lastname</ <style>
th><th>Age</th> table,th,td{border: 1px solid
</tr> black;border-collapse:collapse;}
<tr> </style>
<td>Jill</td><td>Smith</td><td>5 </head> <body>
0</td> Next step is just previous step.
</tr>
<tr> HTML TABLE - ADDING CELL PADDING
<td>Eve</td><td>Jackson</td><td> Cell padding specifies the space between the
94</td> cell content and its borders.
</tr>
<tr> <html> <head>
<td>John</td><td>Doe</td><td>80< <style>
/td> table,th,td{border: 1px solid
</tr> black;border-collapse: collapse}
</table> th,td{padding: 15px;}
</body> </html> </style>
</head> <body>
Table will be looks like: Next step is just previous step.

HTML TABLE - LEFT-ALIGN HEADINGS


<head> <style>
table,th,td{border: 1px solid
black;border-collapse: collapse}
HTML TABLE - ADDING A BORDER th,td{padding: 5px;}
If you do not specify a border for the table, it th{text-align: left;}
</style>
will be displayed without borders.
</head> <body>
A border is set using the CSS border property:
Next step is just previous step.
<html> <head>
<style>
18 HTML

HTML TABLE - ADDING BORDER SPACING HTML TABLE - CELLS THAT SPAN MANY
Border spacing specifies the space between the ROWS
cells.
To make a cell span more than one row, use
<html> <head> the rowspan attribute:
<style>
Table, th,td{border: 1px solid
black; padding:5px}
table{border-spacing: 15px}
</style> <html> <head>
</head> <body>
<style>
Next step is just previous step.
table,th,td{border: 1px solid
black;border-collapse:
collapse;}
HTML TABLE - CELLS THAT SPAN MANY
th,td{padding: 5px;text-
COLUMNS align:left}
To make a cell span more than one column, use </style>
the colspan attribute: </head>
<body>
<h2>Cell that spans two
<html> <head> rows:</h2>
<style> <table style="width:100%">
table, th, td{border: 1px solid <tr>
black;border-collapse: <th>Name:</th> <td>Bill
collapse;} Gates</td>
th, td{padding:5px;text- </tr>
align:left} <tr>
</style> <th rowspan="2">Telephone:</th>
</head> <td>55577854</td>
<body> </tr>
<h2>Cell that spans two <tr>
columns:</h2> <td>55577855</td>
<table style="width:100%"> </tr>
<tr> </table>
<th>Name</th> </body> </html>
<th colspan="2">Telephone</th>
</tr> HTML TABLE - ADDING A CAPTION
<tr> <body>
<td>Bill Gates</td> <table style="width:100%">
<td>55577854</td> <caption>My Savings</caption>
<td>55577855</td> <tr>
</tr> <th>Month</th>
</table> <th>Savings</th>
</body> </html> </tr>
19 HTML

HTML IFRAMES IFRAME - TARGET FOR A LINK


An iframe is used to display a web page within a An iframe can be used as the target frame for a
web page. link.
The target attribute of the link must refer to
FRAME SYNTAX
the name attribute of the iframe:
An HTML iframe is defined with
the <iframe> tag: <html> <body>
<iframe height="300px"
<iframe src="URL"></iframe> width="100%"
src="demo_iframe.htm"
IFRAME - SET HEIGHT AND WIDTH name="iframe_a"></iframe>
Use the height and width attributes to <p><a
specify the size of the iframe. href="[Link]
target="iframe_a">[Link]</a>
<html> <body> </p>
<iframe src="demo_iframe.htm" <p>When the target of a link
height="200" matches the name of an iframe,
width="300"></iframe> the link will open in the
</body> </html> iframe.</p>
</body> </html>
IFRAME - REMOVE THE BORDER
By default, an iframe has a border around it. THE <SPAN> ELEMENT
To remove the border, add
the style attribute and use the The <span> element is often used as a container
CSS border property: for some text.
The <span> element has no required attributes,
<html> <body>
but both style and class are common.
When used together with CSS, the <span>
<iframe src="demo_iframe.htm"
style="border:none;"></iframe> element can be used to style parts of the text:
</body>
</html>
<html> <body>
<h1>My <span
With CSS, you can also change the style="color:red">Important</spa
size, style and color of the iframe's n> Heading</h1>
border: </body> </html>

<html> <body>
<iframe src="demo_iframe.htm"
style="border:2px solid
grey;"></iframe>
</body>
</html>
20 HTML

HTML MULTIMEDIA <source src="movie.mp4"


type="video/mp4">
Multimedia on the web is sound, music, videos,
<source src="[Link]"
movies, and animations. type="video/ogg">
Your browser does not support
WHAT IS MULTIMEDIA?
the video tag.
Multimedia comes in many different formats. It </video>
can be almost anything you can hear or see. </body> </html>
Examples: Images, music, sound, videos,
records, films, animations, and more. HOW IT WORKS
Web pages often contain multimedia elements The controls attribute adds video controls, like
of different types and formats. play, pause, and volume.

COMMON VIDEO FORMATS HTML <VIDEO> AUTOPLAY


MP4 is the new and upcoming format for To start a video automatically use
internet video. the autoplay attribute:
MP4 is recommended by YouTube.
<!DOCTYPE html>
MP4 is supported by Flash Players.
<html> <body>
MP4 is supported by HTML5.
<video width="320" height="240"
Note: Only MP4, WebM, and Ogg video are autoplay>
supported by the HTML5 standard. <source src="movie.mp4"
type="video/mp4">
AUDIO FORMATS <source src="[Link]"
MP3 is the newest format for compressed type="video/ogg">
recorded music. The term MP3 has become Your browser does not support
synonymous with digital music. the video tag.
If your website is about recorded music, MP3 is </video>
the choice. </body> </html>
Note:Only MP3, WAV, and Ogg audio are
supported by the HTML5 standard. THE HTML <AUDIO> ELEMENT
To play an audio file in HTML, use
PLAYING VIDEOS IN HTML the <audio> element:
Before HTML5, a video could only be played in a
<!DOCTYPE html>
browser with a plug-in (like flash).
<html> <body>
The HTML5 <video> element specifies a
<audio controls>
standard way to embed a video in a web page. <source src="[Link]"
type="audio/ogg">
THE HTML <VIDEO> ELEMENT
<source src="horse.mp3"
To show a video in HTML, use
type="audio/mpeg">
the <video> element: Your browser does not support
<!DOCTYPE html> the audio element.
<html> <body> </audio>
</body> </html>
<video width="320" height="240"
controls>
21 HTML

HTML PLUG-INS (HTML HELPERS) <!DOCTYPE html>


The purpose of a plug-in is to extend the <html> <body>
functionality of a web browser. <iframe width="420" height="345"
src="[Link]
ed/XGSy3_Czz8k">
THE <OBJECT> ELEMENT </iframe>
The <object> element is supported by all </body> </html>
browsers.
YOUTUBE AUTOPLAY
The <object> element defines an embedded
You can have your video start playing
object within an HTML document.
automatically when a user visits that page by
It is used to embed plug-ins (like Java applets,
adding a simple parameter to your YouTube
PDF readers, Flash Players) in web pages.
URL.
<!DOCTYPE html>
<html> <body>
<html> <body>
<iframe width="420" height="345"
<object width="400" height="50"
src="[Link]
data="[Link]"></object>
ed/XGSy3_Czz8k?autoplay=1">
</body></html>
</iframe>
The <object> element can also be used to </body> </html>
include HTML in HTML:
YOUTUBE ALLOW FULL SCREEN AND
<!DOCTYPE html> FRAME BORDER
<html> <body>
<object width="100%" <!DOCTYPE html>
height="500px" <html> <body>
data="[Link]"></object> <iframe width="560" height="315"
</body> </html> src="[Link]
Or images if you like: kZpziyF4" frameborder="0"
allowfullscreen></iframe>
<!DOCTYPE html> </iframe>
<html> <body> </body> </html>
<object width="100%"
height="500px" YOUTUBE CONTROLS
data="[Link]"></object>
Value 0: Player controls does not display.
</body> </html>
Value 1 (default): Player controls display.
HTML YOUTUBE VIDEOS <!DOCTYPE html>
The easiest way to play videos in HTML, is to <html>
use YouTube. <body>
<iframe width="420" height="345"
YOUTUBE VIDEO ID src="[Link]
YouTube will display an id (like XGSy3_Czz8k), ed/XGSy3_Czz8k?controls=0">
when you save (or play) a video. </iframe>
You can use this id, and refer to your video in </body> </html>
the HTML code.
22 HTML

<input type="radio"
HTML FORMS
name="gender" value="other">
Other
THE <FORM> ELEMENT
</form>
The HTML <form> element defines a form that
</body> </html>
is used to collect user input:
Form elements are different types of input THE SUBMIT BUTTON
elements, like text fields, checkboxes, radio <input type="submit"> defines a button
buttons, submit buttons, and more. for submitting the form data to a form-handler.
The form-handler is typically a server page with
THE <INPUT> ELEMENT
a script for processing input data.
The <input> element is the most important
The form-handler is specified in the
form element.
form's action attribute:
The <input> element can be displayed in several
ways, depending on the type attribute. <html> <body>
<form action="action_page.php">
TEXT INPUT First name:<br>
<input type="text"> defines a one-line input <input type="text"
field for text input name="firstname" value="Mickey">
<br>
<html> <body>
Last name:<br>
<form>
<input type="text"
First name:<br>
name="lastname" value="Mouse">
<input type="text"
<br><br>
name="firstname">
<input type="submit"
<br>
value="Submit">
Last name:<br> </form>
<input type="text" </body> </html>
name="lastname">
</form> THE ACTION ATTRIBUTE
</body> </html> The action attribute defines the action to be
performed when the form is submitted.
RADIO BUTTON INPUT
Normally, the form data is sent to a web page
<input type="radio"> defines a radio button.
on the server when the user clicks on the
Radio buttons let a user select ONE of a limited
submit button.
number of choices:
The Method Attribute
<html> <body> The method attribute specifies the HTTP
<form> method (GET or POST) to be used when
<input type="radio" submitting the form data:
name="gender" value="male" <form action="action_page.php" method="g
checked> Male<br> et">
<input type="radio"
name="gender" value="female"> WHEN TO USE GET?
Female<br> The default method when submitting form data
is GET.
23 HTML

However, when GET is used, the submitted <option


form data will be visible in the page address value="audi">Audi</option>
field: </select>
<br><br>
WHEN TO USE POST? <input type="submit">
Always use POST if the form data contains </form> </body> </html>
sensitive or personal information. The POST
THE <TEXTAREA> ELEMENT
method does not display the submitted form
The <textarea> element defines a multi-line
data in the page address field.
input field (a text area):
GROUPING FORM DATA WITH <FIELDSET>
<html> <body>
The <fieldset> element is used to group related <form action="action_page.php">
data in a form. <textarea name="message"
The <legend> element defines a caption for the rows="10" cols="30">The cat was
<fieldset> element. playing in the
garden.</textarea><br>
<html> <body>
<input type="submit">
<form action="action_page.php">
</form> </body> </html>
<fieldset>
<legend>Personal THE <BUTTON> ELEMENT
information:</legend> The <button> element defines a
First name:<br>
clickable button:
<input type="text"
<html> <body><button type="button"
name="firstname" value="Mickey">
onclick="alert('Hello World!')">Click
<br>
Last name:<br> Me!</button></body> </html>
<input type="text"
HTML5 <DATALIST> ELEMENT
name="lastname" value="Mouse">
<br><br> The <datalist> element specifies a list of pre-
<input type="submit" defined options for an <input> element.
value="Submit"> Users will see a drop-down list of the pre-
</fieldset> defined options as they input data.
</form> </body> </html>
<html> <body>
THE <SELECT> ELEMENT <form action="action_page.php">
The <select> element defines a drop-down list: <input list="browsers"
name="browser">
<html> <body> <datalist id="browsers">
<form action="action_page.php"> <option value="Internet
<select name="cars"> Explorer">
<option <option value="Firefox">
value="volvo">Volvo</option> <option value="Chrome">
<option <option value="Opera">
value="saab">Saab</option> <option value="Safari">
<option </datalist>
value="fiat">Fiat</option> <input type="submit">
</form></body></html>
24 HTML

You might also like