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


Unordered lists tag :


Ordered lists tag :


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


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="">

is an image "taken" from wikipedia site.


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

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


And the result of the above code is:


Name Colour
Mike Green
Kirsten Orange
Sandro Blue
Gerry Purple

So the structure of the above Table is:



Keywords: absolute links - Relative links - Anchor links

Click Here absolute link with "top" id reference CODE: <p id="top"><a href="">text</a></p>

Link in image CODE: <p><a href=""><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>


Keywords: symbols - tags - special characters

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


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