This will be a paragraph about me. It might include my hobbies, where I grew up, etc.

Size: px

Start display at page:

Download "This will be a paragraph about me. It might include my hobbies, where I grew up, etc."

Lawrence Booker
6 years ago
Views:

1 Module 3 In-Class Exercise: Creating a Simple HTML Page Name: Overview We are going to develop our web-pages the old-fashioned way. We will build them by hand. Even if you eventually decide to use WYSIWYG tools to make web pages, understanding what these tools are doing is critically important. In this series of activities, we will use a text editor to create a web page. The page will not be fancy, but it will start the development of what will become your home page for this course. Part 1: Using a text editor Open the BBEdit (or its free version, TextWrangler) application. BBEdit should be installed in the Mac s Taskbar. If not, then you can find it easily. If you are not familiar with using Mac OS X, there are two places where you should look for an application. In our lab, since a lot of students use the same applications in their classes you can look in the Apple menu, in the Recent Items sub-menu; this menu is created by the operating system to keep track of the last few applications and files that have been used. The other place to look is in the Applications folder near the right end of the task bar. Holding down the mouse on this folder will pop-up a menu. If you are working on a Mac that does not have an Applications folder in the task bar, your next place to look is to open the Mac's Hard Drive (usually labeled Macintosh HD. As you double-click, look for an Applications folder within BBEdit should be in this folder Once you find it, double-click icon to launch the program. Part 2: Very simple web page Type the following into your untitled document exactly as you see it (use the tab key to indent BBEdit will help you by automatically indenting subsequent lines): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html> <head> <title>name's WF Home Page </title> </head> <body> Name's Web Foundations Home Page </body> </html> Links to my WF project: Project Stage 2 Project Stage 3 About Me This will be a paragraph about me. It might include my hobbies, where I grew up, etc. This will be a paragraph about why I took this course and what I hope my career will be. Some of My Favorite Web Sites: Double-click on the word Name in both places and, when it is highlighted, type your own name. You are going to save your document. It is going to eventually be the home page for your course web site. What should the document be called? There is a special file name, index.html that is used for one page in each folder that gets loaded automatically when you don t type a file name in your browser s location bar, so save this page as index.html on the desktop of the computer on which you are working. (Select File>Save from the menu, in the dialog box, navigate to, and open the Desktop folder. 1

2 Part 3: Previewing your page in a browser What does you web page look like in a browser? Try it! What do you notice about the lines of text for your favorite links and your projects? Why does this happen? Part 4: Adding headings, paragraphs and line breaks to your web page Now add some tags that will add more structure to your document. These tags will be added to the existing document. 1. Make Your Name s Web Foundations Home Page a level 1 heading using the <hn> container. ( n represents a number between 1 and 6. A level 6 heading would begin: <h6>) 2. Make Links to my WF project, About Me, and "Some of My Favorite Web Sites into level 2 headings. 3. Make the Project Stage... lines into separate lines using the stand-alone tag at the end of each line. 4. Mark up the two about me paragraphs using the container tags to indicate that they are paragraphs. 5. Preview the document (save it so you preview the latest and greatest version). What's the difference between the <hn> and the tags (in terms of how they look in the browser window? What is the difference in appearance between the and the tags? 6. Add the names (not the URLs, just the names) of three of your favorite web sites (we'll make the links work in another module). 7. Instead of using the break ( ) tags which should generally be avoided since they have no structural meaning, we're going to mark these up as a list. Lists are built of nested tags, the list tag, and the list item (<li>) tag. We'll begin by marking the list up as an unordered list using the <ul> and <li> tags: <ul> </ul> <li> <li> <li> 8. Save your document and view it in a browser. 9. Now let's change our unordered list into an ordered list. Change the <ul> tag into an <ol> tag. Don't forget to change the corresponding </ul> end tag to an </ol> tag. See the difference? Which do you prefer here? Use the type of list you prefer. Part 5: Adding a title and more to your page Finally, use the <title></title> tag in your document s head section. Your document s title should be Your Name s WF Home Page where Your Name is replaced with your actual name. Where does the title get displayed? Use the rest of your time to experiment with the tags you ve learned today Be sure to try the (emphasis) and container tags and the <hr /> stand-alone tag. What do they do? some Text 2

3 some Text <hr />Some Text Part 6: Back-up your work Save your work onto your USB Thumb Drive so that you can use it in future exercises. If you've forgotten to get these, you can this small file to yourself. When you use a web-based system it is helpful to create a ZIP file archive of HTML files so that the system doesn t just embed your code into the message. To create a ZIP archive: select your index.html file in the Finder, then select Compress index.html from the Finder s File menu. Uploading FTP stands for file transfer protocol. It is the way that we traditionally uploaded (transfer) our files to a server of any kind (including a web server) over the internet. SFTP is a secure version of FTP that works on top of the SSH (Secure Shell) protocol. 3

4 SFTP Secure File Transfer Protocol 1. Open the Fugu program. Fugu is an sftp client that facilitates using the sftp protocol to transfer files to and from another computer. 2. Open a new connection to gibson.rit.edu. Use your RIT username and password. 3. Double click on folders to enter them. Use the pull-down menu to move up to a parent directory. 4

5 IMPORTANT! If you have an existing web site of your own in your gibson account, make sure that you create and switch into your wf folder before accidentally uploading a new index.html file over your old one! In the left pane you can navigate to the files on your local machine that you wish to upload. If you have inserted a USB drive you can find it in Volumes: Double click on the www folder only files inside of www can be seen on the web. 5

6 4. Inside the www folder click the New Folder button and create a folder named wf (without the quotes). 5. Double click on your new wf folder. Once you are inside of wf, you can drag your index.html file from the local pane (or the Finder) to the server pane. 6. After you have uploaded your file it is time to go ahead and check to see if we can view it on the web! 7. Open up a browser and try to visit the following URL: (replace abc1234 with YOUR RIT userid). Notice that the www directory is NOT part of the web address. 8. What do you see? Any ideas why? (this may work for some folks and not for others If it doesn't work for you, don't be sad It just means you did it right. (or at least, they way we expected. ) Anti-climactic? Perhaps. But there are some very important concepts that come next and they will enable you to make your web pages readable to the rest of the world. 6

Authoring World Wide Web Pages with Dreamweaver

Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web