September 20, 2018

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