* HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
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.
ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417 Other web pages In own website New window Same page.
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.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Web Technologies Website Development Trade & Industrial Education
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.
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.
Website Development with Dreamweaver
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
CHAPTER 4 LINKS Creating links between pages Linking to other sites links.
What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.
Just Enough HTML How to Create Basic HTML Documents.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Notes Chapter 10—Adding Graphics. There are two kinds of graphics on the Internet: those you can use on your own Web pages, and those you cannot.  Many.
Chapter 2 Designing Web Pages With HTML JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin,
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
AGB 3/26/121 ++=. 2 Yes, believe it or not this is a complete webpage. It has a Head, Title and Body between the start and end HTML Tag.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Links HTML uses a hyperlink to another document on the Web.
Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
REEM ALMOTIRI Information Technology Department Majmaah University.
Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
HTML Basics.
Exploring Computer Science - Lesson 3-4
Exploring Computer Science - Lesson 3-4
Images in HTML PowerPoint How images are used in HTML
Hosted by Coach Slanina
Exploring Computer Science - Lesson 3-4
HTML Images CS 1150 Spring 2017.
Enhance your website.
HTML Images CS 1150 Fall 2016.
Pertemuan 1b
Hyperlinks, Images, Comments, and More…
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

* HTML * ADDING IMAGES AND LINKS

WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution and what is a good resolution for an image on a website? 4. HOW TO EDIT A PICTURE

What We Did Do So Far: HTML BASICS: YOU HAD TO UPLOAD A FILE THAT HAS 1. HEAD 2. BODY 4. HEADERS ….. 5. PARAGRAPH 6. Line break 7. HORIZONTAL LINE 8. tag of course…. IS YOUR FILE UPLODED TO WIKISPACES????

SIZE OF IMAGES ON A WEBPAGE Images are perhaps the largest files a new web designer will be handling. Web pages should download as quickly as possible so…Don’t be oblivious to the file size of images, which can be extremely large. You need to strike a balance between image quality and image size. compressing images helps but to decide what is best suited for yourself is trial and error.

FILE FORMATS Most common : GIFs and JPEGs- Both are compressed formats with different uses. TYPES OF COMPRESSION: LOSSLESS-no loss of info LOSSY-loses some of the info

JPEGs & GIFs & PNGs Lossless compression GIFs-Graphic Interchange Format:- - no more than 256 colors- The lower the number of colors -the lower the file size. GIFS ( & PNGs) SHOULD BE USED FOR IMAGES WITH SOLID COLORS. Lossy compression JPEGs - mathematical algorithm compresses the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image. JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS. Gifs xxx.gif JPEG : xxx.jpg

STANDARD RESOLUTION FFOR WEB 72 PPI PPI =Pixels Per Inch

A Photo Editor can greatly improve an image

YOU CAN EDIT YOUR IMAGES ON VARIOUS PROGRAMS PIC MONKEY (No registration) Or PHOTOSHOP EXPRESS (you have to register but gives you more options!)

WITH PHOTO EDITORS You can… Crop & RESIZE Eliminate red eye Add interesting effects Add text Change coloring Etc…. ENDLESS OPORTUNITIES.

ADDING IMAGES in HTML – IMG TAG xxxx is the name of the image file..jpg (the extension) tells the browser what is the name of the image. The image should be in the same folder of the webpage =the.html File (or in a subfolder /images/xxx.jpg )

HTML Images – Set Height and Width of an Image The height and width attributes are specified in pixels by default: Best to specify both height width attributes If these attributes are set, the space required for the image is reserved when the page is loaded. Otherwise the browser does not know the size of the image. The page layout will change during loading (while the images load).

TIPS USE IMAGES CAREFULLY- Think about loading time MAKE SURE THEY “STAY PUT” IN SAME LOCATION SO THE BROWSER CAN FIND THEM There are many other fancy things you can do to an image… LEARN MORE AT HTMLDOG.COMHTMLDOG.COM OR

DECISIONS, DECISIONS 1: who is your partner 2. What is your website about? Ideas; Music groups; A favorite TV shows; A famous person (Obama, or event) ; A Place you want to visit; A subject that interests you such as cars, musical instruments, computers, games, books, etc.

Today Create a folder for your website on the desktop Start gathering images for your web site by going to google images. Upload 2 images to picmonkey and edit them (upload the before and after images to your wikispace page) Add the edited photos to your html file. Be sure to use width and length, alt and title.

EXTRA CREDIT – MORPH A FACE Upload and Morph a Face here Upload to your wikispaces page for credit. Upload and Morph a Face here andrews.ac.uk/Transformer / I made this guy younger

ADDING HYPER-LINKS VNHS website A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. The HTML tag defines a hyperlink. move the cursor over a link in a Web page ->turn into a little hand. The href attribute, which indicates the link’s destination. An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red