1.
0 HTML Basics
1.1 What is HTML?
In this chapter you will learn basics of HTML document: tags and elements
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language. Web pages are written
in HTML - a simple scripting language. When a browser opens an HTML
file, the browser will look for HTML codes in the text and use them to
change the layout, insert images, or create links to other pages.
Since HTML documents are just text files they can be written in even the
simplest text editor.
A more popular choice is to use a special HTML editor - maybe even
one that puts focus on the visual result rather than the codes - a so-
called WYSIWYG editor ("What You See Is What You Get").
Some of the most popular HTML editors, such as FrontPage or
Dreamweaver will let you create pages more or less as you write
documents in Word or whatever text editor you're using.
HTML file extensions and the source
document
When naming HTML files, keep in mind that some clients require your
file name to have a ".html" extension. To be safe, all HTML files you
create should use the ".html" naming convention.
You can view the HTML tags for any HTML document by looking at the
"source" document that contains the HTML tags, usually called "View
Source" or "View Document Source" from the "View" menu on most
browsers. Using this option is a nice way to learn new things as well as
refresh your memory when working with HTML tags.
Tools for the Web Designer
Methods of preparing an HTML document
There are several ways an HTML document can be prepared:
• use notepad
• sublime text
• Using dream weaver
• Using note pad or notepad++ (improved version).
There are also dozens of HTML editors and converters available, both
free and commercial. For beginners it is recommended to use notepad.
1.2 Basics of HTML
HTML Tags
HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle brackets like
<html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end
tag Start and end tags are also called opening tags and
closing tags .
Text formatting tags
New Paragraph: <p>
Starts a new paragraph and creates a blank line between your new
paragraph and the one above it. The closing tag is </p>, but is not
mandatory.
Example
<p> hello this is a paragraph</p>
Line Break: <br>
This will break your text to the next line. Two <br> tags is equivalent to
one <p> tag. There's no closing tag needed for this one.
Example
This is a good <br> story, I am inspired.
O
ut
pu
t:
Th
is
is
a
g
o
o
d
st
or
y,
I
a
m
in
sp
ire
d
Underline: <u>
It is used to create a text with an underline.
Example
<u>This text is
underlined</u>
Output:
This text is underlined
Italics: <i>
It is used to create text with italics.
Example
<i> Happy new year, <i> wishing you good luck.
Output:
Happy new year, wishing you good luck.
Centering text: <center>
It is used to display text at the center of the screen. Example <center>
here is the text</center>a
Aligning text in a paragraph
To align text in a paragraph, just add the formatting attribute align in
the paragraph tag which will have the appropriate value like left, center,
right Left aligning text: <p align="left"> text here in a paragraph </p>
Right aligning text: <p align="right"> text here in a paragraph </p>
Text font
Text fonts include color, size and type (face in html). So, we will use the
<font> tag with different attributes and their values according to our
needs
Change text color: <font color="red">This text will be red in color
</font>
Here you specify any color that you want e.g. green, blue, yellow, purple
etc.
Changing font face: <font face="Arial"> this text will have font face of
arial</font>.
Here you can also use different font face e.g. Times New Roman,
Cambria etc
Change font size: <font size="3"> this text will have a size of 3</font>
(choose between 1 and 7)
Note: you can also use <h1> to <h6> tags to give text size to text but
this is obviously used for headings or titles in the document. h1 is the
largest and h6 is the smallest e.g.<h2>this is second heading</h2>
Other tags
Blinking Text: <blink>text to blink here</blink> (only works in
Netscape)
Scrolling Text: <marquee> This text scrolls across the
screen</marquee>
Case Insensitivity in HTML Tags and
Attributes
In HTML, tag and attribute names are not case-sensitive (but most
attribute values are case-sensitive). It means the tag <P>, and the
tag <p> defines the same thing in HTML which is a paragraph.
But in XHTML they are case-sensitive and the tag <P> is different
from the tag <p>.
Example
<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>
Tip: We recommend using lowercase for tag and attributing names
in HTML, since by doing this you can make your document more
compliant for future upgrades.
Empty HTML Elements
Empty elements (also called self-closing or void elements) are not
container tags, that means, you can not write <hr>some
content</hr> or <br>some content</br>.
A typical example of an empty element, is the <br> element, which
represents a line break. Some other common empty elements are
<img>, <input>, <link>, <meta>, <hr>, etc.
Example
<p>This paragraph contains <br> a line break.</p>
<img src="images/[Link]" alt="Cloudy Sky">
<input type="text" name="username">
Note: In HTML, a self-closing element is written simply as <br>. In
XHTML, a selfclosing element requires a space and a trailing slash,
such as <br />.
Nesting HTML Elements
Most HTML elements can contain any number of further elements
(except empty elements), which are, in turn, made up of tags,
attributes, and content or other elements.
The following example shows some elements nested inside the
<p> element.
Example
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>
Tip: Placing one element inside another is called nesting. A nested
element, also called a child element, can be a parent element too if
other elements are nested within it.
HTML tags should be nested in correct order. They must be closed
in the inverse order of how they are defined, that means the last
tag opened must be closed first.
Example
<p><strong>These tags are nested properly.</strong></p>
<p><strong>These tags are not nested
properly.</p></strong>
1.3 Writing Comments in HTML
Comments are usually added with the purpose of making the
source code easier to understand. It may help other developer (or
you in the future when you edit the source code) to understand
what you were trying to do with the HTML. Comments are not
displayed in the browser.
An HTML comment begins with <!--, and ends with -->, as shown
in the example below:
Example
<!-- This is an HTML comment --> <!-- This is a multi-line
HTML comment that spans across more than one line --
>
<p>This is a normal piece of text.</p>
You can also comment out part of your HTML code for debugging
purpose, as shown here:
Example
<!-- Hiding this image for testing
<img src="images/[Link]"
alt="Smiley"> -->
1.4 HTML Frame work
The HTML skeleton gives us the basic structure of every HTML
document In the example below, you will see a sample HTML
page with the basic structure (skeleton).
<html>
<head>
<title>Title that is displayed at the top of your web browser and also
used as the title by many search engines</title>
<base href="[Link]
<meta name="keywords" content="main keywords of your site
separated by commas.
Read by some search engines">
</head>
<body>
<p align="left">
This is my new web page. I hope you like it. Please come back and visit
again. If you need help creating your web site visit <a
href="[Link] Create a [Link]</a>.
</p>
</body>
</html>
HTML Head
The <head> element primarily is the container for all the head
elements, which provide extra information about the document
(metadata), or reference to other resources that are required for
the document to display or behave correctly in a web browser.
The head elements collectively describes the properties of the
document such as title, provide meta information like character
set, instruct the browser where to find the style sheets or scripts
that allows you to extend the HTML document in a highly active
and interactive ways.
The HTML elements that can be used inside the <head> element
are: <title>, <base>, <link>, <style>, <meta>, <script> and the
<noscript> element.
The HTML title Element
The <title> element defines the title of the document.
The title element is required in all HTML/XHTML documents to
produce a valid document. Only one title element is permitted in a
document and it must be placed within the <head> element. The
title element contains plain text and entities; it may not contain
other markup tags.
The title of the document may be used for different purposes. For
example:
• To display a title in the browser title bar and in the task bar.
• To provide a title for the page when it is added to favorites
or bookmarked.
• To displays a title for the page in search-engine results( it‘s
used by search engines to index the page)
The following example demonstrates how to place title in an
HTML document.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Tip: A good title should be short and specific to the document's
content, because search engine's web crawlers pay particular
attention to the words used in the title. The title should ideally be
less than 65 characters in length. See the guidelines for titles.
The HTML base Element
The HTML <base> element is used to define a base URL for all
relative links contained in the document, e.g. you can set the base
URL once at the top of your page, and then all subsequent relative
links will use that URL as a starting point. Here's an example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="[Link]
</head>
<body>
<p><a href="html-tutorial/[Link]">HTML
Head</a>.</p>
</body>
</html>
The hyperlink in the example above will actually resolve to
[Link]
[Link] regardless of the URL of the current page. This is
because the relative URL specified in the link: html-
tutorial/[Link] is added to the end of the base URL:
[Link]
Warning: The HTML <base> element must appear before any
element that refers to an external resource. HTML permits only
one base element for each document.
The HTML link Element
The <link> element defines the relationship between the current
document and an external documents or resources. A common
use of link element is to link to external style sheets.
Example
<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="[Link]">
</head>
Note: An HTML document's <head> element may contain any number of <link>
elements. The <link> element has attributes, but no contents.
The HTML style Element
The <style> element is used to define embedded style
information for an HTML document. The style rules inside the
<style> element specify how HTML elements render in a browser.
</head>
Note: An embedded style sheet should be used when a single
document has a unique style. If the same style sheet is used in
multiple documents, then an external style sheet would be more
appropriate. See the tutorial on HTML styles to learn more about
it.
The HTML meta Element
The <meta> element provides metadata about the HTML
document. Metadata is a set of data that describes and gives
information about other data. Here's an example:
Example
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>
The meta element will be explained in more detail later.
The HTML script Element
The <script> element is used to define client-side script, such as
JavaScript in HTML documents.