Publishing to the Web

Assignment 3 – Make your own HTML page You will need to: You will need to: Write an HTML page with a plain text editor such as Notepad, which saves in ASCII format. 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 This file needs to be named: index.html Locate or create a digital photo unique to yourself – you, your family, your pet, etc. 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) You may need to resize this photo to fit your page. (See resizing instructions later in this guide)

Writing your HTML page Use the sample web page as an example. Use the sample web page as an example. View > Page source (CTRL-U) to see the underlying source code of the sample page. View > 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: For additional HTML tags and tutorials, search on “HTML tutorials” or “HTML for beginners” or go to: Dave’s short HTML Tag reference Dave’s short HTML Tag reference Dave’s short HTML Tag reference Dave’s short HTML Tag reference HTML Beginner Tutorial HTML Beginner Tutorial HTML Beginner Tutorial HTML Beginner Tutorial

Uploading your HTML page Click “Download the SSH Client” Click “Download the SSH Client” Download SSH. Download SSH. Follow instructions to download and install. Follow instructions to download and install.

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

Uploading your file(s) Take a moment to look at the directory structure of: people.ucsc.edu/~username Take a moment to look at the directory structure of: people.ucsc.edu/~username Transfer files to directory: public_html Transfer files to directory: public_html Note: your web page should be named index.html Note: your web page should be named index.html Your webpage should show up at: Your webpage should show up at: Hint: use full pathname for graphics files. Hint: use full pathname for graphics files. Example: Example:

If your file doesn’t show up… Your permissions may be set incorrectly. Your permissions may be set incorrectly. So, using SFTP: So, using SFTP: Right click on file. Right click on file. Select “properties” Select “properties” Click “Read” for Owner, Guest, Other. Click “Read” for Owner, Guest, Other. Box under “Write” should be selected only for Owner. Box under “Write” should be selected only for Owner.

Resizing Graphics, the free, easy way. Go to: owertoys/xppowertoys.mspx Go to: owertoys/xppowertoys.mspx owertoys/xppowertoys.mspx owertoys/xppowertoys.mspx From the right-side column, download ImageResizer.exe From the right-side column, download ImageResizer.exe Install ImageResizer Install ImageResizer Right click on image, select “Resize Image” Right click on image, select “Resize Image”

Resizing your graphics: The free, less easy way. Download Adobe Photoshop Elements 30-day trial. Download Adobe Photoshop Elements 30-day trial. Either: Either: Go to and search on “Photoshop Elements” Go to and search on “Photoshop Elements” Or go to and navigate to free trial download of Photoshop Elements. Or go to and navigate to free trial download of Photoshop Elements. Load large.jpg file. Load large.jpg file. Save for web. Save for web.

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

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