"> My Practice Web Page ">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSE 102 Introduction to Web Design and Programming

Published byWinifred Holmes Modified over 6 years ago

Similar presentations

Presentation on theme: "CSE 102 Introduction to Web Design and Programming"— Presentation transcript:

1 CSE 102 Introduction to Web Design and Programming
XHTML: Images & Character Encoding

2 Practice file for today
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>My Practice Web Page</title> </head> <body> </body> </html>

3 Images To display an image alone in a browser you may use the a tag. Add to your practice page: <p><a href=" William Henry Harrison</a></p> To display an inline image within a page, use img: <img src="URL" width="…"height="…" alt="… "longdesc="…"> URL points to a GIF, JPEG, or PNG img may be placed in any block-level or inline element except pre You should always include alt (including hw1) Add to your practice page: <img src=" "250" height= "300" alt="An elongated William Henry Harrison" > Change the code such that when one clicks on the picture, the browser goes to: This is called a graphical link

4 Organizing your own site images
Place all images inside an images directory Be sure to do this for all assignments Inside your Web pages, you may then reference the images using src="images/…" When you upload your Web pages, upload your entire images directory Save the following file to an images directory and correct the URLs accordingly

5 Text around images You may wrap text around an image
Float the image to the left or right margin Use style="float:right" Add appropriate spacing between the image and text Use style="margin-left:1em" Place the image right before whatever text you wish it to be even with.

6 Add the following to your practice page:
<p><img src=" alt="An elongated William Henry Harrison" style="float:right; margin-left:1em"> <a href=" Henry Harrison</a></p> <p>"Give him a barrel of hard cider and settle a pension of two thousand a year on him, and my word for it," a Democratic newspaper foolishly gibed, "he will sit ... by the side of a 'sea coal' fire, and study moral philosophy. " The Whigs, seizing on this political misstep, in 1840 presented their candidate William Henry Harrison as a simple frontier Indian fighter, living in a log cabin and drinking cider, in sharp contrast to an aristocratic champagne-sipping Van Buren.</p> <p>Harrison was in fact a scion of the Virginia planter aristocracy. He was born at Berkeley in He studied classics and history at Hampden-Sydney College, then began the study of medicine in Richmond.</p> Try moving the image to a new place inside a paragraph, see what happens

7 Additional Ways to align images
Use style="vertical-align:value" Possible values: baseline – aligns baselines of image & text middle – aligns middle of image with middle character in preceding text text-top – aligns top of image with font top of preceding text xx% - raises the bottom of image xx percent of the text line height

8 Image Maps An image map is an image with active areas
when clicked, these areas lead to designated URLs Use map tag, then specify areas using area tags Areas can be specified as rect, poly, circle, or default Specify using shape & coords attributes 0, 0 is top-left coordinate Specify link using href attribute Not placed in body, instead, put it inside head element Assign a name (ex: image_map_name) to your image map Then, inside the body, specify an image and usemap="#image_map_name" attribute

9 Add the following to your practice page:
<head> <map name="usa_map"> <area shape="rect" coords="0,0,290,182" href=" alt="Northwest USA" /> <area shape="poly" coords="290, 182, 580, 0, 580, 182" href=" alt="Northeast USA" /> <area shape="circle" coords="435,273,91" href=" alt="Southeastern USA" /> </map> </head> <body> <img src="images/usa-map-on-blue.gif" usemap="#usa_map" /> …

10 Character Encoding ASCII character set has only 128 different character symbols Each character is assigned a number (0 – 127) Not enough for foreign languages, math symbols, etc … Unicode character set has many more Characters for most languages UTF-8 contains ASCII and then has many more (over 65,000) Specify document uses Unicode with: <?xml version="1.0" encoding="UTF-8" ?> You should always specify that your documents use Unicode, whether they really do or not you may add Unicode characters later

11 Special Symbols Unicode characters may be placed into a document by referencing the Unicode number decimal &#num; or hex &#numb; is in hex Add to your practice file: <p style="font-size:40pt">☯ ☯ </p> HTML & XHTML have provided special shortcut names for many characters <p style="font-size:40pt">Ω Ω</p>

12 QUIZ #1 -- Upload Upload your practice page and your images directory such that the images appear properly You must use relative reference for all local images

Download ppt "CSE 102 Introduction to Web Design and Programming"

Similar presentations

Working with Images and HTML

Working with Images and HTML
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.

Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
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.

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.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.

Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.02.26.

Web Design I Spring 2009 Kevin Cole Gallaudet University
Using images with XHTML Please use speaker notes for additional information!

Using images with XHTML Please use speaker notes for additional information!
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –

Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Images in HTML PowerPoint How images are used in HTML.

Images in HTML PowerPoint How images are used in HTML.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.

Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.

Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu

XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.

HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”

HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”
Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag.

Image Map You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag.
Basic Webpage Design Mark-up html document with images.

Basic Webpage Design Mark-up html document with images.
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 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.
REEM ALMOTIRI Information Technology Department Majmaah University.

REEM ALMOTIRI Information Technology Department Majmaah University.

Similar presentations

Ads by Google