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: www.hotmail.com stored on multiple file servers 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 3 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 4 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 2018 5 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 6 1
Mozilla Firefox Google Chrome For Windows & Macintosh More secure than IE Interesting features anti-phishing technology built-in spell checker! Updates often! Download: www.getfirefox.com Created by the Google Corporation Very minimalist graphical user interface Growing in popularity mostly at the expense of Internet Explorer Download from www.google.com/chrome 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 7 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 8 Opera Apple Safari Created by Opera Software Popular on smart phones The browser used on the Nintendo Wii and DS Download from www.opera.com 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 www.apple.com/safari/download/ 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 9 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 10 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/10241 80928793630469034241067711330420051*GPS1youtub e.com/102414217689630448024366788843930448019* 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 12 2
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 2018 13 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 14 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 2018 16 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 2018 17 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 18 3
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 2018 19 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 20 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 2018 21 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 22 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 2018 23 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 24 4
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 2018 25 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 26 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 2018 27 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 28 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 2018 29 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 30 5
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 2018 31 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 32 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 2018 33 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 34 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 2018 35 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 36 6
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 2018 37 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 38 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 2018 39 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 40 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 2018 41 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 42 7
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 2018 43 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 44 <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 2018 45 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 46 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 2018 47 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 48 8
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 2018 50 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 2018 51 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 52 <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 2018 53 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 54 9
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 2018 56 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 2018 57 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 58 <IMG> Example <IMG> Example Output <img src="cat.jpg"/> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 59 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 60 10
<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 2018 61 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 62 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 2018 63 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 64 <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 2018 65 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 66 11
<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 2018 69 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 70 <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 2018 71 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 72 12
<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 2018 73 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 2018 75 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 76 <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 2018 77 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 78 13
<TABLE> Example 2 Output Name Joe Gunchy Major CSc Website Links HyperText Markup Language 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 79 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 http:// 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 2018 81 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 82 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 E-Mail links Opens an e-mail application Starts with mailto: and then the e-mail address <a href = "resume.htm"> My Resume </a> 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 83 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 84 14
Internal Link Example Output External Link Example My Resume This is a link: <a href="http://www.csus.edu"> CSUS </a> HTTP 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 85 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 86 External Link Example Output E-Mail Link Example This is a link: CSUS Questions? Please <a href="mailto:dcook@csus.edu"> e-mail </a> mailto: me. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 87 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 88 E-Mail Link Example Output Questions? Please e-mail me. 6/13/2018 Sacramento State - Cook - CSc 8 - Summer 2018 89 15