CNIT 132 Intermediate HTML and CSS

Course Overview

Agenda

• My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).

• Computer Background (Computer Basics, Network Architecture, Client/Server, Web Browser, Web Server, LAN, WAN).

• Internet (History, Technologies, World Wide Web, How does it work?).

• Course Topics.• HTML, CSS References.

Computer Basics

Laptop computer Desktop PC

Server

Flat screen

PrinterScanner

Keyboard

A Single Computer

Tower box

Flat screen

Scanner

Printer

Tape drive

CD burner

Keyboard Mouse

Network Architecture• Client/Server Architecture (two-tier architecture): each

computer on the network is either a client or a server (some computers can be both client and server but not at the same time).– Dedicated Servers: such as file servers (managing disk drives),

print servers (managing printers), network servers (managing network traffic).

– A client is defined as a requester of services.– A server is defined as the provider of services.

• Peer-to-peer Architecture (P2P): each computer on the network has equivalent capabilities and responsibilities.

Client/Server

File/DB Server

Desktop PC

Workstation Laptop computer

Print Server

Floppy drive

Tape drive

Database

Printer

Printer

Printer

CD burner

Scanner

Network

Local Area Network (LAN)

• A Local Area Network (LAN) is a group of computers and devices that share a common communications line or wireless link and typically share the resources of a server within a small geographic area (for example, within an office building).

Wide Area Network (WAN)

• A Wide Area Network (WAN) is a computer network covering a wide geographical area, involving a lot more computers. This is different from Local Area Network (LAN) that is usually limited to a room, building or campus. The most well-known example of a WAN is the Internet.

• WANs are used to connect Local Area Networks (LANs) together.

History of Internet

• In the late 1950s, the US government formed the Advanced Research Projects Agency (ARPA).

• During the 1960s, the agency created a decentralized computer network known as ARPAnet.

• This network linked four computers located at the UCLA, Stanford Research Institute, the UC Santa Barbara, and the University of Utah.

New Technologies

• Packet switching (communication still function even if some nodes would be destroyed by a nuclear attack).

• Email was implemented in 1972• Telnet Protocol for logging on to remote computers• File Transfer Protocol (FTP)• In 1989, Tim Berners-Lee and his colleagues at the European

particle physics laboratory CERN proposed the concept of linking documents with hypertext. (World Wide Web)

• In 1993, the introduction of Mosaic, the first graphical web browser (Netscape Navigator)

The World Wide Web

• The WWW operates using a client/server networking principle.

• When you enter the URL (the web address) of a web page into your browser and click “Go”.

• You ask the browser (client) to make an HTTP request to the particular computer having that address.

• That computer (server) returns the required page to you in a form that your browser can interpret and display.

How does Internet work?

http://www.mywebpage.com/index.html

• The browser broke the URL (Uniform Resource Locator) into three parts:– The protocol (“http”)– The server name (‘WWW.mywebpage.com”)– The file name (“index.htm”)

• The browser communicated with a name server to translate the server name www.mywebpage.com into an IP address, which it uses to connect to the server machine.

• The browser then formed a connection to the server at that IP address on port 80.• Following the HTTP protocol, the browser sent a GET request to the server, asking for

the file http://www.mywebpage.com/index.htm (cookies may be sent from browser to server with the GET request)

• The server then sent the HTML text for the web page to the browser (cookies may also be sent from server to browser in the header for the page)

• The browser read the HTML tags and formatted the page onto your screen.

The Internet• The Internet is a gigantic collection of millions of computers, all

linked together on a computer network. • A home computer may be linked to the internet using a phone-line

modem, DSL or cable modem that talks to an Internet service provider (ISP).

• A computer in a business or university will usually have a network interface card (NIC) that directly connects it to a local area network (LAN) inside the business.

• The business can then connect its LAN to an ISP using a high-speed phone line such as a T1 line.

• ISPs then connect to larger ISPs, and the largest ISPs maintain fiber-optic “backbones” for an entire nation or region.

• Backbones around the world are connected through fiber-optic lines, undersea cables or satellite links.

The Internet

The Internet

The Internet

A map of domain name ownership at street level for downtown San Francisco

The Web Server

• The Web server is not simply “looking up a file”.• It is actually processing information and generating a

page based on the specifics of the query. • Dynamic web pages are generated by software such

as CGI (Common Gateway Interface) scripts.• Web server

– Microsoft IIS (Internet Information Services)– Apache

The Browser

• There are different web browsers in the market.

• Mozilla – Firefox for Windows & Linux• Microsoft - Internet Explorer for Windows • Netscape for Windows• Opera for mobile phones• Safari for Apple

What is?• Web Pages: contain HTML coding.• Web Site: a collection of web pages.• Web servers: Program that interpret HTTP requests and deliver the appropriate web page to your

browser.• Server-Side Programming: Programs that run on the server computer.• Web Browsers: Program on the client computer that use to interpret and display web pages.• Client-Side Programming: Programs that run on the client side.• DNS (Domain Name Service): Convert Domain name into IP address.• HTTP Requests: transmit from browser to server with method information (GET/POST) to request a

web page.• HTTP Responses: return from server to browser with status codes (200 – ok, 204 – no content, 401 –

not authorized, 403 – forbidden, 404 – not found, etc…)• HTML Forms: web page contain fields where you can enter information. (<form></form>, <input />,

<select></select>, <option></option>, etc…)• GET and POST Requests:

– GET: encodes the message it sends into a query string, which is appended to the URL .– POST: sends its message in the message body of the request. (data is encoded and sent via an

HTTP request).

Course Overview• Design and Deploy Web Sites

– HTML• Introduction to web development• How to code, test, and validate a web page• How to use HTML to structure a web page

– CSS• How to use CSS to format the elements of a web page• How to use CSS box model for spacing, borders and backgrounds• How to use CSS for page layout

– Design and Deploy• How to design a web site• How to deploy a web site on a web server

• HTML and CSS Skills– How to work with Lists and Links– How to work with images– How to work with tables– How to work with forms– How to add audio and video to your web site– What is DHTML

Course Overview (continue…)

• Javascript and jQuery– How to use JavaScript to enhance your web pages– How to use jQuery to enhance your web pages– How to use jQuery mobile to build mobile web sites

• Common Gateway Interface (CGI)– How to write server side scripting language Perl– How to write server side scripting language PHP, ksh

HTML References• HTML5 reference http://www.w3schools.com/html/html5_intro.asp• CSS3 reference http://www.w3schools.com/css3/default.asp• Favicon generator: http://favicon-generator.org/

– http://tools.dynamicdrive.com/favicon/– http://www.favicon.cc/– http://favicon.htmlkit.com/favicon/