 Farahwahida Mohd  LRS 13 Level 2  Tel:  Websites: › ›

 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%  Quizzes10% (several given, 2 chosen)  Assgn.10% (several given, 2 chosen)  Project10%  Mterm20%  Final40% › Total100%

 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 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:  content  is called the opening tag  is called the closing tag  One-sided tag › Syntax:   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: ›  Can be spread over several lines › <!--- I am putting this like this because I 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: › for one-sided tag › content 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 ›  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: the title all the contents of the body is here

Mr. Faudzi’s Web Design Class

 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 › content 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: › content  You will learn more on styles as the course progresses

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

 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

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