Five pages website

User Generated

Fnynwzv

Programming

Description

This will be the final project for this course. Create a five page website with a common theme. Each page must have access to every other page (with the links in the same place on each page), fonts and color scheme should be consistent within pages. You must incorporate as a minimum the following into you website:

A Form, Table, Lists, images. You must use the required folder structure and extra credit will be given additional features.

I upload you the book so you can see what html you should use.

Unformatted Attachment Preview

HTML & CSS Design and Build Websites Jon Duckett John Wiley & Sons, Inc. HTML & CSS Design and build Websites Published by John Wiley & Sons, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com ©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana ISBN: 978-1-118-00818-8 Manufactured in the United States of America Published simultaneously in Canada 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 7486011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Control Number: 2011932082 Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book. Credits For John Wiley & Sons, Inc. Executive Editor Carol Long Author Jon Duckett Marketing Manager Ashley Zurcher Cover Designer Emme Stone Production Manager Tim Tate Design and Layout Jon Duckett Emme Stone Photography John Stewardson johnstewardson.com PRODUCTION EDITOR Daniel Scribner Vice President and Executive Group Publisher Richard Swadley Vice President and Executive Publisher Barry Pruett Associate Publisher Jim Minatel Production Coordinator, Cover Katie Crocker Additional Photography Hesperian Joe Robertson flickr.com/photos/mindfire Jules Clancy thestonesoup.com Technical Editor Chris Mills Kylie Gusset gusset.net Michael Stillwell TECHNICAL REVIEWERS Andy Stone Angela Shimell Donna Watson Martin Callanan Rob Jacoby Tony Berry beebo.org Try out and download all of the code for this book online at: http://www.htmlandcssbook.com/code/ Contents Introduction Chapter 1: Structure Chapter 2: Text Chapter 3: Lists Chapter 4: Links Chapter 5: Images Chapter 6: Tables Chapter 7: Forms Chapter 8: Extra Markup Chapter 9: Flash, Video & Audio Chapter 10: Introducing CSS Chapter 11: Color Chapter 12: Text Chapter 13: Boxes Chapter 14: Lists, Tables & Forms Chapter 15: Layout Chapter 16: Images Chapter 17: HTML5 Layout Chapter 18: Process & Design Chapter 19: Practical Information Index 2 12 40 62 74 94 126 144 176 200 226 246 264 300 330 358 406 428 452 476 493 Introduction XX XX XX About this book How the web works Learning from other pages Firstly, thank you for picking up this book. It has been written with two very different types of people in mind: ●● Those who want to learn how to design and build websites from scratch ●● Anyone who has a website (that may be built using a content management system, blogging software, or an e-commerce platform) and wants more control over the appearance of their pages The only things you need in order to use this book are a computer with a web browser and a text editor (such as Notepad, which comes with Windows, or TextEdit, which comes with Macs). 3 INTRODUCTION Introduction pages come at the beginning of each chapter. They introduce the key topics you will learn about. Reference pages introduce key pieces of HTML & CSS code. The HTML code is shown in blue and CSS code is shown in pink. Background pages appear on white; they explain the context of the topics covered that are discussed in each chapter. Diagram and infographics pages are shown on a dark background. They provide a simple, visual reference to topics discussed. Example pages put together the topics you have learned and demonstrate how they can be applied in each. Summary pages come at the end of each chapter. They remind you of the key topics that were covered in each chapter. INTRODUCTION 4 Is it hard to Learn? Many books that teach HTML and CSS resemble dull manuals. To make it easier for you to learn, we threw away the traditional template used by publishers and redesigned this book from scratch. At work, when people look at my screen and see it full of code, it's not unusual to get a comment about it looking very complicated or how clever I must be to understand it. The truth is, it's not that hard to learn how to write web pages and read the code used to create them; you certainly don't have to be a "programmer." 5 INTRODUCTION Understanding HTML and CSS can help anyone who works with the web; designers can create more attractive and usable sites, website editors can create better content, marketers can communicate with their audience more effectively, and managers can commission better sites and get the best out of their teams. I've focussed on the code you need to use 90% of the time and omitted the code that you would rarely see even if writing websites is your full time job. By the end of the book, if you come across the other 10% you will be able to Google it to find out what it means quickly and easily. I have also added practical information on topics I am commonly asked about, such as how to prepare images, audio and video for the web, how to approach the design and build of a new site, how to improve your rankings in search engines (SEO), and how to use Google Analytics to learn about visitors to your site. The Structure of This Book In order to teach you about creating web pages, this book is divided into three sections: 1: HTML 2: CSS 3: Practical We will spend the first chapter looking at how HTML is used to create web pages. You will see that you start by writing down the words you want to appear on your page. You then add tags or elements to the words so that the browser knows what is a heading, where a paragraph begins and ends, and so on. We start this section with a chapter that explains how CSS uses rules to enable you to control the styling and layout of web pages. We then go on to look at the wide variety of CSS properties you can use in your CSS rules. These properties generally fall into one of two categories: We end up with some helpful information that will assist you in building better websites. The rest of this section introduces the tags you have at your disposal to create web pages, grouped into chapters on: text, lists, links, images, tables, forms, video audio and flash, and miscellaneous elements. Presentation: How to control things like the color of text, the fonts you want to use and the size of those fonts, how to add background colors to pages (or parts of a page), and how to add background images. I should warn you that the examples in the first nine chapters are not exciting to look at, yet they are the foundation of every web page. The following chapters on CSS will show you how to make your pages look a lot more interesting. Layout: How to control where the different elements are positioned on the screen. You will also learn several techniques that professionals use to make their pages more attractive. We look at some new tags that will be introduced in HTML5 to help describe the structure of your pages. HTML5 is the latest version of HTML (still under development at the time of writing). Before learning about these elements, you need a good grasp of how CSS is used to control the design of web pages. There is a chapter that talks you through a design process that you might like to follow when creating a new website. Finally, we end up looking at topics that will help you once you have built your site, such as putting it on the web, search engine optimisation (SEO) and using analytics software to track who comes to your site and what they are looking at. INTRODUCTION 6 How People Access the Web Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology. Browsers Web Servers Screen readers People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera. When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website. Screen readers are programs that read out the contents of a computer screen to a user. They are commonly used by people with visual impairments. In order to view a web page, users might type a web address into their browser, follow a link from another site, or use a bookmark. Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them. Software manufacturers regularly release new versions of browsers with new features and supporting new additions to languages. It is important, however, to remember that many computer owners will not be running the latest versions of these browsers. Therefore you cannot rely on all visitors to your site being able to use the latest functionality offered in all browsers. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site. In the same way that many countries have legislations that require public buildings to be accessible to those with disabilities, many laws have also been passed that require websites be accessible to those with disabilities. You will learn how to tell which browsers visitors use to access your website in Chapter 19. 7 INTRODUCTION Devices People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones. It is important to remember that various devices have different screen sizes and some have faster connections to the web than others. Throughout this book you will see several references to screen readers. These notes will help ensure that the sites you create are accessible to people who use such software. It is interesting to note that technologies similar to those employed by screen readers are also being used in other areas where people are unable read a screen, such as when they are driving or jogging. How Websites Are Created All websites use HTML and CSS, but content management systems, blogging software, and e-commerce platforms often add a few more technologies into the mix. What you see How it is Created HTML5 & CSS3 When you are looking at a website, it is most likely that your browser will be receiving HTML and CSS from the web server that hosts the site. The web browser interprets the HTML and CSS code to create the page that you see. Small websites are often written just using HTML and CSS. Since the web was first created there have been several versions of HTML and CSS — each intended to be an improvement on the previous version. Most web pages also include extra content such as images, audio, video, or animations and this book will teach you how to prepare them for use on the web and then how to insert them into your web pages. Some sites also send JavaScript or Flash to your browser, and you will see how to add JavaScript and Flash in your web pages. Both of these technologies are advanced topics that you can go on to learn more about once you have mastered HTML and CSS, if you want to. Larger websites — in particular those that are updated regularly and use a content management system (CMS), blogging tools, or e-commerce software — often make use of more complex technologies on the web server, but these technologies are actually used to produce HTML and CSS that is then sent to the browser. So, if your site uses these technologies, you will be able to use your new HTML and CSS knowledge to take more control over how your site looks. Larger, more complex sites like these may use a database to store data, and programming languages such as PHP, ASP.Net, Java, or Ruby on the web server, but you do not need to know these technologies to improve what the user sees. The skills you'll learn in this book should be enough to help you on that road. At the time of writing this book, HTML5 & CSS3 were still being developed. Although they had not been finalized, many browsers were already supporting some features of these languages and a lot of people were using the latest code on their websites. I have therefore chosen to teach you these latest versions. Because HTML5 and CSS3 build on previous versions of these languages, learning these means you will also be able to understand the earlier versions of them. I have added clear notes when the code is new and also when it might not work in older browsers. INTRODUCTION 8 How the Web Works When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server. On this page you can see examples that demonstrate how the web server that hosts the website you are visiting can be anywhere in the world. It is the DNS servers that tell your browser how to find the website. ●● A user in Barcelona visits sony.jp in Tokyo ●● A user in New York visits google.com in San Francisco ●● A user in Stockholm visits qantas.com.au in Sydney ●● A user in Vancouver visits airindia.in in Bangalore 9 INTRODUCTION On the right you can see what happens when a web user in England wants to view the website of the Louvre art gallery in France which is located at www.louvre.fr. Firstly, the browser in Cambridge contacts a DNS server in London. The DNS server then tells the browser the location of the web server hosting the site in Paris. 2 1 When you connect to the web, you do so via an Internet Service Provider (ISP). You type a domain name or web address into your browser to visit a site; for example: google.com, bbc.co.uk, microsoft.com . Your computer contacts a network of servers called Domain Name System (DNS) servers. These act like phone books; they tell your computer the IP address associated with the requested domain name. An IP address is a number of up to 12 digits separated by periods / full stops. Every device connected to the web has a unique IP address; it is like the phone number for that computer. Cambridge 3 The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. A web server is a computer that is constantly connected to the web, and is set up especially to send web pages to users. LONDON PARIS 4 The web server then sends the page you requested back to your web browser. 1 Structure XX XX XX Understanding structure Learning about markup Tags and elements We come across all kinds of documents every day of our lives. Newspapers, insurance forms, shop catalogues... the list goes on. Many web pages act like electronic versions of these documents. For example, newspapers show the same stories in print as they do on websites; you can apply for insurance over the web; and stores have online catalogs and e-commerce facilities. In all kinds of documents, structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very important to understand how to structure documents. In this chapter you will: 13 ●● See how HTML describes the structure of a web page ●● Learn how tags or elements are added to your document ●● Write your first web page STRUCTURE STRUCTURE 14 How Pages Use Structure Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper. 15 STRUCTURE The structure is very similar when a news story is viewed online (although it may also feature audio or video). This is illustrated on the right with a copy of a newspaper alongside the corresponding article on its website. Now think about a very different type of document — an insurance form. Insurance forms often have headings for different sections, and each section contains a list of questions with areas for you to fill in details or checkboxes to tick. Again, the structure is very similar online. STRUCTURE 16 Structuring Word Documents The use of headings and subheadings in any document often reflects a hierarchy of information. For example, a document might start with a large heading, followed by an introduction or the most important information. 17 STRUCTURE This might be expanded upon under subheadings lower down on the page. When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers. On the right, you can see a simple document in Microsoft Word. The different styles for the document, such as different levels of heading, are shown in the drop down box. If you regularly use Word, you might have also used the formatting toolbar or palette to do this. STRUCTURE 18 On the previous page you saw how structure was added to a Word document to make it easier to understand. We use structure in the same way when writing web pages. 19 STRUCTURE HTML Describes the Structure of Pages In the browser window you can see a web page that features exactly the same content as the Word document you met on the page 18. To describe the structure of a web page, we add code to the words we want to appear on the page. You can see the HTML code for this page below. Don't worry about what the code means yet. We start to look at it in more detail on the next page. Note that the HTML code is in blue, and the text you see on screen is in black. 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. The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags. STRUCTURE 20 HTML Uses Elements to Describe the Structure of Pages Let's look closer at the code from the last page. There are several different elements. Each element has an opening tag and a closing tag. Code 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. 21 STRUCTURE Tags act like containers. They tell you something about the information that lies between their opening and closing tags. Description The opening tag indicates that anything between it and a closing tag is HTML code. The tag indicates that anything between it and the closing tag should be shown inside the main browser window. Words between and are a main heading. A paragraph of text appears between these and tags. Words between and form a sub-heading. Here is another paragraph between opening and closing tags. Another sub-heading inside and tags. Another paragraph inside and tags. The closing tag indicates the end of what should appear in the main browser window. The closing tag indicates that it is the end of the HTML code. STRUCTURE 22 A Closer Look at Tags Character left-angle bracket (less-than sign) RIGHT-angle bracket (MORE-than sign) Opening Tag The characters in the brackets indicate the tag's purpose. 23 STRUCTURE For example, in the tags above the p stands for paragraph. The closing tag has a forward slash after the the < symbol. Character RIGHT-angle bracket (MORE-than sign) left-angle bracket (less-than sign) Forward Slash Closing Tag 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. STRUCTURE 24 Attributes Tell Us More About Elements Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign. Attribute Name Paragraph in English Attribute Value The attribute name indicates what kind of extra information you are supplying about the element's content. It should be written in lowercase. 25 STRUCTURE The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values. Here an attribute called lang is used to indicate the language used in this element. The value of this attribute on this page specifies it is in US English. HTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended. Attribute Name Paragraphe en Français Attribute Value The majority of attributes can only be used on certain elements, although a few attributes (such as lang) can appear on any element. Most attribute values are either pre-defined or follow a stipulated format. We will look at the permitted values as we introduce each new attribute. The value of the lang attribute is an abbreviated way of specifying which language is used inside the element that all browsers understand. STRUCTURE 26 Body, Head & Title You met the element in the first example we created. Everything inside this element is shown inside the main browser window. Before the element you will often see a element. This contains information about the page (rather than information that is shown within the main part of the browser window that is highlighted in blue on the opposite page). You will usually find a element inside the element. The contents of the element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). 27 STRUCTURE HTML /chapter-01/body-head-title.html This is the Title of the Page This is the Body of the Page Anything within the body of a web page is displayed in the main browser window. R e s u lt Anything written between the tags will appear in the title bar (or tabs) at the top of the browser window, highlighted in orange here. Anything written between the tags will appear in the main browser window, highlighted in blue here. You may know that HTML stands for HyperText Markup Language. The HyperText part refers to the fact that HTML allows you to create links that allow visitors to move from one page to another quickly and easily. A markup language allows you to annotate text, and these annotations provide additional meaning to the contents of a document. If you think of a web page, we add code around the original text we want to display and the browser then uses the code to display the page correctly. So the tags we add are the markup. STRUCTURE 28 Creating a Web Page on a PC To create your first web page on a PC, start up Notepad. You can find this by going to: 1 Start All Programs (or Programs) Accessories Notepad You might also like to download a free editor called Notepad++ from notepad-plus-plus.org. Type the code shown on the right. 29 STRUCTURE 2 Article 3 Go to the File menu and select Save as... You will need to save the file somewhere you can remember. If you like, you could create a folder for any examples that you try out from this book. Save this file as first-test. html. Make sure that the Save as type drop down has All Files selected. 4 Start your web browser. Go to the File menu and select Open. Browse to the file that you just created, select it and click on the Open button. The result should look something like the screen shot to the left. If it doesn't look like this, find the file you just created on your computer and make sure that it has the file extension .html (if it is .txt then you need to go back to Notepad and save the file again, but this time put quote marks around the name "firsttest.html"). STRUCTURE 30 Creating a Web Page on a Mac To create your first web page on a Mac, start up TextEdit. This should be in your Applications folder. 1 You might also like to download a free text editor for creating web pages called TextWrangler which is available from barebones.com . Type the code shown on the right. 31 STRUCTURE 2 Article 3 Now go to the File menu and select Save as... You will need to save the file somewhere you can remember. If you like, you could create a folder for any examples that you try out from this book. Save this file as first-test.html. You will probably see a window like the screen shot to the left. You want to select the Use .html button. 4 Next, start your web browser, go to the File menu, and select Open. You should browse to the file that you just created, select it and click on the Open button. The result should look like the screen shot to the left. If it doesn't look like this, you might need to change one of the settings in TextEdit. Go to the TextEdit menu and select Preferences. Then on the preferences for Open and Save, tick the box that says Ignore rich text commands in HTML files. Now try to save the file again. STRUCTURE 32 Code in a Content Management System If you are working with a content management system, blogging platform, or e-commerce application, you will probably log into a special administration section of the website to control it. The tools provided in the administration sections of these sites usually allow you to edit parts of the page rather than the entire page, which means you will rarely see the , , or elements. Looking at the content management system on the opposite page, you have a box 33 STRUCTURE that allows you to enter a title for the page, another box for the main article, a way to enter a publication date, and something to indicate which section of the site this page belongs in. For an e-commerce store, you might have boxes that allow you to enter a title for the product, a description of the product, its price, and the quantity available. That is because they use a single 'template' to control all of the pages for a section of the site. (For example, an e-commerce system might use the same template to show all of their products.) The information you supply is placed into the templates. The advantage of this approach is that people who do not know how to write web pages can add information to a website and it is also possible to change the presentation of something in the template, and it will automatically update every page that uses that template. If you imagine an e-commerce store with 1,000 items for sale, just altering one template is a lot easier than changing the page for each individual product. In systems like this, when you have a large block of text that you can edit, such as a news article, blog entry or the description of a product in an e-commerce store, you will often see a text editor displayed. Text editors usually have controls a little like those on your word processor, giving you different options to style text, add links or insert images. Behind the scenes these editors are adding HTML code to your text, just like the code you have seen earlier in this chapter. Many of these editors will have an option that allows you to see (and edit) the code that they produce. Once you know how to read and edit this code, you can take more control over these sections of your website. In the example above, you can see that the text editor has a tab for Visual / HTML views of what the user enters. Other systems might have a button (which often shows angle brackets) to indicate how to access the code. Some content management systems offer tools that also allow you to edit the template files. If you do try to edit template files you need to check the documentation for your CMS as they all differ from each other. You need to be careful when editing template files because if you delete the wrong piece of code or add something in the wrong place the site may stop working entirely. STRUCTURE 34 Looking at How Other sites are Built When the web was first taking off, one of the most common ways to learn about HTML and discover new tips and techniques was to look at the source code that made up web pages. These days there are many more books and online tutorials that teach HTML, but you can still look at the code that a web server sends to you. To try this out for yourself, simply go to the sample code for this chapter, at www.htmlandcssbook.com/ code/ and click on the link called "View Source." 35 STRUCTURE Once you have opened this page, you can look for the View menu in your browser, and select the option that says Source or View source. (The title changes depending on what browser you are using.) At first this code might look complicated but don't be discouraged. By the time you have finished the next chapter of this book, you will be able to understand it. You should see a new window appear, and it will contain the source code that was used to create this page. All of the examples for this book are on the website, and you can use this simple technique on any of the example pages to see how they work. You can see this result in the photograph on the right. The page you see is the window at the top; the code is below. You can also download all of the code for this book from the same website by clicking on the "Download" link. STRUCTURE 36 Summary STRUCTURE XX HTML pages are text documents. XX HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meaning. XX Tags are often referred to as elements. XX Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end. XX Opening tags can carry attributes, which tell us more about the content of that element. XX Attributes require a name and a value. XX To learn HTML you need to know what tags are available for you to use, what they do, and where they can go. 2 Text XX XX XX Headings and paragraphs Bold, italic, emphasis Structural and semantic markup When creating a web page, you add tags (known as markup) to the contents of the page. These tags provide extra meaning and allow browsers to show users the appropriate structure for the page. In this chapter we focus on how to add markup to the text that appears on your pages. You will learn about: 41 TEXT ●● Structural markup: the elements that you can use to describe both headings and paragraphs ●● Semantic markup: which provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on TEXT 42 Headings HTML has six "levels" of headings: is used for main headings is used for subheadings If there are further sections under the subheadings then the element is used, and so on... Browsers display the contents of headings at different sizes. The contents of an element is the largest, and the contents of an element is the smallest. The exact size at which each browser shows the headings can vary slightly. Users can also adjust the size of text in their browser. You will see how to control the size of text, its color, and the fonts used when we come to look at CSS. 43 TEXT chapter-02/headings.html This This This This This This is is is is is is a a a a a a HTML Main Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Heading R e s u lt Paragraphs Article HTML chapter-02/paragraphs.html A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line. Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs. To create a paragraph, surround the words that make up the paragraph with an opening tag and closing tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs. R e s u lt TEXT 44 Bold & Italic By enclosing words in the tags and we can make characters appear bold. chapter-02/bold.html This is how we make a word appear bold. Inside a product description you might see some key features in bold. The element also represents a section of text that would be presented in a visually different way (for example key words in a paragraph) although the use of the element does not imply any additional meaning. By enclosing words in the tags and we can make characters appear italic. The element also represents a section of text that would be said in a different way from surrounding content — such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized. 45 TEXT HTML R e s u lt chapter-02/italic.html HTML This is how we make a word appear italic. It's a potato Solanum teberosum. Captain Cook sailed to Australia on the Endeavour. R e s u lt Superscript Article & Subscript HTML chapter-02/superscript-and-subscript.html On the 4th of September you will learn about E=MC2. The amount of CO2 in the atmosphere grew by 2ppm in 20091. R e s u lt The element is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts like raising a number to a power such as 22. The element is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas such as H20. TEXT 46 White Space In order to make code easier to read, web page authors often add extra spaces or start some elements on new lines. When the browser comes across two or more spaces next to each other, it only displays one space. Similarly if it comes across a line break, it treats that as a single space too. This is known as white space collapsing. You will often see that web page authors take advantage of white space collapsing to indent their code in order to make it easier to follow. 47 TEXT chapter-02/white-space.html HTML The moon is drifting away from Earth. The moon is drifting away from Earth. The moon is drifting away from Earth. R e s u lt Line Breaks Article & Horizontal Rules HTML chapter-02/line-breaks.html The Earthgets one hundred tons heavier every daydue to falling space dust. As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag . R e s u lt HTML chapter-02/horizontal-rules.html Venus is the only planet that rotates clockwise. Jupiter is bigger than all the other planets combined. R e s u lt To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the tag. There are a few elements that do not have any words between an opening and closing tag. They are known as empty elements and they are written differently. An empty element usually has only one tag. Before the closing angled bracket of an empty element there will often be a space and a forward slash character. Some web page authors miss this out but it is a good habit to get into. TEXT 48 Visual Editors & Their Code views Content management systems and HTML editors such as Dreamweaver usually have two views of the page you are creating: a visual editor and a code view. Visual editors often resemble word processors. Although each editor will differ slightly, there are some features that are common to most editors that allow you to control the presentation of text. 49 ●● Headings are created by highlighting text then using a drop-down box to select a heading. ●● Bold and italic text are created by highlighting some text and pressing a b or i button. ●● New paragraphs are created using the return or the enter key. ●● Line breaks are created by pressing the shift key and the return key at the same time. ●● Horizontal rules are created using a button with a straight line on it. TEXT If you copy and paste text from a program that allows you to format text (such as Word) into a visual editor, it may add extra markup. To prevent this copy the text into a plain text editor first (such as Notepad on a PC or TextEdit on a Mac) and then copy it from that program and paste it into the visual editor. Code views show you the code created by the visual editor so you can manually edit it, or so you can just enter new code yourself. It is often activated using a button with an icon that says HTML or has angled brackets. White space may be added to the code by the editor to make the code easier to read. Semantic Markup There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages — they are known as semantic markup. In the rest of the chapter you will meet some more elements that will help you when you are adding text to web pages. For example, you are going to meet the element that allows you to indicate where emphasis should be placed on selected words and the element which indicates that a block of text is a quotation. Browsers often display the contents of these elements in a different way. For example, the content of the element is shown in italics, and a is usually indented. But you should not use them to change the way that your text looks; their purpose is to describe the content of your web pages more accurately. The reason for using these elements is that other programs, such as screen readers or search engines, can use this extra information. For example, the voice of a screen reader may add emphasis to the words inside the element, or a search engine might register that your page features a quote if you use the element. TEXT 50 Strong & Emphasis The use of the element indicates that its content has strong importance. For example, the words contained in this element might be said with strong emphasis. chapter-02/strong.html Beware: Pickpockets operate in this area. This toy has many small pieces and is not suitable for children under five years old. By default, browsers will show the contents of a element in bold. The element indicates emphasis that subtly changes the meaning of a sentence. HTML R e s u lt chapter-02/emphasis.html HTML I think Ivy was the first. I think Ivy was the first. I think Ivy was the first. By default browsers will show the contents of an element in italic. R e s u lt 51 TEXT Quotations Article HTML chapter-02/quotations.html Did you ever stop to think, and forget to start again? As A.A. Milne said, Some people talk to animals. Not many listen though. That's the problem. R e s u lt There are two elements commonly used for marking up quotations: The element is used for longer quotes that take up an entire paragraph. Note how the element is still used inside the element. Browsers tend to indent the contents of the element, however you should not use this element just to indent a piece of text — rather you should achieve this effect using CSS. The element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the element, however Internet Explorer does not — therefore many people avoid using the element. Both elements may use the cite attribute to indicate where the quote is from. Its value should be a URL that will have more information about the source of the quotation. TEXT 52 Abbreviations & Acronyms If you use an abbreviation or an acronym, then the element can be used. A title attribute on the opening tag is used to specify the full term. In HTML 4 there was a separate element for acronyms. To spell out the full form of the acronym, the title attribute was used (as with the element above). HTML5 just uses the element for both abbreviations and acronyms. 53 TEXT chapter-02/abbreviations.html HTML Prof Stephen Hawking is a theoretical physicist and cosmologist. NASA do some crazy space stuff. R e s u lt Citations Article & Definitions HTML chapter-02/citations.html A Brief History of Time by Stephen Hawking has sold over ten million copies worldwide. When you are referencing a piece of work such as a book, film or research paper, the element can be used to indicate where the citation is from. In HTML5, should not really be used for a person's name — but it was allowed in HTML 4, so most people are likely to continue to use it. R e s u lt Browsers will render the content of a element in italics. HTML chapter-02/definitions.html A black hole is a region of space from which nothing, not even light, can escape. R e s u lt The first time you explain some new terminology (perhaps an academic concept or some jargon) in a document, it is known as the defining instance of it. The element is used to indicate the defining instance of a new term. Some browsers show the content of the element in italics. Safari and Chrome do not change its appearance. TEXT 54 Author Details The element has quite a specific use: to contain contact details for the author of the page. chapter-02/address.html HTML homer@example.org 742 Evergreen Terrace, Springfield. It can contain a physical address, but it does not have to. For example, it may also contain a phone number or email address. Browsers often display the content of the element in italics. You may also be interested in something called the hCard microformat for adding physical address information to your markup. Online extra: You can find out more about hCards on the website accompanying this book. 55 TEXT R e s u lt Changes to Content Article HTML chapter-02/insert-and-delete.html It was the worst best idea she had ever had. The element can be used to show content that has been inserted into a document, while the element can show text that has been deleted from it. R e s u lt The content of a element is usually underlined, while the content of a element usually has a line through it. HTML Laptop computer: Was $995 Now only $375 R e s u lt chapter-02/strikethrough.html The element indicates something that is no longer accurate or relevant (but that should not be deleted). Visually the content of an element will usually be displayed with a line through the center. Older versions of HTML had a element for content that was underlined, but this is being phased out. TEXT 56 57 TEXT Example TEXT This is a very simple HTML page that demonstrates text markup. Structural markup includes elements such as , , and . Semantic information is carried in elements such as and . Text 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. TEXT 58 Summary TEXT XX HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs). XX They also provide semantic information (e.g. where emphasis should be placed, the definition of any acronyms used, when given text is a quotation). 3 Lists XX XX XX Numbered lists Bullet lists Definition lists There are lots of occasions when we need to use lists. HTML provides us with three different types: 63 LISTS ●● Ordered lists are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number. ●● Unordered lists are lists that begin with a bullet point (rather than characters that indicate order). ●● Definition lists are made up of a set of terms along with the definitions for each of those terms. LISTS 64 Ordered Lists The ordered list is created with the element. chapter-03/ordered-lists.html HTML Chop potatoes into quarters Simmer in salted water for 15-20 minutes until tender Heat milk, butter and nutmeg Drain potatoes and mash Mix in the milk mixture Each item in the list is placed between an opening tag and a closing tag. (The li stands for list item.) R e s u lt 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 liststyle-type property covered on pages 333-335. 65 LISTS Unordered Article Lists HTML chapter-03/unordered-lists.html 1kg King Edward potatoes 100ml milk 50g salted butter Freshly grated nutmeg Salt and pepper to taste 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.) R e s u lt 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-styletype property covered on pages 333-335. LISTS 66 Definition 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. 67 LISTS chapter-03/definition-lists.html HTML 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) R e s u lt Nested Article Lists HTML chapter-03/nested-lists.html Mousses Pastries Croissant Mille-feuille Palmier Profiterole Tarts You can put a second list inside an element to create a sublist 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. R e s u lt LISTS 68 69 LISTS Example LISTS 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. Lists 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 Melt butter in a frying pan over a medium heat Gently mix the eggs and cream in a bowl Once butter has melted add cream and eggs 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) When the eggs are still moist remove from the heat (it will continue to cook on the plate until served) LISTS 70 Summary LISTS XX There are three types of HTML lists: ordered, unordered, and definition. XX 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. 4 Links XX XX XX Creating links between pages Linking to other sites Email 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: 75 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 LINKS 76 Writing 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. This is the page the link takes you to This is the text the user clicks on IMDB Opening link tag 77 LINKS Closing link tag 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.") LINKS 78 Linking to Other Sites 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. HTML chapter-04/linking-to-other-sites.html Movie Reviews: Empire Metacritic Rotten Tomatoes Variety 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. R e s u lt Browsers show links in blue with an underline by default. Absolute URLs 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. 79 LINKS 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. Linking to Other Article Pages on the Same Site HTML Contact 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. R e s u lt 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 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 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. LINKS 80 Directory Structure 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. Structure Relationships Homepages The diagram on the right shows the directory structure for a fictional entertainment listings website called ExampleArts. The relationship between files and folders on a website is described using the same terminology as a family tree. The main homepage of a site written in HTML (and the homepages of each section in a child folder) is called index.html. 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. In the diagram on the right, you can see some relationships have been drawn in. Web servers are usually set up to return the index.html file if no file name is specified. 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. Therefore, if you enter examplearts.com it will return examplearts.com/index .html, and examplearts.com/ music will return examplearts .com/music/index.html. 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. Each section of the site is placed in a separate folder; this helps organize the files. 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. 81 LINKS Parent The examplearts folder is a parent of the music folder. Child The music folder is a child of the examplearts 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 Grandparent The examplearts folder is a grandparent of the dvd folder. Grandchild The dvd folder is a grandchild of the examplearts folder. 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: Each sub-directory contains: The movies section 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 ●● A reviews page called reviews .html ●● A listings page called listings .html (except for the DVD section) A file called index.html which is the homepage for that section ●● A folder called cinema ●● A folder called DVD. LINKS 82 Relative URLs 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. 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. 83 LINKS 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 Link Type example Same Folder To link to a file in the same folder, just use the file name. (Nothing else is needed.) To link to music reviews from the music homepage: Reviews Child Folder For a child folder, use the name of the child folder, followed by a forward slash, then the file name. To link to music listings from the homepage: Listings 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. 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. (from diagram on previous page) 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 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. LINKS 84 Email Links mailto: 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. 85 LINKS chapter-04/email-links.html HTML Email Jon R e s u lt Opening Article Links in a New Window HTML chapter-04/opening-links-in-a-new-window.html Internet Movie Database (opens in new window) R e s u lt 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. LINKS 86 Linking to a Specific Part of the Same Page At 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. 87 LINKS chapter-05/linking-to-a-specific-part.html HTML 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 Linking to a Specific Article Part of Another Page R e s u lt 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: LINKS 88 89 LINKS Example LINKS 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. Links 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 LINKS 90 Summary LINKS XX Links are created using the element. XX The element uses the href attribute to indicate the page you are linking to. XX If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs. XX You can create links to open email programs with an email address in the "to" field. XX You can use the id attribute to target elements within a page that can be linked to. 5 Images XX XX XX How to add images to pages Choosing the right format Optimizing images for the web 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. 95 IMAGES IMAGES 96 Choosing Images for Your Site A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one. 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. Images should... Stock photos Online extra www.istockphoto.com www.gettyimages.com www.veer.com www.sxc.hu www.fotolia.com 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. Be relevant Convey information Convey the right mood Be instantly recognisable Fit the color palette 97 IMAGES Storing Images on Your Site 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. IMAGES 98 Adding Images 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: HTML chapter-05/adding-images.html R e s u lt 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. 99 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. Height & Article Width of Images HTML chapter-05/height-and-width-of-images.html 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. R e s u lt 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 409410 for more information about this. IMAGES 100 Where to Place Images in Your Code Where 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. 101 IMAGES chapter-05/where-to-place-images.html HTML 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. Article R e s u lt 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. IMAGES 102 Old Code: Aligning Images Horizontally align 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). 103 IMAGES chapter-05/aligning-images-horizontally.html HTML 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. Article R e s u lt 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. IMAGES 104 Old Code: Aligning Images Vertically As 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. 105 IMAGES chapter-05/aligning-images-vertically.html HTML 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. Article R e s u lt 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. IMAGES 106 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 107 2 3 Save images in the right format Save images at the right size Use the correct resolution 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. 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. 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. IMAGES Tools to Edit & Save Images There are several tools you can use to edit and save images to ensure that they are the right size, format, and resolution. 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. IMAGES 108 Image Formats: JPEG 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: GIF H B UI LD TE ST RESEA RC CO N CE PT DES IGN Use GIF or PNG format when saving images with few colors or large areas of the same color. 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.) Image Dimensions 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. 113 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: Online extra Visit the tools section of the website accompanying this book to watch a video guide to resizing images in Photoshop and GIMP. REDUCING IMAGE SIZE You can reduce the size of images to create a smaller version of the image. INCREASING IMAGE SIZE You can't increase the size of photos significantly without affecting the image quality. CHANGING SHAPE Only some images can be cropped without losing valuable information (see next page). Example: If your image is 600 pixels wide and 300 pixels tall, you can reduce the size of the image by 50%. Example: If your image is only 100 pixels wide by 50 pixels tall, increasing the size by 300% would result in poor quality. Example: If your image is 300 pixels square, you can remove parts of it, but in doing so you might lose valuable information. Result: This will create an image that is quicker to download. Result: The image will look blurry or blocky. Result: Only some images can be cropped and still make sense. IMAGES Cropping Images When cropping images it is important not to lose valuable information. It is best to source images that are the correct shape if possible. PORTRAIT Here you can see an illustration of a giraffe that is best suited to appearing in portrait. LANDSCAPE If we crop this illustration to make it landscape we lose the head and feet. LANDSCAPE PORTRAIT Here you can see an illustration of an elephant that is best suited to appearing in landscape. If we crop this illustration to make it portrait we lose the trunk and the hindquarters. If we add extra space to the left and right of the illustration the background is not continued. If we add extra space to the top and bottom of the illustration the background is not continued. IMAGES 114 Image Resolution 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. 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. 115 IMAGES Vector Images Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator. 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. 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. IMAGES 116 Animated GIFs Animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations. 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. 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). 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. 1 117 IMAGES 2 Some designers frown on animated GIFs because they remember a lot of amateur web designers overusing them in the 1990's. It is important to remember: Because GIFs are not an ideal format for displaying photographs, animated GIFs are really only suitable for simple illustrations. 3 4 5 6 7 8 Transparency Creating an image that is partially transparent (or "see-through") for the web involves selecting one of two formats: Transparent GIF PNG 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). If the transparent part of the image has diagonal or rounded edges or if you want a semiopaque transparency or a dropshadow, then you will need to save it as a PNG. Straight Diagonal Round 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. Semi-Opaque Drop-Shadow IMAGES 118 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.) 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 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.) 119 IMAGES 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 HTML5: Figure Article and Figure Caption HTML chapter-05/figure-and-figure-caption.html Sea otters hold hands when they sleep so they don't drift away from each other. 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. R e s u lt The element has been added to HTML5 in order to allow web page authors to add a caption to an image. Before these elements were created there was no way to associate an element with its caption. Older browsers that do not understand HTML5 elements simply ignore the new elements and display the content of them. IMAGES 120 In this example, the logo is a GIF because it uses flat colors, while the photographs are JPEGs. The main photo is placed inside the HTML5 element and has its own caption. 121 IMAGES The alt attribute on each image provides a description for those using screen readers and the title attribute provides additional information. (This is shown in the tooltip.) This example does not use the height, width, or align attributes as these are being phased out and you are encouraged to use CSS properties instead. Example IMAGES Images This recipe for individual chocolate cakes is so simple and so delectable! More Recipes: IMAGES 122 Summary IMAGES XX The element is used to add images to a web page. XX You must always specify a src attribute to indicate the source of an image and an alt attribute to describe the content of an image. XX You should save images at the size you will be using them on the web page and in the appropriate format. XX Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs. 6 Tables XX XX XX How to create tables What information suits tables How to represent complex data in tables There are several types of information that need to be displayed in a grid or table. For example: sports results, stock reports, train timetables. When representing information in a table, you need to think in terms of a grid made up of rows and columns (a bit like a spreadsheet). In this chapter you will learn how to: 127 TABLES ●● Use the four key elements for creating tables ●● Represent complex data using tables ●● Add captions to tables TABLES 128 129 TABLES What's a Table? A table represents information in a grid format. Examples of tables include financial reports, TV schedules, and sports results. Grids allow us to understand complex data by referencing information on two axes. Each block in the grid is referred to as a table cell. In HTML a table is written out row by row. TABLES 130 Basic Table Structure The element is used to create a table. The contents of the table are written out row by row. You indicate the start of each row using the opening tag. (The tr stands for table row.) It is followed by one or more elements (one for each cell in that row). chapter-06/basic-table-structure.html HTML 15 15 30 45 60 45 60 90 90 At the end of the row you use a closing tag. R e s u lt Each cell of a table is represented using a element. (The td stands for table data.) At the end of each cell you use a closing tag. Some browsers automatically draw lines around the table and/or the individual cells. You will learn how to control the borders of tables using CSS on pages 309-312 and 337-340. 131 TABLES Table Headings Article HTML chapter-06/table-headings.html Saturday Sunday Tickets sold: 120 135 Total sales: $600 $675 R e s u lt The element is used just like the element but its purpose is to represent the heading for either a column or a row. (The th stands for table heading.) Even if a cell has no content, you should still use a or element to represent the presence of an empty cell otherwise the table will not render correctly. (The first cell in the first row of this example shows an empty cell.) Using elements for headings helps people who use screen readers, improves the ability for search engines to index your pages, and also enables you to control the appearance of tables better when you start to use CSS. You can use the scope attribute on the element to indicate whether it is a heading for a column or a row. It can take the values: row to indicate a heading for a row or col to indicate a heading for a column. Browsers usually display the content of a element in bold and in the middle of the cell. TABLES 132 Spanning ColumnS Sometimes you may need the entries in a table to stretch across more than one column. The colspan attribute can be used on a or element and indicates how many columns that cell should run across. In the example on the right you can see a timetable with five columns; the first column contains the heading for that row (the day), the remaining four represent one hour time slots. If you look at the table cell that contains the words 'Geography' you will see that the value of the colspan attribute is 2, which indicates that the cell should run across two columns. In the third row, 'Gym' runs across three columns. You can see that the second and third rows have fewer elements than there are columns. This is because, when a cell extends across more than one column, the or cells that would have been in the place of the wider cells are not included in the code. I added some CSS styles to this example so that you can see how the cells span more than one column. You will learn how to do this on pages 250, 337-340. 133 TABLES chapter-06/spanning...
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

Hello.. would ...


Anonymous
Just what I was looking for! Super helpful.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags