Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .
-
Upload
denis-palmer -
Category
Documents
-
view
224 -
download
0
Transcript of Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .
![Page 1: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/1.jpg)
![Page 2: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/2.jpg)
Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites:
› http://faudzi.hyperphp.com› http://farahwahida.yolasite.com
![Page 3: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/3.jpg)
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.
![Page 4: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/4.jpg)
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
![Page 5: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/5.jpg)
Lab 10% Quizzes 10% (several given, 2
chosen) Assgn. 10% (several given, 2
chosen) Project 10% Mterm 20% Final40%
› Total 100%
![Page 6: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/6.jpg)
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
![Page 7: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/7.jpg)
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
![Page 8: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/8.jpg)
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
![Page 9: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/9.jpg)
WAN› Wide Area Network – covers a wider area,
e.g. several buildings or cities› Largest WAN is the Internet
![Page 10: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/10.jpg)
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
![Page 11: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/11.jpg)
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
![Page 12: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/12.jpg)
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
![Page 13: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/13.jpg)
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
![Page 14: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/14.jpg)
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
![Page 15: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/15.jpg)
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
![Page 16: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/16.jpg)
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?
![Page 17: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/17.jpg)
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.
![Page 18: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/18.jpg)
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!!!
![Page 19: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/19.jpg)
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 -->
![Page 20: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/20.jpg)
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
![Page 21: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/21.jpg)
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
![Page 22: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/22.jpg)
Attribute1, attribute2, etc. are the names
Value1, value2, etc. are the values associated with the names
![Page 23: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/23.jpg)
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
![Page 24: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/24.jpg)
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
![Page 25: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/25.jpg)
So, you have:<html><head>
<title>the title</title></head><body>all the contents of the body is here</body></html>
![Page 26: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/26.jpg)
<html><head>
<title>Mr. Faudzi’s Web Design Class</title></head><body></body>
</html>
![Page 27: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/27.jpg)
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
![Page 28: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/28.jpg)
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
![Page 29: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/29.jpg)
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
![Page 30: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/30.jpg)
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>
![Page 31: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/31.jpg)
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
![Page 32: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/32.jpg)
To create a new line without having any blank spaces above it
Syntax:› <br />› Sakirin = Class Rep : 0176446925› Facebook : kirin selama perak
![Page 33: Farahwahida Mohd LRS 13 Level 2 Tel: 019 2562167 Websites: › › .](https://reader030.fdocuments.us/reader030/viewer/2022033104/56649ec05503460f94bcb5fe/html5/thumbnails/33.jpg)