HTML / CSS – Basics

Download HTML / CSS – Basics

Post on 02-Jan-2016

18 views

Category:

Documents

0 download

DESCRIPTION

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

TRANSCRIPT

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 w3schools.com/html 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?http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

        http://www.selfhtml.org/

        http://www.w3schools.com/html/Want more?http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

        http://www.selfhtml.org/

        http://www.w3schools.com/html/For those of you not good at remembering stuff.Want more?http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

        http://www.selfhtml.org/

        http://www.w3schools.com/html/For those of you who want to know all the details.Want more?http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

        http://www.selfhtml.org/

        http://www.w3schools.com/html/For those of you who like to try out things.Want more?http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

        http://www.selfhtml.org/

        http://www.w3schools.com/html/