 Every aspect of a Web Page should reflect the goals that led you to create the page in the first place. Not only should the text and graphics themselves.

Slides:



Advertisements
Similar presentations
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Advertisements

Working with Images and HTML
Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.
Internet Basics & Way Beyond!
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Web Development & Design Foundations with XHTML Chapter 4 Key Concepts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
Add Images to Improve Your Presentation Day 8. You will learn to Understand Graphics Formats Find Graphics Create Your Own Images Insert an Image on Your.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.
Computer Science 1611 Internet & Web Creating Webpages with Style Hypertext and the HTML Markup Language (continued)
Using HTML Tables.
Marking Up With Html: A Hypertext Markup Language Primer
Chapter 6 Working with Frames.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Using HTML to Create Tables in Web pages Connie Lindsey November 2005.
Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,,
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Adding Images & Working with Images Unit 2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
ITP 104.  While you can do things like this:  Better to use styles instead:
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
Getting Started with HTML Please use speaker notes for additional information!
CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:
Computer Science 101 Images in Web Pages. Image Files Two common formats, GIF and JPEG GIF images are more flexible for use as icons JPEG images are sharper.
Graphics Basics Two forces are always at odds when you post graphics and multimedia on the Internet. Your eyes and ears want everything to be as detailed.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.
Web Development Lecture # 09 Text Formatting in HTML.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
1 Start TextEdit. 2 Creating a Home Page  A home page is the main page of a Web site –Visitors usually view the home page first –Identify the purpose.
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
REEM ALMOTIRI Information Technology Department Majmaah University.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
Part 4 Text & Fonts © UNT in partnership with TEA1IT: Web Technologies - HTML Scripting.
CNIT 131 HTML5 - Tables.
CSS Layouts: Grouping Elements
Linking With Graphics INP150: Basic HTML March 25, 2002.
COMPUTING FUNDAMENTALS
Chapter 3 Images.
Web Development & Design Foundations with HTML5 7th Edition
Using HTML Tables SWBAT: - create tables using HTML
Attribute of heading, <p> and <hr> tag
Attribute of heading, <p> and <hr> tag
Attribute of heading, <p> and <hr> tag
Presentation transcript:

 Every aspect of a Web Page should reflect the goals that led you to create the page in the first place. Not only should the text and graphics themselves communicate your message, but the way you fit those elements together can make an enormous impact on the reader’s perceptions of you and your company.  There is a checklist to help you think about the key design elements of a Web Page.

Things to ConsiderSuggested Guidelines Text ContentBetween 100 and 500 words per page Text BreaksA headline, rule, or image every 40 to 100 words (except in long articles or stories) Page lengthTwo to four screens (at 640x480) File sizeNo more than 50KB per page, including images; animated GIFs can be up to 100KB per page SpeedFirst screen of text and key images appear in less than 3 seconds ColorsTwo to four thematic colors dominant

Things to ConsiderSuggested Guidelines FontsNo more than three fonts (in graphic and text) Blank spaceBackground should show on at least 50 percent of page ContrastNo color in background should be close to text color Tone and styleAll text and graphics consistent in mood and theme Overall ImpactPage as a whole should appear balanced and attractive ColorsTwo to four thematic colors dominant

 Three different ways to add space between images and paragraphs  Use small, totally transparent images to leave room between other things.  When you wrap text around an image by using, you can skip past the bottom of that image at any time with or. If you have images on both the right and left, you can type to go past both of them.  You can add extra space on the left and right sides of any image with hspace. To add space on the top and bottom sides, use vspace.

 The tags also include a border attribute, which enlarges the rectangular border around images. The border is normally one pixel thick for any image inside an link.  The most popular use of the border attribute is making the image border disappear completely by typing border=“0”.  The color of the border will be the same as the color of any text links.

 Because text moves over the Internet much faster than do graphics, most Web browsers will display the text on a page before the images.  Then include those dimensions in the tag. 

TagAttributeFunction Inserts an inline image src=“…”The address of the image align=“…”Determines the alignment of the given image vspace=“…”The space between the image and the text above or below it hspace-=“…”The space between the image and the text to its left or right. width=“…”The width, in pixels, of the image. If width is not the actual width, the image is scaled to fit.

TagAttributeFunction height=“…”The height, in pixels, of the image. If height is not actual height, the image is scaled to fit. border=“…”Draws a border of the specified value in pixels to be drawn around the image. In case the images are also links, border changes the size of the default link border. A line break. clear=“…”Causes the text to stop flowing around any images. Possible values are right, left, all.

 How would you wrap text around the right side of an image, leaving 40 pixels of space between the image and the text?  How could you insert exactly 80 pixels of blank space between two paragraphs of text?  If you have a circular button that links to another page, how do you prevent a rectangle appearing around it?  What four attributes should you always include in every tag as a matter of habit?