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

Slides:

Advertisements

Similar presentations

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

Advertisements

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

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.

Introduction to HTML 2004 CIS101. 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

ETT 429 Spring 2007 Web Design I.

Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.

CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.

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.

Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Creating a Web Page HTML, FrontPage, Word, Composer.

Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.

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

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.

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.

Web Design-Lecture2-QN-2003 Web Design Microsoft FrontPage®

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 

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.

Lecture 2 Building Web Pages 1 Lecture 2  Building Web pages  Languages and programs  HTML - Hyper Text Markup Language  Netscape’s Composer  MicroSoft.

15.1 Fundamentals of HTML.

1/28: The Internet & Website Design What is the Internet? –Parts of the Internet –Internet & WWW basics –Searching the WWW Website design considerations.

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.

CO1552 – Web Application Development Linking Pages - The Basis of the Web.

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.

How To Design Your Own Webpage Created Especially For You By: Amanda E. Stricklin.

CPS Today’s topics Basic HTML The Internet Upcoming ä Networks and the Internet ä Writing programs in pseudocode Reading Great Ideas Chapters 1,

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.

Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.

+ 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

Chapter 8 HTML Editors. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors Text editors don't have word processing features.

HTML HyperText Markup Language Victoria E. Kozlek.

Writing Web Pages in HTML HTML.1 The Web  Lots of computers connected together in a collection of networks  HyperText Markup Language (HTML) is a common.

CompSci Today’s topics Basic HTML  The basis for web pages  “Almost” programming Upcoming  Programming  Java Reading Great Ideas Chapters 1,

CompSci 1 Lecture 2 HTML Webpages. Today’s Topics Basic HTML The basis for web pages “Almost” programming Upcoming Programming Java Reading Great Ideas.

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.

Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

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

Online PD Basic HTML The Magic Of Web Pages

Uppingham Community College

Lesson Objectives Lesson Outcomes

Cheat Sheet CSCI 100 JW Ryder

Cheat Sheet CSCI 100 JW Ryder

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/12: HTML & Website Design Website design considerations HTML (Hypertext Markup Language) Resources on the WWW images 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

Homework #1: Building a Website Homework details –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,GeoCitiesXoom.com AngelfireTripodHomestead

How to use GeoCities’ PageBuilder With a browser, access Click on “Free web site – Sign up now!” 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.

Alternatives to PageBuilder Microsoft Word Netscape Composer (part of Communicator) DreamWeaver (30-day trial downloadable from Macromedia.com) Lots and lots of other programs… Upload the files you create to GeoCities using FTP Manager

Homework #1: Building a Website Homework details –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,GeoCitiesXoom.com AngelfireTripodHomestead