html

Document Sample
html Powered By Docstoc
					Introduction to HTML
The School of Information Studies (IST) makes extensive use of HTML in each program’s gateway course. Therefore, it is essential that you become familiar with the basics for creating a web page. In your gateway course, you will create a basic Web site, ZIP this site into a single file, and upload that ZIP file into the Introductory Web Site assignment. This handout is to help you become familiar with recognizing basic HTML. This tutorial is not intended to show you how to create a comprehensive web site. In addition to teaching you the bare basics of HTML, this document will show you how to upload a Web site into WebCT. • Note: These instructions are also available in a multimedia format with animations and narration. Please see the School of Information Studies CD-ROM you received as well as within the Student Introduction to WebCT session within your WebCT account.

IST WebCT 6 is located at http://istwebct.syr.edu If you have any questions regarding WebCT, please contact the WebCT administrators at istwebct@syr.edu or contact Peggy Brown directly at 315-443-9370.

Table of Contents
How to Build a Basic Web page Step 1: Open Notepad Step 2: Basic Framework Step 3: Adding a Title Step 4: Writing Content Step 5: Adding more Content Step 6: Creating Headers Step 7: Creating a List Step 8: Adding Links Step 9: Adding Graphics and Pictures Step 10: Formatting your Web page HTML Tags Some web sites to help you Uploading Your Page into WebCT Glossary 1 1 1 1 2 3 4 4 6 6 7 8 8 9 11

Revised: April 25, 2007

How to Build a Basic Webpage
To create and edit a web page, you need to use a text editor. This example uses Windows Notepad as an example. You may use Notepad or other basic text editors such as TextEdit for the Macintosh. You should not use a word processor such as MS Word or Windows WordPad, because they will automatically add code behind the scenes that will mess up your web page. Note: If you use Macintosh TextEdit, do the following before you begin: 1. 2. 3. 4. From the menu, select "TextEdit > Preferences." Click on "Open and Save" at the top. Remove the checkmark from "Add '.txt' extension to plain text files" Add a checkmark to "Ignore rich text commands in HTML files."

Step 1: Open Notepad
In Windows XP, you can open it by going to Start > Programs > Accessories > Notepad.

Step 2: Basic Framework
Every HTML page uses the same set of tags to begin; these tags tell the browser to expect HTML coding as well as separate the head and the body of the webpage. Enter the following into Notepad: <HTML> <head> </head> <body> </body> </HTML> Spacing between tags is optional; it will, however, help you keep everything clear. You have just created the basic foundation for your webpage. The information for your webpage will go between these sets of tags; information between the <head> and </head> tags will not appear on the page itself, but will provide the web browser with information about, while the content of your webpage will go between <body> and </body>

Step 3: Adding a Title to Your Website
After the <head> tag, add the following tag: <title>type the title for your webpage here</title>

Revised: April 25, 2007

1

For example, your code should look like this: <head> <title>Peggy Brown’s Personal Portfolio</title> </head> This coding will not appear within the text of your webpage, however, it will appear in the top blue bar in your browser window and in the column titled “Description” in student space once your page has been uploaded into WebCT.

Step 4: Writing Content for Your Website
Content goes between the <body> and the </body> tags. Here is an example of what the code should look like with a simple greeting: <body> Welcome to my webpage! My name is Peggy Brown. </body> Do you want to see how your page looks so far??? Either on your hard drive, or on a floppy disk, create a folder specifically for your website material. Save your file as index.html, change the “Save as type” (found underneath the file name) to All Files, and save your file in your website folder. See image below.

Revised: April 25, 2007

2

Minimize Notepad and open your web browser In your web browser, select File-Open and either select browse and select your index.html file or type in index.html Voila! You should now see the beginnings of your website

Step 5: Adding More Content
If you want to add more content to your website, switch back over to Notepad. You can add as much content to your site as you wish. It is important to remember that adding content to your website is not like formatting in Word. Just because you hit the enter key in Notepad, does not mean that the material will go on the next line in your website. Formatting your content requires specific HTML tags, which will shortly be discussed in greater depth. Two important tags to know right now, however, are <br /> and <p> tags. The line break tag <br />, the equivalent to hitting the enter key in Microsoft Word, puts the material after the tag onto the next line. The paragraph break tag <p> is used to define a paragraph of text. You should put a <p> at the beginning of each paragraph and a </p> at the end of each. Doing so will put one line of white space between the material before the code and the material following the code. For example, if this is how my content looked in my Notepad file: <body> Welcome to my webpage! My name is Peggy Brown. I am a master’s student at Syracuse University. </body> This is how it would appear on my webpage: Welcome to my website! My name is Peggy Brown. I am a master’s student at Syracuse University. As you can see, even though I had a second line in my Notepad file, there was no break on my webpage, to get the second line, my code would need to look like this: <body> Welcome to my website! My name is Peggy Brown.<br> I am a master’s student at Syracuse University. </body> It would then appear like this on my web page: Welcome to my website! My name is Peggy Brown. I am a master’s student at Syracuse University.

Revised: April 25, 2007

3

If I wanted to put a blank line between the two lines, then I would need to use the <p> </p>tag. It should look like this: <body> <p>Welcome to my webpage! My name is Peggy Brown.</p> <p>I am a master’s student at Syracuse University.</p> </body> This text will look like this on my web page: Welcome to my webpage! My name is Peggy Brown. I am a master’s student at Syracuse University. Add as much content as you would like. As you work, you can preview your page by following these steps: -Save your file (continue to save as index.html) -Switch to your web browser -Hit the Refresh/Reload button on your browser

Step 6: Creating Headers
To create headers (or titles) within your web page:
•

<H1>text</H1>:

creates heading level #1 (24 point type—largest)
heading level #2 (18 point type)

•

<H2>text</H2>: creates

• • • •

<H3>text</H3>: creates heading level #3 (14 point type) <H4>text</H4>: creates heading level #4 (12 point type) <H5>text</H5>: creates heading level #5 (10 point type) <H6>text</H6>: creates heading level #6 (8 point type—smallest)

A line space automatically is inserted before and after a heading (that is, an entire line is skipped between a heading and any text before and after it).

Step 7: Creating a List
There are two types of lists that you can create in your webpage, an unordered list (with bullets) or an ordered list (numbered automatically). The list tag involves two sets of tags: the first tag, either <ul> for unordered list or <ol> for ordered list, tells the browser

Revised: April 25, 2007

4

to start making a list, and the second tag <li> distinguishes each item on the list. List tags, like other content falls within the <body> and </body> tags. Here is an example of an unordered list: <body> Welcome to my website! My name is Peggy Brown and I love music. Here is a list of my favorites: <ul> <li>country western</li> <li>rock</li> <li>easy listening</li> </ul> This is what the ordered list would look like: Welcome to my website! My name is Peggy Brown and I love music. Here is a list of my favorites: • Country western • rock • easy listening Here is an example of an ordered list: <body> Welcome to my website! My name is Peggy Brown and I love music. Here is my list of favorites: <ol> <li>country western</li> <li>rock</li> <li>easy listening</li> </ol> This is what the ordered list would look like: Welcome to my website! My name is Peggy Brown and I love 80’s cartoons. Here is my list of favorites: 1. country western 2. rock 3. easy listening It is important to remember to include the closing tags at the end of each item in the list as well as at the end of the list.

Revised: April 25, 2007

5

Step 8: Adding Links
There are two important pieces of information that go within the link tag: -The actual URL to which you are linking -The name of the link (what you click on to go to the other webpage) Hyperlink: The tag for creating links is: <a href=“URL”> title of website</a> For example, to link to the School of Information Studies homepage: <a href=“http://www.ist.syr.edu”>Syracuse University School of Information Studies</a> On your website, Syracuse University School of Information Studies would appear, and clicking on that would take you to http://www.ist.syr.edu. Email: To add an email link, you would use the following form: <a href="mailto:johndoe@syr.edu">E-mail Me at johndoe@syr.edu</a> The e-mail address follows mailto: and the text of the link comes between the two tags. Normally this link will open the user’s e-mail program, but in case he or she is using web-based e-mail it is a good idea to include the e-mail address itself in the text of the link, as in the example: E-mail Me at johndoe@syr.edu Common Mistakes made while creating links: - Not putting a space between a and href - Not using quotation marks around the URL - Not using http:// as part of the URL - Not including the closing tag </a> at the end of the tag

Step 9: Adding Graphics or An Image
Before you attempt to add graphics or an image to your webpage, make sure that the file is saved in the folder you created for your website material. You will want to save your image into the same directory as your index.html file. You can include as many images in your site as you would like, but all of the graphics should be copied into a single directory. Copy the graphics into that directory before continuing. Pictures can be placed anywhere in the <body> code. To place a picture in your HTML code, use the tag: <img src = “filename.jpg”> For example, if I wanted to put my picture at the top of my page, the code would look like this:
Revised: April 25, 2007

6

<body> <p><img src = “peggy.jpg”></p> <p>Welcome to my website!</p> </body> Note: Use the <p> tag to create a blank line between the image and the text

You can also use a full URL to a graphic that is already on the Web, such as <img src="http://ist.syr.edu/images/logo_home.gif">, although you should have permission for copyright purposes before doing this.

Step 10: Formatting your Webpage
Formatting Fonts: Change the font size: <font size=“5”>place text here</font> Change the font style: <font face=“arial”>place text here</font> To BOLD Font: <b>text</b> To Italicize font: <i>text</i> Multiple font formatting: <font face=“arial” size=“5”><b><i>place text here</i></b></font> Note: Font formats will not end until you put in the closing tag. Also, it is best to nest the tags so that as you move from the center outward, the opening and closing tags correspond, as in the following example: <font><b><i>text here</i></b></font> You should NOT order your tags in the following way: <font><b><i>text here</font></b></i>

Revised: April 25, 2007

7

HTML Tags
Name/Description:
HTML-signals start of HTML to browser Heading Title Body Insert Graphic List Item-places item in a bulleted list Ordered List- signals the start of a numerical list Unordered List- signals the start of a bulleted list Paragraph break Line Break Heading Bold Italics URL Link Email Link Background Color

Tag:
<HTML> <head> <title> <body> <img src=“filename.jpg”> <li> <ol> <ul> <p> <br> <H1>, <H2>, <H3> <b> <i> <a href=“URL”> <a href=“mailto:email_address”> <body background=“color”>

End Tag:
</HTML> </head> </title> </body> None required </li> </ol> </ul> </p> Not required </H1>, etc. </b> </i> </a> </a> </body>

Some web sites to help you:
Graphics, Animation, sounds- Microsoft Clip Gallery http://dgl.microsoft.com/ Webmonkey: Reference HTML cheat sheet http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ Web Source HTML Tags http://www.web-source.net/html_codes_chart.htm W3Schools Online Web Tutorials http://www.w3schools.com/ The web standards group W3C (World Wide Web Consortium) now recommends using XHTML, which is similar to HTML 4.0 but changes a few things you've learned here. More information can be found at http://www22.brinkster.com/beeandnee/techzone/articles/htmltoxhtml.asp

Revised: April 25, 2007

8

Zipping and Uploading Your Web site into WebCT
The first step is to compress your Web site into a single Zip file. A ZIP file is a file format that will take a number of files, compress them, and put them into a single file. You will then upload that ZIP file into WebCT, and WebCT will extract your files for you. In this case, you are going to create a single ZIP file that has your index.html file and your graphic files in it. Note: The following instructions are also available in multimedia format on the School of Information Studies CD-ROM you received.

Zipping Files with Windows XP
Windows XP has a built-in zip tool. If you are using XP, you might want to use this tool. 1. 2. 3. 4. 5. 6. First, make sure that all of the files you need to zip are in one folder. Then, right-click the folder Select “Send To” Select “Compressed (zipped) Folder” If a window opens, click on “Yes” Everything in your folder has been copied into a zip file.

Zipping Files with Macintosh OS X
Macintosh OS X has a built-in zip tool. Mac users should use this tool. 1. 2. 3. 4. First, make sure that all of the files you need to zip are in one folder. Then, hold down the “control” key on the keyboard and click on the folder. In the context menu that appears, select “Create Archive” Everything in your folder is now copied into a zip file.

Zipping Files with 7-Zip
If you cannot use Windows XP or Macintosh OS X to zip your files, or if you need greater compression, you can use 7-Zip. All of the computer labs on campus have 7-Zip installed. If you are using a Windows machine without 7-Zip, you can download it for free from: http://www.7-zip.org/
Revised: April 25, 2007

9

1. 2. 3. 4. 5. 6.

First, make sure that all of the files you need to zip are in one folder. If 7-Zip is installed on the computer, right-click on the folder. From the menu that appears, select “7-Zip > Add to Archive…” In the window that appears, set “Archive Format” to “Zip.” Click on “OK” Everything in your folder is now copied into a zip file.

Uploading and Publishing Your Web Site Zip File
Submitting your web site is a two-part process. First, you will upload the zip file into the “Assignments” section of WebCT. Second, you will publish the web site so that it is visible to other students. To upload the web site zip file: 1. From the course home page, click on “Assignments” in the menu on the left. 2. Click on the “Introductory Web Site” assignment. 3. Click on the “Add Attachments” button near the bottom. 4. In the window that opens, click on “My Computer.” 5. Click on “Browse.” 6. Find the zip files on your computer, click on it, then click on “Open.” 7. Click “OK.” 8. Click the “Set Start Page” button. 9. Select the radio button next to “index.html” then click on “Select.” 10. Click on the “Submit” button. 11. Click on “OK,” then click on “OK” again.

To publish your web site so that other students can see it: 1. On the course’s “Assignments” page, click on the “Submitted” tab at the top. 2. Next to the “Introductory Web Site” assignment, click on the ActionLinks icon (the small gray box with the downward pointing arrow) and click on “Publish Controls.” 3. Click on the “Publish” button. 4. To see your web site listed among the published ones, click on the “Published” tab at the top. 5. To view a site, click on the “Introductory Web Site” link corresponding to the student whose site you want to view, then click on the “View Start Page.”

Revised: April 25, 2007

10

IMPORTANT THINGS TO REMEMBER!!!!!!! 1. Each file used in your website must have the same file name as you use in your HTML code. For example, if you used a picture or graphic called peggy.jpg, you would have to call it peggy.jpg in your HTML file. Your HTML file should NOT call it Peggy.jpg or peggy.JPG. 2. Things to remember when naming files to be uploaded into WebCT: No spaces No symbols Only use characters and numbers A file named “a picture of me.jpg” will not work, but one named apictureofme.jpg or a_picture_of_me.jpg will work.

Glossary
Browser or Web browser- program used to access the Internet such as Microsoft Internet Explorer or Netscape Navigator Closing Tags- tags that signal to the browser to end the formatting signaled by the initial tag. Closing tags always contain a / within the <>. For example, the end tag for bold tag <b> would be </b>. HTML- Hypertext Markup Language; a computer language that is a way of making a webpage more than just a long plain text document Tags- are what tell the internet browser to do something special with the text, for example, change color, make bold, italicize, etc. URL- website address, for example: http://www.ist.syr.edu/ or http://www.google.com/ WebCT- Instructional resource tool used by professors in the School of Information Studies. Your login ID is the same as your NetID account user ID and your password will be the same as your NetID account password.

Revised: April 25, 2007

11


				
DOCUMENT INFO
Shared By:
Tags: html 4
Stats:
views:71
posted:1/29/2010
language:English
pages:12