lowercasecss

02/15/0608:051IntroductiontoCSSHTMLandCSSHTMLandCSSHTML–creatingdocumentsforonlineHTML–creatingdocumentsforonlinedisplaydisplayCascadingStyleSheets–thenew,CascadingStyleSheets–thenew,improvedwaytocontrolawebpage'simprovedwaytocontrolawebpage'sappearanceappearance02/15/0608:052IntroductiontoCSSOverview-topicsOverview-topicsWhatisHTMLBasicformatStructureandtagsEntitiesLists–CSSHyperlinksGraphics(Tables)(moreCSS)02/15/0608:053IntroductiontoCSSWhatWhatisisHTMLHTMLHHyperyperTTextextMMarkuparkupLLanguageanguageHyperText…HyperTextisany(text-based)documentthatincludeslinkstootherdocuments.
…MarkupLanguageMarkuplanguageisusedto"markup"thetext(andothercontents)ofadocumentandspecifyitsappearance.
HTMLAvarietyofmarkuplanguage,usedfordocumentsbeingaccessedovertheInternet02/15/0608:054IntroductiontoCSSAnHTMLdocument–awebpageAnHTMLdocument–awebpageAwebpagecontainsobjectstobedisplayedsimpleobjects:wordsnot-so-simpleobjects:pictures,linkstootherwebpages,wordsindifferentfonts/colors/sizesgroupsofobjects:paragraphs,tables,etc.
AnHTMLelementisanobjectcontainedwithinmarkerscalledtagsElementsinaproperwebpagefollowastructure02/15/0608:055IntroductiontoCSSMinimalElementsofaCorrectHTMLDocumentMinimalElementsofaCorrectHTMLDocumentEVERYhtmldocumentshouldhavethisstructure:theheadcontains"control"informationthebodycontainsthedisplayedcontentseverythingiscontainedwithinthehtmlelement02/15/0608:056IntroductiontoCSSHTMLandDocumentStructureHTMLandDocumentStructureAnHTMLdocumentisacollectionoflogicalparts:sections,paragraphslists,tablesgraphicelementsothers,including"customized"elementsHTMLelementscorrespondtotheselogicalpartsSectionsareseparatedbyheadings,,etc.
ParagraphsareformedbytagsTagsforlistsandfortables02/15/0608:057IntroductiontoCSSMarkingUpwithHTMLMarkingUpwithHTMLTagsmarkoutspecifichtmlelementsTagpropertiesdescribehowtheelementshouldlookFormattingwithTags:Wordsorabbreviationsareenclosedin"anglebrackets"a.
k.
a.
"less-than"and"greater-than"Tagpairscomeinpairs-beginningandend.
example:…Tagsshouldbeinlowercasebutolderwebpagesoftenuseuppercasetags02/15/0608:058IntroductiontoCSSSomeoftheBasicElements(TagPairs)SomeoftheBasicElements(TagPairs)DefineanhtmlfileInformationaboutthefileThefile'stitle(notthe"title"ofthecontents!
)Thedisplayablecontents,,,…(),()Thesecontroltheappearanceofthedisplayedcontents02/15/0608:059IntroductiontoCSSStructuralHTMLElementsStructuralHTMLElementsBlockelementh1,h2,p,ol,ul,table,div,…also:hr,brEachelementcompletelyfillsthewidthofthedisplay–evenifitscontentsdon'tSomeblockelementscancontainotherblockelements-butnotall,andnotalwaysIn-lineelementem,strong,img,a,…OnlyaswideasnecessaryforitscontentsContainedwithinotherelementsCannotcontainablockelement02/15/0608:0510IntroductiontoCSSAngleBracketsinHTML;theEscapeSymbolAngleBracketsinHTML;theEscapeSymbolSomecharacterscan'tbeintypedinawebpage:—"anglebrackets"indicatetags&—"ampersand"isanescapesymbolusedwith;non-EnglishlettersHTMLentitiesproducesuch"un-type-able"charactersEntitybeginswithampersand(&)escape;thenanabbreviation;thenasemicolon(;)<displaysas&displaysas&02/15/0608:0511IntroductiontoCSSasamplingofEuropeanlettersandspecialsymbolsasamplingofEuropeanlettersandspecialsymbolsFindcompletelistsatmontcs.
bloomu.
edu/~bobmon/Information/HTML.
CSS.
JavaScript/html-entities.
htmlorwww.
w3.
org/TR/xhtml1/dtds.
html§§÷÷µëℵ‡üüêê∞∞†ûéé√√>>úúèè¶<somelistsolli{color:red}olliol{list-style-type:upper-roman;}ExamplesofListsThispagedemonstratestwokindsofhtmllists.
Onekindhasnumbers;theotherkindhasbullets.
OrderedlistBreakfast.
Oneword:Pop-Tarts!
coffeeblueberrypoptartLunch.
Leftovers,yum.
Supper.
MydepartmentwillhavesupperwithsomeChinesefaculty.
Unorderedlisttinyelephants:notnativetoPennsylvania.
cats:furryli'lthings.
DorianMarcyEtceteragoldfish:alsoknownascatfood.
parakeets:morecatfood.
02/15/0608:0514IntroductiontoCSSAttributesAttributesAdditionalinformationaddedtoanelementInsidetheoftheopeningtagSomeelementsrequireoneormoreattributesExamples:OptionalformostelementsThestyle="…"andclass="…"attributesareveryusefulforcontrollingappearance02/15/0608:0515IntroductiontoCSSAttributesappliedtotheH1headingelement:AttributesappliedtotheH1headingelement:attributeexampleHeadingwithnoattributes.
helloI'maheadingwithaSTYLEattribute!
AndI'manother.
TheseCSSattributeslooklike…02/15/0608:0516IntroductiontoCSSLinks–whatmakesHTML"Hyper"Links–whatmakesHTML"Hyper"The"anchor"elementformsalinktoadifferentwebpagethereference–thepagebeinglinkedtoalsoknownastheURLtheanchor–thewordorphrasethatyouclickon,togotothelinkopeningtagisplusarequiredattributeclosingtagisAnanchorelement:clickhere02/15/0608:0517IntroductiontoCSSLinkexamples:Linkexamples:attributeexampleThiswebpagedemonstratesalink:clickhere.
Hereisanotherlink:textfile.
Thislinkgoestoawebpagethatissomewhereelse.
Thesourcefileontheleftisdisplayed(rendered)below:Thefirsttwolinksrefertolocalfiles.
ThelastlinkistoaURLonadifferentwebsite:02/15/0608:0518IntroductiontoCSSUniformResourceLocatorsUniformResourceLocatorsKnownasURLsGeneralizedformofa"filename"includesdirectorypaths,website,etc.
mayincludeaprotocolfortransmittingthefileHTTP–HyperTextTransferProtocoltheprotocolusedforwebpages(andotherfiles)sentovertheWorldWideWebusedwithTCP/IPprotocols02/15/0608:0519IntroductiontoCSSNon-textElementsNon-textElementsApictureinawebpageisan"image"elementThetagcreatesanimageelementrequiredattribute:src="…"thepictureisspecifiedbyaURLorfilenameThereisnoclosingtagAnimageelementcanbeusedanywheretextis:Inatable,list,paragraph,etc.
Astheanchorpartofalink02/15/0608:0520IntroductiontoCSSexamplesexamplesThisHTMLsourcefilecontains:–Alocalimage–Alocalimagewithoptionalattributes–AnimageloadedfromadifferentwebsiteontheInternet(across-sitelink)imgexamples<img.
.
.
>requiresthe"src"attribute:Localimage:<imgsrc="money-small.
jpg">Imagewithoptional"width"and"height"attributes<imgheight="100px"width="50%"src="money-small.
jpg">……ApicturefromtheWorldWideWeb:<imgsrc="http://lolcats.
com/images/u/07/38/lolcatsdotcomqmb89lbyjmqmkwoe.
jpg">02/15/0608:0521IntroductiontoCSSexamples–theoutputexamples–theoutputThedisplayedimageslooklikethis…LocalimageLocalimagewithoptionalwidthandheightattributesAnimageloadedovertheInternet