1. What is HTML?
  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages
  1. HTML Tags
  •  HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags
  1. HTML Documents = Web Pages
  • The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
  1. Editing HTML
  • HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.
  • However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.
  1. Create Your Own Test Web
  • If you want to create a test page on your own computer, just copy the 3 files below to your desktop.

(Right click on each link, and select "save target as" or "save link as" htm or html)


HTML Basic

  1. Heading (From H1 to H6, the biggest is H1 and the smallest is H6)
  2. Paragraphs (<p>)
  3. Links (<a>)
  4. Images (<img src="w3schools.jpg" width="104" height="142" />)

HTML Element Syntax

  • An HTML element starts with a start tag/opening tag
  • An HTML element ends with an end tag/closing tag
  • The element content is everything between the start and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes

HTML Attributes

  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name="value"


    • Id, Class, Title, style

HTML Lines

The <hr /> tag creates a horizontal line in an HTML page.

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

<!-- This is a comment -->

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

Styling HTML with CSS

CSS can be added to HTML in the following ways:

  • in Cascading Style Sheet files (CSS files)
  • in the <style> element in the HTML head section
  • in the style attribute in single HTML elements

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute

It has attributes like (href, target, name, class, title)

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag. 

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

It has attributes like (alt, title, width, height, hspace, vspace)

Single image can include many links on it, each area on it has special links

It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list



- black hot drink


- white cold drink

HTML Forms

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

HTML Forms - The Input Element

The most important form element is the input element.

The input element is used to select user information.

An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

How?  It's the difference between: 

Let's eat grandpa!

Let's eat, grandpa!

Description: grammar-saves-lives.jpg

Using the right punctuation marks (and grammar in general) is vital and helps convey messages clearly avoiding misunderstandings and confusions.

For spoken communications, how you say it and the tone that you use in saying it helps expressing what you really mean, but in written communication, you can just go on reading a whole paragraph without completely understanding it unless there are punctuation marks that set the tone of it, clearly differentiate between questions and sentences in any written dialogue, and eliminates ambiguity.

Here are some of the most commonly used (most important) punctuation marks, and when and how to use them:

The Apostrophe ('):

  • Usage: in place of omitted letters (e.g. do not ==> don't), or to express a possessive case (e.g. Sandy's dog).
  • Format: No spaces before or after.

The Comma (,):

  • Usage: to join a list of items in one sentence (My favourite sandwiches are chicken, bacon and ham and cheese.), or to separate clauses (as well as before the conjunctions: for, and, nor, but, or, yet, so), between adjectives, in dates, in numbers. Commas are used where you would pause during talking.
  • Format: Space is added after the comma, but not before (xxx, xxxxxx). The comma is followed by lower case word, unless it's a proper noun or acronym.

The Semi-colon (;):

  • Usage: used for longer and stronger breaks or pauses than a comma. To list complicated, longer lists (The people present were Jamie, who came from New Zealand; John, the milkman's son; and George, a gaunt kind of man.). To join two related independent clauses (My wife would like tea; I would prefer coffee.).
  • Format: Space is added after the semi-colon, but not before (xxx; xxxxxx). The semi-colon is followed by lower case word, unless it's a proper noun or acronym.

The Colon (:):

  • Usage: before a list of items, before a description, before a definition, in ratios, hours and minutes, and before explanation.
  • Format: Space is added after the colon, but not before. The colon is followed by lower case word, unless it's a proper noun or acronym.

To Be Continued ...

What you see above is a photograph of the first digital camera ever built. It was created in December 1975 by an engineer at Eastman Kodak named Steve Sasson, now regarded as the inventor of the digital camera. In a Kodak blog post written in 2007, Sasson explains how it was constructed:

“It had a lens that we took from a used parts bin from the Super 8 movie camera production line downstairs from our little lab on the second floor in Building 4. On the side of our portable contraption, we shoehorned in a portable digital cassette instrumentation recorder. Add to that 16 nickel cadmium batteries, a highly temperamental new type of CCD imaging area array, an a/d converter implementation stolen from a digital voltmeter application, several dozen digital and analog circuits all wired together on approximately half a dozen circuit boards, and you have our interpretation of what a portable all electronic still camera might look like.”


Steve Sasson

Here are some specs: The 8 pound camera recorded 0.01 megapixel black and white photos to a cassette tape. The first photograph took 23 seconds to create.

And at that time there were no computer screens to show such a picture so to play back images, data was read from the tape and then displayed on a television set.

About Steve Sasson:

Steven J. Sasson (born July 4, 1950 in Brooklyn, New York). Sasson is a 1972 (BS) and 1973 (MS) graduate of Rensselaer Polytechnic Institute in electrical engineering, and while working at Eastman Kodak, he invented the first digital camera ever.

On November 17, 2009, U.S. President Barack Obama awarded Sasson the National Medal of Technology and Innovation at a ceremony in the East Room of the White House. This is the highest honor awarded by the US government to scientists, engineers, and inventors. On 6 September 2012, The Royal Photographic Society awarded Sasson its Progress medal and Honorary Fellowship in recognition of any invention, research, publication or other contribution which has resulted in an important advance in the scientific or technological development of photography or imaging in the widest sense.