2. What is HTML?
HTML stands for Hyper Text Markup Language. It
is a computer language devised to allow website
creation. These websites can then be viewed by
anyone else connected to the Internet or in any
browser.
3. Brief History of HTML
Before we enjoy the beauty and comfort of surfing the internet let us have a quick overview
of the language that allows us to scan our FB feeds, post or tweets and upload images of
our food and whereabouts.
• Tim Berners-Lee invents the Web with HTML as its publishing language
in 1989
• In 1991 an Open discussion about HTML across the Internet begins.
• 1994 - HTML specification for HTML 2 is released as well as the
formation of World Wide Web Consortium to fulfill the potential of the
Web through the development of open standards.
• August of 1995, Microsoft's Internet Explorer browser comes out and in
the same year of November Style sheets for HTML begin to take shape.
• HTML 3.2 was ready last January 1997 and W3 Consortium formally
endorsed HTML 3.2 as an HTML cross-industry specification. One might
well ask why HTML 3.2 was called HTML 3.2 and not, let's say, HTML 3.1
or HTML 3.5. The version number is open to discussion just as much as is
any other aspect of HTML. The version number is often one of the last
details to be decided.
• Spring of 1998 HTML4 is fully materialized.
• HTML 5 started to sprung in 2009
4. How does HTML work?
HTML consists of a series of short codes typed
into a text-file by the site author — these are
the tags. The text is then saved as a html file,
and viewed through a browser, like Internet
Explorer or Netscape Navigator. This browser
reads the file and translates the text into a
visible form, hopefully rendering the page as the
author had intended.
5. Trivia
You can write your own HTML document
(webpage) using notepad.
Simply save the document with “.html” or
“.htm” extension.
6. Composition of HTML
• Tags
• Elements
• Attributes
• Forms
• Events
• Methods
• Doctypes
• Entities
8. Basic HTML structure in code
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The HTML document itself has a header <head> which with end code of </head>, usually the title
And some scripts are located here.
The visible part of the HTML document is between <body> and </body>.
9. HTML Elements
The <html> element defines the whole document.
It has a start tag and an end tag .
The element content is another HTML element
HTML elements are written with a start tag, with an end tag, with the content in
between:
<tagname>content</tagname>
Example:
<p>My first HTML paragraph.</p>
HTML elements can be nested (elements can contain elements).
The HTML5 standard does not require lowercase tags, but it is recommended to use
lowercase in HTML4, and demands lowercase for stricter document types like XHTML.
<html> </html>
10. HTML tags
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment
Basic HTML Formatting
Tag Description
<b> Defines bold text
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<del> Defines text that has been deleted from a document
<font> Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<pre> Defines preformatted text
<q> Defines a short quotation
<rt> Defines an explanation/pronunciation of characters (for East Asian
typography)
<s> Defines text that is no longer correct
<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time
<u> Defines text that should be stylistically different from normal text
11. Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
Forms and Input
Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually
JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
Images
Tag Description
<a> Defines a hyperlink
<link> Defines the relationship between a document and an
external resource (most used to link to style sheets)
<nav> Defines navigation links
Links
12. Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from
a popup menu
Lists
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a
<colgroup> element
<colgroup> Specifies a group of one or more columns in a table for
formatting
Tables
13. Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support
client-side scripts
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object
Programming
Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
Styles and Semantics
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
Meta Info
14. HTML Attributes
Attributes provide additional
information about HTML
elements.
– 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"
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a
class in a style sheet)
contenteditable Specifies whether the content of an element is editable or not
contextmenu Specifies a context menu for an element. The context menu
appears when a user right-clicks on the element
data-* Used to store custom data private to the page or application
dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not
dropzone Specifies whether the dragged data is copied, moved, or linked,
when dropped
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and
grammar checked or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translate Specifies whether the content of an element should be
translated or not
15. Creating table in the HTML document
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Result
16. <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Creating a list in HTML
There are 2 types of list that we can do in HTML namely the ordered list and
unordered list.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
A type attribute can be added to an ordered list, to define the type of the marker:
Result
17. Style Description
list-style-type:disc The list items will be marked with bullets
(default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Creating a list in HTML
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
A style attribute can be added to an unordered list, to define the style of the marker:
Result
18. Both the width, the
height, and the style
attributes, are valid in
the latest HTML5
standard.
We suggest you use the
style attribute. It
prevents styles sheets
from changing the
default size of images:
Inserting pictures in HTML document
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
<img src="url" alt="some_text">
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>It is better to use the style attribute (instead of the width and height
attributes), because it prevents
internal or external styles sheets to change the default size of an image:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
20. Blocks & Spans in HTML
The HTML <div> element is a block level element that can be used as a container for other HTML
elements.
The <div> element has no special meaning. It has no required attributes, but style and class are
common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.
The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are
common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic
formatting.
When used together with CSS, the <span> element can be used to style parts of the text:
<h1>My <span style="color:red">Important</span> Heading</h1>
21. Creating links
HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another
document. In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example:
The href attribute specifies the destination address
(http://www.google.com/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
<a href="http://www.google.com/">Visit Google</a>
22. HTML is boring
I know HTML is boring because it is the frame or the skeleton of
your webpage. CSS will beautify your webpage and make it
pleasing and attractive, but what is CSS?
23. CSS
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
• Inline - using a style attribute in HTML elements
• Internal - using a <style> element in the HTML
<head> section
• External - using one or more external CSS files
The most common way to add styling, is to keep the
styles in separate CSS files.
