This is the Main Heading

This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.

This is a Sub-Heading

Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).

Another Sub-Heading

Here you can see another sub-heading.

This is the Main Heading

This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.

This is a Sub-Heading

Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).

Another Sub-Heading

Here you can see another sub-heading.

and

and

and

and closing

and

and

left-angle bracket (less-than sign) RIGHT-angle bracket (MORE-than sign) Character Opening Tag 24STRUCTURE The terms "tag" and "element" are often used interchangeably. Strictly speaking, however, an element comprises the opening tag and the closing tag and any content that lies between them.

Paragraph in English

Paragraphe en Français

This is the Body of the Page

Anything within the body of a web page is displayed in the main browser window.

The Story in the Book

Chapter 1

Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of Nature, New Scientist, and all the other scientific journals her work had appeared in, was a well thumbed copy of On The Road. It had been Molly's favorite book since college, and the longer she spent in these four walls the more she felt she needed to be free.

She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that Work is the refuge of people who have nothing better to do. Although many considered her pioneering work, unraveling the secrets of the llama DNA, to be an outstanding achievement, Molly did think she had something better to do.

The ordered list is created with the
element.
1. Each item in the list is placed between an opening
2. tag and a closing
tag. (The li stands for list item.) Browsers indent lists by default. Sometimes you may see a type attribute used with the
element to specify the type of numbering (numbers, letters, roman numerals and so on). It is better to use the CSS list- style-type property covered on pages 333-335.
1. Chop potatoes into quarters
2. Simmer in salted water for 15-20 minutes until tender
3. Heat milk, butter and nutmeg
4. Drain potatoes and mash
5. Mix in the milk mixture
chapter-03/ordered-lists.html HTML Ordered Lists Article 66LISTS 66LISTS Result
• 1kg King Edward potatoes
• 100ml milk
• 50g salted butter
• Freshly grated nutmeg
• Salt and pepper to taste
chapter-03/unordered-lists.htmlHTML Unordered Lists
The unordered list is created with the
element.
• Each item in the list is placed between an opening
• tag and a closing
tag. (The li stands for list item.) Browsers indent lists by default. Sometimes you may see a type attribute used with the
element to specify the type of bullet point (circles, squares, diamonds and so on). It is better to use the CSS list-style- type property covered on pages 333-335. 67 LISTS

The definition list is created with the

element and usually consists of a series of terms and their definitions. Inside the

element you will usually see pairs of

and

elements.

This is used to contain the term being defined (the definition term).

This is used to contain the definition. Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term. Result

Sashimi

Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce

Scale

A device used to accurately measure the weight of ingredients

A technique by which the scales are removed from the skin of a fish

Scamorze

Scamorzo

An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk)

chapter-03/definition-lists.html HTML Definition Lists Article 68LISTS 68LISTS You can put a second list inside an

element to create a sub- list or nested list. Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too. Result

• Mousses
• Pastries
  • Croissant
  • Mille-feuille
  • Palmier
  • Profiterole
• Tarts

chapter-03/nested-lists.htmlHTML Nested Lists 69 LISTS Example LISTS 70LISTS

Scrambled Eggs

Eggs are one of my favourite foods. Here is a recipe for deliciously rich scrambled eggs.

Ingredients

• 2 eggs
• 1tbs butter
• 2tbs cream

Method

1. Melt butter in a frying pan over a medium heat
2. Gently mix the eggs and cream in a bowl
3. Once butter has melted add cream and eggs
4. Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)
5. When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)

Here you can see a main heading followed by an introductory paragraph. An unordered list is used to outline the ingredients and an ordered list is used to describe the steps. Summary LISTS There are three types of HTML lists: ordered, XX unordered, and definition. Ordered lists use numbers.XX Unordered lists use bullets.XX Definition lists are used to define terminology.XX Lists can be nested inside one another.XX Creating links between pagesXX Linking to other sitesXX Email linksXX Links 4 75 LINKS Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing. You will commonly come across the following types of links: Links from one website to another●● Links from one page to another on the same website●● Links from one part of a web page to another part of the ●● same page Links that open in a new browser window●● Links that start up your email program and address a new ●● email to someone 76LINKS 77 LINKS Links are created using the element. Users can click on anything between the opening tag and the closing tag. You specify which page you want to link to using the href attribute. Writing Links IMDB This is the page the link takes you to Opening link tag This is the text the user clicks on Closing link tag 78LINKS The text between the opening tag and closing tag is known as link text. Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying "click here"). Below you can see the link to IMDB that was created on the previous page. Many people navigate websites by scanning the text for links. Clear link text can help visitors find what they want. This will give them a more positive impression of your site and may encourage them to visit it for longer. (It also helps people using screen reader software.) To write good link text, you can think of words people might use when searching for the page that you are linking to. (For example, rather than write "places to stay" you could use something more specific such as "hotels in New York.") 79 LINKS Result

Movie Reviews:

• Empire
• Metacritic
• Rotten Tomatoes
• Variety

chapter-04/linking-to-other-sites.html HTML Links are created using the element which has an attribute called href. The value of the href attribute is the page that you want people to go to when they click on the link. Users can click on anything that appears between the opening tag and the closing tag and will be taken to the page specified in the href attribute. When you link to a different website, the value of the href attribute will be the full web address for the site, which is known as an absolute URL. Browsers show links in blue with an underline by default. Linking to Other Sites URL stands for Uniform Resource Locator. Every web page has its own URL. This is the web address that you would type into a browser if you wanted to visit that specific page. An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage. Absolute URLs Article 80LINKS 80LINKS Result When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL. If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file. If you have different pages of a site in different folders, then you can use a slightly more complex syntax to indicate where the page is in relation to the current page. You will learn more about these on the pages 81-84. If you look at the download code for each chapter, you will see that the index.html file contains links that use relative URLs. Relative URLs help when building a site on your computer because you can create links between pages without having to set up your domain name or hosting.

• Home
• About
• Movies
• Contact

chapter-04/linking-to-other-pages.htmlHTML Linking to Other Pages on the Same Site When linking to other pages within the same site, you can use relative URLs. These are like a shorthand version of absolute URLs because you do not need to specify the domain name. We will take a closer look at relative URLs on pages 83-84 as there are several helpful shortcuts you can use to write links to other pages on your own website. Relative URLs 81 LINKS Structure The diagram on the right shows the directory structure for a fictional entertainment listings website called ExampleArts. The top-level folder is known as the root folder. (In this example, the root folder is called examplearts.) The root folder contains all of the other files and folders for a website. Each section of the site is placed in a separate folder; this helps organize the files. Relationships The relationship between files and folders on a website is described using the same terminology as a family tree. In the diagram on the right, you can see some relationships have been drawn in. The examplearts folder is a parent of the movies, music and theater folders. And the the movies, music and theater folders are children of the examplearts folder. Homepages The main homepage of a site written in HTML (and the homepages of each section in a child folder) is called index.html. Web servers are usually set up to return the index.html file if no file name is specified. Therefore, if you enter examplearts.com it will return examplearts.com/index .html, and examplearts.com/ music will return examplearts .com/music/index.html. On larger websites it's a good idea to organize your code by placing the pages for each different section of the site into a new folder. Folders on a website are sometimes referred to as directories. Directory Structure If you are working with a content management system, blogging software, or an e-commerce system, you might not have individual files for each page of the website. Instead, these systems often use one template file for each different type of page (such as news articles, blog posts, or products). Editing the template file would change all of the pages that use that template. Do not change any code that is not HTML or you may break the page. 82LINKS Every page and every image on a website has a URL (or Uniform Resource Locator). The URL is made up of the domain name followed by the path to that page or image. The path to the homepage of this site is www.examplearts .com/index.html. The path to the logo for the site is examplearts.com/images/ logo.gif. You use URLs when linking to other web pages and when including images in your own site. On the next page, you will meet a shorthand way to link to files on your own site. The root folder contains: A file called ●● index.html which is the homepage for the entire site Individual folders for the ●● movies, music and theatre sections of the site Each sub-directory contains: A file called ●● index.html which is the homepage for that section A reviews page called ●● reviews .html A listings page called ●● listings .html (except for the DVD section) The movies section contains: A folder called ●● cinema A folder called ●● DVD. Grandparent The examplearts folder is a grandparent of the dvd folder. Parent The examplearts folder is a parent of the music folder. examplearts index.html images logo.gif movies cinema index.html listings.html reviews.html dvd index.html reviews.html index.html music index.html listings.html reviews.html theater index.html listings.html reviews.html Child The music folder is a child of the examplearts folder. Grandchild The dvd folder is a grandchild of the examplearts folder. 83 LINKS When you are linking to a page on your own website, you do not need to specify the domain name. You can use relative URLs which are a shorthand way to tell the browser where a page is in relation to the current page. This is especially helpful when creating a new website or learning about HTML because you can create links between pages when they are only on your personal computer (before you have got a domain name and uploaded them to the web). Because you do not need to repeat the domain name in each link, they are also quicker to write. If all of the files in your site are in one folder, you simply use the file name for that page. If your site is organized into separate folders (or directories), you need to tell the browser how to get from the page it is currently on to the page that you are linking to. If you link to the same page from two different pages you might, therefore, need to write two different relative URLs. These links make use of the same terminology (borrowed from that of family trees) you met on the previous page which introduces directory structure. Relative URLs can be used when linking to pages within your own website. They provide a shorthand way of telling the browser where to find your files. Relative URLs 84LINKS When a website is live (that is, uploaded to a web server) you may see a couple of other techniques used that do not work when the files are on your local computer. For example, you may see the name of a child folder without the name of a file. In this case the web server will usually try to show the homepage for that section. A forward slash will return the homepage for the entire site, and a forward slash followed by a file name will return that file providing it is in the root directory. Relative Link Type Same Folder To link to a file in the same folder, just use the file name. (Nothing else is needed.) Child Folder For a child folder, use the name of the child folder, followed by a forward slash, then the file name. Grandchild Folder Use the name of the child folder, followed by a forward slash, then the name of the grandchild folder, followed by another forward slash, then the file name. Parent Folder Use ../ to indicate the folder above the current one, then follow it with the file name. GrandParent Folder Repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name. example (from diagram on previous page) To link to music reviews from the music homepage: Reviews To link to music listings from the homepage: Listings To link to DVD reviews from the homepage: Reviews To link to the homepage from the music reviews: Home To link to the homepage from the DVD reviews: Home 85 LINKS Result Email Jon chapter-04/email-links.html HTMLmailto: To create a link that starts up the user's email program and addresses an email to a specified email address, you use the element. However, this time the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to. On the right you can see that an email link looks just like any other link but, when it is clicked on, the user's email program will open a new email message and address it to the person specified in the link. Email Links Article 86LINKS 86LINKS Result Internet Movie Database (opens in new window) chapter-04/opening-links-in-a-new-window.htmlHTML target If you want a link to open in a new window, you can use the target attribute on the opening tag. The value of this attribute should be _blank. One of the most common reasons a web page author might want a link to be opened in a new window is if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one. Generally you should avoid opening links in a new window, but if you do, it is considered good practice to inform users that the link will open a new window before they click on it. Opening Links in a New Window 87 LINKS

Film-Making Terms

Arc Shot
Interlude
Prologue



Arc Shot

A shot in which the subject is photographed by an encircling or moving camera

Interlude

A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film

Prologue

A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue

Top

chapter-05/linking-to-a-specific-part.html HTMLAt the top of a long page you might want to add a list of contents that links to the corresponding sections lower down. Or you might want to add a link from part way down the page back to the top of it to save users from having to scroll back to the top. Before you can link to a specific part of a page, you need to identify the points in the page that the link will go to. You do this using the id attribute (which can be used on every HTML element). You can see that the

and

elements in this example have been given id attributes that identify those sections of the page. The value of the id attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two id attributes should have the same value. To link to an element that uses an id attribute you use the element again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to. In this example, links to the

element at the top of the page whose id attribute has a value of top. Linking to a Specific Part of the Same Page Article 88LINKS 88LINKS Result If you want to link to a specific part of a different page (whether on your own site or a different website) you can use a similar technique. As long as the page you are linking to has id attributes that identify specific parts of the page, you can simply add the same syntax to the end of the link for that page. Therefore, the href attribute will contain the address for the page (either an absolute URL or a relative URL), followed by the # symbol, followed by the value of the id attribute that is used on the element you are linking to. For example, to link to the bottom of the homepage of the website that accompanies this book, you would write: Linking to a Specific Part of Another Page 89 LINKS Example LINKS 90LINKS This example is of a web page about film. The

element is used with an id attribute at the top of the page so that a link can be added to take readers from the bottom of the page to the top. There is an email link to allow readers to contact the author of the web page. There are also a number of links to qualified URLs. These link to various film festivals. Below this list is a link to a relative URL which is an "about" page that lives in the same directory.

Film Folk

Festival Diary

Here are some of the film festivals we will be attending this year.
Please contact us if you would like more information.

January

Sundance Film Festival
Park City, Utah, USA
20 - 30 January 2011

February

Tropfest
Sydney, Australia
20 February 2011

About Film Folk

Top of page

Summary LINKS Links are created using the XX element. The XX element uses the href attribute to indicate the page you are linking to. If you are linking to a page within your own site, it is XX best to use relative links rather than qualified URLs. You can create links to open email programs with an XX email address in the "to" field. You can use the XX id attribute to target elements within a page that can be linked to. How to add images to pagesXX Choosing the right formatXX Optimizing images for the webXX Images 5 95 IMAGES There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart. There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional. In this chapter you will learn how to: Include an image in your web pages using HTML●● Pick which image format to use●● Show an image at the right size●● Optimize an image for use on the web to make pages ●● load faster You can also use CSS to include images in your pages using the background-image property, which you will meet on pages 413-420. 96IMAGES 97 IMAGES Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images; these are images you pay to use (there is a list of stock photography websites below). Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website. If you have a page that shows several images (such as product photographs or members of a team) then putting them on a simple, consistent background helps them look better as a group. A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one. Choosing Images for Your Site Images should... Be relevant Convey information Convey the right mood Be instantly recognisable Fit the color palette Stock photos www.istockphoto.com www.gettyimages.com www.veer.com www.sxc.hu www.fotolia.com Online extra We have provided an online gallery that helps you choose the right image for your website. You can find it in the tools section of the site accompanying this book. 98IMAGES If you are building a site from scratch, it is good practice to create a folder for all of the images the site uses. As a website grows, keeping images in a separate folder helps you understand how the site is organized. Here you can see an example of the files for a website; all of the images are stored in a folder called images. On a big site you might like to add subfolders inside the images folder. For example, images such as logos and buttons might sit in a folder called interface, product photographs might sit in a page called products, and images related to news might live in a folder called news. If you are using a content management system or blogging platform, there are usually tools built into the admin site that allow you to upload images, and the program will probably already have a separate folder for image files and any other uploads. Storing Images on Your Site 99 IMAGES Result chapter-05/adding-images.html HTML To add an image into the page you need to use an element. This is an empty element (which means there is no closing tag). It must carry the following two attributes: src This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. (Here you can see that the images are in a child folder called images — relative URLs were covered on pages 83-84). alt This provides a text description of the image which describes the image if you cannot see it. title You can also use the title attribute with the element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image. Adding Images The text used in the alt attribute is often referred to as alt text. It should give an accurate description of the image content so it can be understood by screen reader software (used by people with visual impairments) and search engines. If the image is just to make a page look more attractive (and it has no meaning, such as a graphic dividing line), then the alt attribute should still be used but the quotes should be left empty. Article 100IMAGES 100IMAGES Result You will also often see an element use two other attributes that specify its size: height This specifies the height of the image in pixels. width This specifies the width of the image in pixels. Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading. The size of images is increasingly being specified using CSS rather than HTML — see pages 409- 410 for more information about this. chapter-05/height-and-width-of-images.htmlHTML Height & Width of Images 101 IMAGES

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

---

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

---

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic.Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

chapter-05/where-to-place-images.html HTMLWhere an image is placed in the code will affect how it is displayed. Here are three examples of image placement that produce different results: 1: before a paragraph The paragraph starts on a new line after the image. 2: inside the start of a paragraph The first row of text aligns with the bottom of the image. 3: in the middle of a paragraph The image is placed between the words of the paragraph that it appears in. Where to Place Images in Your Code Article 102IMAGES 102IMAGES Result Where you place the image in the code is important because browsers show HTML elements in one of two ways: Block elements always appear on a new line. Examples of block elements include the

and

elements. If the is followed by a block level element (such as a paragraph) then the block level element will sit on a new line after the imageas shown in the first example on this page. Inline elements sit within a block level element and do not start on a new line. Examples of inline elements include the , , and elements. If the element is inside a block level element, any text or other inline elements will flow around the image as shown in the second and third examples on this page. Block and inline elements are discussed in greater depth on pages 185-186. 103 IMAGES

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

---

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

chapter-05/aligning-images-horizontally.html HTMLalign The align attribute was commonly used to indicate how the other parts of a page should flow around an image. It has been removed from HTML5 and new websites should use CSS to control the alignment of images (as you will see on pages 411-412). I have discussed it here because you are likely to come across it if you look at older code, and because some visual editors still insert this attribute when you indicate how an image should be aligned. The align attribute can take these horizontal values: left This aligns the image to the left (allowing text to flow around its right-hand side). right This aligns the image to the right (allowing text to flow around its left-hand side). Old Code: Aligning Images Horizontally Article 104IMAGES 104IMAGES Result This looks a lot neater than having one line of text next to the image (as shown on the previous example). When you give the align attribute a value of left, the image is placed on the left and text flows around it. When you give the align attribute a value of right, the image is placed on the right and the text flows around it. When text flows right up to the edge of an image it can make it harder to read. You will learn how to add a gap between text and images on pages 313-314 using the CSS padding and margin properties. 105 IMAGES

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

---

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

---

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.

chapter-05/aligning-images-vertically.html HTMLAs you saw on the last page, the align attribute is no longer used in HTML5, but it is covered here because you may see it used in older websites and it is still used in the code created by some visual editors. You can see how to use CSS to achieve the same effects on pages 285-286. There are three values that the align attribute can take that control how the image should align vertically with the text that surrounds it: top This aligns the first line of the surrounding text with the top of the image. middle This aligns the first line of the surrounding text with the middle of the image. bottom This aligns the first line of the surrounding text with the bottom of the image. Old Code: Aligning Images Vertically Article 106IMAGES 106IMAGES The value of top places the first line of text near the top of the image and subsequent lines of text appear under the image. The value of middle places the first line of text near the vertical middle of the image and subsequent lines of text appear under the image. The value of bottom places the first line of text near the bottom of the image and subsequent lines of text under the image. When text flows right up to the edge of an image it can make it harder to read. You will learn how to add a gap between text and images on pages 313-314 using the CSS padding and margin properties. If you would like all of the text to wrap arond the image (rather than just one line of text), you should use the CSS float property discussed on pages 370-372. In older code, you may see the align attribute used with the values left or right to achieve the same effect (as described on the previous page), although its use is no longer recommended. Result 107 IMAGES Three Rules for Creating Images There are three rules to remember when you are creating images for your website which are summarized below. We go into greater detail on each topic over the next nine pages. 1 Save images in the right format Websites mainly use images in jpeg, gif, or png format. If you choose the wrong image format then your image might not look as sharp as it should and can make the web page slower to load. 2 Save images at the right size You should save the image at the same width and height it will appear on the website. If the image is smaller than the width or height that you have specified, the image can be distorted and stretched. If the image is larger than the width and height if you have specified, the image will take longer to display on the page. 3 Use the correct resolution Computer screens are made up of dots known as pixels. Images used on the web are also made up of tiny dots. Resolution refers to the number of dots per inch, and most computer screens only show web pages at 72 pixels per inch. So saving images at a higher resolution results in images that are larger than necessary and take longer to download. 108IMAGES Tools to Edit & Save Images The most popular tool amongst web professionals is Adobe Photoshop. (In fact, professional web designers often use this software to design entire sites.) The full version of Photoshop is expensive, but there is a cheaper version called Photoshop Elements which would suit the needs of most beginners. Other Software Adobe Fireworks Pixelmator PaintShop Pro Paint.net Online Editors www.photoshop.com www.pixlr.com www.splashup.com www.ipiccy.com Online extra Watch videos that demonstrate how to resize images and save them in the correct format using both of these applications. There are several tools you can use to edit and save images to ensure that they are the right size, format, and resolution. Whenever you have many different colors in a picture you should use a JPEG. A photograph that features snow or an overcast sky might look like it has large areas that are just white or gray, but the picture is usually made up of many different colors that are subtly different. Image Formats: JPEG B U I L D D E S I G N C O N C E P T RESEARCH T E S T Image Formats: GIF When a picture has an area that is filled with exactly the same color, it is known as flat color. Logos, illustrations, and diagrams often use flat colors. (Note that photographs of snow, sky, or grass are not flat colors, they are made up of many subtly different shades of the same color and are not as suited to GIF or PNG format.) Use GIF or PNG format when saving images with few colors or large areas of the same color. 113 IMAGES For example, if you have designed a page to include an image that is 300 pixels wide by 150 pixels tall, the image you use should be 300 x 150 pixels. You may need to use image editing tools to resize and crop the image. When sourcing images, it is important to understand how you can alter the dimensions of an image; imagine that you had designed a web page to include an image that is 300 pixels wide by 150 pixels tall: The images you use on your website should be saved at the same width and height that you want them to appear on the page. Image Dimensions REDUCING IMAGE SIZE You can reduce the size of images to create a smaller version of the image. Example: If your image is 600 pixels wide and 300 pixels tall, you can reduce the size of the image by 50%. Result: This will create an image that is quicker to download. INCREASING IMAGE SIZE You can't increase the size of photos significantly without affecting the image quality. Example: If your image is only 100 pixels wide by 50 pixels tall, increasing the size by 300% would result in poor quality. Result: The image will look blurry or blocky. CHANGING SHAPE Only some images can be cropped without losing valuable information (see next page). Example: If your image is 300 pixels square, you can remove parts of it, but in doing so you might lose valuable information. Result: Only some images can be cropped and still make sense. Online extra Visit the tools section of the website accompanying this book to watch a video guide to resizing images in Photoshop and GIMP. 114IMAGES When cropping images it is important not to lose valuable information. It is best to source images that are the correct shape if possible. Cropping Images Here you can see an illustration of an elephant that is best suited to appearing in landscape. LANDSCAPE PORTRAIT If we crop this illustration to make it portrait we lose the trunk and the hindquarters. If we add extra space to the top and bottom of the illustration the background is not continued. PORTRAIT LANDSCAPE Here you can see an illustration of a giraffe that is best suited to appearing in portrait. If we crop this illustration to make it landscape we lose the head and feet. If we add extra space to the left and right of the illustration the background is not continued. 115 IMAGES Images created for the web should be saved at a resolution of 72 ppi. The higher the resolution of the image, the larger the size of the file. Image Resolution JPGs, GIFs, and PNGs belong to a type of image format known as bitmap. They are made up of lots of miniature squares. The resolution of an image is the number of squares that fit within a 1 inch x 1 inch square area. Images appearing on computer screens are made of tiny squares called pixels. A small segment of this photograph has been magnified to show how it is made up of pixels. The web browsers on most desktop computers display images at a resolution of 72 pixels per inch (ppi). Images in print materials (such as books and magazines) are made up of tiny circles called dots. These images are usually printed at a resolution of 300 dots per inch (dpi). For this image: JPEG at 300 dpi = 1,526kb JPEG at 72 ppi = 368kb Due to the fact that computer displays are capped at a resolution of 72 ppi, using images on the web with a higher resolution will not result in better image quality — only in larger file sizes, which will increase the time needed to load them and therefore slow down viewing of your web pages. 116IMAGES When an image is a line drawing (such as a logo, illustration, or diagram), designers will often create it in vector format. Vector formatted images are very different to bitmap images. Vector images are created by placing points on a grid, and drawing lines between those points. A color can then be added to "fill in" the lines that have been created. The advantage of creating line drawings in vector format is that you can increase the dimensions of the image without affecting the quality of it. Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator. Vector Images The current method of using vector images for display on websites involves saving a bitmap version of the original vector image and using that. Scalable Vector Graphics (SVG) are a relatively new format used to display vector images directly on the web (eliminating the need to create bitmap versions of them), however its use is not yet widespread. 117 IMAGES Below you can see the individual frames that make up an animated GIF that shows an orange dot revolving around a circle — like the kind of animation you might see when a web page is loading. Some image editing applications such as Adobe Photoshop allow you to create animated GIFs. There are several tutorials about how to do this on the web. There are also several websites that allow you to upload the graphics for the individual frames and create the animated GIF for you. It is important to remember: Each extra frame of the image increases the size of the file, and can therefore add to the time it takes for an image to download (and web users do not like waiting a long time for images to download). Because GIFs are not an ideal format for displaying photographs, animated GIFs are really only suitable for simple illustrations. Some designers frown on animated GIFs because they remember a lot of amateur web designers overusing them in the 1990's. Animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations. Animated GIFs 1 2 3 4 5 6 7 8 118IMAGES Creating an image that is partially transparent (or "see-through") for the web involves selecting one of two formats: Transparency PNG If the transparent part of the image has diagonal or rounded edges or if you want a semi- opaque transparency or a drop- shadow, then you will need to save it as a PNG. Transparent PNGs are not fully supported in older browsers, most notably Internet Explorer 6 (IE6). There is some JavaScript you can use to get around this issue. The details of this script can be found in the tools section of the website accompanying this book. Diagonal Round Semi-Opaque Drop-ShadowStraight Transparent GIF If the transparent part of the image has straight edges and it is 100% transparent (that is, not semi-opaque), you can save the image as a GIF (with the transparency option selected). 119 IMAGES Examining Images on the Web Checking the Size of Images If you are updating a website, you might need to check the size of an existing image before creating a new one to replace it. This can be achieved by right-clicking on the image and making a selection from the pop-up menu that appears. (Mac users will need to hold down the control key and click rather than right-click.) Downloading Images If you want to download images from a website, you can do so by accessing the same pop-up menu. (Please remember however that all images online are subject to copyright and require explicit permission to reuse.) On the left you can see how to check the size of images and how to download them using Safari. Below is a brief overview of what to select in the pop-up menu to perform these functions in various browsers. CHROME Size: Open Image in New Tab Size appears in new tab Download: Save Image As FIREFOX Size: View Image Info Size appears in pop-up window Download: Save Image As Internet Explorer Size: Properties Size appears in pop-up window Download: Save Image SAFARI Size: Open Image in New Tab Size appears in title bar Download: Save Image As Article 120IMAGES 120IMAGES Result




chapter-05/figure-and-figure-caption.htmlHTML

Images often come with captions. HTML5 has introduced a new

element to contain images and their caption so that the two are associated. You can have more than one image inside the

element as long as they all share the same caption.