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

4 LINKS

Creating links between pages
Linking to other sites
Email links

Links are the defining feature of the web because they allow you to move from one web page to another — enabling the very idea of browsing or surfing.

You will commonly come across the following types of links:

Links from one website to another
Links from one page to another on the same website
Links from one part of a web page to another part of the same page
Links that open in a new browser window
Links that start up your email program and address a new email to someone

WRITING LINKS

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

The 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 on the previous page.

Many people navigate websites by scanning the text for links. Clear link text can help visitors find what they want. This will give them a more positive impression of your site and may encourage them to visit it for longer. (It also helps people using ...