Images can set the tone for a site in less time than it takes to read a description. CHOOSING IMAGES FOR YOUR SITE.

Slides:



Advertisements
Similar presentations
Working with Images and HTML
Advertisements

Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Iframes & Images Using HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
CIS101 Introduction to Computing Week 07. Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class.
Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with.
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.
AdvWeb-1/12 DePaul University SNL 262 Web Page Design Chapt 10 - Putting Graphics on A Web Page Instructor: David A. Lash.
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.
Creating the pages Part Five Graphics. File Format Basics You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format,
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
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.
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.
IT Introduction to Website Development Welcome!
Chapter 7 Graphics and Color. 2 Principles of Web Design Chapter 7 Objectives Understand the differences between the Web-based image file formats - GIF,
Digital Photography February 8, aphytips/composition.htm 2 The Rules of Composition Rule of Thirds Simplicity.
XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
CHAPTER 4 LINKS Creating links between pages Linking to other sites links.
Microsoft FrontPage 2003 Illustrated Complete Working with Pictures.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 4 Key Concepts.
Adding Images Learning Web Design: Chapter 7. Using an Image Images have many purposed on a Web site Used as a static image To add illustration: ex. A.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.
Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it.
1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.
ECA 228 Internet/Intranet Design I HTML Tags. ECA 228 Internet/Intranet Design I anchor tags Adds a link to the web page Anything placed between the anchor.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
REEM ALMOTIRI Information Technology Department Majmaah University.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
Part 4 Text & Fonts © UNT in partnership with TEA1IT: Web Technologies - HTML Scripting.
Images.
Images.
Inserting and Working with Images
Hosted by Coach Slanina
HTML Images CS 1150 Spring 2017.
Chapter 3 Images.
Web Development & Design Foundations with HTML5 7th Edition
Adding Images.
Images.
Images.
DREAMWEAVER MX 2004 Chapter 4 Working with Images
Images.
HTML Images CS 1150 Fall 2016.
Attribute of heading, <p> and <hr> tag
Adding Images.
Attribute of heading, <p> and <hr> tag
Adding Images.
Lesson 7 Graphics.
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
Adding Images.
Attribute of heading, <p> and <hr> tag
Adding Images.
Presentation transcript:

Images can set the tone for a site in less time than it takes to read a description. CHOOSING IMAGES FOR YOUR SITE

Images are subject to copyright but there are stock photography sites where you can buy them. CHOOSING IMAGES FOR YOUR SITE

If a page shows several photos of products or members of a team, keep them consistent. CHOOSING IMAGES FOR YOUR SITE

STORING IMAGES ON YOUR SITE

HTML ADDING IMAGES

HTML ADDING IMAGES

HTML ADDING IMAGES

HTML ADDING IMAGES

RESULT

HTML HEIGHT & WIDTH OF IMAGES

HTML HEIGHT & WIDTH OF IMAGES

HTML HEIGHT & WIDTH OF IMAGES

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. WHERE TO PLACE IMAGES IN YOUR CODE

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. WHERE TO PLACE IMAGES IN YOUR CODE

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. WHERE TO PLACE IMAGES IN YOUR CODE

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES HORIZONTALLY

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES HORIZONTALLY

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES HORIZONTALLY

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES VERTICALLY

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES VERTICALLY

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES VERTICALLY

RESULT

HTML There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys. OLD CODE: ALIGNING IMAGES VERTICALLY

RESULT

IMAGE FORMATS: JPEG

IMAGE FORMATS: GIF

Create each image the same width and height as you would like it to appear on your website. IMAGE DIMENSIONS

Create each image the same width and height as you would like it to appear on your website. IMAGE DIMENSIONS

If an image has the wrong dimensions, it can look squished. IMAGE DIMENSIONS

If an image is too small, it can look blurry when shown bigger. IMAGE DIMENSIONS

ANIMATED GIF

STRAIGHT TRANSPARENT GIF TRANSPARENCY

DIAGONAL TRANSPARENCY PNG STRAIGHT

DIAGONAL ROUND TRANSPARENCY PNG

ROUNDSEMI-OPAQUE TRANSPARENCY PNG

DROP-SHADOWSEMI-OPAQUE TRANSPARENCY PNG

HTML Sea otters hold hands when they sleep so that they don’t drift away from each other. HTML5: FIGURE & FIGURE CAPTION

HTML Sea otters hold hands when they sleep so that they don’t drift away from each other. HTML5: FIGURE & FIGURE CAPTION

HTML Sea otters hold hands when they sleep so that they don’t drift away from each other. HTML5: FIGURE & FIGURE CAPTION

RESULT

The element is used to add images to a web page. SUMMARY

You must always specify an src attribute to indicate the source of an image and an alt attribute to describe the content of an image. SUMMARY

You should save images at the size you will be using them on the web page and in the appropriate format. SUMMARY

Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs. SUMMARY