introduction to web design · element attributes • most elements can have attributes, which...
TRANSCRIPT
IntroductionToWebDesign
ByTundeOmotayo
IntrotoWebDesignIntoday’slessonwearegoingtocover:• HTML• CSS• Createourfirstwebpage
LayersOfWebDesign
STRUCTURE:HTMLSitePlanning
PRESENTATION:CSSStyle,Colors
WhatisHTML?
• HyperTextMarkupLanguage,aformatforcreatingdocumentsandwebpages.• Describesthestructureofwebpagesusingmarkup.• AmarkuplanguageisasetofMarkuptags.• Purposeofthetagsistogroupanddescribepagecontent.• Inanutshell:“HTMLdescribesyourcontent”.
PlainTextvsMarkUp
HTMLStructure/Syntax
• HTMLtagsgivestructureandmeaningtoyourcontent.• Consistsofelements,textandtags.• <!DOCTYPEhtml>:notatagbutamessagetothebrowsertoinformwhatkindofhtmlisused.• <html>elementdefinestheHTMLdocument.• <head>elementcontainselementsthatdescribetabtitle,helpwithSEO.• <body>elementcontainswhatisshowninsidethebrowser.
<!DOCTYPE html><html><head><title>Page Title</title></head><body>
<h1>My First Heading</h1><p>My first paragraph.</p>
</body></html>
Nesting/Format
• HTMLconsistsofmatchingpairsofangle-bracketstags.Theyenclosesections/textsthataredisplayedonthewebpage.• Nestingiswhentags“wrap”othertags.• Weindicatenestingby“indenting”thenestedtagsbypressingthe“tab”button.
<!DOCTYPE html><html>
<head><title></title>
</head><body>
<h1></h1><p></p>
</body></html>
HTMLELEMENTS
Anatomy:
<tag>Content</tag>
• AnHTMLelementincludesboththeHTMLtagandeverythingbetweenthetag(thecontent).• Tagsusuallycomeinpairs,thefirstisthestarttagandthesecondistheendtag.• HTMLhasadefinedsetoftagnamesthatthebrowserunderstands.
DefinedSetOfTagNames
ElementAttributes
• Mostelementscanhaveattributes,whichprovidesadditionalInformationabouttheelement.
<divclass=“container”></div>
• Formatofattributes:name=“value”.Youcanusedoubleorsinglequotes.• Thisisveryusefulwhenwewanttogiveauniquestylethecontentsbetweenthetags.
SpecialTags
• Comments• Singlelinecomments://This isacomment.• Multi-line comments:<!-- Thisisacomment.-->
• HTMLlinktags<a>:• <a href="https://www.w3schools.com">Thisisalink</a>
• Selfclosedtags:• Imagetag:<img src=“cat.jpg" alt=”nicecat”/>• <br/> insertsaline-break.• <hr/> insertsahorizontalrule(line)separator.
• Link:• <linkrel =“stylesheet”type=“css”href=“styles.css”>
WhatisCSS?
• CascadingStyleSheet.• Stylesheetisasetofrulesdefininghowanhtmlelementwill”look”inthebrowser.• Mostelementswillinheritmanystylepropertiesfromtheelementsthatarenesting(wrapping)itbydefault.• Eg• ifwemakethebodyelementblue,alltheelementswithinthebodytagswillbebluebydefault.• Unlesswechoosetogiveauniquestyleorcolortoanelementwithinthebodytags.
Example
• Ifwemakethebackgroundcolorofthebodyredandwestyleaparagraphwithinthebodytagstoapinkbackgroundcolor.Whatwillbethecoloroftheparagraphtag?
CSSSyntax
• Syntax– rulesforhowalanguageiswritten.• CSSContains:Selectors&Declarations.• Selectoristheelementsinhtmlwewanttostyle.• Declarationscontainsatleastoneproperty/valuepair.
ForExample
• body{background– color:blue}• p{font- family:Arial,Helvetica}• h1{font– size:24px}• a{color:red}
ProperCSSformat+Multipledeclarations
body{color:blue;font– size:20px;}
• Selectoristypedinfrontofthedeclaration,withaspaceseparatingitandtheopeningcurly-bracket• Itisdonethiswaybecauseaselectorcanhavemultipledeclarations.• Also,forthesakeofreadability.
MultipleSelectors• WecanalsohaveasituationwherewewanttoapplythesamestyletomultipleselectorsinCSS.Theselectorsareseparatedbyacomma.
Exampleh1,h2,h3,h4{
font-weight:bold;}
TypesofSelectors
• Typeselectors:Selectorsthatfromthehtmlelementsname• Eg:
• body{declaration}• p{declaration}
• IDSelectors:htmlattributethatisaddedtoyourhtmlmarkup(tag).WereferencetheIDinCSSwithahash“#”.• Eg:
• InHTML:<img id=“logo”src=“”>• InCSS:#logo{declaration}
• ClassSelectors:htmlattributethatisaddedtoyourhtmlmarkup. WereferencetheclassinCSSwithaperiod“.”.• Eg:
• InHTML:<ul class=“sports”>• InCSS:.sports{declaration}
IDvsClass
• AnIDismorespecific thanaclass.• AnelementcanhavebothanIDandmultipleclasses.• Ifwearestylingasectionwetypicallyuseclass.
Wheredowebuildourwebpages?
• Wecancreatewebpagesusinganytexteditors.Samewaywecanplaybasketballinanyplaygroundwithhoops.• Butprofessionalbasketballplayersplayinabasketballcourtbecausethecourthasalltheequipmentthatisused.
• SomeofourprofessionalbasketballcourtsforWebpagecreationare:• OnlineEnvironment
• JSFiddle - https://jsfiddle.net/• DesktopApplication
• Brackets- http://brackets.io/
Herewewillcreateourfirstwebpage
Tostartoff
• Tostartoffletsgotoouttemplatehere:https://jsfiddle.net/4e3bdq6h/• Wewillworkfromhere.
Thankyouforattending!