Complete web developer course

Notes of Adriano Kubler

The structure of a web page

Remember the foundamentals tags of every page:

  1. <!DOCTYPE html>
  2. <html>
  3.          <head>
  4.                  <title>
  5.                  </title>
  6.        </head>
  7.     <body>
  8. page contents
  9.     </body>
  10. </html>

Most common tags:
<h1>headers, <p> paragraph, <br> line breaks

Formatting text:
<strong> for bold text, <em> for italic text, <ins> for underlined text, <sup> for superscript, <sub> for subscript, <del> for deleted text and <hr> for the nice horizontal line beneath this text


Lists

Unordered lists tag :

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

Ordered lists tag :

<ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ol>

Attributes: <ol start="5"> to start from number 5, <ol reversed> for opposite order, and <ol type="A"> for the ordering type charachter


Images

Code to insert images: <img src="image.jpg" width="100" height="100" align="center">

the align attribute is not correct in HTML5 !

src could be also a link to an image of an external site for example: <src="https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Marge_Simpson_in_A_proposito_di_Margie.png/260px-Marge_Simpson_in_A_proposito_di_Margie.png">

is an image "taken" from wikipedia site.

Forms

Tag: input

          <input type="checkbox" checked> Results:
          <input type="radio" name="age"> Results:
          <input type="radio" name="age"> Results:
          <input type="submit" value="Click me"> Results:

Tag: select

<select>
       <option>text</option>
       <option selected>text</option> note the "selected" attribute wich makes the Ice Cream the visible text in the selection box
       <option>text</option>
<select>

</form>

And the result of the above code is:


Tables

Name Colour
Mike Green
Kirsten Orange
Sandro Blue
Gerry Purple

So the structure of the above Table is:

<table>
       <thead>
             <tr>
                   <th>text</th>
                   <th>text</th>
             </tr>
       </thead>
       <tbody>
             <tr>
                   <th>text</th>
                   <th>text</th>
             </tr>
       </tbody>

Links

Keywords: absolute links - Relative links - Anchor links

Click Here absolute link with "top" id reference CODE: <p id="top"><a href="https://www.google.com">text</a></p>

Link in image CODE: <p><a href="https://www.wikipedia.org"><img src="img/Homer.png" height="100px"></a>text</p>

Reletive link CODE: <p><a href="helloworld.html">text</a></p>

Anchor link thirdhomer CODE: <p id="thirdhomer"><a href= etc. etc.

Back to top CODE: <p><a href="#top">text</a></p>

go to third homerCODE: <p><a href="#thirdhomer">text</a></p>


Entities

Keywords: symbols - tags - special characters

&lt;&gt; to write special characters as < and >, for example: <a href="https://www.w3schools.com/html/html_symbols.asp"> as simple text and not html code. Here the LINK for others symbols.


IFrames

Keywords: symbols - tags - special characters

Useful to embed media in our page, or to have a translation

CODE:<p> <iframe src="http://..."></iframe></p> to incorporate a site as an absolute link

CODE:<p> <iframe src="page.html"></iframe></p> to incorporate another page of my site

added frameborder="x" and allowfullscreen attributes