Introduction to HTML for start to learn web programming

Introduction to HTML

When you are browsing the web, the pages you are viewing are just text documents
sitting on someone else’s computer. The text in a typical web page is wrapped in HTML
tags, which tell your browser about the structure of the document. With this information,
the browser can decide how to display the information in a way that makes sense.
Consider the web page snippet shown in Example 1-1. On the first line, the string Hi
there! is wrapped in a pair of h1 tags. Notice that the open tag and the close tag are
slightly different: the close tag has a slash (/) as the second character, while the open
tag does not have a slash.
Wrapping text in h1 tags tells the browser that the words enclosed are a heading, which
will cause it to be displayed in large bold text on its own line. There are also h2, h3, h4,
h5, and h6 heading tags. The lower the number, the more important the header, so text
wrapped in an h6 tag will be smaller (i.e., less important-looking) than text wrapped in
an h3 tag.
After the h1 tag in Example 1-1, there are two lines wrapped in p tags. These are called
paragraph tags. Browsers will display each paragraph on its own line. If the paragraph
is long enough to exceed the width of the browser window, the text will bump down
and continue on the next line. In either case, a blank line will be inserted after the
paragraph to separate it from the next item on the page.
Example 1-1. HTML snippet
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
You can also put HTML tags inside other HTML tags. Example 1-2 shows an unordered
list (ul) tag that contains three list items (li). In a browser, this appears as a bulleted
list with each item on its own line. When you have a tag or tags inside another tag, the
inner tags are called child elements, or children, of the parent tag. So in this example,
the li tags are children of the ul parent.
Example 1-2. Unordered list
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
The tags covered so far are all block tags. The defining characteristic of block tags is
that they are displayed on a line of their own, with no elements to the left or right of
them. That is why the heading, paragraphs, and list items progress down the page
instead of across it. The opposite of a block tag is an inline tag, which, as the name
implies, can appear in a line. The emphasis tag (em) is an example of an inline tag, and
it looks like this:
<p>I <em>really</em> hope you like it.</p>
The granddaddy of the inline tags—and arguably the coolest feature of HTML—is the
a tag. The “a” stands for anchor, but at times I’ll also refer to it as a link or hyperlink.
Text wrapped in an anchor tag is clickable, such that clicking on it causes the browser
to load a new HTML page.
To tell the browser which new page to load, we have to add what’s called an attribute
to the tag. Attributes are named values that you insert into an open tag. In an anchor
tag, you use the href attribute to specify the location of the target page. Here’s a link
to Google’s home page:
<a href="http://www.google.com/">Google</a>
That might look like a bit of a jumble if you are not used to reading HTML, but you
should be able to pick out the URL for the Google home page. You’ll be seeing a lot of
a tags and href attributes throughout the book, so take a minute to get your head around
this if it doesn’t make sense at first glance.
There are a couple of things to keep in mind regarding attributes. Different
HTML tags allow different attributes. You can add multiple
attributes to an open tag by separating them with spaces. You never add
attributes to a closing tag. There are hundreds of possible combinations
of attributes and tags, but don’t sweat it—we only have to worry about
a dozen or so in this entire book.
The HTML snippet that we’ve been looking at would normally reside in the body section
of a complete HTML document. An HTML document is made up of two sections: the
head and the body. The body is where you put all the content that you want users to
see. The head contains information about the page, most of which is invisible to the
user.
The body and head are always wrapped in an html element. Example 1-3 shows the
snippet in the context of a proper HTML document. For now the head section contains
a title element, which tells the browser what text to display in the title bar of the
window.
Example 1-3. A proper HTML document
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
Normally, when you are using your web browser you are viewing pages that are hosted
on the Internet. However, browsers are perfectly good at displaying HTML documents
that are on your local machine as well. To show you what I mean, I invite you to crack
open a text editor and enter the code in Example 1-3.

Picking the Right Text Editor
Some text editors are not suited for authoring HTML. In particular, you want to avoid
editors that support rich text editing, like Microsoft WordPad (Windows) or TextEdit
(Mac OS X). These types of editors can save their files in formats other than plain text,
which will break your HTML. If you must use TextEdit, save in plain text by choosing
Format→Make Plain Text. In Windows, use Notepad instead of WordPad.
If you are in the market for a good text editor, my recommendation on the Mac is
TextMate. There is a clone version for Windows called E Text Editor.
If free is your thing, you can download Text Wrangler for Mac. For Windows, Note
pad2 and Notepad++ are highly regarded. Linux comes with an assortment of text
editors, such as vi, nano, emacs, and gedit.
When you are finished entering the code from Example 1-3, save it to your desktop as
test.html and then open it with Chrome by either dragging the file onto the Chrome
application icon or opening Chrome and selecting File→Open File. Double-clicking
test.html will work as well, but it could open in your text editor or another browser,
depending on your settings.
Even if you aren’t running Mac OS X, you should use Chrome when
testing your Android web apps on a desktop web browser, because
Chrome is the closest desktop browser to Android’s mobile browser.
Chrome is available for Mac and Windows from http://google.com/
chrome.