Html Guide

How the web works?
WWW use classic client-server Architecture

What is Webpage?
Web page are text files containing HTML, CSS and
JAVASCRIPT

Static and Dynamic Websites
1. Static
Static Websites consist of webpages which
displays the exact information whenever anyone
visits
2. Dynamic
Dynamic Websites contains web pages which are
capable of producing different content for
different visitor from the same source code

HTML
HTML is founded by CERN acronym for European
Organization for Nuclear Research.
HTML Divided into two parts:-
1. Hyper Text
2. Markup Language

HTML – Markup Language
• Markup Language is not same as programming
language
• markup languages are used to annotate and add
semantic structure or meaning to a text document
• HTML structures and shapes the text in a way that
makes it easier to understand with the help of
“TAGS” and uses .html file extension.

HTML TAGS
HTML tags are the hidden keywords within a web
page that define how your web browser must format
and display the content.
To markup anything on HTML document we need to
use Tags.
Once Tag Is open we need to define a closing tag of
same TAGNAME unless its self closing Tag.

HTML - Hypertext
Hypertext simply the Idea of documents are capable
of being linked together.
A piece of Text and image can refer to another HTML
document.

HTML 5
HTMl 5 is advanced Technology then HTML 4
HTML 5 is a combination of :
• New HTML Tags
• New CSS Properties
• New JavaScript Apis.

Example of HTML Document
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Required HTML Document Tags Explained
The HTML document itself begins with <html> and
ends with </html>.
The visible part of the HTML document is
between <body> and </body>.
<head> and </head> contains all the meta data of
HTML and does not visible in web browser.

HTML Elements
An HTML element usually consists of a start tag
and end tag, with the content inserted in between:
<tagname>Content goes here.</tagname>
The HTML element is everything from the start tag to
the end tag:
<p>My first paragraph.</p>

Html Comments

HTML Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
<p>Hello I am Paragraph.</p>
<p>Hi, I am
another paragraph.</p>
Any space, new lines will be removed by browser
automatically.

Html Elements attributes
An attribute defines a property for an element, consists of an attribute/value pair, and appears
within the element's start tag. An element's start tag may contain any number of space
separated attribute/value pairs.

HTML HyperLinks
By Clicking hyperlinked text, image or group of text;
you can jump to another html or other document.
<a href="url">link text</a>

Void Elements / self closing tags
Void elements only have a start tag; end tags must not be
specified for void elements.
As you can see these types of tags rely on "attributes",
these are added modifiers on the tag that have their own
values.

HTML Images
<img src="url“ alt=“text”/>
Or
<img src="url“ alt=“text”>

HTML Lists
Unordered HTML List
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered List
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Iframes
An iframe is used to display a web page within a web
page.
<iframe src="URL"></iframe>

HTML Iframe useful Attributes
Align (specify where to align iframe)
Values :-
1. Left
2. Right
3. Top
4. Middle
5. bottom

Frameborder (specify whether to show border around
iframe or not)
Values :-
1. 0
2. 1

Height and width
Height attribute will specify the height of iframe
Width attribute will specify the height of iframe

Scrolling (specify to show scrollbar in frame )
Values :-
1. Yes
2. No
3. auto

HTML5 attributes for iframe
Srcdoc (Specifies the HTML content of the page to show in the <iframe>)
Values :-
Any html elements

Sandbox (Enables an extra set of restrictions for the content in an <iframe>)
Values :-
1. No value
2. allow-forms
3. allow-pointer-lock
4. allow-popups
5. allow-same-origin
6. allow-scripts
7. allow-top-navigation
multiples values allowed with space

HTML Entities
Reserved characters in HTML must be replaced with
character entities.
Example we cannot directly write “<” in html, it may
leads to html page break, for that we can use html
entity to display that character i.e. <

HTML Formatting Elements
<b> - Bold text </b>
<strong> - Important text </strong>
<i> - Italic text </i>
<em> - Emphasized text </em>
<mark> - Marked text </mark>
<small> - Small text </small>
<del> - Deleted text </del>
<ins> - Inserted text </ins>
<sub> - Subscript text </sub>
<sup> - Superscript text </sup>

HTML Tables
Html table defined with <table>..</table> tags
Table row is defined by <tr>…</tr>
Table row data is defined by <td>..</td>

Colspan
The colspan attribute defines the number of columns
a cell should span (or merge) horizontally. That is, you
want to merge two or more Cells in a row into a
single Cell.
<td colspan=2 >

rowspan
The rowspan attribute specifies the number of rows a
cell should span (or merge) vertically.
<td rowspan=2 >

Table important attributes
1. Align (left,right,center)
2. Bgcolor
3. Border(0, 1)
4. Cellpadding
5. Cellspacing
6. Frame(below,above,vsides,hsides)
7. Rules (rows,cols,all,groups,none)
8. width

HTML Form
Html form is the one who gathers user inputs and
send data to server.
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Form action
Action attribute is used to define or specify where
form data should go.
It is also called as form-handler

Form method
1. Get
In GET method the data is sent as URL parameters
that are usually strings of name and value pairs
separated by ampersands (&)
2. POST
The data is included in the body of the request. This
may result in the creation of a new resource or the
updates of existing resources or both.

HTML Input Elements
Input elements are used to get input from user.
<input type="text" name="firstname"><br/>
<input type="password" name="psw"><br/>
<input type="submit" value="Submit"><br/>
<input type="radio" name="gender" value="male"
checked> Male<br>

HTML 5 Input types
Color date
datetime-local email
Month number
Range search
Tel time
url week

Form Elements
1. <select>
The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
2. <textarea>
<textarea name="message" rows="10" cols="30">

HTML Input Field Important Atrributes
1. Readonly :-
will make input field read only (cannot be changed)
can be applied as readonly or readonly=“readonly”
2. Disabled :-
will make input field disabled ( un usable and un clickable)
can be applied as disabled or disabled=“disabled”
3. Size
The size attribute specifies the size (in characters) for the input field
can be applied as size=“no of characters” ex- size=“55”

4. maxlength :-
The maxlength attribute specifies the maximum allowed length for the input field
can be applied as maxlength=“no. of characters” ex maxlength=“10”
5. placeholder :-
The placeholder attribute specifies a hint that describes the expected value of an input field ‘
‘ (a sample value or a short description of the format).
6. checked :-
checked attribute used to keep radio or check input button checked

HTML5 Attributes for Input Field
Autocomplete
When autocomplete is on, the browser automatically completes the input
values based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
The autocomplete attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.
Can be applied as autocomplete=“yes or no”

Novalidate
It’s a form attribute which specifies that form data should not be validated
during submission
Can be applied as :- novalidate

required
The required attribute specifies that an input field must be filled out before submitting the form.

step
The step attribute specifies the legal number intervals for an <input type=“number”> element.
Example: if step=“4", legal numbers could be -4, 0, 4, 8, etc.

Id attribute
The id attribute specifies a unique id for an HTML element (the value must be unique within the
HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML
DOM) to manipulate the element with the specific id.
Example :
<h1 id=“main_heading”><h1>
<p id=“content”></p>

Datalist
Datalist is used to define a data list for input type=“list”
<input list=“Brands">
<datalist id=“Brands">
<option value=“Samsung">
<option value=“Apple iphone">
<option value=“Sony ">
<option value=“vivo phones">
<option value=“t mobile">
</datalist>

Label tag
The element is used to associate a text label with a form
field. The label is used to tell users the value that should be entered in the associated input
field.
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>

HTML Block – <Div> Element
The <div> tag defines a division or a section in a
HTML document.
It is used to group elements.

Semantic Html
We Want our markup to define what our content is, not
what is it supposed to look like.
<b> or <strong>

Why Semantic Structure?
If your markup is not up to semantically marked up then it’s
difficult for web crawlers and search engines to parse your
website and rank your content.
Example:
<address>

Html5 Semantic Elements
1. Header
2. Nav
3. Aside
4. Section
5. Article
6. Footer
7. Figure
And more… http://bit.do/5semantics

Section
The <section> element defines a section in a document.
this element represents a standalone section.
<section>
<h1>HTML WG</h1>
<p> HTML Working Group</p>
</section>

Article
The HTML <article> element represents a self-contained composition in a document, page,
application, or site, which is intended to be independently distributable or reusable (e.g., in
syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

Header
The HTML <header> element represents introductory content, typically a group of introductory
or navigational aids. It may contain some heading elements but also other elements like a logo, a
search form, an author name, and so on.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

Footer
The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of
use, contact information, etc.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

nav
The <nav> element defines a set of navigation links.
<nav>
<a href=“http://google.com">Google</a> |
<a href=" http://facebook.com ">Facebook</a> |
<a href=" http://yahoo.com ">Yahoo</a> |
<a href=" http://bing.com ">Bing</a>
</nav>

aside
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Figure and figcaption
The purpose of a figure caption is to add a visual explanation to an image.
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

HTML5 - New Attribute Syntax
Type Attribute
1. Empty <input type="text" value="John" disabled>
2. Unquoted <input type="text" value=John>
3. Double-quoted <input type="text" value="John Doe">
4. Single-quoted <input type="text" value='John Doe'>

Section vs Div
Understand Div vs Section using html outliner.
Div
According to w3c div is don’t have any special meaning, its
just used to style content. Its nothing do to enhance your
site markup
Section
It’s more powerful than div, its help to create a complete
different section where elements does not follow hierarchy.

Internet Explorer
Semantic Elements after IE9 are fine but IE9, if element is
not understood by IE then we cannot apply styling on it.
Use HTML5 Shim or HTML5 Shiv to style elements which do
not recognize by older browsers.

Microdata
Suppose how cool it would be if Search engines already
know what content they are parsing?
Microdata is a simple way to give search engines more
information about our content.
Schema.org

Meta Tags
Metadata is data (information) about data. The <meta> tag provides metadata about
the HTML document.
<meta charset=“utf-8”>
<title>….</title> <!– should be meaningful and describes your page - - >
<meta name=“description” content=“Enter your description”>
<link rel=“author” href=“google+_profile”>
<meta name=“keywords” content=“keyword1,keyword2”>
<meta name=“canonical” href=http://www.website.com/preferred-url> <!– we can use relative
path as well - - >

Duplicate Content
Don’t copy any content from another website and paste it exactly
and donot use multiple url which points same content.

Social Media Tags
<meta property=“og:title” content=“this is my article heading”>
<meta property=“og:type” content=“blog or article”>
<meta property=“og:image” content=“url of image”>
<meta property=“og:url” content=“url of content”>
<meta property=“og:description” content=“description of content >297 chars”>

Html Guide

More Related Content

What's hot (20)

Similar to Html Guide (20)

Recently uploaded (20)

Html Guide