farahwahida mohd lrs 13 level 2 tel: 019 2562167 websites: › ›

Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites:

› http://faudzi.hyperphp.com› http://farahwahida.yolasite.com

In this course, student should be able to understand basic rules in static web design and dynamic web application development. Besides that, students are introducing with database and programming trend involve in web development.

Develop HTML document with fundamental tags

Create links in a HTML document Beautify a webpage/website Create tables in a webpage Divide a page by using frames Improvise a webpage with forms and

scripts Display website on a server

Lab 10% Quizzes 10% (several given, 2

chosen) Assgn. 10% (several given, 2

chosen) Project 10% Mterm 20% Final40%

› Total 100%

HTML› HyperText Markup Language

HTML is not an ordinary programming language because it used ‘markups’ – language that describes a document structure and content

Home Page› The first page in a website

Webpage› A single page in a website› A hypertext document within a Web site

Website› A collection of webpages to create one site of a

particular area – personal, business, blog, etc.› An entire collection of linked documents

Network› A structure linking computers together for

sharing purposes – share files, printers, etc.

Host› Users access a network through this

computer Server

› A computer that makes resources available to a network

Client› A computer or other devices that requests

services from a server Client-Server

› One of the most common structures which makes up of several clients accessing information provided by one or more servers

LAN› Local Area Network – a type of network that

connects computers within a small area, e.g. a building

WAN› Wide Area Network – covers a wider area,

e.g. several buildings or cities› Largest WAN is the Internet

Late 1960s, Internet is called ARPANET Consisted of two network nodes (hosts)

located at Univ. of Calif., Los Angeles and Stanford Univ. – connected by phone lines

Today, the Internet has grown into interconnection of mobile phones, PDAs, televisions, networks

Connections now consist of fiber optics cables, satellites, phone lines, other media

Foundations for WWW (triple W or Web) were laid in 1989 by Timothy Berners-Lee and other researchers at CERN nuclear research facility near Geneva, Switzerland

Rather than using some crazy arrays of terms, acronyms and commands, a simpler interface was created: the WWW

Method of organizing information that gives readers control over the order that information is presented

Gives quicker and simpler access to diverse pieces of information

Unlike reading a book, where a linear progression is used (reading page by page), hypertext allows a myriad of ways where readers can straight away go to where they desire

Key to hypertext is hyperlinks (links)› Allows users to jump from one document

to another Individual web page may includes the

elements of multimedia› Texts, animation, graphics, audio, video

and other programs

Web Server› This is where web pages are stored, which

made available to the network Web Browser

› A client runs this to view a Web page

Word processor› Microsoft Word, Notepad, Textpad› Save the files with .htm or .html extension

HTML editor› Various editors in the market, Adobe

Dreamweaver is a good editor

What is hypertext document What is Web server? Web Browser?

How do they work together? What is HTML? How do HTML documents differ from

documents created with a word processor such as Word or Writer?

What is a deprecated feature?

Plan out a Web page before coding May use a story board

› May just draw or create a sample using a word processor

Identify the document’s different elements› Distinct objects in the document

Paragraph, heading, page title, etc.› Formatting

Bold, italics, underline, etc.

Core building block of HTML is a tag› Marks each element in a document› Two-sided or one-sided

Two-sided tag› Syntax:

<element>content</element> <element> is called the opening tag </element> is called the closing tag

One-sided tag› Syntax:

<element /> Look carefully, one-sided tag HAS NO

CONTENT!!!

Use to add notes to HTML code Not required, but a good practice to give

‘documentation’ to the code Will NOT be displayed by the web browser Syntax:

› <!--- comment --> Can be spread over several lines

› <!--- I am putting thislike this becauseI want to show the comment tag -->

HTML does NOT care about white spaces – blank spaces, tabs, line breaks, within the file

It ignores all white spaces and treat them as a single space

Many tags contain attributes that control the behavior and appearance of an element

Insert the attributes within the tag brackets Syntax:

› <element attribute1=“value1” attribute2=“value2” … /> for one-sided tag

› <element attribute1=“value1” attribute2=“value2” …>content</element> for two-sided tag

Attribute1, attribute2, etc. are the names

Value1, value2, etc. are the values associated with the names

The fundamental element of HTML is to open up the HTML and close it› <html>› </html>

The HTML document is divided into two sections:› The head› The body

The head element contains information about the document, mainly the› Title› Keywords that a search engine on the Web

might use to identify this document for users

The body element contains all contents to be displayed by the Web browser

So, you have:<html><head>

<title>the title</title></head><body>all the contents of the body is here</body></html>

<html><head>

<title>Mr. Faudzi’s Web Design Class</title></head><body></body>

</html>

Contains content displayed in a separate section within the page, setting it off from other blocks› Paragraphs and headings are examples of

block-level elements Inline element

› Part of the same block as its surrounding content Individual words or phrases within a

paragraph

HTML supports six heading elements, numbered h1 through h6› h1 heading is the largest› h6 heading is the smallest

Syntax› <hy>content</hy> where y is a number

either 1, 2, 3, 4, 5 or 6

Style specifies the attributes in a tag Styles can be inline Inline styles describes the appearance of

an element Syntax:

› <element style=“style1:value1; style2:value2; style3:value3 …”>content</element>

You will learn more on styles as the course progresses

Modifies the alignment of the element Syntax:

› <element style=“text-align:align;”>content</element> where align can be left, right, center or justify

Example:› <h1 style=“text-align:center;”>Web

Design Class</h1>

Insert a paragraph using:› <p>content</p>

When the browser sees the <p> tag, it starts a new line with a blank space above it, separating the new paragraph from the one before

To create a new line without having any blank spaces above it

Syntax:› <br />› Sakirin = Class Rep : 0176446925› Facebook : kirin selama perak