Html class-02

Md. Ali Hosssain.Web Designer.Jr. Instructor, Graphic Arts Innstitute.Email:[email protected]:01731402303

04/12/23

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

HTML Elements

• The <Head> element:

• The <body> element:

• The<head> element:

• The <Title> element:

• The element:

• The <h1> element:

Element

04/12/23

04/12/23

•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"

HTML Attributes

04/12/23

04/12/23

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

BACKGROUND=“Sunset.jpg” (can be tiled)BGCOLOR=colorTEXT=“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">

04/12/23

ColorsValues for BGCOLOR and COLOR

many are predefined (red, blue, green, ...)all colors can be specified as a six character

hexadecimal value: RRGGBBFF0000 – red888888 – gray004400 – dark greenFFFF00 – yellow000000-Black

04/12/23

04/12/23

<PRE> Preformatted Text

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

Character Use

< <

> >

& &

" "

Space

Special Characters

04/12/23

<address>

Written by <a href="mailto:[email protected]">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>

04/12/23

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> 

04/12/23

Logical Character Styles<H1>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>

04/12/23

Fonts

This is the text of line one 



Line two contains this text 



04/12/23

Unordered (Bulleted) Lists

An ordered list:

1.The first list item

2.The second list item

3.The third list item

An unordered list:

•List item

•List item

•List item

<ul>

<li>list1</li>

<li>lIST2</li>

</ul>

<ol>

<li>lIST1</li>

<li>LIST2</li>

</ol>

04/12/23

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">

04/12/23

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">04/12/23

<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>

HTML Description ListsA 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):

Milk- white cold drink

Coffee- black hot drink

04/12/23

Hyperlinks

04/12/23

<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>

04/12/23

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>

04/12/23

Images

SRC is requiredWIDTH, HEIGHT may be in units of pixels or

percentage of page or frameWIDTH="357"HEIGHT="50%"

Images scale to fit the space allowed

04/12/23

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

Images

04/12/23

Images<BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!">

This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! This is a very cute dolphin on the left! You can see text wrap around it 

</BODY></HTML>

04/12/23

04/12/23

Technology

Html class-02