ESUPAK Web Development Class Overview

By Fasiha Ashraf
Three Days a week Class Mon, Wed, Thu
Class Timing: 06:30pm to 08:00pm
We will cover HTML, XHTML, JavaScript, PHP

and Hands on Practice on Dreamweaver.
Wed class will be for the lab work. Hands on

practice of the assignments in specified tools.
ESUPAK, Web Development
Contents
Getting Started..
What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
What the following term mean:

Web server: a system on the internet containg one or
more web site
Web site: a collection of one or more web pages
Web pages: single disk file with a single file name
Home pages: first page in website
Think about the followings before working

your Web pages.
Think about the sort of information(content) you want
to put on the Web.
Set the goals for the Web site.
Organize your content into main topics.
Come up with a general structure for pages and
topics.
What is HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text document.
Tags are ;
surrounded with angle brackets like this
<B> or <I>.
Most tags come in pairs

exceptions: <P>, <br>, <li> tags
The first tag turns the action on, and the second turns it
off.
The second tag(off switch) starts with a forward slash.

For example ,<B> text </B>
can embedded, for instance, to do this:

<HEAD><TITLE> Your text </HEAD></TITLE> it won't work.
The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
not case sensitivity.

Many tags have attributes.
For example, <P ALIGN=CENTER> centers the paragraph following it.
Some browsers don't support the some tags and some

attributes.
Basic HTML Document Format
<head>
<title>Our First Web
Page</title>
</head>
See what it
looks like:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
How to Create and View an HTML document?

1.Use a text editor such as Notepad to write the
document.
2.Save the file as filename .html on a PC. This is called
the Document Source.
3.Open Internet Explorer(or any browser) Off-Line
4.Switch to Internet Explorer
5.Click on File, Open File and select the filename.html

document that you just created.
6.Your HTML page should now appear just like any
other Web page in browser.
7.You may now switch back and forth between the

Source and the HTML Document
switch to Notepad with the Document Source
make changes
save the document again
switch back to browser
click on RELOAD and view the new HTML Document
switch to Notepad with the Document Source......
Tags in head
<HEAD>...</HEAD>--
contains information about the
document
<TITLE>...</TITLE>-- puts text on the browser's title
bar.
10
Tags in Body
Let's
talk Text
Heading: <H1> </H1>

Center:<Center> </Center>
Line Break <P> ,<Br>
Phrase Markups: <I></I> ,<B></B>
Create
a List
Unordered list : <UL><li>

Ordered list: <OL><li>
Nested
11
Add
Images
Use <IMG SRC=imagefilename> tags

How to specify Relative pathnames
Attributes of IMG tag
-width,height
-Alt
-Align
-<Img src=pic.jpg width=50 height=50 align=right
alt=My image>
12
Add
some Link
Use <a href=filename|URL></a>tags

Kinds of URLs
-http://www.uet.edu.pk
- ftp://ftp.foo.com/home/foo
- gopher://gopher.myhost.com/
- news://news.cnn.net
- mailto:abc@uet.edu.pk
13
How
to make colors changes?
Hexadecimal number :
Color names : <Font color=white>
Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66

VLINK=#66ffff>
Spot color
<FONT COLOR=#66ffcc>My First Web Page</FONT>
Image Background
<BODY BACKGROUND=Pic1.jpg >
14

The current HTML document is my.html & the current directory is html1
C:\- Iam -my.html
-your.html
Type this ; <A href=your.html>Your link </A>
C:\- Iam -my.html
Child -your.html
Type this ; <A href=html1/your.html>Your link </A>
C:\- Iam -my.html
Sister -your.html
Type this ; <A href=../html2/your.html>Your link </A>
C:\- Mother -your.html
Iam -my.html
Type this ; <A href=../your.html>Your link </A>
Back
Go to
15
The HTML document is my.html and the image file is pic2.jpg

C:\- html1 -my.html
Type this ;
<IMG SRC=pic2.jpg>
-dragonfly.gif
C:\- html1-my.html
<IMG SRC=Image/pic2.jpg>
Image
-dragonfly.gif
Type this ;
C:\- html1-my.html
<IMG SRC=../Image/pic.2jpg>
Image
-dragonfly.gif
Type this ;
C Image -dragonfly.gif
<IMG SRC=../dragonfly.gif>
html1
-my.html
Type this ;
16

ESUPAK Web Development Class Overview

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ESUPAK Web Development Class Overview

Transféré par

Droits d'auteur :

Formats disponibles

By Fasiha Ashraf

Three Days a week Class Mon, Wed, Thu

Class Timing: 06:30pm to 08:00pm

We will cover HTML, XHTML, JavaScript, PHP

Wed class will be for the lab work. Hands on

ESUPAK, Web Development

How to create and View an HTML document?

Basic HTML Document Format

The HTML Basic tags

ESUPAK, Web Development

What the following term mean:

Think about the followings before working

Most tags come in pairs

ESUPAK, Web Development

The second tag(off switch) starts with a forward slash.

can embedded, for instance, to do this:

not case sensitivity.

For example, <P ALIGN=CENTER> centers the paragraph following it.

Some browsers don't support the some tags and some

ESUPAK, Web Development

Basic HTML Document Format

ESUPAK, Web Development

How to Create and View an HTML document?

5.Click on File, Open File and select the filename.html

ESUPAK, Web Development

7.You may now switch back and forth between the

ESUPAK, Web Development

contains information about the

ESUPAK, Web Development

Heading: <H1> </H1>

Unordered list : <UL><li>

ESUPAK, Web Development

Use <IMG SRC=imagefilename> tags

ESUPAK, Web Development

Use <a href=filename|URL></a>tags

ESUPAK, Web Development

to make colors changes?

Changing Text color

<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66

<BODY BACKGROUND=Pic1.jpg >

ESUPAK, Web Development

How to specify Relative pathnames

How to specify Relative pathnames

The HTML document is my.html and the image file is pic2.jpg

ESUPAK, Web Development

Vous aimerez peut-être aussi