html5 & css3 · css3 is the fastest way to help you create a professional online presence that...

HTML5&CSS3ForBeginners

YourGuideToEasilyLearnHTML5&CSS3Programmingin7Days

ByiCodeAcademy

Copyright2017-AllRightsReserved–iCodeAcademy

ALLRIGHTSRESERVED.Nopartofthispublicationmaybereproducedortransmitted in any form whatsoever, electronic, or mechanical, includingphotocopying, recording, or by any informational storage or retrieval systemwithoutexpresswritten,datedandsignedpermissionfromtheauthor.

TABLEOFCONTENTSINTRODUCTION:

CHAPTER1:INTRODUCTIONTOHTML

CHAPTER2:ELEMENTS,ATTRIBUTES,ANDVALUES

CHAPTER3:STRUCTUREOFHTMLFILES

CHAPTER4:PARAGRAPHS

CHAPTER5:LISTS

CHAPTER6:STYLINGTEXT

CHAPTER7:USINGCOLORS

CHAPTER8:BACKGROUNDANDIMAGES

CHAPTER9:TABLES

CHAPTER10:HYPERLINKS

CHAPTER11:FORMS

CHAPTER12:HTMLLAYOUTELEMENTS

CHAPTER13:HTMLMULTIMEDIA

CHAPTER14:CSS3

CHAPTER15:STYLINGTEXT

CHAPTER16:FORMATTINGLAYOUT

CHAPTER17:STYLINGBORDERS

CHAPTER18:STYLINGLISTS

CHAPTER19:OTHERCSS3FEATURES

CONCLUSION:

INTRODUCTION:

Welcome to this training for the Kindle edition of “HTML5 & CSS3 ForBeginners: YourGuideToEasilyLearnHTML5&CSS3Programming in24Hours”.This book contains the steps, strategies, and information you need to learnHTML5 and CSS3, the latest and current standard languages for creatingwebsitesanddesigningwebpages.Itwasconceptualizedanddevelopedtohelpbeginners, business owners, and interested web users master the powerfulfeaturesofthesewebsitecreationandstylingtoolsinasfastasoneday.Beginnersandexperiencedwebdevelopersalikewillfindthispracticalbookanenjoyableandreliableresourceforlearningthetwohottestlanguagesinwebsitecreationanddesignontheirown.Ifyou’replanningtolaunchalucrativecareerinwebdevelopment,learningHTML5andCSS3throughthislearningmaterialistheeasiest,fastest,andleastexpensivewaytostart.Thisvisual-aided instructionmaterial isastep-by-stepguide tohelpyoumakeuseoftheavailabletools,layoutstyles,built-ineffects,anddesigningfeaturesofHTML5andCSS3. Itpresents theprecisestepsand the imageof theoutcomeafterperformingthesteps.Itwillguideyoufromtheveryfirststepinwebsitecreationtothetaskofstylingyourwebpagestomakeitattractiveandpleasingtoyouandyourvisitors.HTML is a mark-up language used to create web pages. An HTML codeprovidesthestructureandlayoutofawebpageandinstructsthewebbrowserswhat to display and how to present the text, images, videos, and sounds toviewers. HTML5, its latest version, is a backward-compatible language withmany new and outstanding features that are supported and used by themajorbrowserssuchasChrome,InternetExplorer,Firefox,Safari,andOpera.HTML5 is an easy-to-learnwebsite creation tool that uses concise syntax andflexible code structure. This book presents the tools, options, and features ofHTML5 and shows how you can use them to create a visually attractive anduser-friendlywebsite. It features images to show the tools and theoutcomeofthe steps. You will never get lost as you try out each code and explore its

elementsandproperties.The step-by-step guide provided in this bookwill showyouhowyou can usefreeandsimpletexteditorstowriteandrunyourownHTMLcode.ItprovidestheinstructionandtheinformationyouneedtowriteyourcodeaccuratelyandtakeadvantageofthemanypowerfulfeaturesofHTML5.ThebookincludesstandardreferencesthatyoucanreadtolearnaboutandmakefulluseofthecapabilitiesofHTML5andCSS3.Itpresentsquickguidestothemostcommonlyusedattribute,propertiesandtheirpossiblevaluesandprovidesrelevantexamplestoillustratethetopics.Thechaptersarestrategicallyarrangedtohelpyoubuildtherequiredskillsasyouproceed.CSS,orCascadingStyleSheets,isthelanguageusedtodescribehowwebpagesshouldbepresented,includingitslayout,fonts,andcolors.Itallowsyoutoadaptyour presentation to multiple devices such as large screens, portable devices,printers,orsmallscreens.ItisanindependentwebstylingtoolthatcanbeusedwithHTMLandotherXML-basedmark-uplanguage.CSS3isthelatestversionofCSSandthecurrentstandardforwebdesigning.Itfeatureswebpagestyling featuresandeffects thatwillhelpyoucreatevisuallystunning websites. Many of its features are intended to replace the stylingfeatures that were removed from the earlier versions of HTML to simplifywebsitecreationandlayoutcodes.Ifyouareawebsiteorbusinessowner,youwillwanttouseawebdesigningtoollikeCSS3toensurethatyourwebsiteishighlyaccessible,willremainusableinthe future, truly responsive, and uses the industry standard in web designing.CSS3isthefastestwaytohelpyoucreateaprofessionalonlinepresencethatisconsistentwithyourpresentbrand.While many content management systems can provide built-in themes andoptions for customizing them, learningCSS3will empoweryou to stepoutofthe box and create more personal and unique themes that don’t look likeeveryoneelse’s.LikeHTML5,CSS3 isaneasy-to-learn language thatyoucanmaster ina fewhours.Thislearningmaterialwillshowyouhowtocreatesimplecodesthatyoucanuserepeatedlytostylemultiplewebsitesacrossdifferentdevices.

Youwillfinddifferentoptionsforstylingyourwebpagesanddecidewhichoneworks best for your needs or combine them all to create and provide a trulydifferentandhighlypersonalizedwebsite.TheinstructionspresentedinthislearningmaterialbookwillshowyouhowtousethesimplesttexteditorstowriteCSScodes.Itprovidestheprecisestepsandtheinformationyouneedtowriteyourcodeaccuratelyandtakeadvantageofthemanypowerfulfeaturesandnewbuilt-ineffectsofCSS3.Itcontainsimagesthatwilldemonstratethetoolandtheresultsofapplyingthestylingfeatures.CSS3isnotjustgreatfordesigningyourwebsite.Itfeaturesseveralanimationproperties that you can apply to create plug in-free animations and buildinteractive interfaces. Ifyou’replanning tobuildamotion-basedwebsite,CSSoffersanefficientsolutionthatrequireslessthanadaytolearnandmaster.The book “HTML5 & CSS3 For Beginners: Your Guide To Easily LearnHTML5&CSS3Programming in24Hours” is theultimate resource for self-learners, students, and anyone who’s interested in learning web designing forfun,business,andprofit.It is a useful referencematerial forwebdevelopers anddigitalmarketerswhowanttolearnandusethelatestfeaturesofbothHTML5andCSS3.Thisbookisforbeginnerswhowanttostartafreelancecareerinwebdesigningat a fraction of the cost of studying computer science or other programminglanguages.Itishighlyrecommendedforwebsiteownerswhowanttoimprovetheirdigitalpresencebycreatinganddesigningawebsitethatisattractive,web-friendly,anduser-friendly.

CHAPTER1:INTRODUCTIONTOHTML

WHATISHTML?

HTML is an acronym for HyperText Markup Language. It is a standardizedsystemforprovidingthelayout,structure,andformatofawebpage.AnHTMLfiletellsthewebbrowserhowtodisplayyourwebpages.HTML5isthelatestversionofHTMLand thenewstandard forwebbrowsers. Its features includethefollowing:

NewHTMLelementsanattributesAudioandvideoelementsformediaplayback2Dand3DgraphicsNewformcontrolssuchasurl,search,time,calendar,anddateLocalSQLdatabaseLocalstorage

HTMLTextEditorsAnHTMLeditorisasoftwareapplicationthatyouwillneedtocreateyourwebpages.SinceitonlyrequiresatextfilesavedinASCIIformat,youcanuseanytext editing program to write your HTML codes. The following are themostcommonlyusedHTMLeditors:TextEditor MSWindowsNotepad

AppleMcintoshTextEditHTMLEditors MicrosoftExpression

AdobeDreamweaverWordProcessingProgram MSWord

DocType

A DocType is a document declaration that defines the document type. Thebrowser requires this information to process theHTMLdocument and displaythewebpagecorrectly.HTML5 uses a simple DocType, <!DOCTYPE>, to distinguish an HTML5documentfromotherversionsofHTMLandfromotherdocumentssubmittedtothebrowser.

MetadataMetadataisasetofdatathatprovidesinformationaboutanotherdata.Thedataarenotmeanttobedisplayedonthewebpagebuttheymakeworkingwiththeinstanceofdataeasierbyproviding important information.Theyareplaced intheheadpart of theHTMLdocument and they are commonlyused to specifyinformationsuchaskeywords,pagedescription,andauthor.Followingaretheelementsofametadata:head Definesacollectionofmetadataforthedocument

Example:<head>…</head>title Definesthedocument’snameortitle

Example:<title>DogHouse</title>base SpecifiesthebaseURLforrelativeURLs

<basehref=˝http://www.DogHouse.com/news/index.html˝>link Definestherelationshipofthedocumenttoanexternalresource

<linkrel=˝companynumber˝href=˝/about˝>meta Definesmetadatathatcannotbeexpressedusingtheotherelementsstyle Allowstheauthortospecifythestyleinformationforapage

<styletype=˝text/css˝></style><style><body>{color:blue;background:yellow;}</style></body>

WritingaSimpleHTMLPage

Youcanuseanytexteditorbutthistrainingusesnotepadasthetexteditor.TocreateanHTMLdocument,openthenotepadandtypethefollowingdata:<!DOCTYPEhtml><html><head><title>DogCare</title></head><body>DogCareisawebsitefordogloverswhoonlywantthebestfortheircaninefriends.</body></html>

SavinganHTMLFileAftercreatingthedocument,youshouldsaveitforviewingormodifyinglater.Whensaving,remembertouseeither.htmlor.htmasfileextensionandchangethefiletypetoAllFiles.

ViewingtheHTMLPageToviewthepage,launchawebbrowser.Gotothefolderwherethefileissavedandrightclickonthefile.Choosetheoption‘openwith’andclickyourbrowser.Thewebpagewilldisplaythecontentsyouhaveenclosedwithinthebodytags.Ifyoumakeanymodificationstothefile,youmustrefreshorreloadthepagetoapplyandviewthechanges.Thisishowthewebpagewilllook:

YouCanLearnHTMLandCSSinOneDayHTML is a simple language that you can learn in less than one day. It usessyntaxandstylethat iseasytolearn.Itdoesnot imposeindentationandisnotcase-sensitive.Onceyouknowthebasicsyntax,youcanalreadycreateadecentwebpage.Youcanaddthespecialfeaturesandeffectslatertomakethewebpageattractive.HowtoUseThisBooktoLearnHTML5andCSS3inOneDayTolearnHTMLandCSSinoneday,thisbookpresentscodeexamplesforeachfeatureaswellastabularguideforthedifferentelementsandacceptablevalues.You can experiment on the code, modify them according to your needs, andcreateacodeonyourown.Theexamplesgiveninthisbookareindentedtohelpbeginnersunderstandhowthe different sections of the code and the elements relate to each other.Indentationalsomakesthecodeeasiertoread.The best way to learn is to read each chapter in the order in which they arepresented in the book. In HTML, an element can have several attributes andthese are presented on tables for reference. You can read them briefly forinformation. Themost commonly used ones are discussed. You can focus onthesediscussionsandtheexamplesgiven.

CHAPTER2:ELEMENTS,ATTRIBUTES,ANDVALUES

HTMLhasthreemainmark-upcomponents:

ElementsAttributesValues

ElementsAnHTMLelement refers toeverything thatcanbefoundfromthestart tag totheendtag,includingthetags.Elementsmostcommonlyappearwithastarttag,endtag,andthecontentbetweenthesetags.Here’sanexample:<starttag>Content</endtag>EmptyHTMLElementsSomeHTMLelementshavenocontentandtheyarecalledemptyelements.Anexampleisthe<br>elementwhichisusedtodefinealinebreak.Inaddition,the<br>elementhasnoclosingtag.WhatareTags?Tags are the building blocks of anHTMLdocument. They are used to definehowthebrowsermustformatanddisplaythecontent.Tagscommonlyhavetwoparts:openingandclosing.Theopeningandclosingtagsareenclosedinanglebrackets.Inaddition,theclosingtagisintroducedbyabackslash.Example: openingtag: <html>

closingtag: </html>ThefollowingtablespresentthedifferentHTMLTags:Tag Function<!DOCTYPE> Definesdocumenttype<html></html> EnclosestheentireHTMLdocument<head></head> EnclosestheheadoftheHTMLdocument<title></title> Indicatesthedocumenttitle<body></body> EnclosesthebodyoftheHTMLdocument<p></p> Createsaparagraph<hr> Createsahorizontallinerule<br> Createsasinglelinebreak<ol> Definesanorderedlist<ul> Definesanunorderedlist<h1></h1> Createsafirstlevelheading<h2></h2> Createsasecondlevelheading<h3></h3> Createsathirdlevelheading<h4></h4> Createsafourthlevelheading<h5></h5> Createsafifthlevelheading<h6></h6> Createsasixthlevelheading<a></a> Definesahyperlink<b></b> Definesaboldtext<caption></caption>

Definesatablecaption

<blockquote></blockquote>

Definesasectionquotedfromanothersource

<div></div> Definesasectioninadocument<dl></dl> Definesadefinitionlist<dt></dt> Definesaterminadefinitionlist<dd></dd> Definesadescriptionofaniteminadefinitionlist<img> Definesanimage<em></em> Definesemphasizedtext<input></input> Definesaninputcontrol<iframe></iframe> Definesaninlineframe

NewElementsforGraphicsandForms<canvas></canvas>

Usedfordrawinggraphics throughscripting

<keygen></keygen>

Definesakey-pairgeneratorfield

<datalist></datalist>

Specifies a predefined options forinputcontrols

<output></output>

Definescalculationresults

NewStructuralorSemanticElements<article></article>

Defineanarticle

<section></section>

Createsasection

<aside></aside>

Definescontentrelatedtothepagecontent

<hrgroup></hrgroup>

Groupsasetofh1toh6elements

<header></header>

Definesaheaderforasectionordocumentandcommonlycontainsthelogo,company,andpagetitle

<footer></footer>

Definesafooterforasectionordocument

<bdi></bdi> isolates a section of a text that might be formatteddifferently

<nav></nav> Definesnavigationlinks<summary></summary>

Definesavisibleheadingforadetailselement

<details></details>

Definesotherdetailsthatuserscanvieworhide

<command></command>

Definesacommandbutton

<figure></figure>

Identifiesself-containedcontent

<figcaption></figcaption>

Definesacaptionforafigureelement

<meter></meter>

Definesscalarmeasurement

<mark></mark>

Defineshighlightedormarkedtext

<time></time>

Definesatimeordate

<progress></progress>

Pertainstothestatusofatask

<ruby></ruby>

Definesarubyannotation

<rt></rt> Definesapronunciationorexplanationofcharacters.<wbr></wbr> Definespossiblelinebreak<rp></rp> Specifies what to display in browsers that don't support

rubannotations

AttributesAnattributeisusedtomodifyanHTMLelement.Itisalwaysplacedinsidethestarttagoftheelement.Attributesconsistoftwoparts:nameandvalue.Thenameistheelement’spropertythatyouwanttodefine.Thevaluespecifiesthe setting for thepropertyand isusuallywritten insidequotationmarks. Forexample:<fontface="arial"size="3">DogHouse</font>Intheaboveexample,thenamesare‘face’and‘size’whilehevaluesare“arial”and“3”respectively.AttributenameandtheirvaluesarenotcasesensitivebuttheW3Crecommendslowercase attributes and values.HTML5 does not require values to be placedinsidequotesbuttheW3crecommendsthatvaluesbegiveninsidequotes.

CommonlyUsedAttributesTherearefourcoreattributesthatcanbeusedonmostHTMLelements:

idtitleclassstyle

TheidattributeTheidattributecanbeusedtospecifyauniqueidentificationforanelementinan HTML page. For instance, if there are two elements with identical nameswithin the samewebpage,youmaywant touse the idattribute todistinguishonefromtheother.ThetitleAttributeThetitleattributespecifiesatitlefortheelement.Itisusuallydisplayedasatooltipwhenthemousehoversovertheelementorwhentheelementisloading.Itsbehavior,however,dependsontheelementthatusesit.TheclassAttributeTheclassattributeismostcommonlyusedtoassociateanelementtoaclassinastyle sheet.Thevalueof this attributemayconsist of a space-separated list ofclassnames.TheclassAttributeThe style attribute lets you define Cascading Style Sheet (CSS) rules on anHTMLelement.

syntax:<tagnamestyle="property:value;">InternationalizationAttributesThe following internationalization attributes are available for most XHTMLelements:

dirlangxml:lang

ThedirAttributeThe dir attribute is used to specify the direction of the text in the element’scontent. In HTML5, the dir attribute can be applied andwill validate on anyHTMLelement.Therearethreepossiblevaluesforthisglobalattribute:ltr left-to-righttextdirection(defaultvalue)rtl right-to-lefttextdirection

auto allows the browser to determine the text direction based on thecontentoftheelement

Syntax:<elementdir="ltr|rtl|auto">Example:<!DOCTYPEhtml><htmldir="ltr"><head><title>SpecifyDirections</title></head><body>Thisishowthebrowserrendersleft-to-righttextdirection.

</body></html>

TheLangAttributeThelangattributeletsyouspecifythemainlanguageoftheelement'scontent.ItcanbeusedandvalidatedonanyHTML5element.Syntax:<elementlang="language_code">Thevalueisanylanguagecodesuchas"en"forEnglish,"de"forGerman,"es"forSpanish,"fr"forFrench,and"pt"forPortuguese.Example:<!DOCTYPEhtml><htmllang="es"><head><title>SpanishLanguagePage</title></head><body>ThispageisusingSpanishLanguage.</body></html>Thexml:langAttributeThe xml:lang attribute is theXHTML replacement for lang attribute. Like thelangattribute,itsvalueshouldbeacountrycode.

GenericAttributesThefollowingattributescanbeusedwithmanyHTMLtags:Attribute Function Valuesalign alignstagshorizontally right, left,centervalign aligns tags vertically

within an HTMLelement.

top, middle,bottom

bgcolor Setsabackgroundcolorbehindanelement

numeric, RGBvalues,hexidecimal

background Sets a backgroundimage behind anelement

URL

id Specifies an elementforusewithCSS

UserDefined

class Classifies an elementforusewithCSS

UserDefined

width Specifies the width ofimages, table cells, ortables

Numeric

height Specifies the height ofimages, table cells, ortables

Numeric

title Displays title of theelements.

UserDefined

ValuesAttributesareusuallypresentedinname-valuepairs.Thevaluespecifies,sets,ordefinesthepropertiesofanattribute.Forexample,inthefollowingdeclaration,the values “Arial” and “24” specifies the attributes face and size respectively.Together,theyprovidemoreinformationaboutfont.

<fontface="Arial"size="24">DogCareCompany</font>

CHAPTER3:STRUCTUREOFHTMLFILES

HTML files have twoparts: the head and the body.The data contained in theheadpartsareenclosedinthetags<head></head>whilethedatacontainedinthebodypartareenclosedinthetag<body></body>.

HeadTagsTheheadtagsareplacedimmediatelyafterthestarthtmltag.Itcancontaindatasuchasthetitleofthewebpageordocument,metainformation,andscripts.The<head>elementcancontainthefollowingelements:

<title><meta><link><style><base><script><noscript>

HTML5nowvalidatesHTML files evenwithout the<head> tag but a<title>shouldbeincluded.Here’sanexampleofanHTMLfilewithouta<head>tag:<!DOCTYPEhtml><html><title>DocumentTitle</title><body><h1>Thisisaheading</h1><p>Thisisaparagraph.</p></body>

</html>

BodyTags

Thebody tags<body></body>comes immediatelyafter theendhead tagandcontains everything that should appear on the web page including the text,images,andvideos.Containertagshaveastarttagandattributes.Thebodytagisacontainertagandhasastarttag.Hence,itcontainsattributes.Thesearetheattributesforbodytags:text specifiesthetextcolorofthewebpagebgcolor specifies the background color of the

webpagebackground specifies the background image of the

webpageclass,style,id usedinCSSlink specifies the color of hyperlinks in the

pagealink specifies the color of active hyperlinks

inthewebpagevlink specifiesthecolorofvisitedhyperlinks

HeadingsHeadings are container tags which are used to format heading text usingpredefinedvaluesforcolorsandsizes.Theyareusedtoorganizethecontentofthewebpage.There are 6 heading tags and theyhave different effects on thetext:

<h1></h1><h2></h2>

<h3></h3><h4></h4><h5></h5><h6></h6>

HTMLdocumentsmaycontainamainheadingandoneormoresub-headings.Afontsizeisassignedtoeachheadingtodistinguishitfromotherheadings.Themainheadingtypicallyhasthebiggestfontsizeandisdefinedas<h1>.Thenextheadingisassignedthesecondbiggestfontsizeandisspecifiedas<h2>.Thiscangoonto<h6>whichisthesmallestheadingfont.Itisassignedtotheleastimportantheading.Headingscanbealignedtotheright,center,orleftofthedocument.HerearetheattributesofHeadingTags:Attribute Meaningalign Specifiestheheading'shorizontalalignmenttitle Specifies the text that appears each time the mouse

hoversovertheheadingclass,style,id UsedinCSSGroupingHeadingsHeadings may be organized or grouped to show the relationship betweensubheadings,multiple levels, or alternative titles. To do this, youwill use the<hgroup>elementtogroupthem.Youcanusetwoormoreoftheheadingtypesfromh1toh6.UsingtheHeaderTheheadercancontainintroductoryornavigationalcontentofthedocument.Itcanincludelinks,searchbox,ormainnavigation.

NavigationNavigationfacilitateslinkingofimportantgroups.Alinkinthe<nav>elementmaypointtodatawithinthepage,tootherpages,orboth.AnHTMLlistcanbeusedasabaseforanavigationbar.Here’sacodesegmentthatcreatesasimplenavigationbarfromastandardlist:<ul><li><ahref="cover_image.jpg">Home</a></li><li><ahref="spreadsheet.jpg">Status</a></li><li><ahref="aboutpage.asp">About</a></li><li><ahref="email.asp">Contact</a></li></ul>

Article

Anarticlereferstoaself-containedreusableordistributablecompositionwithinthedocument.Itcanbeablogpost,aforumpost,productdescription,magazineornewspaperarticle,comment,newsstory,andsimilaritems.ThistagisanewHTML5feature.Here’sanexample:<article><h2>Python</h2> <p>Python is an object-oriented general purpose programming languagedevelopedbyGuidovanRossuminthelate1980s.</p></article>

SectionThe section element indicates a generic section of a document and usuallycontainsaheading.Thesectiontag,anHTML5feature,canbeusedtoproducea

morecreativemarkupwithoptionsforusingtheh1toh6headinghierarchy.Forexample,hereisasectionwhichexplainswhatWTOis:<section><h1>WTO</h1><p>TheWorldTradeOrganization(WTO)….</p></section>

FooterThefooterelement isanHTML5enhancement. Itmaycontain informationonauthorship, contact, copyright, license agreement, index, sitemap, appendix,internallinks,andothersimilardocuments.Itcanbefoundinseveralpartsofadocument.Example:<footer><p>Preparedby:MartinPage</p><p>Contactdetails:<ahref="mailto:[email protected]">[email protected]</a>.</p></footer>

GenericContainer

The<div>elementcanbeusedtowrapacontaineraroundasectionofcontenttofacilitateeffectwithJavascriptorstylingwithCSS.Forexample,here’sacodethatwillcauseasectionofthepagetobeshowninred:

html5 & css3 · css3 is the fastest way to help you create a professional online presence that...

Documents