HTML Tutorials

Getting Started

• HTML - Hypertext Markup Language. It is a language used to create web pages
• Webpage - A webpage is a HTML document. It is aplain text file with *.htm or *.html file extension
• Website - a website is a colelction of webpages that are group in a folder in a file system
• Homepage - The first page of a website usually names as default.html
• There are 3 ways to create Webpages:
  1. use a text editor and a browser (Notepad and Chrome browser)
  2. use a translator (MS Word)
  3. use a we authoring tool (MS Expression Web or Adobe Dreamweaver)
• Download MS Expression Web 4

HTML Versions and Declaractions

• There are 3 widely used HTML versions, that are: HTML 4.01, XHTML 1.0 and HTML 5.
• In MS Expression Web, you can select the default document type declaration using following steps:
  1. Click the [Tools] menu.
  2. Select [Page Editor Options].
  3. Click on the [Authoring] tab.
  4. Choose the schema from the [Document Type Declaration].
• Here are examples: HTML 4.01 Document (1999) | XHTML 1.0 Document (2000) | HTML 5 Document (2014)

Character Sets and Text Formatting

• Digits, alphabets, punctuations can be represented in HTML Documents
• Some characters are used as part of document structure. You can't use it directly in text. Instead we use HTML entities for these characters and special characters.
• Example: 10> 2, 2 < 10, Tom & Jerry, " APU "
• Example: © , ® , ¥ ; α ¼
• Example using hexa: ✉ ⏳, 🐇, 🧑 , 🧑 🙀,😀
• Example using Dec: 😔, 🙋, 🙊, 😀
• Empty spces and line are meaningless in HTML. All empty spaces and lines will be colapsed into a single space. see Example 1 below
• Use &   for empty space, use < br/ > for line break (terminate a line and insert a new line). See Example 2 below
• Use < pre> for pre-formatted text. See Example 3 below
• User < p> for paragraph. See Example 4 below

1 2  3   4    5     6      7       8        9         10
Single Line

Double Line


Triple Line


Quadruple Line

This is paragraph 1.ksdjhfghkafgjksgjksgsjkgsjkgbsjkbgsjkasjkbvssjkbvasfkb

This is paragprah 2jksdfhjlasdfjlajasfbgsjbgsfjkbgsfjkbgsjbbbjdasklnfdghdfghdfjj fgdhdghfgjjghjgjghjghjgjgjgh sdfsdgsf

This is 3rd paragraph

Font Tags

Basic Tables

• Table tags include: <table> <th> <tr> and <td>
• Common attributes are border, cellspacing, cellpadding and width
• Relative Size table scales with the browser windows size. the width of the table is defined using the percentage (%)
• Absolute Size table scales are fixed and does not scale with browser size window. the width of the table is defined by using pixel value are just a number

Images and Colors

• Browsers support both raster and vector graphics.
• There are 3 raster image formats supported which are GIF, JPG and PNG.
• GIF supports 256 (8-bit) colors only, animation and transparency.
• JPG supports 16.7 (24-bit) million colors, but not supporting animation and transparency.
• PNG supports 16.7 (24-bit) million colors and transparency and animation in new APNG.
• HTML 5 added support for scalable vector graphic (SVG)
• Use "background" attribute in body tag to add a background image.
• Browsers support colors using names, RGB color values and hex values.

HTML Forms

• Forms is the most common input method for a website. Examples: registration form, login form, feedback form and others
• There are various input field use to create a form such as textbox, checkbox, radio button, drop down list and others

Cascading Style Sheets (CSS)

• You can control appearance of a website and Web pages using style sheets
• A style sheets is a document or statements that contain instructions that define how to display HTML elements in a browser. These instructions are called STYLES
• There are 3 types of stylesheets: Inline, Embedded (Internal) and External

HTML Sections

• A HTML section is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.
• Web developers use sections to group together HTML elements and apply CSS styles to many elements at once.
• There are 2 types of sections in HTML: <div> and <span>.
• <div> is a block element.
• tag which defines a division or section in an HTML document
• It is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript
• Easily styled by using the class or id attribute
• Any sort of content can be put inside this tag.
• <span> is a inline element.
• A <span> elements which is used to color a part of a text
• It is much like the <div> but <div> is a block-level elements and <span> is inline level elements
• Example using <span >:

  This is an inline span Hello World element inside a paragraph.

• Example using <div>:
  Hello World
• There are two types of HTML elements: Inline and block.
• <h1>, <p>, <hr>, ... are block elements, they always start at new line.
• <b>, <i>, <a>, ... are inline elements, they always in the line. You need to use <br/> to terminate the line.

Reference