Html class-02


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html class-02

  1. 1. Md. Ali Hosssain. Web Designer. Jr. Instructor, Graphic Arts Innstitute. Phone:01731402303 02/08/14
  2. 2. 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 <p> element: • The <h1> element: 02/08/14
  3. 3. 02/08/14
  4. 4. 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
  5. 5. 02/08/14
  6. 6. 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
  7. 7. 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
  8. 8. 02/08/14
  9. 9. <PRE> Preformatted Text Special Characters <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE> Character Use < &lt; > &gt; & &amp; " &quot; Space &nbsp; 02/08/14
  10. 10. <address> Written by <a href="">Kamrul</a>.<br> Visit us at:<br><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. 11. Physical Character Styles <H1>Physical Character 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. 12. <H1>Logical Character Styles Logical Character 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. 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. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Hyperlinks 02/08/14
  19. 19. <A> Anchors (Hyper Links) Link to an absolute URL: If you get spam, contact <A HREF=""> 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=""> reference for our company. </A> <H2> <A NAME="#references"> Our References </A> </H2> 02/08/14
  20. 20. Hyperlinks <BODY> <H3>Welcome to <A HREF=""> <STRONG>Computer Graphics</STRONG></A> at the <A HREF="">Graphics Arts Instute.</A> </H3> </BODY> 02/08/14
  21. 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. 22. 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
  23. 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. 24. 02/08/14