Portfolio - First Page
You may keep your home page simple or make it a show place. Frequently, student change the look of their homepage several times over the course of the quarter. Below are the steps for creating your homepage. The bold words denote the action you take. Italics denote a special key or command, and dark red denotes the characters you should type. The word info appears on some lines. If you click on that word you will get more information about that line of code.
- Open Your HTML editor, either Notepad++ or Dreamweaver (ask me if you wish to use another specific HTML editor)
- Type <!DOCTYPE html> info
- Type <html lang="en"> info
- Type <head> info
- Press Enter
- Type <title> info
- Type Your Name and "Web Authoring Portfolio"
The title element displays in the title bar on your browser. It should be concise and informative, reinforcing to the user that this is the page they intended to open. - Type </title> info
Tags are made by using the greater and less than symbol with a code word or words in between. These are html elements.
This tag tells the browser that html code is coming and that this will be a web page using the xhtml based on the W3C standards.
- Press Enter
Enables the server to determine which character encoding applies to the document it is serving.Since there are a great number of characters throughout human languages, and a great variety of ways to represent those characters, this makes the file understood by user agents around the world. Note the /> at the end. Do you remember from your reading why that is there?
- Type <meta charset="utf-8"/>info
- Press Enter
- Type </head> info
- Press Enter
- Type <body>info
- Press Enter
This is the body tag. The browser understands that you have placed what you want displayed between this tag and its closing tag near the bottom.
- Type <h1> info
- Type Your Name and the words "Course Portfolio"
- Type </h1>
info
The <h1> tag marks a heading for the page. You can use h1, h2, h3, h4, h5 or h6 depending on the level of heading.
- Press Enter
- Type <p> info
- Type A brief introduction about yourself. </p>
The head element contains information not displayed on the page. Later you will be including some of these elements.
- Press Enter
- Type <a href="mailto:youremailaddress">email or your name </a> info
- Press Enter
- Type </body> info
- Press Enter
- Type </html> info
| This is an email link. The anchor tag with a hypertext reference that cause the user's email to activate. This will only work in when clicked from the browser. |
You have now created a basic page with two unique elements - a heading with your name and a paragraph with a link to your email. You are now ready to save your homepage.
Select File>Save As
Remember tags you open should be closed. |
Make sure you named it index.html and save it as UTF-8 encoding.
If you neglect to change the format to all files it will save as a text file, not an html file. If you use caps in the name some servers will not recognize the file as your homepage for that directory.
If you
saved the file correctly it will have the icon of the browser you designated
as your primary browser for your system. You can now test your page by opening it in a browser.
- Doubleclick your directory
- Doubleclick the file
- It should open in your browser.
- To test in other browsers, open the other browser first
- Select File>Open from the browser's menu
- Click on Browse and locate your file.
When you have finished, upload your web site to the Cascadia student web server using the FTP Lab.
|
This element denotes a paragraph. All text should be contained within a block tag (check your reading). The <p> tag is one of the most common block elements and places a double line between it and the next block element. |
|
A forward slash after the greater than symbol (>) denotes the completion of the element. It is called a closing tag. With a few exceptions elements that have opening tags must have closing tags. |
| This tells the browser that the code you are using complies with the HTML standards and is English. |
|
This closes the head tag. You may have notices that you are using lowercase letters to create the code. This is part of best practice standards. All code should be lowercase. |