ITI 133 HTML 5 Desktop and Mobile Level
ITI 133: HTML 5 Desktop and Mobile Level I Session 5 - Chapter 8 How to Work with Images www. profburnett. com
Class Outline § Exercise 1 - Basic Skills for Working with Images § Exercise 2 - Advanced Skills for Working with Images § Exercise 3 - Related Skills for Working with Images 9/9/2020 Copyright © Carl M. Burnett 2
Exercise 1 - Basic Skills for Working with Images 9/9/2020 Copyright © Carl M. Burnett 3
Image Types Joint Pictures Engineering Group (JPEG) Image • Photographs • Can Be Compressed • 30% Compression Graphics Interchange Format (GIF) Image Portable Network Graphics • Bitmaps (PNG) • 256 Colors • Compression • Animation • Color Depth • No License Needed 9/9/2020 Copyright © Carl M. Burnett 4
Attributes of the <img> tag § § src – relative or absolute URL alt – alternate text height – height of the image in pixels Width – width of the image in pixels 9/9/2020 Copyright © Carl M. Burnett 5
CSS properties for sizing an image § height - The height property sets the height of an element. (Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element!) § width - The width property sets the width of an element. (Note: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!) § CSS Syntax: height / width : auto|length|initial|inherit; § § § 9/9/2020 Auto - The browser calculates the height. This is default Length - Defines the height in px, cm, etc. % - Defines the height in percent of the containing block Initial - Sets this property to its default value. Inherit - Inherits this property from its parent element. Copyright © Carl M. Burnett 6
The HTML for two images <p><img src="images/students. jpg" alt="teacher and students" height="300" width="400"> <img id="small" src="images/students. jpg" alt="teacher and students"></p> CSS #small { height: 150 px; width: 200 px; } 9/9/2020 Copyright © Carl M. Burnett Web Page Example 7
The property for aligning images vertically • vertical-align W 3 C Exercise Common keywords for the vertical-align property • • • bottom middle top text-bottom text-top 9/9/2020 Copyright © Carl M. Burnett 8
HTML for Web Page with Three Images <h 2>To order now: </h 2> <p><img src="images/computer. gif" alt="web address"> <b>Web: </b> www. murach. com</p> <p><img src="images/telephone. gif" alt="phone"> <b>Phone: </b> 1 -800 -221 -5528</p> <p><img src="images/fax. gif" alt="fax"> <b>Fax: </b> 1 -559 -440 -0963</p> CSS img { vertical-align: middle; margin-right: 10 px; } 9/9/2020 Web Page Example Copyright © Carl M. Burnett 9
The Properties for floating images • float • clear 9/9/2020 W 3 C Exercise Copyright © Carl M. Burnett 10
HTML & CSS for a Web Page <img src="images/students. jpg" alt="teacher and students"> <ul> <li>in college and university MIS programs that focus on providing students with practical, real-world experience</li> <li>by technical institutes and community colleges that focus on the skills that employers are looking for</li> <li>in Continuing Ed and Extension programs where the students are professionals who are expanding their skills</li> </ul> <p id="last">So if your program fits one of those profiles, please take a look at our books. I’ m confident you’ ll discover a new level of structure, clarity, and relevance that will benefit both you and your students. </p> 9/9/2020 Copyright © Carl M. Burnett img { float: left; margin-top: 15 px; margin-bottom: 10 px; } #last { clear: left; } Web Page Example 11
Exercise 2 - Advanced Skills for Working with Images 9/9/2020 Copyright © Carl M. Burnett 12
A web page with figure and figcaption elements 9/9/2020 Copyright © Carl M. Burnett 13
The HTML for the figure and figcaption elements <article> <h 1>Fossil Threads in the Web of Life</h 1> <figure> <img src="images/sampson_dinosaur. jpg" alt="Scott Sampson"> <figcaption>Scott Sampson and friend</figcaption> </figure> <p>What's 75 million years old and brand spanking. . . </p> </article> 9/9/2020 Copyright © Carl M. Burnett 14
The CSS for the figure and figcaption elements figure { float: left; margin-right: 1. 5 em; } figcaption { display: block; font-weight: bold; padding-top: . 25 em; margin-bottom: 1 em; border-bottom: 1 px solid black; } 9/9/2020 Copyright © Carl M. Burnett Web Page Example 15
Thumbnails in a web page Web Page Example 9/9/2020 Copyright © Carl M. Burnett 16
Photo displayed when fifth thumbnail is clicked 9/9/2020 Copyright © Carl M. Burnett 17
The HTML for the thumbnails <h 3>Ram Tap Combined Test</h 3> <p> <a href="p 1. html"><img src="thumbnails/t 1. jpg" alt="Photo 1"></a> <a href="p 2. html"><img src="thumbnails/t 2. jpg" alt="Photo 2"></a> <a href="p 3. html"><img src="thumbnails/t 3. jpg" alt="Photo 3"></a> <a href="p 4. html"><img src="thumbnails/t 4. jpg" alt="Photo 4"></a> <a href="p 5. html"><img src="thumbnails/t 5. jpg" alt="Photo 5"></a> <a href="p 6. html"><img src="thumbnails/t 6. jpg" alt="Photo 6"></a> </p> 9/9/2020 Copyright © Carl M. Burnett 18
An image that’s been rolled over 9/9/2020 Copyright © Carl M. Burnett 19
The HTML for the page The CSS for the image rollover <body> <h 1>Ram Tap Combined Test</h 1> <p id="image 1"></p> </body> 9/9/2020 #image 1 { background-image: url("h 1. jpg"); width: 434 px; height: 312 px; } #image 1: hover { background-image: url("h 2. jpg"); } Copyright © Carl M. Burnett 20
Attribute of the img element that identifies a map element • usemap Attribute of the map element that gives it a name • name Attributes of the area elements of an image map • • href shape coords alt 9/9/2020 Copyright © Carl M. Burnett 21
An image with hotspots created by an image map 9/9/2020 Copyright © Carl M. Burnett 22
The HTML for the image and image map <img src="images/html. gif" alt="HTML and Java. Script books" usemap="#books"> <map name="books"> <area href="html 5. html" alt="HTML 5 book" title="HTML 5" shape="poly" coords="1, 19, 114, 0, 122, 53, 106, 143, 26, 158, 24, 149"> <area href="javascript. html" alt="Java. Script book" title="Java. Script" shape="poly" coords="128, 21, 241, 42, 218, 178, 103, 159"> </map> 9/9/2020 Copyright © Carl M. Burnett 23
Exercise 3 - Related Skills for Working with Images 9/9/2020 Copyright © Carl M. Burnett 24
An image editor as it is used to size an image 9/9/2020 Copyright © Carl M. Burnett 25
Popular Image Editing Software Corel Paint. Shop Pro X 6 Adobe Photoshop Inkscape GIMP MAC Adobe Fireworks 9/9/2020 Pixelmator Copyright © Carl M. Burnett 26
Creative Commons License Symbol Description Attribution CC BY lets others distribute, remix, tweak, and build upon your work, even commercially, as long as they credit you for the original creation. Attribution-Share. Alike CC BY-SA lets others remix, tweak, and build upon your work even for commercial purposes, as long as they credit you and license their new creations under the identical terms Attribution-No. Derivs CC BY-ND allows for redistribution, commercial and non-commercial, as long as it is passed along unchanged and in whole, with credit to you. Attribution-Non. Commercial CC BY-NC lets others remix, tweak, and build upon your work non-commercially, and although their new works must also acknowledge you and be non-commercial, they don’t have to license their derivative works on the same terms. Attribution-Non. Commercial-Share. Alike CC BY-NC-SA lets others remix, tweak, and build upon your work non-commercially, as long as they credit you and license their new creations under the identical terms. Attribution-Non. Commercial-No. Derivs CC BY-NC-ND most restrictive of our six main licenses, only allowing others to download your works and share them with others as long as they credit you, but they can’t change them in any way or use them commercially. 9/9/2020 Copyright © Carl M. Burnett 27
Free Photo Websites 30 Best Websites To Download Free Stock Photos 9/9/2020 Copyright © Carl M. Burnett 28
A web page with favicons The link element that links to the favicon <link rel="shortcut icon" href="images/favicon. ico"> 9/9/2020 Copyright © Carl M. Burnett 29
Popular programs and tools for creating favicons § § Favicon ICO Generator Axialis Icon Workshop Photoshop plug-in Favicon from Pics 9/9/2020 Copyright © Carl M. Burnett 30
Student Exercise 1 1. Complete Exercise 8 -1 on page 291 using Dreamweaver 2. Download link for files for Exercise 8 -1 on website. 3. Upload your HTML pages and CSS files to the live site to preview. 8/1/2014 Copyright © Carl M. Burnett 31
Class Review § § Basic Skills for Working with Images Advanced Skills for Working with Images Related Skills for Working with Images Student Exercise 1 9/9/2020 Copyright © Carl M. Burnett 32
Course Review – Level I § Session I – Tuesday, 9/16/2014 § § § Course Overview Presentation Chapter 1 - Introduction to Web Development Chapter 18 - How to Deploy a Web Site on a Web Server Chapter 17 - How to Design a Web Site Chapter 3 - How to Use HTML to Structure a Web Page § Session 2 - Thursday, 9/18/2014 (In-Class & Online) § Chapter 2 - How to Code, Test and Validate a web page § Chapter 4 - How to Use CSS to Format the Elements of a Web Page
Course Review – Level I § Session 3 – Saturday, 9/20/2014 § Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds § Chapter 6 - How to Use CSS for Page Layout § Session 4 – Tuesday, 9/23/2014 (In-Class & Online) § Chapter 7 - How to Work with Links and Lists § Session 5 – Thursday, 9/25/2014 § Chapter 8 - How to Work with Images § Open Lab 9/9/2020 Copyright © Carl M. Burnett 34
HTML 5 Level II § Session I – Tuesday, 9/30/2014 § § Course Overview Presentation Chapter 9 - How to work with Tables Chapter 10 - How to work with forms Chapter 11 - How to add audio and video to your Web Site § Session 2 - Thursday, 10/2/2014 - (In-Class & Online) § Chapter 12 - How to format web pages for printing § Chapter 13 - How to Use Java. Script to enhance your Web Pages
HTML 5 – Level II § Session 3 - Saturday, 10/4/2014 § Chapter 14 - How to Use j. Query to enhance your Web Page § Chapter 15 - How to Use j. Query Mobile to build mobile web sites § Session 4 – Tuesday, 10/7/2014 (In-Class & Online) § Chapter 16 - Advanced HTML 5 and CSS 3 Features § Session 5 – Thursday, 10/9/2014 § Open Lab
Course Evaluation § http: //webdb. montgomerycollege. edu/internet/wdceevals. cfm § § Course Registration Number (CRN #): 25722 Course Name: HTML 5 Desktop and Mobile Level I Start Date: 9/16/2014 Instructor's Name: Carl M. Burnett 9/9/2020 Copyright © Carl M. Burnett 37
- Slides: 37