Skip to body

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.

Screenshot of typing HTML code in Notepad

Screenshot of live html code on IE

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:

Screenshot of finished html code

Above is what the code looks like in Notepad

Screenshot of finished live html code on IE

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:

Example of making a table

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:

Example of making a table with different border

[Back to the Top]


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"):

Screenshot of finding 'My Computer'

3. Double-click on the "I" drive icon:

Screenshot of finding and clicking on the 'I: Drive'

4. Double-click on your user name folder:

Screenshot of click on 'username' folder in I: drive 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):

Screenshot of clicking on 'public_html' folder

Screenshot of index.html

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)

[Back to the Top]


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:

Screenshot of NetWare Icon

2. This should bring up the login window:

Screenshot of NetWare 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:

Screenshot of 'Browse' tab

4. Now you should see this:

Screenshot of  NetWare file browser.

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.

Screenshot of finding 'ZEUS_WWW' folder

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.

Screenshot of finding 'ARISTOTLE_WWW' folder

Screenshot of clicking on 'PLATO_WWW' folder

7. This will mount the volume on your desktop. It will look something like this:

Screenshot of 'ZEUS_WWW' on your desktop screen

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.

Screenshot of your user folder

[Back to the Top]