html / css – basics

Download HTML / CSS – Basics

Post on 02-Jan-2016




0 download

Embed Size (px)


HTML / CSS – Basics. Why the heck are we doing this ?. HTML. HyperText Markup Language. CSS. Cascading Style Sheets. Reasons to learn HTML and CSS. Presentation. Content. Structure. Layout / Design. I have some content , how do I structure it ?. - PowerPoint PPT Presentation


HTML / CSS - Basics

HTML / CSS BasicsWhy the heck are we doing this?HTMLHyperText Markup LanguageCSSCascading Style SheetsReasons to learn HTML and CSSHTMLCSSContentPresentationStructureLayout / DesignI have some content, how do I structure it?I have the content and the structure, how do I make it look good?Appreciate the logic in this.Change the look of everything efficiently.HTML Document Basic StructureYou always need this:Start of documentStart of HeadEnd of HeadStart of BodyEnd of HeadEnd of documentThe way in which head and body are included in html is called nesting.

Open and let them copy it.5HTML Source and Surface

Source codeWhat the browser displays is actually:RulesAlways close tags. Always! No matter what.Some tags can not be nested in others.A nested tag must be closed before a parent tag is closed.HTML Basic tagsa paragraphheading of the first order-more headingsan unordered listan ordered lista list itemthe anchor tagan image objectHTML Hierarchy

  • HTML Hierarchy

    • HTML Hierarchy

      • HTML Basic attributesSome Textthe hypertext reference, turning Some Text into a link

        an image object is not complete if the source is not given and an alternative text is missingAbsolute vs. Relative Links Some Textan absolute reference

        Some Texta relative referenceRelative links revisitedSome Textfile in the same directory

        Some Textfile in a sub-directory called pagesRelative links revisited 2Some Textfile in the parent directory

        Some Textfile in a sub-directory of the parent directorydwHTML Special tagsa divisionspecial segmentsmake it boldmake it italics
        line breakhorizontal linea block of quoteWant more? more? those of you not good at remembering stuff.Want more? those of you who want to know all the details.Want more? those of you who like to try out things.Want more?