210 likes | 222 Views
Learn the history and essential standards of the World Wide Web, how servers and browsers work, and the basics of web design. Explore HTML writing standards, CSS, and tools for web design.
E N D
CS 101 Sect 6 – the World Wide Web Introduction: history and essential standards of the World Wide Web. How the Web works: servers and browsers. Web building primer. What is hypertext, a basic web page. Introduction to Web design: how to create a web site to express ideas graphically, writing for the web. Tools for Web design: Web editors, HTML Editors, Web publishing. Building blocks of a web page, adding colours, images, links and tables, HTML writing standards and CSS. References online: the W3C tutorial and other reference material. sgazziano@johncabot.edu
Your first Web page Just follow me, do not worry if you do not understand Open notepad Copy the text from the following slide sgazziano@johncabot.edu
Text for your first web page <html> <head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the Head First Lounge</h1> <p> Join us any evening for refreshing elixirs, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring your own web server). </p> <h2>Directions</h2> <p> You’ll find us right in the center of downtown Webville. Come join us! </p> </body> </html> sgazziano@johncabot.edu
Your first Web page Saveon your desktop as myname1.html (“myname” is supposed to be “your” name, e.g. In my case that would be gazziano1.html, ok ??) Double click on the file you saved There is your first web page sgazziano@johncabot.edu
You’re closer to learning HTML than you think Surprise: class test now Take a look at the “tags” (the statements within <>) and see if you can guess what they tell the browser about the content 10 minutes to complete sgazziano@johncabot.edu
Text for your second web page <html> <head> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the Head First Lounge</h1> <imgsrc=”drinks.gif”> ((WHAT?? WHERE IS THIS??)) (ASK THE TEACHER) <p> Join us any evening for refreshing elixirs, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring your own web server). </p> <h2>Directions</h2> <p> You’ll find us right in the center of downtown Webville. Come join us! </p> </body> </html> sgazziano@johncabot.edu
The Internet Sometimes called simply “the Net,” the Internet is a worldwide system of computer networks—a network of networks hence Internet, in which users at any one computer can get information from any other computer The Internet uses a portion of the total resources of the currently existing public telecommunication networks. Technically, what distinguishes the Internet is its use of a set of protocols called TCP/IP (Transmission Control Protocol/Internet Protocol). sgazziano@johncabot.edu
The World Wide Web Runs on the Internet, Intranet, Extranet Uses the Hypertext Protocol (HTTP) We just call it the Internet, but it is a subset of it sgazziano@johncabot.edu
Files on the Web sgazziano@johncabot.edu
Web server and web browser are different sgazziano@johncabot.edu
The W3school , world’s largest website for developers is a fundamental source of references and training. They set the Web standards !!! Intranet / Internet tools for CS 130 sgazziano@johncabot.edu
Test solution sgazziano@johncabot.edu
Now for some serious stuff From now on we will use an HTML editor Let us open our index and mission file with it Follow my instructions Find Coffee Cup Html Editor on your pc sgazziano@johncabot.edu
Find the LOUNGE folder with files on MYJCU shared files Download the files in your X:/CS130/LOUNGE/ Folder Open HTM editor and load all .html Next stage: rebuild a better LOUNGE sgazziano@johncabot.edu
Find the LOUNGE folder with files on MYJCU shared files Download the files in your X:/CS130/LOUNGE/ Folder Open HTM editor and load all .html sgazziano@johncabot.edu