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 Any web applications may be used, but instructions may not correspond completely-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.
...
- Faculty websites will have a URL of http https://faculty.salisbury.edu/~username
- Student websites will have a URL of httphttps://students.salisbury.edu/~username~username
- Staff websites will have a URL of httphttps://staff.salisbury.edu/~username~username
Your main index page must be named welcome.htm and must be placed in the root of the htdocs folder.
...
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, but in this guide we’ll be focusing on Microsoft Expression Web 4.
...
.
...
...
By default, the program will likely create an initial blank webpage named default.html. We’ll want to rename that welcome.htm.
- In the Folder List, right-click default.html and choose Rename.
- Type welcome.htm and press Enter.
- In the Confirm Rename dialog, click Yes to Are you sure you want to rename “default.html”, the home page of your site?
Finally, you’ll want to be able to preview it using the custom URL for your site, so that you can see how it looks to other visitors.
- Click the Site tab, and then click Site Settings.
- Click the Preview tab, and then select Preview using custom URL for this website.
- Enter your site’s URL in the URL field, and click OK.
To preview your page, once you save it, click the File tab, and choose Preview. Select the browser you want to use to preview your page. You can also press F12 to have the page display in your default web browser.
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.
...
Code | Description | Example |
<a> | Creates a hyperlink | <a href=”httphttps://students.salisbury.edu/~user/welcome.htm”>link</a> |
<img> | Used to create an image. Doesn’t need a separate closing tag. | <img src=”httphttps://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
...
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.
| Info | ||
|---|---|---|
| ||
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.
...
...
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 https://www.w3schools.com/
- Carbonmade – Online Portfolios http https://carbonmade.com/
- Wix – free website builder http https://www.wix.com/
- Weebly – free website builder http https://www.weebly.com/
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...