Html class-02

Md. Ali Hosssain.
Web Designer.
Jr. Instructor, Graphic Arts Innstitute.
Email:Students.gai@gmail.com
Phone:01731402303
02/08/14

HTML Elements
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
Element

•

The <Head> element:

•

The <body> element:

•

The<head> element:

•

The <Title> element:

•

The element:

•

The <h1> element:

02/08/14

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"

02/08/14

HTML BODY Element
<BODY attributename="attributevalue">
Deprecated attributes (but still used)

BACKGROUND=“Sunset.jpg” (can be tiled)
BGCOLOR=color
TEXT=“color”
LINK=“color” (unvisited links)
VLINK=“color” (visited links)
ALINK=color (when selected)

<body alink="#336666" background="test.jpg" bgcolor="red"
link="#00FF00" text="#FF0000" vlink="#00CC99">
02/08/14

Colors
Values for BGCOLOR and COLOR
many are predefined (red, blue, green, ...)
all colors can be specified as a six character hexadecimal value:

RRGGBB
FF0000 – red
888888 – gray
004400 – dark green
FFFF00 – yellow
000000-Black

02/08/14

<PRE> Preformatted Text
Special Characters
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>

Character

Use

<

<

>

>

&

&

"

"

Space

 
02/08/14

<address>
Written by <a href="mailto:webmaster@example.com">Kamrul</a>. 
Visit us at: 
Example.com 
Dhanmondi Dhaka 
Bangladesh
</address>
<h1>Graphics arts Institute</h1>
<blockquote >
Graphics Arts institute is the largest arts
institute In Bangladesh
</blockquote>

02/08/14

Physical Character Styles
<H1>Physical Character Styles</H1>
Bold 
Italic 
<TT>Teletype (Monospaced)</TT> 
Underlined 
Subscripts: f0 + f1 
Superscripts: x2 + y2 
Smaller 
<BIG>Bigger</BIG> 
<STRIKE>Strike Through</STRIKE> 
Bold Italic 
<BIG><TT>Big Monospaced</TT></BIG> 
Small Italic 
Gray 
<DEL>Delete</DEL> 
<INS>Insert</INS> 
02/08/14

<H1>Logical Character Styles
Logical Character Styles</H1>

Emphasized 
Strongly
Emphasized 
<CODE>Code</CODE> 
<SAMP>Sample Output</SAMP> 
<KBD>Keyboard Text</KBD> 
<DFN>Definition</DFN> 
<VAR>Variable</VAR> 
<CITE>Citation</CITE> 
<CODE>Emphasized
Code</CODE> 
<CITE>Gray
Citation</CITE> 
<ACRONYM TITLE="Java Development
Kit">JDK Acronym</ACRONYM>

02/08/14

Fonts

This is the text of line one 

Line two contains this text 


02/08/14

Unordered (Bulleted) Lists
An ordered list:

An unordered list:

1.The first list item

•List item

2.The second list item

•List item

3.The third list item

•List item

<ol>

<ul>

<li>lIST1</li>

<li>list1</li>

<li>LIST2</li>

<li>lIST2</li>

</ol>

</ul>

02/08/14

Unordered (Bulleted) Lists

<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>

<ul type="circle" type="disc" type="square">
02/08/14

Ordered (Numbered) Lists
<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>
<ol type="A" type="1" type="a" type="i" type="I">

02/08/14

HTML Description Lists
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>

Coffee
- black hot drink
Milk
- white cold drink

02/08/14

<A> Anchors (Hyper Links)

Link to an absolute URL:

If you get spam, contact <A HREF="htttp:www.microsoft.com">
Microsoft </A> to report the problem.
Link to a relative URL:
See these <A HREF="#references"> references </A>
concerning our fine products.
Link to a section within a URL:
Amazon provided a <A HREF="www.amazon.com/#reference">
reference for our company. </A>
<H2> <A NAME="#references"> Our References </A> </H2>

02/08/14

Hyperlinks
<BODY>
<H3>Welcome to <A HREF="http://www.cs.virginia.edu">
Computer Graphics</A>
at the <A HREF="www.gai.edu">Graphics Arts Instute.</A>
</H3>
</BODY>

02/08/14

Images
SRC is required
WIDTH, HEIGHT may be in units of pixels or percentage of

page or frame
WIDTH="357"
HEIGHT="50%"

Images scale to fit the space allowed

02/08/14

Images
Align=position

Image/Text Placement

Left

Image on left edge; text flows to right of image

Right

Image on right edge; text flows to left

Top

Image is left; words align with top of image

Bottom

Image is left; words align with bottom of image

Middle

Words align with middle of image

02/08/14

Images
<BODY>
<img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin
jump!">
This is a very cute dolphin on the left! 
You can see text wrap around it 
</BODY>
</HTML>
02/08/14

Html class-02

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Html class-02

Similar a Html class-02 (20)

Más de Md Ali Hossain

Más de Md Ali Hossain (20)

Último

Último (20)

Html class-02