How to Create Simple Webpage in OS X

How To

Create a 1-Minute Website Using TextEdit as an HTML Editor in OS X

1. Launch TextEdit.

2. Open TextEdit Preferences and check the box 'Ignore rich text commands in HTML files' (see picture).

3. In the untitled TextEdit document, type something such as My Website, the Date, and your Location.

4. Select all the text and click the toolbar alignment icon to 'center'. Also highlight one word and make it a color (TextEdit Menu>Format>Font>Show Colors). Make some of the text larger by highlighting it, then Command-Shift-Plus.

5. Save the document you have created - name it index and save it to the desktop as an HTML file. Close the TextEdit window.

6. Now double-click the fie icon index.html - it should open in your default browser window. View your 1-minute website!

More things to try

7. Leaving the browser window open, right (control) click on index.html again - a menu will open - select 'open with TextEdit'.

8. You should now see two windows: one showing the HTML view of index.html and one showing the browser preview of your site. Adjust and resize the two windows so both are viewable.

9. In index.html, find the tags <title> </title> and type My 1-minute Website between the tags. Then press Command S to save it.

10. Select the browser window and refresh it (Command R). You should now see your title My 1-minute Website at the top edge.

11. Select the index.html document and insert bgcolor="FF9900" into the opening <body> tag so that it looks like this: <body bgcolor="FF9900"> - press Command S to Save, then refresh the browser window to see the change. It should have a yellow backgound now. Try changing the background to other colors, using any combination of six numerals 0-9 or letters A-F. (see Hexidecimal Color Chart)

12. Add a Horizontal Rule Line such as the one below by typing <HR> any place between the opening <body> and closing </body> tags. Save file, refresh browser to preview.

13. Insert an image (JPG, GIF, PNG) by adding <img src="picture.jpg"> anywhere between the opening <body> and closing </body> tags. Save and Refresh to view.

14. To center the image, add the tags <div align="center"> </div> so it looks like this:
<div align="center"> <img src="picture.jpg"> </div> Save and refresh browser. View an example website here.

Hammondsport Mac Users Group - Hammondsport, NY 14840 - www.hportmug.com