book

Creating a Website: The Missing Manual, 4th Edition

by Matthew MacDonald

June 2015

Beginner

620 pages

18h 6m

English

O'Reilly Media, Inc.

Read now

Unlock full access

About the AuthorAbout the Creative TeamAcknowledgementsThe Missing Manual Series
The Glory of Building a Website from ScratchTypes of SitesAbout This BookWhat You Need to Get StartedAbout the OutlineOf Windows and Macintosh PCsAbout→These→ArrowsAbout the Online ResourcesThe Missing CDRegistrationContact UsErrataSafari® Books Online
HTML: The Language of the WebCracking Open an HTML FileYour Text EditorYour Web BrowserTutorial: Creating an HTML FileSeeing the HTML of a Live Web PageA Closer Look at HTML TagsWhat’s in a TagUnderstanding ElementsNesting ElementsUnderstanding HTML DocumentsThe Document Type DefinitionThe Basic SkeletonTutorial: Building a Complete HTML DocumentAdding Your ContentStructuring Your TextWhere Are All the Pictures?The 10 Most Important Elements (and a Few More)Checking Your Pages for Errors
Types of ElementsHTML Elements for Basic TextParagraphsLine BreaksHeadingsHorizontal LinesPreformatted TextQuotesDivisions and SpansTutorial: Converting Raw Text to HTMLHTML Elements for ListsOrdered ListsUnordered ListsDefinition ListsNesting ListsHTML Elements for TablesA Basic TableSpanning CellsInline FormattingFormatting Text: Italics and BoldA Few More Formatting ElementsSpecial CharactersNon-English Languages
Graphic Design on the WebLogical Structure vs. Physical FormattingCSS (Cascading Style Sheets)Style Sheet BasicsThe Three Types of Style SheetsThe Anatomy of a RuleTutorial: Attaching a Style Sheet to a PageUsing an Internal Style SheetUsing Inline StylesWhen Styles OverlapThe CascadeInheritanceClass Selectorsid SelectorsColorsSpecifying a ColorHexadecimal Color ValuesRGB Color ValuesFinding the Right ColorText Alignment and SpacingAlignmentSpacingWhite SpaceBasic FontsFinding the Right FontSpecifying a FontFont SizesKeyword SizingRelative SizingPixel SizingWeb Fonts with GoogleBordersBasic BordersMaking Better BordersRounded CornersUsing Borders with Tables
Introducing the <img> ElementAlternate TextPicture SizePicture PlacementTutorial: Storing Images in a SubfolderFile Formats for Web GraphicsCompressionChoosing the Right FormatPutting Pictures on Colored BackgroundsTutorial: Wrapping Text Around an ImageAdding a BorderAdding a CaptionClearing a FloatBackground ImagesBackground WatermarksBackgrounds for Other ElementsGraphical Bullets in a ListFinding Free Art
The Benefits of a Web EditorTypes of Web Page EditorsChoosing Your Web EditorDreamweaver: The Best Choice if You’re Not on a BudgetExpression Web: A Solid Free Alternative (Windows Only)Brackets: A Good Choice for Text Lovers and TechiesGetting Started with DreamweaverEditing a PageCreating a New PageWorking with Several Pages at OnceDefining a Dreamweaver SiteSetting Up Shop with Expression WebChoosing Your ViewConfiguring Expression Web for HTML5Opening Multiple PagesDefining a Site in Expression WebTrying Out BracketsWorking with a Set of Files
Understanding the AnchorInternal and External LinksRelative URLsAbsolute URLsTutorial: Linking the Pages in a SiteThe Starter SiteLinking to Pages Within the Same FolderMoving Down into a SubfolderMoving Up into a Parent FolderMoving to the Root FolderMaking Image LinksMore Tricks with Links“Mailto” LinksImage Maps: Links Inside PicturesChanging Link Colors and UnderliningLinks That Lead to BookmarksWhen Good Links Go BadChecking Your Links in a Web EditorChecking Your Links OnlineUsing Redirects

Planning a Style SheetIdentifying the Main IngredientsBuilding a Complete Style SheetSetting the Ground RulesFormatting Elements with Type SelectorsCreating ClassesImproving Your Style SheetGrouping Content with the <div> ElementSaving Work with the <div> ElementSaving Work with Contextual SelectorsCreating a Style Sheet for an Entire SiteTutorial: Becoming a Style Detective
Understanding Style-Based LayoutStructuring Pages with the <div> ElementFloating BoxesFixed BoxesChoosing Your LayoutThe 1,000-Pixel Rule of ThumbTutorial: Creating a Layout with Multiple ColumnsLaying the GroundworkAttaching Your Style SheetBuilding a Fixed-Width LayoutSwitching to a Resizable LayoutMaximum Width: The Safety NetA Few More Layout TechniquesStretching Column HeightSticky HeadersLayered ElementsCombining Absolute and Relative PositioningSizing TablesSizing an Entire TableSizing a ColumnSizing a RowPutting the Same Content on Multiple PagesUsing Server-Side IncludesPHP IncludesWeb TemplatesCreating a Web TemplateAdding Editable Regions to Your TemplateUsing Your Web Template
How Web Hosting WorksUnderstanding Web ServersUnderstanding URLsHow Browsers Analyze a URLDomain NamesChoosing the Right Domain NameMore Choices for Top-Level DomainsThe OriginalsCountry-Specific DomainsThe New Kids on the BlockSearching for a NameRegistering Your NameGetting Web SpaceAssessing Your NeedsChoosing Your HostA Web Host WalkthroughWhat to Expect after You Sign UpFree Web Hosts: Just Say NoTransferring Files to Your SiteUploading with Windows ExplorerUploading with an FTP ProgramUploading in DreamweaverAdding Your FTP InformationCopying Files to Your WebsiteCopying Files to Your ComputerUploading in Expression Web
Your Website Promotion PlanMaking Your Site Search-Engine FriendlyChoose Meaningful Page TitlesInclude a Page DescriptionSupply Alternate Text for All Your ImagesUse Descriptive Link TextDon’t Try to CheatRegistering with Search EnginesSubmitting Your Site to GoogleSubmitting Your Site to the Open Directory ProjectRising Up in the Search RankingsHiding from Search EnginesThe Google Webmaster ToolsTracking VisitorsUnderstanding Google AnalyticsSigning Up for Google AnalyticsThe Google Analytics DashboardExamining Your Web TrafficSessions GraphSite UsageMap OverlayTraffic Sources OverviewContent Overview
Spreading the WordShameless Self-PromotionCultivating LinksGoogle PlacesGoogle AdWordsReturn VisitorsTransforming a Site into a CommunityFostering a Web CommunityWebsite Community ToolsEmail NewslettersTwitterSharing Your Tweets on Your SiteFacebookCreating a Facebook PagePromoting Your Facebook Page on Your WebsiteGroupsCreating a Google+ Community
Understanding BlogsSyndicationBlog Hosting OptionsGetting Started with BloggerCreating a BlogFormatting Your PostsBlog ManagementManaging PostsTweaking Common SettingsCustomizing Your TemplateReformatting a TemplateAdding, Deleting, and Rearranging GadgetsEditing the HTML in a TemplateReviewing CommentsDeleting the JunkModerating Comments
Money-Making the Web WayGoogle AdSenseSigning Up for AdSenseThe AdSense WindowCreating an AdPlacing Ads in Your Web PagesGoogle-Powered SearchesAmazon AssociatesSigning Up as an AssociateGenerating Associate LinksProduct LinksAdvanced LinksPayPal Merchant ToolsSigning Up with PayPalAccepting PaymentsBuilding a Shopping CartCreating a Custom Page StyleBuilding the Shopping Cart ButtonsWithdrawing Your Money
Understanding JavaScriptServer-Side and Client-Side ProgrammingThe Evolution of JavaScriptJavaScript 101The <script> ElementBrowsers that Don’t Support JavascriptVariablesDeclaring VariablesModifying VariablesAn Example with VariablesFunctionsDeclaring a FunctionCalling a FunctionFunctions that Receive InformationFunctions that Return InformationExternal Script FilesDynamic HTMLHTML ObjectsUsing HTML Objects in a ScriptEventsImage RolloversCollapsible TextInteractive FormsForm ElementsA Basic FormScripts on the WebFinding a Simple ScriptJavaScript Libraries
Fancy ButtonsOrdinary Picture ButtonsDynamic Picture ButtonsChoosing Your ApproachTutorial: Creating a Rollover ButtonThe Starter PagePreparing the Button PicturesMaking the Rollover EffectPicture-with-Text ButtonsPicture-less ButtonsFancy MenusDo-It-Yourself Collapsible MenusThe Menu MarkupThe Code that Shows the SubmenusThird-Party MenusGetting the ScriptCreating the Menu
Understanding MultimediaLinking and EmbeddingHosted MultimediaPlaying Audio FilesAutomatic PlaybackPreloading Media FilesLooping PlaybackShowing Video ClipsConfiguring the Video WindowPreparing Video for the WebFallbacks for Old BrowsersAdding a Flash FallbackUploading Videos to YouTubePreparing a Video for YouTubeUploading a VideoShowing a YouTube Video in a Web Page
HTML Elements<a> (Anchor Element)<address> (Contact Information)<area> (Image Map)<audio> (Sound Player)<b> (Bold Text)<base> (Base URL)<blockquote> (Block Quotation)<body> (Document Body)<br> (Line Break)<button> (Button)<caption> (Table Caption)<cite> (Citation)<code> (Code Listing)<dd> (Dictionary Description)<del> (Deleted Text)<dfn> (Defined Term)<div> (Generic Block Container)<dl> (Dictionary List)<dt> (Dictionary Term)<em> (Emphasis)<form> (Interactive Form)<h1>, <h2>, <h3>, <h4>, <h5>, <h6> (Headings)<head> (Document Head)<hr> (Horizontal Rule)<html> (Document)<i> (Italic Text)<iframe> (Inline Frame)<img> (Image)<input> (Input Control)<ins> (Inserted Text)<li> (List Item)<link> (Document Relationship)<map> (Image Map)<meta> (Metadata)<noscript> (Alternate Script Content)<object> (Embedded Object)<ol> (Ordered List)<option> (Menu Option)<p> (Paragraph)<param> (Object Parameter)<pre> (Preformatted Text)<q> (Short Quotation)<samp> (Sample Output)<script> (Client-Side Script)<select> (Selectable List)<small> (Small Print)<source> (Audio or Video File)<span> (Generic Inline Container)<strong> (Strong Importance)<style> (Internal Style Sheet)<sub> (Subscript)<sup> (Superscript)<table> (Table)<td> (Table Data Cell)<textarea> (Multiline Text Input)<th> (Table Header Cell)<title> (Document Title)<tr> (Table Row)<ul> (Unordered List)<video> (Video Player)HTML5 Semantic Elements<article> (Article)<aside> (Sidebar)<figcaption> (Figure Caption)<figure> (Figure)<footer> (Footer)<header> (Header)<mark> (Highlighted Text)<nav> (Navigation Links)<section> (Section)<time> (Date or Time)HTML Character EntitiesHTML Color Names