Download to read offline
Uploaded byMd Ali Hossain
Html class-02
This document contains information about HTML elements, tags, attributes and other basic building blocks of HTML. It discusses common elements like <head>, <body>, <title>, <p>, <h1> and their purpose. It also covers attributes, colors, lists, links, images and how to format text. The document is a tutorial for someone learning HTML basics.
More Related Content
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Html class-02
- 1. Md. Ali Hosssain. WebDesigner. Jr. Instructor, Graphic Arts Innstitute. Email:[email protected] Phone:01731402303 02/08/14
- 2. HTML Elements HTML ElementSyntax • 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 <p> element: • The <h1> element: 02/08/14
- 3.
- 4. HTML Attributes •HTML elementscan 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
- 5.
- 6. HTML BODY Element <BODYattributename="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
- 7. Colors Values for BGCOLORand 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
- 8.
- 9. <PRE> Preformatted Text SpecialCharacters <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE> Character Use < < > > & & " " Space 02/08/14
- 10. <address> Written by <ahref="mailto:[email protected]">Kamrul</a>.<br> Visit us at:<br> Example.com<br> Dhanmondi Dhaka<br> Bangladesh </address> <h1>Graphics arts Institute</h1> <blockquote > Graphics Arts institute is the largest arts institute In Bangladesh </blockquote> 02/08/14
- 11. Physical Character Styles <H1>PhysicalCharacter Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> 02/08/14
- 12. <H1>Logical Character Styles LogicalCharacter Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> 02/08/14
- 13. Fonts <FONT COLOR="red" SIZE="2"FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT> 02/08/14
- 14. Unordered (Bulleted) Lists Anordered 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
- 15. Unordered (Bulleted) Lists <ULTYPE="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
- 16. Ordered (Numbered) Lists <OLTYPE="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
- 17. HTML Description Lists Adescription 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
- 18.
- 19. <A> Anchors (HyperLinks) 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
- 20. Hyperlinks <BODY> <H3>Welcome to <AHREF="http://www.cs.virginia.edu"> <STRONG>Computer Graphics</STRONG></A> at the <A HREF="www.gai.edu">Graphics Arts Instute.</A> </H3> </BODY> 02/08/14
- 21. 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
- 22. Images Align=position Image/Text Placement Left Image onleft 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
- 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!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML> 02/08/14
- 24.