How to learn HTML in 10 Days

WHY HTML
To publish information for global
distribution, one needs a universally
understood language, a kind of
publishing mother tongue that all
computers may potentially understand.
The publishing language used by the
World Wide Web is HTML (from
HyperText Markup Language).

WHAT IS THE WWW?
 A distributed document delivery system
 Uses a client-server model
 Main presentation language is HTML
 URL – Uniform Resource Locator.
 Browser – A software program which is used
to show web pages.
 Pages end with “.htm” or “.html”

HTML WORK ON CLIENT-SERVER MODEL
Two processes (possibly networked):
 The client
 Sends requests to the server
 Blocks until reply is received
 The server
 Processes requests from clients
 Never blocks
 Can reply to several clients simultaneously

WHAT IS HTML?
 HTML stands for Hyper Text Markup Language
 HTML is a markup language
 HTML is used to create web documents
including text, images, formatting, and
hyperlinks to other documents.
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain
text
 HTML documents are also called web pages

USES OF HTML
 Publish online documents with headings, texts,
tables, lists, photos, etc.
 Retrieve online information via hypertexts links.
 Design forms for conducting transactions with
remote services, for use in searching for
information, making reservations, ordering
products, etc.
 Include spread-sheets, video clips, sound clips,
and other applications directly in their
documents.

HTML VERSIONS
 HTML 1991
 HTML+ 1993
 HTML 2.0 1995
 HTML 3.2 1997
 HTML 4.01 1999
 HTML5 2012
 XHTML5 2013

MARKUP LANGUAGES
 Markup:
 Embedded codes in documents
 Codes are called `tags‟
 Codes
 Describe the structure documents
 Include instructions for processing
 Markup language:
 Computer language for describing syntax of tags
 May be used with other tools to specify rendering

HTML (HYPER TEXT MARKUP LANGUAGE)
 HTML is used to create web documents including text,
images, formatting, and hyperlinks to other documents.
 HTML documents consists of text and „markup‟ tags which
are used to define the structure, appearance, and function
of the information.
 There are two types of markup tags:
 Container tags – Define a section of text using a start tag and an
end tag. For example, text placed inside of these tags would
appear in bold:
<B>Hello</B>
 Empty tags – represent a single occurrence of an instruction. For
example, the <BR> or break tag is used to indicate that you want
to include a single space following the text.

EXAMPLE OF AN HTML DOCUMENT
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

WHAT EXAMPLE TELLS
 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

STRUCTURE OF AN HTML DOCUMENT
 An HTML document is divided into two main
sections:
 Heading - The HEADing contains information
describing the document, such as its title. The
heading section is indicated by the <HEAD> and
</HEAD> tags.
 Body - The BODY section is where the Web document
text, graphics, and other elements are placed. The
body section is indicated by the <BODY> and
</BODY> tags.

TEXT AUTHORING TOOLS
HTML Editor – A word processor that has been
specialized to make the writing of HTML
documents more effortless.
The most commonly used text editors are:
 Notepad (Windows)
 WordPad (Windows)
 Simpletext (Macintosh)
 Adobe Dreamweaver (All)

HTML TAGS
HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by
angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag
is the end tag
 The end tag is written like the start tag, with a
forward slash before the tag name
 Start and end tags are also called opening tags and
closing tags

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

HTML ATTRIBUTES
 HTML elements can have attributes
 Attributes provide additional information about an
element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like:
name="value"
Example
HTML links are defined with the <a> tag.
The link address is specified in the href attribute:
<a href="http://www.example.com">This is a link</a>

THE HTML <HEAD> ELEMENT
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 <title> tag defines the title of the document.
 The <title> element is required in all HTML/XHTML
documents.
 The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to
favorites
 displays a title for the page in search-engine results

HTML ATTRIBUTES
 class Specifies one or more class
names for an element (refers to
a class in a style sheet)
 id Specifies a unique id for an
element
 style Specifies an inline CSS style for
an element
 title Specifies extra information about
an element (displayed as a
tool tip)

HTML HEADINGS
 Headings are defined with the <h1> to <h6>
tags.
 <h1> defines the most important heading.
<h6> defines the least important heading.
Exmaple
<h1>This is a heading</h1>

HEADINGS ARE IMPORTANT
 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 LINES
 The <hr>tag creates a horizontal line in an
HTML page.
 The hr element can be used to separate
content:
Example
 <p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

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 PARAGRAPHS & LINE BREAKS
Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
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>

HTML TEXT FORMATTING
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice
or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

HTML COLORS
Colors are displayed combining RED, GREEN, and
BLUE light.
The combination of Red, Green, and Blue values
from 0 to 255, gives more than 16 million different
colors (256 x 256 x 256).
 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.

HTML HYPERLINKS (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 link‟s 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
 <a href="url">Link text</a>

HTML LINKS
The target Attribute
 The target attribute specifies where to open
the linked document.
 The example below will open the linked
document in a new browser window or a new
tab:
<a href="http://www.abc.com/"
target="_blank">abc!</a>

HTML LINKS
The id Attribute
 The id attribute can be used to create a
bookmark inside an HTML document.
 Tip: Bookmarks are not displayed in any
special way. They are invisible to the reader.
<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips
Section</a>
<a href="http://www.abc.com/html_links.htm#

HTML IMAGES - THE <IMG> TAG AND THE SRC
ATTRIBUTE
 In HTML, images are defined with the <img>
tag.
 The <img> tag is empty, which means that it
contains attributes only, and has no closing
tag.
 To display an image on a page, you need to
use the src attribute. Src stands for "source".
The value of the src attribute is the URL of
the image you want to display.
 <img src="url" alt="some_text">

HTML IMAGES - SET HEIGHT AND WIDTH OF AN
IMAGE
 The height and width attributes are used to
specify the height and width of an image.
 The attribute values are specified in pixels by
default:
 The alt attribute provides alternative
information for an image
<img src="pulpit.jpg" alt="Pulpit rock"
width="304" height="228

WHAT IS CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML
elements
 Styles were added to HTML 4.0 to solve a
problem
 External Style Sheets can save a lot of
work
 External Style Sheets are stored in CSS files

STYLING HTML WITH CSS
 CSS was introduced together with HTML 4, to
provide a better way to style HTML elements.
 CSS can be added to HTML in the following
ways:
 Inline - using the style attribute in HTML
elements
 Internal - using the <style> element in the
<head> section
 External - using an external CSS file
 The preferred way to add CSS to HTML, is to
put CSS syntax in separate CSS files.

CSS SYNTAX
 A CSS rule has two main parts: a selector,
and one or more declarations:
 The selector is normally the HTML element
you want to style.
 Each declaration consists of a property and a
value.
 The property is the style attribute you want to
change. Each property has a value.
p {color:red;text-align:center;}

INLINE STYLES
 An inline style can be used if a unique style is to
be applied to one single occurrence of an
element.
 To use inline styles, use the style attribute in the
relevant tag. The style attribute can contain any
CSS property. The example below shows how
to change the text color and the left margin of a
paragraph:
 <p style="color:blue;margin-left:20px;">This is a
paragraph.</p>

INTERNAL STYLE SHEET
An internal style sheet can be used if one single
document has a unique style. Internal styles are
defined in the <head> section of an HTML page,
by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

EXTERNAL STYLE SHEET
An external style sheet is ideal when the style is
applied to many pages. With an external style
sheet, you can change the look of an entire Web
site by changing one file. Each page must link to
the style sheet using the
<link> tag. The <link> tag goes inside the <head>
section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

CSS EXAMPLE
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

CSS ID AND CLASS
The id Selector
 The id selector is used to specify a style for a single,
unique element.
 The id selector uses the id attribute of the HTML element,
and is defined with a "#".
 The style rule below will be applied to the element with
id="para1":
Example
#para1
{
text-align:center;
color:red;
}

THE CLASS SELECTOR
 The class selector is used to specify a style for
a group of elements. Unlike the id selector, the
class selector is most often used on several
elements.
 This allows you to set a particular style for many
HTML elements with the same class.
 The class selector uses the HTML class
attribute, and is defined with a ".“
Example
.center {text-align:center;}

CSS BACKGROUND
 CSS background properties are used to define
the background effects of an element.
 CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
body {background-color:#b0c4de;}

CSS TEXT PROPERTIES
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between
characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text unicode-bidi
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is
handled
word-spacing Increases or decreases the space between words in
a text

CSS TEXT EXAMPLES
 h1 {color:#00ff00;}
 h1 {text-align:center;}
 a {text-decoration:none;}
 p.uppercase {text-transform:uppercase;}
 p {text-indent:50px;}
 P {tex-shadow:0px 0px 5px inset; }
 P {tex-shadow:0px 0px 5px ; }

CSS FONT PROPERTIES
font Sets all the font properties in one
declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text
should be displayed in a small-caps
font
font-weight Specifies the weight of a font

CSS FONT EXAMPLE
 p{font-family:"Times New Roman", Times,
serif;}
 p.italic {font-style:italic;}
 h1 {font-size:40px;}
 h1 {font-size:2.5em;}
 h1 {font-weight:bold;}
 h1 {font-variant:small-caps;}

CSS LINKS
 The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
 All links comes in sequence
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link
*/
a:active {color:#0000FF;} /* selected link */

CSS BOX MODEL
 All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when
talking about design and layout.
 The CSS box model is essentially a box that
wraps around HTML elements, and it consists
of: margins, borders, padding, and the actual
content.
 The box model allows us to place a border
around elements and space elements in relation
to other elements.

CSS BOX MODEL CONT..
Explanation of the different parts:
 Margin - Clears an area around the border. The
margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding and
content. The border is affected by the background
color of the box
 Padding - Clears an area around the content. The
padding is affected by the background color of the
box
 Content - The content of the box, where text and
images appear

WIDTH AND HEIGHT OF AN ELEMENT
The total width of the element in the example
below is 300px:
 .Element {width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}
 Let's do the math:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

CSS BORDER
border Sets all the border properties in one
declaration
border-bottom Sets all the bottom border properties in one
declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one
declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one

CSS BORDER CONT….
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four
borders
border-top Sets all the top border
properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

CSS BORDER CONT…
border-style values:
{none,dotted,dashed,solid,double,groove,ri
gid}
border-style values:
Color , width so
Example
border:5px solid red;
Border-bottom:5px dashed blue;

CSS OUTLINES
 outline Sets all the outline properties in
one declaration
 outline-color Sets the color of an outline
 outline-style Sets the style of an outline
none
 outline-width Sets the width of an outline thin

CSS MARGIN
margin A shorthand property for setting
the margin properties in one
declaration
margin-bottom Sets the bottom margin of an
element
margin-left Sets the left margin of an
element
margin-right Sets the right margin of an
element
margin-top Sets the top margin of an

CSS MARGIN CONT….
Margin - Individual sides
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - Shorthand property
margin:100px(T) 50px® 20PX(B) 10PX(L);

CSS PADDING
Padding A shorthand property for setting
all the padding properties in
one declaration
padding-bottom Sets the bottom padding of an
element
padding-left Sets the left padding of an
element
padding-right Sets the right padding of an
element
padding-top Sets the top padding of an

CSS PADDING CONT….
Padding - Individual sides
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding - Shorthand property
padding:25px(t) 50px® 40px(b) 60px(L);

CSS DISPLAY AND VISIBILITY
 Hiding an Element - display:none or
visibility:hidden
 Hiding an element can be done by setting the
display property to "none" or the visibility
property to "hidden". However, notice that
these two methods produce different results:
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

CSS POSITIONING
 The CSS positioning properties allow you to
position an element. It can also place an
element behind another, and specify what
should happen when an element's content is too
big.
 Elements can be positioned using the top,
bottom, left, and right properties. However,
these properties will not work unless the
position property is set first. They also work
differently depending on the positioning method

CSS POSITIONING PROPERTIES
bottom Sets the bottom margin edge for a
positioned box
clip Clips an absolutely positioned element
cursor Specifies the type of cursor to be
displayed
left Sets the left margin edge for a positioned
box
overflow
Specifies what happens if content overflows
an element's box

CSS POSITIONING PROPERTIES
 position Specifies the type of positioning for
an element
(absolute,fixed,relative,static,inherit)
 right Sets the right margin edge for a
positioned box
 top Sets the top margin edge for a positioned
box
 z-index Sets the stack order of an element

CSS FLOAT
 Elements are floated horizontally, this means that an
element can only be floated left or right, not up or
down.
 A floated element will move as far to the left or right
as it can. Usually this means all the way to the left or
right of the containing element.
 The elements after the floating element will flow
around it.
 The elements before the floating element will not be
affected.
 If an image is floated to the right, a following text
flows around it, to the left:

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.

TABLE EXAMPLE
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

THE HTML <DIV> ELEMENT
 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.
 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.
 <div>content</div>

THE HTML <SPAN> ELEMENT
 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.
 <div> Defines a section in a document (block-
level)
 <span> Defines a section in a document (inline)

HTML FORMS
 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 Input Element
 <form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>

FORMS CONT…
Password Field
Password: <input type="password" name="pwd">
Radio Buttons
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
Checkboxes
<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I
have a car
Submit Button
<input type="submit" value="Submit">

HTML LISTS
 HTML Unordered Lists
 An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
 The list items are marked with bullets
(typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

LIST CONT…
 HTML Ordered Lists
 An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
 The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

LISTS CONT…
 A description list is a list of terms/names, with a
description of each term/name.
 The <dl> tag defines a description list.
 The <dl> tag is used in conjunction with <dt> (defines
terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How to learn HTML in 10 Days

More Related Content

What's hot (20)

Similar to How to learn HTML in 10 Days (20)

Recently uploaded (20)

How to learn HTML in 10 Days