November 19, 2018

HTML Study Notes – Part 2

19. <img>

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

20. Float <img>

<p>

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

</p>

<p>

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

</p>

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”>
</map>

22. <table>

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

23. gouping and style table elements

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table border=”1″>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

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

</body>
</html>

24. Lists

Unordered list:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered Lists:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Definition Lists:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

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

25.

 

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>
    <html>
    <head>
    <title>my home page</title>
    </head>
    <body>
    Hello html!
    </body>
    </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=”http://www.mywebsite.com”>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>
<hr>

9. Comments

<!–this is a comment–>

10. Line break

<br>

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

<pre>

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

</pre>

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
</bdo>

15. Block Quote and Inline Quote

cite=”http://www.mywebsite.org/index.html”>

<blockquote
this is a test of block quote;

</blockquote&gt
<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=”http://www.mywebsite.com/” 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=http://www.mywebsite.com/links.htm#phone>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:

<head>

<base href=”http://www.w3schools.com/images/”><base target=”_blank”>

</head>

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

<head>

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

</head>

<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