HTML tutorial chapter 1

Html tag:
• Opening tag
• Closing tag
<p> tag
<p dir="rtl"> This line will be shown as right to left
in browser </p>

Html attribute
<tag-name attribute-name = value>
Need to use “ ” for assigning value

Main attributes
• Id
• Class
• Title and
• Style..
Id and class value is case-sensitive.
<p id =“first” class=“attr1”> #attr1
<p class=“attr2”>
.attr1{}
#first{first}

Html style
<p style="font-family:arial; color:#FF0000;">
Some text. </p>
About contents:

Html extension
• Video file extension: .avi, .vod. .dat, .mp4,.mpeg
• Audio file extension: .mp3, .amr, .wav
• Image file extension: .jpg, .gif, .png
• .php , .html

Html editor
• IDE (Integrated Development Environment)
• Notepad,notepad++,dream weaver,
phpStorm,netbeans etc

Start html code
<html>
<head>
<title> </title>
</head>
<body>
Hellow World !!
</body>
</html>
** Never use space in html file name
** How to save html file in notepad

html
• Html indentation
• Html comments
• Html doctype
<!DOCTYPE html> for html5
Page validation is not possible without doctype declaration
Html 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Html :: 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Html elements
<p>this is a paragraph</p>

Html main elements
1. <html>
2. <head>
3. <title>
4. <body>
** How to show source code?

<head> Element
<title>
<style>
<base>
<link>
<meta>
<script> and
<noscript>
<title> Element
What is body element?

Use of body elements
• background
• bgcolor
• link
• text Ges
• vlink

background
Absolute URL
Relative URL
<body background="URL of image">
<body background="images/grey.jpg">

<font>
• Compatibility Notes
• The size attribute of <font> is not supported in
HTML5. Use CSS instead.
• CSS syntax: <p style="font-size:20px">

Align
• Heading h1 to h6
• Heading with align attribute
• <html> <head> <title> Use of Align Attribute in HTML Paragraph Element
</title> </head> <body> <h1 align="center"> Justify Alignment in
Paragraph Element </h1> <p align="justify"> This Paragraph will be
displayed as justify-alignment in browser. All the lines in this Paragraph
will be shown in equal. This Paragraph will be displayed as justify-
alignment in browser. All the lines in this Paragraph will be shown in equal.
This Paragraph will be displayed as justify-alignment in browser. All the
lines in this Paragraph will be shown in equal. This Paragraph will be
displayed as justifyalignment in browser. All the lines in this Paragraph will
be shown in equal. This Paragraph will be displayed as justify-alignment in
browser All the lines in this Paragraph will be shown in </p> </body>
</html>

Use of <p> element style attribute
• <html> <head> <title> Use of Style Attribute in HTML
Paragraph Element </title>
</head> <body> <h1 align="center"> Use of Style
Element </h1> <p style="color:red; text-align:center;
font-size:20px; text-transform:capitalize;"> This
Paragraph will be shown as Red color and Center-
aligned & the Font size would be larger than normal.
This Paragraph will be shown as Red color and Center-
This Paragraph will be shown as Red color and Center-
</p> </body> </html>

Dir attribute (direction)
• Value itr -- default or rtl(right to left direction)
<html> <head> <title> Use of Dir Attribute in
HTML Paragraph Element </title> </head>
<body> <h1 align="center"> Right to Left
Direction in Paragraph Element </h1> <p
dir="rtl"> This Paragraph will be displayed from
right to left in browser. </p> </body> </html>

Use of Non-Breaking Space entity
 
Example………………………
Line break element:: <br />
<html> <head> <title> Use of Line Break Element
</title> </head> <body> <h1 align="center"> Line
Break Collapsing! </h1> <p> My Bonnie lies over
the ocean. My Bonnie lies over the sea. My Bonnie
lies over the ocean. Oh, bring back my Bonnie to
me. </p> </body> </html>

Preformatted (<pre>) Element
• <html> <head> <title> Use of Preformatted
Element </title> </head> <body> <h1
align="center"> Count each Space & Line
Break using Preformatted Element !! </h1>
<pre> First Line Second Line Third Line Fourth
Line </pre> </body> </html>

Font attribute
• Color attribute
• Font face
<font face="Font_Name">
Arial, Calbiri, Courier, Times New Roman
Font size
<font size="2">
*Bold element
*Italic element
*Under line element
*Center element
*Img tag --- img src
*<s> and <strike> Elements
<tt> Element tt means TeleType
<sup> Element
<sub> Element
<big> Element
<small> element

<hr /> element with width attribute
• <html> <head> <title> Use of HTML
Presentational Elements! </title> </head>
<body> <h1 align="center"> Width Attribute in
HR Element </h1>
<h1>HTML</h1>
<p>HTML is a language for describing web
pages.</p>
<hr width="50%“ align=“left” />
<h1>CSS</h1>
<p>CSS defines how to display HTML
elements.</p> </body> </html>

HTML tutorial chapter 1

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à HTML tutorial chapter 1

Similaire à HTML tutorial chapter 1 (20)

Dernier

Dernier (20)

HTML tutorial chapter 1