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