Introduction to HTML
HyperText Markup Language (HTML) is the
main markup language for creating web pages and other information that can be
displayed in a web browser.
The purpose of a web browser is to read
HTML documents and compose them into visible or audible web pages. The browser
does not display the HTML tags, but uses the tags to interpret the content of
the page.
History of HTML, SGML
The Standard
Generalized Markup Language descended from IBM's Generalized Markup
Language (GML), which Charles Goldfarb, Edward Mosher, and Raymond Lorie
developed in the 1960s. Goldfarb, editor of the international standard, coined
the “GML” term using their surname initials.
As a document markup language, SGML was originally designed to enable the
sharing of machine-readable large-project documents in government, law, and
industry. Many such documents must remain readable for several decades—a long
time in the information technology field. SGML also was extensively applied by
the military, and the aerospace, technical reference, and industrial publishing
industries. The advent of the XML profile has made SGML suitable for widespread
application for small-scale, general-purpose use.
While HTML was developed partially
independently and in parallel with SGML, its creator Tim Berners-Lee,
intended it to be an application of SGML. The design of HTML (Hyper Text Markup
Language) was therefore inspired by SGML tagging
Structure of HTML Document
HTML documents are structured into two
parts, the HEAD, and the BODY. Both of these are contained within the HTML element -- this element simply denotes this as an HTML document.
The head contains information about the
document that is not generally displayed with the document, such as its TITLE. The BODY contains
the body of the text, and is where you place the document material to be
displayed. Elements allowed inside the HEAD, such
as TITLE, are not allowed inside the BODY, and
vice versa.
The general format is
<html>
<head>
<Title>
Title of the page</Title>
</head>
<body>
Content
to be displayed in the Browser window goes here
</body>
</html>
Webpage layout
HTML Tags and Types
Elements and Tags
Elements form the
essence of HTML. They give structure to a HTML document and tells the browser
how the website should be presented. Generally elements consist of a start tag,
some content, and an end tag. Tags are labels used to
mark up the beginning and end of an element.
All tags have the same format: they begin
with a less-than sign "<" and end with a greater-than sign
">".
Generally speaking, there are two kinds of
tags - opening tags: <html> and closing tags: </html>. The only
difference between an opening tag and a closing tag is the forward slash
"/". The content of the element is added between the opening and
closing tags of the element.
There are a few elements which both open and close in the same tag. These
so-called empty elements are not connected to a specific passage in the text
but rather are isolated labels, for example, a line break which looks like
this:
<br />.Font tag
The <font> tag specifies the font face, font
size, and font colour of text.
E.g. <font size="3" color="red"> This is some
text </font>
<font face="verdana" color="green"> This is some text </font>
<font face="verdana" color="green"> This is some text </font>
Paragraph formatting
Paragraphs are defined with the <p>
tag.
E.g.
<p>This is a paragraph</p>
Other text formatting tags used are:
·
<b> - bold
·
<u> - underline
·
<i> - italics
·
<h1> to <h8> - Headings of
various levels.
Meta data
Metadata is data (information) about data. The <meta> tag provides metadata about
the HTML document. Metadata will not be displayed on the page. Meta elements
are typically used to specify page description, keywords, author of the
document, last modified and other metadata.
The metadata can be used by browsers (how to
display content or reload page), search engines (keywords), or other web
services.
E.g.
<meta name = “Keywords” content = “HTML, JavaScript, Frontpage”>
<meta name = “Description” content =
“Web Designing Notes”>
Blockquote
The <blockquote> tag specifies a
section that is quoted from another source.
Browsers
usually indent <blockquote> elements.
E.g.
<blockquote>
Here is a long quotation. here is a long quotation
Here is a long quotation. here is a long quotation
</blockquote>
Hyperlinks
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words,
or image that you can click on to jump to another document.
When you move the cursor over a link in a Web
page, the arrow will turn into a little hand.
The most important attribute of the <a>
element is the href attribute, which
indicates the link’s destination.
Syntax: <a
href = “url”> Display Text </a>
E.g. <a
href = “https://sites.google.com/site/sreesanth”> My site </a>
Comments
The comment tag is used to insert comments in
the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which
can help you when you edit the source code at a later date. This is especially
useful if you have a lot of code. Comments are added between <!-- and -->
tags
Synatax: <!-- Comment -->
E.g. <body>
<!-- This tag defines the contents displayed in the browser window -->
White space
Browsers will
always truncate spaces in HTML pages. If you write 10 spaces in your text, the
browser will remove 9 of them, before displaying the page. To add spaces to
your text, you can use the   (non
breaking space)
Horizontal ruler
The <hr> tag
defines a thematic break in an HTML page. It is used to add a horizontal line
in the page.
Images
In HTML, images are defined with the <img> tag. 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” >
Lists
HTML supports two
types of lists - ordered and unordered lists.
An unordered list starts with the <ul>
tag. Each list item starts with the <li> tag.
E.g. <ul>
<li>
Floppy </li>
<li>
Pen Drive </li>
</ul>
The list items are marked with bullets. The
output of the above code is:
·
Floppy
·
Pen Drive
An ordered list
starts with the <ol> tag. Each list item starts with the <li> tag.
E.g. <ol>
<li>
Floppy </li>
<li>
Pen Drive </li>
</ol>
The list items are
marked with numbers. The output of the above code is:
1. Floppy
2. Pen Drive
Frames
The <frame>
tag defines one particular window (frame) within a <frameset>.
Each <frame>
in a <frameset> can have
different attributes, such as border, scrolling, the ability to resize, etc.
The <frameset>
tag defines a frameset.
The <frameset>
element holds one or more <frame> elements. Each
<frame> element can hold a separate document.
The <frameset> element specifies HOW
MANY columns or rows there will be in the frameset, and HOW MUCH
percentage/pixels of space will occupy each of them.
E.g. <frameset
cols="25%,*,25%">
<frame
src=" a.html">
<frame
src=" b.html">
<frame
src=" c.html">
</frameset>
The above code partitions the browser
window vertically into 3 columns. The first and last columns being 25% of the
windows width respectively. The middle portion (indicated by *) consumes the rest of the window’s width. Each frame
is loaded with different html pages (a.html,
b.html and c.html respectively)
Tables
The <table>
tag defines an HTML table.
An HTML table consists of the <table>
element and one or more <tr>, <th>,
and <td> elements. The <tr>
element defines a table row, the <th>
element defines a table header, and the <td>
element defines a table cell.
E.g. <table border="1">
<tr>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>HTML</td>
<td>Ivan Bayross</td>
</tr>
<tr>
<th>Book</th>
<th>Author</th>
</tr>
<tr>
<td>HTML</td>
<td>Ivan Bayross</td>
</tr>
<tr>
<td>Java</td>
<td> Schildt </td>
</tr>
</table>
</table>
The above HTML code above looks as shown below
in a browser:
|
Book
|
Author
|
|
HTML
|
Ivan Bayross
|
|
Java
|
Schildt
|
Forms
HTML forms are used to collect data from a user.
An HTML form can contain input elements like
text fields, password fields, checkboxes, radio-buttons, submit buttons, reset
buttons and more. A form can also contain select lists, textarea and label
elements.
The <form> tag is used to create an HTML
form
<form name = “”>
input elements
</form>
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 commonly used input elements are:
Text Fields
<input type="text"> defines a one-line input field that a user
can enter text into:
E.g. <form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname">
</form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname">
</form>
The above HTML code above looks as shown below
in a browser:
First name:
Last name:
Last name:
The type
attribute determines what type of input control has to be placed on the
browser. The name attribute associates a name for the input object.
Password Field
<input type="password"> defines a password field:
E.g.<form>
Password: <input type="password" name="pwd">
</form>
Password: <input type="password" name="pwd">
</form>
The above HTML code above looks as shown below
in a browser:
Password:
The difference between a Text field and a
password field is that the characters keyed in by a user in a password field is
not displayed, instead it shows ‘.’ or ‘*’
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let
a user select ONLY ONE of a limited number of choices. The name attribute for a
set of radio buttons should have the same value, actually this group the
buttons into a single unit.
E.g. <form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
The above HTML code above looks as shown below
in a browser:
Male
Female
Female
Checkboxes
<input
type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO
or MORE options of a limited number of choices.
E.g. <form>
<input type="checkbox" name="Accessories" value="Floppy"> Floppy <br>
<input type="checkbox" name=" Accessories" value="CD"> CD
</form>
<input type="checkbox" name="Accessories" value="Floppy"> Floppy <br>
<input type="checkbox" name=" Accessories" value="CD"> CD
</form>
The above HTML code above looks as shown below
in a browser:
Floppy
CD
CD
Buttons
The input element with type as “button”
defines a clickable button. The value attribute can be used to define the text
displayed on the button. The type attribute specifies the type of button.
Syntax: <button
type="button|submit|reset" value =””>
Reset button is used to clear the data in input
controls of a form. A submit
button is used to send form data to a server.
E.g.
<form
>
Username: <input type="text" name="uname">
<input type="submit" value="Submit">
</form>
Username: <input type="text" name="uname">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:
Username:
No comments:
Post a Comment