Scribd Logo
Carica

Benvenuto in Scribd!

  • Simple Website Structure

    Caricato da

    adamcoulombe
    690 visualizzazioni35 pagine
    HTML is the language web browsers understand HTML is a standardized XML format that all web browsers are expected to interpret the same. HTML allows tags to be nested inside other tags, which is what makes it so useful for building web pages. CSS is used to define the look, style and positioning of your HTML elements.

    Descrizione originale:

    Titolo originale

    bunf

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    HTML is the language web browsers understand HTML is a standardized XML format that all web browsers are expected to interpret the same. HTML allows tags to be nested inside other tags, which is what makes it so useful for building web pages. CSS is used to define the look, style and positioning of your HTML elements.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    690 visualizzazioni35 pagine

    Simple Website Structure

    Caricato da

    adamcoulombe
    HTML is the language web browsers understand HTML is a standardized XML format that all web browsers are expected to interpret the same. HTML allows tags to be nested inside other tags, which is what makes it so useful for building web pages. CSS is used to define the look, style and positioning of your HTML elements.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 35

    Simple Website Structure

    Advanced Website Structure

    HTML = PAGE STRUCTURE

    CSS = PRESENTATION

    SCREEN

    STRUCTURE

    PRINT

    HANDHELD

    HTML is the language web browsers understand


    A web browser like Safari or Firefox is an interpreter for the HTML that you create. HTML is a standardized XML format that all web browsers are expected to interpret the same. The W3C is an organization that has defined all the tags, attributes and properties that can be used in HTML. They also define what these should all mean to a web browser. You can view the HTML code of any website using view-source in your browser

    a few things about HTML


    HTML, like all forms of XML, allows tags to be nested inside other tags. This structure is what makes it so useful for building web pages.
    <h1><em>Canadian</em> change rates</h1> ex-

    In HTML almost all tags inside the <body> create a box. In many cases, these boxes have pre-defined CSS styles, but most of these can be overridden with your own custom stylesheet. CSS is used to define the look, style & positioning of your HTML elements.

    There are many HTML tags, each with its own specific purpose.

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    anatomy of an HTML tag

    what exactly is CSS?


    Stands for Cascading Style Sheets A Style Sheet language used to apply your own custom styles to control the way your HTML looks Can control the look and feel of as many HTML pages as you want from a single stylesheet document A collection of rules that control the way the web browser will present selected HTML elements

    external stylesheets
    Style rules are contained inside their own CSS document Multiple HTML documents can reference a single CSS file and share the same styles Expedites website creation and maintenance while ensuring a consistent look across all pages

    anatomy of a CSS rule

    anatomy of a CSS rule

    anatomy of a CSS rule

    anatomy of a CSS rule

    anatomy of a CSS rule

    anatomy of a CSS rule

    anatomy of a CSS rule

    CSS selectors
    main types of selectors
    Type selectors Select a specified HTML element for styling

    Class selectors

    Select an element whose class attribute contains the specified class Select an element with the matching id attribute. Select an element, class, or id, somewhere within a specified element, class, or id.

    ID selectors

    Descendant selectors

    Type Selectors
    CSS
    em { } color: #ffffff;
    <body>

    HTML
    <p>Lorem ipsum <em>dolor</em> sit</p> <ul> <li>vehicula</li> <li>tempor</li> </ul> <li><em>rutrum</em></li>

    </body>

    Class Selectors
    CSS
    .big { } color: #ffffff;
    <body>

    HTML
    <p class=big>Lorem <em>dolor</em></p> <ul> <li class=big>vehicula</li>

    <li>tempor</li> </ul>

    <li><em>rutrum</em></li>

    </body>

    ID Selectors
    CSS
    #nav { } color: #ffffff;
    <body>

    HTML
    <p>Lorem <em>dolor</em></p> <ul id=nav class=big> <li>vehicula</li> <li>tempor</li> </ul>

    <li><em>rutrum</em></li>

    </body>

    Descendant Selectors
    CSS
    #ul em { } color: #ffffff;
    <body>

    HTML
    amet.</p> <p>Lorem ipsum dolor <em>sit</em> <ul>

    <li>item 1</li> <li>item 2</li> <li><em>item 3</em></li>

    </body>

    </ul>

    CSS selectors
    Allow you to target a specific element or group of elements within your HTML document to apply styles to You can be as vague or specific as you want in your selection.

    VAGUE
    p { } line-height: 21px; }

    SPECIFIC
    #header ul li .special { color: #ffffff;

    selects all paragraphs in the document and applies a line height of 21px

    selects anything with the class special, inside of an li that is inside a ul that is inside something with the id nav

    Classes VS. IDs


    IDs
    <div id=content></div>

    IDs are intended for elements that appear only once on a page. Use them in your HTML markup to block off sections (eg. #page, #header, #content, #footer).

    Classes

    <div id=content class=dark></div>

    Classes are intended mainly for styling purposes. You can re-use them on any kind of element. You can also apply multiple classes to a single HTML element to combine various styles.

    inline vs. block elements


    When creating a layout with CSS and HTML, the two most common types of elements are block and inline elements.

    BLOCK: New lines appear before and after the element with it consuming the full width available.

    INLINE: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.

    examples of block elements


    (by default)
    Divisions: <div></div> Headings: <h1></h1>, <h2></h2>, <h3></h3>, etc. Paragraphs: <p></p> Lists, and list items: <ul><li></li></ul>

    examples of inline elements


    (by default)
    Generic span tag: <span></span> Active hyperlinks: <a href=></a> Emphasis & Strong: <em></em>, <strong></strong>

    floats
    Using CSS, you can tell a block element to float to the left or to the right. Causing other elements to wrap around it.

    Floated elements will be placed to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

    floats (contd)
    This technique allows you to place block elements beside one another, or directly across on the other side of their container.

    floats (again contd)


    When using floats, it is important to remember that the elements that come after your floating boxes will always try and wrap around it. Additionally, its container will not properly wrap around your boxes as you would expect. To avoid this, you need to use a clearing technique.

    intro to the box model


    The box model describes how modern web browsers apply padding, margin, border, width & height

    Potrebbero piacerti anche