book

HTML5: 20 Lessons to Successful Web Development

by Robin Nixon

January 2015

Beginner

280 pages

6h 48m

English

McGraw-Hill

Read now

Unlock full access

What Is HTML?HTTP and HTML BasicsThe Request/Response SequenceThe Difference Between Get and Post RequestsHTML TagsTag AttributesSummarySelf-Test Questions

The <!DOCTYPE> DeclarationInternet Explorer Tweak for Local DocumentsThe <html> TagThe <head> TagCreating a Document TitleIncluding Style SheetsIncorporating JavaScriptPassing MetadataThe body TagSummarySelf-Test Questions
Inserting CommentsThe HTML 4.01 TagsThe div and span TagsHeadingsParagraphsLine BreaksText EmphasisSummarySelf-Test Questions
Changing Font Face and Colorfont color=′…′ … /fontfont face=′…′ … /fontfont size=′…′ … /fontbasefontbody bgcolor=′…′The Named ColorsColoring by NumbersFont FacesDisplaying ImagesSummarySelf-Test Questions
Building ListsOverriding the DefaultsDefinition ListsCreating TablesTable Rows and ColumnsExtending Rows and ColumnsSummarySelf-Test Questions
Using HyperlinksThe Query StringRelative URLsCreating LinksBuilding FormsThe input TagThe textarea TagThe select TagThe button TagThe label TagFrames and IframesSummarySelf-Test Questions
Conditional HTML for Internet ExplorerSimple ComparisonsHigher or Lower ValuesThe Not OperatorThe Mark of the Webabbr … /abbr acronym … /acronym (Obsolete)address … /addressapplet … /applet (Obsolete)areabase basefont (Obsolete)bdo … /bdobig … /big (Obsolete) and small … /smallblockquote … /blockquotecenter … /center (Obsolete)cite … /citecode … /codecol and colgroup del … /delfieldset … /fieldsetfont … /font (Obsolete)frameset (Obsolete)hr iframe … /iframe isindex … /isindex (Obsolete)menu … /menu (Reserved)optgroup … /optgroup sub … /sub and sup … /sup SummarySelf-Test Questions
The CanvasGeolocationFormsLocal StorageAudio and VideoThe embed TagMicrodataWeb WorkersWeb ApplicationsStill to ComeSummarySelf-Test Questions
An Ultra-Crash Course in JavaScriptAccessing Form Elements from JavaScriptUsing the getElementById() FunctionThe Simpler O() FunctionThe Partner S() FunctionThe canvas TagAccessing the Canvas with JavaScriptConverting a Canvas to an ImageSummarySelf-Test Questions
Drawing RectanglesThe fillRect() FunctionThe fillStyle PropertyThe clearRect() FunctionThe strokeRect() FunctionCreating GradientsThe createLinearGradient() FunctionThe createRadialGradient() FunctionThe addColorStop() FunctionUsing PatternsThe createPattern() FunctionSummarySelf-Test Questions
Writing TextThe font PropertyThe strokeText() FunctionThe textAlign PropertyThe textBaseline PropertyThe fillText() FunctionDetermining Text WidthSummarySelf-Test Questions
Drawing LinesThe lineWidth PropertyThe lineCap PropertyThe lineJoin PropertyThe miterLimit PropertyDrawing with PathsThe beginPath() and closePath() FunctionsThe moveTo() and lineTo() FunctionsThe stroke() FunctionThe rect() FunctionThe fill() FunctionThe clip() FunctionThe isPointInPath() FunctionCreating CurvesThe arc() FunctionThe arcTo() FunctionThe quadraticCurveTo() FunctionThe bezierCurveTo() FunctionSummarySelf-Test Questions
Using ImagesThe drawImage() FunctionAdding ShadowsPixel EditingThe getImageData() FunctionThe data[] ArrayThe putImageData() FunctionThe createImageData() FunctionSummarySelf-Test Questions
Compositing and TransparencyThe globalCompositeOperation PropertyThe globalAlpha PropertyUsing TransformationsThe scale() FunctionThe save() and restore() FunctionsThe rotate() FunctionThe translate() FunctionThe transform() FunctionThe setTransform() FunctionSummarySelf-Test Questions
Accessing Geolocation with JavaScriptThe geolocation PropertyThe getCurrentPosition() FunctionIn the Real WorldThe GPS ServiceOther Location MethodsSummarySelf-Test Questions
New Form AttributesThe autocomplete AttributeThe autofocus AttributeThe form AttributeForm OverridesThe formaction AttributeThe formenctype AttributeThe formmethod AttributeThe formnovalidate AttributeThe formtarget AttributeThe height and width AttributesThe list Attribute and datalist and option TagsThe min and max AttributesThe multiple AttributeThe novalidate and formnovalidate AttributesThe pattern AttributeThe placeholder AttributeThe required AttributeThe step AttributeNew Form Input TypesThe color Input TypeDate and Time PickersThe date Input TypeThe month Input TypeThe time Input TypeThe week Input TypeThe datetime Input TypeThe datetime-local Input TypeThe email Input TypeThe number Input TypeThe range Input TypeThe search Input TypeThe tel Input TypeThe url Input TypeSummarySelf-Test Questions
Using Local StorageStoring and Retrieving Local DataRemoving and Clearing Local DataCross-Document MessagingSummarySelf-Test Questions
Understanding CodecsThe audio and source TagsThe audio and source Tag AttributesSupporting Older BrowsersSummarySelf-Test Questions
The Video CodecsThe video and source TagsThe video and source Tag AttributesSummarySelf-Test Questions
MicrodataWeb WorkersOffline Web ApplicationsDrag and DropOther HTML5 TagsSummarySelf-Test Questions
Lesson 1 AnswersLesson 2 AnswersLesson 3 AnswersLesson 4 AnswersLesson 5 AnswersLesson 6 AnswersLesson 7 AnswersLesson 8 AnswersLesson 9 AnswersLesson 10 AnswersLesson 11 AnswersLesson 12 AnswersLesson 13 AnswersLesson 14 AnswersLesson 15 AnswersLesson 16 AnswersLesson 17 AnswersLesson 18 AnswersLesson 19 AnswersLesson 20 Answers

Content preview from HTML5: 20 Lessons to Successful Web Development

Images

Accessing the Canvas

Images

To view the accompanying video for this lesson, please visit mhprofessional.com/nixonhtml5/.

There are no two ways around it. If I’m going to show you how to use the HTML5 canvas, then I’m also going to have to give you an ultra-crash course on JavaScript, or at least on those aspects of it required for manipulating the canvas.

So here goes (if you already know JavaScript, you can briefly skim the following section, before moving on to the “Accessing the Canvas with JavaScript” section).