HTML Versions
·
Since
the early days of the web, there have been many versions of HTML:
Version
|
Year
|
HTML
|
1991
|
HTML+
|
1993
|
HTML 2.0
|
1995
|
HTML 3.2
|
1997
|
HTML 4.01
|
1999
|
XHTML 1.0
|
2000
|
HTML5
|
2012
|
XHTML5
|
2013
|
The <! DOCTYPE>
Declaration
·
The
<! DOCTYPE> declaration helps the browser to display a web page
correctly.
·
There
are many different documents on the web, and a browser can only display an HTML
page 100% correctly if it knows the HTML type and version used.
HTML Headings
·
HTML
headings are defined with the <h1> to <h6> tags.
Syntax
<h1>this is a heading</h1>
<h2>this is a heading</h2>
<h3>this is a heading</h3>
<h2>this is a heading</h2>
<h3>this is a heading</h3>
·
Use
HTML headings for headings only. Don't use headings to make text BIG or bold.
·
Search
engines use your headings to index the structure and content of your web pages.
·
Since
users may skim your pages by its headings, it is important to use headings to
show the document structure.
·
H1
headings should be used as main headings, followed by H2 headings, then the
less important H3 headings, and so on.
HTML Paragraphs
·
HTML
paragraphs are defined with the <p> tag.
Syntax
<p>this is a paragraph. </p>
<p>this is another paragraph.</p>
<p>this is another paragraph.</p>
HTML Links
·
HTML
links are defined with the <a> tag.
Syntax
<a
href="http://www.google.com">This is a link</a>
HTML Images
·
HTML
images are defined with the <img> tag.
Syntax
<img
src=""C:\Users\Public\Pictures\Sample
Pictures\Chrysanthemum.jpg" width="104"
height="142">
HTML Elements
·
An HTML
element is everything from the start tag to the end tag:
Start tag *
|
Element content
|
End tag *
|
<p>
|
This is a paragraph
|
</p>
|
<a href="default.htm">
|
This is a link
|
</a>
|
<br>
|
* The start tag is
often called the opening tag.
The end tag is often called the closing
tag.
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
Empty HTML
Elements
·
HTML
elements with no content are called empty elements.
·
<Br>
is an empty element without a closing tag (the <br> tag defines a line
break).
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"
Example
·
HTML
links are defined with the <a> tag. The link address is specified in the href attribute:
<a
href="http://www.google.com">This is a link</a>
HTML Lines
·
The
<hr> tag creates a horizontal line in an HTML page.
·
The
hr element can be used to separate content:
Syntax
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
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.
Syntax
<! -- This is a comment -->
Tag Description
<Html> Defines an HTML document
<Body> defines the document's body
<h1> to <h6> Defines HTML headings
<Hr> defines a horizontal line
<! --> Defines a comment
HTML Line Breaks
·
Use
the <br> tag if you want a line break (a new line) without starting a new
paragraph:
Syntax
<p>this is<br>a Para<br>graph with line breaks</p>
HTML Text Formatting
HTML Formatting Tags
·
HTML
uses tags like <b> and <i> for formatting output, like bold or
italic text.
·
These
HTML tags are called formatting tags
HTML Link
Syntax
<a href="url">Link text</a>
·
The href attribute specifies the destination of
a link.
HTML Links - The target attribute
·
The target attribute specifies where to open the
linked document.
·
The example below will open the linked document
in a new browser window or a new tab:
Example
<a href="http://www.google.com/"
target="_blank">visit google!</a>
The HTML <head> Element
·
The <head> element is a container for all
the head elements. Elements inside <head> can include scripts, instruct
the browser where to find style sheets, provide Meta
information, and more.
·
The following tags can be added to the head
section: <title>, <style>, <meta>, <link>,
<script>, <no script>, and <base>.
The HTML <title> Element
·
The <title> tag defines the title of the
document.
·
The <title> element is required in all
HTML/XHTML documents.
The <title> element:- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
Syntax
<! DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
the content of the document......
</body>
</html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
the content of the document......
</body>
</html>
The HTML <base> Element
·
The <base> tag specifies the base
URL/target for all relative URLs in a page:
Syntax
<head>
<base href="http://www.google.com/images/" target="_blank">
</head>
<base href="http://www.google.com/images/" target="_blank">
</head>
The HTML <link> Element
·
The <link> tag defines the relationship
between a document and an external resource.
·
The <link> tag is most used to link to
style sheets:
Syntax
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The HTML <style> Element
·
The <style> tag is used to define style
information for an HTML document.
·
Inside the <style> element you specify how
HTML elements should render in a browser:
Syntax
<Head>
<style type="text/css">
body {background-color: yellow ;}
p {color: blue;}
</style>
</head>
<style type="text/css">
body {background-color: yellow ;}
p {color: blue;}
</style>
</head>
HTML Images
·
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.
Syntax
<img src="url" alt="some text">
The Alt Attribute
·
The required alt attribute specifies an
alternate text for an image, if the image cannot be displayed.
Set Height and Width of an Image
·
The height and width attributes are used to
specify the height and width of an image.
·
The attribute values are specified in pixels by
default:
Syntax
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
HTML Tables
·
Tables are defined with the <table> tag.
·
A table is divided into rows (with the <tr>
tag), and each row is divided into data cells (with the <td> tag).
·
td stands for "table data," and holds
the content of a data cell.
·
A <td> tag can contain text, links,
images, lists, forms, other tables, etc.
Syntax
<table border="1">
<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>
<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>
HTML Tables and the Border Attribute
·
If you do not specify a border attribute, the
table will be displayed without borders.
·
To display a table with borders, specify the
border attribute:
Syntax
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
·
Header information in a table are defined with
the <th> tag.
·
All major browsers display the text in the
<th> element as bold and centered.
Syntax
<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>
<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>
HTML Lists
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).
Syntax
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
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.
Syntax
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Description Lists
·
A description list is a list of terms/names,
with a description of each term/name.
·
The <dl> tag defines a description list.
·
The <dl> tag is used in conjunction with
<dt> (defines terms/names) and <dd> (describes each term/name):
Syntax
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
HTML Forms
·
HTML forms are used to pass data to a server.
·
An HTML 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.
·
The <form> tag is used to create an HTML
form:
Syntax
<Form>
.
Input elements
.
</form>
.
Input elements
.
</form>
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.
The most common input types are described below.Text Fields
·
<input type="text"> defines a
one-line input field that a user can enter text into:
Syntax
<Form>
First name: <input type="text" name="first name"><br>
Last name: <input type="text" name="last name">
</form>
How the HTML code above looks in a browser:First name: <input type="text" name="first name"><br>
Last name: <input type="text" name="last name">
</form>
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
·
<input type="password"> defines
a password field:
Syntax
<Form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser:Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
·
<input type="radio"> defines a
radio button.
·
Radio buttons let a user select ONLY ONE of a
limited number of choices:
Syntax
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the HTML code above looks in a browser:<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
·
<input type="checkbox"> defines
a checkbox.
·
Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
Syntax
<Form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
How the HTML code above looks in a browser:<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Submit Button
·
<input type="submit"> defines a
submit button.
·
A submit button is used to send form data to a
server.
·
The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does
something with the received input:
Syntax
<form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
