This Course Is Based On Material by DR - Kamal Eldein: Internet Technology

+
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, you learned about HTML formatting elements.
Formatting elements are special HTML elements with a special meaning.
Formatting elements were designed to display special types of text, like

important text, emphasized text, subscripts, and superscripts.
HTML Styling
HTML styling has nothing to do with formatting elements.
Styling is about changing or adding the style of existing HTML elements.
Every HTML element has a default style (background color is white, text
color is black ...)
Changing the default style of an HTML element, can be done with the style
attribute.
+ 1- Font Family: Color, Size and Face
The <font> tag specifies the font face, font size, and font color of text. The
syntax of the <font> tag is:
<font size="value1" face="value2" color="value3"> text </font>
Value1: The size of the text. Possible values is a number from 1 to 7, like
<font size="4"> Browser default font size is 3, so, 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, like <font face="verdana">
Value3: Specifies the text color with a color name like <font color="red">, or
Specifies the text color with a hex code like <font color="#AB0F0C">
+ 1- Font Family: Color, Size and face
Let's see the following example:
<html>
<body>
<p><font size="3" face="Verdana" color="blue"> This is a
paragraph.</font></p>
<p><font size="5" face="Times" color="red"> This is another
paragraph.</font></p>
</body>
</html>
The result is:

This is a paragraph.
This is another paragraph.
2- HTML Colors
The most common methods for specifying colors in HTML are by using the
color name or the hexadecimal value. Color names are easier to remember
but the hexadecimal values provide you more color options.
A hexadecimal notation for the combination of Red, Green, 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).
Hexadecimal values are written as 3 double digit numbers, starting with a #
sign, like "#f1c265".
There are 16 color names, the following table shows these color names and
their corresponding hexadecimal value.
+ 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
+ 3- Body Tag Properties

1- Background Color
The background attribute in <body> tag specifies a background image for a

document.
<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,0,0)")
Typing this code:
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
The result is:
Look: Colored Background!

2- Background image
The background attribute in <body> tag specifies a background image for a

document.
<body background="value">
value: image name and it's path.
Typing this code:
<html>
<head><title>Image</title></head>
<body background="C:\Users\Asus\Pictures\111.jpg">
<p align = center>Aljouf university</p>
</body>
</html>
The result is:

3- Text color
The text attribute in <body> tag specifies the color of the text in a document.
<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>
The result is:

Aljouf University

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.
Syntax: <body Topmargin="value" Leftmargin="value">
Let's see the following example
<html>
<body topmargin="40" leftmargin="30">
Hi
</body>
</html>
The result is:
Hi
In any HTML tag the attributes of the tag can share the same tag. See the
following example.
<html>
<body text="red" bgcolor="lightgray" topmargin="40"
leftmargin="30">
Hi <br>
Welcome
</body>
</html>
The result is:
Hi
Welcome
+ 4-HTML Lists
HTML supports three types of lists: Ordered, Unordered and Definition lists.
1- Unordered (Un-Numbered) Lists
An unordered list is a list of items. The list items are marked with bullets
(typically small black circles). An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
Syntax:
<ul type="value">
<li> list item 1 <li>
<li> list item n <li>

</ul>
+ 4-HTML Lists
Value:
Style
Description
list-style-type:disc
The list items will be marked with

bullets (default)
list-style-type:circle

circles
list-style-type:square

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>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</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
4-HTML Lists
2- Ordered (Numbered) Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
the only difference between an ordered list and an unordered list is the first
letter of the list definition ("o" for ordered, "u" for unordered).
Syntax:
<ol type="value">
<li> list item n <li>
</ol>
+ 4-HTML Lists
Value:
Type
Description
type="1"
The list items will be numbered with

numbers (default)
type="A"

uppercase letters
type="a"

lowercase letters
type="I"

uppercase roman numbers
type="i"

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. Apples
2. Bananas
3. Lemons
4. Oranges
Letters list:
A.Apples
B. Bananas
C.Lemons
D.Oranges
Lowercase letters list:

a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:

I. Apples
II. Bananas
III.Lemons
IV.Oranges
Lowercase Roman numbers list:
i. Apples
ii. Bananas
iii.Lemons
iv. Oranges
+ 4-HTML Lists
3- Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a
description of each item (term). A definition list starts with a <dl> tag
(definition list).Each term starts with a <dt> tag (definition term).Each
description starts with a <dd> tag (definition description).
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>
+ 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>
+ 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, images, links, other
lists, etc.
+ 4-HTML Lists
5-Nested Lists
It is a list inside list. 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
The result is:

A nested List:
Coffee
Tea
o Black tea
o Green tea
China
Africa
Milk
Thanks

This Course Is Based On Material by DR - Kamal Eldein: Internet Technology

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

This Course Is Based On Material by DR - Kamal Eldein: Internet Technology

Загружено:

Авторское право:

Доступные форматы

+

This course is based on material by Dr.Kamal eldein

Font Family: Color, Size and Face

Body Tag Properties (style)

HTML Formatting Elements

In the previous Lecture, you learned about HTML formatting elements.

Formatting elements are special HTML elements with a special meaning.

Formatting elements were designed to display special types of text, like

HTML styling has nothing to do with formatting elements.

Styling is about changing or adding the style of existing HTML elements.

+ 1- Font Family: Color, Size and Face

<font size="value1" face="value2" color="value3"> text </font>

Value2: The font of the text, like <font face="verdana">

+ 1- Font Family: Color, Size and face

Let's see the following example:

The result is:

This is another paragraph.

+ 3- Body Tag Properties

The background attribute in <body> tag specifies a background image for a

value: color_name or hex_number or rgb_number

Specifies the background color with a color name (like

hex_number Specifies the background color with a hex code (like

+ 3- Body Tag Properties

Typing this code:

The result is:

Look: Colored Background!

+ 3- Body Tag Properties

The background attribute in <body> tag specifies a background image for a

value: image name and it's path.

+ 3- Body Tag Properties

Typing this code:

The result is:

+ 3- Body Tag Properties

Value: color_name or hex_number or rgb_number

By using this example:

+ 3- Body Tag Properties

The result is:

+ 3- Body Tag Properties

Syntax: <body Topmargin="value" Leftmargin="value">

Let's see the following example

+ 3- Body Tag Properties

The result is:

+ 3- Body Tag Properties

+ 3- Body Tag Properties

The result is:

<li> list item n <li>

The list items will be marked with

The list items will be marked with

The list items will be marked with

Typing this code:

The result is:

The list items will be numbered with

The list items will be numbered with

The list items will be numbered with

The list items will be numbered with

The list items will be numbered with

Typing this code:

The result is:

Lowercase letters list:

Roman numbers list:

Let's see the following example:

Here is how it looks in a browser: