You are on page 1of 33

+

Internet Technology
Malak Alamri

This course is based on material by Dr.Kamal eldein

+
HyperText Markup Language
(HTML)
Chapter 2
October 20, 2014

+

Agenda

HTML
o

HTML Styles
1.

Font Family: Color, Size and Face

2.

HTML Colors

3.

Body Tag Properties (style)

4.

HTML Lists

+ HTML Formatting Elements  In the previous Lecture. like important text.  Formatting elements are special HTML elements with a special meaning. subscripts. emphasized text. you learned about HTML formatting elements. .  Formatting elements were designed to display special types of text. and superscripts.

. . can be done with the style attribute.)  Changing the default style of an HTML element.  Every HTML element has a default style (background color is white. text color is black .+ HTML Styling  HTML styling has nothing to do with formatting elements..  Styling is about changing or adding the style of existing HTML elements.

like <font size="4"> Browser default font size is 3.+ 1. like <font face="verdana">  Value3: Specifies the text color with a color name like <font color="red">. you can increase or decrease font size by using <font> tag like: <font size="+2"> or <font size="1">  Value2: The font of the text. or Specifies the text color with a hex code like <font color="#AB0F0C"> .Font Family: Color. so. font size. The syntax of the <font> tag is:  <font size="value1" face="value2" color="value3"> text </font>  Value1: The size of the text. Size and Face  The <font> tag specifies the font face. and font color of text. Possible values is a number from 1 to 7.

This is another paragraph. Size and face  Let's see the following example: <html> <body> <p><font size="3" face="Verdana" color="blue"> This is a paragraph.+ 1.</font></p> </body> </html>  The result is: This is a paragraph.Font Family: Color.</font></p> <p><font size="5" face="Times" color="red"> This is another paragraph. .

. starting with a # sign. Hexadecimal values are written as 3 double digit numbers.  A hexadecimal notation for the combination of Red. Color names are easier to remember but the hexadecimal values provide you more color options.  There are 16 color names.HTML Colors  The most common methods for specifying colors in HTML are by using the color name or the hexadecimal value. the following table shows these color names and their corresponding hexadecimal value. and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (Hexadecimal 00). The highest value is 255 (Hexadecimal FF).+ 2. Green. like "#f1c265".

+ 2.HTML Colors Color Hexadecimal Color Color Hexadecimal Color Name Value Name Value Black #000000 Green #008000 Silver #c0c0c0 Lime #00ff00 Gray #808080 Olive #808000 White #ffffff Yellow #ffff00 Maroon #800000 Navy #000080 Red #ff0000 Blue #0000ff Purple #800080 Teal #008080 Fuchsia #ff00ff Aqua #00ffff .

Body Tag Properties 1.0)") .0.Background Color  The background attribute in <body> tag specifies a background image for a document.+ 3.  <body bgcolor="value">  value: color_name or hex_number or rgb_number  Attribute Values Value Description color_name Specifies the background color with a color name (like "red") hex_number Specifies the background color with a hex code (like "#ff0000") rgb_number Specifies the background color with an rgb code (like "rgb(255.

Body Tag Properties  Typing this code: <html> <body bgcolor="yellow"> <h2>Look: Colored Background!</h2> </body> </html>  The result is: Look: Colored Background! .+ 3.

Background image  The background attribute in <body> tag specifies a background image for a document.+ 3.  <body background="value">  value: image name and it's path. .Body Tag Properties 2.

+ 3.jpg"> <p align = center>Aljouf university</p> </body> </html>  The result is: .Body Tag Properties  Typing this code: <html> <head><title>Image</title></head> <body background="C:\Users\Asus\Pictures\111.

+ 3.Text color  The text attribute in <body> tag specifies the color of the text in a document.Body Tag Properties 3.  <body text="value">  Value: color_name or hex_number or rgb_number  By using this example: <html> <body text="green"> <p align = right>Aljouf University </p> </body> </html> .

Body Tag Properties  The result is: Aljouf University .+ 3.

 Syntax: <body Topmargin="value" Leftmargin="value">  Let's see the following example <html> <body topmargin="40" leftmargin="30"> Hi </body> </html> .+ 3.Body Tag Properties 4.Top and Left Margins  Top and left margins in <body> tag used to specify the margin from top and left of the web page.

Body Tag Properties  The result is: Hi .+ 3.

<html> <body text="red" bgcolor="lightgray" topmargin="40" leftmargin="30"> Hi <br> Welcome </body> </html> .Body Tag Properties  In any HTML tag the attributes of the tag can share the same tag. See the following example.+ 3.

+ 3.Body Tag Properties  The result is: Hi Welcome .

Unordered (Un-Numbered) Lists  An unordered list is a list of items.  Syntax: <ul type="value"> <li> list item 1 <li> <li> list item 2 <li> … <li> list item n <li> </ul> . Unordered and Definition lists. Each list item starts with the <li> tag. 1. The list items are marked with bullets (typically small black circles).+ 4-HTML Lists HTML supports three types of lists: Ordered. An unordered list starts with the <ul> tag.

+ 4-HTML Lists  Value: Style Description list-style-type:disc The list items will be marked with bullets (default) list-style-type:circle The list items will be marked with circles list-style-type:square The list items will be marked with squares  Typing this code: .

+ 4-HTML Lists <html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> </body> </html> .

+ 4-HTML Lists  The result is: Disc bullets list: • Apples • Bananas • Lemons • Oranges Circle bullets list: o Apples o Bananas o Lemons o Oranges Square bullets list:  Apples  Bananas  Lemons  Oranges .

"u" for unordered). The list items are marked with numbers.  Syntax: <ol type="value"> <li> list item 1 <li> <li> list item 2 <li> … <li> list item n <li> </ol> . An ordered list starts with the <ol> tag. the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered.Ordered (Numbered) Lists  An ordered list is also a list of items. Each list item starts with the <li> tag.+ 4-HTML Lists 2.

+ 4-HTML Lists  Value: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers  Typing this code: .

+ 4-HTML Lists <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> </body> </html> .

+ 4-HTML Lists  The result is: Numbered list: 1.Lemons iv. Apples b.Oranges Lowercase Roman numbers list: i. Bananas c. Bananas C. Bananas 3.Oranges Lowercase letters list: a. Apples 2. Apples ii.Lemons IV. Oranges .Lemons D. Lemons 4. Apples II. Lemons d.Apples B. Oranges Letters list: A. Bananas iii. Oranges Roman numbers list: I. Bananas III.

 Syntax: <dl> <dt>term 1</dt> <dd> term 1 description </dd> <dt>term 2</dt> <dd> term 2 description </dd> … <dt>term n</dt> <dd> term n description </dd> </dl> . A definition list starts with a <dl> tag (definition list). It is a list of items (terms). with a description of each item (term).Each description starts with a <dd> tag (definition description).Each term starts with a <dt> tag (definition term).Definition Lists  A definition list is not a list of single items.+ 4-HTML Lists 3.

+ 4-HTML Lists  Let's see the following example: <dl> <dt>CPU</dt> <dd>Central Processing Unit</dd> <dt>ALU</dt> <dd>Arithmetic and Logic Unit</dd> </dl> .

. other lists.+ 4-HTML Lists  Here is how it looks in a browser: CPU Central Processing Unit ALU Arithmetic and Logic Unit  Inside the <dd> tag you can put paragraphs. line breaks. links. images. etc.

Let's see the following example: <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> .+ 4-HTML Lists 5-Nested Lists  It is a list inside list.

+ 4-HTML Lists  The result is: A nested List: • Coffee • Tea o Black tea o Green tea  China  Africa • Milk .

+ Thanks .