/
HTML Images CS 1150 Fall 2016 HTML Images CS 1150 Fall 2016

HTML Images CS 1150 Fall 2016 - PowerPoint Presentation

test
test . @test
Follow
354 views
Uploaded On 2018-12-27

HTML Images CS 1150 Fall 2016 - PPT Presentation

The lt img gt Element To add an image to a webpage you need the lt img gt element The lt img gt element is an empty element which means there is no closing tag All lt img gt elements should contain attributes describing the image ID: 746234

images image html img image images img html element pixels title file attribute attributes alignment text alt src https

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "HTML Images CS 1150 Fall 2016" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

HTML Images

CS 1150 Fall 2016Slide2

The <img

> Element

To add an image to a webpage, you need the <

img

> element

The <

img

> element is an empty element, which means there is no closing tag

All <

img

> elements should contain attributes describing the image

The

src

attribute tells the

brower

where it can find the image file

The alt attribute provides a text description of the image which describes the image if you cannot see it

The title attribute provides additional information about the image. Most browsers will display the title in a tooltip when the user hovers over the imageSlide3

More Attributes for the <

img

> Element

Often, you will see the <

img

> element described by the following attributes

Height – this specifies the height of the image in pixels

Width – this specifies the width of the image in pixels

The size of images is increasingly being specified using CSS rather than HTMLSlide4

An Image Example

<

img

src

="images/kitten.jpg" alt="Kitten" title="kitten“ />

Example file:

https://cs.mtsu.edu/~crn2k/public/courses/1150/image.html

Slide5

Image Alignment

The align attribute was commonly used to indicate how the other parts of a page should flow around an image

Left – aligns the image to the left, allowing the text to flow around its right-hand side

Right – aligns the image to the right, allowing the text to flow around its left-hand side

Example file:

https://cs.mtsu.edu/~crn2k/public/courses/1150/image_align.html

This has been removed from HTML5 and new websites should use CSS to control the alignment of images

We will use HTML image alignment until we learn how to align images with CSSSlide6

Tips for Adding Images

Save images in the right format. Most images found on websites are .jpg, .

png

, or .gif format

Save images in the right size. The image should be the same width and height that it will appear on the website, measured in pixels.

Measure images in pixels. When you are saving images for use on the web, make sure you measure the image in terms of pixels. Slide7

Using an Image as a Link

To use an image as a link, nest the <

img

> tag inside the <a> tag

<a

href

=“https://en.wikipedia.org/wiki/Smile”> <

img

src

=“smile.jpg” alt=“Smiley Face” title=“Smiley Face”> </a>

Example file: Slide8

Helpful Links for Website Images

http://

www.w3schools.com/html/html_images.asp