Learn HTML with Examples

Outline

  1. What is HTML?
  2. History of HTML
  3. How HTML works: Introduction to HTML
  4. HTML text editors
  5. Headings
  6. Paragraphs
  7. Text formatin
  8. Div
  9. Header
  10. Aside
  11. footer
  12. Intermediate html tags [tutorial]  
  13. Ordered list
  14. Unordered list
  15. Code
  16. Pre
  17. Forms
  18. Html input
  19. Text Inputs
  20. Radio input
  21. Submit button
  22. Blockquotes
  23. Video
  24. Audio
  25. Embed
  26. Canvas

What is html?

HTML is the short form for Hyper Text Markup Language. It helps us to display text, links, pictures, sounds and videos correctly on a webpage. Every time you visit a website through you should know that HTML is involved.

History of html

HTML was created by Tim Berners-Lee to share documents across the internet. It has evolved. You can now be able to share images, videos, and even play games on the internet.

How HTML works: Introduction to HTML.

HTML is used to describe the appearance of a document to be displayed by a internet browser.

HTML documents are normal text documents but with ‘.html‘ file name extension. Normal text files have a ‘.txt‘ file name extension.

When the HTML file is viewed on a browser, the browser interprets the HTML code is but does not display the html code itself.

To view the html code itself, you can right click on the webpage and click on view source.

To edit the HTML, you need to use a text editor.

HTML Text Editors

HTML text editors allow you to create and edit HTML files. There are many text editors you can use. Some of them are:

      1. Sublime text editor of my choice. Their upgrade notification might annoy you.
      2. Notepad++ (for windows only).
      3. Atom (for windows and Ubuntu).
      4. Visual Studio Code (for windows and Ubuntu).
  • You can read more about html text editors.

    Html elements

    Html element includes the opening tag, the closing tag and the content between the tags.

    Html tags

    These are tags used to tell the browser the beginning and the end of a HTML element.

    Basic html elements and tags tutorial

    1. Basic html page

    Each HTML page contains a template that is always present in any HTML page. Further more, the tags used in the template help divide your html into meaningful sections.

    Each HTML page usually has the following tags:

    code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>This is a title</title>
    </head>
    <body>
    This is a basic HTML page.
    </body>
    </html>

    Result:

    This is a basic HTML page.

    Anything that you want to be displayed on the HTML page is added between the body tags.

    <iframe width=”500″  height=”300″ src=”https://scrimba.com/p/pZaVfV/cPydyur.embed”> </iframe>

    HTML Text Tags

    1. Headings

    There are 6 type of heading with h1 being used as the title of the post or article for SEO purposes.

    The rest can be used for headings and sub headings.

    <h1>H1 Heading1</h1>
    <h2>H2 Heading2</h2>
    <h3>H3 Heading3</h3>
    <h4>H4 Heading4</h4>
    <h5>H4 Heading5</h5>
    <h6>H6 Heading6</h6>

    H1 Heading1

    H2 Heading2

    H3 Heading3

    H4 Heading4

    H4 Heading5
    H6 Heading6

     

    2. Paragraphs

    This is used to display the normal text in paragraphs like the normal paragraph.

    <p>This is a paragraph.</p>
    <p>This is a second paragraph.</p>

    This is a paragraph.

    This is a second paragraph.

    3. Line Break

    The line break tag
    breaks a line of text wherever it is inserted.

    The line break will be here
    , and not here on a full line of text.

    The line break will be here
    , and not here on a full line of text.

    4. Bold & Strong

    Both turns the text into bold but strong is concidered to have more meaning to search engines.

    Bolded text

    5. Italic & Emphasized

    Both turns the text into italics but strong is concidered to have more meaning to search engines.

    Italized text

    Emphasised text

    6. Underlined

    Use this carefully so that the users don’t confuse them with links.

    Underlined text

    7. Ordered Lists

    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ol>
        1. Item 1
        2. Item 2
        3. Item 3

    8. Unordered Lists

    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
        • Item 1
        • Item 2
        • Item 3
    1. Superscript
    The word <sup>tags</sup> is superscript.
    The word tags is superscript.
    1. Subscript
    The word <sup>tags</sup> is a subscript.
    The word tags is a subscript.
    1. Horizontal Line

    Create a line that breaks the text.


    1. Marked or Highlighted Text

    2. Deleted (Cross-Through) Text

    tags.

    1. Short & Long Quotations
    All of this text will be in a blockquote like the rest of the examples.

    I’m quoting this story.

    1. Italics

    The dog ate my homework is a commonly used lie.

    1. Images

    <img src="https://devpractical.com/public/03/pet-dogs.jpg" alt="image of a two cute dogs">

    image of a two cute dogs

    Links help you navigate from one page to the next web page or a different website.

    The tag used to make links are the <a href=”URL”></a> tags.

    The URL is the target, which page or website you want to go to.

    Relative path

    code:

    <a href=”/projects”>this is a relative link</a>

    this is a relative link

    Absolute path

    code:

    <a href=”https://devpractical.com/projects”>this is an absolute link</a>

    Result:

    this is an absolute link

    Html comment tag

    Html comment tags are used to add a comment in a html document. Anything inside the comment tag is not rendered on the browser but can be seen if you check the html source code.

    code:

    <!– This is a comment that will not be visible –>

    Result:

    Html structure tags & elements

    Div

    <div>

    </div>

    Header

      <header></header>
    

    Aside

      <aside></aside>

    footer

    <footer>

    </footer>

    Intermediate html tags

    Code

      <code></code>
    

    Pre

      <pre></pre>
    

    Forms

    <form>
    <input type="">
    </form>

    Html input types

    Text Inputs

    <form action="contacts.php">
    <input type="text" name="firstname" placeholder="First Name">
    </form>

    Radio input

    <form action="contacts.php">
    <input type="radio" name="firstname" placeholder="First Name">
    <input type="radio" name="firstname" placeholder="First Name">
    </form>

    Submit button

    <form action="contacts.php">
    <input type="submit" value="Submit">
    </form>

    OR

    <form action="contacts.php">
    <button type="submit">Submit</button>
    </form>

    You can read an in-depth article on HTML forms that I wrote.

    QUOTES

    Inline quotes

    <p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>

    Blockquotes

    <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
    </blockquote>
    <cite>– Aldous Huxley, Brave New World</cite>

    Video

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    Audio

    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio

    Embed

    <iframe width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"
    >

    </iframe>
     

    Canvas

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas>