book

Learning Web Design, 5th Edition

by Jennifer Robbins

May 2018

Beginner

808 pages

25h 3m

English

O'Reilly Media, Inc.

Read now

Unlock full access

1. Getting Started in Web DesignWhere Do I Start?It Takes a Village (Website Creation Roles)Gearing Up for Web DesignWhat You’ve LearnedTest Yourself
The Internet Versus the WebServing Up Your InformationA Word About BrowsersWeb Page Addresses (URLs)The Anatomy of a Web PagePutting It All TogetherTest Yourself
A Multitude of Devices Sticking with the StandardsProgressive EnhancementResponsive Web DesignOne Web for All (Accessibility)The Need for Speed (Site Performance)Test Yourself
4. Creating a Simple PageA Web Page, Step-By-StepLaunch a Text EditorStep 1: Start with ContentStep 2: Give the HTML Document StructureStep 3: Identify Text ElementsStep 4: Add an ImageStep 5: Change the Look with a Style SheetWhen Good Pages Go BadValidating Your DocumentsTest YourselfElement Review: HTML Document Setup
ParagraphsHeadingsThematic Breaks (Horizontal Rule)ListsMore Content ElementsOrganizing Page ContentThe Inline Element RoundupGeneric Elements (div and span)Improving Accessibility with ARIACharacter EscapesPutting It All TogetherTest YourselfElement Review: Text Elements
The href AttributeLinking to Pages on the WebLinking Within Your Own Site Targeting a New Browser WindowMail LinksTelephone LinksTest YourselfElement Review: Links
First, a Word on Image FormatsThe img ElementAdding SVG ImagesResponsive Image MarkupWhew! We’re FinishedTest YourselfElement Review: Images
How to Use TablesMinimal Table StructureTable HeadersSpanning CellsTable Accessibility Row and Column GroupsWrapping Up TablesTest YourselfElement Review: Tables

How Forms WorkThe form ElementVariables and ContentThe Great Form Control RoundupForm Accessibility FeaturesForm Layout and DesignTest YourselfElement Review: Forms
Window-In-A-Window (iframe)Multipurpose Embedder (object)Video and AudioCanvasTest YourselfElement Review: Embedded Media
11. Introducing Cascading Style SheetsThe Benefits of CSSHow Style Sheets WorkThe Big ConceptsCSS Units of MeasurementDeveloper Tools Right in Your BrowserMoving Forward with CSSTest Yourself
Basic Font PropertiesAdvanced Typography with CSS3Changing Text ColorA Few More Selector TypesText Line AdjustmentsUnderlines and Other “Decorations”Changing CapitalizationSpaced OutText ShadowChanging List Bullets and NumbersTest YourselfCSS Review: Font and Text Properties
Specifying Color ValuesForeground ColorBackground ColorClipping the BackgroundPlaying with OpacityPseudo-Class SelectorsPseudo-Element SelectorsAttribute SelectorsBackground ImagesThe Shorthand background PropertyLike a Rainbow (Gradients)Finally, External Style SheetsWrapping It UpTest YourselfCSS Review: Color and Background Properties
The Element BoxSpecifying Box DimensionsPadding BordersMarginsAssigning Display TypesBox Drop ShadowsTest YourselfCSS Review: Box Properties
Normal FlowFloating Fancy Text Wrap with CSS Shapes Positioning BasicsRelative PositioningAbsolute PositioningFixed PositioningTest YourselfCSS Review: Floating and Positioning Properties
Flexible Boxes with CSS FlexboxCSS Grid LayoutTest YourselfCSS Review: Layout Properties
Why RWD?The Responsive RecipeChoosing BreakpointsDesigning ResponsivelyA Few Words About TestingMore RWD ResourcesTest Yourself
Ease-y Does It (CSS Transitions)CSS TransformsKeyframe AnimationWrapping UpTest YourselfCSS Review: Transitions, Transforms, and Animation
Styling FormsStyling TablesA Clean Slate (Reset and Normalize.css)Image Replacement TechniquesCSS SpritesCSS Feature DetectionWrapping Up Style SheetsTest YourselfCSS Review: Table Properties
Getting Cozy with the Command LineCSS Power Tools (Processors)Build Tools (Grunt and Gulp)Version Control with Git and GitHubConclusionTest Yourself
21. Introduction to JavaScriptWhat Is JavaScript?Adding JavaScript to a PageThe Anatomy of a ScriptThe Browser ObjectEventsPutting It All TogetherLearning More About JavaScriptTest Yourself
Meet the DOMPolyfillsJavaScript LibrariesBig FinishTest Yourself
23. Web Image BasicsImage SourcesMeet the FormatsImage Size and ResolutionImage Asset StrategyFaviconsSumming Up ImagesTest Yourself
Saving Images in Web FormatsWorking with TransparencyResponsive Image Production TipsImage OptimizationTest Yourself
Drawing with XMLFeatures of SVG as XMLSVG ToolsSVG Production TipsResponsive SVGsFurther SVG ExplorationTest Yourself And...We’re Done!
A. Answers
An Abbreviated History of HTMLHTML5: More Than MarkupWhere We Go From Here

Content preview from Learning Web Design, 5th Edition

B. HTML5 Global Attributes

B

HTML5 Global Attributes

The following attributes may be used with any HTML element.

Attribute	Values	Description
accesskey	single text character	Assigns an access key (shortcut key command) to the link. Access keys are also used for form fields. Users may access the element by pressing Alt-<key> (PC) or Ctrl-<key> (Mac). Example: accesskey="B"
class	text string	Assigns one or more classification names to the element. Multiple values are separated by spaces.
contenteditable	true \| false	Indicates the user can edit the element. If the value is an empty string, it is the same as “true.” By default, the element inherits the edit setting from its parent.
dir	ltr \| rtl \| auto	Specifies the inline text direction of the element (“left to right” or “right to left”) and scopes bidirectional reordering, isolating the text from influencing surrounding content. When set to auto, it uses the first letter to determine direction.
draggable	true \| false	A true value indicates the element is draggable in the UI (an event configured with JavaScript), meaning the user can move it by clicking and holding it, and then moving it to a new position in the window.
hidden	In HTML, list value only: hidden In XHTML, include attribute name: hidden="hidden"	Prevents the element and its descendants from being rendered in the user agent (browser). Any scripts or form controls in hidden sections will still execute ...