Web Page Design

Text Wrangler Assignment 1

How to Create a Simple HTML File Using TextWrangler

What to type in TextWrangler

Type this information below, exactly as shown or copy and paste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>YourName’s Assignments page</title>
</head>

<body>

<p>Some info about yourself.</p>
<p>More info about your.</p>

</body>
</html>


Note:

The left and right angle brackets < > create a “tag”. A tag is an instruction to the browser that tells the browser how you want the text or image between the tags appear on the web page. The angle-brackets themselves and the instruction between them will not be visible on the actual web page. Most tags are used in pairs: an open-tag < > and a close-tag < / >. You will place open-tags and close-tags in your document to tell the browser where you want a certain effect such as bold, underline, and colors, to begin and to end. No matter what tags you want to have between the opening and closing body tags, some of the tags (DOCTYPE, html, head, title, and body) are required tags in every html document, as they instruct the browser that this is an html page.

Text Wrangler Image 1

How to Save the File

1. Go to File > Save As
The “Save As” window will open

Text Wrangler Image 2

2. You will click on My Documents and than create a new folder. Title the new folder Web_Page_Design. Within that folder, create another folder called TextWrangler_WebPage click okay. In the Save As box title the assignments page Yourfirstname_assignment1.html
3. Click on the Save button.

How to view your web page

Remember on the previous section you saved your document as “Yourfirstname_assignments.html”
1. Open your web browser such as Firefox or Safari, Go to File > Open > Browse and find “Yourfirstname_assignments.html”. When you are done, click “OK”, it will display and open your page.

Text Wrangler Image 3

View the source and edit your page

1. If you want to see the source code, you need to move the mouse somewhere in the empty space of the browser window, right click, and then select “view source” from the pop-up menu.
2. Now if you want to modify your page (such as adding a line break or making it bold), you need to open the file in TextWrangler and make changes there.
3. You must save these changes. Please keep in mind that you need to re-save the document every time you make any changes.
4. Every time you save a change, don’t forget to refresh your browser window to see the changes.