1

Introduction :

1. What's HTML:

"Hyper Text Markup Language"

 It's a markup language to design web documents

 The Markup language contain tags

 Each tag describes different document content

 The first version of the language was in 1991

 Now : there is new versions like : Html 5 , XHTML , Html 4.01

2. Example Explained :

 <!DOCTYPE HTML> declaration defines this document to be the new

version HTML 5

2

note : the <!Doctype html > is extremely required as it help the browser to

display the web page correctly . it can be written into lowercase or uppercase

 The text between <html> &</html> contain HTML document

 The text between <head> & </head> contain information about the

document

 The text between <body> & </body> contain the visible part of the page

3. The HTML Tags:

 <the tag name> the content written here </ the tag name >

 Html tags normally coms like that ( <TN>…..</TN>)

 the first tag called the opining tag , the last one called the closing tag

 some tags has no closing tag like ( < img > , < link > , < meta >)

4. what you need to start :

 you don’t need a previous experience in web designing

 you need a code writer program like :

o komodo Clean Listener

note : you can use the pc application Notepad

 You need browser to see your design Like :

o Firefox

o Google chrome

o Safari

3

5. HTML Page Structure :

note : only The <body> section ( the white area ) is displayed in a browser

6. html versions:

Version

Year

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML 5

2012

4

Attributes

 The attributes used to add more information to the elements

 The attributes always written into the start tag

 The attributes mostly be set like that :(attribute name = "value")

1) Lang attribute :

used to set the document language (EN- AR – FR -…)

2) Title attribute :

the value of the title only be displayed as a tooltip if your mouse

over the element

3) Hiding attribute:

the hiding attributes has no value , it makes the element invisible

5

4) Style attribute:

the style attribute is used to add effects and styles to the element

like : (text-align / font-size / color / font-family / background….etc.)

5) Size attributes:

Height : this one control the element height

the first one's height is metered by Pixels ,the second by

em,the third by % " the difference between them all will be

reminded”

Width : this one control the image width

note : the height & width value is Pixels by default

width = 400px equals width = "400"

6) Name attribute :

this attribute don’t mean the image name . it doesn’t appear on the

website

the Designers use it to help the web programmers to write PHP,C++,Java

6

7)class & id :

class & id attributes are used to add styles to selector in the style sheet

or <style> element

the difference between class & id :

when you add styles you put dot (.) before the class name but the id you

put (#) before it ; the (id) can be used to create bookmarks (look page 40)

1- <meta ..> : (unclosing element )

7

This element is used to specify the character of the page ,

keywords , description , author and anther metadata

That character is the most used one as it able the browser

to read mostly every language

You use the description to describe your web site in few

words like the over one

The keywords are these words which help the user to find

you website

Note: the keywords are no longer used in HTML

Note : all meta information goes before the body

2- <title> Element :

Write you page title which is in the tab :

8

3- <Link…> Element : (unclosing

element)

We use it to add a style sheet written by CSS:

4- <Style> Element

It is used to add effects to the text , image , background ,

tables , etc…..

You need to study CSS language to be professional in

styles . but we will take a simply examples :

< style>

the tag name

{

The styles

}

</ style >

9

Note: you can write the styles anyway . you just have to

write it correctly :

5- <base ….> (unclosing tag)

The < base > element specifies the base URL and the base Target

for all URLs in the page :

The difference between the < base > the < a >:

6- <Script> Element :

It's the part where we use JavaScript language .

< a >

< base …. >

Has a close tag

Has no close tag

Specifies the URL and the

Target for one URL link

Specifies the URL and the

Target for all URLs links in

the page

10

Example:

Before Click:

After Click:

You don’t have to understand the previous example

Note: you should arrange your elements like the previous order

7- an complete example for the <head> code:

11

1. the heading :

To write a heading title for your page or a paragraph use the

heading tags :

You can see the size different :

2. paragraphs:

You can write a paragraph using this tag < p> …..</ p >

12

You can see that the break before the word "course" has not

appear in the page , that’s because the program can't read the

normal breaks so we use the break tag < br > (unclosing tag)

Now you can Notec the break

That tag keeps the text formatting that’s mean you can make

the normal breaks and the program will read it :

13

Note : never forget to end the paragraph tag because it may

Couse errors

3. formatting: - go to CSS page 88 -

HTML formatting elements :

<b>

Bold text

This is HTML

Strong text

This is HTML

<i>

Italic text

This is HTML

<em>

Emphasized text

This is HTML

<mark>

Marked text

This is HTML

<small>

Small text

This is HTML

<del>

Deleted text

This is HTML

<ins>

Inserted text

This is HTML

Sup

Superscript text

This is 42

Sub

Subscript text

This is H2O

14

We write it :

Note: you can see that the browser display <strong> as <b>, and <em> as <i>

but there is a difference in the meaning of the tags :

<b> & <i> make bold and italic text , but <strong> & <em> means that the text is

"important"

15

4. Quotation & Citation:

 q:

make a short quotation between the quotation marks

 Block quote:

the text inside that tag means that tag has been taken

from anthor source

 Abbr:

the abbr element can defines an acronym.

it can be useful to give information to the users and

programmers

16

after you hold on KWS with mouse:

 Address :

this element used to defines contact information for the

owner or the writer …etc….

note: the element mostly displayed in italic

note : some browsers add a break line before and after

the element

17

 cite :

the element defines the title of a work (paragraph-topic-story)

note: the element mostly displayed in italic

 Bdo:

the element used to specify the current direction of a text

note: it exchange the word direction not the all text

18

HTML Images:

In html we add an image by using the unclosing tag <img> . the image

tag is empty (you don’t put anything after '>') . but you put attributes

before the mark ">" . you can install an image from you PC or The

Internet.

Attributes :

1- SRC : this attribute is used to install the image into you web

page

note : it's very important to write the image standard (jpg-

png-gif)

Images standerds

JPG PNG GIF

19

2- ALT : this attribute works as a replacement for the image If the

image didn’t appear.

if the browser cannot view the image . it will display the

alternate text .

you may see this if there is problem with the image or the

internet .

note: the alt attribute is very required . A website will not work

properly without it.

3- HIDDEN : this one make the image invisible but its place still existed

because it hasn’t been deleted . just hidden .

4- Style : style attribute is used to add effects to the all elements

but the style attribute prevents the internal and external style

sheets (CSS) from changing the original size of image.

20

5- Name : this attribute don’t mean the image name . it doesn’t

appear on the website

the Designers use it to help the web programmers to write

PHP,C++,Java

Adding Image :

 From PC :

If the image in the same folder with the HTML file then you only write

its name and standard

If the image in the anther folder :

1- Folder into the HTML folder : you write the url

( the folder name/the image name. The image standard)

21

2- Folder out of the HTML folder : you write (..) to get bake one step

(.. / the image name. The image standard)

 From Internet:

You want to add an image from anther website . actually , you can

access image from any website in the word:

Animated images :

The GIF standard allows animated images

Using an image as a link :

To use the image as a link .nest the <img> tag inside the "link" <a> tag

Image maps :

<map> is tag can be used to make a clickable areas on the image .

22

We use the attribute (usemap) in the <img> tag and give it a value .

We use that value in an attribute called (name) in the <map> tag .

The <map> has an <area> Attributes to write the clickable areas.

Note : the images takes time to load . large images can slow your

website

Image tags

Tag

Description

Closing status

<img>

Defines an image

Unclosing

Tags

<map>

Defines an image-map

<area>

Defines an clickable area on

the image

< a >

Defines an image-Link

Closing tag

23

The difference between (px - pt - % - em - rem):

1 – The Pixel - PX - :

( 1 PX = 0.04 CM)

The pixel is the most used one :

2- The EM :

The 1 Em For A Text = The Size Of The Parent Text

The 2 Em For A Text = double Size Of The Parent Text

24

3- the rem :

the 1 rem = the size of the main parent text

the 2 rem = double size of the main parent text

You can see that the texts size followed the first text (the main parent

text ) not the second (the div parent text)

the parent text

25

4- % :

The (%) works like the EM & REM but :

200% of a text = double size of the default text size

300% of a text = treble size of the default text size

…....…..etc…………

Notes : The size value is pixels by default ,

The default size of the text is 16px = 100%

5- The Print (PT) :

This one is used for print size , and it's unused and unrequired in the

design

26

Tables

 To define table we use <table> tag

 To define table row we use <tr>tag

 To define table head we use <th> tag

 To define table cells data we use <td> tag

<table>

<tr>

</tr>

<tr>

</tr>

</table>

27

Making borders

To make borders to the table we use the style (border) Like that:

To make borders to the table head we use the style (border) Like

that:

28

To make borders to the table cells we use the style (border) Like

that: <td style="border:….px solid">

We can group the table , head & cell borders in the style element:

29

We will take the styles all in the CSS part - go to CSS page 101 -

the borders:

border : 2px solid red is a shortcut for :

border-size : 2px ;

border-style : solid ;

border-color : red

-Adding cells padding:

Before : After:

30

-Text align:

The table head is central by default , but you can change it :

Before: After:

The table cells data are left by default

Before : After:

- border – spacing :

to add a space between cells borders :

31

before: After:

- cells span many columns :

to make the cell span more than one column use colspan

attribute : (Ex)

(Ex)

32

- cells span many rows :

to make the cell span more than one row use rowspan attribute :

)xE(

)Ex(

33

- The Caption :

The caption is the title of the table :

- Table footer (<tfoot>):

The footer of the table can be defines with <tfoot> tag:

34

Note : the design edit will put the table in the correct order what ever

was yours

 The header

 The data

 The footer

- ColGroup:

We use colgroup to arrange columns in groups :

<col> is unclosing tag which great the groups with the span

attribute

(Ex)

)Ex(

35

Comment

The comment is an invisible text . the user can't see it only

the designer

The comment can be very useful :

 It helps the designer to arrange his html code

 It makes it easy for the new designers to understand the html

 It's very useful to write the reason for every code in the html

 Write the date , time , the project title and the designer name

To make a comment you write it inside

36

The Block & Inline tags

1- The inline elements :

that elements which are in one line :

( <img> / <span> / <a> / <table> )

2- The block elements :

that elements which cannot be in one line :

( <p> / <div> / heading elements )

37

38

Div

 The div is a box model used to write text

 The div is very useful to arrange the texts

 The tables now are mostly created by the div

 The div tag (<div>………..</div>)

 The div is a block element (not inline)

Div attributes :-

 align : to set the div position in the page

(center – right – left )

 Title : to set a tip tool only displayed when the mouse be over

the div

Div HTML styles:-

 color ( text color )

 Background-color

 Text-align

 Padding

 Margin

 Font-size

39

Links

You can create links into your page to jump into anther page

< a href="URL " > link text </a>

Note: the link doesn’t have to be a text it can be an image , div or any element

40

Link Attributes:

href: to set the url of the link

Target : to specify where to open the document

Target = " ……… "

Where the document open

_self (the default value )

In the same tab

_blank

In new tab

_top

In the full body of the window ;

_parent

In the parent frame

framename

In a named frame

Note: if you linked document is locked in a frame , you can use

target "_top " to break it out

Creating bookmark:

the bookmark is very useful if your page very long ; it takes you to

part of the page by clicking a link

41

Links colors:

by default :

the unvisited link is underlined and blue

the visited link is underlined and purple

the active link is underlined and red

We can change the default colors by CSS - go to CSS page 97

42

Ordered lists:

The ordered lists starts with <ol> tag . each item starts with <li>:

<ol>

</ol>

Lists

ordered lists unordered lists

description

lists

43

The ordered list type attribute :

defines the type of the list items maker

type

Description

"1"

The items will be numbered with numbers "default value"

"a"

The items will be numbered with the lowercase alphabet

"A"

The items will be numbered with the uppercase alphabet

"I"

The items will be numbered with the uppercase roman numbers

"i"

The items will be numbered with the lowercase roman numbers

44

Unordered lists:

The unorderd lists starts with <ul> tag . each item starts with <li>:

<ul>

</ul>

The unordered list type attribute :

type

Description

view

"disc"

Sets The items maker to bullet (the default)



square

Sets The items maker to square



circle

Sets The items maker to circle

o

none

No items maker

45

Description lists:

it's a list with terms with a description for each term

the list start with <dl> tag , each term starts with <dt> , the

term's description starts with <dd>

Nested lists : (lists inside lists)

46

Note : the list's items can be any element

Horizontal lists:

lists can be styled in many different ways by CSS

- go to CSS page 98

47

Forms

<form>

Form elements

</form>

1) The input element :

it's the most important element in the form , it has many

variations depends on the type attribute.

type attribute values :

Types

Description

Text

create normal text input

password

create password filed

Radio

Create radio button (to select one of many)

Submit

Create a submit button

Check box

Able the user to choose one or more choices or

not to choose

Button

Create a button

Reset

To restore all information in the page

File

To upload file from your PC

Image

To add an image to the form

Hidden

Invisible input but existed

48

The name attributes :

49

It's a must to use the name attribute because it helps to know what

every element refers to:

The label attribute:

you can use the label in the form like that:

The value attributes :

The value attribute is used to write a changeable default value :

50

maxlength attribute:

it used to specify the limit of the text:

The button type:

it's mostly use with JavaScript :

51

(you don’t have to understand the following example )

COMPLETE EXAMPLE

52

2) Text area:

53

It's available to control text area space with the rows &

cols attributes :

Read only attribute:

writing in the text area will not be possible:

54

3) Fieldset :

To make limits around the form:

4) The legend:

to set the fieldset title:

55

5) Select :

create select box by using the element <option>:

select attributes

 disabled : the select box is displayed

 Size : number of the visible options in the select box

 Multiple : the ability to choose more than one choice

you should use the key "Ctrl

"

56

Options attributes

Selected : specify the option as the default value

Note : the select attributes can be used in the option

element

The optgroup : to arrange options in groups

the group can be named by the "label" attribute

57

Iframe

The iframe is used to display a web page within anther web page

 The size styles can be used for iframes

 The iframe can be used as a target for a link

 By default , iframes has borders but we can remove it by CSS

 We can change color , border , size and all styles of iframe

with CSS

Using iframe as target

 When you click the link the page will open in the iframe

58

Html Entities

The entities are reserved characters in HTML

To use the entities you should use some kind of codes

Combining Diacritical Marks:

59

60

Full currency Reference

61

62

Full Arrows Reference

63

64

65

Full symbols Reference

66

67

68

69

70

71

72

73

74

75

76

77

Now You Know HTML, What's Next?

Learn CSS

CSS is used to control the style and layout of multiple Web pages all at once.

With CSS, all formatting can be removed from the HTML document and stored in a separate file.

CSS gives you total control of the layout, without messing up the document content.

To learn how to create style sheets

Learn JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site can react

to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major

browsers.

78

If you want to learn more about JavaScript.

Hosting your own Web site

Hosting your web site on your own server is always an option. Here are some points to consider:

Hardware Expenses

To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that a

low cost PC will do the job. You will also need a permanent (24 hours a day ) high-speed

connection.

Software Expenses

Remember that server-licenses often are higher than client-licenses. Also note that server-licenses

might have limits on number of users.

Labor Expenses

Don't expect low labor expenses. You have to install your own hardware and software. You also

have to deal with bugs and viruses, and keep your server constantly running in an environment

where "everything could happen".

Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option.

Most small companies store their web site on a server provided by an ISP. Here are some

advantages:

Connection Speed

Most ISPs have very fast connections to the internet.

Powerful Hardware

ISPs often have powerful web servers that can be shared by several companies. You can also expect

them to have an effective load balancing, and necessary backup servers.

Security and Stability

ISPs are specialists on web hosting. Expect their servers to have more than 99% up time, the latest

software patches, and the best virus protection.

79

Things to Consider with an ISP

24-hour support

Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you cannot fix

critical problems without having to wait until the next working day. Toll-free phone could be vital if

you don't want to pay for long distance calls.

Daily Backup

Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable data.

Traffic Volume

Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune for

unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or broadcast

video or sound, make sure that you can.

E-mail Capabilities

Make sure your ISP supports the e-mail capabilities you need.

Database Access

If you plan to use data from databases on your web site, make sure your ISP supports the database

access you need.