Public Affairs
How to Create and Post a Web Page
1. Open your HTML editor (Windows Notepad)
2. To create the structure of your HTML page, type the following code in Notepad.
On the left is what your code should look like in Notepad and on the right is what you get when you view the page in a browser.
3. Save the file as index.html if it is your homepage.
4. Adding a hyperlink
Hyperlinks are a way for you to link to other web pages. To create a link simply type in this code <a href="http://www.cwu.edu">Click Here</a>. The web address within the parentheses is the site that the Hyperlink links to. The text that comes after the address is what appears on your web page and what you click on when viewing it in a browser.
5. Paragraphs
You are now ready to add text to the HTML document, just as you would any conventional document. Note that HTML does not recognize when you press the Enter key to end a paragraph. You need to include a <p> tag to start a new paragraph. At the end of a paragraph you should include a closing paragraph tag </p> for clarity and completeness.
6. Breaking Lines
When you use the paragraph tags, browsers insert white space. Sometimes you'll want to place some text on a line by itself, without including extra white spaces above it, thus creating a line break. The line break tag <br> provides an option for placing text on a line by itself without including white space.
7. Adding Headings
You can use headings to organize the body of your Web documents. HTML has six levels of headings, designated by the following tags.
Heading 1 <h1> ... </h1>
Heading 2 <h2> ... </h2>
Heading 3 <h3> ... </h3>
Heading 4 <h4> ... </h4>
Heading 5 <h5> ... </h5>
Heading 6 <h6> ... </h6>
Heading 1 is the most prominent and Heading 6 is the least.
Your finished product might look something like this:
Above is what the code looks like in Notepad
This is the result when you view it in a browser.
8. Bold Text
You can also create bolded text using Html. The tags used are <b> tag and the </b> tag. Whatever text you place between the two tags would be bolded. For instance, if you were to view the text between the <b> tags in a browser it would look like this: tag and the.
9. Italicized Text
Just like with bolded text, all you have to do is place the text that you want italicized in between <em>...</em> tags. An example would be as follows: <em>This is italicized text</em>. What would appear in your browser window would be: This is italicized text.
10. Inserting Images
You insert images into an HTML document by using the <img /> tag. There are multiple components to an <img/> tag that you need in order for it to display an image. Each of these components are inserted within the <img /> tag. First off, you need to add a src="". This is the piece of the <img /> tag that points to your image file. So now the image tag should look like this: <img src="filename or file path" />. The second piece you need for your <img /> tag is an alt="". What you place within the quotes of the alt="" is the alternative text that will be displayed if the image doesn't appear. So, now with both parts, your completed image tag should look like: <img src="filename or file path" alt="alternative text" />.
11. Tables
Tables in HTML consist of three types of tags, <table>, <tr>, and <td>.
<table></table>
These tags designate the beginning and the end of your table. All of the rows and columns for the table must be placed between the <table></table> tags.
<tr></tr>
These tags designate the beginning and the end of a table row. All of the <td> tags will go in between the <tr></tr> tags.
<td></td>
What you place in between these table data tags is what will actually be displayed in your browser. So, now that you know the basic elements for building a table, let's actually build one:
<table>
<tr>
<td>Row1, Column1</td>
<td>Row1, Column2</td>
</tr>
<tr>
<td>Row2, Column1</td>
<td>Row2, Column2</td>
</tr>
</table>
When you look at the table in a browser it will look something like this:
If you would like to have a border around the cells of your table, you may place the attribute border="1" within the opening <table> tag. The code would look like: <table border="1"> where the number in between the quotation marks designates the thickness of the border. The larger the number, the thicker the border. For instance, if you placed <table border="3"> instead of just <table> at the beginning of the code above, the resulting table would look like this:
How to Post a Web Page with a PC
1. Login to a CWU computer
2. Open My Computer (click on Start > My Computer> and locate your "I" drive (student "I" drives are named "Plato" or "Aristotle"):
3. Double-click on the "I" drive icon:
4. Double-click on your user name folder:
5. Double-click on the "public_html" folder. This folder is where all of your web documents must be placed for them to show on the Internet. Your home page must be named "index.html" (without the quotes but with the lowercase letters):
6. CWU's network scans for new index pages four times a day (5:30am, 12:30pm, 5:30pm, and 11:30pm). Once it detects a valid web page, you will be able to view your website at: www.cwu.edu/~(your user name)
How to Post a Web Page with a MAC
Note: These directions are for the most recent version of the Prosoft Client (Version 2.0.1) . If you have an older version (or none at all) please call x2001 and we can upgrade or install the software for you.
1. First, click on the Netware browser icon in your Dock:
2. This should bring up the login window:
Now you need to type in your username, password, and context if they are not already there. (If you are unsure of your context please call x2001 and we can tell you what it is.)
After you enter everything click on the Login button.
3. Now click on the Browse tab in that appeared between the Login and Mounts tabs:
4. Now you should see this:
5. If you are faculty or staff, then click on World then CWU_TREE then CWU and finally Acad and scroll all the way to the bottom where you will find ZEUS_WWW. Double click it.
6. If you are a student click on World then CWU_TREE then CWU and Students. Then scroll all the way to the bottom. A-L (and clubs) should be on PLATO_WWW and M-Z should be on ARISTOTLE_WWW. Double click on the one you need.
7. This will mount the volume on your desktop. It will look something like this:
8. Double click on it and then open the htdocs folder. In there you should find a folder with your username on it. Open it and you will find a folder called public_html. This is where you place your web files.
