Free Download PDF Books, HTML And CSS Design And Build Websites

HTML And CSS Design And Build Websites

CSS HTML HTML CSS HTML CSS ReadOnline Web Design

Summary of Contents

  • Page 1

    HTML&CSS<f\r\designand build websites/\/\/\JONDUCKETTwww.freepdf-books.com

  • Page 2

    www.freepdf-books.com

  • Page 3

    HTML & CSSDesign and Build WebsitesJon DuCkeTTJoHn WiLey & SonS, inC.WILEYwww.freepdf-books.com

  • Page 4

    Published byJohn Wiley & Sons, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256actionURI(http://www.wiley.com):www.wiley.com©2011 by John Wiley & Sons, Inc., Indianapolis, IndianaISBN: 978-1-118-00818-8Manufactured in the United States of AmericaPublished simultaneously in Canada10 9...

  • Page 5

    For John Wiley & Sons, Inc.ExECUTIvE EDIToRCarol LongMARkETINg MANAgERAshley ZurcherPRoDUCTIoN MANAgERTim TatePRoDUCTIoN EDIToRDaniel ScribnervICE PRESIDENT AND ExECUTIvE gRoUP PUBLISHERRichard SwadleyvICE PRESIDENT AND ExECUTIvE PUBLISHERBarry PruettASSoCIATE PUBLISHERJim MinatelPRoDUCTIoN C...

  • Page 6

    Try out and download all of the code for this book online at:http://www.htmlandcssbook.com/code/www.freepdf-books.com

  • Page 7

    IntroductionChapter 1: StructureChapter 2: TextChapter 3: ListsChapter 4: LinksChapter 5: ImagesChapter 6: TablesChapter 7: FormsChapter 8: Extra MarkupChapter 9: Flash, Video & AudioChapter 10: Introducing CSSChapter 11: ColorChapter 12: TextChapter 13: BoxesChapter 14: Lists, Tables & F...

  • Page 8

    www.freepdf-books.com

  • Page 9

    About this book XHow the web works XLearning from other pages XIntroductIonwww.freepdf-books.com

  • Page 10

    3INTRODUCTIONFirstly, 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 scratchAnyone who has a website (that may be built using a ●content management system, blogging softwa...

  • Page 11

    4INTRODUCTIONIntroduction 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 co...

  • Page 12

    5INTRODUCTIONAt 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 ce...

  • Page 13

    6INTRODUCTION1: htMLWe 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 beg...

  • Page 14

    7INTRODUCTIONBrowsersPeople access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera.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.Softwa...

  • Page 15

    8INTRODUCTIONwhat you seeWhen 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. Most web pages also include extra content such ...

  • Page 16

    9INTRODUCTIONOn 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 TokyoA user in New York visits ...

  • Page 17

    PARISLONDONCambridgeThe 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.The web se...

  • Page 18

    www.freepdf-books.com

  • Page 19

    1Understanding structure XLearning about markup XTags and elements XStructurewww.freepdf-books.com

  • Page 20

    13STRUCTUREWe 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 fo...

  • Page 21

    14STRUCTUREwww.freepdf-books.com

  • Page 22

    15STRUCTUREThink 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 u...

  • Page 23

    16STRUCTUREwww.freepdf-books.com

  • Page 24

    17STRUCTUREThe 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.This might be expanded upon under subheadings lower down on the page. W...

  • Page 25

    18STRUCTUREwww.freepdf-books.com

  • Page 26

    19STRUCTUREOn 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.www.freepdf-books.com

  • Page 27

    20STRUCTUREIn 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 ab...

  • Page 28

    21STRUCTURELet'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.CodeHtmL uSeS eLementS to deScribe tHe Structure of PageS<html> <body> <h1>This is the Main Heading</h1> <p>This ...

  • Page 29

    22STRUCTURETags act like containers. They tell you something about the information that lies between their opening and closing tags.desCriptionThe opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.The <body> tag indicates that anything ...

  • Page 30

    23STRUCTUREThe characters in the brackets indicate the tag's purpose. For example, in the tags above the p stands for paragraph.The closing tag has a forward slash after the the < symbol.a cLoSer Look at tagS<p>left-angle braCket (less-than sign)right-angle braCket (More-than sign)CharaC...

  • Page 31

    24STRUCTUREThe 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.</p>left-angle braCket (less-than sign)right-angle braCket (More-than sign)...

  • Page 32

    25STRUCTUREThe attribute name indicates what kind of extra information you are supplying about the element's content. It should be written in lowercase.The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.H...

  • Page 33

    26STRUCTUREThe majority of attributes canonly 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 v...

  • Page 34

    27STRUCTURE<html> <head> <title>This is the Title of the Page</title> </head> <body> <h1>This is the Body of the Page</h1> <p>Anything within the body of a web page is displayed in the main browser window.</p> </body></html...

  • Page 35

    28STRUCTUREYou 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 ...

  • Page 36

    29STRUCTURE12Type the code shown on the right.To create your first web page on a PC, start up Notepad. You can find this by going to:Start All Programs (or Programs) Accessories NotepadYou might also like to download a free editor called Notepad++ from notepad-plus-plus.org.creating a we...

  • Page 37

    articLe30STRUCTURE30STRUCTURE34Start 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 crea...

  • Page 38

    31STRUCTURE12Type the code shown on the right.To create your first web page on a Mac, start up TextEdit. This should be in your Applications folder.You might also like to download a free text editor for creating web pages called TextWrangler which is available from barebones.com.creating a web Pa...

  • Page 39

    articLe32STRUCTURE32STRUCTURE34Next, 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 c...

  • Page 40

    33STRUCTUREIf 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 ...

  • Page 41

    34STRUCTUREaltering 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 edi...

  • Page 42

    35STRUCTUREWhen 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 th...

  • Page 43

    36STRUCTUREwww.freepdf-books.com

  • Page 44

    www.freepdf-books.com

  • Page 45

    SummaryStructureHTML pages are text documents. XHTML uses tags (characters that sit inside angled Xbrackets) to give the information they surround special meaning.Tags are often referred to as elements. XTags usually come in pairs. The opening tag denotes Xthe start of a piece of content; the c...

  • Page 46

    www.freepdf-books.com

  • Page 47

    Headings and paragraphs XBold, italic, emphasis XStructural and semantic markup XTexT2www.freepdf-books.com

  • Page 48

    41TEXTWhen 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...

  • Page 49

    42TEXTwww.freepdf-books.com

  • Page 50

    43TEXTR e Su lt<h1>This is a Main Heading</h1><h2>This is a Level 2 Heading</h2><h3>This is a Level 3 Heading</h3><h4>This is a Level 4 Heading</h4><h5>This is a Level 5 Heading</h5><h6>This is a Level 6 Heading</h6>chapter-0...

  • Page 51

    arTicle44TEXT44TEXTR e Su lt<html>chapter-02/paragraphs.htmlHtM l<p>To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.By default, a browser will show each paragraph on a new line with some space between it and...

  • Page 52

    45TEXT<p>This is how we make a word appear <i>italic</i>. </p><p>It's a potato <i>Solanum teberosum</i>.</p><p>Captain Cook sailed to Australia on the <i>Endeavour</i>.</p>chapter-02/italic.htmlHtM lR e Su lt<p>This ...

  • Page 53

    arTicle46TEXT46TEXTR e Su lt<p>On the 4<sup>th</sup> of September you will learn about E=MC<sup>2</sup>.</p><p>The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>chapter-02/superscript-and...

  • Page 54

    47TEXTR e Su lt<p>The moon is drifting away from Earth.</p><p>The moon is drifting away from Earth.</p><p>The moon is drifting away from Earth.</p>chapter-02/white-space.htmlHtM lIn order to make code easier to read, web page authors often add extra s...

  • Page 55

    arTicle48TEXT48TEXT<p>Venus is the only planet that rotates clockwise.</p><hr /><p>Jupiter is bigger than all the other planets combined.</p>chapter-02/horizontal-rules.htmlHtM lR e Su lt<p>The Earth<br />gets one hundred tons heavier every day<b...

  • Page 56

    49TEXTVisual 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.Headings are created by ●highlighting text then using a drop-down box to select a heading.B...

  • Page 57

    50TEXTIn 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 <em> element that allows you to indicate where emphasis should be placed on selected words and the <blockquote> element wh...

  • Page 58

    51TEXT<p>I <em>think</em> Ivy was the first.</p><p>I think <em>Ivy</em> was the first.</p><p>I think Ivy was the <em>first</em>.</p>chapter-02/emphasis.htmlHtM lR e Su lt<p><strong>Beware:</strong> Pickpocke...

  • Page 59

    arTicle52TEXT52TEXTR e Su lt<blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p></blockquote><p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though...

  • Page 60

    53TEXTR e Su lt<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p><p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.<...

  • Page 61

    arTicle54TEXT54TEXT<p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light, can escape.</p>chapter-02/definitions.htmlHtM lR e Su lt<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies ...

  • Page 62

    55TEXTR e Su lt<address> <p><a href="mailto:homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield.</p></address>chapter-02/address.htmlHtM l<address>The <address> element has quite a specific use...

  • Page 63

    arTicle56TEXT56TEXT<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>chapter-02/strikethrough.htmlHtM lR e Su lt<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>chapter-02/...

  • Page 64

    57TEXTwww.freepdf-books.com

  • Page 65

    examPleTexT58TEXTThis is a very simple HTML page that demonstrates text markup.Structural markup includes elements such as <h1>, <h2>, and <p>. Semantic information is carried in elements such as <cite> and <em>.<html> <head> <title>Text</title&...

  • Page 66

    www.freepdf-books.com

  • Page 67

    summaryTexTHTML elements are used to describe the structure of Xthe page (e.g. headings, subheadings, paragraphs).They also provide semantic information (e.g. where Xemphasis should be placed, the definition of any acronyms used, when given text is a quotation).www.freepdf-books.com

  • Page 68

    www.freepdf-books.com

  • Page 69

    Numbered lists XBullet lists XDefinition lists XLists3www.freepdf-books.com

  • Page 70

    63LISTSThere are lots of occasions when we need to use lists. HTML provides us with three different types: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...

  • Page 71

    64LISTSwww.freepdf-books.com

  • Page 72

    65LISTSR e sU lt<ol>The ordered list is created with the <ol> element.<li>Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)Browsers indent lists by default.Sometimes you may see a type attribute used w...

  • Page 73

    ArticLe66LISTS66LISTSR e sU lt<ul> <li>1kg King Edward potatoes</li> <li>100ml milk</li> <li>50g salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li></ul>chapter-03/unordered-lists.htmlHtM lUnOr...

  • Page 74

    67LISTS<dl>The definition list is created with the <dl> element and usually consists of a series of terms and their definitions.Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.<dt>This is used to contain the term being defined (the ...

  • Page 75

    ArticLe68LISTS68LISTSYou can put a second list inside an <li> element to create a sub-list or nested list.Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too.R e sU lt<ul> <...

  • Page 76

    69LISTSwww.freepdf-books.com

  • Page 77

    exAmpLeLists70LISTS<html> <head> <title>Lists</title> </head> <body> <h1>Scrambled Eggs</h1> <p>Eggs are one of my favourite foods. Here is a recipe for deliciously rich scrambled eggs.</p> <h2>Ingredients</h2> <u...

  • Page 78

    www.freepdf-books.com

  • Page 79

    sUmmAryListsThere are three types of HTML lists: ordered, Xunordered, and definition. Ordered lists use numbers. XUnordered lists use bullets. XDefinition lists are used to define terminology. XLists can be nested inside one another. Xwww.freepdf-books.com

  • Page 80

    www.freepdf-books.com

  • Page 81

    Creating links between pages XLinking to other sites XEmail links XLinks4www.freepdf-books.com

  • Page 82

    75LINKSLinks are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.You will commonly come across the following types of links:Links from one website to another ●Links from one page to another on the same...

  • Page 83

    76LINKSwww.freepdf-books.com

  • Page 84

    77LINKSLinks are created using the <a> element. Users can click on anything between the opening <a> tag and the closing </a> tag. You specify which page you want to link to using the href attribute.Writing Links<a href="http://www.imdb.com">IMDB</a>This is ...

  • Page 85

    78LINKSThe text between the opening <a> tag and closing </a> 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 ...

  • Page 86

    79LINKSR e su lt<p>Movie Reviews: <ul> <li><a href="http://www.empireonline.com"> Empire</a></li> <li><a href="http://www.metacritic.com"> Metacritic</a></li> <li><a href="http://www.rottentomat...

  • Page 87

    ArticLe80LINKS80LINKSR e su lt<a>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...

  • Page 88

    81LINKSstructureThe diagram on the right shows the directory structure for a fictional entertainment listings website called ExampleArts. The top-level folder is known as the root folder. (In this example, the root folder is called examplearts.) The root folder contains all of the other files and...

  • Page 89

    82LINKSEvery 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/im...

  • Page 90

    83LINKSWhen 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 H...

  • Page 91

    84LINKSWhen a website is live (that is, uploaded to a web server) you may see a couple of other techniques used that do not work when the files are on your local computer.For example, you may see the name of a child folder without the name of a file. In this case the web server will usually try t...

  • Page 92

    85LINKSR e su lt<a href="mailto:jon@example.org">Email Jon</a>chapter-04/email-links.htmlHtM lmailto:To create a link that starts up the user's email program and addresses an email to a specified email address, you use the <a> element. However, this time the value of t...

  • Page 93

    ArticLe86LINKS86LINKSR e su lt<a href="http://www.imdb.com" target="_blank">Internet Movie Database</a> (opens in new window)chapter-04/opening-links-in-a-new-window.htmlHtM ltargetIf you want a link to open in a new window, you can use the target attribute on the ...

  • Page 94

    87LINKS<h1 id="top">Film-Making Terms</h1><a href="#arc_shot">Arc Shot</a><br /><a href="#interlude">Interlude</a><br /><a href="#prologue">Prologue</a><br /><br /><h2 id="arc_s...

  • Page 95

    ArticLe88LINKS88LINKSR e su ltIf 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...

  • Page 96

    89LINKSwww.freepdf-books.com

  • Page 97

    exAmPLeLinks90LINKSThis example is of a web page about film.The <h1> 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....

  • Page 98

    www.freepdf-books.com

  • Page 99

    summAryLinksLinks are created using the X<a> element.The X<a> element uses the href attribute to indicate the page you are linking to.If you are linking to a page within your own site, it is Xbest to use relative links rather than qualified URLs.You can create links to open email p...

  • Page 100

    www.freepdf-books.com

  • Page 101

    How to add images to pages XChoosing the right format XOptimizing images for the web XImages5www.freepdf-books.com

  • Page 102

    95IMAGESThere 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 loo...

  • Page 103

    96IMAGESwww.freepdf-books.com

  • Page 104

    97IMAGESImages 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...

  • Page 105

    98IMAGESIf 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 im...

  • Page 106

    99IMAGESR e su lt<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." />chapter-05/adding-images.htmlHtM l<img>To add an image into the page you need to use ...

  • Page 107

    artICle100IMAGES 100IMAGESR e su ltYou will also often see an <img> element use two other attributes that specify its size:heightThis specifies the height of the image in pixels.widthThis specifies the width of the image in pixels.Images often take longer to load than the HTML code that mak...

  • Page 108

    101IMAGES<img src="images/bird.gif" alt="Bird" width="100" height="100" /><p>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 ...

  • Page 109

    artICle102IMAGES 102IMAGESR e su ltWhere 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 <h1> and <p> elements.If the <img> is followed by a blo...

  • Page 110

    103 IMAGES<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="left" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species underta...

  • Page 111

    artICle104IMAGES 104IMAGESR e su ltThis 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 ri...

  • Page 112

    105 IMAGES<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="top" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertak...

  • Page 113

    artICle106IMAGES 106IMAGESThe 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 va...

  • Page 114

    107 IMAGESthree rules for CreatIng ImagesThere 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.1saVe Images In the rIght formatWebsites mainly use images in jpeg, gif, or png for...

  • Page 115

    108IMAGEStools to edIt& saVe ImagesThe 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 whi...

  • Page 116

    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: Jpegw...

  • Page 117

    www.freepdf-books.com

  • Page 118

    BUILD DESIGN CONCEPT RESEARCH TESTImage formats: gIfwww.freepdf-books.com

  • Page 119

    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...

  • Page 120

    113IMAGESFor 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 alt...

  • Page 121

    114IMAGESWhen cropping images it is important not to lose valuable information. It is best to source images that are the correct shape if possible.CroppIng ImagesHere you can see an illustration of an elephant that is best suited to appearing in landscape.landsCapeportraItIf we crop this illustra...

  • Page 122

    115IMAGESImages created for the web should be saved at a resolution of 72 ppi. The higher the resolution of the image, the larger the size of the file.Image resolutIonJPGs, GIFs, and PNGs belong to a type of image format known as bitmap. They are made up of lots of miniature squares. The resoluti...

  • Page 123

    116IMAGESWhen 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 c...

  • Page 124

    117IMAGESBelow you can see the individual frames that make up an animated GIF that shows an orange dot revolving around a circle — like the kind of animation you might see when a web page is loading. Some image editing applications such as Adobe Photoshop allow you to create animated GIFs. Ther...

  • Page 125

    118IMAGESCreating an image that is partially transparent (or "see-through") for the web involves selecting one of two formats:transparenCYpngIf the transparent part of the image has diagonal or rounded edges or if you want a semi-opaque transparency or a drop-shadow, then you will need ...

  • Page 126

    119IMAGESexamInIng Imageson the WebCheCkIng the sIze of ImagesIf 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....

  • Page 127

    artICle120IMAGES 120IMAGESR e su lt<figure> <img src="images/otters.jpg" alt="Photograph of two sea otters floating in water"> <br /> <figcaption>Sea otters hold hands when they sleep so they don't drift away from each other.</figcaption...

  • Page 128

    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 <figure> element and has its own caption.The alt attribute on each image provides a description for those using screen readers and the title attribute p...

  • Page 129

    exampleImages122IMAGES<html> <head> <title>Images</title> </head> <body> <h1> <img src="images/logo.gif" alt="From A to Zucchini" /> </h1> <figure> <img src="images/chocolate-islands.jpg" ...

  • Page 130

    www.freepdf-books.com

  • Page 131

    summarYImagesThe X<img> element is used to add images to a web page.You must always specify a Xsrc attribute to indicate the source of an image and an alt attribute to describe the content of an image.You should save images at the size you will be using Xthem on the web page and ...

  • Page 132

    www.freepdf-books.com

  • Page 133

    How to create tables XWhat information suits tables XHow to represent complex data in tables XTables6www.freepdf-books.com

  • Page 134

    127TABLESThere 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...

  • Page 135

    128TABLESwww.freepdf-books.com

  • Page 136

    129 TABLESwww.freepdf-books.com

  • Page 137

    130TABLESGrids 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.A table represents information in a grid format. Examples of tables include financial reports, TV schedules, a...

  • Page 138

    131TABLESR e su lt<table>The <table> element is used to create a table. The contents of the table are written out row by row.<tr>You indicate the start of each row using the opening <tr> tag. (The tr stands for table row.) It is followed by one or more <td> elements ...

  • Page 139

    arTicle132TABLES132TABLESR e su lt<th>The <th> element is used just like the <td> 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 <td> or <th> ...

  • Page 140

    133TABLESSometimes you may need the entries in a table to stretch across more than one column.The colspan attribute can be used on a <th> or <td> 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; t...

  • Page 141

    arTicle134TABLES 134TABLESYou may also need entries in a table to stretch down across more than one row.The rowspan attribute can be used on a <th> or <td> element to indicate how many rows a cell should span down the table.In the example on the left you can see that ABC is showing a ...

  • Page 142

    135TABLESThere are three elements that help distinguish between the main content of the table and the first and last rows (which can contain different content).These elements help people who use screen readers and also allow you to style these sections in a different manner than the rest of the t...

  • Page 143

    arTicle136TABLES 136TABLESR e su ltSome of the HTML editors that come in content management systems offer tools to help draw tables. If the first row of your table only contains <th> elements then you may find that the editor inserts a <thead> element automatically.Part of the reason ...

  • Page 144

    137TABLESR e su ltThere are some outdated attributes which you should not use on new websites. You may, however, come across some of them when looking at older code, so I will mention them here. All of these attributes have been replaced by the use of CSS.The width attribute was used on the openi...

  • Page 145

    arTicle138TABLES 138TABLESR e su ltThe border attribute was used on both the <table> and <td> elements to indicate the width of the border in pixels.The bgcolor attribute was used to indicate background colors of either the entire table or individual table cells. The value is usually ...

  • Page 146

    139 TABLESThis example shows a table for customers to compare website hosting packages. There are table headings in the first row and first column of the table. The empty cell in the top left still has a <th> element to represent it. Each cell of the table must be accounted for by a <th&...

  • Page 147

    exampleTables140TABLES<html> <head> <title>Tables</title> </head> <body> <table> <thead> <tr> <th></th> <th scope="col">Home starter hosting</th> <th scope="col">Premium busi...

  • Page 148

    www.freepdf-books.com

  • Page 149

    summaryTablesThe X<table> element is used to add tables to a web page.A table is drawn out row by row. Each row is created Xwith the <tr> element.Inside each row there are a number of cells Xrepresented by the <td> element (or <th> if it is a header).You can make cells ...

  • Page 150

    www.freepdf-books.com

  • Page 151

    How to collect information from visitors XDifferent kinds of form controls XNew HTML5 form controls XForms7www.freepdf-books.com

  • Page 152

    145 FORMSTraditionally, the term 'form' has referred to a printed document that contains spaces for you to fill in information.HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site.Whether you are adding a simple search ...

  • Page 153

    146FORMSwww.freepdf-books.com

  • Page 154

    147 FORMSIn addition to enabling users to search, forms also allow users to perform other functions online. You will see forms when registering as a member of a website, when shopping online, and when signing up for newsletters or mailing lists.The best known form on the web is probably the searc...

  • Page 155

    148FORMSThere are several types of form controls that you can use to collect information from visitors to your site.Form ControlsADDInG tEXt:mAkInG ChoICEs:submIttInG Forms:uploADInG FIlEs:Password inputLike a single line text box but it masks the characters entered.Text input (single-line)Used f...

  • Page 156

    149 FORMShoW Forms WorkThank you, Ivy!You voted for Herbie Hancock.A user fills in a form and then presses a button to submit the information to the server.The server creates a new page to send back to the browser based on the information received.VotE For your FAVorItE JAZZ musICIAn oF All tImEU...

  • Page 157

    150FORMSA form may have several form controls, each gathering different information. The server needs to know which piece of inputted data corresponds with which form element.To differentiate between various pieces of inputted data, information is sent from the browser to the server using name/va...

  • Page 158

    151FORMSR e su lt<form>Form controls live inside a <form> element. This element should always carry the action attribute and will usually have a method and id attribute too.actionEvery <form> element requires an action attribute. Its value is the URL for the page on the server t...

  • Page 159

    ArtIClE152FORMS152FORMSR e su lt<input>The <input> element is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating.type="text"When the type attribute has a value of text, it creates a single-line ...

  • Page 160

    153FORMSR e su lt<input>type="password"When the type attribute has a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out. They are hidden in this way so that if someone is looking over the user's shoulder, the...

  • Page 161

    ArtIClE154FORMS 154FORMSR e su lt<textarea>The <textarea> element is used to create a mutli-line text input. Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag. Any text that appears between the opening <textarea> and ...

  • Page 162

    155FORMSR e su lt<input>type="radio"Radio buttons allow users to pick just one of a number of options.nameThe name attribute is sent to the server with the value of the option the user selects. When a question provides users with options for answers in the form of radio buttons, t...

  • Page 163

    ArtIClE156FORMS 156FORMSR e su lt<input>type="checkbox"Checkboxes allow users to select (and unselect) one or more options in answer to a question.nameThe name attribute is sent to the server with the value of the option(s) the user selects. When a question provides users with opt...

  • Page 164

    157FORMSR e su lt<select>A drop down list box (also known as a select box) allows users to select one option from a drop down list. The <select> element is used to create a drop down list box. It contains two or more <option> elements. nameThe name attribute indicates the name o...

  • Page 165

    ArtIClE158FORMS 158FORMSR e su lt<select>sizeYou can turn a drop down select box into a box that shows more than one option by adding the size attribute. Its value should be the number of options you want to show at once. In the example you can see that three of the four options are shown.U...

  • Page 166

    159FORMSR e su lt<input>If you want to allow users to upload a file (for example an image, video, mp3, or a PDF), you will need to use a file input box.type="file"This type of input creates a box that looks like a text input followed by a browse button. When the user clicks on the...

  • Page 167

    ArtIClE160FORMS 160FORMSR e su lt<input>type="submit"The submit button is used to send a form to the server.nameIt can use a name attribute but it does not need to have one.valueThe value attribute is used to control the text that appears on a button. It is a good idea to specify ...

  • Page 168

    161FORMSR e su lt<input>type="image"If you want to use an image for the submit button, you can give the type attribute a value of image. The src, width, height, and alt attributes work just like they do when used with the <img> element (which we saw on pages 99-100).<form...

  • Page 169

    ArtIClE162FORMS 162FORMSR e su lt<button>The <button> element was introduced to allow users more control over how their buttons appear, and to allow other elements to appear inside the button.This means that you can combine text and images between the opening <button> tag and cl...

  • Page 170

    163 FORMSR e su lt<label>When introducing form controls, the code was kept simple by indicating the purpose of each one in text next to it. However, each form control should have its own <label> element as this makes the form accessible to vision-impaired users.The <label> eleme...

  • Page 171

    ArtIClE164FORMS 164FORMSR e su lt<fieldset>You can group related form controls together inside the <fieldset> element. This is particularly helpful for longer forms.Most browsers will show the fieldset with a line around the edge to show how they are related. The appearance of these l...

  • Page 172

    165 FORMSR e su ltYou have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation.Traditionally, form validation has been performed using JavaScript (which is beyond the scope of this book). But HTML5 is intro...

  • Page 173

    ArtIClE166FORMS 166FORMSR e su lt<input>Many forms need to gather information such as dates, email addresses, and URLs. This has traditionally been done using text inputs.HTML5 introduces new form controls to standardize the way that some information is gathered. Older browsers that do not ...

  • Page 174

    167FORMS<input>HTML5 has also introduced inputs that allow visitors to enter email addresses and URLs. Browsers that do not support these input types will just treat them as text boxes.type="email"If you ask a user for an email address, you can use the email input. Browsers that s...

  • Page 175

    ArtIClE168FORMS 168FORMS<input>If you want to create a single line text box for search queries, HTML5 provides a special type of input for that purpose.type="search"If you want to create a single line text box for search queries, HTML5 provides a special search input.To create the...

  • Page 176

    169 FORMSwww.freepdf-books.com

  • Page 177

    EXAmplEForms170FORMSThis example shows a feedback and newsletter sign-up form. It uses a variety of form controls.The <form> element uses the action attribute to indicate the page that the data is being sent to. Each of the form controls sits inside the <form> element. Different types...

  • Page 178

    171FORMSEXAmplEForms<html> <head> <title>Forms</title> </head> <body> <form action="http://www.example.com/review.php" method="get"> <fieldset> <legend> Your Details: </legend> <label> Name:...

  • Page 179

    172FORMSEXAmplEForms Would you visit again? <br /> <label> <input type="radio" name="rating" value="yes" /> Yes </label> <label> <input type="radio" name="rating" value="no&q...

  • Page 180

    www.freepdf-books.com

  • Page 181

    summAryFormsWhenever you want to collect information from Xvisitors you will need a form, which lives inside a <form> element.Information from a form is sent in name/value pairs. XEach form control is given a name, and the text the Xuser types in or the values of the options they select a...

  • Page 182

    www.freepdf-books.com

  • Page 183

    Specifying different versions of HTML XIdentifying and grouping elements XComments, meta information and iframes XExtra Markup8www.freepdf-books.com

  • Page 184

    177EXTRA MARKUPAt this point, we have covered the main tags that fit nicely into groups and sections.In this chapter, we will focus on some helpful topics that are not easily grouped together. You will learn about:The different versions of HTML and how to indicate which ●version you are usingH...

  • Page 185

    178EXTRA MARKUPwww.freepdf-books.com

  • Page 186

    179EXTRA MARKUPSince the web was first created, there have been several different versions of HTML.Each new version was designed to be an improvement on the last (with new elements and attributes added and older code removed).There have also been several versions of each browser used to view web ...

  • Page 187

    180EXTRA MARKUPThe examples in this book all follow these strict rules of XML.One of the key benefits of this change was that XHTML works seamlessly with other programs that are written to create and process XML documents.It could also be used with other data formats such as Scalable Vector Graph...

  • Page 188

    181EXTRA MARKUP<!DOCTYPE html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transition...

  • Page 189

    artiClE182EXTRA MARKUP 182EXTRA MARKUPR e Su LT<!-- start of introduction --><h1>Current Exhibitions</h1><h2>Olafur Eliasson</h2><!-- end of introduction --><!-- start of main text --><p>Olafur Eliasson was born in Copenhagen, Denmark in 1967 to Ic...

  • Page 190

    183 EXTRA MARKUPR e Su LT<p>Water and air. So very commonplace are these substances, they hardly attract attention - and yet they vouchsafe our very existence.</p><p id="pullquote">Every time I view the sea I feel a calming sense of security, as if visiting my ...

  • Page 191

    artiClE184EXTRA MARKUP 184EXTRA MARKUPEvery HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. For example, you might hav...

  • Page 192

    185 EXTRA MARKUPR e Su LTSome elements will always appear to start on a new line in the browser window. These are known as block level elements. Examples of block elements are <h1>, <p>, <ul>, and <li>.<h1>Hiroshi Sugimoto</h1><p>The dates for the ORIGIN ...

  • Page 193

    artiClE186EXTRA MARKUP 186EXTRA MARKUPTimed to a single revolution of the planet around the sun at a 23.4 degrees tilt that plays out the rhythm of the seasons, this <em>Origins of Art</em> cycle is organized around four themes: <b>science, architecture, history</b> and &l...

  • Page 194

    187 EXTRA MARKUPR e Su LT<div id="header"> <img src="images/logo.gif" alt="Anish Kapoor" /> <ul> <li><a href="index.html">Home</a></li> <li><a href="biography.html">Biography</a></li...

  • Page 195

    artiClE188EXTRA MARKUP 188EXTRA MARKUPR e Su LT<span>The <span> element acts like an inline equivalent of the <div> element. It is used to either:1. Contain a section of text where there is no other suitable element to differentiate it from its surrounding text2. Contain a numbe...

  • Page 196

    189 EXTRA MARKUPR e Su LT<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new+york &amp;output=embed"></iframe>chapter-08/iframes.htmlHTM L<iframe>An iframe is like a little window that has been cut into your page ...

  • Page 197

    artiClE190EXTRA MARKUP 190EXTRA MARKUPscrollingThe scrolling attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the iframe should have scrollbars or not. This is important if the page inside the iframe is larger than the space you have allowed for it (using the he...

  • Page 198

    191EXTRA MARKUPinforMation about Your paGEs<meta>The <meta> element lives inside the <head> element and contains information about that web page.It is not visible to users but fulfills a number of purposes such as telling search engines about your page, who created it, and wheth...

  • Page 199

    artiClE192EXTRA MARKUP192EXTRA MARKUP<!DOCTYPE html><html> <head> <title>Information About Your Pages</title> <meta name="description" content="An Essay on Installation Art" /> <meta name="keywords" content="instal...

  • Page 200

    193EXTRA MARKUPTherefore, if you want these characters to appear on your page you need to use what are termed "escape" characters (also known as escape codes or entity references). For example, to write a left angled bracket, you can use either &lt; or &#60;. For an ampersand, y...

  • Page 201

    194EXTRA MARKUP<>&"¢£¥¤©®™‘'“”×÷Less-than sign&lt; &#60; Greater-than sign&gt;&amp;Ampersand&amp;&#38;Quotation mark&quot; &#34; Cent sign&cent;&#162;Pound sign&pound; &#163;Yen sign&yen; &#165;euro sign&am...

  • Page 202

    195 EXTRA MARKUPThis example starts by using a DOCTYPE to indicate that this is an HTML 4 web page. In the head, you can also see a <meta> tag describing the page's content. Several elements use the id and class attributes to identify their purpose. The copyright symbol has been added using...

  • Page 203

    ExaMplEExtra Markup196EXTRA MARKUP<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta name="description" content="Telephone, email and directions for The Art Bookshop...

  • Page 204

    www.freepdf-books.com

  • Page 205

    suMMarYExtra MarkupDOCTYPES X tell browsers which version of HTML you are using.You can add comments to your code between the X<!-- and --> markers.The Xid and class attributes allow you to identify particular elements.The X<div> and <span> elements allow you to group block-...

  • Page 206

    www.freepdf-books.com

  • Page 207

    How to add Flash movies into your site XHow to add video and audio to your site XHTML5 X<video> and <audio> elementsFlash, Video & audio9www.freepdf-books.com

  • Page 208

    201 FLASH, VIDEO & AUDIOFlash is a very popular technology used to add animations, video, and audio to websites. This chapter begins by looking at how to use it in your web pages.We then focus on how to add video and audio to your site, using either the new HTML5 <video> and <audio&g...

  • Page 209

    202FLASH, VIDEO & AUDIOwww.freepdf-books.com

  • Page 210

    203 FLASH, VIDEO & AUDIOWhether you are creating an animation or a media player in Flash, the files you put on your website are referred to as Flash movies. If you want to create your own Flash movie, you need to purchase the Flash authoring environment from Adobe.There are, however, several ...

  • Page 211

    204FLASH, VIDEO & AUDIOWhen Flash was first released, it was developed to create animations. The technology quickly evolved, however, and people started to use it to build media players and even entire websites. Although Flash is still very popular, in recent years people have been more selec...

  • Page 212

    205 FLASH, VIDEO & AUDIOWeb technologies change quickly. Here you can see some of the changes in how animation, video, and audio are created on the web.Timeline:Flash, Video & audioOn this page you can see the first major players to provide web animation, audio, and video.On the facing pa...

  • Page 213

    206FLASH, VIDEO & AUDIOYouTube releases iPhone appVimeo releases HTML5 playerVimeo releases iPhone appYouTube launchedVimeo launchedYouTube releases HTML5 playerVideo sharing sites offer alternatives to self-hostingjQueryscript.aculo.usPrototypeJAVAScript libraries are written to create anima...

  • Page 214

    207 FLASH, VIDEO & AUDIO<!DOCTYPE html><html> <head> <title>Adding a Flash Movie</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ swfobject/2.2/swfobject.js"></script> <script type="t...

  • Page 215

    arTicle208FLASH, VIDEO & AUDIO 208FLASH, VIDEO & AUDIOR e su LTIn this example, the SWFObject script is hosted on Google's servers. We include the script in this web page using the first of the two <script> elements.The type attribute is used on the <script> element to indicat...

  • Page 216

    209 FLASH, VIDEO & AUDIOFormaTsMovies are available in many formats (BluRay, DVD, VHS, to name a few). Online, there are even more video formats (including AVI, Flash Video, H264, MPEG, Ogg Theora, QuickTime, WebM, and Windows Media).Just as your DVD player won't play a VHS cassette, browsers...

  • Page 217

    210FLASH, VIDEO & AUDIOadVanTagesHosted video sites (such as YouTube) provide players that work with the majority of web browsers.You do not need to worry about encoding your video since these sites allow you to upload your content in a range of formats. Once uploaded, they automatically conv...

  • Page 218

    211FLASH, VIDEO & AUDIOThere are three steps you need to follow to add a Flash Video to your web page:PreParing a Flash Video For Your siTe1conVerT Your Video inTo FlV FormaTTo play a Flash Video, you need to convert your video into FLV format. Since Flash 6, the Flash authoring environment h...

  • Page 219

    arTicle212FLASH, VIDEO & AUDIO212FLASH, VIDEO & AUDIOThis example uses the OS FLV player to display a video called puppy.flv, which has already been convered into FLV format.You have already seen how to use SWFObject to embed a basic animation in a page, but sometimes Flash movies need in...

  • Page 220

    213FLASH, VIDEO & AUDIOsuPPorTThe new HTML5 <video> element is only supported by recent browsers, so you cannot just use this one technique if you want everyone to be able to see your video (you need to combine this HTML5 with Flash Video).digiTal righTsAt the time of writing, the <v...

  • Page 221

    arTicle214FLASH, VIDEO & AUDIO 214FLASH, VIDEO & AUDIO<!DOCTYPE html><html> <head> <title>Adding HTML5 Video</title> </head> <body> <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height=...

  • Page 222

    215FLASH, VIDEO & AUDIOR e su LT<source>To specify the location of the file to be played, you can use the <source> element inside the <video> element. (This should replace the src attribute on the opening <video> tag.)You can also use multiple <source> elements t...

  • Page 223

    216FLASH, VIDEO & AUDIOYou may choose to offer HTML5 as the first option, and Flash video as a fallback for people whose browser does not support HTML5 video. Or you may work the other way around.Because some of the video players built in Flash support H264 encoding, if you use a player that ...

  • Page 224

    217FLASH, VIDEO & AUDIOBy far the most popular format for putting audio on web pages is MP3. As with video, there are three routes commonly taken:adding audio To web Pages1use a hosTed serViceThere are several sites that allow you to upload your audio, and provide a player which you can embed...

  • Page 225

    arTicle218FLASH, VIDEO & AUDIO 218FLASH, VIDEO & AUDIOThere are many MP3 players that have already been written in Flash, such as:flash-mp3-player.netmusicplayer.sourceforge.netwww.wimpyplayer.comEach of these players has different functionality, so check their features before choosing on...

  • Page 226

    219 FLASH, VIDEO & AUDIOR e su LT<!DOCTYPE html><html> <head> <title>Adding HTML5 Audio</title> </head> <body> <audio src="audio/test-audio.ogg" controls autoplay> <p>This browser does not support our audio format.</...

  • Page 227

    arTicle220FLASH, VIDEO & AUDIO 220FLASH, VIDEO & AUDIOhTml5: mulTiPle audio sources<source>It is possible to specify more than one audio file using the <source> element between the opening <audio> and closing </audio> tags (instead of the src attribute on the openi...

  • Page 228

    221 FLASH, VIDEO & AUDIOwww.freepdf-books.com

  • Page 229

    examPleFlash, Video & audio222FLASH, VIDEO & AUDIOThis example uses HTML5 to show a video.The video has been encoded in H264 and WebM formats to reach as many browsers as possible. A Flash player has been added to the page for browsers that do not support HTML5 video. The Flash player is ...

  • Page 230

    www.freepdf-books.com

  • Page 231

    summarYFlash, Video & audioFlash allows you to add animations, video and audio to Xthe web.Flash is not supported on iPhone or iPad. XHTML5 introduces new X<video> and <audio> elements for adding video and audio to web pages, but these are only supported in the latest browsers.B...

  • Page 232

    www.freepdf-books.com

  • Page 233

    10What CSS does XHow CSS works XRules, properties, and values XIntroducIng cSSwww.freepdf-books.com

  • Page 234

    227 INTRODUCING CSSIn this section, we will look at how to make your web pages more attractive, controlling the design of them using CSS.CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, ...

  • Page 235

    228INTRODUCING CSSwww.freepdf-books.com

  • Page 236

    229 INTRODUCING CSSYou may remember from pages 185-186 that in there is a difference between block level and inline elements and how how browsers display them.Block level elements look like they start on a new line. Examples include the <h1>-<h6>, <p> and <div> elements.I...

  • Page 237

    230INTRODUCING CSSCSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.In this example, block level elements are shown with red borders, and inline elements have green borders. The <body> element creates the first box, then...

  • Page 238

    231INTRODUCING CSSThis rule indicates that all <p> elements should be shown in the Arial typeface. Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements refe...

  • Page 239

    232INTRODUCING CSSThis rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.Properties indicate the aspects of the element you want to change. For example, color, font, width, height and border.Values specify the settings ...

  • Page 240

    233 INTRODUCING CSSwww.freepdf-books.com

  • Page 241

    exaMpLeIntroducIng cSS234INTRODUCING CSSHere you can see a simple web page that is styled using CSS.This example uses two documents: the HTML file (example.html) and a separate CSS file (example.css). The fifth line of HTML uses the <link> element to indicate where the CSS file is located.O...

  • Page 242

    235 INTRODUCING CSSR e su lt<!DOCTYPE html><html> <head> <title>Using External CSS</title> <link href="css/styles.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Potatoes</h1> <p>The...

  • Page 243

    artIcLe236INTRODUCING CSS 236INTRODUCING CSS<!DOCTYPE html><html> <head> <title>Using Internal CSS</title> <style type="text/css"> body { font-family: arial; background-color: rgb(185,179,175);} h1 { color: rgb(255,255,255);} </s...

  • Page 244

    237 INTRODUCING CSSThere are many different types of CSS selector that allow you to target rules to specific elements in an HTML document. The table on the opposite page introduces the most commonly used CSS selectors.On this page, there is an HTML file to demonstrate which elements these CSS sel...

  • Page 245

    238INTRODUCING CSS* {}Targets all elements on the pageh1, h2, h3 {}Targets the <h1>, <h2> and <h3> elements.note {}Targets any element whose class attribute has a value of notep.note {}Targets only <p> elements whose class attribute has a value of note#introduction {}Targe...

  • Page 246

    239 INTRODUCING CSS<h1>Potatoes</h1><p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties.</p><p>They are usually described as early, second early and maincrop potatoes.</p>chapter-10/cascade.htmlHtM lI...

  • Page 247

    artIcLe240INTRODUCING CSS 240INTRODUCING CSSR e su lt<div class="page"> <h1>Potatoes</h1> <p>There are dozens of different potato varieties.</p> <p>They are usually described as early, second early and maincrop potatoes.</p></div>chap...

  • Page 248

    241INTRODUCING CSSAll of your web pages can share the same style sheet. This is achieved by using the <link> element on each HTML page of your site to link to the same CSS document. This means that the same code does not need to be repeated in every page (which results in less code and smal...

  • Page 249

    242INTRODUCING CSSIn the same way that there have been several versions of HTML, there have also been different versions of CSS.Browsers did not implement all CSS features at once, so some older browsers do not support every property.This is mentioned when it is likely to affect you, along with n...

  • Page 250

    www.freepdf-books.com

  • Page 251

    SuMMaryIntroducIng cSSCSS treats each HTML element as if it appears inside Xits own box and uses rules to indicate how that element should look.Rules are made up of selectors (that specify the Xelements the rule applies to) and declarations (that indicate what these elements should look like).D...

  • Page 252

    www.freepdf-books.com

  • Page 253

    How to specify colors XColor terminology and contrast XBackground color XColor11www.freepdf-books.com

  • Page 254

    247 COLORColor can really bring your pages to life.In this chapter we will look at:How to specify colors, as there are three common ways in ●which you can indicate your choice of colors (plus extra ways made available in CSS3)Color terminology, as there are some terms that are very ●helpful...

  • Page 255

    248COLORwww.freepdf-books.com

  • Page 256

    249 COLORR e su lt/* color name */h1 { color: DarkCyan;}/* hex code */h2 { color: #ee3e80;}/* rgb value */p { color: rgb(100,100,90);}chapter-11/foreground-color.htmlCssThe color property allows you to specify the color of text inside an element. You can specify any color in CSS in one of three w...

  • Page 257

    artiCle250COLOR 250COLORR e su ltbody { background-color: rgb(200,200,200);}h1 { background-color: DarkCyan;}h2 { background-color: #ee3e80;}p { background-color: white;}chapter-11/background-color.htmlCssCSS treats each HTML element as if it appears in a box, and the background-color property se...

  • Page 258

    251COLOREvery color on a computer screen is created by mixing amounts of red, green, and blue. To find the color you want, you can use a color picker.understanding ColorComputer monitors are made up of thousands of tiny squares called pixels (if you look very closely at your monitor you should be...

  • Page 259

    252COLORRGB ValuesValues for red, green, and blue are expressed as numbers between 0 and 255. rgb(102,205,170)This color is made up of the following values:102 red205 green170 blueHex CodesHex values represent values for red, green, and blue in hexadecimal code.#66cdaaThe value of the red, 102, i...

  • Page 260

    253 COLORContrastWhen picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.Text is easier to read when there is higher contrast between background and foreground colors.If you want people to read a lot of text on your page, h...

  • Page 261

    artiCle254COLOR 254COLORR e su ltp.one { background-color: rgb(0,0,0); opacity: 0.5;}p.two { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);}chapter-11/opacity.htmlCssCSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child e...

  • Page 262

    255 COLORHueHue is the colloquial idea of color. In HSL colors, hue is often represented as a color circle where the angle represents the color, although it may also be shown as a slider with values from 0 to 360.satuRatioNSaturation is the amount of gray in a color. Saturation is represented as ...

  • Page 263

    artiCle256COLOR 256COLORR e su ltbody { background-color: #C8C8C8; background-color: hsl(0,0%,78%);}p { background-color: #ffffff; background-color: hsla(0,100%,100%,0.5);}chapter-11/hsla.htmlCssThe hsl color property has been introduced in CSS3 as an alternative way to specify colors. The value ...

  • Page 264

    257 COLORwww.freepdf-books.com

  • Page 265

    exampleColor258COLORThe rule for the <body> element sets a default color for all the text as well as the default background color for the page. Both use color names.The rule for the <h1> element sets the color of the heading using a hex code. There are two values for the background-co...

  • Page 266

    259 COLORexampleColor<!DOCTYPE html><html> <head> <title>Color</title> <style type="text/css"> body { background-color: silver; color: white; padding: 20px; font-family: Arial, Verdana, sans-serif;} h1 { background-color: #ffffff;...

  • Page 267

    260COLORexampleColor p.ten { background-color: rgb(84,182,237);} p.eleven { background-color: rgb(48,170,233);} p.twelve { background-color: rgb(0,160,230);} p.thirteen { background-color: rgb(0,149,226);} p.fourteen { background-color: rgb(0,136,221);} </style> &l...

  • Page 268

    www.freepdf-books.com

  • Page 269

    summaryColorColor not only brings your site to life, but also helps Xconvey the mood and evokes reactions.There are three ways to specify colors in CSS: XRGB values, hex codes, and color names.Color pickers can help you find the color you want. XIt is important to ensure that there i...

  • Page 270

    www.freepdf-books.com

  • Page 271

    Size and typeface of text XBold, italics, capitals, underlines XSpacing between lines, words, and letters XTexT12www.freepdf-books.com

  • Page 272

    265 TEXTThe properties that allow you to control the appearance of text can be split into two groups:Those that directly affect the font and its appearance ●(including the typeface, whether it is regular, bold or italic, and the size of the text)Those that would have the same effect on text no...

  • Page 273

    266TEXTwww.freepdf-books.com

  • Page 274

    267 TEXTTypeface TerminologySerif Serif fonts have extra details on the ends of the main strokes of the letters. These details are known as serifs.In print, serif fonts were traditionally used for long passages of text because they were considered easier to read.SanS-SerifSans-serif fonts have st...

  • Page 275

    268TEXTLightMediumBoldBlackNormalItalicObliqueCondensedRegularExtendedThe font weight not only adds emphasis but can also affect the amount of white space and contrast on a page. Italic fonts have a cursive aspect to some of the lettering. Oblique font styles take the normal style and put it on ...

  • Page 276

    269 TEXTchooSing a Typeface for your WebSiTeWhen choosing a typeface, it is important to understand that a browser will usually only display it if it's installed on that user's computer.SerifSerif fonts have extra details on the end of the main strokes of the letters.exampleS:GeorgiaTimesTimes Ne...

  • Page 277

    270TEXTmonoSpaceEvery letter in a monospace typeface is the same width. (Non-monospace fonts have different widths.)exampleS:CourierCourier NewcurSiveCursive fonts either have joining strokes or other cursive characteristics, such as handwriting styles.exampleS:Comic Sans MSMonotype CorsivafantaS...

  • Page 278

    271TEXTTechniqueS ThaT offer a Wider choice of TypefaceSThere are several ways to use fonts other than those listed on the previous page. However, typefaces are subject to copyright, so the techniques you can choose from are limited by their respective licenses.covered oniSSueSlicenSingchoice of ...

  • Page 279

    272TEXTIf you design on a Mac, it is important to check what the typefaces look like on a PC because PCs can render type less smoothly. But if you design on a PC, then it should look fine on a Mac.covered oniSSueSlicenSingchoice of TypefaceSnoT SuiTable for long paSSageS of TexTimageSYou can crea...

  • Page 280

    273 TEXTr e su lt<!DOCTYPE html><html> <head> <title>Font Family</title> <style type="text/css"> body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;} .credits { font-family: "Courier New&...

  • Page 281

    arTicle274TEXT 274TEXTr e su ltThe font-size property enables you to specify a size for the font. There are several ways to specify the size of a font. The most common are:pixelSPixels are commonly used because they allow web designers very precise control over how much space their text takes up....

  • Page 282

    275 TEXTYou may have noticed that programs such as Word, Photoshop and InDesign offer the same sizes of text.Type ScaleS8pt9pt10pt11pt12pt14pt18pt24pt36pt48pt60pt72ptThis is because they are set according to a scale or ratio that was developed by European typographers in the sixteenth century.It ...

  • Page 283

    276TEXTuniTS of Type SizeSetting font size in pixels is the best way to ensure that the type appears at the size you intended (because percentages and ems are more likely to vary if a user has changed the default size of text in their browser).Pixels are relative to the resolution of the screen, ...

  • Page 284

    277 TEXT@font-face allows you to use a font, even if it is not installed on the computer of the person browsing, by allowing you to specify a path to a copy of the font, which will be downloaded if it is not on the user's machine.Because this technique allows a version of the font to be downloade...

  • Page 285

    arTicle278TEXT 278TEXT@font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'), url('fonts/chunkfive.woff') format('woff'), url('fonts/chunkfive.ttf') format('truetype'), url('fonts/...

  • Page 286

    279 TEXTr e su lt.credits { font-weight: bold;}chapter-12/font-weight.htmlcssThe font-weight property allows you to create bold text. There are two values that this property commonly takes:normalThis causes text to appear at a normal weight.boldThis causes text to appear bold.In this example, you...

  • Page 287

    arTicle280TEXT 280TEXTIf you want to create italic text, you can use the font-style property. There are three values this property can take:normalThis causes text to appear in a normal style (as opposed to italic or oblique).italicThis causes text to appear italic.obliqueThis causes text to appea...

  • Page 288

    281 TEXTr e su lth1 { text-transform: uppercase;}h2 { text-transform: lowercase;}.credits { text-transform: capitalize;}chapter-12/text-transform.htmlcssThe text-transform property is used to change the case of text giving it one of the following values:uppercaseThis causes the text to appear upp...

  • Page 289

    arTicle282TEXT 282TEXTr e su lt.credits { text-decoration: underline;}a { text-decoration: none;}chapter-12/text-decoration.htmlcssThe text-decoration property allows you to specify the following values:noneThis removes any decoration already applied to the text.underlineThis adds a line undernea...

  • Page 290

    283 TEXTr e su ltp { line-height: 1.4em;}chapter-12/line-height.htmlcssLeading (pronounced ledding) is a term typographers use for the vertical space between lines of text. In a typeface, the part of a letter that drops beneath the baseline is called a descender, while the highest point of a lett...

  • Page 291

    arTicle284TEXT 284TEXTr e su lth1, h2 { text-transform: uppercase; letter-spacing: 0.2em;}.credits { font-weight: bold; word-spacing: 1em;}chapter-12/letter-and-word-spacing.htmlcssKerning is the term typographers use for the space between each letter. You can control the space between each lette...

  • Page 292

    285 TEXTr e su lth1 { text-align: left;}p { text-align: justify;}.credits { text-align: right;}chapter-12/text-align.htmlcssThe text-align property allows you to control the alignment of text. The property can take one of four values:leftThis indicates that the text should be left-aligned.rightTh...

  • Page 293

    arTicle286TEXT 286TEXTr e su ltThe vertical-align property is a common source of confusion. It is not intended to allow you to vertically align text in the middle of block level elements such as <p> and <div>, although it does have this effect when used with table cells (the <td>...

  • Page 294

    287 TEXTThe text-indent property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or ems.It can take a negative value, which means it can be used to push text off the browser...

  • Page 295

    arTicle288TEXT 288TEXTr e su ltp.one { background-color: #eeeeee; color: #666666; text-shadow: 1px 1px 0px #000000;}p.two { background-color: #dddddd; color: #666666; text-shadow: 1px 1px 3px #666666;}p.three { background-color: #cccccc; color: #ffffff; text-shadow: 2px 2px 7px #111111;}p.four { ...

  • Page 296

    289 TEXTr e su ltYou can specify different values for the first letter or first line of text inside an element using:first-letter and :first-line. Technically these are not properties. They are known as pseudo-elements.You specify the pseudo-element at the end of the selector, and then specify th...

  • Page 297

    arTicle290TEXT 290TEXTBrowsers tend to show links in blue with an underline by default, and they will change the color of links that have been visited to help users know which pages they have been to.In CSS, there are two pseudo-classes that allow you to set different styles for links that have a...

  • Page 298

    291 TEXTr e su ltinput { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;}input.submit:hover { background-color: #665544;}input.submit:active { background-color: chocolate;}input.text { color: #cccccc;}input.text:focus { color: #665544;}chapter-12/hover-active-focus.htmlcssT...

  • Page 299

    292TEXTYou met the most popular CSS selectors on page 238. There are also a set of attribute selectors that allow you to create rules that apply to elements that have an attribute with a specific value.aTTribuTe SelecTorS SelecTormeaningexamplep[class]Targets any <p> element with an attribu...

  • Page 300

    293 TEXTwww.freepdf-books.com

  • Page 301

    exampleTexT294TEXTThis example combines many of the techniques shown in this chapter.The sizes of fonts are controlled using the font-size property. The headings are changed from bold to normal using the font-weight property. We have also specified different choices of font using the font-family ...

  • Page 302

    295 TEXTexampleTexT<!DOCTYPE html><html> <head> <title>Text</title> <style type="text/css"> body { padding: 20px;} h1, h2, h3, a { font-weight: normal; color: #0088dd; margin: 0px;} h1 { font-family: Georgia, Times, serif; fo...

  • Page 303

    296TEXTexampleTexT <body> <h1>Briards</h1> <h2>A Heart wrapped in fur</h2> <p class="intro">The <a class="breed" href="http://en.wikipedia.org/wikiBriard"> briard</a>, or berger de brie, is a large breed of dog tr...

  • Page 304

    www.freepdf-books.com

  • Page 305

    SummaryTexTThere are properties to control the choice of font, size, Xweight, style, and spacing.There is a limited choice of fonts that you can assume Xmost people will have installed.If you want to use a wider range of typefaces there are Xseveral options, but you need to have the right lice...

  • Page 306

    www.freepdf-books.com

  • Page 307

    BoxesControlling size of boxes XBox model for borders, margin and padding XDisplaying and hiding boxes X13www.freepdf-books.com

  • Page 308

    301 BOXESAt the beginning of this section on CSS, you saw how CSS treats each HTML element as if it lives in its own box.You can set several properties that affect the appearance of these boxes. In this chapter you will see how to:Control the dimensions of your boxes ●Create borders around boxe...

  • Page 309

    302BOXESwww.freepdf-books.com

  • Page 310

    303 BOXESArticle303 BOXESR e su ltdiv.box { height: 300px; width: 300px; background-color: #bbbbaa;}p { height: 75%; width: 75%; background-color: #0088dd;}<div> <p>The Moog company pioneered the commercial manufacture of modular voltage-controlled analog synthesizer systems in t...

  • Page 311

    Article304BOXES 304BOXESSome page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stret...

  • Page 312

    305 BOXESArticle305 BOXESR e su lth2, p { width: 400px; font-size: 90%; line-height: 1.2em;}h2 { color: #0088dd; border-bottom: 1px solid #0088dd;}p { min-height: 10px; max-height: 30px;}In the same way that you might want to limit the width of a box on a page, you may also want to limit the heig...

  • Page 313

    Article306BOXES 306BOXESThe overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of two values:hiddenThis property simply hides any extra content that does not fit in the box.scrollThis property adds a scrollbar to the...

  • Page 314

    307 BOXESIf you specify a width for a box, then the borders, margin, and padding are added to its width and height.Every box has three available properties that can be adjusted to control its appearance:BorDer, mArgin & PADDing1BorderEvery box has a border (even if it is not visible or is spe...

  • Page 315

    308BOXESDesigners refer to the space between items on a page as white space. Imagine you had a border around a box. You would not want the text to touch this border or it would become harder to read.Or, imagine you had two boxes sitting side by side (each with a black border). You would not neces...

  • Page 316

    309 BOXESArticle309 BOXESR e su ltp.one { border-width: 2px;}p.two { border-width: thick;}p.three { border-width: 1px 4px 12px 4px;}<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p><p class="two">Hohner's "Clavinet...

  • Page 317

    Article310BOXES 310BOXESYou can control the style of a border using the border-style property. This property can take the following values:solid a single solid linedotted a series of square dots(if your border is 2px wide, then the dots are 2px squared with a 2px gap between each dot)dashed a ser...

  • Page 318

    311BOXESArticle311BOXESR e su ltp.one { border-color: #0088dd;}p.two { border-color: #bbbbaa #111111 #ee3e80 #0088dd;}Css<p class="one">The ARP Odyssey was introduced in 1972.</p><p class="two">The ARP Odyssey was introduced in 1972.</p>chapter-13/b...

  • Page 319

    Article312BOXES312BOXESThe border property allows you to specify the width, style and color of a border in one property (and the values should be coded in that specific order).R e su ltp { width: 250px; border: 3px dotted #0088dd;}Css<p>Here is a simple chord sequence played on a Hammond ...

  • Page 320

    313BOXESArticle313BOXESR e su ltp { width: 275px; border: 2px solid #0088dd;}p.example { padding: 10px;}CssThe padding property allows you to specify how much space should appear between the content of an element and its border. The value of this property is most often specified in pixels (althou...

  • Page 321

    Article314BOXES 314BOXESThe margin property controls the gap between boxes. Its value is commonly given in pixels, although you may also use percentages or ems.If one box sits on top of another, margins are collapsed , which means the larger of the two margins will be used and the smaller will be...

  • Page 322

    315BOXESArticle315BOXESR e su ltbody { text-align: center;}p { width: 300px; padding: 50px; border: 20px solid #0088dd;}p.example { margin: 10px auto 10px auto; text-align: left;}<body> <p>Analog synthesizers are often said to have a "warmer" sound than their digital ...

  • Page 323

    Article316BOXES 316BOXESWhen you specify the width of a box, any padding or margin should be added to the width of it. Internet Explorer 6, however, has a quirk whereby it includes the padding and margins in the width of the box.The way around this is to ensure that you provide a DOCTYPE declarat...

  • Page 324

    317BOXESArticle317BOXESThe display property allows you to turn an inline element into a block-level element or vice versa, and can also be used to hide an element from the page.The values this property can take are:inlineThis causes a block-level element to act like an inline element.blockThis ca...

  • Page 325

    Article318BOXES 318BOXESThe visibility property allows you to hide boxes from users but It leaves a space where the element would have been.This property can take two values:hiddenThis hides the element.visibleThis shows the element.If the visibility of an element is set to hidden, a blank space ...

  • Page 326

    319 BOXESArticle319 BOXESR e su ltp.one { -moz-border-image: url("images/dots.gif") 11 11 11 11 stretch; -webkit-border-image: url("images/dots.gif") 11 11 11 11 stretch; border-image: url("images/dots.gif") 11 11 11 11 stretch;}p.two { -moz-border-image: url...

  • Page 327

    Article320BOXES 320BOXESThe box-shadow property allows you to add a drop shadow around a box. It works just like the text-shadow property that you met on page 288. It must use at least the first of these two values as well as a color:horizontAl offsetNegative values position the shadow to the lef...

  • Page 328

    321BOXESArticle321BOXESR e su ltp { border: 5px solid #cccccc; padding: 20px; width: 275px; text-align: center; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}Css<p>Pet Sounds featured a number of unconventional instruments such as bicycle bells, buzzing org...

  • Page 329

    Article322BOXES 322BOXESTo create more complex shapes, you can specify different distances for the horizontal and the vertical parts of the rounded corners.For example, this will create a radius that is wider than it is tall:border-radius: 80px 50px;You can target just one corner using the indivi...

  • Page 330

    323 BOXESwww.freepdf-books.com

  • Page 331

    exAmPleBoxes324BOXESIn this example, you can see a simple homepage for a music shop.The whole page sits inside a <div> element with an id of page. This is centered using the margin property, with a value of auto for the left and right margins. The logo and other content are centered using t...

  • Page 332

    325 BOXESexAmPleBoxes<!DOCTYPE html><html> <head> <title>Boxes</title> <style type="text/css"> body { font-size: 80%; font-family: "Courier New", Courier, monospace; letter-spacing: 0.15em; background-color: #efefef;} #pag...

  • Page 333

    326BOXESexAmPleBoxes a { color: #000000; text-transform: uppercase; text-decoration: none; padding: 6px 18px 5px 18px;} a:hover, a.on { color: #cc3333; background-color: #ffffff;} </style> </head> <body> <div id="page"> <div id="...

  • Page 334

    www.freepdf-books.com

  • Page 335

    summAryBoxesCSS treats each HTML element as if it has its own box. XYou can use CSS to control the dimensions of a box. XYou can also control the borders, margin and padding Xfor each box with CSS.It is possible to hide elements using the display and Xvisibility properties.Block-level boxes ca...

  • Page 336

    www.freepdf-books.com

  • Page 337

    Specifying bullet point styles XAdding borders and backgrounds to tables XChanging the appearance of form elements XLists, tabLes and Forms14www.freepdf-books.com

  • Page 338

    331LISTS, TABLES AND FORMSThere are several CSS properties that were created to work with specific types of HTML elements, such as lists, tables, and forms.In this chapter you will learn how to:Specify the type of bullet point or numbering on lists ●Add borders and backgrounds to table cells ...

  • Page 339

    332LISTS, TABLES AND FORMSwww.freepdf-books.com

  • Page 340

    333 LISTS, TABLES AND FORMSarticLe333 LISTS, TABLES AND FORMSR e su ltol { list-style-type: lower-roman;}The list-style-type property allows you to control the shape or style of a bullet point (also known as a marker). It can be used on rules that apply to the <ol>, <ul>, and <li&g...

  • Page 341

    articLe334LISTS, TABLES AND FORMS 334LISTS, TABLES AND FORMSR e su ltYou can specify an image to act as a bullet point using thelist-style-image property.The value starts with the letters url and is followed by a pair of parentheses. Inside the parentheses, the path to the image is given inside d...

  • Page 342

    335 LISTS, TABLES AND FORMSarticLe335 LISTS, TABLES AND FORMSul { width: 150px;}li { margin: 10px;}ul.illuminations { list-style-position: outside;}ul.season { list-style-position: inside;}<ul class="illuminations"> <li>That idol, black eyes and ...</li> <li>Grac...

  • Page 343

    articLe336LISTS, TABLES AND FORMS 336LISTS, TABLES AND FORMSAs with several of the other CSS properties, there is a property that acts as a shorthand for list styles. It is called list-style, and it allows you to express the markers' style, image and position properties in any order.R e su ltul {...

  • Page 344

    337 LISTS, TABLES AND FORMSarticLe337 LISTS, TABLES AND FORMS<h1>First Edition Auctions</h1><table> <tr> <th>Author</th> <th>Title</th> <th class="money">Reserve Price</th> <th class="money">Current Bid</...

  • Page 345

    articLe338LISTS, TABLES AND FORMS 338LISTS, TABLES AND FORMSR e su ltbody { font-family: Arial, Verdana, sans-serif; color: #111111;}table { width: 600px;}th, td { padding: 7px 10px 10px 10px;}th { text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111;...

  • Page 346

    339 LISTS, TABLES AND FORMSarticLe339 LISTS, TABLES AND FORMSR e su lttd { border: 1px solid #0088dd; padding: 15px;}table.one { empty-cells: show;}table.two { empty-cells: hide;}Css<table class="one"> <tr> <td>1</td> <td>2</td> </tr> <tr&g...

  • Page 347

    articLe340LISTS, TABLES AND FORMS 340LISTS, TABLES AND FORMSThe border-spacing property allows you to control the distance between adjacent cells. By default, browsers often leave a small gap between each table cell, so if you want to increase or decrease this space then the border-spacing proper...

  • Page 348

    341 LISTS, TABLES AND FORMSstyLing FormsNobody I know enjoys filling in forms, so if you can make yours look more attractive and easier to use, more people are likely to fill it in. Also, when you come to look at a form in a few different browsers (as shown on the right), you will see that each b...

  • Page 349

    articLe342LISTS, TABLES AND FORMS 342LISTS, TABLES AND FORMSR e su ltinput { font-size: 120%; color: #5a5854; background-color: #f2f2f2; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 5px 5px 30px; background-repeat: no-repeat; background-position: 8px 9px; display: block; ...

  • Page 350

    343 LISTS, TABLES AND FORMSarticLe343 LISTS, TABLES AND FORMSR e su ltinput#submit { color: #444444; text-shadow: 0px 1px 1px #ffffff; border-bottom: 2px solid #b2b2b2; background-color: #b9e4e3; background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce)); background...

  • Page 351

    articLe344LISTS, TABLES AND FORMS 344LISTS, TABLES AND FORMSR e su ltfieldset { width: 350px; border: 1px solid #dcdcdc; border-radius: 10px; padding: 20px; text-align: right;}legend { background-color: #efefef; border: 1px solid #dcdcdc; border-radius: 10px; padding: 10px 20px; text-align: left;...

  • Page 352

    345 LISTS, TABLES AND FORMSarticLe345 LISTS, TABLES AND FORMS<form action="example.php" method="post"> <div> <label for="name" class="title">Name:</label> <input type="text" id="name" name="name" /&...

  • Page 353

    articLe346LISTS, TABLES AND FORMS 346LISTS, TABLES AND FORMSEach row of the form has a title telling users what they need to enter. For the text inputs, the title is in the <label> element. For the radio buttons, the title is in a <span> element. Both have a class attribute with a val...

  • Page 354

    347 LISTS, TABLES AND FORMSarticLe347 LISTS, TABLES AND FORMSa { cursor: move;}CssR e su lt<a href="http://www.whitmanarchive.org"> Walt Whitman</a>chapter-14/cursor.htmlHtM lThe cursor property allows you to control the type of mouse cursor that should be displayed to users...

  • Page 355

    348LISTS, TABLES AND FORMSThis helpful extension for Firefox and Chrome provides tools to show you the CSS styles that apply to an element when you hover over it, along with the structure of the HTML.web deveLoPer tooLbarDownload this tool from:www.chrispederick.com/work/web-developerTo see the C...

  • Page 356

    349 LISTS, TABLES AND FORMSwww.freepdf-books.com

  • Page 357

    examPLeLists, tabLes and Forms350LISTS, TABLES AND FORMSFor the list of free poetry events near the start of the page, the bullet points are styled with an image. The space between each list item is increased using the line-height property.For the table, the gaps between cells are removed using t...

  • Page 358

    351LISTS, TABLES AND FORMSexamPLeLists, tabLes and Forms<!DOCTYPE html><html> <head> <title>Lists, Tables and Forms</title> <style type="text/css"> body { font-family: Arial, Verdana, sans-serif; font-size: 90%; color: #666; background...

  • Page 359

    352LISTS, TABLES AND FORMSexamPLeLists, tabLes and Forms tr.even td, tr.even th { background-color: #e8eff5;} tr.head th:first-child { -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;} tr.head th:last-child { -webkit-border-to...

  • Page 360

    353 LISTS, TABLES AND FORMSexamPLeLists, tabLes and Forms background-color: #00CC33; color: #FFFFFF; cursor: pointer;} .title { float: left; width: 160px; clear: left;} .submit { width: 310px; text-align: right;} </style> </head> <body> <h1>Po...

  • Page 361

    354LISTS, TABLES AND FORMSexamPLeLists, tabLes and Forms <td>Sat, 7 Apr 2012<br />11am - 1pm</td> <td>Sat, 5 May 2012<br />11am - 1pm</td> <td>Sat, 19 May 2012<br />11am - 1pm</td> </tr> <tr> <th>Found Poems &...

  • Page 362

    www.freepdf-books.com

  • Page 363

    sUmmaryLists, tabLes and FormsIn addition to the CSS properties covered in other Xchapters which work with the contents of all elements, there are several others that are specifically used to control the appearance of lists, tables, and forms.List markers can be given different appearances Xusi...

  • Page 364

    www.freepdf-books.com

  • Page 365

    Controlling the position of elements XCreating site layouts XDesigning for different sized screens XLayout15www.freepdf-books.com

  • Page 366

    359 LAYOUTIn this chapter we are going to look at how to control where each element sits on a page and how to create attractive page layouts.This involves learning about how designing for a screen can be different to designing for other mediums (such as print). In this chapter we will:Explore dif...

  • Page 367

    360LAYOUTwww.freepdf-books.com

  • Page 368

    361LAYOUTKey ConCepts in positioning eLementsBuilding BlocksCSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between ...

  • Page 369

    362LAYOUTLorem•Ipsum•Dolor•ConsecteturLorem IpsumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute...

  • Page 370

    363 LAYOUTControLLing the position of eLementsLorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis au...

  • Page 371

    364LAYOUTLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli...

  • Page 372

    365 LAYOUTartiCLe365 LAYOUTR e su ltbody { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}h1 { background-color: #efefef; padding: 10px;}p { width: 450px;}In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers ...

  • Page 373

    artiCLe366LAYOUT 366LAYOUTRelative positioning moves an element in relation to where it would have been in normal flow.For example, you can move it 10 pixels lower than it would have been in normal flow or 20% to the right.You can indicate that an element should be relatively positioned using the...

  • Page 374

    367 LAYOUTartiCLe367 LAYOUTWhen the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.) The box offset properties (top or bottom and left or right) specify where the ...

  • Page 375

    artiCLe368LAYOUT 368LAYOUTFixed positioning is a type of absolute positioning that requires the position property to have a value of fixed.It positions the element in relation to the browser window. Therefore, when a user scrolls down the page, it stays in the exact same place. It is a good idea ...

  • Page 376

    369 LAYOUTartiCLe369 LAYOUTh1 { position: fixed; top: 0px; left: 0px; margin: 0px; padding: 10px; width: 100%; background-color: #efefef; z-index: 10;}p { position: relative; top: 70px; left: 70px;}chapter-15/z-index.htmlCssWhen you use relative, fixed, or absolute positioning, boxes can overlap....

  • Page 377

    artiCLe370LAYOUT 370LAYOUTThe float property allows you to take an element in normal flow and place it as far to the left or right of the containing element as possible.Anything else that sits inside the containing element will flow around the element that is floated.When you use the float proper...

  • Page 378

    371LAYOUTartiCLe371LAYOUTR e su ltbody { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;}p { width: 230px; float: left; margin: 5px; padding: 5px; background-color: #efefef;}Css<body> <h1>The Evolution of the Bicycle</h1> <p>In 1817 Baron von Drais i...

  • Page 379

    artiCLe372LAYOUT 372LAYOUTThe clear property allows you to say that no element (within the same containing element) should touch the left or right-hand sides of a box. It can take the following values:leftThe left-hand side of the box should not touch any other elements appearing in the same cont...

  • Page 380

    373 LAYOUTartiCLe373 LAYOUTR e su ltdiv { border: 1px solid #665544;}Css<body> <h1>The Evolution of the Bicycle</h1> <div> <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster...</p> </div>...

  • Page 381

    artiCLe374LAYOUT 374LAYOUTdiv { border: 1px solid #665544; overflow: auto; width: 100%;}CssR e su lt<body> <h1>The Evolution of the Bicycle</h1> <div> <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens fast...

  • Page 382

    375 LAYOUTartiCLe375 LAYOUTR e su lt.column1of2 { float: left; width: 620px; margin: 10px;}.column2of2 { float: left; width: 300px; margin: 10px;}Css<h1>The Evolution of the Bicycle</h1><div class="column1of2"> <h3>The First Bicycle</h3> <p>In 1817 Ba...

  • Page 383

    artiCLe376LAYOUT 376LAYOUTR e su lt.column1of3, .column2of3, .column3of3 { width: 300px; float: left; margin: 10px;}Css<h1>The Evolution of the Bicycle</h1><div class="column1of3"> <h3>The First Bicycle</h3> ...</div><div class="column2of3&quo...

  • Page 384

    377 LAYOUTDifferent visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range of different sized screens.sCreen sizesWhen designing for print, you always know the size of the piece of paper that your desi...

  • Page 385

    378LAYOUTResolution refers to the number of dots a screen shows per inch. Some devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their screens.sCreen resoLutionMost computers will allow owners to adjust the resolution of the...

  • Page 386

    379 LAYOUTJudging the height that people are likely to see on the screen without scrolling down the page is much harder. For several years, designers assumed that users would see the top 570-600 pixels of a page without having to scroll and some tried to fit all of the key messages in this area (...

  • Page 387

    380LAYOUTThe shaded area is hidden by the constraints of the browser window, so the user must scroll in order to view the lower region. However, the user gets a taste for what is lower on the page and can tell that there will be more to see if they scroll down.570 px1000 pxwww.freepdf-books.com

  • Page 388

    381 LAYOUTFixed width layout designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels.fixed width LayoutsLorem•Ipsum•Dolor•ConsecteturLorem IpsumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei...

  • Page 389

    382LAYOUTLiquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.Liquid LayoutsLorem•Ipsum•Dolor•ConsecteturLorem IpsumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidid...

  • Page 390

    383 LAYOUTartiCLe383 LAYOUTTo create a fixed width layout, the width of the main boxes on a page will usually be specified in pixels (and sometimes their height, too).Here you can see several <div> elements, each of which uses an id or class attribute to indicate its purpose on the page.In ...

  • Page 391

    artiCLe384LAYOUT 384LAYOUTThe rule for the <body> element is used to fix the width of the page at 960 pixels, and it is centered by setting the left and right margins to auto. The main boxes on the page have a margin of 10 pixels to create a gap between them.The navigation, feature, and foo...

  • Page 392

    385 LAYOUTartiCLe385 LAYOUTThe liquid layout uses percentages to specify the width of each box so that the design will stretch to fit the size of the screen.When trying this in your browser, remember to make the window smaller and larger.a Liquid Layout<body> <div id="header"&g...

  • Page 393

    artiCLe386LAYOUT 386LAYOUTThere is a rule on the <body> element to set the width of the page to 90% so that there is a small gap between the left and right-hand sides of the browser window and the main content.The three columns are all given a margin of 1% and a width of 31.3%. This adds up...

  • Page 394

    387 LAYOUTOn the right, you can see a set of thick vertical lines superimposed over the top of a newspaper website to show you how the page was designed according to a grid. This grid is called the 960 pixel grid and is widely used by web designers. Grids set consistent proportions and spaces bet...

  • Page 395

    388LAYOUTexampLe gridwww.freepdf-books.com

  • Page 396

    389 LAYOUTpossibLe Layouts:960 pixeL wide12 CoLumn grid940 px460 px300 px220 px140 px460 px300 px300 px220 px220 px220 px140 px140 px140 px140 px140 pxwww.freepdf-books.com

  • Page 397

    390LAYOUTThese two pages illustrate a 960 pixel wide, 12 column grid. They demonstrate how it is possible to create a wide range of column layouts using this one grid.The page is 960 pixels wide and there are 12 equal sized columns (shown in gray), each of which is is 60 pixels wide.Each column h...

  • Page 398

    391 LAYOUTCSS frameworks aim to make your life easier by providing the code for common tasks, such as creating layout grids, styling forms, creating printer-friendly versions of pages and so on. You can include the CSS framework code in your projects rather than writing the CSS from scratch.Css f...

  • Page 399

    392LAYOUTBelow you can see a sample layout of a page just like the fixed width page example. On the next page, we will recreate this using the 960.gs stylesheet. Instead of writing our own CSS to control layout, we will need to add classes to the HTML indicating how wide each section should be.us...

  • Page 400

    393 LAYOUTartiCLe393 LAYOUT<head> <title>Grid Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> <style>See the right hand page</style></head><body> <div class="container_1...

  • Page 401

    artiCLe394LAYOUT 394LAYOUTR e su lt* { font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center;}#nav, #feature, .article, #footer { background-color: #efefef; margin-top: 20px; padding: 10px 0px 5px 0px;}#feature, .article { height: 100px;}li { display: inline; padding: 5px;}C...

  • Page 402

    395 LAYOUTartiCLe395 LAYOUT<!DOCTYPE html> <html> <head> <title>Multiple Style Sheets - Import</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <body> <!-- HTML page content ...

  • Page 403

    artiCLe396LAYOUT 396LAYOUTOn this page you can see the other technique for including multiple style sheets. Inside the <head> element is a separate <link> element for each style sheet.The contents of site.css are identical to styles.css on the left hand page, except the code does not ...

  • Page 404

    397 LAYOUTwww.freepdf-books.com

  • Page 405

    exampLeLayout398LAYOUTSeveral classes from the 960.gs style sheet have been added to the code to indicate how many columns of the grid each element should stretch across. As you saw in this chapter, the 960.gs stylesheet uses the float property to position the blocks next to each other.At the sta...

  • Page 406

    399 LAYOUTexampLeLayout<!DOCTYPE html<html> <head> <title>Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> <style type="text/css"> @font-face { font-family: 'QuicksandBook'; ...

  • Page 407

    400LAYOUTexampLeLayout padding: 45px 0px 0px 0px; text-align: right;} .wrapper { width: 960px; margin: 0px auto; background-image: url("images/bg-triangle.png"); background-repeat: no-repeat; background-position: 0px 0px; text-align: left;} .logo { margin-...

  • Page 408

    401 LAYOUTexampLeLayout .more-articles p:last-child { border-bottom: none;} .footer { clear: both; background: rgba(0, 0, 0, 0.2); padding: 5px 10px;} .footer p { font-family: Helvetica, Arial, sans-serif; font-size: 75%; text-align: right;} .footer a { color: #807...

  • Page 409

    402LAYOUTexampLeLayout </div> </div><!-- .main-story --> <div class="more-articles container_12"> <h2 class="grid_12"><a href="">More Articles</a></h2> <div class="grid_3"> <img src=&...

  • Page 410

    www.freepdf-books.com

  • Page 411

    summaryLayout<div> X elements are often used as containing elements to group together sections of a page.Browsers display pages in normal flow unless you Xspecify relative, absolute, or fixed positioning.The Xfloat property moves content to the left or right of the page and can be used to...

  • Page 412

    www.freepdf-books.com

  • Page 413

    Controlling size of images in CSS XAligning images in CSS XAdding background images XImages16www.freepdf-books.com

  • Page 414

    407 IMAGESControlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.You can also achieve several interesting effects using background images. In this chapter you will learn how to:Specify the size and al...

  • Page 415

    408IMAGESwww.freepdf-books.com

  • Page 416

    409 IMAGESartIcle409 IMAGESimg.large { width: 500px; height: 500px;} img.medium { width: 250px; height: 250px;}img.small { width: 100px; height: 100px;}CSS<img src="images/magnolia-large.jpg" class="large" alt="Magnolia" /> <img src="images/magn...

  • Page 417

    artIcle410IMAGES 410IMAGESR e Su LTFirst you need to determine the sizes of images that will be used commonly throughout the site, then give each size a name.For example:smallmediumlargeWhere the <img> elements appear in the HTML, rather than using width and height attributes you can use th...

  • Page 418

    411IMAGESartIcle411IMAGESimg.align-left { float: left; margin-right: 10px;}img.align-right { float: right; margin-left: 10px;}img.medium { width: 250px; height: 250px;}R e Su LTCSS<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium&...

  • Page 419

    artIcle412IMAGES 412IMAGESR e Su LTimg.align-center { display: block; margin: 0px auto;} img.medium { width: 250px; height: 250px;}CSS<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-center medium" /> <b><i>Magnolia&...

  • Page 420

    413 IMAGESThe background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box.The path to the image follows the letters url, and it is put inside parentheses a...

  • Page 421

    artIcle414IMAGES 414IMAGESThe background-repeat property can have four values:repeatThe background image is repeated both horizontally and vertically (the default way it is shown if the background-repeat property isn't used).repeat-xThe image is repeated horizontally only (as shown in the first e...

  • Page 422

    415 IMAGESWhen an image is not being repeated, you can use the background-position property to specify where in the browser window the background image should be placed. This property usually has a pair of values. The first represents the horizontal position and the second represents the vertical...

  • Page 423

    artIcle416IMAGES 416IMAGESThe background property acts like a shorthand for all of the other background properties you have just seen, and also the background-color property.The properties must be specified in the following order, but you can miss any value if you do not want to specify it.1: bac...

  • Page 424

    417 IMAGESartIcle417 IMAGESa.button { height: 36px; background-image: url("images/button-sprite.jpg"); text-indent: -9999px; display: inline-block;}a#add-to-basket { width: 174px; background-position: 0px 0px;}a#framing-options { width: 210px; background-position: -175px 0px;}a#add-to-b...

  • Page 425

    artIcle418IMAGES 418IMAGESR e Su LTIn this example, you can see two links that look like buttons. Each of the buttons has three different states. These are all represented in a single image.Because the <a> element is an inline element, we set the display property of these links to indicate ...

  • Page 426

    419 IMAGESartIcle419 IMAGESCSS3 is going to introduce the ability to specify a gradient for the background of a box. The gradient is created using the background-image property and, at the time of writing, different browsers required a different syntax.Since it is not supported by all browsers, i...

  • Page 427

    420IMAGESIf you want to overlay text on a background image, the image must be low contrast in order for the text to be legible.contrast of BackgroUnd ImageshIgh contrastlow contrastscreenA high contrast background image makes the text difficult to read.A low contrast background image makes the te...

  • Page 428

    421 IMAGESwww.freepdf-books.com

  • Page 429

    exampleImages422IMAGESA background texture is applied to the whole page by repeating an image with the texture behind the <body> element. A repeating background image is sometimes referred to as wallpaper.The content of the page is put inside a <div> element whose class is wrapper. Th...

  • Page 430

    423 IMAGESexampleImages<!DOCTYPE html><html> <head> <title>Images</title> <style type="text/css"> body { color: #665544; background-color: #d4d0c6; background-image: url("images/backdrop.gif"); font-family: Georgia, "Tim...

  • Page 431

    424IMAGESexampleImages </head> <body> <div class="wrapper"> <div class="header"> <img src="images/title.gif" alt="Galerie Botanique" width="456" height="122" /> <p>Here is a selection of antiq...

  • Page 432

    www.freepdf-books.com

  • Page 433

    sUmmaryImagesYou can specify the dimensions of images using CSS. XThis is very helpful when you use the same sized images on several pages of your site.Images can be aligned both horizontally and vertically Xusing CSS.You can use a background image behind the box Xcreated by any element on a p...

  • Page 434

    www.freepdf-books.com

  • Page 435

    HTML5 LayouT17HTML5 layout elements XHow old browsers understand new elements XStyling HTML5 layout elements with CSS Xwww.freepdf-books.com

  • Page 436

    429 HTML5 LAYOUTHTML5 is introducing a new set of elements that help define the structure of a page.They are covered here (rather than with the other HTML elements you met earlier in the book) because you'll find it easier to understand how they can be used now that you have seen how CSS can cont...

  • Page 437

    430HTML5 LAYOUTwww.freepdf-books.com

  • Page 438

    431 HTML5 LAYOUTOn the right you can see a layout that is quite common (particularly on blog sites). At the top of the page is the header, containing a logo and the primary navigation.Under this are one or more articles or posts. Sometimes these are summaries that link to individual posts.There i...

  • Page 439

    432HTML5 LAYOUTThis example has exactly the same structure as seen on the previous page. However, many of the <div> elements have been replaced by new HTML5 layout elements.For example, the header sits inside a new <header> element, the navigation in a <nav> element, and the art...

  • Page 440

    433 HTML5 LAYOUT<header> <h1>Yoko's Kitchen</h1> <nav> <ul> <li><a href="" class="current">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering...

  • Page 441

    arTicLe434HTML5 LAYOUT 434HTML5 LAYOUTThe <nav> element is used to contain the major navigational blocks on the site such as the primary site navigation.Going back to our blog example, if you wanted to finish an article with links to related blog posts, these would not be counted as major n...

  • Page 442

    435 HTML5 LAYOUT<article> <figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </...

  • Page 443

    arTicLe436HTML5 LAYOUT 436HTML5 LAYOUTThe <aside> element has two purposes, depending on whether it is inside an <article> element or not.When the <aside> element is used inside an <article> element, it should contain information that is related to the article but not esse...

  • Page 444

    437 HTML5 LAYOUT<section class="popular-recipes"> <h2>Popular Recipes</h2> <a href="">Yakitori (grilled chicken)</a> <a href="">Tsukune (minced chicken patties)</a> <a href="">Okonomiyaki (savory pancakes)<...

  • Page 445

    arTicLe438HTML5 LAYOUT 438HTML5 LAYOUTThe purpose of the <hgroup> element is to group together a set of one or more <h1> through <h6> elements so that they are treated as one single heading. For example, the <hgroup> element could be used to contain both a title inside an ...

  • Page 446

    439 HTML5 LAYOUT<figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption></figure>chapter-17/example.htmlHTM LYou already met the <figure> element in Chapter 5 when we looked at images. It can be used to con...

  • Page 447

    arTicLe440HTML5 LAYOUT 440HTML5 LAYOUT<div class="wrapper"> <header> <h1>Yoko's Kitchen</h1> <nav> <!-- nav content here --> </nav> </header> <section class="courses"> <!-- section content here --> </section&...

  • Page 448

    441 HTML5 LAYOUT<a href="introduction.html"> <article> <figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2&g...

  • Page 449

    arTicLe442HTML5 LAYOUT 442HTML5 LAYOUTOlder browsers that do not know the new HTML5 elements will automatically treat them as inline elements. Therefore, to help older browsers, you should include the line of CSS on the left which states which new elements should be rendered as block-level elemen...

  • Page 450

    443 HTML5 LAYOUTwww.freepdf-books.com

  • Page 451

    exaMpLeHTML5 LayouT444HTML5 LAYOUTThe header and footer of the page sit inside <header> and <footer> elements. The courses are grouped together inside a <section> element that has a class attribute whose value is courses (to distinguish it from other <section> elements on ...

  • Page 452

    445 HTML5 LAYOUTexaMpLeHTML5 LayouT<!DOCTYPE html><html> <head> <title>HTML5 Layout</title> <style type="text/css"> header, section, footer, aside, nav, article, figure, figcaption { display: block;} body { color: #666666; backgroun...

  • Page 453

    446HTML5 LAYOUTexaMpLeHTML5 LayouT color: #ffffff;} nav li a:hover, nav li a.current { color: #000000;} section.courses { float: left; width: 659px; border-right: 1px solid #eeeeee;} article { clear: both; overflow: auto; width: 100%;} hgroup { margi...

  • Page 454

    447 HTML5 LAYOUTexaMpLeHTML5 LayouT margin: 10px 0px 5px 0px; padding: 0px;} h3 { margin: 0px 0px 10px 0px; color: #de6581;} aside h2 { padding: 30px 0px 10px 0px; color: #de6581;} footer { font-size: 80%; padding: 7px 0px 0px 20px;} </style> <!-...

  • Page 455

    448HTML5 LAYOUTexaMpLeHTML5 LayouT <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p> </article> <article> <figure> <img src="images/teriyaki.jpg" alt...

  • Page 456

    www.freepdf-books.com

  • Page 457

    suMMaryHTML5 LayouTThe new HTML5 elements indicate the purpose of Xdifferent parts of a web page and help to describe its structure.The new elements provide clearer code (compared Xwith using multiple <div> elements).Older browsers that do not understand HTML5 Xelements need to be t...

  • Page 458

    www.freepdf-books.com

  • Page 459

    How to approach building a site XUnderstanding your audience and their needs XHow to present information visitors want to see XProcess & Design18www.freepdf-books.com

  • Page 460

    453 PROCESSThis section discusses a process that you can use when you are creating a new website.It looks at who might be visiting your site and how to ensure the pages feature the information those visitors need. It also covers some key aspects of design theory to help you create professional l...

  • Page 461

    454PROCESSwww.freepdf-books.com

  • Page 462

    455 PROCESSEvery website should be designed for the target audience—not just for yourself or the site owner. It is therefore very important to understand who your target audience is.Who is the site For?target auDience: inDiviDualsWhat is the age range of your target audience? ●Will your site ...

  • Page 463

    456PROCESSInvent some fictional visitors from your typical target audience. They will become your friends. They can influence design decisions from color palettes to level of detail in descriptions.NameGenderageLocationOccupationIncomeWeb UseGOrdONM28ChicagoTeacher$62k2-3 days/wkmOLLyF47San Franc...

  • Page 464

    457 PROCESSYour content and design should be influenced by the goals of your users. To help determine why people are coming to your website, there are two basic categories of questions you can ask:1: The first attempts to discover the underlying motivations for why visitors come to the site.2: Th...

  • Page 465

    458PROCESSFirst you want to create a list of reasons why people would be coming to your site. You can then assign the list of tasks to the fictional visitors you created in the step described on the previous page.GOrdON bought a tennis racquet several years ago; now he wants to purchase one from ...

  • Page 466

    459 PROCESSYou may want to offer additional supporting information that you think they might find helpful.Look at each of the reasons why people will be visiting your site and determine what they need to achieve their goals.You can prioritize levels of information from key points down to non-esse...

  • Page 467

    460PROCESSA website about fashion trends will need to change a lot more frequently than one that is promoting a service that people do not buy regularly (such as domestic plumbing or double glazing).Once a site has been built, it can take a lot of time and resources to update it frequently.Workin...

  • Page 468

    461 PROCESSThe aim is to create a diagram of the pages that will be used to structure the site. This is known as a site map and it will show how those pages can be grouped.To help you decide what information should go on each page, you can use a technique called card sorting.This involves placing...

  • Page 469

    462PROCESSexamPle site maPHomeLocationopening timesticketsBooksgiftsnewsBook ReviewspRessinteRviewsHistoRyfoundationfutuRe pLansvisitsHopcontactaRticLesaBoutwww.freepdf-books.com

  • Page 470

    463 PROCESSA lot of designers will take the elements that need to appear on each page and start by creating wireframes. This involves sketching or shading areas where each element of the page will go (such as the logo, primary navigation, headings and main bodies of text, user logins etc).By crea...

  • Page 471

    464PROCESSexamPle WireFramewww.freepdf-books.com

  • Page 472

    465 PROCESScontentWeb pages often have a lot of information to communicate. For example, the pages of online newspapers will have information that does not appear on every page of the print equivalent:A masthead or logo ●Links to navigate the site ●Links to related content and ●other popul...

  • Page 473

    466PROCESSLet's look at an example of how design can be used to effectively communicate the services of a company.visual hierarchyAttention is immediately drawn to a picture that shows the service this company offers and a headline to explain it. The size and colored background reinforce that th...

  • Page 474

    467 PROCESSMost web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for.visual hierarchyLorem ipsum dolor sit amet, consectetur adipiscing elit. Lo...

  • Page 475

    468PROCESSvisual hierarchy refers to the order in which your eyes perceive what they see. It is created by adding visual contrast between the items being displayed. Items with higher contrast are recognized and processed first.imagesImages create a high visual contrast and often attract the eye f...

  • Page 476

    469 PROCESSWhen making sense of a design, we tend to organize visual elements into groups. Grouping related pieces of information together can make a design easier to comprehend. Here are some ways this can be achieved.grouPing anD similarityProximityWhen several items are placed close together, ...

  • Page 477

    470PROCESSWe naturally observe similarities in design, and things that are similar are perceived to be more related than things that are dissimilar. Repetition of similar color, size, orientation, texture, font, or shape, suggests that matching elements have similar importance or meaning.consiste...

  • Page 478

    471 PROCESSSite navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized. Good navigation tends to follow these principles...Designing navigationconciseIdeally, the navigation should be quick and easy to read. It i...

  • Page 479

    472PROCESScontextGood navigation provides context. It lets the user know where they are in the website at that moment. Using a different color or some kind of visual marker to indicate the current page is a good way to do this.interactiveEach link should be big enough to click on and the appearan...

  • Page 480

    www.freepdf-books.com

  • Page 481

    summaryProcess & DesignIt's important to understand who your target audience Xis, why they would come to your site, what information they want to find and when they are likely to return.Site maps allow you to plan the structure of a site. XWireframes allow you to organize the information tha...

  • Page 482

    www.freepdf-books.com

  • Page 483

    Search engine optimization XUsing analytics to understand visitors XPutting your site on the web XPractical information19www.freepdf-books.com

  • Page 484

    477 PRACTICAL INFORMATIONTo wrap up the book we are going to look at some practical information that will help you launch a successful site.There are entire books written about each of the topics covered in this chapter but I will introduce you to the key themes that each subject deals with and g...

  • Page 485

    478PRACTICAL INFORMATIONwww.freepdf-books.com

  • Page 486

    479 PRACTICAL INFORMATIONthe BasicsSearch engine optimization (or SEO) is the practice of trying to help your site appear nearer the top of search engine results when people look for the topics that your website covers.At the heart of SEO is the idea of working out which terms people are likely t...

  • Page 487

    480PRACTICAL INFORMATIONIn every page of your website there are seven key places where keywords (the words people might search on to find your site) can appear in order to improve its findability.on-Page seo1: Page titleThe page title appears at the top of the browser window or on the tab of a br...

  • Page 488

    481 PRACTICAL INFORMATION1: BrainstormList down the words that someone might type into Google to find your site. Be sure to include the various topics, products or services your site is about.It often helps to ask other people what words they would use to find your site because people less famili...

  • Page 489

    482PRACTICAL INFORMATION4: comPareIt is very unlikely that your site will appear at the top of the search results for every keyword. This is especially true for topics where there is a lot of competition. The more sites out there that have already been optimized for a given keyword, the harder it...

  • Page 490

    483 PRACTICAL INFORMATIONsigning uPThe Google Analytics service relies on you signing up for an account at:www.google.com/analytics The site will give you a piece of tracking code which you need to put on every page of your site.hoW it WorksEvery time someone loads a page of your site, the tracki...

  • Page 491

    484PRACTICAL INFORMATIONVisitsThis is the number of times people have come to your site. If someone is inactive on your site for 30 minutes and then looks at another page on your site, it will be counted as a new visit.unique VisitsThis is the total number of people who have visited your site ove...

  • Page 492

    485 PRACTICAL INFORMATIONThe content link on the left-hand side allows you to learn more about what the visitors are looking at when they come to your site.What are your Visitors looking at?PagesThis tells you which pages your visitors are looking at the most and also which pages they are spendin...

  • Page 493

    486PRACTICAL INFORMATIONThe traffic sources link on the left hand side allows you to learn where your visitors are coming from.Where are your Visitors coming from?referrersThis shows the sites that have linked to you and the number of people who have come via those sites. If a site sends a lot of...

  • Page 494

    487 PRACTICAL INFORMATIONIn order to put your site on the web you will need a domain name and web hosting.domain names& hostingdomain namesWeB hostingYour domain name is your web address (e.g. google.com or bbc.co.uk). There are many websites that allow you to register domain names. Usually y...

  • Page 495

    488PRACTICAL INFORMATIONemail accountsMost hosting companies will provide email servers with their web hosting packages. You will want to check the size of mailbox you are allowed and the number of mailboxes you can use.serVer-side languages and dataBasesIf you are using a content management syst...

  • Page 496

    489 PRACTICAL INFORMATIONAs the name suggests, File Transfer Protocol (or FTP) allows you to transfer files across the Internet from your computer to the web server hosting your site. There are many FTP programs that offer a simple interface that shows you the files on your computer alongside the...

  • Page 497

    490PRACTICAL INFORMATIONThere are a wide variety of sites that offer services commonly created by web developers (to save you having to build them yourself).Here is a list of some popular third party tools:Blogswordpress.comtumblr.composterous.come-commerceshopify.combigcartel.comgo.magento.comem...

  • Page 498

    www.freepdf-books.com

  • Page 499

    summaryPractical informationSearch engine optimization helps visitors find your Xsites when using search engines.Analytics tools such as Google Analytics allow you to Xsee how many people visit your site, how they find it, and what they do when they get there.To put your site on the web, you wi...

  • Page 500

    www.freepdf-books.com

  • Page 501

    A-Z XHTML & CSS shortcuts XTroubleshooting XIndexwww.freepdf-books.com

  • Page 502

    INDEX# symbol (links) 87, 88_blank 86<!-- --> 1823D borders 3103D form buttoms 34312 column grid 387–390960 pixel grid 387–390, 391–394, 463Aabbreviations 53above the fold 379absolute positioning 363, 367absolute URLs 79accessibility 7alt text 99, 272, 480contrast 253, 4...

  • Page 503

    INDEXdesign 467, 469hex codes 249, 252hsl / hsla 255–256hue 252, 255lightness 255opacity 254rgb values 249, 252rgba 254saturation 252, 255selecting a color 251cols attribute 154colspan attribute 133columns (layout) 375–376comments in HTML 182comments in CSS 249conditional comme...

  • Page 504

    INDEXee-commerce 33editing content<del> 56<ins> 56<s> 56editing images 108editing pages in a CMS 33elements 52definition of 20, 24, 38diagram of 23, 24elliptical shapes 322email input 167email links 85embossed borders 310emphasis 51empty-cells property 339empty el...

  • Page 505

    INDEXGoogle analytics 483–486Google maps 189Google web fonts 277gradients 419greater than symbol 194grids 387–390, 463grouping and similarity 469, 469–470grouping / chunking 465grouping elements (<div>) 187grouping inline elements (<span>) 188HhCard 55headings 22, 43...

  • Page 506

    INDEXJJavaScript 208, 212, 218JPEG 109, 109–112justify 285Kkerning 284keywords 191, 479–482Llabelling form controls 163landing pages 485lang attribute 25layer order 369layout 358–405960 pixel grid 387–390, 391absolute positioning 363box offsets 364centering boxes 315columns ...

  • Page 507

    INDEXnotepad 29-30notepad++ 29Ooblique text 280Ogg Vorbis (audio format) 220opacity 254opening tag 20, 23open source fonts 277ordered lists 65overflow property 306overlapping content 306overlapping elementsz-index property 369overline 282Ppadding property 313padding-top property 313...

  • Page 508

    INDEXsend to back 369serif typefaces 267, 267–270shading alternate table rows 338sifr (typefaces) 272site maps 461-462size attribute 152, 153, 158size of boxes in CSS 303social networking buttons 490space selector 292sprites 417src attribute 99, 189src attribute (audio) 219, 220src ...

  • Page 509

    INDEXVvalue attribute 155, 156, 157, 160values for attributes 25, 26vector images 116vertical-align property 286vertical alignment of images 105–106vertical margins 308video 200–223<video> 209hosted services or self-hosting 210digital rights management 213encoding 209flash vi...

  • Page 510

    INDEXSTARTInG OUTThe browser shows the markup typed in (not the result page).Check the file extension is .html and not .txt. p 30, 32Bold text, italics, headings, or link text are extending longer than expected.Check you have closed the relevant tag e.g. </a>. p 21, 22The page I linked to i...

  • Page 511

    INDEXLAYOUTThe design looks bigger/smaller on some screens.The resolution of a monitor affects how big the items appear on the page. p 377, 378Margins above and below a box not showing.Vertical margins collapse. p 308My content does not fit in the containing box/browser window. You can deal with...

  • Page 512

    INDEX<a> 77, 79, 85, 441<abbr> 53<acronym> 53<address> 55<article> 432-439<aside> 436<audio> 217–220, 219<b> 45<blockquote> 52<body> 22, 27<br /> 48<button> 162<cite> 54<dd> 67<del> 56<df...

  • Page 513

    INDEXaction 151align 103–105alt 99autoplay 214, 219bgcolor 138border 138checked 155, 156cite 52class 184, 431codecs 215cols 154colspan 133content 191, 192controls 214, 219description 191for 163frameborder 190global attributes 183height 100, 189, 214href 77, 79, 88, 235http-e...

  • Page 514

    INDEXbackground-attachment property 414background-color 250background-image property 413background-image property (gradients) 419background-position property 415background property 416background-repeat property 414border-bottom-color 311border-bottom-style 310border-collapse property 34...

Free CSS Books, CSS Book Pdf, CSS Pdf Books, CSS Pdf Books Download, CSS Pdf Books Free Download, Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download, Free HTML CSS Books, HTML CSS Book Pdf, HTML CSS Pdf Books, HTML CSS Pdf Books Download, HTML CSS Pdf Books Free Download,