Introduction to Web Design: Building Blocks and Tools for Creating a Web Page

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

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

sgazziano@johncabot.edu

Introduction to Web Design: Building Blocks and Tools for Creating a Web Page