CNIT 132 Intermediate HTML and CSS

1. CNIT 132 Intermediate HTML and CSS Course Overview

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

3. Computer Basics

4. A Single Computer

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

6. Client/Server

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

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

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

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

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

12. How does Internet work?

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

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

15. The Internet

16. The Internet

17. The Internet

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

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

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

21. 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).

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

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

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