This guide covers the basics on creating a website and sharing a file using your SU website space. It also recommends other options. This guide uses Microsoft Expression Web, however any web applications may be used, but instructions may not correspond completely.
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.
- Faculty websites will have a URL of http://faculty.salisbury.edu/~username
- Student websites will have a URL of http://students.salisbury.edu/~username
- Staff websites will have a URL of http://staff.salisbury.edu/~username
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.
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=”http://students.salisbury.edu/~user/welcome.htm”>link</a> |
<img> | Used to create an image. Doesn’t need a separate closing tag. | <img src=”http://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> |
<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> |
<hr> | This inserts a horizontal rule. This does not require a separate closing tag. | <hr /> |
Adding content
Microsoft Expression Web 4 shows your website in the middle column of the program. By default, it opens in Split view, which shows the HTML code in a window at the top, and a Design view at the bottom which shows how the page actually displays. In the lower right corner of this column are buttons that allow you to switch between Split, Design, and Code views.
For the purposes of this document, we will be working with the Design view, or WYSIWIG editor, and assuming the reader has little to no HTML experience. Click Design to enter Design mode, and have the preview take up the entire middle column.
Entering Text
Working with text in a webpage is similar to working with text in a word processor. In most cases, each paragraph can have a type of style assigned to it, like Paragraph, Headings, Blockquotes and so on. You can also change the font and font size, add formatting like bold or underline, adjust the alignment, and so on. Simply type what you want to type, and then select the text to apply any formatting you want to apply.
Working with Images
When you insert an image into your website, what you’re really doing is creating a link to that image file. So the first thing you’ll want to do is to copy your image to your P:\htdocs folder. It’s a good idea to create a folder to keep your images in as well; otherwise, your website may become quite cluttered with a lot of files.
- To create your new folder, click the File tab, then select New, and then select Folder. Name the folder images and hit Enter on your keyboard.
- To copy the image to the images folder, make sure the images folder is selected and click the File tab. Select Import and then select File…. Click Add File…. Select your image and click Open. Then click OK to upload the image.
Now your image should appear in the images folder. With the page you’re working on open and in Design view, select the image in the Folder list and drag it onto your webpage. A cursor will show you where you’re inserting the image. When the cursor is in the desired spot, drop the image by letting go of the mouse button. Enter the Alternate Text for accessibility users, and click OK.
You’ll probably need to resize your picture. The picture can be moved and resized like in most documents, but if you’re having trouble resizing it with the mouse, you can do it manually. Right-click the picture and choose Picture Properties. Click the Appearance tab. Here you can set the Wrapping style, the Layout, and the size. Once the file is the size you desire, right-click the image and choose Resample. This will make the image clearer, and will make it a smaller file size. Click the File tab and choose Save. A pop-up will appear to Save Embedded Files. If you’re ok with saving over your photo, click OK, otherwise click Rename to give it a new name, and then click OK.
Creating a hyperlink
The biggest part of creating a web page is creating links to other webpages and websites. This allows visitors to jump from one page to the next. All of your links will be either to a file on your own website, or someone else’s.
To another file or page on your website
First, let’s create another page for you to use. Click the File tab, and then choose New. Click HTML to create a new html page. A new page will open up. Click Design to enter design view if it’s not already, type some text in the webpage, and then click the File tab and choose Save. Give it a File Name (no spaces) and then click Change title…. Type a title for your new page and click OK. Click Save.
Now, you want to create a hyperlink in your welcome.htm page to this new page, so that people can find it. Open welcome.htm if it’s not already open. Click where you want to insert your hyperlink, and click the Insert tab. Choose Hyperlink…
In Text to display: type the text you want to use for your hyperlink. In the Link to: column, make sure Existing File or Web Page is selected. In Look in: make sure that your htdocs folder is selected. If not, use the drop-down menu to navigate to it. Find your new page in the file display below the Look in: drop-down menu. Pages that are already open in Expression Web are listed at the top of the list, followed by folders and then individual files. Select your new page and then click OK.
Now click the File tab and click Save. Hit F12 to check your webpage and make sure the link works.
Troubleshooting tip
If you look at the image above, you’ll notice the link goes to “page2.html”. In the code, it will appear as <a href=”page2.html”>. This is known as a relative link because the link is dependent upon where the page is on your site. It assumes that the server knows where both the current page is, and where the destination page resides. Sometimes, when working with your webpage, the server isn’t as good at figuring that out. If you notice your hyperlinks aren’t acting as expected, make the links absolute links instead. Absolute links contain the entire URL to the webpage or file being linked. For example, right-click on the link in the page and then choose Hyperlink Properties to change the link above. Then, change the address from page2.html to http://staff.salisbury.edu/~username/page2.html and click OK.
You can also link directly to a file, such as a word document or PDF file, so that a visitor could download the file. It’s a good idea to keep all of your files and documents in one folder and link to them from there. In the Folder List, select P:\htdocs. Click the File tab, then click New, and then choose Folder. Name the new folder; in this example I’m going to call it docs. Now, with the docs folder selected, click the File tab and then Import. Choose File... Click Add File…, browse to find and select the file you want to upload (like a resume, for example) and then click Open. Click OK to import the file.
Now, like above, in welcome.htm click in the document where you would like the hyperlink to appear and click the Insert tab. Choose Hyperlink… Double-click the docs folder to open it and then select your document. Change your Text to display to reflect the name of the file. It’s a good idea to let people know in the Text to display that the link they are clicking on is for a file to download and not a page. For example: Download my resume. Click OK.
You can also highlight text, or click on an image to use as a hyperlink. Select your text or your image, and right-click the selected text or image. Click Hyperlink… to open the hyperlink dialog box.
To an external webpage
Linking to an external page is exactly the same as linking to an internal page. The only change to the steps is that instead of selecting a page or file to link to in your own document, you’ll type the entire web address of the page you wish to hyperlink in the Address: field. For example, to create a link to the Technology Support Center website, in your web page click the Insert tab and then choose Hyperlink… Type Technology Support Center in the Text to display: field, and then in the Address: field type http://kb.salisbury.edu and click OK.
Create an Email Link
You can also create a link that will open a new, pre-addressed email when clicked. To do that, place your cursor in the web page where you want the email link to appear, and click the Insert tab and choose Hyperlink… In the Link to: section, choose E-mail Address.
If you’ve used this before, Recently used e-mail addresses: will display previously used addresses. In Text to display: enter the text you want to use for the link, such as Contact Us. Click in the E-mail address field and it will automatically fill out the mailto: prefix needed for the link. After the mailto:, with no space, enter the email address you want to use. Fill out the Subject: and then click OK.
Styles and Stylesheets
When you apply formatting or styles, in the code, Expression web creates an inline “style” for your chosen attributes. For example, when you use Underline, Expression web actually adds a <style> tag to the <head> section of your document, and applies a <span> tag around your selected underlined text with the new style it just created.
If you find you are using the same style over and over again, you may want to create a stylesheet to create a consistent theme across your website. That stylesheet would be saved as a file on your website, which you can then use in your webpages by adding a link to it in your web pages Head section.
For information on how to use CSS to create thematic styles, visit http://www.w3schools.com/css/css_intro.asp
Other Resources
- W3schools – Online tutorials and instruction for learning HTML, CSS, XML and more. http://www.w3schools.com/
- Carbonmade – Online Portfolios http://carbonmade.com/
- Wix – free website builder http://www.wix.com/
- Weebly – free website builder http://www.weebly.com/
Related articles
Filter by label
There are no items with the selected labels at this time.