HTML (31.08.2015 New) (Compatibility Mode)

Web Technology: Html
Monika Gope
Lecturer
IICT, KUET
Learning Objectives
Web Browser
Features of the Browsers
HTML..
Web Browser
A web browser (commonly referred to as a browser) is

a software application for retrieving, presenting and traversing
information resources on the World Wide Web. An information
resource is identified by a Uniform Resource Identifier (URL)
and may be a web page, image, video or other piece of content.
Hyperlinks present in resources enable users easily to navigate
their browsers to related resources.
Although browsers are primarily intended to use the World Wide

Web, they can also be used to access information provided
by web servers in private networks or files in file systems.
Web Browser
HTML and associated content (image files,

formatting information such as CSS, etc.) is passed
to the browser's layout engine to be transformed
from markup to an interactive document, a process
known as "rendering"
Features
Back and forward buttons to go back to the previous

resource and forward respectively.
A refresh or reload button to reload the current
resource.
A stop button to cancel loading the resource. In some
browsers, the stop button is merged with the reload
button.
A home button to return to the user's home page.
Features
An address bar to input the Uniform Resource

Identifier (URI) of the desired resource and display it.
A search bar to input terms into a search engine. In
some browsers, the search bar is merged with the
address bar.
A status bar to display progress in loading the
resource and also the URI of links when the cursor
hovers over them, and page zooming capability.
Major browsers also possess incremental
find features to search within a web page.
What is HTML?
HTML (Hyper-text Markup Language)
HTML is not a programming language,
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
A markup language formats text in-between two
tags. These look like: <code>formatted text</code>
<code> begins the formatting tag
</code> ends the formatting tag
These tags are then read by a Browser, which

translates the tags into the formatting that they
represent.
What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in

1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, the major

browsers support many of the new HTML5 elements
and APIs.
HTML Editors
Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML
editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text

editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way
to learn HTML.
HTML Tags
HTML tags are keywords surrounded by angle

brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag
is the end tag
Start and end tags are also called opening tags and
closing tags
Basic Tags
HTML
<HTML></HTML>
These tags begin and end an HTML document.
HEAD
<HEAD></HEAD>
These tags are in the beginning of the document. Important information
is stored in-between these tags including: title, meta-data, styles, and
programming scripts
TITLE
<TITLE></TITLE>
These tags are in-between the HEAD tags and contain the text that
appears in the title of the Web page.
BODY
<BODY></BODY>
As you may have guessed, the BODY tags contain all the text in the
body of the document.
HTML Page- Getting Started
What You Need

You don't need an HTML editor
You don't need a web server
You don't need a web site
Editing HTML
We use a plain text editor (like Notepad) to edit HTML. We
believe this is the best way to learn HTML.
However, professional web developers often prefer HTML
editors like FrontPage or Dreamweaver, instead of writing
plain text. (advanced level)
.HTM or .HTML File Extension?

For saving an HTML file, you can use either the .htm or the
.html file extension.
With new software it is perfectly safe to use .html.
Basic Format of a Web Page

<html>
<head>
<title>
Hello World
</title>
</head>
<body>
Hello World
</body>
</html>
This
example is a complete
Web page.
If viewed in a browser,
such as Internet Explorer,
it would have the title
Hello World
and the content Hello
World.
HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The DOCTYPE declaration defines the document

type
The text between <html> and </html> describes the
web page
The text between <body> and </body> is the visible
page content
The text between <h1> and </h1> is displayed as a
heading
The text between <p> and </p> is displayed as a
paragraph
HTML Versions
Version 1: original HTML by Tim Berners-Lee 1990
Version 2: Mosaic browser HTML extensions 1994

under the auspices of the IETF (Internet Engineering
Task Force) - first version conforming to SGML
lists, forms, headings, fonts, image maps, ...
Version 3.2: W3C recommendation in 1997 for

tables, applets, text flow around images, form based
file upload, superscripts and subscripts, styles,
scripts
Version 4.0: known as dynamic HTML (DHTML)
XHTML: HTML 4.0 defined with XML
HTML Versions
Since the early days of the web, there have been many
versions of HTML:
Dynamic HTML
Cascading Style Sheets: precise control over

content layout and format
Document Object Model (DOM): exposes all HTML
elements on a page and their formatting and
positioning properties to scripting languages
Positioning and Layering of Content: specify x, y,
and z coordinates on the page
Dynamic Fonts: browser loads and caches fonts
as needed to display a particular page
Canvas Mode: whole screen mode
HTML Elements
"HTML tags" and "HTML elements" are often

used to describe the same thing.
But strictly speaking, an HTML element is
everything between the start tag and the end
tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
The <head> is usually the first element
contained inside the <html> element.
HTML Element Syntax
HTML Element Syntax

An HTML element starts with a start tag / opening
tag
An HTML element ends with an end tag / closing
tag
The element content is everything between the start
and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Don't Forget the End Tag
Some HTML elements might display correctly even if

you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers,
because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce
unexpected results and/or errors if you forget the end
tag .
Empty HTML Elements
HTML elements with no content are called empty

elements.
<br> is an empty element without a closing tag (the
<br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding
a slash inside the start tag, like <br />, is the proper
way of closing empty elements in XHTML (and XML).
HTML Headings
HTML headings are defined with the <h1> to

<h6> tags.
Example
<h1>This is a heading</h1>
HTML Headings
Use HTML headings for headings only. Don't use

headings to make text BIG or bold.
Search engines use your headings to index the
structure and content of your web pages.
Since users may skim your pages by its headings, it
is important to use headings to show the document
structure.
H1 headings should be used as main headings,
followed by H2 headings, then the less important H3
headings, and so on.
HTML Paragraphs
HTML paragraphs are defined with the

<p> tag.
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a>

tag.
<a href="http://www.w3schools.com">
This is a link</a>
The link address is specified in the href

attribute
HTML Images
HTML images are defined with the

<img> tag.
<img src="w3schools.jpg" width="104"
height="142">
HTML Attributes
Attributes provide additional information about HTML

elements.
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:
<a href="http://www.w3schools.com">This
is a link</a>
Always Quote Attribute Values
Attribute values should always be enclosed in

quotes.
Double style quotes are the most common,
but single style quotes are also allowed.
Attribute names and attribute values are
case-insensitive.
HTML Attributes Reference

Below is a list of some attributes that can be used on
any HTML element:
HTML Lines
The <hr>tag creates a horizontal line in an HTML

page . The hr element can be used to separate
content:
<hr>
<hr>
HTML Comments
Comments can be inserted into the HTML code to

make it more readable and understandable.
Comments are ignored by the browser and are not
displayed.
Comments are written like this:

HTML Line Breaks
Use the <br> tag if you want a line break (a

new line) without starting a new paragraph:
<p>This is<br>a para<br>graph with line
breaks</p>
The <br> element is an empty HTML
element. It has no end tag.
HTML Text Formatting
This text is bold

This text is italic
This is computer output
This is subscript and superscript
Example
<!DOCTYPE html>
<html>
<body>
<hr /> 
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
HTML Links
The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you
can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow
will turn into a little hand.
The most important attribute of the <a> element is the href
attribute, which indicates the links destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title> Links </title>
</head>
<body>
<a href ="table.html" target ="showframe">Table</a>
<br>
<a href ="lists.html" target ="showframe">Lists</a>
<br>
<a href ="forms.html" target ="showframe">Forms</a>
</body>
</html>
HTML <head>
The <head> element is a container for all the head

elements. Elements inside <head> can include
scripts, instruct the browser where to find style
sheets, provide meta information, and more.
The following tags can be added to the head section:

<title>, <style>, <meta>, <link>, <script>, <noscript>,
and <base>.
HTML <head> cont
he <base> tag specifies the base URL/target for all

relative URLs in a page:
<head>
<base href="http://www.w3schools.com/images/"
target="_blank">
</head>
HTML <head> cont
The <link> tag defines the relationship between a

document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
HTML <head> cont
The <style> tag is used to define style information for

an HTML document.
Inside the <style> element you specify how HTML
elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <head> cont

MetaData
Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content
or reload page), search engines (keywords), or other web
services.
<meta> tags always go inside the <head> element.
HTML <head> cont

MetaData
<meta name="keywords" content="HTML, CSS, XML, XHTML,

JavaScript">
<meta name="description" content="Free Web tutorials on
HTML and CSS>
<meta name="author" content=Peter Norton">
<meta http-equiv="refresh" content="30">
HTML <head> cont
The <script> tag is used to define a clientside script, such as a JavaScript.
HTML Images
<!DOCTYPE html>
<html>
<body>
<h2> Mountain Trip</h2>
<img border="0" src="/images/ Mountain.jpg" alt=" Mountain rock" width="304"
height="228">
</body>
</html>
Unordered List Tags
Tag <ul></ul>
Creates unordered list
Each line begins with bullet mark
Tag <li></li>
Defines each List Entry
Bullets in Unordered Lists
Bullets in unordered lists make use of the type

value for the ul attribute e.g. for :
Filled circle bullets
<ul type="disc">
Empty circles bullets:
<ul type=cirlce">
Filled squares circles bullets:
<ul type=cirlce">
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Green Tea</li>
</ul>
</body>
</html>
Ordered List Tags
Ordered Lists
Automatically assign ranks to each element
<ol></ol> tag used for ordered lists
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Green Tea</li>
</ol>
</body>
</html>
Nested Lists
Nested Lists
Improve document structure
A list inside another list (like the slide structure)
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Tables
Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag).
td stands for "table data," and holds the content of a
data cell. A <td> tag can contain text, links, images,
lists, forms, other tables, etc.
<!DOCTYPE html>
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
HTML Tables and the Border

Attribute
If you do not specify a border attribute, the table will

be displayed without borders. Sometimes this can be
useful, but most of the time, we want the borders to
show.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the

<th> tag.
All major browsers display the text in the <th>
element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Table with a caption

<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Table Span
The colspan attribute to make a cell span

multiple columns.
Rowspan is for rows just what colspan is for

columns (rowspan allows a cell to span
multiple rows).
<h4>Cell that spans two columns:</h4>

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Tags inside a table

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:

<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Cell padding
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cell spacing
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
HTML Blocks
Most HTML elements are defined as block

level elements or as inline elements.
Block level elements normally start (and

end) with a new line when displayed in a
browser.
Examples: <h1>, <p>, <ul>, <table>
HTML Blocks
Inline elements are normally displayed

without starting a new line.
Examples: <b>, <td>, <a>, <img>
HTML Blocks: Div
The HTML <div> element is a block level element

that can be used as a container for grouping other
HTML elements.
The <div> element has no special meaning. Except

that, because it is a block level element, the browser
will display a line break before and after it.
When used together with CSS, the <div> element

can be used to set style attributes to large blocks of
content.
HTML Blocks: Div
Another common use of the <div> element, is for

document layout. It replaces the "old way" of defining
layout using tables. Using <table> elements for layout
is not the correct use of <table>. The purpose of the
<table> element is to display tabular data.
The <div> tag defines a division or a section in an

HTML document.
The <div> tag is used to group block-elements to
format them with CSS
DIV
Tip: The <div> element is very often used together

with CSS, to layout a web page.
Note: By default, browsers always place a line break

before and after the <div> element. However, this
can be changed with CSS.
Example: Div
A section in a document that will be

displayed in blue:
<div style="color:#0000FF">
</div>
HTML Blocks: Span
The HTML <span> element is an inline element that

can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element

can be used to set style attributes to parts of the text.
The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a
part of a text or a part of a document.
Example Span
A <span> element used to color a part

of a text:
<p>My mother has <span
style="color:blue">blue</span>
eyes.</p>
Html Layout
Web page layout is very important to make

your website look good.
Design your webpage layout very carefully.
Website Layouts
Most websites have put their content in multiple columns
(formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table>
elements. CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
HTML Layouts - Using <div>

Elements
The div element is a block level element used

for grouping HTML elements.
The following example uses five div elements

to create a multiple column layout.
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web
Page</h1></div>
<div id="menu" style="background-color:#FFD700;
height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;

height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;
clear: both; text-align: center;">
Copyright w3 school</div>
</div>
</body>
</html>
HTML Layouts - Using

<Table> Elements
A simple way of creating layouts is by using the

HTML <table> tag.
Multiple columns are created by using <div> or

<table> elements. CSS are used to position
elements, or to create backgrounds or colorful look
for the pages.
The following example uses a table with 3 rows and 2

columns - the first and last row spans both columns
using the colspan attribute:
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="backgroundcolor:#eeeeee;height:200px;width:400px;">
Content goes here
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;textalign:center;">
Copyright W3Schools</td>
</tr>
</table>
</body>
</html>
Output
Forms
HTML Forms are used to select different kinds of

user input.
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text
fields, checkboxes, radio-buttons, submit buttons
and more. A form can also contain select lists,
textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
Input
The most important form element is the <input>

element.
The <input> element is used to select user
information.
An <input> element can vary in many ways,
depending on the type attribute. An <input> element
can be of type text field, checkbox, password, radio
button, submit button, and more.
The most common input types are described below.
<!DOCTYPE html> (Text Fields)

<html>
<body>
<form action="">
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also
note that the default width of a text field is 20
characters.
</p>
</body>
</html>
<!DOCTYPE html> (Password Field)

<html>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>Note:</b> The characters in a password field
are masked (shown as asterisks or circles).
</p>
</body>
</html>
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons

let a user select ONLY ONE of a limited number of
choices:
<form>
<input type="radio" name="sex value="male">Male
<br>
<input type="radio" name="sex value="female">Female
</form>
Checkbox
<form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"

value="Car">I have a car
</form>
Submit Button
A submit button is used to send form data to a

server. The data is sent to the page specified in
the form's action attribute. The file defined in the
action attribute usually does something with the
received input:
Submit Button
<form name="input"
action="html_form_action.asp"
method="get">
Username: <input type="text" name="user">

<input type="submit" value="Submit">
</form>
Submit Button
If you type some characters in the text field

above, and click the "Submit" button, the
browser will send your input to a page called
"html_form_action.asp".
The page will show you the received input.
Simple drop-down list

<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Simple drop-down list

<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Textarea
<!DOCTYPE html>
<html>
<body>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
Create a button
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
fieldset legend
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
Iframe
An iframe is used to display a web page within a web page.
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Iframe
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
<p><b>Note:</b> Because the target of the link matches the name
of the iframe, the link will open in the iframe.</p>
</body>
</html>
Audio
<embed height="50" width="100" src="horse.mp3">
<object height="50"width="100"data="horse.mp3"></object>
Audio
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
Audio
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
Audio
<a href="horse.mp3">Play the sound</a>
When sound is included in a web page, or as part of a web

page, it is called inline sound.
If you plan to use inline sounds, be aware that many people will
find it annoying. Also note that some users might have turned off
the inline sound option in their browser.
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object data="movie.mp4" width="320"
height="240">
<embed src="movie.swf" width="320"
height="240">
</object>
</video>
Color Values
HTML colors are defined using a hexadecimal

notation (HEX) for the combination of Red, Green,
and Blue color values (RGB).
The lowest value that can be given to one of the light
sources is 0 (in HEX: 00). The highest value is 255
(in HEX: FF).
HEX values are specified as 3 pairs of two-digit
numbers, starting with a # sign.
#000000 rgb(0,0,0)
16 Million Different Colors
The combination of Red, Green, and Blue

values from 0 to 255, gives more than 16
million different colors (256 x 256 x 256).
If you look at the color table below, you will

see the result of varying the red light from 0 to
255, while keeping the green and blue light at
zero.
Color Names Supported by All

Browsers
140 color names are defined in the HTML and CSS

color specification (17 standard colors plus 123
more).
Tip: The 17 standard colors are: aqua, black, blue,

fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, and yellow.
HTML Entities
Reserved characters in HTML must be replaced with

character entities.
Some characters are reserved in HTML.

It is not possible to use the less than (<) or greater
than (>) signs in your text, because the browser will
mix them with tags.
To actually display reserved characters, we must use

character entities in the HTML source code.
HTML Entities
To display a less than sign we must

write: < or <
A common character entity used in HTML is the nonbreaking space ( ).
Browsers will always truncate spaces in HTML
pages. If you write 10 spaces in your text, the
browser will remove 9 of them, before displaying the
page. To add spaces to your text, you can use the
character entity.
HTML Entities
JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the
noscript element.</p>
</body>
</html>
Script
The <script> tag is used to define a clientside script, such as a JavaScript.

The <script> element either contains scripting
statements or it points to an external script file
through the src attribute.
Common uses for JavaScript are image
manipulation, form validation, and dynamic
changes of content.
You dont need to know everything, the

only thing you have to know is how to
get it when you want to use it
Enstein

HTML (31.08.2015 New) (Compatibility Mode)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML (31.08.2015 New) (Compatibility Mode)

Uploaded by

Copyright:

Available Formats

Web Technology: Html

A web browser (commonly referred to as a browser) is

Although browsers are primarily intended to use the World Wide

HTML and associated content (image files,

Back and forward buttons to go back to the previous

An address bar to input the Uniform Resource

These tags are then read by a Browser, which

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in

HTML5 is still a work in progress. However, the major

Writing HTML Using Notepad or TextEdit

However, for learning HTML we recommend a text

HTML tags are keywords surrounded by angle

HTML Page- Getting Started

What You Need

.HTM or .HTML File Extension?

Basic Format of a Web Page

The DOCTYPE declaration defines the document

Version 1: original HTML by Tim Berners-Lee 1990

Version 2: Mosaic browser HTML extensions 1994

Version 3.2: W3C recommendation in 1997 for

Cascading Style Sheets: precise control over

"HTML tags" and "HTML elements" are often

HTML Element Syntax

HTML Element Syntax

Don't Forget the End Tag

Some HTML elements might display correctly even if

Empty HTML Elements

HTML elements with no content are called empty

HTML headings are defined with the <h1> to

Use HTML headings for headings only. Don't use

HTML paragraphs are defined with the

HTML links are defined with the <a>

The link address is specified in the href

HTML images are defined with the

Attributes provide additional information about HTML

HTML links are defined with the <a> tag. The

Always Quote Attribute Values

Attribute values should always be enclosed in

HTML Attributes Reference

The <hr>tag creates a horizontal line in an HTML

Comments can be inserted into the HTML code to

HTML Line Breaks

Use the <br> tag if you want a line break (a

HTML Text Formatting

This text is bold

The HTML <a> tag defines a hyperlink.

The <head> element is a container for all the head

The following tags can be added to the head section:

HTML <head> cont

he <base> tag specifies the base URL/target for all

HTML <head> cont

The <link> tag defines the relationship between a

HTML <head> cont

The <style> tag is used to define style information for

HTML <head> cont

Metadata is data (information) about data.

HTML <head> cont

<meta name="keywords" content="HTML, CSS, XML, XHTML,

HTML <head> cont

The <script> tag is used to define a clientside script, such as a JavaScript.

Unordered List Tags

Creates unordered list