Scribd Logo
Upload

Welcome to Scribd!

  • Digital Content Management HTML

    Uploaded by

    eval
    7 views17 pages
    This document provides information on HTML tags and structure. It discusses: - HTML is the markup language used to structure web page content and define elements like paragraphs, headings, lists, links, and images. - HTML documents have a head and body. The head contains metadata and the body contains visible content. - Common tags include paragraphs <p>, headings <h1>-<h6>, lists <ul>/<ol>, links <a>, bold <b>, italics <i>, images <img>, and divs <div> to group content. - Tags have opening and closing syntax like <p>content</p> and are nested in a logical, semantic structure to organize information on

    Original Description:

    Original Title

    HTML

    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
    This document provides information on HTML tags and structure. It discusses: - HTML is the markup language used to structure web page content and define elements like paragraphs, headings, lists, links, and images. - HTML documents have a head and body. The head contains metadata and the body contains visible content. - Common tags include paragraphs <p>, headings <h1>-<h6>, lists <ul>/<ol>, links <a>, bold <b>, italics <i>, images <img>, and divs <div> to group content. - Tags have opening and closing syntax like <p>content</p> and are nested in a logical, semantic structure to organize information on

    Copyright:

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

    Digital Content Management HTML

    Uploaded by

    eval
    This document provides information on HTML tags and structure. It discusses: - HTML is the markup language used to structure web page content and define elements like paragraphs, headings, lists, links, and images. - HTML documents have a head and body. The head contains metadata and the body contains visible content. - Common tags include paragraphs <p>, headings <h1>-<h6>, lists <ul>/<ol>, links <a>, bold <b>, italics <i>, images <img>, and divs <div> to group content. - Tags have opening and closing syntax like <p>content</p> and are nested in a logical, semantic structure to organize information on

    Copyright:

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

    Digital content management

    HTML
    WEBSITE BASIC STRUCTURE

    HTML Document (Markup language for web pages)


    - Content of the website.
    - Information structure
    HTML (INFORMATION STRUCTURE)

    HTML LANGUAGE IS NOT A PROGRAMMING


    LANGUAGE IS A MARKUP LANGUAGE!!

    (another markup languages XHTML, XML)

    - Organizes info in a formal, logical and


    coherent structure: Introduction, body and
    conclusion
    - Defines the use of the elements and
    relationships
    - Contains the content + Marking elements
    - Divided into blocks <div> to establish a
    logical division and coherent structure
    HTML (INFORMATION STRUCTURE)

    Syntactic Semantic
    <h1> </h1>
    <body> </body>
    <h2> </h2>
    <head> </head>
    <h3> </h3>
    <div> </div>
    <p> </p>

    <a> </a>
    Opening and closing tags
    <ul> </ul>

    <ol> </ol>
    HTML (INFORMATION STRUCTURE)

    STRUCTURE OF HTML DOCUMENT

    Type of document

    Definition of the document

    Head of the document

    Body of the document


    Html tags - Marking text
    Textual content is included in:
    - Paragraphs
    - Headlines
    - Lists
    - We will nest the content within sections <div>
    Tags - Paragraph
    - <p></p> Wrap the entire paragraph
    - It should not be used for line breaks. For that we have
    <br> tag

    Example:
    <p id=“parrafo” class=“normal”> Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed nec tortor eu diam congue
    molestie.</p>

    <p id=“parrafo” class=“normal”>


    Vivamus at lorem et tortor posuere imperdiet volutpat eget metus.
    </p>
    Tags - Headlines
    - <h1> <h2> <h3> <h4> <h5> <h6>
    - Wrap the header text
    - Must be nested in order
    - Need to be closed
    - </h1> </h2> </h3> </h4> </h5> </h6>

    Example:
    <h1>Super Heroes</h1>

    <h2>Mutants</h2>

    <h3>Charles Xavier</h3>

    <h3>Iceman</h3>

    <h2>Aliens</h2>

    <h3>Silver Surfer</h3>

    <h3>Superman</h3>
    Tags - Lists
    - <ul><ol>
    - Marks the beginning and end of a list of terms
    - A list defined by <ul> shows a bullet point at the
    beginning of each item
    - An ordered list <ol> shows a number following an order
    - Each item in the list must be marked with <li> tag

    Example:
    <h1>Super Heroes</h1>

    <ol>

    <li>Charles Xavier</li>

    <li>Cyclop</li>

    <li>Wolverine</li>

    </ol>
    Tags - Bold
    - <b>
    - Marks the word or expression that we want to emphasize
    Example:
    <b> hairy mutants</b>

    Tags - Strong
    - Strong emphasis
    - <strong>
    - Marks the word or expression that we want to emphasize

    Example:
    <strong> very hairy mutants</strong>
    Tags - Italics
    - <i>
    - Marks the word or expression that we want to be
    displayed in italics
    Example:
    <i> hairy mutants</i>

    Tags - Emphasis
    - Strong emphasis
    - <em>
    - Marks the word or expression that we want to be
    displayed in italics

    Example:
    <em> very hairy mutants</em>
    Tags - Span
    - <span>
    - Used to group in-line elements
    - We can use it to change the style of the selected
    expression

    Example:
    <p id=“parrafo” class=“normal”
    <span style=“color:red;”>Lorem </span> ipsum dolor sit
    amet, consectetur adipiscing elit. <span
    style=“text-decorarion:underline;”> Sed nec tortor eu diam
    congue molestie. </span>
    </p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.


    Sed nec tortor eu diam congue molestie.
    Tags - Anchor
    - <a> (html tag to mark a link)
    - Marks the text we want to link or a point in an html
    document
    - A link can point to a section within the same page or a
    different website. Can link any kind of document

    Example:
    <a href="http://desdebellaterra.com"> Cool websites</a>
    <a href="./any-page.html"> Convidat </a>
    Tags - Anchor
    <a href=“#paragraph2”>Second</a>
    <a href=“#paragraph3”>Third</a>
    <p>Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Sed nec tortor eu diam congue
    molestie.</p>
    <a name=“paragraph2”>
    <p>Vivamus at lorem et tortor posuere imperdiet
    volutpat eget metus.</p>
    <a name=“paragraph3”>
    <p>Sed ultrices bibendum urna, quis suscipit nisl
    tincidunt nec. Nunc vitae orci quam.</p>
    Tags - Images
    - <img> </img>
    - HTML can be used to embed images.
    - No all image format are displayed by browsers.
    Recommended formats: JPG, PNG, GIF, SVG.
    - Can be hosted in our served or anywhere.
    - Adding an alternative text attribute is considered a
    good practice.

    Example:
    <img src=“http://www.uab.cat/imatge.jpg” alt=“UAB”>
    HTML - TAGS

    To correctly tag:
    - The rules and grammar dictated by the W3C must be
    followed
    - Apply logic
    - http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/
    EXERCISE: THE KILLER I

    - Go to freecodecamp.org and complete


    “Introduction to Basic HTML and HMTL5”
    Interactive lessons
    - Set up your Privacy setting from Private to
    Public
    - Submit your public portfolio url.
    https://forms.gle/y4LvGyHPnLzBvsjT9

    You might also like