introduction to web design · element attributes • most elements can have attributes, which...
TRANSCRIPT
![Page 1: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/1.jpg)
IntroductionToWebDesign
ByTundeOmotayo
![Page 2: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/2.jpg)
IntrotoWebDesignIntoday’slessonwearegoingtocover:• HTML• CSS• Createourfirstwebpage
![Page 3: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/3.jpg)
LayersOfWebDesign
STRUCTURE:HTMLSitePlanning
PRESENTATION:CSSStyle,Colors
![Page 4: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/4.jpg)
WhatisHTML?
• HyperTextMarkupLanguage,aformatforcreatingdocumentsandwebpages.• Describesthestructureofwebpagesusingmarkup.• AmarkuplanguageisasetofMarkuptags.• Purposeofthetagsistogroupanddescribepagecontent.• Inanutshell:“HTMLdescribesyourcontent”.
![Page 5: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/5.jpg)
PlainTextvsMarkUp
![Page 6: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/6.jpg)
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>
![Page 7: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/7.jpg)
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>
![Page 8: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/8.jpg)
HTMLELEMENTS
Anatomy:
<tag>Content</tag>
• AnHTMLelementincludesboththeHTMLtagandeverythingbetweenthetag(thecontent).• Tagsusuallycomeinpairs,thefirstisthestarttagandthesecondistheendtag.• HTMLhasadefinedsetoftagnamesthatthebrowserunderstands.
![Page 9: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/9.jpg)
DefinedSetOfTagNames
![Page 10: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/10.jpg)
ElementAttributes
• Mostelementscanhaveattributes,whichprovidesadditionalInformationabouttheelement.
<divclass=“container”></div>
• Formatofattributes:name=“value”.Youcanusedoubleorsinglequotes.• Thisisveryusefulwhenwewanttogiveauniquestylethecontentsbetweenthetags.
![Page 11: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/11.jpg)
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”>
![Page 12: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/12.jpg)
WhatisCSS?
• CascadingStyleSheet.• Stylesheetisasetofrulesdefininghowanhtmlelementwill”look”inthebrowser.• Mostelementswillinheritmanystylepropertiesfromtheelementsthatarenesting(wrapping)itbydefault.• Eg• ifwemakethebodyelementblue,alltheelementswithinthebodytagswillbebluebydefault.• Unlesswechoosetogiveauniquestyleorcolortoanelementwithinthebodytags.
![Page 13: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/13.jpg)
Example
• Ifwemakethebackgroundcolorofthebodyredandwestyleaparagraphwithinthebodytagstoapinkbackgroundcolor.Whatwillbethecoloroftheparagraphtag?
![Page 14: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/14.jpg)
CSSSyntax
• Syntax– rulesforhowalanguageiswritten.• CSSContains:Selectors&Declarations.• Selectoristheelementsinhtmlwewanttostyle.• Declarationscontainsatleastoneproperty/valuepair.
![Page 15: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/15.jpg)
ForExample
• body{background– color:blue}• p{font- family:Arial,Helvetica}• h1{font– size:24px}• a{color:red}
![Page 16: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/16.jpg)
ProperCSSformat+Multipledeclarations
body{color:blue;font– size:20px;}
• Selectoristypedinfrontofthedeclaration,withaspaceseparatingitandtheopeningcurly-bracket• Itisdonethiswaybecauseaselectorcanhavemultipledeclarations.• Also,forthesakeofreadability.
![Page 17: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/17.jpg)
MultipleSelectors• WecanalsohaveasituationwherewewanttoapplythesamestyletomultipleselectorsinCSS.Theselectorsareseparatedbyacomma.
Exampleh1,h2,h3,h4{
font-weight:bold;}
![Page 18: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/18.jpg)
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}
![Page 19: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/19.jpg)
IDvsClass
• AnIDismorespecific thanaclass.• AnelementcanhavebothanIDandmultipleclasses.• Ifwearestylingasectionwetypicallyuseclass.
![Page 20: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/20.jpg)
Wheredowebuildourwebpages?
• Wecancreatewebpagesusinganytexteditors.Samewaywecanplaybasketballinanyplaygroundwithhoops.• Butprofessionalbasketballplayersplayinabasketballcourtbecausethecourthasalltheequipmentthatisused.
• SomeofourprofessionalbasketballcourtsforWebpagecreationare:• OnlineEnvironment
• JSFiddle - https://jsfiddle.net/• DesktopApplication
• Brackets- http://brackets.io/
![Page 21: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/21.jpg)
Herewewillcreateourfirstwebpage
![Page 22: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/22.jpg)
Tostartoff
• Tostartoffletsgotoouttemplatehere:https://jsfiddle.net/4e3bdq6h/• Wewillworkfromhere.
![Page 23: Introduction to Web Design · Element Attributes • Most elements can have attributes, which provides additional Information about the element. ... paragraph within the body tags](https://reader036.vdocuments.mx/reader036/viewer/2022081522/5f0392e17e708231d409b8be/html5/thumbnails/23.jpg)
Thankyouforattending!