Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    HTML5 Text Formatting

    Uploaded by

    mani weber

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    HTML5 Text Formatting

    Uploaded by

    mani weber
    7 views32 pages

    Original Title

    2. HTML5 Text Formatting

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views32 pages

    HTML5 Text Formatting

    Uploaded by

    mani weber

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 32

    HTML

    T E X T FO R M AT T I N G
    Learn at rocket speed
    inarocket.com
    Learn front-end development at rocket speed

    inarocket .com
    Paragraphs
    PARAGRAPHS

    <p>

    inarocket.com - Learn HTML at rocket speed


    PARAGRAPHS

    Editor Browser

    <body> index.html
    <h1>Tim Berners-Lee</h1>
    Tim Berners-Lee
    <p>Sir Timothy John "Tim" Berners- Sir Timothy John "Tim" Berners- Lee is a British
    Lee is a British computer scientist, computer scientist, best known as the inventor of the
    best known as the inventor of the World Wide Web.
    World Wide Web.</p>
    </body>

    inarocket.com - Learn HTML at rocket speed


    Spaces
    SPACES: &nbsp;

    Inserts a single space into your content

    &nbsp;
    The &nbsp; character entity stands for “non breaking space”

    inarocket.com - Learn HTML at rocket speed


    SPACES: &nbsp;

    Editor Browser

    <body> index.html
    <p>Hello&nbsp;&nbsp;&nbsp;world!</p>
    Hello world!
    </body>
    Three spaces

    inarocket.com - Learn HTML at rocket speed


    SPACES: <br>

    Inserts a line break into your content

    <br>
    HTML elements with no content are called empty elements and
    they have no closing tag in HTML5

    inarocket.com - Learn HTML at rocket speed


    SPACES: <br>

    Editor Browser

    <body> index.html
    <p>Sir Timothy John "Tim" Berners-
    Sir Timothy John "Tim" Berners- Lee is a
    Lee is a British computer scientist,
    British computer scientist, Line break
    <br>best known as the inventor of
    best known as the inventor of the World Wide
    the World Wide Web.</p>
    Web.
    </body>

    inarocket.com - Learn HTML at rocket speed


    SPACES: <hr>

    Inserts a horizontal line and


    can be used to separate content

    <hr>
    HTML elements with no content are called empty elements and
    they have no closing tag

    inarocket.com - Learn HTML at rocket speed


    SPACES: <hr>

    Editor Browser

    <body> index.html
    <h1>Tim Berners-Lee</h1>
    Tim Berners-Lee
    <hr>
    <p>Sir Timothy John "Tim" Berners-
    Sir Timothy John "Tim" Berners- Lee is the inventor of
    Lee is the inventor of the the World Wide Web.
    World Wide Web.</p>
    </body>

    inarocket.com - Learn HTML at rocket speed


    Preformatted text
    PREFORMATTED TEXT

    Editor Browser

    <body> index.html
    <pre>Preformatted text is displayed in a
    Performed text is displayed in a
    fixed-width font. It also preserves both fixed-width font, and it preserves both
    spaces and line spaces and line
    breaks.</pre> breaks.
    </body>

    The pre element represents a block of preformatted


    text, in which structure is represented by typographic
    conventions rather than by elements.

    inarocket.com - Learn HTML at rocket speed


    Blockquote
    BLOCKQUOTE

    Editor Browser

    <body> index.html
    <blockquote>What's the worst that could
    What's the worst that could happen? - Tim Ferriss
    happen?
    - <cite><a href=“https://en.wikipedia.org/wiki/
    Tim_Ferriss">Tim Ferriss</a></cite>
    </blockquote>
    </body>

    The blockquote element represents content that is


    quoted from another source, optionally with a citation
    which must be within a footer or cite element.

    inarocket.com - Learn HTML at rocket speed


    Mark
    MARK

    <mark>

    inarocket.com - Learn HTML at rocket speed


    MARK

    Editor Browser

    <body> index.html
    <h1>Tim Berners-Lee</h1>
    Tim Berners-Lee
    <p>Sir Timothy John "Tim" Berners- Sir Timothy John "Tim" Berners- Lee is a British
    Lee is a British computer scientist, computer scientist, best known as the inventor of the
    best known as <mark>the inventor of the World Wide Web.
    World Wide Web</mark>.</p>
    </body>

    Mark element is used to tag content which


    has relevance.

    inarocket.com - Learn HTML at rocket speed


    Lists
    LISTS: UNORDERED

    Editor Browser

    <ul> index.html
    <li>Spielberg</li>
    • Spielberg
    <li>Coppola</li> • Coppola
    <li>Scorsese</li> • Scorsese
    </ul>

    li = list item.

    inarocket.com - Learn HTML at rocket speed


    LISTS: ORDERED

    Editor Browser

    <ol> index.html
    <li>Usain Bolt - Gold</li>
    1. Usain Bolt - Gold
    <li>Yohan Blake - Silver</li>
    2. Yohan Blake - Silver
    <li>Justin Gatlin - Bronze</li> 3. Justin Gatlin - Bronze
    </ol>

    inarocket.com - Learn HTML at rocket speed


    LISTS: NESTED

    Editor Browser

    <ul> index.html
    <li>Red
    • Red
    <ul> • Light
    <li>Light</li> • Dark
    <li>Dark</li> • Green
    </ul> • Blue

    </li>
    <li>Green</li>
    <li>Blue</li>
    </ul>

    inarocket.com - Learn HTML at rocket speed


    LISTS: DESCRIPTION

    Editor Browser

    <dl> index.html
    <dt>W3C</dt>
    W3C
    <dd>Is the main international
    Is the main international standards organization
    standards organization for the World for the World Wide Web.
    Wide Web.</dd> HTML
    <dt>HTML</dt> Is the standard markup language used to create
    <dd>Is the standard markup language web pages.
    used to create web pages.</dd>
    </dl>

    inarocket.com - Learn HTML at rocket speed


    Details
    DETAILS

    Editor Browser

    <details> index.html
    <summary>What is HTML</summary>
    • What is HTML
    <p>Hypertext Markup Language</p>
    Hypertext Markup Language.
    </details> • What is CSS

    <details>
    <summary>What is CSS</summary>
    <p>Cascading Style Sheets.</p>
    </details>

    inarocket.com - Learn HTML at rocket speed


    DETAILS: NESTED

    Editor Browser

    <details> index.html
    <summary>What is HTML</summary>
    • What is HTML
    <p>Hypertext Markup Language</p>
    Hypertext Markup Language.
    <details> HTML5
    <summary>HTML5</summary> Latest HTML recommendation by the W3C.
    <p>Latest HTML recommendation by the
    W3C.</p>
    </details>
    </details>

    inarocket.com - Learn HTML at rocket speed


    Figure
    FIGURE

    Editor Browser

    <body> index.html
    <figure>
    <img src=“armstrong.png” alt="Neil Armstrong
    descending the ladder of the Apollo 11.”>
    <figcaption>Armstrong on the Moon
    </figcaption>
    </figure>
    </body> Armstrong on the Moon

    The figure element represents some flow content,


    optionally with a caption, that is self-contained and is
    typically referenced as a single unit from the main flow
    of the document.
    inarocket.com - Learn HTML at rocket speed
    NOTICE

    This presentation is a work in progress.


    Sorry for the inconvenience.

    inarocket.com - Learn HTML at rocket speed


    More tutorials

    inarocket .com
    HTML
    T E X T FO R M AT T I N G
    Learn at rocket speed
    inarocket.com

    You might also like