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.
...
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
...
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.
| 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.
...
...
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/
...