Tutorial: How to Creat a Website

Tutorial … Creating a Website 1. Create Website folder and image folder 2. Put all images in your image folder 3. Open Notepad (Windows) or Open TextEdit and set preferences (Macintosh) 4. Set up text editor and Browser display windows. 5. Copy / edit HTML in your editor.

Set up folders for your Website Documents website-name1-name2 images Step 1: Set up folders for your Website Documents website-name1-name2 images Documents website-name1-name2 .html files .jpg files .gif files .png files (other resource files) images

Name your folders and files carefully!!! Step 1: Name your folders and files carefully!!! File naming conventions: No CAPITAL letters!!! Use “-” not “_“ or not “ “ between words. Create long, descriptive names that have a hierarchy. - school-name-index.html - school-name-hobbies.html - school-name-games.html

Put images in your images folder. Step 2: Put images in your images folder. You can search for .jpg or .gif or .png images in Google and File Save them in your images folder. You can create a drawing in PowerPoint. File / Save As that slide as a .jpg in your images folder. Remember to name them according to our file naming conventions.

How to get Notepad (Windows) Step 3: (Windows) How to get Notepad (Windows) Click on ‘Start’. Click on ‘Programs’. Click on ‘Accessories’. Click on ‘Notepad”.

How to get TextEdit Step 3: (Macintosh) (Macintosh) In Finder go on the top menu bar to the item that says Go. Under that click “Applications”. Scroll down through that page and find the application called TextEdit. Double click to open it.

What you will see Macintosh Preferences Setup

What you need to do to get text edit to write HTML Macintosh File Format Setup What you need to do to get text edit to write HTML The goal is to save your HTML code file in pure text format. Pure text files have no formatting commands. Rich text files have font, color, and size modifiers embedded in the files.

Macintosh File Format Setup Check Format Make Plain Text (NOT RICH TEXT) Go to the menu bar and click text edit. You will see this menu. Click on the item that says “Preferences”.

Macintosh Preferences Setup Preferences-New Document Preferences-Open and Save

HTML Text Editor … Browser Step 4: HTML Text Editor … Browser Set up your text editor and browser so you can edit the HTML and see how the browser interprets your edits. You must save your edits in the text editor and then refresh the browser to view the changes.

How to get source code. Step 5: Open a simple website design you like. Click on ‘View’ and then ‘View Source’. or Click on ‘Page’ and then ‘Source’. Copy all the HTML code. Paste the HTML code into your Notepad or TextEdit text editors. Tips: Select all the thing: Command +A Copy: Command +C Paste: Command +V

Saving .html files (Macintosh) Step 5: (Macintosh) Saving .html files (Macintosh) Go to the menu bar and click “Save”. The saving screen should come up.

Set the spot to save the document to your website folder Set the spot to save the document to your website folder. (or save to your desktop and drag it to your website folder) Step 5: (Macintosh) Name the document descriptively and make sure that at the end of the file name you put “.html”. (index.html) Make sure that plain text encoding is set to Unicode (UTF-8). Then click save .

Opening .html files Step 5: View the .html file in your browser (IE, Chrome, Safari, FireFox) by double click’ing on it in your web folder. Then select ‘Open With’ and then your default browser. To edit your web page, open the .html file in Notepad or TextEdit Right click (Notepad) or Control click (TextEdit) on the .html file and then ‘Open With’ Notepad orTextEdit.

File Save, then Refresh your browser to view edits. Step 5: Change the background color and the title text and the image name. File Save, then Refresh your browser to view edits.