December 7, 2021

HTML Study Notes – Part 2

19. <img>

<img src=”L920.jpg” alt=”Lumia 920″ width=”150″ height=”300″>

20. Float <img>


<img src=”img1.gif” style=”float:left“> A paragraph with an image. The image will float to the left of this text.



<img src=”img1.gif” style=”float:right“> A paragraph with an image. The image will float to the right of this text.


21. <img> maps

<img src=”categories.gif” width=”145″ height=”126″ alt=”categories” usemap=”#categorymap”>

<map name=”categorymap”>
<area shape=”rect” coords=”0,0,10,122″ alt=”News” href=”news.htm”>
<area shape=”circle” coords=”220,74,33″ alt=”reviews” href=”reviews.htm”>
<area shape=”circle” coords=”120,50,8″ alt=”devs” href=”devs.htm”>

22. <table>

<table border=”1″>
<th>Header 1</th>
<th>Header 2</th>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>

23. gouping and style table elements

<!DOCTYPE html>
<style type=”text/css”>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
<table border=”1″>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p>


24. Lists

Unordered list:
Ordered Lists:
Definition Lists:
<dd>- black hot drink</dd>
<dd>- white cold drink</dd>

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.



HTML Study Notes – Part 1

Over the years, I have developed a habit of taking note while I am studying. Especially before major test. I usually go through a whole bunch of materials that are relevant to the topic, distill everything important to a note. The result is small list of things with proper details. The art is this: the note is not too detailed to bloat the content, but properly detailed to be just enough for the test. After this, I only go through the note a couple of time before the test. I am sharing some of them here in the whish this would help with your test, interview or whatever it applies.

1. A Backbone HTML Document

    <!DOCTYPE html>
    <title>my home page</title>
    Hello html!

2. New to HTML5

<canvas> <video> <audio> local storage
<article>, <footer>, <header>, <nav>, <section>
new form controls: calendar, date, time, email, url, search

3. Element

A web page is a collection of elements. An element is anything between opening tag and closing tag. Elements can nest.

4. HTML Time Table

html  – 1991
html+  – 1993
html 2.0 – 1995
html 3.2 – 1997
html 4.01 – 1999
html 5 – 2012

5.(no title)
<h1> ~ <h6>
<a href=””>my website</a>
<img src=”mylogo.jpg” width=”100″, height=”200″/>

6. (not title)
It is suggested to use lower case (tags)

7. Attribute with quotes
name=’my “dumb” name’

8. Lines

<p>this is a paragraph</p>


<!–this is a comment–>

10. Line break


11. <strong> or <b>

<strong> — means important, usually rendered as <b>, but doesn’t have to.
<em> — means emphasis, usually rendered as <i>, but doesn’t have to.

12. Preformatted Text


This is 
preformatted text.
It preserves    both spaces
and line breaks.


13. Programming Related Tags
<code>Computer code</code>
<kbd>Keyboard input</kbd>

<samp>Sample text</samp><var>Computer variable</var>


14. Text Direction:

<bdo dir=”rtl”>
Here is some Hebrew text

15. Block Quote and Inline Quote


this is a test of block quote;

<q>Build a future where people live in harmony with nature.</q>  <!– inline –>

16. Deleted/Inserted Text

<p>Update: <del>deleted this</del> <ins>inserted this</ins>!</p>

17. HTML Links – The target Attribute

<a href=”” target=”_blank”>webcome to mywebsite!</a>

–new tab or new window

html links for bookmarks:

<a id=”phone”>Smartphones</a>

<a href=”#phone”>Go to smartphone</a>

or from another page:

<a href=>Go to smartphone</a>

18. <head>

<title>Title of the document</title>

The <base> tag specifies a default address or a default target for all links on a page:


<base href=””><base target=”_blank”>


The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets:


<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>


<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Define a description of your web page:

<meta name=”description” content=”WindowsComments HTML Study Notes”>

Define the author of a page:

<meta name=”author” content=”Bill Gates”>

Refresh document every 60 seconds:

<meta http-equiv=”refresh” content=”60″>

Coming up: HTML Study Notes – Part 2