CIS 228 The Internet 1/13/11 Images.

Slides:



Advertisements
Similar presentations
World Wide Web Hyperlinks Servers/Clients Browsers HTML (HyperText Markup Language)
Advertisements

Charmaine NormanCopyright What Is a Web Page Presented by Webpagemaker. Net Left click your mouse to view each frame, Web Page.
Web Development & Design Foundations with XHTML Chapter 4 Key Concepts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Web development  World Wide Web (web) is the Internet system for hypertext linking.  A hypertext document (web page) is an online document. It contains.
Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Internet. History ARPA Backbone IP Addresses –4 numbers separated by dots –Hard to remember –Exclusive club of users.
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) –
Images in HTML PowerPoint How images are used in HTML.
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Computer Science 101 Images in Web Pages. Image Files Two common formats, GIF and JPEG GIF images are more flexible for use as icons JPEG images are sharper.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
CIS133: Internet Development Week 2. Agenda  Homework Review  MYSCC  FTP  HTML Code  In-class  Lab / Homework.
The Web and Web Services Jim Graham NR 621 Spring 2009.
Web Design Basics.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
High Points CSCI 1710 Fall The Internet Packet switching Arpanet Cold War.
The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.
Module: Software Engineering of Web Applications Chapter 2: Technologies 1.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
Kevin Murphy Images and Web Pages Masters Project CS 490.
WRA 210: 10/7/13 IMAGES. TODAY’S AGENDA Reminder about Module 8 - test your links!Module 8 Overview of hierarchies, naming How images work on the web.
CSU EXTENSION LOGOS AND GRAPHICS March CSU Extension Logos   jpg,.png,.eps,.ai.
CIS 228 The Internet Day 4, 9/8/11 Getting on the Internet.
CIS 228 The Internet 1/15/11 HTML URL's Uniform Resource Locator protocol://domain:port/path#fragment Protocol – a scheme for exchanging information.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 4.
The Internet Day 4, 9/8/11 Getting on the Internet
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Exploring Computer Science - Lesson 3-4
Images.
Images.
Exploring Computer Science - Lesson 3-4
Images in HTML PowerPoint How images are used in HTML
2.01 Understand Digital Raster Graphics
DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW
Hosted by Coach Slanina
Some bits on how it works
High Points CSCI 1710 Spring 2016.
Exploring Computer Science - Lesson 3-4
HTML Images CS 1150 Spring 2017.
1.01 Investigate graphic types and file formats.
Web Development & Design Foundations with HTML5 7th Edition
Adding Images.
Web Development & Design Foundations with HTML5 8th Edition
High Points CSCI 1710 Fall 2017.
The Internet Day 8, 9/22 Review HFHTML ch 1 - 7
Graphics (Characteristics 1)
2.01 Understand Digital Raster Graphics
Images.
Images.
HTML Introduction Lecture 8.
Images.
2.01 Understand Digital Raster Graphics
HTML Images CS 1150 Fall 2016.
Pertemuan 1b
Adding Images.
Adding Images.
Lesson 7 Graphics.
Exam Objectives: Identify Design Elements When Preparing Images
Hyperlinks, Images, Comments, and More…
Adding Images.
Adding Images.
Images in HTML PowerPoint How images are used in HTML
High Points CSCI 1210.
Presentation transcript:

CIS 228 The Internet 1/13/11 Images

URL's Uniform Resource Locator protocol://domain:port/path#fragment Protocol – a scheme for exchanging information http (hypertext transfer protocol), ftp, etc. Domain – identifies a server Port – optional number for the protocol to use Path – specifies a file on the server Fragment – specifies a location within the file

Domain Names Top level: com, org, net, edu, mil, … Second level: google.com, cuny.edu, … You can acquire these Provided by Domain Name Registrars ($10/year) Go Daddy, eNom, Tucows, Melbourne IT, Key-Systems Deeper level: www.abc.com, lehman.cuny.edu Administered by the second level name owner Typically, the first name identifies a machine media.lehman.cuny.edu

The Image Element An inline element that identifies an image to display Tag: <img> (an empty element, no closing tag) src attribute, where to find the image Relative path to a local file, or Uniform Resource Locator alt attribute, text to display when src can't be found width attribute, coveys size information to the browser height attribute, also resizes the image Use width (and height) to inform the browser Not to resize an image

Image Processing Software Adobe Photoshop – the gold standard GIMP – open source Photoshop replacement Image Converter – change image file format Pixlr – web based image processor Splashup – web based image processor

Common Image Formats jpg gif (depricated ??) png psd Variable, lossy data compression Good for photos (lots of colors) gif (depricated ??) Good for logos (small number or colors) Transparency png Newer format with transparency (replacing gif ?) psd Proprietary, Adobe Photoshop format