02. session 02 working with html elements
Download as ppt, pdf0 likes446 views
The document discusses various HTML elements. It explains basic formatting elements, color properties, phrase elements, and the image and hyperlink elements. The image element can create image maps with multiple clickable areas linked to different URLs. Phrase elements like CODE, DFN and EM emphasize or format text in specific ways. Hyperlinks are created using the HREF attribute and can link to other pages, emails or locations within the page.
More Related Content
What's hot (19)
Viewers also liked (12)
Similar to 02. session 02 working with html elements (20)
More from Phúc Đỗ (14)
Recently uploaded (20)
02. session 02 working with html elements
- 1. Working with HTML Elements Session 2
- 2. Contents Explain the basic formatting elements. Explain the color properties. Explain the phrase elements. Explain the image element. Explain hyperlinks. Building Dynamic Websites/Session 2/ of 28
- 3. Basic text elements Providing a flow to the contents. Making the web page comprehensible. P BR HR H1 – H6 PRE Building Dynamic Websites/Session 2/ of 28
- 4. Heading levels <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD> <TITLE>Search engines</TITLE> <BODY> <H1>H1 Heading</H1> <H2>H2 Heading</H2> <H3>H3 Heading</H3> <H4>H4 Heading</H4> <H5>H5 Heading</H5> <H6>H6 Heading</H6> </BODY> </HTML> Building Dynamic Websites/Session 2/ of 28
- 5. Heading level Building Dynamic Websites/Session 2/ of 28
- 6. Address element To be a container element. Enclosed: The address Contact information. A link to the home page. A search string feature. Copyright information. Building Dynamic Websites/Session 2/ of 28
- 7. Address element <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD> <TITLE>Address element</TITLE> <BODY> This is an example of ADDRESS element. <HR/> <ADDRESS> VEST Technologies<BR/> Building 009, West Road<BR/> Canberra<BR/> USA </ADDRESS> </BODY> </HTML> Building Dynamic Websites/Session 2/ of 28
- 8. Address element Building Dynamic Websites/Session 2/ of 28
- 9. TT element Displaying text such as telewriter type. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD> <TITLE>TT element</TITLE> <BODY> TT element renders <TT>teletype</TT> or <TT>monospaced</TT> text. </BODY> </HTML> Building Dynamic Websites/Session 2/ of 28
- 10. TT element Building Dynamic Websites/Session 2/ of 28
- 11. Character entity Building Dynamic Websites/Session 2/ of 28 Symbol name Entity name Entity number Ampersand (&) & & Greater than (>) > > Less than (<) < < non-breaking space   Quotation mark (“ “) " "
- 12. Basic formatting B BIG I SMALL U Building Dynamic Websites/Session 2/ of 28
- 13. Update and Shiting text DEL INS STRONG SUB SUP Building Dynamic Websites/Session 2/ of 28
- 14. Color property The color name is listed to validate and process with HTML page. The color property specifies one of these colors to be applied to the textual content. Building Dynamic Websites/Session 2/ of 28
- 15. Color property Building Dynamic Websites/Session 2/ of 28 Color Hexadecimal Value Aqua #00FFFF Fuchsia #FF00FF Gray #808080 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Silver #C0C0C0 Teal #008080
- 16. Phrase elements There are certain phrase elements. Displaying a program code in different font emphasizing with a different look. Building Dynamic Websites/Session 2/ of 28
- 17. Phrase elements Building Dynamic Websites/Session 2/ of 28 Element Description CODE Displaying the computer program. DFN Displaying the defination of a term. EM Emphasizing the enclosed text SAMP Displaying a sample output of computer programs. VAR Displaying a variable name that refers to a block of memory and holds a value which is referred by the variable name.
- 18. Building Dynamic Websites/Session 2/ of 16
- 19. Phrase elements <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD> <TITLE>Phrase Elements</TITLE> <BODY> <H3>Microsoft Excel</H3><HR/> Microsoft Excel: <DFN>is the spreadsheet program.</DFN> <P><CODE>=SUM(first cell address:last cell address)</CODE> is the function that add values appearing in the given cell range.<BR/> Building Dynamic Websites/Session 2/ of 28
- 20. Phrase elements The <EM>first cell address</EM> is the address of the starting the cell from where you want to start the addition operation. The <EM>last cell address</EM> is the address of the last the cell till where you want to add the values.<BR/> The <CODE>SUM</CODE> function adds all numeric values existing in the cells between the first cell and the last cell.</P> An example of <CODE>SUM</CODE> function: <SAMP>=SUM(A1:A3)</SAMP> </BODY> </HTML> Building Dynamic Websites/Session 2/ of 28
- 21. Phrase elements Building Dynamic Websites/Session 2/ of 28
- 22. SPAN and DIV element These element defines a section in a web page. DIV is a block level element. SPAN is an in-line level element. Building Dynamic Websites/Session 2/ of 28
- 23. IMG element SRC WIDTH HEIGHT ALT LONGDESC ALIGN USEMAP Building Dynamic Websites/Session 2/ of 28
- 24. Image maps There are diferrent areas that act as links in an image. Map element AREA element Building Dynamic Websites/Session 2/ of 28
- 25. Image maps <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><HEAD> <TITLE>Search engines</TITLE> <BODY> <H2>Search engines</H2> <MAP name="searchmap"> <AREA href="http://www.google.com" alt="Google" shape="rect" coords="0,0,170,35"/> <AREA href="http://www.ask.com" alt="Ask" shape="rect" coords="0,28,170,70"/> </MAP> <img src="SearchEngines.JPG" alt="Search Engines" width="286" height="99" usemap="#searchmap"/> </BODY> </HTML> Building Dynamic Websites/Session 2/ of 28
- 26. Image maps Building Dynamic Websites/Session 2/ of 28
- 27. Hyperlinks HREF HREFLANG NAME TARGET TITLE Building Dynamic Websites/Session 2/ of 28
- 28. Summary Basic text elements providing a flow to the contents. Address element enclosed the contact information. W3C defined 16 color name for HTML. Phrase elements display code in different font emphasizing with a different look. There are diferrent areas that act as links in an image. Mailto link allows sending emails Building Dynamic Websites/Session 2/ of 28