book

HTML & CSS: Design and Build Websites

by Jon Duckett

November 2011

Beginner

513 pages

9h 33m

English

Wiley

Read now

Unlock full access

IS IT HARD TO LEARN?THE STRUCTURE OF THIS BOOKHOW PEOPLE ACCESS THE WEBHOW WEBSITES ARE CREATEDHOW THE WEB WORKS
HOW PAGES USE STRUCTURESTRUCTURING WORD DOCUMENTSHTML DESCRIBES THE STRUCTURE OF PAGESHTML USES ELEMENTS TO DESCRIBE THE STRUCTURE OF PAGESA CLOSER LOOK AT TAGSATTRIBUTES TELL US MORE ABOUT ELEMENTSBODY, HEAD & TITLECREATING A WEB P1AGE ON A PCCREATING A WEB PAGE ON A MACCODE IN A CONTENT MANAGEMENT SYSTEMLOOKING AT HOW OTHER SITES ARE BUILTSUMMARY STRUCTURE
HEADINGSPARAGRAPHSBOLD & ITALICSUPERSCRIPT & SUBSCRIPTWHITE SPACELINE BREAKS & HORIZONTAL RULESVISUAL EDITORS & THEIR CODE VIEWSSEMANTIC MARKUPSTRONG & EMPHASISQUOTATIONSABBREVIATIONS & ACRONYMSCITATIONS & DEFINITIONSAUTHOR DETAILSCHANGES TO CONTENTEXAMPLE TEXTSUMMARY TEXT
ORDERED LISTSUNORDERED LISTSDEFINITION LISTSNESTED LISTSEXAMPLESUMMARY LISTS

WRITING LINKSLINKING TO OTHER SITESLINKING TO OTHER PAGES ON THE SAME SITEDIRECTORY STRUCTURERELATIVE URLSEMAIL LINKSOPENING LINKS IN A NEW WINDOWLINKING TO A SPECIFIC PART OF THE SAME PAGELINKING TO A SPECIFIC PART OF ANOTHER PAGEEXAMPLESUMMARY
CHOOSING IMAGES FOR YOUR SITESTORING IMAGES ON YOUR SITEADDING IMAGESHEIGHT & WIDTH OF IMAGESWHERE TO PLACE IMAGES IN YOUR CODEOLD CODE: ALIGNING IMAGES HORIZONTALLYOLD CODE: ALIGNING IMAGES VERTICALLYTHREE RULES FOR CREATING IMAGESTOOLS TO EDIT & SAVE IMAGESIMAGE DIMENSIONSCROPPING IMAGESIMAGE RESOLUTIONVECTOR IMAGESANIMATED GIFSTRANSPARENCYEXAMINING IMAGES ON THE WEBHTML5: FIGURE AND FIGURE CAPTIONEXAMPLE IMAGESSUMMARY IMAGES
WHAT'S A TABLE?BASIC TABLE STRUCTURETABLE HEADINGSSPANNING COLUMNSSPANNING ROWSLONG TABLESOLD CODE: WIDTH & SPACINGOLD CODE: BORDER & BACKGROUNDEXAMPLE TABLESSUMMARY TABLES
WHY FORMS?FORM CONTROLSHOW FORMS WORKFORM STRUCTURETEXT INPUTPASSWORD INPUTTEXT AREARADIO BUTTONDROP DOWN LIST BOXMULTIPLE SELECT BOXFILE INPUT BOXSUBMIT BUTTONIMAGE BUTTONBUTTON & HIDDEN CONTROLSLABELLING FORM CONTROLSGROUPING FORM ELEMENTSHTML5: FORM VALIDATIONHTML5: DATE INPUTHTML5: EMAIL & URL INPUTHTML5: SEARCH INPUTEXAMPLESUMMARY
THE EVOLUTION OF HTMLDOCTYPESCOMMENTS IN HTMLID ATTRIBUTECLASS ATTRIBUTEBLOCK ELEMENTSINLINE ELEMENTSGROUPING TEXT & ELEMENTS IN A BLOCKGROUPING TEXT & ELEMENTS INLINEIFRAMESINFORMATION ABOUT YOUR PAGESESCAPE CHARACTERSEXAMPLE EXTRA MARKUPSUMMARY EXTRA MARKUP
HOW FLASH WORKSUSE OF FLASHTIMELINE: FLASH, VIDEO & AUDIOADDING A FLASH MOVIE TO YOUR WEB PAGEUNDERSTANDING VIDEO FORMATS AND PLAYERSUSING HOSTED VIDEO SERVICESPREPARING A FLASH VIDEO FOR YOUR SITEADDING A FLASH VIDEO TO YOUR PAGESHTML5: PREPARING VIDEO FOR YOUR PAGESHTML5: ADDING VIDEO TO YOUR PAGESHTML5: MULTIPLE VIDEO SOURCESHTML5: COMBINING FLASH & HTML5 VIDEOADDING AUDIO TO WEB PAGESADDING A FLASH MP3 PLAYERHTML5: ADDING HTML5 AUDIO TO YOUR PAGESHTML5: MULTIPLE AUDIO SOURCESEXAMPLE FLASH, VIDEO & AUDIOSUMMARY FLASH, VIDEO & AUDIO
UNDERSTANDING CSS: THINKING INSIDE THE BOXCSS ASSOCIATES STYLE RULES WITH HTML ELEMENTSCSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYEDEXAMPLEUSING EXTERNAL CSSUSING INTERNAL CSSCSS SELECTORSHOW CSS RULES CASCADEINHERITANCEWHY USE EXTERNAL STYLE SHEETS?DIFFERENT VERSIONS OF CSS & BROWSER QUIRKSSUMMARY
FOREGROUND COLORBACKGROUND COLORUNDERSTANDING COLORCONTRASTCSS3: OPACITYCSS3: HSL COLORSCSS3: HSL & HSLAEXAMPLE COLORSUMMARY COLOR
TYPEFACE TERMINOLOGYCHOOSING A TYPEFACE FOR YOUR WEBSITETECHNIQUES THAT OFFER A WIDER CHOICE OF TYPEFACESSPECIFYING TYPEFACESSIZE OF TYPETYPE SCALESUNITS OF TYPE SIZEMORE FONT CHOICEUNDERSTANDING FONT FORMATSBOLDITALICUPPERCASE & LOWERCASEUNDERLINE & STRIKELEADINGLETTER & WORD SPACINGALIGNMENTVERTICAL ALIGNMENTINDENTING TEXTCSS3: DROP SHADOWFIRST LETTER OR LINESTYLING LINKSRESPONDING TO USERSATTRIBUTE SELECTORSEXAMPLE TEXTSUMMARY TEXT
BOX DIMENSIONSLIMITING WIDTHLIMITING HEIGHTOVERFLOWING CONTENTBORDER, MARGIN & PADDINGWHITE SPACE & VERTICAL MARGINBORDER WIDTHBORDER STYLEBORDER COLORSHORTHANDPADDINGMARGINCENTERING CONTENTIE6 BOX MODELCHANGE INLINE/BLOCKHIDING BOXESCSS3: BORDER IMAGESCSS3: BOX SHADOWSCSS3: ROUNDED CORNERSCSS3: ELLIPTICAL SHAPESEXAMPLE BOXESSUMMARY BOXES
BULLET POINT STYLESIMAGES FOR BULLETSPOSITIONING THE MARKERLIST SHORTHANDTABLE PROPERTIESBORDER ON EMPTY CELLSGAPS BETWEEN CELLSSTYLING FORMSSTYLING TEXT INPUTSSTYLING SUBMIT BUTTONSSTYLING FIELDSETS & LEGENDSALIGNING FORM CONTROLS: PROBLEMALIGNING FORM CONTROLS: SOLUTIONCURSOR STYLESWEB DEVELOPER TOOLBAREXAMPLE LISTS, TABLES AND FORMSEXAMPLE LISTS, TABLES AND FORMSSUMMARY LISTS, TABLES AND FORMS
KEY CONCEPTS IN POSITIONING ELEMENTSCONTROLLING THE POSITION OF ELEMENTSNORMAL FLOWRELATIVE POSITIONINGABSOLUTE POSITIONINGFIXED POSITIONINGOVERLAPPING ELEMENTSFLOATING ELEMENTSUSING FLOAT TO PLACE ELEMENTS SIDE-BY-SIDECLEARING FLOATSPARENTS OF FLOATED ELEMENTS: PROBLEMPARENTS OF FLOATED ELEMENTS: SOLUTIONCREATING MULTI-COLUMN LAYOUTS WITH FLOATSSCREEN SIZESSCREEN RESOLUTIONPAGE SIZESFIXED WIDTH LAYOUTSLIQUID LAYOUTSA FIXED WIDTH LAYOUTA LIQUID LAYOUTLAYOUT GRIDSEXAMPLE GRIDPOSSIBLE LAYOUTS: 960 PIXEL WIDE 12 COLUMN GRIDCSS FRAMEWORKSUSING THE 960.GS GRIDA GRID-BASED LAYOUT USING 960.GSMULTIPLE STYLE SHEETSMULTIPLE STYLE SHEETSEXAMPLE LAYOUTSUMMARY LAYOUT
CONTROLLING SIZES OF IMAGES IN CSSALIGNING IMAGES USING CSSCENTERING IMAGES USING CSSBACKGROUND IMAGESREPEATING IMAGESBACKGROUND POSITIONSHORTHANDIMAGE ROLLOVERS & SPRITESCSS3: GRADIENTSCONTRAST OF BACKGROUND IMAGESEXAMPLE IMAGESEXAMPLE IMAGESSUMMARY IMAGES
TRADITIONAL HTML LAYOUTSNEW HTML5 LAYOUT ELEMENTSHEADERS & FOOTERSNAVIGATIONARTICLESASIDESSECTIONSHEADING GROUPSFIGURESSECTIONING ELEMENTSLINKING AROUND BLOCK-LEVEL ELEMENTSHELPING OLDER BROWSERS UNDERSTANDEXAMPLESUMMARY
WHO IS THE SITE FOR?WHY PEOPLE VISIT YOUR WEBSITEWHAT YOUR VISITORS ARE TRYING TO ACHIEVEWHAT INFORMATION YOUR VISITORS NEEDHOW OFTEN PEOPLE WILL VISIT YOUR SITESITE MAPSEXAMPLE SITE MAPWIREFRAMESEXAMPLE WIREFRAMEGETTING YOUR MESSAGE ACROSS USING DESIGNVISUAL HIERARCHYGROUPING AND SIMILARITYDESIGNING NAVIGATIONSUMMARY PROCESS & DESIGN
SEARCH ENGINE OPTIMIZATION (SEO)ON-PAGE SEOHOW TO IDENTIFY KEYWORDS AND PHRASESANALYTICS: LEARNING ABOUT YOUR VISITORSHOW MANY PEOPLE ARE COMING TO YOUR SITE?WHAT ARE YOUR VISITORS LOOKING AT?WHERE ARE YOUR VISITORS COMING FROM?DOMAIN NAMES & HOSTINGFTP & THIRD PARTY TOOLSSUMMARY
PSEUDO-CLASSES, ELEMENTS & RULES

Content preview from HTML & CSS: Design and Build Websites

5 IMAGES

How to add images to pages
Choosing the right format
Optimizing images for the web

There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart.

There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional. In this chapter you will learn how to:

Include an image in your web pages using HTML
Pick which image format to use
Show an image at the right size
Optimize an image for use on the web to make pages load faster

You can also use CSS to include images in your pages using the background-image property, which you will meet on pages 413-420.

CHOOSING IMAGES FOR YOUR SITE

A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.

Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images; these are images you pay to use (there is a list of stock photography websites below). Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website.

If you have a page that shows several images (such as product ...