Lesson 3: Building your first web page In this lesson, the student will construct a basic web page.

Slides:



Advertisements
Similar presentations
How To Make Your Own Web Page: Basic Web Design
Advertisements

HOW TO USE POWERPOINT By Bryan Kreps.
Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1  2004 Ecirp Studios
Web Pages Using FirstClass Dean McKinney Greater St. Albert Catholic Schools January, 2006.
Adding Hyperlinks to PowerPoint By Samantha Clayton.
WeB application development
Creating Dynamic Communities. Objectives that will be covered: 1.Creating your communityCreating your community 2.Styling your communityStyling your community.
Click your mouse for next slide Dreamweaver – Colors and Page Properties So far things are going just dandy aren’t they? You’ve been following FST’s fun.
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.
Instant E-Portfolios By: Ramesh Sabetiashraf Santa Ana College For Faculty and Students.
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
Distributing an imported HTML newsletter Prerequisites: 1. Basic HTML knowledge 2.An external HTML editor - requires external HTMTL editing program (e.g.
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.
This PowerPoint document will help you learn about hyperlinks and action buttons. 1.
Getting on the Web CCSD Technology Team. Post a page to the Web using a simple file transfer process Goal: Process: Create a Web page using Microsoft.
So – You want to learn how to put an advanced article submission (cut and paste) onto the state website. (Note: If you have not done so, you will need.
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.
Montgomery Parks, M-NCPPC Volunteer Services Office  Log Your Hours Online  View & Edit Your Volunteer Profile Hi and thanks for volunteering with Montgomery.
Creating Tables in a Web Site
GETTING STARTED 1. Click on the START menu and go up to UDT SOFTWARE, then drag over to Microsoft Office, and then down to Power Point 2. Select a theme.
INFSCI  Last time we built a doggie web page in class following the instructions in the slide deck: Build Web Page with HTML – see week 3 The topics.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
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.
PowerPoint Basics “Just what are we trying to do with this software anyway?”
THE BACKBONE OF EVERY WEB PAGE HTML Day 1. What will we learn? How to create a basic web page Backgrounds and colors How to link Web sites How to include.
YourClassPage.com TM Inservice Quickstart Guide Getting YOUR classpage up and running!
How To Use Google Docs. 1. Go to the Google Docs website a) Go to b) Sign in using your username and password.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
Lesson 1: Web Pages Web Browsers. Linear media & Hypermedia Books are presented in a linear format. Pages and chapters comprise a book. You can create.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML I An Introduction to the Language of the Web Terry Bake
How to use Microsoft Word. Where can I find Microsoft Word? How to select, copy and paste information Go to the document from which you wish to copy the.
Screen ViewModule Title: Notes: Branching Instructions: Audio Script: Page: Use Microsoft Outlook 1 Create a Distribution List A distribution list is a.
Go to your school’s web locker site school name.schoolweblockers.com) Your user name is the first letter of your first name, the first 4.
Microsite Training. Today: Presentation (slides will be sent to the group) Examples with LRADGs microsite Troubleshooting Questions.
Homework #4 HTML Web Assignment II ©2001 E. Kinnear.
Foxbright – Smarter Education Websiteswww.foxbright.com Foxbright Training Foxbright Teacher Pages
Concepts  messages are passed through the internet by using a protocol called simple mail transfer protocol.  The incoming messages are.
Lesson 12 Adding Validation To The Movie Database.
1 Hyperlinks and Action Buttons This PowerPoint document will help you learn about hyperlinks and action buttons.
1 Hyperlinks and Action Buttons This PowerPoint document will help you learn about ______ and __________ buttons.
PowerPoint Extras. Eyes to the front please! Action Buttons.
Welcome to the PowerPoint on how to use PowerPoint 2007 Neil Hecht Instructional Technology Facilitator Onslow County Schools.
Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.
1 Hyperlinks and Action Buttons This PowerPoint document will help you learn about hyperlinks and action buttons.
A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.
Lesson Objectives To use a word document, adding text, pictures and borders To write suitable questions for a cyberhunt – thinking of audience To add.
How to Save a Microsoft Document onto a PowerPoint Slide 1. Open Microsoft Office Word and minimize it so you can go to the internet to find your information.
So – You want to learn how to put an article onto the state website. (Note: If you have not done so, you will need to review the web training provided.
Advanced Website Training: June, 2010 Insert Images as Your Background Using Google Docs for Document Hosting Custom Contact Forms on Your Website.
Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt.
HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,
HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,
How to create an educational wiki. Laurie Roberts 2010.
Wikis in Education: Part III Wiki Basics University School of Milwaukee.
How to build a Web Page or “The things geeks never told you!”
Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
How to create a web page using word …
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”
Our Procedures: The rules of the road
2. Press Browse and search for the video file you need.
Learning How to Create an Online Interactive Poster using
Presentation transcript:

Lesson 3: Building your first web page In this lesson, the student will construct a basic web page.

Building your first web page You will need to pull up a plain text editor for this lesson: PC users pull up Notepad via the Accessories menu MAC users pull up Simple Text (Extra help: Access Notepad by clicking the Start button, choose Programs, and then Accessories.)

Building your first web page The following excerpt is from Dave Taylor’s book Creating Cool Web Pages. Type in the following data (or cut and paste) into your Notepad document. The code continues on the next 2 slides:

The Cool Web Movie Database Welcome to the Cool Web Movie Database. We offer information on the many brilliant films of David Lean and soon a lot more will be online. The Early Years

In Which We Serve (1942) Co-directed and produced by Noel Coward, this film also starred Noel Coward as Captain Kinross and Celia Johnson as Mrs. Kinross. This Happy Breed (1944) Based on the play by Noel Coward, this starred Robert Newton and again featured Celia Johnson. The Later Years Doctor Zhivago (1965) Ryan's Daughter (1970)

Building your first web page 1) Go to File  Save As 2) Webpage1.html (save to My Documents) 3) Pull up Internet Explorer Now that you have inserted the previous information into Notepad, perform the following steps to view the web page:

Building your first web page 4) Go to  File  Open 5) Browse (find the document Webpage1.html) 6) Highlight Webpage1.html 7) Click Open 8) Click OK

Building your first web page You should view a page that looks like this: n3.html Please me or post to the message board any problems you may be experiencing.

Building your first web page Great! Now let’s add a color to the background. Please visit Web Safe Colors website and chose a color of your liking. Remember, the text is black, so for now find a color that will contrast nicely with black. Web Safe Colors website link is below:

Building your first web page I have chosen a nice lime green. The code for this is #66FF33. Now pull up your code from Webpage1.html in Notepad. Locate the tag for the body color: Change to File  Save

Building your first web page Use the instructions from slides 6 & 7 to View your web page. My page now looks like this: n3.1.html

Building your first web page Congratulations! You have just built your first web page and added color to the background, too. In Lesson 4, we will discuss design principles that will make your web pages visually appealing. In Lesson 5, we will begin to add graphics and links to our web page.