1 / 21

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

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.

lutherk
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

  9. Files on the Web sgazziano@johncabot.edu

  10. sgazziano@johncabot.edu

  11. Web server and web browser are different sgazziano@johncabot.edu

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

  13. Test solution sgazziano@johncabot.edu

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

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

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

  17. sgazziano@johncabot.edu

  18. sgazziano@johncabot.edu

  19. sgazziano@johncabot.edu

  20. sgazziano@johncabot.edu

  21. sgazziano@johncabot.edu

More Related