Computer Science 1 Week 9. This Week... Writing web pages Writing web pages text formatting images lists & tables Lab 7 Lab 7 World Wide Web World

Computer Science 1Week 9

This Week ...This Week ...

• Writing web pagesWriting web pages text formattingtext formatting imagesimages lists & tableslists & tables

• Lab 7Lab 7• World Wide WebWorld Wide Web• Project #2 AssignedProject #2 Assigned

WebpageWebpageBasicsBasics

Creating a WebpageCreating a Webpage

What is a Webpage?What is a Webpage?

• A webpage is, essentially, a text fileA webpage is, essentially, a text file• Contains Contains markupmarkup information information

special codes that indicate formattingspecial codes that indicate formatting example: bold, font, colorexample: bold, font, color

• HypertextHypertext text that "linked" to other text or documentstext that "linked" to other text or documents example: web page linksexample: web page links

Webpages vs. Webpages vs. WebsitesWebsites

• A webpageA webpage a visible page you see in your browsera visible page you see in your browser contains words, pictures, etc...contains words, pictures, etc...

• A websiteA website is a collection of related webpagesis a collection of related webpages for example, the CSc 1 websitefor example, the CSc 1 website

HTMLHTML

• HHyperyperttext ext MMarkup arkup LLanguageanguage text is “marked” with tagstext is “marked” with tags tags are delimited with tags are delimited with << and and >> tags usually have a start and end - not alwaystags usually have a start and end - not always

• HTTPHTTP communications protocol communications protocol application layer – based on dataapplication layer – based on data used by browsers when requesting specific pagesused by browsers when requesting specific pages

TagsTags

• Start tags are denoted as Start tags are denoted as <...><...>• End tags are denoted as End tags are denoted as </...></...>• Usually ...Usually ...

a start tag must have a matching end taga start tag must have a matching end tag not in all cases, though - some tags "insert" stuffnot in all cases, though - some tags "insert" stuff

<tag> … </tag>

Tag AttributesTag Attributes

• Adds additional information to tags Adds additional information to tags most tags have lots of attributesmost tags have lots of attributes too many to cover in class!too many to cover in class!

• NotationNotation placed between the tag's name and the "placed between the tag's name and the ">>" symbol" symbol very similar to a QBasic-like assignment statementvery similar to a QBasic-like assignment statement

<tag attribute = value>

HTML Spacing RulesHTML Spacing Rules

• Browsers ignore formatting in HTMLBrowsers ignore formatting in HTML areas containing more than two spacesareas containing more than two spaces line breaksline breaks tabstabs

• In both cases, a In both cases, a single spacesingle space is used is used• This makes it easy to write HTMLThis makes it easy to write HTML

Hello

World!

This is a test.

How Would This be How Would This be Displayed?Displayed?

New line

Blank space

Hello World! This is a test.

The new lines become The new lines become single spaces!single spaces!

Some Paragraph TagsSome Paragraph Tags

Tag Effect

<br> Break (new line)

<p> New paragraph

Hello <br>

World!<br>

<br>

This is a test.

ExampleExample

Hello

World!

This is a test.

Example OutputExample Output

Hello <br>

World!

<p>This is a test.

Example 2Example 2

The The <B><B> Tag Tag

• This tag is used to denote text that will This tag is used to denote text that will be displayed in be displayed in boldbold

• Very useful for making text "stand out"Very useful for making text "stand out"• The tag must be endedThe tag must be ended

<b> … </b>

The The <I><I> Tag Tag

• This tag is used to denote text that will This tag is used to denote text that will be displayed in be displayed in italicsitalics

• The tag must be endedThe tag must be ended

<i> … </i>

The The <U><U> Tag Tag

• This tag denotes text to be This tag denotes text to be underlinedunderlined• Many browsers underline linksMany browsers underline links

so, only underline when it is necessaryso, only underline when it is necessary ... or you'll confuse users... or you'll confuse users


<u> … </u>

Basic Formatting Basic Formatting Tags SummaryTags Summary

Tag Effect

<b> … </b> Bold

<i> … </i> Italics

<u> … </u> Underline

<i>Italics</i><br>

<b>Bold</b><br>

<u>Underlined</u><br>

ExampleExample

Italics

Bold

Underlined

Example OutputExample Output

<i> … </i>

<b> … </b>

<u> … </u>

<i><b>CSc 1</b></i>

<br>

<b><i>CSc 1</i></b>

Example 2Example 2

CSc 1

CSc 1

Example 2 Example 2 OutputOutput

The same

The The <CENTER><CENTER> Tag Tag

• The center tag denotes text that will be The center tag denotes text that will be centered on the screen.centered on the screen.


<center> … </center>

The The <FONT><FONT> Tag Tag

• The font tag lets you change:The font tag lets you change: the font colorthe font color the font face (name)the font face (name) the font sizethe font size

• Attributes are used in each caseAttributes are used in each case

<font> … </font>

<font color = "red">

This text is red!

</font>

<FONT><FONT> Example Example

This text is red!

<FONT><FONT> Example ExampleOutputOutput

Header TagsHeader Tags

Tag Effect

<h1> … </h1> Main heading

<h2> … </h2> 2nd heading

<h3> … </h3> 3rd heading

<h4> … </h4> 4th heading

<h1>Universities</h1>

<h2>United States</h2>

<h3>California</h3>

<h4>Sacramento State</h4>

Header Tag ExampleHeader Tag Example

UniversitiesUnited StatesCaliforniaSacramento State

Header Tag ExampleHeader Tag ExampleOutputOutput

Page StructurePage Structure

HyperText Markup LanguageHyperText Markup Language

Basic Structure of a Basic Structure of a WebpageWebpage

• All pages contain an All pages contain an <html><html> tag tag the first tag must be the first tag must be <html><html> the last tag must be the last tag must be </html></html>

• Between these two tags, you defineBetween these two tags, you define the webpage's headerthe webpage's header the webpage's bodythe webpage's body

Basic Structure of a Basic Structure of a WebpageWebpage

• HeaderHeader tells the title of the pagetells the title of the page contains scripts, style sheets and other add-inscontains scripts, style sheets and other add-ins It’s optional, but good to defineIt’s optional, but good to define

• BodyBody visible content of the pagevisible content of the page this is the vast majority of the HTML this is the vast majority of the HTML

Main Webpage Main Webpage Structure TagsStructure Tags

Tag Section

<html> … </html> Main tag

<head> … </head> Header

<title> … </title> Page Title

<body> … </body> Page Body

<html>

<head>

<title>Hello Class!</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Resulting PageResulting Page

TitleTitle

BodyBody

Website Links Website Links


Link to New PageLink to New Page

• Links to pages use the Links to pages use the <A><A> tag tag "A" stands for "A" stands for aanchornchor

• The The hrefhref attribute attribute contains the contains the hhypertext ypertext refreferenceerence links to another website or webpagelinks to another website or webpage

Types of <A> LinksTypes of <A> Links

• ExternalExternal links links links to pages outside of the websitelinks to pages outside of the website typically start with typically start with http://http://

• InternalInternal links links links to other pages on the same sitelinks to other pages on the same site tend to simply contain the name of the filetend to simply contain the name of the file

<a href = "resume.htm">

My Resume

</a>

Internal Link ExampleInternal Link Example

My Resume

Internal Link ExampleInternal Link ExampleOutputOutput

This is a link:

<a href = "http://www.csus.edu">

CSUS

</a>

External Link ExampleExternal Link Example

HTTPHTTP

This is a link: CSUS

External Link ExampleExternal Link ExampleOutputOutput

Types of <A> LinksTypes of <A> Links

• BookmarkBookmark links links jumps to a location within same pagejumps to a location within same page The URL contains a # signThe URL contains a # sign Also called intrapage linksAlso called intrapage links

• E-MailE-Mail links links Opens an e-mail applicationOpens an e-mail application Starts with Starts with mailtomailto:: and then the e-mail address and then the e-mail address

Questions? Please

<a href="mailto:[email protected]">

e-mail

</a>

me.

E-Mail Link ExampleE-Mail Link Example

mailto:mailto:

Questions? Please e-mail me.

E-Mail Link ExampleE-Mail Link ExampleOutputOutput

AddingAddingImagesImages


Image OverviewImage Overview

• Images are linked from webpagesImages are linked from webpages• Only a few types of images are Only a few types of images are

supportedsupported• You must use these types on your You must use these types on your

websitewebsite

Supported Image Supported Image FilesFiles

Extension What is it?

.jpg Photograph

.gif Graphic Interchange File

.png Portable Network Graphic

The The <IMG><IMG> Tag Tag

• Inserts an image into a webpageInserts an image into a webpage• The The srcsrc attribute is used to link the attribute is used to link the

sourcesource image image• This tag has This tag has nono ending tag ending tag

<img src = "link">

<img src="cat.jpg">

<IMG><IMG> Example Example

<IMG><IMG> Example Example OutputOutput

<center>

<img src="cat.jpg"><br>

Fraternity of Mu Mu Mu

</center>

<IMG><IMG> Example 2 Example 2

<IMG><IMG> Example 2 Example 2 OutputOutput

Fraternity of Mu Mu Mu

Some Advanced Some Advanced <IMG><IMG> Attributes Attributes

• Width and HeightWidth and Height allows you to increase the size of the imageallows you to increase the size of the image either by percentage or pixel sizeeither by percentage or pixel size

• AltAlt stands for "alternate"stands for "alternate" used for mouse-over text used for mouse-over text

Some Advanced Some Advanced <IMG><IMG> Attributes Attributes

• AlignAlign allows the image to "float" on the pageallows the image to "float" on the page quite easy to usequite easy to use possible values: right, leftpossible values: right, left

• BorderBorder allows you to add a solid border allows you to add a solid border looks good on photoslooks good on photos

<center>

<img src="cat.jpg" width="100%">

<img src="cat.jpg" width="200%">

</center>

<IMG><IMG> Example Example

<IMG><IMG> Example Example OutputOutput

<html>

<head>

<title>Adorable Cat</title>

</head>

<body>

<center>

<img src="cat.jpg"><br>

<i><b>The Adorable Cat</b></i>

</center>

</body>

</html>

Webpage LabWebpage Lab

This Week's LabThis Week's Lab

Remember ...Remember ...

• Turn your HTML file in toTurn your HTML file in to Lab 7 in SacCTLab 7 in SacCT

• If you don't do your own work... If you don't do your own work... you will you will notnot get credit! get credit!

Lab SummaryLab Summary

• You will create a simple webpageYou will create a simple webpage show some basic information on the screenshow some basic information on the screen you can add a title, but you're not required toyou can add a title, but you're not required to

• Logically indent your HTMLLogically indent your HTML it makes it easy to write and readit makes it easy to write and read

You Will Need These You Will Need These TagsTags

<html> <body>

<br> <i>

<h1> <b>

<center> <img>

Web BrowsersWeb Browsers

Surfing the World Wide WebSurfing the World Wide Web

World Wide WebWorld Wide Web

• The World Wide WebThe World Wide Web massive collection of websites on the Internetmassive collection of websites on the Internet they link to each other and form a "web"they link to each other and form a "web" this is why domains usually begin with "www"this is why domains usually begin with "www"

• Internet Internet vs.vs. World Wide Web World Wide Web the Internet is the world wide the Internet is the world wide networknetwork the World Wide Web is all the websites on itthe World Wide Web is all the websites on it

Web Servers vs. Web Servers vs. Web sitesWeb sites

• Are Are web serversweb servers the same as the same as websiteswebsites?? not alwaysnot always server can store many sitesserver can store many sites one site may cover several serversone site may cover several servers

• Example:Example: www.hotmail.com – stored on multiple file serverswww.hotmail.com – stored on multiple file servers

Web BrowsersWeb Browsers

• Web Browser Web Browser specialized application that displays a webpagespecialized application that displays a webpage looks up domainslooks up domains uses uses HTTPHTTP to send messages to a Web Server to send messages to a Web Server

• Some popular Web BrowsersSome popular Web Browsers Microsoft Internet ExplorerMicrosoft Internet Explorer Apple Safari – for Mac-OS users Apple Safari – for Mac-OS users Mozilla FirefoxMozilla Firefox

Internet ExplorerInternet Explorer

• Created by MicrosoftCreated by Microsoft• Integrated with the Windows Integrated with the Windows

first integrated in Windows 98first integrated in Windows 98 still part of the operating systemstill part of the operating system

• Version 7Version 7 completely new interfacecompletely new interface adds some anti-phishing technologyadds some anti-phishing technology

Apple SafariApple Safari

• Created by the Apple Created by the Apple CorporationCorporation

• Integrated with Mac-OS XIntegrated with Mac-OS X only browser in the latest versiononly browser in the latest version previous versions included other previous versions included other

browsersbrowsers

Mozilla FirefoxMozilla Firefox

• For Windows & MacintoshFor Windows & Macintosh• Most popular browser: Most popular browser: 42.8%42.8%

considered more secure than IEconsidered more secure than IE preferred by computer professionalspreferred by computer professionals

• Interesting featuresInteresting features anti-phishing technologyanti-phishing technology built-in spell checker!built-in spell checker!

• Download: Download: www.GetFireFox.comwww.GetFireFox.com

Other BrowsersOther Browsers

• There are even moreThere are even more• Some other browsersSome other browsers

NetscapeNetscape Opera (Opera (Opera Software, mobile phonesOpera Software, mobile phones)) Google ChromeGoogle Chrome

Browsers Market Share Browsers Market Share January 2011 January 2011

http://www.w3schools.com/browsers/browsers_stats.asphttp://www.w3schools.com/browsers/browsers_stats.asp

InternetInternetProtocolsProtocols

Common Application Layer ProtocolsCommon Application Layer Protocols

Internet ProtocolsInternet Protocols

Application Layer

Transport Layer

Network Layer

Data link Layer

Physical Layer

InternetInternetTCP / IPTCP / IP

Any DataAny Data

Hypertext Transfer Protocol: Hypertext Transfer Protocol: Application-layer protocolApplication-layer protocol

• Used to transfer webpagesUsed to transfer webpages each page item is requested each page item is requested separatelyseparately example: images are loaded at different timesexample: images are loaded at different times

• HTTP is a HTTP is a stateless protocolstateless protocol one request and response per sessionone request and response per session login information & state data are not storedlogin information & state data are not stored cookiescookies are used to store this information are used to store this information

Some Common HTTP Some Common HTTP CodesCodes

Code Meaning

200 Okay – everything worked

301 Moved Permanently

302 Currently not available

404 Not found – resource does not exist

500 Server Error

File Transfer ProtocolFile Transfer Protocol Application-layer protocolApplication-layer protocol

• FFile ile TTransfer ransfer PProtocol (FTP)rotocol (FTP) used to copy files over a networkused to copy files over a network can copy files can copy files toto and and fromfrom another another

computercomputer• SecuritySecurity

requires you to log into a siterequires you to log into a site prevents unauthorized accessprevents unauthorized access

E-Mail ProtocolsE-Mail Protocols Application-layer protocolApplication-layer protocol

• SMTP SMTP SSimple imple MMail ail TTransfer ransfer PProtocolrotocol used to send e-mailused to send e-mail like dropping a letter in a mailboxlike dropping a letter in a mailbox

• POPPOP PPost ost OOffice ffice PProtocol rotocol used to retrieve e-mailused to retrieve e-mail like picking up a letter from the post officelike picking up a letter from the post office

WebsiteWebsiteProjectProject

Create Your Own Website Create Your Own Website

OverviewOverview

• You will create a websiteYou will create a website• ... and put it on the Internet... and put it on the Internet

using your SacLink Accountusing your SacLink Account this will give you basic this will give you basic

knowledge on creating websitesknowledge on creating websites

A Few Ground RulesA Few Ground Rules

• Write the HTML yourselfWrite the HTML yourself use a text editoruse a text editor do do notnot use a generator use a generator logically indent the codelogically indent the code

• Try not to have spelling errorsTry not to have spelling errors• Do not post any improper contentDo not post any improper content

Due DateDue Date• Due in Due in threethree (3)(3) weeks weeks

See handout for due daySee handout for due day Points will be deducted beyond Points will be deducted beyond

due daydue day No submission will be accepted No submission will be accepted

after two-day grace periodafter two-day grace period

• DemonstrationDemonstration You must demonstrate your You must demonstrate your

websitewebsite

Requirement:Requirement:Webpage TitleWebpage Title

• Have a title with your name appearing Have a title with your name appearing in the browser's title barin the browser's title bar

• The exact text is up to youThe exact text is up to you make it serious or funny – your choicemake it serious or funny – your choice but it must include your namebut it must include your name

Requirement:Requirement:Add spacingAdd spacing

• Use the break and paragraph tags Use the break and paragraph tags • Make the page easy to readMake the page easy to read

the easier it is to read, the more attractive the easier it is to read, the more attractive your pages will beyour pages will be

Requirement:Requirement:FormattingFormatting

• Use at least three sizes of text Use at least three sizes of text you can use the header tagsyou can use the header tags ... or the font tag – more fun!... or the font tag – more fun!

• Use the bold and italic tags Use the bold and italic tags it doesn't matter where you use themit doesn't matter where you use them

Requirement:Requirement:Lists & TablesLists & Tables

• Create a second local web pageCreate a second local web page• ListList

can contain anything that interests youcan contain anything that interests you e.g. favorite books, goals, places to travele.g. favorite books, goals, places to travel

• TableTable at least three rows and two columnsat least three rows and two columns list your computer skills or other factslist your computer skills or other facts

Requirement:Requirement:ImagesImages

• Find Find at leastat least two images two images use the Internet or from other sourcesuse the Internet or from other sources upload the files to your SacLink accountupload the files to your SacLink account do do notnot "hot link" (leech) the pictures "hot link" (leech) the pictures

• Display them in your pageDisplay them in your page use the image taguse the image tag you can use the align attributeyou can use the align attribute

Finding ImagesFinding Images

• Scan picturesScan pictures• Search for free graphicsSearch for free graphics• DownloadDownload

right click with the mouse &right click with the mouse &select “Save Image As…”select “Save Image As…”

you can change name but you can change name but notnot the extension the extension• Consider copyright issuesConsider copyright issues

Requirement:Requirement:LinksLinks

• At leastAt least three external links three external links one must be to the CSc 1 website:one must be to the CSc 1 website:

http://gaia.ecs.csus.edu/~zhangd/csc1/csc1.htmhttp://gaia.ecs.csus.edu/~zhangd/csc1/csc1.htm the other two are up to youthe other two are up to you

• E-Mail LinkE-Mail Link use your e-mail addressuse your e-mail address it can be any e-mail you prefer – not just Saclinkit can be any e-mail you prefer – not just Saclink

• Internal LinkInternal Link link to the a second pagelink to the a second page

SacLinkSacLink

• Your SacLink account Your SacLink account provides with a small amount of provides with a small amount of

storage for a websitestorage for a website Anyone in the World can see itAnyone in the World can see it Main page: Main page: webpages.csus.eduwebpages.csus.edu

• You must use your SacLink You must use your SacLink account for this assignmentaccount for this assignment

Steps RequiredSteps Required

1.1. Enable SacLink Web PageEnable SacLink Web Page

2.2. Create Create index.htmlindex.html in any text editor in any text editor

3.3. Test the files locallyTest the files locally

4.4. Upload the files using FTPUpload the files using FTP

5.5. Test the file on Web serverTest the file on Web server

Preparing your Preparing your SacLink AccountSacLink Account

• Go to the SacLink website:Go to the SacLink website:www.saclink.csus.eduwww.saclink.csus.edu

• Click Login under the Click Login under the SacLink LoginSacLink Login box box

• Enter your username and Enter your username and passwordpassword

Preparing your Preparing your SacLink AccountSacLink Account

• Select Personal WebpageSelect Personal Webpage• Click "Enable Web Pages"Click "Enable Web Pages"

Transferring FilesTransferring Files

• You will use FTPYou will use FTP FFile ile TTransfer ransfer PProtocolrotocol transfers files between different computerstransfers files between different computers it requires you to log onit requires you to log on

• You can use Windows – easy!You can use Windows – easy!• ... or more specialized software... or more specialized software

Using WindowsUsing Windows

• Windows can open an FTP connectionWindows can open an FTP connection it is treated as a "web folder"it is treated as a "web folder" you can drag and drop files – you can drag and drop files – easy!easy!

• First, open any windowFirst, open any window My DocumentsMy Documents My ComputerMy Computer etc...etc...


• Type the following in the Address Bar:Type the following in the Address Bar: ftpftp://ftp.saclink.csus.edu://ftp.saclink.csus.edu note the "ftp" prefix instead of "http"note the "ftp" prefix instead of "http" also note the "ftp" before "saclink"also note the "ftp" before "saclink"


• A login window will appear A login window will appear • Afterwards, you will be Afterwards, you will be

logged into Saclinklogged into Saclink• Open the "web" folderOpen the "web" folder• Drag and drop your files hereDrag and drop your files here

A Few Tips ...A Few Tips ...

• NoNo links should start with links should start with ftp://ftp:// link will link will onlyonly work if your logged in with FTP work if your logged in with FTP it will it will notnot work on the Internet work on the Internet you won't get any credit for these linksyou won't get any credit for these links

• Copy your images to the serverCopy your images to the server your links should not start with your links should not start with http://http:// this is a "hot linked" (leeched) imagethis is a "hot linked" (leeched) image

File ExtensionsFile Extensions

• Links need the full file nameLinks need the full file name this includes the file extensionthis includes the file extension often Windows hides the extension from youoften Windows hides the extension from you

• To show extensions:To show extensions: open the Control Panelopen the Control Panel open Folder Optionsopen Folder Options select the View Tabselect the View Tab uncheck "Hide extensions for known file types"uncheck "Hide extensions for known file types"

Adding Lists Adding Lists


List TagsList Tags

Tag Effect

<ol> … </ol> Ordered List

<ul> … </ul> Unordered List

<li> List Item

<ul> <li>Peter

<li>Quagmire

<li>Joe

<li>Cleveland

</ul>

<UL><UL> Example Example

• Peter

• Quagmire

• Joe

• Cleveland

<UL><UL> Example ExampleOutputOutput

<ol> <li>Tappa Kegga Bru

<li>Kuppa Kappa Chino

<li>Getta Loda Yu</ol>

<OL><OL> Example Example

1. Tappa Kegga Bru

2. Kuppa Kappa Chino

3. Getta Loda Yu

<OL><OL> Example ExampleOutputOutput

HTML TablesHTML Tables


Building HTML TablesBuilding HTML Tables

• Tables allow you to organize data into Tables allow you to organize data into rows and columnsrows and columns

• This is similar to the "columns" of This is similar to the "columns" of QBasicQBasic

• Many websites use tables for visual Many websites use tables for visual effects effects

Table TagsTable Tags

TagTag MeaningMeaning

<table> … </table> Start / End

<tr> … </tr> Table Row

<td> … </td> Table Cell

<table> <tr> <td>Computer</td> <td>Generation</td> </tr></table>

<TABLE><TABLE> Example Example

<table width=80% bgcolor="lightblue“ border=1> <tr> <td>Name</td> <td>Major</td> </tr> <tr> <td>Joe Gunchy</td> <td>CSc</td> </tr>

</table>

<TABLE><TABLE> Example 2 Example 2

Row 1

Row 2

<TABLE><TABLE> Example 2 Example 2OutputOutput

Name Major

Joe Gunchy CSc