1 / 46

Web Page Design/Development

Web Page Design/Development. David A. Lash 630.979.5940 dlash@condor.depaul.edu Week 1 - Introduction. David Lash. Introduction. What this course is about: Creating, designing, publishing web pages Web design basics with HTML: Controlling text formatting

zandra
Télécharger la présentation

Web Page Design/Development

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. Web Page Design/Development David A. Lash 630.979.5940 dlash@condor.depaul.edu Week 1 - Introduction David Lash

  2. Introduction • What this course is about: • Creating, designing, publishing web pages • Web design basics with HTML: • Controlling text formatting • Controlling fonts & adding color • Creating links • Tables and frames • Scripting • Client side scripting • Server side scripting • Course web site (with syllabus links) http://condor.depaul.edu/~dlash/extra/Webpage/index.html

  3. Today’s Agenda • What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

  4. What is the Internet? • The Federal Networking Council (FNC) agrees "Internet" refers to the global information system that • is logically linked together by a globally unique address space based on the Internet Protocol (IP) • supports communications using the Transmission Control Protocol/Internet Protocol (TCP/IP) suite or its subsequent extensions/follow-ons, and/or other IP-compatible protocols; and • provides, uses or makes accessible, either publicly or privately, high level services layered on the communications and related infrastructure described herein. All systems on Internet share a common addressing method (called IP addresses) For Example 135.14.12.22. E.g., condor.depaul.edu is really 140.192.1.6. Try http://140.192.1.6/~dlash/ TCP/IP protocol is the standard protocol for moving Internet data! Services such as web pages, email, chat, bulletin boards

  5. The Amazing Journey of Internet Data - (Steps to access a distant web page (e.g, www.ibm.com)) 1. You sit down at your PC, say in Chicago Il and type in a web address (e.g., www.ibm.com) 2. You are connected to ISP via via modem, DSL or corporate network. Original diagram can be found at: http://navigators.com/internet_architecture.html

  6. The Amazing Journey of Internet Data – (Getting to your ISP). 3. Your “request” may travel over a variety of transmission methods (depending how you are set up). There may be a set of telephone switches (or cable network) between you and your ISP’s physical location. 4. Your ISP has a set of incoming lines to receive all calls to provide access. Your ISP likely has a local email server (to receive and hold your email) and maybe even a Web Server machine (to allow you tp publish pages)

  7. The Amazing Journey of Internet Data – (Getting to your ISP). 5. Since your web page “request” is on a distant web server, your request goes over the Internet backbone. The remote host probably plugs in via his/her ISP POP over here (just like your access does). 6. The Web Page your access might be physically stored on this machine. Since the backbone is world wide might be on the other side of the world. “Content” is stored on the hosting machine. Might be video, audio, web page content. More information on how the Internet works? http://www22.verizon.com/about/community/learningcenter/articles/displayarticle1/0,1727,1024z3,00.html

  8. Resolving Web Addresses • When type in address at top of browser, you provide a logical Universal Resource Locator (URL) address. • The URL maps to a specific web server address and file to access on that web server http://www.depaul.edu/~dlash/mystuff.html Get the file mystuff.html View pages under dlash user id. The protocol to use to send the data. The http or hypertext transfer protocol is most common for WWW pages. Domain name that maps to the address of a specific computer (or set or computers).

  9. More Web Address Examples

  10. A Greatly Simplified view (of access a web page on a web server). A web server is a computer on the network that holds files (often for more than 1 user). It listens for http file requests (on the internet) and responds to them.

  11. How Pages Move Between Browser and Webserver Client Machine Web Server 1. Check Cache 2. 3. 1. Check the browser disk area (known as cache) to see if file has been recently viewed. 2. If file not in browser then translate the URL to a physical web (IP) address and request file from Web Server. 3. Transfer file from Web Server back to client machine.

  12. How Pages Move Between Browser and Webserver – (The bottom line) • If you visits a page now and revisit in 15 minutes (or even tomorrow) your page might be coming from cache (and not be the “freshest” content). • E.g., visit http://webwizard.awl.com/~phppgm/index.php note how the counter (on bottom) does not change if you hit refresh. • Two ways to ensure getting content from web server and not from cache • Hold down the “shift” button and then hit refresh (or reload) • Delete all the caches file from browser cache. • From IE goto tools->temporary internet files ->Delete files • From Netscape Edit->preferences->Advanced->Cache->Clear Cache

  13. Introduction • What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

  14. Ok So What Is HTML? • Up until the late 1980s, people used Internet for email, send/received data and bulletin board services. • Was not an easy way to advertise and access documents and data at a site. • Tim Berners-Lee created a simple language for display documents and links • Wrote a tool (early browser) for displaying the language • This language called HyperText Markup Language (HTML). • HTML grew quickly especially with the development of the Mosiac web browser • Mosiac eventually became Netscape and was available for free download. • HTML eventually became standardized and is now controlled by the world wide web consortium (http://www.w3.org)

  15. What Really Is HTML? • HyperText Markup Language - Basically a set of TAGS that you add to your text • HTML tells browsers how to display and format your text • For example, <FONT COLOR=BLUE> Hello </FONT> <B> This Would be Bold </B> But not this. HTML tags are enclosed in <>. For almost all tags there is a start and ending tag. • Why is it used so extensively? • It is simple to use and understand • It provides ways to include lots of stuff (e.g., text, graphics, sounds, links) • It is the STANDARD • Its creation is one of the big reasons the WWW became popular.

  16. HTML? Why Not Just Use … • Front-page or Dreamweaver or Composer or … • “HTML-editors” basically generate HTML • Sometimes also generate javascript, and flash and a few other things. • There main advantages are that they provide a WYSIWYG (What You See Is What You Get) display. • Learn the tool and you still don’t understand how pages are displayed or how WWW works • Usually web authors still need to dip into the HTML to get precise design, or to get something to work • Learn HTML and you can figure out these tools.

  17. OK So What Is This HTML? • HTML is based using tags. HTML tags • Are Enclosed in <> • (e.g., <font>, <b>, <img src=121> ) • Usually have a start and end tag (e.g., <b> hello </b> world • Are case insensitive, so the following are the same <b> My </b> country <i> tis </I> of thee <B> My </b> country <i> tis </i> of thee <B> My </B> country <I> tis </I> of thee Makes hello bold but world is not

  18. HTML Overview - II • A set of TAGs are required of all documents <HTML> ... </HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> • Store in a file with either htm or html suffix • E.g., mypage.html or mypage.htm or homepage.html Starts and ends your entire HTML document Defines the “header” section for your HTML document Defines the main body section for your HTML document WARNING: DO NOT USE SPACES IN FILENAMES!!!! For example DO NOT call your file “my page.html”. It might work on a PC but will NOT work on UNIX Web Server. WARNING2: Be careful with capitals. Try to use all lower case. For example “mypage.html” NOT MyPage.html.

  19. HTML Overview - Example The header section of document <html> <head> <title> Mypage </title> </head> <body> Welcome to Website Design. Stuff you write here becomes your HTML document. </body> </html> Indicates start and end of HTML document This title appears in the upper left hand corner of browser. Not in the body of the document Inside the <body> … </body> tags is the main portion of your document. Try it now. Copy this text to note pad, save the file and then display the file in IE or Netscape. Note how new lines are ignored when you display the HTML document.

  20. Steps To Create HTML Document & Display 1. From your PC goto Start->run enter notepad 2. Enter your tags and document 3. From notepad window, goto file->saveas 4. Enter a filename with HTML suffix (SECOND WARNING!! No spaces or caps please!). 5. Start Netscape (or IE). 6. From Netscape, goto file->open page -> choose file. (Find the file you just saved and display it!)

  21. But how do I publish that? 1.Get an account on a webserver. • Do that today, ask lab administrator for an email account. Will create space on students.depaul.edu 2. Create an html file locally on PC. (See previous steps) • Test out your file locally. Make sure it displays right locally. 3. Copy your file from your PC to the Web server • We will use FTP (See next slide). 4. View your file over the Internet. • E.g., If your file was myfile.html and userid jsmith Then you would access using the following web address: http://students.depaul.edu/~jsmith/myfile.html A tilde ‘~’ followed by your user id (email handle) The file name you copied over. Web server name

  22. Publishing On The Web • Use FTP to copy files from your PC to the Web server Note: There are other ways to get your pages on a web server. Many developers telnet directly into the web server and develop there.

  23. Publishing On The Web - II • Place the copied files into the public_html directory Your pages must be in this directory (or you won’t see them on the Internet)!

  24. Publishing On The Web - III • Destination Directory - put file in public_html • Homepage - must be calledindex.html • WebServer - students.depaul.edu • Space Available - 2 MB • Your URL - students.depaul.edu/~yourlogin • Use FTP - Copy using FTP.

  25. Steps To Publish Files From DePaul Lab 1. Start->Internet Applications->FTP • (Start->programs->depaul online->ftp from at home with DePaul Online) 2. Fill in: • Host Name: students.depaul.edu • User Id: your DePaul userid • Password: your DePaul password 3. From FTP window goto window->tile horizontally 4. Double click public_html on WEBSERVER side (One side is PC files the other is remote system (or web server) 5. On PC side find the file you want to publish (by clicking through files/directories) 6. Drag the file(s) from PC side to Web server side! (Select and hold right mouse button to drag.)

  26. Starting up FTP Enter your webserver name: students.depaul.edu Enter your web server userid: dlash Enter your web server password: apb73a1ks Click OK when your done • 1. Start->Internet Applications->FTP • (Start->programs->depaul online->ftp from at home with DePaul Online) • 2. Fill in: • Host Name: students.depaul.edu • User Id: your DePaul userid • Password: your DePaul password

  27. How to tell if your connected? On this screen I entered the wrong password. Note error message here and that this side is blank. Successful connection! Note the status here and the PC files are here and Web server files are here.

  28. More on FTP Main Screen. Current directory on Web server Current directory on PC PC Files and directories Web server Files and directories

  29. Navigating FTP Note the different directory name Navigate to location of file on PC and highlight the file you want to copy Navigate to public_html directory (by double clicking folder name). Note the new folder location. IT IS VITAL THAT YOU COPY TO public_html

  30. Copy The File SECOND WARNING: Again make sure you are in public_html directory on web server You can click “date” to sort by date and then file you transferred should appear at the top. ANOTHER WARNING LOOK AT THE FILE NAME. MAKE SURE NO CAPITALS OR SPACES Highlight file and then hit the -> button to copy from PC side to Web server side

  31. WARNING! FTP Timeout after 2-3 mins Unfortunately, if you don’t use the FTP screen for about 2-3 minutes, your connection will timeout If you get this you must click connect or close and then resign in again.

  32. Outline • What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

  33. We already saw ... The header section of document <HTML> <HEAD> <TITLE>Mypage </TITLE> </HEAD> <BODY> Welcome to Website Design </BODY> </HTML> Indicates start and end of HTML document Appears in upper left hand corner of browser window This is where most of TAGS usually are and text your displaying (w/i BODY tags).

  34. HTML Only Responds To Tags • Blank spaces without tags are ignored: <HTML> <HEAD> <TITLE> Formatting a WWW Page </TITLE> </HEAD> <BODY> Welcome To Exploring The Internet Hopefully you will find this course to be informative and interesting. I hope that you have fun while learning about the Internet. <HR> But the class does have some work to do. </BODY> </HTML> http://condor.depaul.edu/~dlash/extra/Webpage/examples/02HTMLsimp2.html These spaces are ignored.

  35. HTML Only Responds To Tags The Tag <!--- ---> is used to indicate comment: <HTML> <!-- ! Example of a Basic HTML Program ! Written by Dave Lash For Web Page Design ! To demonstrate the use of comments. --><HEAD> <TITLE> THIS is a sample web Page </TITLE> </HEAD> <BODY> Welcome To Exploring The Internet </BODY> </HTML> http://www.depaul.edu/~dlash/extra/Webpage/examples/02HTMLSimpWComments.html These comments are ignored.

  36. Paragraph and Break Tags Two of the most basic tags are: <P> …… </P> -- Causes a new paragraph<br> …… <br /> -- Causes a line break <hr> …… <hr /> -- Draws a solid horizontal line Actually you can get away without ending these tags. The browsers know what you mean.

  37. Paragraph and Break Tags Creates a line <HTML><HEAD><TITLE> Web Page With "P" Tag</TITLE> </HEAD> <BODY> Welcome To Exploring The Internet <HR> Hopefully you will find this course interesting. <P> In this course, you will develop a broad knowledge of the Internet </P><P> This class meets at night. </P><P> CLASS 1 - Introduction To The Internet <BR> CLASS 2 - Email <BR> CLASS 3 - HTML<BR> </BODY></HTML> Create a new paragraph Line Break Note > 1 tag per line http://condor.depaul.edu/~dlash/extra/Webpage/examples/02HTMLSimpWComments.html

  38. Using Arguments with Tags Many tags also have optional arguments: : • <P > ……… </P> -- Causes a new paragraph • align=center|right|left • aligns the text to the center, right or left.E.g., <P align=left> • <hr> …….. <hr /> --- Draws a solid horizontal line • align=center|left|right - sets horizontal alignment • noshade - Display as a solid (noshaded) bar • size=number - thickness of rule in pixels • width=number or % - Length of rule in pixels or % of screen. • E.g., <HR noshade size=12 width=50%>

  39. Paragraph and Break Tags <HTML><HEAD><TITLE> Web Page With "P" Tag </TITLE> </HEAD> <BODY> Welcome To Exploring The Internet <HR> Hopefully you will find this course interesting. <P align=left> In this course, you will develop a broad knowledge of the internet </P><P align=right> This class meets at night. <P align=center> CLASS 1 - Introduction To The Internet <BR clear=right> CLASS 2 - Email <HR noshade width=30% size=10> <HR width=30% size=10 align=left> <HR size=12 WIDTH=155 align=right> CLASS 3 - HTML </BODY></HTML> Create a left justified paragraph Center it Solid HR that’s 30% of screen & 10 pixels http://condor.depaul.edu/~dlash/extra/Webpage/examples/02paraparmeter.html

  40. Paragraph and Break Tags Headers are used to create section titles - not the <title> tag <H1> ……… </H1> -- First Level Header<H2> ……. </H2> -- Second Level <H3> …….. </H3> --- Third Level <H4> …….. </H4> --- Fourth Level <H5> …….. </H5> --- Fifth Level

  41. Header Example <HTML><HEAD><TITLE> THIS is a sample web Page </TITLE> </HEAD> <BODY> <H1> INTRODUCTION </H1> Welcome To Website Design. Hopefully you will find this course to be informative and interesting.<H1> Overview </H1>In this course, you will develop a broad knowledge of the Internet technology. <H1> Meeting Times </H1> The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare) <H2> Dates and Times </H2><H3>CLASS 1</H3> Introduction To The Internet <H3>CLASS 2</H3>Email<H3>CLASS 3 </H3> HTML</BODY></HTML> H1 is the largest header. It will cause line break and be large and bold H2 and H3 will be smaller http://condor.depaul.edu/~dlash/extra/Webpage/examples/02headers.html

  42. Header Error Example <HTML><HEAD> <TITLE> THIS is a sample web Page </TITLE></HEAD><BODY> <H1> INTRODUCTION </H1>Welcome To Exploring The InternetHopefully you will find this course to be informative and interesting. I hope that you have fun while learning about the Internet. <P><H1> Overview </H1> In this course, you will develop a broad knowledge of the Internet technology and understand how it can be useful to work personal and work life. <P> <H1> Meeting Times </H1> The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare) <!-- Opps I forgot to close off the H2 tag! --> <H2> Dates and Times <P>CLASS 1 - Introduction To The Internet<BR> CLASS 2 - Email <BR>CLASS 3 - HTML </BODY></HTML> Accidentally left off the </H2> tag http://condor.depaul.edu/~dlash/extra/Webpage/examples/02headererror.html

  43. Introduction • What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

  44. Using HTML Validator Lite Advantages: 1. Can use to validate HTML code and determine errors 2. Can obtain HTML validator lite (for free) at: http://www.download.com (enter validator in the search box.) - Have a screen with 2 major parts: - Top part works like notepad - Bottom part shows HTML errors when you do a tools->validate. How to start: - From lab goto start->Internet Applications->SNL

  45. HTML Validator Lite Use tools-> validate to show html errors File->open to open documents Use tags for quick insert of tags File save and undo works like notepad or word Alphabetic index of HTML tags Your errors are shown here are the bottom

  46. Summary What we talked about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document (FTP) 3. Understanding basics of HTML document 4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”

More Related