Your First Web Page using Text Edit
● Create a Root Folder and put in a text file, change the extension to .htm, and you have your first webpage!
✓ Root Folders ✓ <!--Invisible Tags--> ✓ <title> Tags ✓ .htm extension
• This tutorial is for the Fan-Tastic Project and is part of a series:
1 - First Web Page 2 - index Page 3 - Special Characters 4 - Ordered Lists 5 - Links 6 - Horizontal Nav
Step #1: Create a New Folder and Call it Web Page ~
✓ Create a New Folder by Right-Clicking on the desktop …
✓ … call the new folder Web Page and put it somewhere you can find it.
Step #2: Open TextEdit or NotePad~
✓ If you're using Mac, open TextEdit:
Step #3: TextEdit Preferences ~
✓ Go to: TextEdit » Preferences …
✓ … click the Plain Text radio button for New Document Format.
✓ Next, go to: Open and Save and turn on "Ignore rich text commands in HTML files" and "Ignore rich text commands in RTF files." Also click the checkbox to turn off "Add '.txt' extension to plain text files."
Step #4: Open Another New Blank Document ~
✓ Open a New Blank Document in text edit by going to: File » New …
Step #5: Copy the Code ~
✓ Copy and paste this code in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- your name and date here --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
✓ Hopefully it looks something like this:
Step #6: Put your name and date ~
✓ Type your name in place of the text <!--your name and the date here -->
✓ Also put the current date.
[Note: Any text you put between the tags: <!-- and --> is invisible.
Use this for the author's name, private messages or instructions you want only other computer programmers to see … ]
Step #7: Title ~
✓ Next, type the Title of your web page, for instance Mr. Millendez's Math Class or whatever the name of your website is going to be between <title> </title> tags:
✓ Hopefully the document now looks something like this:
[Note: Any text you put between the tags: <title> and </title> appears on the menu bar along the top of the web browser.]
✓ Also hit the ENTER key twice for a blank line between lines of code (it just makes it easier to read but has no effect on the appearance of the web page itself.)
✓ Also note that the extra space before and after the <body> tags is not required, but it makes your file easier to read, especially as you add more text to the file.
Step #8: Save the File ~
✓ Hit Cmd (⌘) + S or go to: File » Save as …
✓ Save the file in your newly created Web folder as index.html
✓ Remember: Don't save the file with the extension .txt. Instead, save the file with the extension .html
Step #9: View Your Work ~
✓ Open the Web Page folder you recently created.
✓ If you saved the file correctly with the .htm extension, you should see the icon of your default web browser.
✓ Double-click on it and open the index.htm file you just created in a web browser.
✓ You should see the change you made to the title in the upper bar on your preferred web browser.
✓ If you see the title in the upper menu bar …
YOU DID IT!
✓ You are now a web programmer! (a little bit anyway, right?)
Last Step: Save and Attach ~
✓ Go to: File » Save as … and save your index.htm file IN YOUR ROOT FOLDER …
✓ … and attach your index.htm to the tutorial.