Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML Introduction: Learn HTML Basics & Key Elements

    Caricato da

    Bogdan Mihut
    12 visualizzazioni16 pagine
    vghj knml

    Titolo originale

    gyvbhjnmk,

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    vghj knml

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni16 pagine

    HTML Introduction: Learn HTML Basics & Key Elements

    Caricato da

    Bogdan Mihut
    vghj knml

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 16

    Introduction to HTML

    HTML: HyperText Markup Language

    • HTML documents are simply text documents


    with a specific form
    • Documents comprised of content and markup tags
    • Content: actual information being conveyed
    • The markup tags tell the Web browser how to display
    the page
    • An HTML file must have an htm or html file extension
    • An HTML file can be created using a simple text editor
    HTML Document Structure

    • Entire document enclosed within <html> and


    </html> tags
    • Two subparts:
    • Head

    • Enclosed within <head> and </head>


    • Within the head, more tags can be used to specify title
    of the page, meta-information, etc.
    • Body

    • Enclosed within <body> and </body>


    • Within the body, content is to be displayed
    • Other tags can be embedded in the body
    Our First Example

    The backbone of a webpage:

    <html>
    <head>
    <title>Title of page</title>
    </head>
    <body>
    This is my first homepage. <b>This text is bold</b>
    </body>
    </html>
    HTML Tags

    • HTML tags are used to mark-up HTML


    elements
    • Surrounded by angle brackets < and >
    • HTML tags normally come in pairs, like <tagname>
    (start tag) and </tagname> (end tag)
    • The text between the start and end tags is the
    element content
    • Not case-sensitive
    • Follow the latest web standards:

    • Use lowercase tags


    Tag Attributes

    • Tags can have attributes that provide


    additional information to an HTML element
    • Attributes always come in name/value pairs like:
    name=“value”
    • Attributes are always specified in the start tag
    • Attribute values should always be enclosed in quotes.
    Double quotes are most common.
    • Also case-insensitive: however, lowercase is
    recommended
    • <tagname a1=“v1” a2=“v2”></tagname>
    • For example, <table border=“0”> is a start tag that
    defines a table that has no borders
    We’ll Study…

    • HTML Basics:
    • HTML Headings
    • HTML Paragraphs
    • HTML Images
    • HTML Links
    • HTML Lists
    • HTML Forms
    • HTML Headings

    Heading elements allow you to specify that certain parts of your content
    are headings — or subheadings. In the same way that a book has the
    main title, chapter titles and subtitles, an HTML document can too. HTML
    contains 6 heading levels, <h1>–<h6>, although you'll commonly only use
    3 to 4 at most:

    <h1>My main title</h1>


    <h2>My top level heading</h2>
    <h3>My subheading</h3>
    <h4>My sub-subheading</h4>
    HTML Paragraphs

    • Another text element, <p> elements are for


    containing paragraphs of text; you'll use these
    frequently when marking up regular text
    content:

    <p>This is a single paragraph</p>


    HTML Images

    <img src="images/firefox-icon.png" alt="My test


    image">

    • Using this tag, we embed an image into our


    page in the position it appears. It does this via
    the src (source) attribute, which contains the
    path to our image file. We have also included
    an alt (alternative) attribute. In this attribute,
    you specify descriptive text for users who
    cannot see the image.
    HTML Links

    • Links are very important — they are what


    makes the web a web! To add a link, we need
    to use a simple element — <a> — "a" being
    the short form for “anchor".

    <a href=“https://www.mozilla.org/en-
    HTML Lists

    • A lot of the web's content is lists and HTML has


    special elements for these. Marking up lists
    always consist of at least 2 elements. The
    most common list types are ordered and
    unordered lists:

    <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    </ul>

    <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    HTML Forms

    HTML Forms are one of the main points of interaction between a user and
    a web site or application. They allow users to send data to the web site.
    Most of the time that data is sent to the web server

    An HTML Form is made of one or more widgets. Those widgets can be text
    fields (single line or multiline), select boxes, buttons, checkboxes, or radio
    buttons. Most of the time those widgets are paired with a label that
    describes their purpose
    HTML Forms - example

    <form action="/my-handling-form-page"
    method="post">
    <div>
    <label for="name">Name:</label>
    <input type="text" id="name"
    name="user_name" />
    <div>
    <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail"
    name="user_email" />
    </div>
    <div>
    HTML5

    Features & new tags


    HTML5 Tags

    <article> <nav>
    - Defines an article in a document - Defines navigation links
    <aside> <section>
    - Defines content aside from the - Defines a section in a
    page content document
    <details> <summary>
    - Defines additional details that the
    - Defines a visible heading
    user can view or hide
    <dialog> for a <details> element
    - Defines a dialog box or window <time>
    <footer> - Defines a date/time
    - Defines a footer for a document <datalist>
    or section - Specifies a list of pre-
    <header> defined options for input
    - Defines a header for a document controls
    or section <audio>
    <main> - Defines sound content
    - Defines the main content of a <video>
    document - Defines video or movie

    Potrebbero piacerti anche