Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Site Design & Management Class Three February 12, 2003 Pam Scanlon.

Published bySilvia Davidson Modified over 9 years ago

Similar presentations

Presentation on theme: "Web Site Design & Management Class Three February 12, 2003 Pam Scanlon."— Presentation transcript:

1 Web Site Design & Management Class Three February 12, 2003 Pam Scanlon

2 Agenda Homework Review and more……. Review Lists & Images Break In class assignment Break Discuss Readings & Links etc! Assign Next Week’s Homework

3 Homework Review There are issues with copied assignments. This is not acceptable. (can be a cause for academic dismissal) Most of you did extremely well Please do not go ahead unless you ask. Review FTP for those who need it.

4 Homework Tips Remember to close your preview your file. This will help you find your errors Open and close tags properly. Nesting – wrong – correct

5 Lists Unordered Lists Ordered Lists Definition Lists Combined Lists

6 Unordered Lists Unordered Lists resemble bullet lists. The … tags encase list items. The tag creates items with a default bullet type of DISC.

7 Unordered Lists Kick Off … The … tags encase list items.

8 Unordered Lists Kick Off Field Goal Extra Point Punt The tag creates list items.

9 Unordered List TYPE Attribute The TYPE attributes changes the bullet type. Available types are:  DISC (default)  CIRCLE  SQUARE TYPE can be used with the or tags.

10 Unordered List: TYPE Attribute

11 Unordered List : TYPE Attribute

12 Unordered List : TYPE Attribute

13 Ordered Lists Ordered Lists use a ranking principle. The … tags encase list items. The tag creates items with a default decimal ordering.

14 Ordered Lists Arsenic and Old Lace …

15 Ordered List: TYPE Attribute The TYPE attributes changes the ordering. Available types are:  1 (Decimal: default)  A (Uppercase)  a (Lowercase)  I (Uppercase Roman)  i (Lowercase Roman) TYPE can be used with the or tags.

16 Ordered Lists : TYPE Attribute is for aardvark …

17 Ordered List: START Attribute The START attribute changes the beginning value. The value must be decimal. START works with all types.

18 Ordered Lists: START Attribute <OL TYPE = “a” START = “4”> DINOSAUR … The list begins with “d” although the starting value is 4.

19 Ordered Lists: VALUE Attribute Shut the door …

20 Nested Ordered Lists Tie Your Shoes. Make a bow. … … The default type for all nested ordered lists is Decimal.

21 Definition Lists The … encase a definition list. The … define a term. The … encase a definition.

22 Definition Lists … The … tags encase a definition list.

23 Definition Lists Ice Bowl The … tags define a term.

24 Definition Lists The championship... The … tags contain the definition.

25 Nested Lists Unordered lists can be placed inside ordered lists.

26 Nested Lists Unordered lists can be placed inside definition lists.

27 Images: Introduction Image Formats:.gif,.jpg only (do not use.bmp) The Tag Images as Backgrounds Protocols The LINK, ALINK, VLINK Attributes. The Tag

28 GIFS vs. JPEG Images Use a Gif when it’s mostly solid colors Use a JPEG for photos and images with lots of gradations. Experiment with both so you know the difference. Make sure you optimize your images’ file size. I will delete large images from the server!

29 GIF Images This wood duck carving is stored in the GIF format. It requires 8K bits for storage.

30 JPEG Images This picture of Glacier Park uses the JPEG format. It requires 92K bits of storage.

31 Images The background is a grayscale GIF file. The title and Green Teal buttons are GIF files.

32 Images As Backgrounds <BODY BACKGROUND = “woody2Back.gif”> The BACKGROUND attribute uses an image for the backgound.

33 The Tag: Attributes SRC : The source file ALT : Alternate text for non-graphic browsers WIDTH : Width in pixels of image HEIGHT : Height in pixels of image BORDER : Link images have a default blue border of 1 pixel. If you want to have your image be a link with no border, you must specify border=“0”

34 The Tag: Final REMEMBER!!!! Changing the width and height attributes of an image tag does not change the file size of the image.

35 Break/In Class Assignment You will do either Case 1 on page 1.39 or Case 2 on page 1.40 I will tell you which one you will do. If you do not finish this in class you should finish it for homework.

36 LINKS Puts the “link” in hyperlink Gets you from one place to another!! Make a simple link from the class index page to your home page.

37 The http Protocol http:// stands for HyperText Transfer Protocol. This protocol is commonly used for web pages.

38 The mailto Link email joe You can also specify the subject line by writing email joe

39 Links By default, all links are underlined. IE uses blue for unvisited links, green for visited. Netscape uses blue for unvisited links, purple for visited.

40 Links <A HREF = “http://www.prenhall.com/”> Prentice Hall The … tags are used to encase a link.

41 Links Colors <BODY BGCOLOR = “white” LINK = “#FF0000” VLINK = #996666” ALINK = “#FF9966”> The link colors can be changed in the tag.

42 LINK, ALINK, and VLINK LINK changes the color of unvisited links. VLINK changes the color of visited links. ALINK changes the color of active links.

43 Absolute Links An absolute link contains the full URL of the page: For example, Prentice Hall

44 Relative Links A relative link can be used if the page is in the user’s directory. For example, Trout Recipes NOTE: If you have a properly designed site structure, you should be able to use relative links for everything except external pages. DO NOT GET LAZY and use absolute links when you don’t need to.

45 Anchor Links A fragment is a link within a page. The tag creates a anchor link: Question 1 The tag accesses a fragment: Question 1 Our class website uses Anchor Links

Download ppt "Web Site Design & Management Class Three February 12, 2003 Pam Scanlon."

Similar presentations

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Introduction to HTML Lists, Images, and Links. Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save.

Introduction to HTML Lists, Images, and Links. Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save.
LIST- HYPERLINK- IMAGES

LIST- HYPERLINK- IMAGES
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
ETT 429 Spring 2007 Web Design I.

ETT 429 Spring 2007 Web Design I.
2004-2005 Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014.

Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.

HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.

Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.

Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.

Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.

Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
Chapter 2 HTML (Hypertext Markup Language) Part I.

Chapter 2 HTML (Hypertext Markup Language) Part I.
1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

Similar presentations

Ads by Google