A basic web page

Let’s use what you know about HTML to build a real web page. We’ll look at a web page that’s built using some of the most common HTML tags. In the chapter’s source file, you’ll find a file called simple Webpage .html. Double-click on it, and it will automatically open in a web browser. the below image shows you what you’ll see.

This HTML web page is made with the most basic and useful tags. A web page is just a plain text file with an HTML file extension. Here’s how to view the HTML code that creates this page:
1. Open your text editor, which is either Notepad (Windows) or TextEdit (Mac OS X)
2. Select File ➤ Open and open the simpleWebpage.html file.
3. It will load the HTML file, with all the tags visible. This is what you’ll see:

A web page

A simple web page

Everything you see on this page was made using basic HTML tags.

This is a sub-heading

You use HTML tags to structure information.
This is a paragraph of text structured with a p tag.

Making lists

You can also use tags to make a list of things.

First item

Second item

Third item

Adding links

Its easy to create hyperlinks to other web pages, or to create a link
to generate an email. Here's how:

Here's a good resource

for learning HTML

If you want to say Hi, Send me an email.

Add a photo with an img tag, like this:
A photo of the ocean

(Alternatively, you can also select View > View Source from your web browser to view this HTML code.) Don’t let this scare you! Notice that all the web-page text is surrounded by tags,and each of the tags changes the way that the text is displayed in the web browser. the image below is a side-by-side illustration that shows the effect that the HTML text has on the text in the web browser. I’ve added some blank lines in the HTML document
so that it’s a little easier to see where each section begins and ends. However, the web browser ignores those blank lines and uses its own rules for spacing the text.

The HTML code is interpreted by the web browser to create the page layout

Let’s see how each of these new HTML tags changes the way the text is displayed

Using an attribute to set the document language

HTML tags can include extra information called attributes . Attributes are added inside the tag, after the tag
name. The following attribute in the tag sets the web page’s language to English.
The name of the attribute is lang (for language). "en" stands for English, and it’s assigned to the attribute using an equal sign lang="en" means that the web-page content is written in English.

Although it’s optional to do this, it’s often a good idea to set the language for web pages because the browser
may change the way it displays text based on which language it thinks you’re using. You’ll see how attributes can be used to create links to other web pages and to load images in the examples ahead.
Adding a page title
The first bit of code adds a title to the web page using the tag. <head> <title>A web page

This title doesn’t appear inside the actual web page. It appears in the title bar of the web browser. Look at your
web browser carefully, and you’ll see the words “A web page” at the very top of the browser window.
Cool, huh? You might also see it displayed in a browser tab. The tag should always be used inside the <head> section. Page headings The first tag inside the <body> tag is <h1> . That stands for “heading 1,” which is the main web-page heading. <h1> A simple web page</h1> The browser interprets this as the main heading of the page, and it displays the heading text in large, bold letters. Look a little further down the page and you’ll notice that the other page headings are created with <h2> tags. <h2> This is a sub-heading</h2> <h2> Making lists</h2> <h2> Adding links</h2> The browser displays these in a smaller font size. You can use the <h1> to <h6> tags to create different levels of headings and subheadings in your web page. Paragraph text Most of the text on the page is surrounded by tags, which show that the text is part of a paragraph. Everything you see on this page was made using basic HTML tags. The web browser will set paragraphs in a smaller font than the headings. Most of your website’s text will be inside tags. Italic and bold text If you want to emphasize any text, surround it with or tags. Web browsers usually interpret the tag as italic text. This text will be italicized The tag is usually interpreted as bold text. This text will be bold You usually use the and tags inside a tag, like this: Here is some text which is italic and bold Making lists Use the <ul> and <li> tags together to create a list of items. <ul> stands for unordered list , which just means that the list items don’t have numbers. You create an unordered list by first adding a pair of <ul> tags, like this: <ul> </ul> You then insert the <li> tags inside the <ul> tags, like this: <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> The web browser will automatically add bullets (little round circles) before each of the list items. Note: If you want your list items to be numbered, use <ol> instead of <ul>. <ol> stands for ordered list, and the web browser will automatically add a number before each of the <li> list items. Adding links You can easily create a link to another web page by using the <a> tag. <a> stands for anchor . It uses an attribute called href that lets you add the website address you want to link to. Whenever anyone clicks whatever is between the <a> and </a> tags, the web browser will open the page you specified with the href attribute. You use the <a> tag like this: <a href=" http://anyLinkToAnyWebsite " >Click to go to the link</a> If you now click Click to go to the link , a new web page will open the address you specified with the href attribute. ( href stand for hypertext reference , in case you’re wondering.)You can create a link to any web page on the Internet. <a href=" http://www.apress.com " >Visit Apress</a> Note: The fancy name for website address is URL. That stands for Uniform Resource Locator. It’s important to know this because you’ll see the term URL used a lot. Now you know! You can also link to another web page that’s on your computer, like this: <a href="anotherWebPage.html">The next page</a> This last example will open an HTML file called another WebPage.html that’s in the same folder as the current one. Use this technique to build a website by linking together many individual HTML files. When you click a link, the browser will either open the new page by replacing what’s currently in the browser window, or it will open a completely new browser window that floats on top of the old one. You can control this behavior with an additional attribute called target . Use target= " _blank" to force the browser to open the link in a new browser window. Here’s how: <a href=" http://www.apress.com " target= " blank" >Visit Apress</a> If you want the page to open in the same window as the current page, use target= " _self" , like this: <a href=" http://www.apress.com " target= " self" >Visit Apress</a> Note: Web browsers will usually load a new page into the current one automatically, however, so there’s usually no need to specify this with “_self.” Just leave the whole target attribute out completely if that’s the behavior you want. You can also create a link that generates an e-mail to any address with the special mailto: command. Here’s the format you use to specify the e-mail address and the e-mail subject . <a href="mailto:anyone@email.com?Subject=Hello%20from%20me!">Send an email.</a> This will automatically open an e-mail client and create a new blank e-mail that will be addressed to anyone@email.com . It will also add the subject line “Hello from me!” You’ll notice that between each word in the subject are these characters: %20 This is code for a blank space. You can’t use blank spaces in any links you provide in an href attribute. So, if you need spaces, you have to replace them with %20 . The web browser will correctly reinterpret this as a blank space when it generates the e-mail. Linking to something on the same page You can also use an <a> tag to link to a section on the same page. First, create the section you want to link to inside an <a> tag. Use a name attribute to give the section a name. The name can be any word you want to use. <a name="information">Any kind of information</a>The name for this section is now “information”. You can create a link to it like this<a href="#information">Click to find more information</a> Now if you click this link, the page will jump to the information section. Prefetching pages Usually when you click on a link to another page, you have to wait a few seconds before it loads. You can set your web page up so that it loads certain pages in advance, while you’re still on the current page. That means when you click the link, the new page opens instantly. This is called prefetching a page. To do this, use the <link> tag inside the <head> element. Here’s a link tag that prefetches www.kpoyagahack.blogspot.com . <head> <link rel="prefetch" href=" http://www.kpoyagahack.blogspot.com "> </head> It will load the main page of www.kpoyagahack.blogspot.com in the background while you’re still reading the current page. You can use the <link> tag to prefetch as many pages as you like, from either your own website or anywhere else on the Internet. Adding images The <img> tag lets you add an image to your web page. It has an src attribute that lets you specify where the browser should look to find the image. <img src="anyImage.jpg"> As long as you have an image with that exact same name in the same folder as the HTML document, the image will load. But the image doesn’t just have to be on your computer, it can be anywhere on the Internet. Just use a website address that points to an image, like this: <img src=" http://www.anywebsite.com/ocean.jpg "> You can also use an image as a link by adding the <img> tag inside an <a> tag, like this: <a href="newPage.html"><img src="anyImage.jpg"></a> Now if you click on the image, the browser will open an HTML file called newPage.html. The <a> tag can be used to create a link for any HTML element in this same way. Note: Image files can have the extensions JPG, GIF, or PNG. These are all types of compressed image file formats that are used on the Web. Compressed image formats have small file sizes but still look good. The smaller the file size, the faster the image will load over the Internet. The most common format for photographs is JPG, because it can display millions of colors. That’s important for accurately displaying subtle shades and gradients in photographs. JPG files can’t contain areas of transparency, however. Simpler graphics usually use the GIF format. GIF images aren’t used for photographs because they can’t contain as much color information as JPG images. However, GIF images can contain some basic transparency and can be compressed into very small file sizes. A good compromise format is PNG, which allows for transparency and can display millions of colors. It tends to have a slightly larger file size than JPG or GIF. The <img> tag also has an attribute called alt, which is text that will be displayed if the image doesn’t load. Use the alt attribute inside the <img> tag like this: <img src=" www.anywebsite.com/ocean.jpg " alt="A description of the image">If the web browser can’t find the image or the network connection is too slow to load it, the text from the alt attribute will be displayed instead. The text also helps search engines identify what your image is, so that it will be easier to find if anyone searches for it. Making comments Sometimes when you’re creating an HTML document you might need to make a note to yourself about a certain section. HTML lets you add a comment using this format: 

The tag sets the character encoding to utf-8 , which is the most common standard. It should be the first tag inside the element, before the . It’s a good habit to get into adding character encoding to your HTML documents, just to make sure your pages are displayed the way you expect them to be. More about HTML Amazingly enough, this is most of the HTML you’ll ever need to know. You’ll learn more specific tips through the course of this book. See how easy it is? HTML is just a simple way of describing to a computer how to interpret information. The best thing that you can do now is take a short break from this book for an hour or so, and try making your own HTML web page. Add a title, some headings, some paragraph text, a list or two, a few links, and try to add some images. To start, follow these steps : 1. Open your text editor, which should be either Notepad (Windows) or TextEdit (Mac OS X). 2. Select File ➤ New and start creating your page with HTML tags and text. When you’re finished, save your work: 3. Select File ➤ Save As… (Windows) or File ➤ Save As… (Mac OS X) 4. Give your HTML document the name test.html. 5. Save it somewhere on your computer. To see how your HTML document looks in a web browser, follow these steps: 6. Open a web browser. Select File ➤ Open File… 7. Choose the test.html file that you’ve just created and open it. 8. You’ll see your HTML document displayed as a web page in the browser window. If this is the first time you’ve created a web page, there’s a very good chance that you’ve made some small mistakes somewhere that prevent it from displaying properly. Here are some things to check : ■Make sure that you’ve closed all the tags. This is an extremely common mistake to make. ■ Make sure that everything you want to display in the browser is enclosed in the opening and closing<body> tags. ■ Check that you’ve spelled the tag names correctly. This is also a very common error. ■ If an image isn’t displaying, make sure that the image is in the same folder as the HTML page, and that you’ve used the correct image file extension for the file name: .jpg , .gif , or .png . In the next section we’ll learn about how you can change the appearance of HTML tags by using CSS. Note: In HTML5, the <html>, <head>, and <body> tags are optional. Here’s the most basic valid HTML document: <!doctype.html> <title>

That’s it! Enjoy the simplicity. You’ll see this format employed by most of the examples in

this all project.....