1 / 17

Introduction to Web Design

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

declan
Télécharger la présentation

Introduction to Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web Design

  2. 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 • Create a web page using notepad

  3. Anticipatory Set • What are these items?????

  4. Term Definitions • Hyperlink • Browser • HTML • Web page • Website • URL

  5. HYPERLINKS • An 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

  6. BROWSER • A program that enables you to find retrieve and send hypertext and hypermedia documents (Web pages) over the world wide web.

  7. HTML • Hypertext Markup Language is a language that web browsers use to understand how to display the contents of a web page.

  8. WEB PAGE Is 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.

  9. WEBSITE • Is a collection of related web pages which reside on a web server and are linked together by hyperlinks Internet

  10. URL Uniform Resource Locator is the address of an internet file

  11. DESIGN WEB PAGE • The 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.

  12. Fig. 1.0 Structure of Website Fig 1.1 Layout of website

  13. CREATION OF WEBPAGES Starts the page Contains the title, description and other Meta information about a web page Mark Up Tags tell the browser how to display the page . (There open and close tags) Title of page goes here Contains the content of the page Displays a Heading on the page Ends the page

  14. GUIDED PRACTICE INSTRUCTIONS Create a folder on the desktop called “My Website” Open up Notepad. 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> Save the file as AboutMe.html (Change folder options to see extensions and change .txt to .html)

  15. GUIDED PRACTICE Continued 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>

  16. 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”

  17. HOME WORK • Read 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.

More Related