02. session 02 working with html elements
TRANSCRIPT
Working with HTML Elements
Session 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/ 2 of 28
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/ 3 of 28
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/ 4 of 28
Heading level
Building Dynamic Websites/Session 2/ 5 of 28
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/ 6 of 28
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/ 7 of 28
Address element
Building Dynamic Websites/Session 2/ 8 of 28
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/ 9 of 28
TT element
Building Dynamic Websites/Session 2/ 10 of 28
Character entity
Building Dynamic Websites/Session 2/ 11 of 28
Symbol nameEntity name
Entity number
Ampersand (&) & &
Greater than (>) > >
Less than (<) < <
non-breaking space  
Quotation mark (“ “) " "
Basic formatting B BIG I SMALL U
Building Dynamic Websites/Session 2/ 12 of 28
Update and Shiting text DEL INS STRONG SUB SUP
Building Dynamic Websites/Session 2/ 13 of 28
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/ 14 of 28
Color propertyColor Hexadecimal Value
Aqua #00FFFFFuchsia #FF00FFGray #808080Maroon #800000Navy #000080Olive #808000Purple #800080Silver #C0C0C0Teal #008080
Building Dynamic Websites/Session 2/ 15 of 28
Phrase elements There are certain phrase elements. Displaying a program code in different
font emphasizing with a different look.
Building Dynamic Websites/Session 2/ 16 of 28
Phrase elements
Element DescriptionCODE Displaying the computer program.DFN Displaying the defination of a term.EM Emphasizing the enclosed text
SAMPDisplaying 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.
Building Dynamic Websites/Session 2/ 17 of 28
Building Dynamic Websites/Session 2/ 18 of 16
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/ 19 of 28
Phrase elementsThe <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/ 20 of 28
Phrase elements
Building Dynamic Websites/Session 2/ 21 of 28
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/ 22 of 28
IMG element SRC WIDTH HEIGHT ALT LONGDESC ALIGN USEMAP
Building Dynamic Websites/Session 2/ 23 of 28
Image maps There are diferrent areas that act as
links in an image. Map element AREA element
Building Dynamic Websites/Session 2/ 24 of 28
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/ 25 of 28
Image maps
Building Dynamic Websites/Session 2/ 26 of 28
Hyperlinks HREF HREFLANG NAME TARGET TITLE
Building Dynamic Websites/Session 2/ 27 of 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/ 28 of 28