Create a website on your P drive using the htdocs folder

Owned by Stephen Ashby
Last updated: Feb 01, 2024 by Tammy Voigt
4 min read

This guide covers the basics on creating a website and sharing a file using your SU website space. It also recommends other options. Any web applications may be used-see Other Resources below.

Creating Your Web space

All students, faculty and staff have personal web space on their P: drive in a folder named htdocs. If your P: drive does not have a folder named htdocs, you will need to create it.

The web address for your website will depend on if you are a faculty, staff, or student.

Your main index page must be named welcome.htm and must be placed in the root of the htdocs folder.

Creating your website

In order for people to access your website, you’ll need to place files in your htdocs folder. You can use any html or text editor to create webpages.

Some quick HTML basics

Even though we’ll be working primarily with Design view, it’s good to know how a web page works. Your webpage consists of a few main sections, which you can see if you click onto Code. The first line tells the browser what type of file this document is and what standards it uses. Your browser then uses that to translate and display the document to the world. The rest of the document is contained between the <html> tags. This is usually broken into two parts: the head and the body.

html example

The Head contains information about the document itself, that doesn’t display on the page. You’ll find stuff like links to Cascading Style Scripts (which affect the display and layout of your page) and external scripts, the page title, meta tags that describe the document and help it show up in web searches, and any in-line styles and scripts. All of this is contained between the <head> tags and is the first element contained within the HTML tag.

Below the Head tag is the Body tag. This is where all of your content goes: your images, your links, your headings, tables, and so on. This is all contained within the <body> tags.

In HTML, every element has an opening and closing tag. In most cases these are two separate tags; however, in some cases, like the line break tag <br /> or the image tag <img src=”http://yoururl.jpg” /> the opening and closing tags are combined. Think of them the same way you think of parenthesis or quotation marks: you have to have both a right and left parenthesis. Opening tags are typed with just brackets and closing tags have a slash / after the left bracket, such as <tag>content</tag>.

Just like parenthesis or quotation marks, when you nest html tags, you have to complete an inner pair before you complete the outer pair. For example, you wouldn’t write “John jumped over Mary (who had a little lamb”). You’d first close the parenthesis, and then close the quotation marks, like “John jumped over Mary (who had a little lamb)”. Likewise, with HTML tags, you close the inner tags first, and then the outer tags. So for a paragraph that has bolded text, you would write: <p>John jumped over Mary, <b>who had a little lamb.</b></p>.

To make it easier to verify that each tag is closed, most people indent tags most container tags (except those within a paragraph, such as bold).

<html>
   <head>
   </head>
   <body>
      <p>text here.</p>
   </body>
</html>

Common tags

Some common html tags you should be familiar with, even if you aren’t going to be using code.

Code

Description

Example

<a>

Creates a hyperlink

<a href=”https://students.salisbury.edu/~user/welcome.htm”>link</a>

<img>

Used to create an image. Doesn’t need a separate closing tag.

<img src=”https://staff.salisbury.edu/~user/image.htm” />

<p>

Used to define a paragraph. This creates a line break and a space between the lines.

<p>Here is some text</p>

<br>

Inserts a line break with no space between the lines. This does not require a separate closing tag.

<br />

<h1>, <h2>, etc.

Used to define headings and subheadings

<h2>Here is a subheading</h2>

<table>

Used to define a table. The table itself <table> consists of rows <tr>, and within the rows table cells <td> that make up the columns. Each row in the table should have the same number of cells <td> for even columns.

<table>
                <tr>
                                <td>row 1 column 1</td>
                                <td>row 1 column 2</td>
                </tr>
                <tr>
                                <td>row 2 column 1</td>
                                <td>row 2 column 2</td>
                </tr>
</table>

<ol>, <ul> and <li>

Ordered lists (ol) are numbered lists. Unordered lists (ul) are bullets. Within a list are list items (li).

<ol> or <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4</li>
</ol> or </ul>

<hr>

This inserts a horizontal rule. This does not require a separate closing tag.

<hr />

 

Other Resources

Filter by label

There are no items with the selected labels at this time.



Did this solve your issue??