Html

Hyper Text Markup Language
HTML

Introduction
 It is a markup language for describing web
documents (web pages). HTML stands for Hyper
Text Markup Language. A markup language is a
set of markup tags, html documents are
described by HTML tags. Each HML tag
describes different document content.
 It is a set of markup symbols or codes inserted in
a file intended for display on a world wide web
(www) browser page. The markup tells the web
browser how to display a web pages words &
images for the user.

 Each individual markup code is referred
to as an element (but many people also
refer to it as a tag).
 Some elements come in pairs that
indicate when some display effect is to
begin & when it is to end.
 HTML has
 HTML Tags
HTML attributes.

Rules of HTML
 The HTML documents, all html documents must
start with a type declaration.
<!DOCTYPE html>
 The HTML documents itself begins with <html> &
ends with </html>
 The visible part of the HTML document is
between <body> & </body>

Simple Code Syntax of
HTML
<!DOCTYPE html> (Opening Tag)
<html> (html tag)
<head> (head tag)
<title> title name </title> (title tag)
</head> (head closed)
<body> (body tag)
<h1> heading </h1> (heading tag)
</body> (body closed)
</html> (html closed)

[A] HTML tags
 HTML tags are keywords (tag names) surrounded by angle
brackets.
E.g. <tag name> content </tag name>
 HTML tags normally come in pairs like <p> & </p>. The
first tag in a pair is the start tag, the second tag is the end
tag. The end tag is written like start tag, but with a forward
slash inserted before the tag name.
 HTML tags are:
Heading tag, paragraph tag, style tag, background tag,
formatting tag, comment tag, links tag, images tag, list tag,
block tag, div tag, table tag, head tag, layout tag, class tag
etc.

[1] HTML Head
 The <head> element is a container for metadata (data
about data). HTML metadata is data about the HTML
document. Metadata is not displayed.
 Metadata typically define document title, styles, links,
scripts & other meta information. The following tags
describe metadata :
<title>
<style>
<meta>
<link>
<script>
<base>

[2] HTML Heading
 Heading are defined with the <h1> to <h6>
defines the least important heading.
<h1> heading 1 </h1>

[3] HTML Paragraph
 The html <p> element defines a paragraph.
<p> paragraph>
[4] HTML Styles
 Setting the style of an HTML elements can be
done with the style attribute. The HTML style has
the following syntax:
<style> </style>

[5] HTML Background Color
 The background color property defines the
background color for an HTML element.
E.g. <body bgcolor=“lightrey”>
[6] HTML Formatting
 HTML uses element like
<b> = bold
<i> = italic
<u>= underline

[7] HTML Comments
 Comment tags <!......&> are used to insert
comments in HTML.
<! This is a comment>
<! Remember to add more info here>
[8] HTML Links
 A hyperlink is a text or an image you can click on, &
jump to another document.
<a href=“URL”> link text</a>
<a href=“http://www.fb.com/rajendra.chand.9865”>
MY facebook
Page </a>

[9] HTML Images
 In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes
only, & does not have a closing tag. The src
attribute specifies the URL (web address) of the
image. The alt attribute specifies an alternate text
for an image, if the image cannot be displayed.
<img src=“URL” alt=“some-text”/>
<img src=“filename.jpeg” alt=“about image”
width=“100px” height=“100px” />

[10] HTML List
 There are two types of list:
[a] Unordered HTML Lists:
 An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag. The list items will
be marked with bullets (small black circles)
<ul>
<li> coffee </li>
<li> tea </li>
</ul>

[b] Ordered HTML Lists:
 An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
<ol>
<li>coffee <li>
<li> tea </li>
</ol>

[11] HTML Block
 There are two types of block:
[a] Block-Level elements:
 A block-level element always starts on a new line
& takes up the full width available (stretches out
to the left & right as far as it can).
<div style=“background-color: pink; color: white;
padding:20px;”>

[b] Inline elements:
 An inline element does not start on a new line &
only takes up as much width as necessary. This is
an inline <span> element inside a paragraph.
<span>
<a>
<img>
[c] The div elements:
 The <div> element is a block-level element that is
often used as a container for other HTML
elements. The <div> element has no required
attributes, but style & class are common. When
used together with CSS, the <div> element can
be used to style blocks of content.

[12] HTML Tables
 E.g.
<table style=“width:100%”>
<tr>
<td> Raj </td>
<td> Chand </td>
</tr>
</table>

[B] HTML Attributes
 Attributes provide additional information about
HTML elements.
 All HTML elements can have attributes provide
additional information about an element.
 Attributes are always specified in the start tag.
 Attributes come in name/value pairs like:
name=“value”

[C] HTML Attributes
 Attributes provide additional information about
html elements.
 All HTML elements can have attributes provide
additional information about an element.
Attributes are always specified in the start tag.

[1] The Title Attributes
 HTML title is defines with <title> & the paragraph
are defined with the <p> tags
 E.g.
<!DOCTYPE html>
<html>
<head>
<title> Title Name </title>
</head>
</html

[2] The href Attribute
 HTML links are defined with the <a> tag. The link
address is specified in the href attribute.
 E.g.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=“http://www.fb.com/rajendra.chand.9865”>
This is my facebook page link </a>

[3] The Size Attributes
 HTML images are defined with the <img> tag. The
filename of the source (src), & the size of the image
(width & height) are all provided as attributes. E.g.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=“filename.jpeg” width=“100px”
height=“100px”/>
</body>
</html>

[4] Alt Attribute
 The alt attributes specifies an alternative text to be
used, when an image cannot be displayed. The value
of the attributes can be read by screen readers. E.g.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=“filename.jpeg” alt=“comment on photo”
width=“100px” height=“100px”/>
</body>
</html>

[5] Lang Attribute
 The lang attributes is the document language can
be declared in the <html> tag. The language is
declared in the lang attribute. Declaring a
language is important for accessibility
applications (screen readers) & search engines.
E.g
<!DOCTYPE html>
<html lang=“en-US”>
<head>
</head>
<body>
</body>
</html>

[6] Align Attribute
This attribute is used to give the alignment to the
text or image. When the text needs to put on
center, right , left then this attribute is used .e.g.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> <p align=“center”> Raj </p> </h1>
</body>
</html>

Html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html

Similar to Html (20)

More from RajThakuri

More from RajThakuri (20)

Recently uploaded

Recently uploaded (20)

Html