9/7: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources on the WWW image courtesy of

Slides:



Advertisements
Similar presentations
How To Create A Web Page By: Mikeon Briddy & Darrius Jacobs April 10,2006 Mr. Barnett.
Advertisements

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.
CIS101 Introduction to Computing
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
HTML Introduction HTML
Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.
Training 1 FrontPage Creating Web Pages. 2 Objectives 1. Open FrontPage. 2. Create Web pages. 3. Insert pictures 4. Create a hyperlink from a picture.
1.Learning the Terms Learning the TermsLearning the Terms 2.Accessing the Internet from a PC Accessing the Internet from a PCAccessing the Internet from.
9/12: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources on the WWW images courtesy of
Creating a Web Page HTML, FrontPage, Word, Composer.
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
Getting Started with Expression Web 3
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
New Class Name Here EFRT 308 EFRT 460 EFRT 461 WordPress.
Simple Pages for Omeka Lauren Dzura LIS
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Web Technologies Website Development Trade & Industrial Education
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
HTML (Hypertext Markup Language ). Hyperlinks Hyperlinks from text to other sites Write the link, which is visible at the screen Example: Hyperlink to.
Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.
Website Development with Dreamweaver
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
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.
Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.
What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.
Presenter- Deborah Coker  Advantages of having a site  Features you may want to have on your site  Menus, Tabs, and Ribbons  Creating.
15.1 Fundamentals of HTML.
All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.
1/28: The Internet & Website Design What is the Internet? –Parts of the Internet –Internet & WWW basics –Searching the WWW Website design considerations.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
My Documents MarysWebpage 1-WebpageFolders&Files Projects&Assignments MySpinPage SciFairProjPage The folders you should have in “My Documents” are shown.
HTML. Hypertext Markup Language Lesson Objectives 1. We will be able to understand the need for HTML and where it is used 2. We will be edit HTML to.
Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.
Agenda9/11/13  Do Now  Display your name tag and log into your computer  Pre-Assessment Test  Info and Interests  Syllabus and Course Expectations.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
HTML file format  Lesson Objective: Understanding HTML and how it is used to create web pages.  Learning Outcome:  Create a HTML page by interpreting.
Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.
UDL Book Builder for Teachers Image sources: Cast UDL.
How To Design Your Own Webpage Created Especially For You By: Amanda E. Stricklin.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
+ Web Design Terminology Digital Communications III- Frameworks-2.1 Terminology HTML Domain Name Hot Spot Site Maps.
How the Web Works Jenny Burson Courtesy of About Internet for Beginners Learn the Web
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
HTML HyperText Markup Language Victoria E. Kozlek.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.
Uppingham Community College
Welcome Back! To preview what we are going to do this afternoon, please go to this website Read the announcement on the.
Web software.
A guide to HTML.
Web Page Design ICT Ms. McGrew.
Cheat Sheet CSCI 100 JW Ryder
HTML HYPERTEXT MARKUP LANGUAGE.
Cheat Sheet CSCI 100 JW Ryder
What is HTML?.
Introduction to the ISB Intranet
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
CAII 4.01 Web Page Design Terms List 2.
Presentation transcript:

9/7: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources on the WWW image courtesy of

Why Learn About Webpage Design? It will increase your understanding of design concepts in general It will increase awareness of customer needs It will help you understand webpage navigation. images courtesy of

Website design considerations Ease of navigation –no dead links, no dead endsno dead links –logical layout Proper labeling –bottom of each page Page size: consider the default screen size of 640x480 Speedy downloading –“fat” page = unvisited page“fat” page –image considerations

Hypertext Markup Language just a wee little page This is a web page. This is italics, bold face, and underlined. Return from whence you came... Show it

HTML elements Header: page elements that are not in the body. Title: shown in the blue bar at the top of the window. Metatags: keywords, language settings, etc. Body: what appears in the main window of the browser. Tags: pairs of markers that surround elements for formatting. Hyperlink: reference to a different file or fragment: IMG: hyperlink reference to an image file.

Resources on the Web Webpagesthatsuck.com “learn good design from looking at bad design”Webpagesthatsuck.com NCSA’s tutorial on HTML Guide to Creating a Successful Website

Building a Web Page Next homework –web page on a subject of your choice –Should include (at least) 1 page, 4 pictures, and 4 links to other web pages. –Should follow guidelines for good design. –Should be posted on a web site that advertises “free website hosting,” such as GeoCities, Xoom.com, Angelfire, Tripod, Homestead, etc.GeoCitiesXoom.com AngelfireTripodHomestead

Suggestion: GeoCities With a browser, access Click on the “build a webpage” graphic. Set up an account with Yahoo! if you don't have one already. Record your name & password. Click on Yahoo Page Builder, and the New folder icon. Use the icons on the page builder to design and create your web page. When finished designing your page, click the Save icon. This will automatically upload the page to the GeoCities website. Record the URL for your convenience. To edit your page, return to the GeoCities home page and click on the “Edit Web Page” graphic.