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.

Slides:



Advertisements
Similar presentations
Basic Computer Skills Windows & the Internet.
Advertisements

1 Web Site Design Overview of the Internet Cookie Setton.
1) Terms to Know 2) Starting an Office 97 Application 8) Finding a missing file 7)File Managment 4) Utilizing the Right Mouse Button 6) Using Help 3)
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
Creating and Editing a Web Page Using Inline Styles
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. How to Create Web Pages Using HTML Introduction.
How to Take a Screenshot By Ashley Hudson Screenshot of this screen 
Student Presentations. Overview Introduction Prepping Zipping Uploading unZipping Viewing.
Introduction to Education E-Portfolio. Word Document Example Link to Colleen McCabeColleen McCabe Word Document Instructions –Open a new word document.
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Operating Systems Day 7. Status Bar in Notepad 1.Open notepad and type a document or file 2.Click on view menu 3.Select status bar to display the status.
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
Adding Websites to a Folder  Putting sites into an already existing folder Putting sites into an already existing folder  Adding an image on the icon.
Microsoft Internet Explorer Capturing Text and Images From the Internet.
Windows & The Internet. Objectives: Identify and use computer hardware Open and close a desired program Switch back and forth between open windows Create.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Creating an Expression Web Site
HTML.
Web Technologies Website Development Trade & Industrial Education
Web Design Unit Assignment #2: Job Skills Favorite Links Page You will create a HTML web page with links to informational websites about a variety of job.
Website Development with Dreamweaver
15.1 Fundamentals of HTML.
Webspace Portfolio Site Overview Digital Media. The Essential Steps You Will Go Through Are: 1. Log-in to
Chapter 1 Creating a Dreamweaver Web Page and Local Site
How to Create a Document in Google Drive By Tressa Beckler.
Website Editing From Gingerweb The Image Gallery.
RIGHT Mouse Button Formatting Cut Copy Paste Save LEFT Mouse Button MAIN BUTTON Single clicks Double clicks Drag Highlight.
The Internet Using the Internet Web addresses Searching Favourites Saving / Printing web pages.
Level 1 Tutorial Project How to put a movie player on your Weebly website using an HTML code.
How to create an eBook in PowerPoint. Video.
HONG KONG TAOIST ASSOCIATION WUN TSUEN SCHOOL Microsoft PowerPoint 2010 Chapter 1 – Introduction of PowerPoint.
15.1 Fundamentals of HTML DeKalb County School System.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where.
Click your mouse for next slide Adding Text Click in any text box Type in your text OR.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
BASIC WORD PROCESSORS WEEK 5. BASIC WORD PROCESSORS Word Processor Word processor is a program which is used to edit text files and format them with font,
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.
Creating and Editing a Web Page
Creating and Editing a Web Page Using Inline Styles
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Computer Basics Tutorial Text boxes like this will give you information. Boxes like this at the bottom of a slide will give you instructions. Press the.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Opening a File 1.Open Word 2.Click the Microsoft Office button(Very top left hand corner). A menu appears 3.Click Open. The Open dialog box appears 4.Use.
Copying a text file to the E-Form (HTML) Editor in OSCAR.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
Basic Computer Skills Windows & the Internet vfu.bg/en/e-Learning/
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Online PD Basic HTML The Magic Of Web Pages
PowerPoint Grades 3-5.
Google Docs Class 1.
Tutorial: How to Creat a Website.
BASIC HTML CODING BY cHRIS JACKSON.
Your First & Last Name (Make sure you capitalize your first and last name!) Follow these instructions: 1. Center your name on the slide (use the “Centered”
The mouse controls the movement of the pointer on your screen.
Presenter Mindy Pistol Ext
PowerPoint Quick Tips Bad Ischl, Nov
Cheat Sheet CSCI 100 JW Ryder
Cheat Sheet CSCI 100 JW Ryder
HOW TO MAKE PAGES FOR A WEB SITE
Presentation transcript:

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 Documents website-name1-name2 images.html files.jpg files.gif files.png files (other resource files) Step 1:

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:

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:

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

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:

What you will see Macintosh Preferences Setup

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

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

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

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. Step 4:

How to get source code. 1. Open a simple website design you like. 2. Click on ‘View’ and then ‘View Source’. or Click 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:

Opening.html files When 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:

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:

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

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)

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