Introduction to Web Design
17
Introduction to Web Design
description
Introduction to Web Design. Objectives. At the end of this session students will: Define the following terms in two sentences or less Website Web page Browser Html URL Hyperlink Explain the relationship between websites, web pages and browsers Design web page - PowerPoint PPT Presentation
Transcript of Introduction to Web Design
Introduction to Web Design
ObjectivesAt the end of this session students will:
Define the following terms in two sentences or less Website Web page Browser Html URL Hyperlink
Explain the relationship between websites, web pages and browsers
Design web pageCreate a web page using notepad
Anticipatory SetWhat are these items?????
Term DefinitionsHyperlinkBrowserHTMLWeb pageWebsite URL
HYPERLINKSAn element in an electronic document that
links to another place in the same document or to an entirely different document.
The image below is a hyperlink which links to the Term Definition Slide
BROWSERA program that enables you to find retrieve
and send hypertext and hypermedia documents (Web pages) over the world wide web.
HTMLHypertext Markup Language is a language
that web browsers use to understand how to display the contents of a web page.
WEB PAGEIs an HTML document on the World Wide Web often hyperlinked to other documents or files. This document is then translated by the web browser which renders the image you see before you.
WEBSITE Is a collection of related web pages which
reside on a web server and are linked together by hyperlinks
Internet
URLUniform Resource Locator is the address of an internet file
DESIGN WEB PAGEThe design of a website depends on the
purpose and the intended users of the site. They impact on the structure of the website
and the layout and content that make up the pages of the site.
Planning the layout and structure before hand is very important.
The structure of most websites is hierarchical with links in each page to other pages or documents.
Home Page
About MeFavorite Websites Career
Plans
LOGO HEADINGSMENU
CONTENT
Fig. 1.0 Structure of Website
Fig 1.1 Layout of website
CREATION OF WEBPAGES
Mark Up Tags tell the browser how to display the page . (There open and close tags)
Starts the page
Contains the content of the page
Title of page goes here
Ends the page
Contains the title, description and other Meta information about a web page
Displays a Heading on the page
GUIDED PRACTICEINSTRUCTIONS
1. Create a folder on the desktop called “My Website”2. Open up Notepad.3. Type
<HTML> <HEAD> <TITLE> About Me </TITLE> </HEAD>
<BODY> <H1>ME</H1> <P> Type a paragraph about yourself here</P>
<BR><A HREF=" MyWebsites.html">Go To Favorites Websites
Page </A><BR> <A HREF="CareerPlans.html ">Go To Career Plans
Page</A>
</BODY></HTML>
4. Save the file as AboutMe.html (Change folder options to see extensions and change .txt to .html)
GUIDED PRACTICE Continued
5. Create a new file in Notepad called “MyWebsites.html” in the “My Website” Folder.
6. Type
<HTML> <HEAD> <TITLE> Favorite Websites </TITLE> </HEAD>
<BODY> <H1>MY FAVORITES</H1> <P> Type a paragraph about your favorite websites here</P>
<BR><A HREF=" AboutMe.html">Go To About Me Page </A><BR> <A HREF="CareerPlans.html ">Go To Career Plans
Page</A>
</BODY></HTML>
GUIDED PRACTICE Continued
7. Create a new file in Notepad called “CareerPlans.html” in the “My Website” Folder.
8. Type
<HTML> <HEAD> <TITLE> Career Plans </TITLE> </HEAD>
<BODY> <H1>MY PLANS</H1> <P> Type a paragraph about your future plans</P>
<BR><A HREF=" AboutMe.html">Go To About Me Page </A><BR> <A HREF=“MyWebsites.html ">Go To Favorite Websites
Page</A>
</BODY></HTML>
9. Open up “About Me.html” using Internet Explorer.
10. Click on the text “Go To Favorite Websites Page”
HOME WORKRead Log On To IT Chapter 10, Introduction to web page design and do all questions at the end. Create three(3) web pages of your choice and link them together using notepad.
