Presentation is loading. Please wait.

Presentation is loading. Please wait.

Add Images, Color & Extras Making your HTML more exciting.

Published by Modified over 9 years ago

Similar presentations

Presentation on theme: "Add Images, Color & Extras Making your HTML more exciting."— Presentation transcript:

1

2 Add Images, Color & Extras Making your HTML more exciting

3 Getting Images zFind on the Internet zMake ourselves zDigitize

4 Getting Images zFree or Fee -- be careful zhttp://webcom.missouri.edu/ilibrary/http://webcom.missouri.edu/ilibrary/ zhttp://www.corbis.comhttp://www.corbis.com zhttp://www.barrysclipart.comhttp://www.barrysclipart.com zhttp://www.hemera.comhttp://www.hemera.com zOthers you have used???

5 Getting Images zYou create ySoftware packages xPhotoshop, PaintShop Pro, PrintShop yCheck out products on Amazon.com xBig Box of Art

6 3 files per image zMaster image yHigh quality--stored offline zAccess image yFull screen--Web delivery zThumbnail image ySmall view-- Web delivery

7 TIFF (.TIF) zUsed for master image zReproduction quality zFor future use zUncompressed zUsually large file - stored offline zExample: joplinscore.tif

8 JPEG (.jpg) zPhotographs zUsed often on web pages zCompressed zColors-- up to 16.7 million zLarger files than.gif zExample: joplinscore.jpg

9 GIF (.gif) zUse for line drawings, logos, icons zSupports animation zOnly understands 256 colors (8 bit) zCan be transparent (web page background shows through) zUsually smaller file than other formats zExample: joplinscore.gif zPNG

10 File Formats zUncompressed yTIFF: Tagged Image File Format zCompressed yJPEG or JPG: Joint Photographic Experts Group yGIF: Graphics Interchange Format

11 Compression zFile compressions are algorithms used to extract ‘extraneous’ information to make the file smaller zInformation removed zQuality decreases

12 zHTML -- Color zColor zPredefined Color Names zRGB color values (lots of charts on Web)charts

13 Now for some extras zMeta tags zDTD zSpecial characters zComments

14 HTML -- Meta tags zMeta tags z

15 Meta Tags zHow are they used ySearch engine indexing yCan we prevent indexing z yGoogle example (similar info. on Yahoo help) xhttp://www.google.com/remove.htmlhttp://www.google.com/remove.html

16 Now for some extras zDocument Type Definition (long entry above tag defining HTML version used) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

17 More Extras zSpecial charactersSpecial characters zExamples y (nonbreaking space) xSt.&npsp;Louis y& (ampersand) xMilk & Cookies y" (quotation mark) x"Go Cards"

18 More Extras zComment xBegin <!--Nothing below will display x End --> zCheck out source of bengal.missouri.edu/~knottsb

19 More Extras zChecking your html yhttp://validator.w3.orghttp://validator.w3.org yhttp://htmlvalidator.comhttp://htmlvalidator.com yhttp://www.anybrowser.com/siteviewer.htmlhttp://www.anybrowser.com/siteviewer.html

20 HTML -- Let’s Review zHTML’s basic four tags z zDocument Type Definition (long entry above tag defining HTML version used)

21 HTML -- Let’s Review zContainer vs empty tags zContainer ; zEmpty zAttributes (modify HTML tags) z zFour attributes (src, height, width, alt)

22 HTML -- Let’s Review zHeading Elements - varies font size zLevels 1 (largest) to 6 (smallest) z zInserts a line break before and after zParagraph Tag z zInserts a line break before and after

23 HTML -- Let’s Review zLine Break Tag z zManual line break zText formatting z z (would you use???)

24 HTML -- Let’s Review zTables zTags to remember z zTable attributes to remember zcellpadding, cellspacing, border, width, summary, heading zTable data cell attributes to remember zalign, valign, colspan, rowspan

25 Create Your Own (you should be able to do for Portfolio) zDTD zFour required tags zMeta zLink ybookmark zImage zList zCombination of above z Table z Color z Heading z Fonts z Paragraph/Line break z Mailto: z Styles z Combination

Download ppt "Add Images, Color & Extras Making your HTML more exciting."

Similar presentations

The Web Wizards Guide to HTML Chapter Five Working with Images.

The Web Wizards Guide to HTML Chapter Five Working with Images.
Working with Images and HTML

Working with Images and HTML
Using HTML Tables Presenting Information & Layout Control.

Using HTML Tables Presenting Information & Layout Control.
Iframes & Images Using HTML.

Iframes & Images Using HTML.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Tutorial 4: Designing a Web Page with Tables

Tutorial 4: Designing a Web Page with Tables
Images & Tables. Three graphic file types are supported by today's browsers: GIF - Graphic Interchange Format JPEG - Joint Photographic Experts Group.

Images & Tables. Three graphic file types are supported by today's browsers: GIF - Graphic Interchange Format JPEG - Joint Photographic Experts Group.
What is HTML? zThe authoring language of the Web is currently HTML, which stands for HyperText Markup Language. zFuture versions of the Web are likely.

What is HTML? zThe authoring language of the Web is currently HTML, which stands for HyperText Markup Language. zFuture versions of the Web are likely.
What is HTML? zThe authoring language of the Web is currently HTML, which stands for HyperText Markup Language. zFuture versions of the Web are likely.

What is HTML? zThe authoring language of the Web is currently HTML, which stands for HyperText Markup Language. zFuture versions of the Web are likely.
Add Images Making your HTML more exciting Getting Images zFind on the Internet zMake ourselves zDigitize.

Add Images Making your HTML more exciting Getting Images zFind on the Internet zMake ourselves zDigitize.
Instructor: A. Burns 1 HTML Images. Instructor: A. Burns 2 Inserting a Graphic Images can be displayed in two ways: as inline images or as external images.

Instructor: A. Burns 1 HTML Images. Instructor: A. Burns 2 Inserting a Graphic Images can be displayed in two ways: as inline images or as external 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.

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.
Introduction to HTML II Shih-Heng Chin. Preface Structure of a HTML File Elements used frequently Tables.

Introduction to HTML II Shih-Heng Chin. Preface Structure of a HTML File Elements used frequently Tables.
Using HTML Tables.

Using HTML Tables.
More HTML Stuff Making your HTML more exciting HTML -- Let’s Review zHTML’s basic four tags z.

More HTML Stuff Making your HTML more exciting HTML -- Let’s Review zHTML’s basic four tags z.
HTML continues Reviewing what we did last class; Adding some new stuff.

HTML continues Reviewing what we did last class; Adding some new stuff.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.

Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
More HTML Stuff Making your HTML more exciting HTML -- Let’s Review zHTML’s basic four tags z.

More HTML Stuff Making your HTML more exciting HTML -- Let’s Review zHTML’s basic four tags z.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

Similar presentations

Ads by Google