HTTP & Websites. Web Browsers. Web Servers vs. Web sites. World Wide Web. Internet Explorer. Surfing the World Wide Web. Part 4. The World Wide Web

Transcription

1 HTTP & Websites Web Browsers Part 4 Surfing the World Wide Web World Wide Web Web Servers vs. Web sites The World Wide Web massive collection of websites on the Internet they link to each other and form a "web" this is why domains usually begin with "www" Internet vs. World Wide Web the Internet is the world wide network the World Wide Web is all the websites on it Are web servers the same as websites? not always server can store many sites one site may cover several servers Example: stored on multiple file servers 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Web Browsers Internet Explorer Web Browser specialized application that display webpages looks up domains uses HTTP to send messages to a Server Some popular Web Browsers Microsoft Internet Explorer Apple Safari Mozilla Firefox Google Chrome Created by Microsoft Integrated with the Windows first integrated in Windows 98 very controversial at the time Version 9 had a completely new interface Replaced by "Edge" same application with a new name 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

2 Mozilla Firefox Google Chrome For Windows & Macintosh More secure than IE Interesting features anti-phishing technology built-in spell checker! Updates often! Download: Created by the Google Corporation Very minimalist graphical user interface Growing in popularity mostly at the expense of Internet Explorer Download from 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Opera Apple Safari Created by Opera Software Popular on smart phones The browser used on the Nintendo Wii and DS Download from Created by the Apple Corporation Integrated with Mac-OS X only browser in the latest version previous versions other browsers Available for Windows and Mac Download from 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer What are Cookies? Cookies A small text file saved on your computer created by a web server only visible to the site that created them managed by your web browser You don't have to accept cookies Delicious Little Annoyances VISITOR_INFO1_LIVEqG-fp9Y6T34youtube.com/ *GPS1youtub e.com/ * 6/13/2018 Sacramento State - Cook - CSc 8 - Summer

3 Threat of Cookies Threat of Cookies Any web server that you request data from can create (bake) a cookie Webpages can grab data from multiple servers this can included servers related to the site but are often servers that embed advertisements e.g. banners, pictures, etc... cookies can originate from any of these sources Ad-servers often support multiple webpages By saving data in cookies... ad-servers sites can track your page habits this cannot damage our computer Not dangerous like Spyware although this is a form of spying you do not suffer the effects of spyware only your browsing habits can be watched 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer What is a Webpage? Webpage Basics Creating a Webpage A webpage is, essentially, a text file Contains markup information special codes that indicate formatting example: bold, font, color Hypertext text that "linked" to other text or documents example: web page links 6/13/2018 Sacramento State - Cook - CSc 8 - Summer Webpages vs. Websites HTML A webpage a visible page you see in your browser contains words, pictures, etc... A website is a collection of related webpages for example, the CSc 8 website Hypertext Markup Language text is marked with tags tags are delimited with < and > tags usually have a start and end - not always HTTP communications protocol application layer based on data used by browsers when requesting specific pages 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

4 Tags Tags In HTML, tags give markup information This includes adding formatting (bold, italics) as well as more complex structures like tables The format of tags is very simple to master Tags have two variants those that encapsulate other tags, text, etc those that insert or add an item into the text 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Tags - Encapsulate Tags - Encapsulate Many tags turn a feature "on" Basically, they affect everything between the start and end tags Start tags are denoted as <...> End tags are denoted as </...> <tag> </tag> <tag> </tag> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Tags - Insert Tags - Insert The other type of tag simple inserts or adds something to the webpage They don't have an end tag (obviously) After the tag name, a single slash is used to denote that no end tag will be present Think of it as a head tag merged with an end tag <tag/> <tag/> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

5 HTML Spacing Rules How Would This be Displayed? Browsers ignore formatting in HTML areas containing more than two spaces line breaks tabs In both cases, a single space is used This makes it easy to write HTML trust me Hello World! New line Blank space This is a test. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer The new lines become single spaces! Some Formatting Tags Hello World! This is a test. Tag <br/> <p> </p> Effect Break (new line) Paragraph 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Example Example Output Hello <br/> World!<br/> <br/> This is a test. Hello World! This is a test. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

6 The Paragraph Tag Example The paragraph tag is very common in modern HTML It denotes the start and end of a paragraph <p> </p> <p>hello World!</p> <p>this is a test</p> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer The Bold Tag The Italics Tag This tag is used to denote text that will be displayed in bold Very useful for making text "stand out" The tag must be ended This tag is used to denote text that will be displayed in italics The tag must be ended <b> </b> <i> </i> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer The Underline Tag Basic Formatting Tags Summary This tag denotes text to be underlined Many browsers underline links so, only underline when it is necessary... or you'll confuse users The tag must be ended <u> </u> Tag <b> </b> <i> </i> <u> </u> Effect Bold Italics Underline 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

7 Example Example Output <i>italics</i><br/> <b>bold</b><br/> <u>underlined</u><br/> Italics Bold Underlined <i> </i> <b> </b> <u> </u> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Example Example Output <i><b>csc 8</b></i> <br/> <b><i>csc 8</i></b> CSc 8 CSc 8 The same 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer The <CENTER> Tag Tag Attributes The center tag denotes text that will be centered on the screen. The tag must be ended Adds additional information to tags most tags have lots of attributes too many to cover in class! Notation attribute is placed between the tag's name and ending ">" very similar to a programming assignment statement <center> </center> <tag attribute = value> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

8 The <FONT> Tag <FONT> Example The font tag lets you change: the font color the font face (name) the font size Attributes are used in each case <font> </font> <font color = "red"> This text is red! </font> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <FONT> Example Output Header Tags This text is red! Tag <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> Effect Main heading 2 nd heading 3 rd heading 4 th heading 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Header Tag Example Header Tag Example Output <h1>universities</h1> <h2>united States</h2> <h3>california</h3> <h4>sacramento State</h4> Universities United States California Sacramento State 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

9 Basic Structure of a Webpage Page Structure HyperText Markup Language All pages contain an <html> tag the first tag must be <html> the last tag must be </html> Between these two tags, you define the webpage's header the webpage's body 6/13/2018 Sacramento State - Cook - CSc 8 - Summer Basic Structure of a Webpage Main Webpage Structure Tags Header tells the title of the page contains scripts, style sheets and other add-ins its optional, but good to define Body visible content of the page this is the vast majority of the HTML Tag <html> </html> <head> </head> <title> </title> <body> </body> Section Main tag Header Page Title Page Body 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <html> <head> <title>hello Class!</title> </head> <body> <h1>hello World!</h1> </body> </html> Resulting Page Title Body 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

10 Image Overview Adding Images HyperText Markup Language All images are linked from the webpage Only a few types of images are supported You must use these types on your website 6/13/2018 Sacramento State - Cook - CSc 8 - Summer Supported Image Files The <IMG> Tag Extension.jpg What is it? Photograph Inserts an image into a webpage The src attribute is used to link the source image This tag has no ending tag.gif.png Graphic Interchange File Portable Network Graphic <img src = "link"/> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <IMG> Example <IMG> Example Output <img src="cat.jpg"/> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

11 <IMG> Example 2 <IMG> Example 2 Output <center> <img src="cat.jpg"/><br/> Fraternity of Mu Mu Mu </center> Fraternity of Mu Mu Mu 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Some Advanced <IMG> Attributes Some Advanced <IMG> Attributes Width and Height allows you to increase the size of the image either by percentage or pixel size Alt stands for "alternate" used for mouse-over text Align allows the image to "float" on the page quite easy to use possible values: right, left Border allows you to add a solid border looks good on photos 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <IMG> Example 3 <IMG> Example 3 Output <center> <img src="cat.jpg" width="100%"/> <img src="cat.jpg" width="200%"/> </center> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

12 <html> <head> <title>adorable Cat</title> </head> <body> <center> <img src="cat.jpg"/><br/> <i><b>the Adorable Cat</b></i> </center> </body> </html> Adding Lists HyperText Markup Language List Tags <UL> Example Tag <ol> </ol> <ul> </ul> <li> </li> Effect Ordered List Unordered List List Item <ul> <li>peter</li> <li>quagmire</li> <li>joe</li> <li>cleveland</li> </ul> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <UL> Example Output <OL> Example Peter Quagmire Joe Cleveland <ol> <li>tappa Kegga Bru</li> <li>kuppa Kappa Chino</li> <li>getta Loda Yu</li> </ol> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

13 <OL> Example Output 1. Tappa Kegga Bru 2. Kuppa Kappa Chino 3. Getta Loda Yu HTML Tables HyperText Markup Language 6/13/2018 Sacramento State - Cook - CSc 8 - Summer Building HTML Tables Table Tags Tag Meaning Tables allow you to organize data into rows and columns Many websites use tables for visual effects <table> </table> <tr> </tr> <td> </td> Start / End Table Row Table Cell 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer <TABLE> Example <TABLE> Example 2 <table> <tr> <td>computer</td> <td>generation</td> </tr> </table> <table width=80% bgcolor="lightblue"> <tr> <td>name</td> <td>major</td> </tr> <tr> <td>joe Gunchy</td> <td>csc</td> </tr> </table> Row 1 Row 2 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

14 <TABLE> Example 2 Output Name Joe Gunchy Major CSc Website Links HyperText Markup Language 6/13/2018 Sacramento State - Cook - CSc 8 - Summer Link to New Page Types of <A> Links Links to pages use the <A> tag "A" stands for anchor yes, it doesn't make much sense The href attribute contains the hypertext reference links to another website or webpage External links links to pages outside of the website typically start with Internal links links to other pages on the same site tend to simply contain the name of the file 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Types of <A> Links Internal Link Example Bookmark links jumps to a location within same page The URL contains a # sign Also called intrapage links links Opens an application Starts with mailto: and then the address <a href = "resume.htm"> My Resume </a> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer

15 Internal Link Example Output External Link Example My Resume This is a link: <a href=" CSUS </a> HTTP 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer External Link Example Output Link Example This is a link: CSUS Questions? Please <a href="mailto:dcook@csus.edu"> </a> mailto: me. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer /13/2018 Sacramento State - Cook - CSc 8 - Summer Link Example Output Questions? Please me. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer