2. Index
Getting Started
What is HTML ?
History of HTML
How does it work?
What can I use HTML for
What Can I Do with HTML
How Do I Learn HTML
Conclusion
3. Getting Started
What the following terms mean:
1. Web server: a system on the internet containing one or more web site
2. Web site: a collection of one or more web pages
3. Web pages: single disk file with a single file name
4. Home pages: First page in website
5. Think about the followings before working your web pages
6. Think about the sort of information (content) you want to put on the web
7. Set the goals for the website
8. Organize your content into main topics
9. Come up with a general structure for pages and topics
4. What is HTML?
HTML is the main markup language for displaying web pages and other
information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in
angle brackets (like <html>), within the web page content.
HTML tags most commonly come in pairs like <h1> and </h1>, although
some tags, known asempty elements, are unpaired, for example <img>.
Examples of HTML
5. History of HTML
In 1980, physicist Tim Berners-Lee, who was a contractor at
CERN, proposed and prototyped ENQUIRE, a system for CERN
researchers to use and share documents.
In 1989, Berners-Lee wrote a memo proposing an Internetbased hypertext system. Berners-Lee specified HTML and
wrote the browser and server software in the last part of 1990.
In that year, Berners-Lee and CERN data systems engineer
Robert Cailliau collaborated on a joint request for funding, but
the project was not formally adopted by CERN. In his personal
notes from 1990 he lists "some of the many areas in which
hypertext is used" and puts an encyclopedia first.
6. How does it work?
You are using a Web browser to read this page, and that browser could be
Microsoft Internet Explorer, Firefox or maybe Netscape.
You want to learn how Web pages work, and perhaps learn the art of
creating your own pages
Web browser - A Web browser, like Netscape Navigator or Microsoft
Internet Explorer, is a computer program(also known as a software
application, or simply an application) that does two things:
A Web browser knows how to interpret the set of HTML tags within the
page in order to display the page on your screen as the page's creator
intended it to be viewed.
7. What can I use HTML for
HTML is the basic building block to a web page. HTML is needed to
create a website. HTML is one of the easiest computer languages to
learn.
Although you can create a website with HTML alone, you will need to
know many other types of computer languages to build a
professional website (CSS, Java, XML are some examples of the many
different types of computer languages.)
HTML, or Hypertext Markup Language, is used to create web pages.
Site authors use HTML to format text as titles and headings, to
arrange graphics on a webpage, to link to different pages within a
website, and to link to different websites.
8. What can I do with HTML
HTML stands for “Hyper Text Markup Language” and it is the language of
the World Wide Web. So, in short, you use HTML to build web pages. But
there is more to it than that.
HTML Helps Format Your Page Contents
With HTML, you can add:
paragraphs of text
lists (both numbered and bulleted)
tables
quotations
headlines
9. How do I learn HTMl
First step:
Understand markup tags. Markup tags inform your web browser how
to display the page and its content. They usually come with a start tag and an end tag, with
the element content in between the tags.
A left-angle bracket, or less-than sign (<) begins the tag and a right-angle bracket, or
greater-than sign (>) ends the tag.
To tell whether a tag is a start or an end tag, note that the end tag has a forward slash / after
the first bracket: <tag>element content</tag>.
Second step: Understand the format of an HTML document. There are two sections
to an HTML document. The whole document starts and ends with the tag, which is there to
inform your browser that it should interpret the code as HTML. The document is then split up
into two parts: the head (the code within the tags) and the body (within the tags):
Here is an example of a very basic HTML document:
<title>How to Learn HTML - wikiHow</title>
This is a minimal HTML document
10. Third Step:
Learn the uses of the head tag. The head comes first, and contains all the non-content code, including:
The title of the page, for example:
• <title>How to Learn HTML - wikiHow</title>
• Meta tags, which are used to provide metadata about a web page. This data can be used by search engines when the
robot scours the internet to locate and list websites:
• <meta name="description" content="A description of your page">
• <meta name="keywords" content="list of keywords, each separated by a comma">
• <meta name="robots" content="options for enabling/disabling certain abilities of a web-crawler for search
engines">
• <meta content="en-gb" http-equiv="Content-Language">
• <meta content="text/html" http-equiv="Content-Type">
Link tags are used to link the page to other files, for example stylesheets - (CSS styles of the elements in the page)
and favicons (an icon associated with the webpage, displayed next to the url in the address bar and other places):
• <link class="misspell" type="text/css" stylesheet">href="styles.css">
• <link class="misspell" href="favicon.ico">
Script tags are used to link the page to JavaScript files (although this does not necessarily have to be in the head
section). These tags can also contain the JavaScript code instead of an external file:
• <script class="misspell" src="scripts.js" language="javascript" type="text/javascript"></script>
11. Fourth Step:
Learn the uses of the body tag. The body comes after the head, and contains all the
content code - the content that is actually displayed in the browser window, including the
most common tags:
The tag for a paragraph:
• <p>element content</p>
The tag for bold:
• <strong>element content</strong>
or
<b>element content</b>
The tag for italics:
• <i>element content</i>
or
<em>element content</em> (for emphasis)
The tag for strikethrough:
• <s>element content</s>
The tag for superscript:
• <sup>element content</sup>
The tag for subscript:
• <sub>element content</sub>
12. The tag for preformatted text (displayed exactly how you enter it including any
whitespace in the element content):
• <nowiki>element content</nowiki>
The tag for a marquee (scrolling text)(Outdated):
• <marquee>element content</marquee>
The tag for code text (displayed like this):
• <code>element content</code>
The tags for headings:
• <h1>header text</h1>: the largest header
<h2>header text</h2> (the 2nd level header)
<h3>header text</h3> (the 3rd level header)
<h4>header text</h4> (the 4th level header)
<h5>header text</h5> (the smallest header)
The tag for links and anchors:
13. • Links:
<a href="url of webpage, or name of anchor within the page to link to">text/image to display as
the link</a>
For example:
<a href="http://wikihow.com">wikiHow</a>
• Anchors (points in the page to be linked to internally, like this Link to the Tips section:
<a name="Tips">element content, in this case the Tips section</a>
The tags for lists:Numbered and bulleted lists:
• Bulleted lists (Unordered):
<ul><li>Item 1</li><li>Item2</li><li>Item 3</li></ul>
• Numbered lists (Ordered):
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
14. Definition lists:
<dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold
Beverage</dd></dl>
The tags for tables:
<table>table marks</table>
Rows: <tr>
Column headers: <th>
Cells: <td>
Example:
<table><tr><th>Mês</th><th>Savings</th></tr><tr><td>January</td><td>$100</td>
</tr></table>
15. Learn the tags that do not need a closing tag - i.e. there is only need for one tag.
These are called empty tags, because there is no element content. In XHTML, these
tags need to be closed with a backslash /, but still there is only need for one tag in
both HTML and XHTML:
The tag for a line break: <br>
The tag for a horizontal rule: <hr>
The tag for images: <img src="your_image_url">
Fifth step: There are various resources on the internet that you
can use, or you can expand your knowledge by looking into the
HTML source of webpages. You can do this by right clicking the
page and selecting "View Source" or similar, or by going to
the View section in the Menu of your browser.
16. Sixth Step: Learn the attributes and parameters
for the tags. As before, you can either use
learning resources on the internet or in books, or
you can try learning by trial and error and by
seeing how the attributes and parameters are
used in other web pages.
17. Conclusion
A few new tags were introduced in the last lesson. We will now give you a
definition of these new tags to get you ready for starting the real. The new tags
were: <head>, <title>, <h2>, and <p>.
The HTML Code in Question:
<html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome
to my webpage</h2> <p>Coming soon will be my completed webpage that will
wow and impress you!</p> </body> </html>
<head>
This comes immediately following <html> and is used to tell the browser useful
information, such as: the title of your page, the topic of your webpage ( used on
old search engines ) and more.
<title>
This tag must comes between <head> & </head> and will label the web browser's
title bar, which is located in the top left of most browsers. In the previous
example, we titled the page "My Own Webpage!" and that text would show up as
the browser's title.
18. <h2>
This is a header tag. It will create a "header" that is much larger than the
default font size. The "h2" means that it is the 2nd largest header. The
largest header is "h1" and the smallest header is "h6". Headers should be
used for titles, just like the ones you see on this page.
<p>
This is a paragraph tag. So when you're writing a paragraph make sure you
place <p> at the beginning of the paragraph and </p> at the end!
continue your learning - html tutorial
Now that you have attained a basic understanding for how HTML
works, please continue on to our HTML tutorial section. Here you will learn
all the basic HTML tags and attributes required to make a usable web site.
