HTML Layout

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

This is some text. This is some text. This is some text. This is some text. This is some text. Another text. Another text. Another text. Another text. Another text. Another text. Another text.

The <div> and <span> Tags

The <div> tag defines a division/section in a document. its align="" attribute has been deprecated.
Note: Browsers usually place a line break before and after the div element.
Tip: Use the <div> tag to group block-elements to format them with styles.

This paragraph starts with a <div> tag. This is within a pair of <span> tags with style attribute color blue. This ends with a <div> tag.
Tip: Use the <span> tag to group inline-elements to format them with styles

The <font> tag (Deprecated; Avoid its Use)

This text uses attribute size="5" face="Times"

Visit THIS LINK to learn more about <font> Tags


HTML Styles

<style> - defines a style definition

FORMATTING BY STYLE SHEET WITHIN DOCUMENT

This LINK has NO LINE!!

This header gets its formatting from a Style Sheet within the <head> section

FORMATTING BY EXTERNAL STYLE SHEET

This text gets its formatting from an External Style Sheet called "ExtStyle.css"

FORMATTING BY INLINE STYLES

This text uses attribute style="font-family:courier"

This text uses attribute style="font-size:150%"

This text uses attribute style="color:red"

This text uses attribute style="font-family:verdana;font-size:80%;color:green"


HTML Meta Element

Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document.

Note: Meta Elements can only appear within the head element.
Note: Metadata is always passed as name/value pairs.
*Some examples are given inside this page's source codes within comment tags.

Or Check out THIS LINK to learn more about the <meta> element

Uniform Resource Locator (URL)

URL - is used to address a document (or other data) on the World Wide Web.
A full Web address like this: http://www.w3schools.com/html/lastpage.htm
follows these syntax rules: scheme://host.domain:port/path/filename

scheme - is defining the type of Internet service. The most common type is http.
host - is defining the domain host. If omitted, the default host for http is www.
domain - is defining the Internet domain name like w3schools.com.
:port - is defining the port number at the host. The port number is normally omitted. The default port number for http is 80.
path - is defining a path (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.
filename - is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.

URL SCHEMES: some of the most common schemes
Schemes Access
file
ftp
http
gopher
news
telnet
WAIS
- a file on your local PC
- a file on an FTP server
- a file on a World Wide Web Server
- a file on a Gopher server
- a Usenet newsgroup
- a Telnet connection
- a file on a WAIS server

Accessing a Newsgroup
The following HTML code cretes a link to the "news:alt.html": HTML Newsgroup

Downloading with FTP
The following HTML code creates a link to "ftp://www.w3schools.com/ftp/winzip.exe" : Download WinZip to download a file like that.

Link to your Mail system>
The following HTML code creates a link to you own mail system: har_rki219_mc2e@yahoo.com

HTML Scripts



VBScript:

NOTE: if there is no "VBSCRIPT SUPPORTED!" text after the "VBScript:" above then it is not supported


Learn about <object> tag


HTML Attributes

The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):

Core Attributes: (Not valid in base, head, html, meta, param, script, style, and title elements)

Attribute Value Description
class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text  A text to display in a tool tip

Language Attributes: (Not valid in base, br, frame, frameset, hr, iframe, param, and script elements)

Attribute Value Description
dir ltr | rtl Sets the text direction
lang language_code Sets the language code

Keyboard Attributes:

Attribute Value Description
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element


HTML Events

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.

Window Events: (Only valid in body and frameset elements)

Attribute Value Description
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads

Form Element Events: (Only valid in form elements)

Attribute Value Description
onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script  Script to be run when the element is selected
onblur script  Script to be run when the element loses focus
onfocus script  Script to be run when the element gets focus

Keyboard Events: (Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements)

Attribute Value Description
onkeydown script  What to do when key is pressed
onkeypress script  What to do when key is pressed and released
onkeyup script  What to do when key is released

Mouse Events: (Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements)

Attribute Value Description
onclick script  What to do on a mouse click
ondblclick script  What to do on a mouse double-click
onmousedown script  What to do when mouse button is pressed
onmousemove script  What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an element
onmouseover script What to do when mouse pointer moves over an element
onmouseup script  What to do when mouse button is released

Click here to Learn more about Web Servers


Click here for Web Hosting Tutorials