Publishing to the Web

1
Publishing to the Web
2
Assignment 3 Make your own HTML page

• You will need to
• Write an HTML page with a plain text editor such
  as Notepad, which saves in ASCII format.
• This file needs to be named index.html
• Locate or create a digital photo unique to
  yourself you, your family, your pet, etc.
• You may need to resize this photo to fit your
  page. (See resizing instructions later in this
  guide)

3
Writing your HTML page

• Use the sample web page as an example.
• View gt Page source (CTRL-U) to see the underlying
  source code of the sample page.
• For additional HTML tags and tutorials, search on
  HTML tutorials or HTML for beginners or go
  to
• Daves short HTML Tag reference
• HTML Beginner Tutorial

4
Uploading your HTML page

• Go to http//its.ucsc.edu/service_catalog/softwar
  e/apps/ssh.php
• Click SSH/SFTP Secure Shell download
• Download the appropriate file for your system.
• Follow instructions to download and install.

5
Running Secure File Transfer

• Run SSH Secure File Transfer
• Click Quick Connect
• Host name sftp.ic.ucsc.edu
• User name your cruzmail user name
• Password your cruzmail password.
• Log in the first time it may ask you to confirm
  a few things, just click yes.

6
Uploading your file(s)

• Take a moment to look at the directory structure
  of people.ucsc.edu/username
• Transfer files to directory public_html
• Note your web page should be named index.html
• Your webpage should show up at
  http//people.ucsc.edu/username
• Hint use full pathname for graphics files.
• Example http//people.ucsc.edu/gmoulds/Oswaldsma
  ll.jpg

7
If your file doesnt show up

• Your permissions may be set incorrectly.
• So, using SFTP
• Right click on file.
• Select properties
• Click Read for Owner, Guest, Other.
• Box under Write should be selected only for
  Owner.

8
Resizing Graphics for Windows XP, the free, easy
way.

• Go to www.microsoft.com/windowsxp/downloads/power
  toys/xppowertoys.mspx
• From the right-side column, download
  ImageResizer.exe
• Install ImageResizer
• Right click on image, select Resize Image

9
Resizing your graphics The free, less easy way.

• Download Adobe Photoshop Elements 30-day trial.
• Either
• Go to www.download.com and search on Photoshop
  Elements
• Or go to www.adobe.com and navigate to free trial
  download of Photoshop Elements.
• Load large .jpg file.
• Save for web.

10
Note

• When installing, pay attention to file
  associations dialog.
• Do you want all your graphics files automatically
  opening in Photoshop?
• Deselect any unwanted associations.
• Remember this when installing any program dealing
  with photos, music, video

11
Red eye?

• If your photo has red eye, Photoshop elements has
  a red eye removal tool.
• Other versions of Photoshop may not have this
  tool.