1 essential html coding by fadi safieddine (week 2)

1

Essential HTML coding

By Fadi Safieddine

(Week 2)

2

Lecture ContentImportance of knowing about HTMLDefining HTMLCreating HTML page

Creating title.Create paragraphs and texts.Creating hyper links Inserting backgroundInserting images and changing attributesChanging text attributes.

• Color• Type • size

3

Importance of knowing about HTML!

While some may argue rightly that with 4th generation Web programming tools, why do we need to learn HTML?

For editing reasons.To be able to read other people’s work.To be able to incorporate scripts to your HTML page (not always supported by packages).

4

What is HTML

What is HTML?Stands for Hyper Text Markup Language.

It is not a programming language such as Java, C, Pascal, or Basic. It is based on tags and attributes that would allow a browser such as ‘Netscape’ or ‘Internet Explorer’ to render a document on a computer screen.

• Tag: …

You don’t need a package to write HTML. All you need is a word document or ‘Notepad’ and save your document as (.html)

5

What is HTMLTo start an HTML document:

Open the ‘Notepad’ from your PC (Click ‘Start’, go to ‘Programs’, then ‘Accessories’, then click on ‘Notepad’)We are going to start our HTML with the first tag: <HTML> and we would end our page with </HTML>. An HTML page has two main sections:

• Heading• Body

So far it is an empty HTML page, next we start building our HTML page step by step.

6

What is HTML

Within the <HTML> tags, we want to insert a tag to create a heading on the browser and a welcoming statement.

For heading title the tags are <HEAD> <TITLE> …….</TITLE> </HEAD>

For example if you write:<HEAD>

<TITLE> My first HTML page, 2003 </TITLE>

</HEAD>

The result would be:

7

What is HTML

8

What is HTML

9

What is HTML

So far, our HTML page doesn’t have a body!

To start typing your text, you start the body tag : <BODY> ….</BODY>

Within the body, you would specify paragraphs, background, images, fonts, font style..etc using tags again.

Say we want to welcome people to our first ever HTML page.

10

What is HTML

11

What is HTMLThere are many tags to remember as we start learning how to create pages in HTML. For instance:

<H1>…</H1> for header level 1 (you can also create headers levels from 1 –6)… for underling a text.… for italic text.… for bold text.… a new Paragraph

Lets see how all these tags can be used for our first page.

13

What is HTML

Creating a hyperlink in HTML:HTML uses the <A>…</A> tag for Anchors (for links)

However this tag has an attribute to create the link. This attribute is HREF.

So to create a yahoo.com link on HTML page:

• < A HREF = http://www.yahoo.com>…. </A>

• In the empty dots you would write whatever text you find fit. For instance if we want people to ‘Click here’ to connect to yahoo

15

What is HTML

Creating a hyperlink in HTML:Using the hyperlink <A> tag we can also create email link.

Say you want people to be able to contact you from the Website.

<A HREF = mailto:[email protected]> My email address </A>

mailto:[email protected]

17

What is HTMLNext we will check how to place a background to the Web page and a picture.The background is part of the attribute of <BODY> tag. This attribute is called BACKGROUND! <BODY BACKGROUND = “background3.jpg”>….<BODY>Remember to put the picture in the same directory for it to connect to the page.

19

What is HTMLInserting a picture is bit challenging. Images are inserted using tag <IMG> …</IMG> and this tag has few interesting attributes:

SRC (Source) stating where the picture is located. SRC = “Fadi2.jpg”

BORDER creating a border for image. BORDER = “1”

HEIGHT & WIDTH used to state the high and width, if you want to state fixed size for image. The size is done in pixels. HEIGHT = “200” WIDTH = “200”

ALT for attribute. It is the text the shows up when mouse is over the picture. ALT = “Fadi image”.

21

What is HTMLFinally we will check how to change color of text, type of text, and size of text.Changing the font is part of the attribute of tag. This attributes are called:

COLOR = “red”SIZE = “+1”FACE = “Arial”.

….

23

Next week

Advance elements of HTML programming.

Tutorials:Review of HTML Coding.

Class exercise.

Practical:Creating a Web page with Notepad.

1 essential html coding by fadi safieddine (week 2)

Documents