19
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.

Tutorial … Creating a Website

  • Upload
    javan

  • View
    40

  • Download
    0

Embed Size (px)

DESCRIPTION

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. Step 1:. - PowerPoint PPT Presentation

Citation preview

Page 1: Tutorial … Creating 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)orOpen TextEdit and set preferences (Macintosh)

4. Set up text editor and Browser display windows.

5. Copy / edit HTML in your editor.

Page 2: Tutorial … Creating a Website

Set up folders for your Website

Documentswebsite-name1-name2

imagesDocuments

website-name1-name2images .html files

.jpg files

.gif files

.png files(other resource files)

Step 1:

Page 3: Tutorial … Creating a Website

Name your folders and files carefully!!!

File naming conventions:1) No CAPITAL letters!!!2) Use “-” not “_“ or not “ “ between words.

3) Create long, descriptive names that have a hierarchy.

- school-name-index.html- school-name-hobbies.html- school-name-games.html

Step 1:

Page 4: Tutorial … Creating a Website

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.

Step 2:

Page 5: Tutorial … Creating a Website

How to get Notepad(Windows)

1. Click on ‘Start’.

2. Click on ‘Programs’.

3. Click on ‘Accessories’.

4. Click on ‘Notepad”.

Step 3:

Page 6: Tutorial … Creating a Website

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.

How to get TextEdit(Macintosh)

Step 3:

Page 7: Tutorial … Creating a Website

What you will seeMacintosh Preferences Setup

Page 8: Tutorial … Creating a Website

What you need to do to get text edit to write HTML

Go to the menu bar and click text edit.You will see this menu.Click on the item that says “Preferences”.

Macintosh Preferences Setup

Page 9: Tutorial … Creating a Website

Preferences-New Document

Click the “New Document” tab at the top.Change all the preference to look like the picture on the next page.

The goal is to open and save files in plain text format with UTF-8 encoding

Macintosh Preferences Setup

Page 10: Tutorial … Creating a Website

Macintosh Preferences Setup

Page 11: Tutorial … Creating a Website

Preferences-Open and Save

Click the tab on top and change it to “Open and Save”.Compare and change your preferences to the picture on the next slide.

Macintosh Preferences Setup

Page 12: Tutorial … Creating a Website

Macintosh Preferences Setup

Page 13: Tutorial … Creating a Website

HTML Text Editor … BrowserSet 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.

Step 4:

Page 14: Tutorial … Creating a Website

How to get source code.1. Open a simple website design you

like.

2. Click on ‘View’ and then ‘View Source’.orClick on ‘Page’ and then ‘Source’.

3. Copy all the HTML code.

4. Paste the HTML code into your Notepad or TextEdit text editors.

Step 5:

Page 15: Tutorial … Creating a Website

Opening .html filesWhen you open the .html file if you double click it it will open in your default browser.To edit your web page, open the .html file in Notepad or TextEdit(Windows) Right Click on the .html file and then ‘Open With’ Notepad.(Macintosh) Control click on the .html file and then ‘Open With’ TextEdit.

Step 5:

Page 16: Tutorial … Creating a Website

Opening .html files (Macintosh)

When you Control Click on your .html file, this screen will come up.Move you mouse over the button that says open with.Click the one that says text edit.

Step 5:

Page 17: Tutorial … Creating a Website

Saving .html files (Macintosh)

Go to the menu bar and click “Save as”.The saving screen should come up.

Step 5: (Macintosh)

Page 18: Tutorial … Creating a Website

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

Step 5: (Macintosh)

Page 19: Tutorial … Creating a Website

Change the background color and the title text and the image name.

Step 5:

File Save, then Refresh your browser to view edits.