Вы находитесь на странице: 1из 9

HTML

1. HTML : Hyper Text Markup Language


2. TAG or Element : Text place in between left angular brace ‘<’ and right angular brace
‘>’ is called a element
Syntax : set of rules
Open (start) tag close(end) tag
<html> ---------------------------------------------</html>
<body>-----------------------------------------------</body>
Note : closing tag will be represented with forward slash(/)
3.Hyper Text : hyperlink or Navigation (moving from one page to another page).
4. Mark up language : syntax which consist of tags or elements/ Attributies and parameters.

Ex :
Tag Attribute parameter
<body bgcolor= “red”>
5.HTML was started developing in 1990 ‘s by Tim Bermer’s and HTML4 was released in
1999 and HTML5 was announced in December 2012 and initial version was released in october 28th
2014 by w3c(WORLD WIDE WEB CONSORTIUM) and WHATWG(WEB HYPERTEXT APPLICATION
TECHNOLOGY WORKING GROUP) .

6.HTML5=HTML4+XHTML+DOM LEVEL2 API(advanced java script)


DOM ---->Document Object Model
API --- Application Programming interface
7. we save it with .html or .htm extension
8. HTML is case insensitive (A=a) language
9.HTML is global language i.e it can be understand by all available browsers
10.HTMl is use to create static (non interactive ) weg pages
11.TOOLs :
1. Browsers : Google chrome,Mozilla firefox,Internet Explore,safari ,opera,UC(china)…
2.Notepad,Notepadd++,Visual studio(.net),Visual Studio code(Angular 2,4,5,6,7….) ,Dream
weaver,Edit plus,Net beans,Ecllipse,Subline,RubyMine…….

Type of Tags :
1. Container or paired Tag : A tag which Consists both opening and closing
Eg:<p>…………………….</p>,<a>……………………….</a>

2. Empty or unpaired tag: A Tag which consists only opening .


Eg:<hr>,<br>,<img>
Note : HTML ---br,XHTML</br>,<img/>,<hr/>(Self Closed)
Structure of HTML :
<html>
<head>
<title>Structure of HTML </titile>
</head>
</body>
</html>

Note :
1.Default browser for .html files -- right click on .html file --- open with -- choose default
program- check use this application for all .html files select any browser.
2.’title’ tag will be dispalyed as a title on the browser and in search Engine like Google ,Yahoo,bing….
3.60 characters in length (count) including spaces were recommended.

Heading in HTML

<html>
<head>
<title>Heading in HTML</title>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading1</h2>
<h3>Heading1</h3>
<h4>Heading1</h4>
<h5>Heading1</h5>
<h6>Heading1</h6>
</body>
</html>

Note :
1.out of all the headings ‘h1’ is bigger and ‘h6’ is smaller
2. All the headings are container tag.
Formatting Tags :
These tags are used to apply bold ,italic underline and so on for the font.
Eg:
<html>
<head>
<title>
Formatting / Citation tags
</title>
</head>
<body>
<b>Bold</b><br>
<strong>Strong</strong><br>
<i>Italic</i><br>
<em>Emphasis</em><br>
<cite>cite</cite>
<var>Variable</var>
<u>Underline</u>
<s>S</s><br>
<del>Delete</del><br>
<strike>Strike</strike><br>
H<sub>2</sub>o<br>
a<sup>2</sup>+b<sup>2</sup><br>
<blockquote>Content will be displayed by leaving 8 space on the left and right side</blockquote>
</body>
</html>

Note:
1.’br’ stand for break or new line or line break
2. sub : subscript or base
3. sup : super script or power.

HTML ENTIES OR SPECAILA CHARACTERS OR SYMBOLS


<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<q>Quatation tag</q><br>
&quot;Double Quote &quot;<br>
&apos;Sigle Quote &apos;<br>
&lsquo;Single Quote &rsquo;<br>
&lt;b&gt;Bold&lt;&Sol;b&gt;<br>
&copy; &reg; &trade; &spades;<br>
&clubs; &diams; &hearts;&beta;<br>
&Beta; &omega; &omega; &frac12;
&frac34;&euro;&yen; &#8377;
&phone; &#X20B9;
</body>
</html>
NOTE :
1.&apos;---------------apostrophee
2.&lsquo;--------------Left single quote
3.&rsquo;------------right single quote
4.&lt;------------------less than
5.&gt------------------greater than
6.&sol-----------------forward slash
7.&bsol--------------- Backward slash
8.http://dev.w3.org./html5/html-author/char ref

Attributies and Parameters


1.Attributies are the special features of a tag.
2.parameters are the values (varies or changes) that we assign (store or hold ) to an attribute
3. A tag can have one or more attributies
Syntax :
Tag Attribute parameter
<body bgcolor = “pink”>

Paragraph Tag
It is used to apply proper alignment for paragraph of text.
Syntax :
<p>………………….</p>
Attributies Parameters
align left(default),right,center,justify
1. <html>
<head>
<title>
Paragraph tag
</title>
</head>
<body>
<p>Text align left (Default)</p>
<p align="right">Text align right</p>
<p align="justify">Huge Text to align Justify</p>
<p align="center">Text align center (Default)</p>
<center>Center tag</center>
</body>
</html>
2. <html>
<head>
<title>
Paragraph pre tag
</title>
</head>
<body>
<p>
sno &nbsp;&nbsp; name number<br>
sno name number
</p>
<pre>
sno name number
sno name number
</pre>
</body>
</html>
NOTE:
1.Justify =Left+right
2.http://lipsum.com /==Dummy text
3.Browser
1.Zoom in (Max 500%) : ctrl ++
2.Zoom out(Min 25%) : ctrl—
3.default view(100%) ctrl+0
4.&nbsp;-Stands for non breaking space or single space
5.br stands for break or new line or line break
6.pre tag:
1.It is also called as preformatted text
2.It is used to display however we type the text on the editor like spaces and line breaks
Syntax :
<pre>-------------</pre>
Font Tag :
It is used to apply color ,size face for the font.
Syntax : <font>-------------------</font>

Attributes Parameters
1.color ------------------------------------------any color(default is black)
2.size------------------------------------------1-7(default I s 3)
3.face-----------------------------------------TimesNewRoman(default),arial,Verdana

Note
Font tag is “deprecated” or ”removed” or “deleted ” as per W3c (World Wide web consortimu –
validator.w3.org)
Eg:
<html>
<head>
<title>Font tag</title>
</head>
<body>
<font size="6" color="red" face="arial">Font TAG</font>
<font>Font TAG</font>
<font size="6" color="red" face="Verdana">Font TAG</font>
</body>
</html>

HR tag :
1.It is also called as horizontal rule.
2.It is used to display the horizontal line on the browser.
Syntax :<hr>
Attributies Parameters
Width------------------------------------------Any number
Size--------------------------------------------any number
Align------------------------------------------left,right,center(default)
No shade(color=”gray”)

<html>
<head>
<title>HR tag</title>
</head>
<body>
<hr width="60%" align="right" size="2" noshade>
<hr width="60%" align="left" size="2" color="gray">
<hr width="60%" size="2" noshade>
</body>
</html>

NOTE:
1.Default width is 100%
2.’noshade’ will be applied whenever we are not specifying the color of the hr

Type of lists
1.Unordered List
2.Ordered List
3.Nested List
4.Description or Defination List.

1.Unordered List : It is also called as bullet list


Syntax :<ul>------------------</ul>
‘li’ stands for Listed item
<li>-------------------</li>
Attribute Parameters
Type Disc(default),circle,square

Eg:
<html>
<head>
<title>Unordered list</title>
</head>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul type="circle">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul type="square">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</body>
</html>

2.OrderList
It is also called as numbered List
Syntax :
<ol>--------------</ol>
Li stands for list item
<li>--------------------</li>
Attribute Paramter
Type 1.(default),A,a,I,i
Start any number
EG:
<html>
<head>
<title>ordered list</title>
</head>
<body>
<ol start="0">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
<ol type="-10">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
<ol type="A" start="4">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
<ol type="a" start="1026">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

<ol type="I" start="9">


<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
<ol type="i" start="15">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
</body>
</html>
3.Nested List : List Inside the List
EG:
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ul>
<li>Item1
<ol>
<li>Item1</li>
<li>Item2</li>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</li>
</ol>
</li>
<li>Item2</li>
</ul>
</body>
</html>

4.Description Or Defination List:


It is used to display content in the form of title and description
Syntax :
<dl>------------------------</dl>
‘dt’ stand for description title
<dt>--------------------</dt>
‘dd’ stands for description data
<dd>---------------------------</dd>

Eg:
<html>
<head>
<title>Description List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper text Markup Language</dd>
<dt>XHTML</dt>
<dd>Extensible Hyper Text Markup Language</dd>
</dl>
</body>
</html>
Marquee Tag
It is used to scroll the text and Images on the browser
Syntax :
<marquee>----------------------------</marquee>
Attributes Parameters
1.bgcolor----------------------- -----------------------------------any color
2.width------------------------------------------------------------any number
3.height------------------------------------------------------------ any number
4.direction------------------------------------------------------- left(default),right,up,down
5.Scroll amount-------------------------------------------------any number
(increase speed)
EG:
<html>
<head>
<title>Marquee tag</title>
</head>
<body>
<marquee onmouseover="stop()" onmouseout="start()" bgcolor="pink">
Start/stop</marquee>
<pre>
Onmouseover:place the cursor on the marquee tag
Onmouseout :remove the cursor on the marquee tag
start() : to start scrolling
stop() : to stop scrolling
</pre>
</body>
</html>

Вам также может понравиться