2.  Farahwahida Mohd  LRS 13 Level 2  Tel: 019 2562167  Websites: › http://faudzi.hyperphp.com http://faudzi.hyperphp.com › http://farahwahida.yolasite.com http://

3.  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.

4.  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

5.  Lab 10%  Quizzes10% (several given, 2 chosen)  Assgn.10% (several given, 2 chosen)  Project10%  Mterm20%  Final40% › Total100%

6.  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

7.  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

8.  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

9.  WAN › Wide Area Network – covers a wider area, e.g. several buildings or cities › Largest WAN is the Internet

10.  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

11.  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

12.  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

13.  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

14.  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

15.  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

16.  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?

17.  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 elements › Distinct objects in the document  Paragraph, heading, page title, etc. › Formatting  Bold, italics, underline, etc.

18.  Core building block of HTML is a tag › Marks each element in a document › Two-sided or one-sided  Two-sided tag › Syntax:  content  is called the opening tag  is called the closing tag  One-sided tag › Syntax:   Look carefully, one-sided tag HAS NO CONTENT!!!

19.  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: ›  Can be spread over several lines › <!--- I am putting this like this because I want to show the comment tag -->

20.  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

21.  Many tags contain attributes that control the behavior and appearance of an element  Insert the attributes within the tag brackets  Syntax: › for one-sided tag › content for two-sided tag

22.  Attribute1, attribute2, etc. are the names  Value1, value2, etc. are the values associated with the names

23.  The fundamental element of HTML is to open up the HTML and close it ›  The HTML document is divided into two sections: › The head › The body

24.  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

25.  So, you have: the title all the contents of the body is here

26. Mr. Faudzi’s Web Design Class

27.  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

28.  HTML supports six heading elements, numbered h1 through h6 › h1 heading is the largest › h6 heading is the smallest  Syntax › content where y is a number either 1, 2, 3, 4, 5 or 6

29.  Style specifies the attributes in a tag  Styles can be inline  Inline styles describes the appearance of an element  Syntax: › content  You will learn more on styles as the course progresses

30.  Modifies the alignment of the element  Syntax: › content where align can be left, right, center or justify  Example: › Web Design Class

31.  Insert a paragraph using: › content  When the browser sees the tag, it starts a new line with a blank space above it, separating the new paragraph from the one before

32.  To create a new line without having any blank spaces above it  Syntax: › › Sakirin = Class Rep : 0176446925 › Facebook : kirin selama perak