HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – BLANK HTML DOCUMENT (MAC)

 

To start doing some HTML coding, we need to have a blank HTML document to work with.  Unfortunately, getting a blank HTML document ready to work with differs greatly depending on the computer system that you are using.  Here are the instructions for a MAC computer:

 

PART 1 – SHOWING FILE EXTENSIONS

To make file extensions visible on a MAC, do the following:

  • Go into Finder.
  • Bring your mouse to the very top of the screen and click on Finder and choose “Preferences”
  • Click on the “Advanced” tab
  • Check the box next to “Show all filename extensions”

 

PART 2 – CREATING A FOLDER FOR YOUR WEBSITE

  • Two finger click on the desktop and choose New Folder.
  • Name the folder HTML.

 

PART 3 – OPEN TEXT EDIT

  • Find and launch the program TextEdit.
  • Choose New Document.
  • You are now in a new document.

 

PART 4 – CONFIGURE TEXT EDIT

  • At the very top of the screen, you will find the word TextEdit in the menu bar.
  • Click on TextEdit and choose Preferences.  This pops open a new window.
  • You need to change two things here:
    • On the Document tab, choose Plain text.
    • On the Open and Save tab, place a checkmark beside Display Webpage HTML code (near the top) or something similar to that.
  • You can now close this window with the small red circle.

 

PART 5 – SAVE THE DOCUMENT

  • In the top menu bar of Text Edit, choose File > Save.
  • You need to name the document webpage.html, you need to save it in the HTML folder that we created earlier and you need to choose the HTML format (see image below for all three steps).

 

Note: Some people get a slightly different window with a different third step:

 

 

 

PART 6 – EXIT TEXT EDIT

  • In the top menu bar, click on Text Edit and choose Exit (or Close).

 

PART 7 – LAUNCH DOCUMENT IN BROWSER

  • Go into your HTML folder.  You should now see a file named webpage.html.
  • Double click on webpage.html.  This should open up your browser and display your empty page.
  • If that worked, you can close your browser.  If not, talk to you teacher.

 

PART 8 – EDITING YOUR DOCUMENT

  • Go into your HTML folder.  You should now see a file named webpage.html.
  • Click once on webpage.html to select it.
  • Then click on the Settings gear and choose Open With > Text Edit.
  • Add a sentence to you document.
  • Save your document by using File > Save in the menubar at the top.
  • Close TextEdit.

 

PART 9 – LAUCHING DOCUMENT IN BROWSER AGAIN

  • Go into your HTML folder.  You should now see a file named webpage.html.
  • Double click on webpage.html.  This should open up your browser and display your webpage with the new sentence you typed.

 

If this all works, congratulations!  You have a blank HTML document that you can now edit.