Introduction to HTML
History of HTML
The "idea" for the world wide web began in 1945 with an article by Vannevar Bush called "How we
may think" where he described an imaginary computer-aided hypertext network he called the "Memex".
It would take over forty years for the idea to become reality.
HTML (HyperText Mark-up Language) was largely developed by Tim Berners-Lee in his work for
CERN (European Organization for Nuclear Research) from around 1989. The first websites were
launched in 1991 and the first graphical browser "Mosaic" was launched in 1993.
The huge growth in the web belies the very simple idea behind it. The idea of linking documents
together was a radical one that we now take entirely for granted. Other important ideas included the
concept that anyone could contribute to the network of documents and that it should be easy and free to
use.
HTML Overview
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in
HTML language.
In simple terms, a Web page (or HTML document) is a plain text file that has been encoded using
Hypertext Markup Language (HTML) so that it appears nicely formatted in a Web browser. Here‘s
what HTML means, word-by-word:
Hypertext: text that you click to jump from document to document. This is a reference to the
ability of Web pages to link to one another
Markup: tags that apply layout and formatting conventions to plain text. Literally, the
plain text is ―marked up‖ with the tags.
Language: a reference to the fact that HTML is considered a programming language.
Note: HTML is an interpreted programming language. That means the program is distributed in human-
readable format to users, and the program in which it is opened takes care of running it. The HTML
code for Web pages resides in files. Each time your Web browser opens a Web page, it processes the
HTML code within the file.
HTML Document
Creating an HTML document is very similar to creating any other file. Although there are many web
page building programs available, you can create a web page using just a simple text editor such as
Notepad or WordPad (or SimpleText or TextEdit on a Mac).
You identify your file as being HTML by saving it with a special extension on the end of the file name -
'.htm' or '.html'. Both of these extensions tell a browser to begin interpreting HTML. For example you
1|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
could save your file as: '[Link]' or '[Link]'.
Creating a web folder
Before starting out on a HTML project, you should start by creating a "root" folder - this is the folder
that will contain all your files for your website. It is essential that all your web files and graphics are
collected in the same place right from the start of your project. See the section at the end of this reading,
"Keeping your website together" for more information.
Rules of HTML layout
HTML is simple and follows a few standards. HTML tags define all content (text and images). Tags
consist of text surrounded by a less-than < and a greater-than > sign. For example, the <b> tag indicates
that text should be bold.
Most tags in HTML are also completed with a similar tag with a slash in it to specify an end to the
formatting. This is known as opening and closing a tag.
<b> is an opening tag
</b> is a closing tag
For example, to emphasise some text, you could use the following HTML code:
this text is not bold <b>this text is bold</b> this text is not bold
To be more correct you could use the tag <strong> to bold your text. The code is shown below -
the page would look exactly the same.
this text is not bold <strong>this text is bold</strong> this text is not bold
Note: Although HTML tags are not case-sensitive it's a good idea to get in the habit of using
lowercase. This is because XHTML only recognises lowercase. Also get used to closing tags – even
ones that don't need to be closed for HTML such as <br>. XHTML requires all tags to be closed.
XHTML will eventually replace HTML as the major mark-up language on the web. To find out more
about getting ready for XHTML go to the W3 Schools website ([Link]). Look for the
"XHTML Tutorial and find the section on "Differences between XHTML and HTML".
Minimum System Requirements
There are no minimum system requirements for developing HTML; you can do it in any text editing
program with any type of computer and any operating system. That‘s the beauty of HTML! We use
Notepad as the text editor, but you can use any Text Editor that you like.
For testing your work, you will need an HTML5-Compliant Web browser application. The latest
versions of Google Chrome and Firefox (both freely available online) will work fine for this, as will
Internet Explorer 9 or higher.
Minimum System Requirements
There are no minimum system requirements for developing HTML; you can do it in any text editing
program with any type of computer and any operating system. That‘s the beauty of HTML! We use
Notepad as the text editor, but you can use any Text Editor that you like.
For testing your work, you will need an HTML5-Compliant Web browser application. The latest
2|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
versions of Google Chrome and Firefox (both freely available online) will work fine for this, as will
Internet Explorer 9 or higher.
HTML Tags
HTML is a markup language and makes use of various tags to format the content. These tags are
enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding
closing tags. For example, <html> has its closing tag</html> and <body> tag has its closing tag
</body> tag etc.
Above example of HTML document uses the following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
This tag encloses the complete HTML document and mainly
<html> comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
<head> This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the
document title.
<body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
3|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
<p> This tag represents a paragraph.
To learn HTML, you will need to study various tags and understand how they behave, while formatting
a textual document. Learning HTML is simple as users have to learn the usage of different tags in order
to format the text or images to make a beautiful webpage. World Wide Web Consortium (W3C)
recommends to use lowercase tags starting from HTML4.
HTML Basic Tags
A. Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has
six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line after
that heading.
B. Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag.
C. Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing
to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space,
older browsers will have trouble rendering the line break, while if you miss the forward slash
character and just use <br> it is not valid in XHTML.
D. Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.
Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you omit this
space, older browsers will have trouble rendering the horizontal line, while if you miss the forward
slash character and just use <hr> it is not valid in XHTML.
E. Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of
the source document.
F. Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split
the "12, Angry" and "Men" across two lines:
In cases, where you do not want the client browser to break text, you should use a nonbreaking
space entity instead of a normal space. For example, when coding the "12 Angry Men" in a
4|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
paragraph, you should use something similar to the following code:
<p>An example of this technique appears in the movie "12 Angry Men."
</p>
G. HTML Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice to add
comments into your HTML code, especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at the code. Comments help you and others
understand your code and increases code readability.
HTML comments are placed in between <!-- ... --> tags. So, any content placed within
<!-- ... --> tags will be treated as comment and will be completely ignored by the browser. Single
line comments:
<!-- Document Header Starts -->
HTML supports multi-line comments as well:
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
Commenting Script Code
Though you will learn JavaScript with HTML, but here you must make a note that if you are using
Java Script or VB Script in your HTML code then it is recommended to put that script code inside
proper HTML comments so that old browsers can work properly. Example:
<script>
<!--
[Link]("Hello World!")
//-->
</script>
Commenting Style Sheets
Though you will learn using style sheets with HTML in a separate tutorial, but here you must make
a note that if you are using Cascading Style Sheet (CSS) in your HTML code then it is
recommended to put that style sheet code inside proper HTML comments so that old browsers can
work properly. Example:
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
HTML Elements
5|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
An HTML element is defined by a starting tag. If the element contains other content, it ends with a
closing tag, where the element name is preceded by a forward slash as shown below with few tags:
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some
HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These
are known as void elements (empty elements).
HTML documents consists of a tree of these elements and they specify how HTML documents should
be built, and what kind of content should be placed in what part of an HTML document.
A. HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends with
a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but
<p>This is paragraph</p> is a paragraph element.
B. Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element:
Example
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
This will display the following result:
This is italic heading
This is underlined paragraph
HTML Attributes
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag
<p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also
have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts: a name and a value:
The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the alignment
of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium
(W3C) recommends lowercase attributes/attribute values in their HTML4 recommendation.
6|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T
A. Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are:
Id Class
Title Style
Naming your files
There are many different types of computers and servers used across the web. You need to make sure
that your file names will be read the same on all systems. To do this there are a few simple rules which
you must follow when creating files and folders for websites:
No spaces: Never use spaces in your file names - HTML will not read the code correctly. For example,
a file called "my [Link]" may be changed to "my%[Link]" ("%20" is code for a blank
space) and your links may not work!
Use underscores or remove spaces: Call your file "my_pictures.htm" or "[Link]"
Use lowercase: Most web servers are case-sensitive and it is too easy to get case-sensitive errors
([Link] VS. [Link]). Also lowercase names are much easier to remember. This also applies
to your tags - start making your tags lowercase now because it will save you a lot of problems if you
go on to learn other web mark-up languages (such as XHTML).
No special characters: HTML uses characters like &, >, #, !, /, etc. as part of it's code and each can
signify something in other mark-up languages. Use basic numbers and letters for your filenames.
Less than 32 characters: Again this is an older convention (comes from earlier versions of Apple and
Windows operating systems) but to ensure compatibility on all computers it is still a good rule to stick
to.
7|FURRA COLLEGE TIRGALE CAMPUS WEB LEVEL I
Create simple markup language by Daniel.T