HTML Basics

HTML Basics

1. Structure

   • <meta>metadata (document title, character set, styles, scripts..)
   • <br> line break
     • <pre></pre> preformatted text

2. Basics

   • Headings
     • <h1></h1>
   • Paragraphs
     • <p></p>
   • Links
     • <a href="link">text</a>
     • target
       • _blank - new window or tab
       • _self - same window/tab as it was clicked (default)
       • _parent - in the parent frame
       • _top - in the full body of the window
   • Images
     • <img src="name.jpg" alt="text" width="num" height="num">
     • Image maps
       • <img usemap="#mapname"> <map name="workmap"> <area shape="something" coords="x,x,x" alt="x" href="x"> </map>
     • background
       • <body style="background-image:url('x.jpg');">
   • Buttons
     • <button></button>
   • Lists
     • Unorderd
       • <ul><li></li> </ul>
     • Orderd
       • <ol><li></li> </ol>
   • Comments
     • <!--text -->

3. Attributes

   • href
   • src
   • width
   • height
   • alt
   • style
     • <tagname style="property:value;">
       • background-color
       • color
       • font-family
       • font-size
       • text-align
   • lang (<html lang>)
   • title (<p title>
   • text formatting
     • <b> Bold text
     • <strong> Important text
     • <i> Italic text
     • <em> - Emphasized text
     • <mark> - Marked text
     • <small> Small text
     • <del> Deleted text
     • <ins> Inserted text
     • <sub> Subscript text
     • <sup> Superscript text
     • Quotation and citation
       • short quote <p>text<q>text</q></p>
       • <blockquote> section that is quoted from another source
       • <abbr title="text">TXT</abbr>
       • <address>
       • <cite> title of a work

4. Colors

   • Names
     • blue, green,....
   • RGB
     • style="background-color:rgb(255, 99, 71);"
   • HEX
     • style="background-color:#ff0000;"
   • HSL
     • style="background-color:hsl(9, 100%, 64%);"
   • RGBA
     • original+opacity (alpha)
   • HSLA
   • Background
     • style="background-color:____;">
   • Text
     • style="color:_____;"
   • Border
     • style="border:___px solid _____;

5. Tables

   • <table> define a table
   • <tr> row
   • <th> heading
   • <td> data
   • colspan, rowspan
   • <caption>

6. class

   • class name can be applied to multiple elements

7. id

   • one unique id applied to one specific element

8. iframe

   • <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

9. JavaScript

   • Content change
     • <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>
   • Sttyle change
     • <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; } </script>
   • <noscript>
     • alternate content for users without client-side scripts support

10. <head> elements

    • <title>
    • <style>
    • <link rel="stylesheet" href="mystyle.css">
    • <meta charset="UTF-8">+desc+content"author
    • viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • <script>
    • <base href="https://www.w3schools.com/images/" target="_blank">

Imagens e arquivos do mapa