Build Your Own Website The Right Way Using HTML & CSS

Name: Build Your Own Website The Right Way Using HTML & CSS | Start Building Websites Like a Pro!
Brand: SitePoint
Price: 29.99 EUR
Availability: OnlineOnly

Start Building Websites Like a Pro!

Ian Lloyd(Autor*in)

SitePoint (Verlag)

Erschienen am 23. Juli 2011

500 Seiten

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-1-4571-9178-7 (ISBN)

29,99 €inkl. 7% MwSt.

Systemvoraussetzungen

für PDF mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

Front Cover
Front Matter
Build Your Own Website The Right Way Using HTML & CSS
Copyright
Bios
Dedication
Table of Contents
Preface
What is a Browser?
Who Should Read This Book
What You'll Learn from This Book
How You'll Learn to Build Your Website
HTML, Markup, CSS . Welcome to Your First Bits of Jargon!
Building the Example Site
What This Book Won't Tell You
What's in This Book
Where to Find Help
The SitePoint Forums
The Book's Website
The Code Archive
Updates and Errata
The SitePoint Newsletters
The SitePoint Podcast
Your Feedback
Acknowledgements
Conventions Used in This Book
Markup Samples
Tips, Notes, and Warnings
Body
Setting Up Shop
The Basic Tools You Need
Windows Basic Tools
Your Text Editor: Notepad
Your Web Browser: Internet Explorer
Mac OS X Basic Tools
Your Text Editor: TextEdit
Your Web Browser: Safari
Beyond the Basic Tools
Windows Tools
NoteTab
Firefox
Mac OS X Tools
TextWrangler
Firefox
Not Just Text, Text, Text
Windows Tools
Picasa
Mac OS X Tools
Preview
iPhoto
Online Tools
Creating a Spot for Your Website
Windows
Mac OS X
Summary
Your First Web Pages
Nice to Meet You, HTML
Anatomy of a Web Page
Viewing the Source
Basic Requirements of a Web Page
The Doctype
The html Element
The head Element
The title Element
meta Elements
Other head Elements
The body Element
The Most Basic Web Page in the World
Analyzing the Web Page
Headings and Document Hierarchy
Paragraphs
For People Who Love Lists
Commenting Your HTML
Using Comments to Hide Markup from Browsers Temporarily
Symbols
Diving into Our Website
The Home Page: the Starting Point for All Websites
Setting a Title
Welcoming New Visitors
What's It All About?
Adding Structure
Nesting Explained
The Sectioned Page: All Divided Up
Splitting Up the Page
Linking Between Our New Pages
The blockquote (Who said that?)
The cite Element
strong and em
Taking a Break
Summary
Adding Some Style
What is CSS?
Inline Styles
Adding Inline Styles
The span Element
Embedded Styles
Jargon Break
Why Embedded Styles Are Better Than Inline Styles
External stylesheets
Why External Stylesheets Are Better Than Embedded Styles
The Bad Old Days
Happy Days! CSS Support Is Here
Creating an External CSS File
Linking CSS to a Web Page
Starting to Build Our Stylesheet
Stylish Headings
A Mixture of New Styles
A New Look in a Flash!
A Beginner's Palette of Styling Options
Recap: the Style Story so Far
Changing the Emphasis
Emphasis or Italics? Strong or Bold?
Looking at Elements in Context
Contextual Selectors
Grouping Styles
Which Rule Wins?
Recapping Our Progress
Styling Links
Link States
Class Selectors
Styling Partial Text Using span
Summary
Shaping Up Using CSS
Block-level Elements versus Inline Elements
Block-level Elements
Inline Elements
Inline Begets Inline
Inline Elements Can Never Contain Block-level Elements
Styling Inline and Block-level Elements
Sizing Up the Blocks
Setting a Width
Setting a Height
Adding Borders to Block-level Elements
Example Borders
Simple Black Border
Inset Border
Colored Ridge Border
Bold Border Effects
Simple Gray Border
Simple Gray Border (Version 2!)
Dotted, Red Border
Dashed, Gray Border
Double Borders
Styling Individual Sides of an Element
Shorthand Border Styles
Border Styles You Can Use
Shaping and Sizing Our Diving Site
Adding Padding
Introducing Padding to the Project Site
Margins
The Box Model
Positioning Elements Anywhere You Like!
Showing the Structure
Absolute Positioning
Getting Ready to Move into Position
Other Layout Options
More Absolute Positioning
Relative Positioning
Benefits of Relative Positioning
Floated Positioning
Styling Lists
Summary
Picture This! Using Images on Your Website
Inline Images
Anatomy of the Image Element
The alt Attribute: Making Images Useful to Everyone
Web Accessibility
Screen Readers: Hearing the Web
What Makes a Good alt?
JPEG versus GIF versus PNG
Transparency
PNG: King of Transparency
Adding an Image Gallery to the Site
Updating the Navigation
Adding the New Gallery Page
Adding the First Image
Formatting the Picture Using CSS
Captioning the Picture
Basic Image Editing
Image Cropping
Picasa
Preview
Special Effects
Picasa
Preview
Resizing Large Images
Picasa
Preview
Other Software
Filling up the Gallery
Sourcing Images for Your Website
Background Images in CSS
Repeated Patterns
Horizontal Repeats
Vertical Repeats
Nonrepeating Images
Shorthand Backgrounds
Fixed Heights and Widths
Setting a Background for Our Navigation
Applying a Fade to the Tagline
A Lick of Paint for the Main Heading
Summary
Tables: Tools for Organizing Data
What is a Table?
Anatomy of a Table
Styling the Table
Borders, Spacing, and Alignment
class-ifying Your Tables
Making Your Tables Accessible
Linearization
summary
Captioning Your Table
Adding an Events Table
Stylish Table Cells
Advanced Tables
Merging Table Cells
rowspan and colspan
Advanced Accessibility
The scope Attribute
Summary
Forms: Interacting with Your Audience
Anatomy of a Form
A Simple Form
The Building Blocks of a Form
The form Element
The fieldset and legend Elements
The label Element
The input Element
Text Input
Setting the Value of a Text Box
Password Input
Hidden Inputs
Checkboxes
Preselecting Checkboxes
Radio Buttons
Preselecting Radio Buttons
The select Element
Preselecting Options
The textarea Element
Submit Buttons
The Default Control Appearance
Building a Contact Page
Editing the Contact Us Page
Adding a form and a fieldset Element
Styling fieldset and legend with CSS
Adding Text Input Controls
Tidying Up label Elements with CSS
Adding a select Element
Adding a textarea Element
Adding Radio Buttons and Checkboxes
Completing the Form: a Submit Button
Processing the Form
Signing Up for Form Processing
Inserting the Form Code
Feedback By Email
Summary
Interacting with Social Media
But Facebook is the Internet, right?
Go Where the Audience Is
A Two-pronged Attack: Facebook and Twitter
Setting Up a Facebook Page
Adding a Like Box to Your Site
Yes! People Like Me! They Really Like Me!
Let's Sprinkle on Some Twitter Glitter
Adding Your Twitter Updates to the Site
Getting a Follow Button
Updating from a Twitter Client on Your Smartphone
But the Page Looks Really Messy Now!
Get Twitter to Update Facebook to Update Your Site
Now the Training Wheels Are Off .
Get Smart!
Summary
Launching Your Website
The Client-Server Model
Web Hosting Jargon
Hosting Your Website-Finding Server Space
Free Hosting-with a Catch!
Free Hosting with Your ISP
Free Hosting-with a Domain Name at Cost
What is Web Forwarding?
The Downsides of Web Forwarding
Paying for Web Hosting
Hosting Essentials
FTP Access to Your Server
Adequate Storage Space
A Reasonable Bandwidth Allowance
Hosting Nice-to-haves
Email Accounts
Server Side Includes (SSIs)
Support for Scripting Languages and Databases
Pre-flight Check: How Do Your Pages Look in Different Browsers?
Uploading Files to Your Server
FTP Settings
Uploading with FileZilla for Windows
Uploading with Cyberduck-Mac OS X
Other Uploading Tools
Where's Your Site At?
Checking Links
Validating Your Web Pages
How to Validate Your Live Web Pages
Validate Everything
Promoting Your Website
Submit Your Website to Search Engines
Tell Your Friends and Colleagues
Craft an Email Signature with Your Website Details
Post on a Related Forum
Link Exchange
Summary
Enhancing the Site with HTML5 and CSS3
HTML5: A Brief History
Paving the Cow Paths
Browser Support for HTML5
Fixing IE Support
Replacing Generic divs with Proper HTML5 Elements
Marking Up the Main Content
The aside Element
The footer Element
The article Element
The figure and figcaption Elements
And There's Still More to HTML5
HTML5 Forms Will Rock ... Soon
More Complex HTML5 (and Related) Technologies
CSS3 . CSS2 . what's the difference?
CSS3: Not Yet Universally Supported
In Support of Vendor Prefixes
The Reasoning Behind Vendor Jargon
The Good News on CSS3
Look at All Those Sharp, Pointy Corners!
The Details in the Shadows
From box-shadow to text-shadow
We Don't Serve Your Type Around Here!
Google Web Fonts
Other CSS3 Features to be Aware of
IE as a Second-class Citizen
Summary
Adding Interactivity with jQuery
JavaScript? jQuery? What's the difference?
Standard JavaScript versus jQuery: A Simple Example
How do I get jQuery and use it?
Hang On a Moment!
jQuery: Primed and Ready For Action
Using jQuery on the Project Site
Setting Up References to jQuery
Adding Default Form Value
Showing the Picture Gallery's Captions on Hover
Summary
What to Do When Things Go Wrong
Prevention
Keep Multiple Browsers Open While Developing
Running Multiple Versions of Internet Explorer
Validate HTML and CSS as You Go
Learn About Known Browser CSS Bugs
Prepare Your Browser for Battle-with Extensions!
Get Firebug
Install Web Developer Toolbar
Add XRAY
Inspecting Problems with Firebug
Web Developer Toolbar
Disable CSS
Disable JavaScript
Outline Elements on the Page
Hide Images or Reveal alt Attributes
View Information about CSS and JavaScript
And So Much More .
How to use XRAY
Summary
Pimp My Site: Cool Stuff You Can Add for Free
Getting the Low-down on Your Visitors
Choosing a Statistics Service
Registering a Google Account
Adding the Statistics Code to Your Web Pages
What to Look for-a Summary
A Search Tool for Your Site
Searching by Genre
Enhancing Search Further with jQuery
Discussion Forums
Summary
Where to Now? What You Could Learn Next
Improving Your HTML
The Official Documentation
Other Useful HTML Resources
The Ultimate HTML Reference
HTML Dog
HTML5 Doctor
A List Apart
HTML5 & CSS3 For The Real World
Advancing Your CSS Knowledge
The Official Documentation
The Ultimate CSS Reference
HTML Dog
CSS3.info
CSS Discussion Lists
The CSS Discuss List's Companion Site
Learning JavaScript
Becoming a jQuery Guru
Improving Website Performance
Learning Server-side Programming
Scripting Languages in Brief
Learning PHP
Where Can You Learn PHP?
Summary
Index
Back Cover

Systemvoraussetzungen

Als PDF speichern Als Link merken