The Steps
... to create a web page using a text program (TextWrangler is in Applications).
Drag the TextWrangler icon onto your Dock. Then click the new icon on the Dock to open TextWrangler and create a New document.
Save the document as aboutme.html.
Save it in your Sites folder.
[Hint: to make it easier to read your TextWranger document, you may want to turn on the Soft Wrap Text. You can do this by clicking on the T-lightswitch icon, and then scrolling to and clicking on Soft Wrap Text. See image to the right.]
Your page should use all of the following tags:
<html>
The whole page goes after this tag and before the </html> tag. Within the <html> and </html> tags are the "Head" and "Body" portions of the web page source. All tags should be lowercase.
<head>
The stuff after this tag and before the </head> tag is not actually in the page, but gives the browser additional information.
<title>
After the title tag, put the title of the page that will appear on top of the browser window. Then put the </title> tag. Note: The "Title" should appear within the "Head."
<body>
The stuff that's on the page goes after this tag and before the </body> tag.
<h1>
Stuff between this and the </h1> tag is big. Try other <h#> tags and see what happens.
<p>
Starts a new paragraph. </p>ends the paragraph.
<br/>
A break: what we think of in word processing as a return without a space before the new line or sentence. This tag is an empty tag -- it is not part of a pair because no content goes between it and an ending tag. If you want to create a new line without creating a new paragraph, simply add "<br />" and you're done.
<hr/>
A horizontal line. This is also an empty tag so the same rules apply as for other empty tags like the break tag.
<strong>
Stuff between this and </strong> will be bold.
<u>
Stuff between this and </u> will be underlined.
<em>
Stuff between this and </em> will be italicized.
style
Use this within another tag to add formatting to your text. For example, <p style="color:#00CCFF;"> will give color to the paragraph you've surrounded with this paragraph tag.
<!-- -->
Comments will not appear on the web page as seen with a web browser. Comments are empty tags. Start with the angle bracket and an exclamation mark, then add two dashes. Write your comment. Then close the comment with two dashes and the closing angle bracket. No exclamation mark is needed at the end. For example, if I wrote <!-- This is a comment to myself to remind me that I still need to add 5 new tags to this document --> in my aboutme.html document, when I opened that document in a web browser, I would not see that sentence.
The Assignment
1. Create your aboutme.html page, so that:
- The webpage can be viewed using a web browser.
- The webpage includes at least 18 unique tags (13 above, 5 new ones).
- The webpage correctly uses all the HTML elements/tags that mark it as a web document.
- The content of the webpage includes at least three paragraphs about you, including at least one paragraph about each of the following -- (1) your interests and/or activities in school, (2) your interests and/or activities outside of school, and (3) what you hope to accomplish in this Web Publishing Class.
- The webpage includes a link to your contract page, using only the contract.html file name as the link value.
2. Change the background color of aboutme.html.
3. Add link(s) to web site(s) that are relevant to the content of your page (you will have to find the tag for that).
4. Create your own Contract page.
- Go to the course contract page. Using the HTML tags you've learned, create your own version of this page, using your own name, and save it in your Sites folder as contract.html.
- To create contract.html, you will open a NEW TextWrangler document and create a NEW html page using at least the html, head, title, and body tags all over again -- don't forget to use both the opening and closing tags for each of those.
- Contract.html should include a link to aboutme.html.
5. Once you have completed these two pages, you may move on to second part of this assignment, HTML with Styles.
Helpful Hint:
One place to find more on HTML tags and how to use them: W3Schools
To self-assess, click on this link.