Creating Web Pages By: Dr. Matt Dean. Common Terminology Webpage Webpage Website Website Web Browser Internet Explorer Firefox HTMLHypertext Markup Language.

Slides:



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

The Web Wizards Guide to Freeware/Shareware Chapter Four Essential Tools for Web Page Authors.
Client-server practices DSC340 Mike Pangburn. Agenda Overview of client-server development Editing on client (e.g., Notepad) or directly on server (e.g.,
Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.
CPSC 203 Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao.
XP Browser and Basics1. XP Browser and Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.
Web development  World Wide Web (web) is the Internet system for hypertext linking.  A hypertext document (web page) is an online document. It contains.
Building Web Pages With Microsoft Office. Introduction This tutorial is for the beginning web builder. It utilizes software that you already have, Microsoft.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.
CIS101 Introduction to Computing
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
ETT 429 Spring 2007 Web Design Basics II. Publishing Web Pages Activating your NIU website Go to this.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
HTML & Dreamweaver 101 Aman Yadav. Definitions HTTP – The Web uses a protocol called HTTP (Hyper Text Transport Protocol) to communicate between the Web.
HTML Introduction HTML
Internet Publishing / Dreamweaver Luke E. Reese CARRS
Basic HTML Workshop Session 1: Introduction to HTML Fall 2006.
ETT 229 Fall 2004 Web Design Basics III. Agenda 11:00-11:05 – Quiz 15 11:05-11:40 – Web Design Lecture 11:40-12:15 – Web Design Practice 3.
Creating and Publishing Your own website
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
Advanced Last Updated: May Class Outline Part 1 - Review –Review of basics –Review of files and folders Part 2 - Attachments –Sending.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~~~~~ ~~~~ ~~~~~
Creating a Web Page HTML, FrontPage, Word, Composer.
Designing a Classroom Web Site Using NVU Beginning Level.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Acadia Institute for Teaching and Technology Basic Web Page Design for Courses.
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.
Create a Website Session I Key Components Hands-on HTML.
Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.
Creating Web Pages Overview. Design – Start with a Purpose Before you start any web page, you need to design the website. The first question that should.
Exploring Web Page Design. What is a Web Page?  A web page is a multimedia file which can be stored on a web server.  It can include text, graphics,
1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.
Understanding HTML Code
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
Websites 101 Technology Committee UPSOM. Web Class – Goals  Make a simple web page (or series of pages)  Upload that page to the internet  Feel comfortable.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.
Microsoft Internet Explorer and the Internet Using Microsoft Explorer 5.
Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Introduction to web development and HTML MGMT 230 LAB.
Internet Publishing Luke E. Reese ANR Education and Communication Systems
Web Design Course Adam Ryan 5-C. This course is intended to give you an introduction into web design so that you can build upon this knowledge using the.
1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.
11/8/ Word Processing Building a Website Using Microsoft Word Please visit and sign-up the free account using verified.
Slide No. 1 Slide No. 1 HTML and Web Publishing Continued CS 104 CS 104.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
Landscaper 101. Time Code AMC AMCNET HELP!!! Where do you go for help? –Upper right corner has a ? for the online help –This presentation.
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
Chapter 8 HTML Editors. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors Text editors don't have word processing features.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Session 1: Introduction to HTML Fall Today’s Agenda Talk about the functions of the Internet Cover useful terminology for today’s session HTML,
XP Creating Web Pages with Microsoft Office
Introduction to HTML.
Evolution of Internet.
Geography 121 Homepage Design Project Zero
Part 3 Creating basic HTML web pages
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Part 3 Creating basic HTML web pages
Internet Publishing Luke E. Reese
HTML Text editors and adding graphics
Presentation transcript:

Creating Web Pages By: Dr. Matt Dean

Common Terminology Webpage Webpage Website Website Web Browser Internet Explorer Firefox HTMLHypertext Markup Language. HTMLHypertext Markup Language. –Programming language used for webpages

Terminology Continued Notepad Notepad HTML Editors HTML Editors –Dreamweaver –Microsoft Word WYSIWYG WYSIWYG

Creating a Webpage Create a folder for all of your webpage files (Including all graphics and audio files used on the page). Create a folder for all of your webpage files (Including all graphics and audio files used on the page). –Give the folder a short name –Do not use capital letters or spaces in the file names or folder names. Image and audio files are not embedded in webpages. They are only linked or associated with the page. It is always better to store all image files and html files together. Be sure that these files are placed in your folder before you link or embed them. Image and audio files are not embedded in webpages. They are only linked or associated with the page. It is always better to store all image files and html files together. Be sure that these files are placed in your folder before you link or embed them.

Creating a Webpage Open your html editor. Open your html editor. Create a new file. Create a new file. Save the file before you do anything else. Save the main file as index. Be sure to save the file in your folder. Save the file before you do anything else. Save the main file as index. Be sure to save the file in your folder.

Creating a Webpage Giving the page a title. Giving the page a title. –This is not the name of the file. Inserting a graphic. Inserting a graphic. –Make sure the graphic is in your folder first. –Be careful that the link to the graphic is not to your hard drive instead of to the folder location on the web. –Again, make sure that file names are short and that there are no capital letters or spaces in the name. Using Headings Using Headings –Easy way to change font size and to make the font bold. Inserting a Horizontal Rule or Horizontal Line. Inserting a Horizontal Rule or Horizontal Line. –Standard way of separating different sections of a webpage.

Creating a Webpage Adding Hyperlinks Adding Hyperlinks –Relative links –Absolute Links –Local Links – Links mailto: address mailto: address mailto: address –Links to other files in your webpage folder. Setting your color scheme Setting your color scheme –Background –Text color –Link color Inserting a table. Inserting a table. Checking your webpage in a browser Checking your webpage in a browser –Netscape –Internet Explorer

Uploading Files to the Internet FTPFile Transfer Protocol FTPFile Transfer Protocol –Easy way to transfer files from a local computer to a web server. (Uploading) –Also an easy way to copy files from a web server to a local computer (downloading). FTP SoftwareWSFTP; WinFTP FTP SoftwareWSFTP; WinFTP –We will use Internet Explorers built in FTP capabilities.

Uploading a Webpage to the Internet To Upload a page or folder to the Net, type the following address in the Address field of Internet explorer: To Upload a page or folder to the Net, type the following address in the Address field of Internet explorer: –ftp://55.madison.k12.al.us ftp://55.madison.k12.al.us You will then be prompted for a userid and password. You will then be prompted for a userid and password. –Your Username is the name of your school. –Your password will be provided later. Once you login, you will have access to your Webserver account. You can simply drag and drop the entire folder into the FTP window. Once you login, you will have access to your Webserver account. You can simply drag and drop the entire folder into the FTP window.

Determining Your URL Once you have dragged and dropped the proper files to your Web server account, your URL will be: Once you have dragged and dropped the proper files to your Web server account, your URL will be: – filename filenamehttp:// filename –If your menu page is named index, you do not have to include the filename in your URL. The browser automatically searches for a file named index if no filename is provided. You can update your website anytime by simply dragging and dropping the updated files to your Web server account. Make sure that you use FTP to accomplish this. You can update your website anytime by simply dragging and dropping the updated files to your Web server account. Make sure that you use FTP to accomplish this.

Exercises Exercise 1 can be found at the following URL: Exercise 1 can be found at the following URL: – er/ er/ er/ Exercise 2 will show you how to upload your page onto the webserver and how to determine your URL Exercise 2 will show you how to upload your page onto the webserver and how to determine your URL Exercise 3 can be found at the following URL Exercise 3 can be found at the following URL – er/ er/ er/ Exercise 4Make your own classroom webpage. Exercise 4Make your own classroom webpage.