How To Set Up A Html Page

Chapter 1. Creating Your First Folio

Every website is a collection of web pages, so it should come up as no surprise that your journey to build a complete site starts here , with the writing of a unmarried web page.

Technically, a web page is a special type of document written in a computer language called HTML (that's short for HyperText Markup Language). Web pages are written for spider web browsers —programs like Internet Explorer, Google Chrome, and Safari. These browsers have a simple but crucially of import job: they read the HTML in a web folio certificate and brandish the perfectly formatted effect for you to read.

This chapter volition introduce you to HTML. You'll meet how a basic web page works and learn how to create i of your ain. For at present, you'll be working with web pages yous store on your computer, visible just to y'all. Later on, in Chapter 9, you lot'll learn to put web pages online so anyone with a web connection can see them.

HTML: The Linguistic communication of the Web

HTML is the single most important standard in web pattern—and the only one that's absolutely required if y'all plan to create a spider web page. Every spider web page is written in HTML. It doesn't matter whether your page contains a series of blog entries, a dozen pictures of your pet lemur, or a heavily formatted screenplay—odds are that, if you lot're looking at information technology in a browser, it'south an HTML folio.

HTML plays a key part in spider web pages: Information technology tells browsers how to display the contents of a page, using special instructions called tags that tell a browser when to get-go a paragraph, italicize a word, or brandish a picture. To create your ain web pages, yous demand to larn to use this family unit of tags.

HTML is such an important standard that y'all'll spend a expert portion of this book digging through its features, frills, and occasional shortcomings. Every web folio you lot build forth the fashion will exist a bona fide HTML document.

Note

The HTML standard doesn't have annihilation to do with the way a web browser retrieves a page on the Web. That chore is left to another standard, called HTTP (HyperText Transport Protocol), which is a advice technology that lets ii computers exchange data over the Internet. To use the illustration of a telephone conversation, the telephone wires correspond HTTP, and the juicy tidbits of gossip y'all exchange with Aunt Martha are the HTML documents.

Dandy Open up an HTML File

On the inside, an HTML page is actually nothing more than than a plain-vanilla text file. That means that the raw code backside every web page you lot create will consist entirely of letters, numbers, and a few special characters (like spaces, punctuation marks, and everything else you can spot on your keyboard). Figure 1-one dissects an ordinary (and very simple) HTML document.

Here's one of the secrets of web folio writing: Y'all don't need a live website to start creating your own web pages. That'southward because you can easily build and examination pages using only your ain computer. In fact, y'all don't fifty-fifty need an Internet connection. The only tools you lot need are a basic text editor and a standard web browser.

Your Text Editor

A text editor lets yous create or edit an HTML file (in a window like the one you can see in Figure ane-1, bottom). Even many professional web designers stick with uncomplicated text-editing tools. In that location are enough of fancier editing tools that are designed specifically for editing websites, but you don't actually need any of them. And if you showtime using them also soon, yous're likely to cease upwardly drowning in a bounding main of extra frills and features before you really understand how HTML works.

Figure one-1. Every HTML certificate is really an ordinary text file. Top: A web browser displays a simple HTML document, showing all its glorious formatting. Bottom: But when you open the same document in a text editor, you see all the text from the original certificate, along with a few extra pieces of information inside angle brackets < >. These HTML tags convey data almost the document's structure and formatting.

The type of text editor yous utilise depends on your figurer's operating system:

• If you have a Windows reckoner, you utilise the bare-basic Notepad editor. Canvass on to the adjacent section.

• If you have a Mac computer, you employ the congenital-in TextEdit editor. Only first, yous need to make the adjustments described below.

Mac fans need to tweak the fashion TextEdit works because the program has an "HTML view" that hides the tags in an HTML file and shows you the formatted page instead. This behavior is aimed at making life simpler for newbies, but it presents a serious danger for anyone who wants to write a real web page. To avert defoliation and to make sure yous write real, raw HTML, you lot need to plow HTML view off. Here'due south how:

1. Cull TextEdit → Preferences .

   This opens a tabbed window of TextEdit options (Figure i-ii).

   

   Figure 1-2. TextEdit's Preferences window has two tabs of settings: "New Document" (left) and "Open and Salve" (right).

2. Click "New Certificate" and then, in the Format section, choose "Plain text."

   This tells TextEdit to start yous out with ordinary, unformatted text and to dispense with the formatting toolbar and ruler that would otherwise appear onscreen, which aren't relevant to creating HTML files.

3. Click "Open and Save" and switch on the first option, "Display HTML files every bit HTML code instead of formatted text."

   This tells TextEdit to permit you run into (and edit) the real HTML markup, tags and all, not the formatted version of the page as it would announced in a web browser.

4. Shut the Preferences window, and and so close TextEdit .

   Now, the next time you beginning TextEdit, you lot'll begin in the apparently-text way that every self-respecting spider web developer uses.

Your Spider web Browser

As you no doubt know, a web browser is a program that lets you navigate to and display web pages. Without browsers, the Web would yet be, but you lot wouldn't be able to look at it.

A browser's job is surprisingly elementary—in fact, the bulk of its work consists of two tasks. Starting time, it requests spider web pages, which happens when you type in a website address (like www.google.com) or click a link in a web folio. The browser sends that request to a far-off computer called a web server . A server is typically much more powerful than a home computer because information technology needs to handle multiple browser requests at in one case. The server heeds these requests and sends back the content of the desired spider web pages.

When the browser gets that content, it puts its second skill into action and renders , or draws, the web page. Technically, this ways the browser converts the plain text information technology receives from the server into a display document based on formatting instructions embedded in the page. The end result is a graphically rich folio with unlike typefaces, colors, and links. Effigy 1-iii illustrates the process.

Figure 1-3. A spider web browser is designed to do two things really well: contact remote computers to ask for spider web pages, then display those pages on your computer.

Although you usually inquire your browser to retrieve pages from the Web, you can also use information technology to view a web page that'southward stored on your computer, which is particularly handy when you're practicing your HTML skills. In fact, your computer already knows that files that end in .htm or .html have spider web folio content. And then if you double-click ane of these files, your computer launches your spider web browser automatically. (You can get the same result by dragging a web page file and dropping information technology on an already-open browser window.)

Although ordinary people need only a single web browser, information technology's a good idea for web developers-in-training (similar yourself) to go familiar with the most common browsers out there (see Figure 1-iv). That's because, when y'all pattern your website, you need to prepare for a wide audience of people with different browsers. To brand sure your smashing pages don't plough funky when other people look at them, you should test your site using a multifariousness of browsers, screen sizes, and operating systems.

The post-obit list describes the most popular browsers of today:

• Google Chrome is the current king of web browsers, despite the fact that it's the newest kid on the cake. Tech-savvy web fans love its features, like bookmarks you lot can synchronize across dissimilar computers, and its baking speed.

  Get with Google Chrome at www.google.com/chrome.

• Net Explorer is the longest-lived browser and the official standard in many corporate and government environments. Information technology'due south also the browser that comes pre-installed on Windows, so it's the i non-techie people use if they don't want (or don't know how) to install something new. Even hotshot web designers need to check that Net Explorer understands their pages, because even onetime versions of IE, similar IE 8, remain popular.

  To download the nigh recent version of Cyberspace Explorer, visit www.microsoft.com/ie.

  

  Figure one-4. Browser usage statistics, which estimate the percentage of people using each major browser, vary depending on what sites yous examine and how you count visitors, but at the fourth dimension of this writing, this is one reasonable approximate. (For current browser usage statistics, bank check out http://tinyurl.com/stats-browsers.)

• Firefox started life as the modern response to Cyberspace Explorer. It's withal ahead of the game with its incredibly flexible add-ons , tiny programs that other people develop to enhance Firefox with actress features, like a web post notifier and thumbnails of the sites that show up in a page of search results. Best of all, an regular army of volunteer programmers keep Firefox rigorously upwardly to date.

  Give Firefox a go at www.mozilla.org/firefox.

• Safari is an Apple-designed browser that comes with electric current versions of the Mac Os operating organization. Apple products similar the iPhone, the iPad, and the iPod Touch as well apply the Safari browser (albeit a mobile version that behaves a bit differently). The fine folks at Apple tree created an incarnation of Safari for Windows computers but take since abased it, making Safari an Apple-only pick.

  Go along Safari at world wide web.apple tree.com/safari.

• Opera is a slimmed-down, piece of cake-to-install browser that'due south been around for well over a decade, serving as an antitoxin to the swollen size and pointless frills of Cyberspace Explorer. For years, Opera was held back by an unfortunate detail—if you wanted an ad-free version, you needed to pay. Today, Opera is complimentary and ad-free, besides, just like the other browsers on this listing. It has a small but loyal post-obit merely runs a afar fifth in web browser standings.

  Bank check out Opera at world wide web.opera.com.

Tutorial: Creating an HTML File

Now that yous've prepped your spider web kitchen, you're ready to create your very ain web page. In this tutorial, you'll build the basic page that you lot saw in Figure 1-ane.

Tip

Like all the tutorials in this book, you'll find the solution for this exercise on the companion site at http://prosetech.com/web. Just look in the folder named Tutorial-1-1 (which stands for "Chapter 1, kickoff tutorial," if you lot're curious).

Ready to begin? Hither's what to do:

1. Fire up your text editor .

   On a Windows computer, that'southward Notepad. To open up Notepad, click the Start button, type "notepad," and and then click the Notepad icon that appears.

   On a Mac, that'southward TextEdit. To launch information technology, get to the Applications folder and and then double-click TextEdit.

   When y'all load up your text editor, it starts you out with a new, blank document, which is exactly what you want.

2. Start writing your HTML code .

   This task is a little tricky considering you haven't explored the HTML standard withal. Hang on—assist is on the way in the balance of this chapter. For at present, you can apply the following very simple HTML snippet. Just blazon it in exactly as it appears, text, slashes, pointy brackets, and all:

   <h1>United Popsicle Workers Union</h1> <p>We fight for your rights.</p>

   Technically, this ii-line certificate is missing a few structural details that self-respecting web pages should have. However, every browser tin can read this HTML fragment and correctly translate what y'all want: the two lines of formatted text shown in Figure 1-1, elevation.

3. When you finish your web page, choose File → Save .

   That brings up the Salvage or Salve As window, where you fill in the details for your new file (Effigy one-5).

   

   Figure 1-5. Whether you use Notepad (shown here) or TextEdit, there'due south nada tricky about saving your file. Simply make sure to include ".htm" or ".html" at the end of the filename to place it as an HTML document.

4. Choice a save location for your file, and give information technology the name popsicles.htm.

   If you're not sure where to stash your file, you can save it right on your desktop for now.

   When you name your file, brand sure you include the extension .htm or .html at the end of the filename. For example, past using the name popsicles.htm or popsicles.html, you ensure that your computer volition recognize your certificate as an HTML file.

   Note for the paranoid: At that place's no departure betwixt .htm and .html files. Both are 100% the same—text files that contain HTML content.

   Annotation

   Technically speaking, you tin use any file extension you want. However, using .htm or .html saves confusion (you immediately know the file is a web page) and helps avoid mutual issues. For case, using an .htm or .html file extension ensures that when you double-click the filename, your computer volition know to open up it in a web browser and not some other program. Information technology'due south too important to apply the .htm or .html extension if you program to upload your files to a web server; prickly servers may decline to hand out pages that have nonstandard file extensions.

5. If necessary, change the fashion your text editor encodes your file to UTF-8 .

   This is the TextEdit standard, so Mac users tin skip this step. But in Notepad, you need to choose UTF-eight in the Encoding list at the lesser of the Salvage Every bit window.

   Your web folio will work fifty-fifty if you don't take this stride, but doing so ensures that you lot won't come across bug if you use special characters or a dissimilar language in your folio.

6. Click Relieve to make it official .

   If you use TextEdit, the program may ask if yous really want to use the .htm or .html extension instead of .txt , the text file standard; click "Employ .htm." No such step is required in Notepad. However, you won't actually encounter your HTML files in the list unless you choose "All Files (*.*)" in the "Save as type" box (which initially has "Text Documents (*.txt)" selected).

7. To view your work, open the file in a browser (Figure 1-half-dozen) .

   If you use the extension .htm or .html, opening a page is usually as piece of cake as double-clicking the filename. Or you tin can drag your spider web page file and drib it onto an open up browser window.

   

   Figure 1-vi. A browser's address bar reveals where the electric current web page is really located. If you see "http://" in the accost, it comes from a web server on the Internet (top). If you look at a web page that resides on your own computer, y'all see simply an ordinary local file address (middle, showing a Windows file location in Internet Explorer), or you run across a URL that starts with the prefix "file:///" (bottom, showing a file location in Chrome).

8. When yous finish editing, close your text editor .

   The next time you want to alter your document, only fire upward your text editor, cull File→Open up, and then pick the file you want, or elevate the file and drop it on an already-open text editor window.

Tip

Here's a play a trick on that can aid you open up HTML files in a bustle. Find your file, and so right-click it (Control-click on a Mac) and choose "Open with." This pops open a listing of programs you tin can use to open the file. Click Notepad (or TextEdit) in the list to launch a new text editor window and open your HTML file in one fell swoop.

If y'all exit your web browser window open up while you edit your HTML file in a text editor, the browser volition hold on to the old version of your file. To see your recent changes, save your text file again (cull File→Save) then refresh the page in your browser (unremarkably, that'south every bit easy as right-clicking the page and choosing Refresh or Reload).

Seeing the HTML of a Live Spider web Folio

Most text editors don't let you open a web folio that's on the Internet. All the same, web browsers do give yous the chance to sneak a peek at the raw HTML that sits behind whatsoever spider web folio.

If y'all're using Internet Explorer, Chrome, Firefox, or simply most whatsoever browser other than Safari, you can use a shortcut. Once you navigate to the web folio you lot want to examine, correct-click anywhere on the folio and choose View Source or View Folio Source (the exact wording depends on the browser). A new window appears, showing you the raw HTML that underlies the folio.

If y'all're using Safari on a Mac, you have to jump through an extra hoop to see a spider web page's HTML. First, switch on the Develop menu by choosing Safari→Preferences→Advanced and then turning on the "Show Develop bill of fare in card bar" checkbox. Once y'all do, visit the page you want to dissect and choose Develop→Prove Page Source.

Tip

Firefox has a handy feature that lets yous domicile in on just office of the HTML in a complex web page. Simply select the text you're interested in on the page itself, right-click the text, and then choose View Selection Source.

Most web pages are considerably more complex than the popsicles.htm example shown in Effigy 1-1, so yous need to wade through many more HTML tags when yous look at the spider web folio markup. Yous're as well likely to find a dense thicket of JavaScript code stuffed at the top of the page, stripped of all its spacing and almost incommunicable to read. But fifty-fifty if the markup looks like gibberish, don't panic. By the fourth dimension you finish this book, you'll exist able to browse through a jumble of HTML to notice the $.25 that involvement you. In fact, professional person web developers ofttimes use the View Source technique to check their competitors' work.

Now that y'all know how to peer into existing HTML files and how to create your ain, the adjacent footstep is to sympathise what goes inside the average HTML file. It all revolves effectually a single concept— tags .

HTML tags are formatting instructions that tell a browser how to transform ordinary text into something visually appealing. If you were to take all the tags out of an HTML certificate, the resulting page would consist of nil more than than manifestly, unformatted text.

What'southward in a Tag

You can recognize a tag by looking for angle brackets, 2 special characters that look like this: < >. When creating a tag, you type HTML lawmaking between the brackets. This lawmaking is for the browser'south optics only; web visitors never meet it (unless they employ the View Source command to peek at the HTML). Essentially, the code is an instruction that conveys information to the browser about how to format the text that follows.

For case, one unproblematic tag is the <b> tag, which stands for "bold" (by convention, tag names are usually written in lowercase). When a browser encounters this tag, it switches on boldface formatting, which affects all the text that follows the tag. Hither's an case:

This text isn't bold. <b>This text is bold.

On its own, the <b> tag isn't quite skillful plenty; it's known as a offset tag , which means it switches on some consequence (in this case, assuming lettering). You pair near start tags with a matching cease tag that switches off the upshot.

You can easily recognize an end tag. They wait the same every bit start tags, except that they brainstorm with a forrad slash. That means they kickoff like this </ instead of like this <. So the terminate tag for assuming formatting is </b>. Here's an example:

This isn't bold. <b>Pay attention!</b> Now we're dorsum to normal.

Which a browser displays as:

This isn't bold. Pay attending! Now we're dorsum to normal.

This example reflects some other important principle of browsers: They always process tags in the lodge in which you place them in your HTML. To get the assuming formatting in the right identify, yous need to make sure you position the <b> and </b> tags appropriately.

Every bit you tin see, the browser has a adequately simple job. It scans an HTML document, looking for tags and switching on and off various formatting settings. It takes everything else (everything that isn't a tag) and displays information technology in the browser window.

Note

Adding tags to plain-vanilla text is known as marking up a document, and the tags themselves are known as HTML markup . When you expect at raw HTML, you lot may be interested in looking at the content (the text nestled between the tags) or the markup (the tags themselves).

Understanding Elements

Most tags come in pairs. When you apply a outset tag (similar <b>), you have to include the matching end tag (</b>). This combination of start and end tags, along with the text in between, makes upward an HTML element .

Here's the bones idea: A pair of tags creates a container (see Figure one-seven). You place content (like text) inside that container. For example, when you utilize the <b> and </b> tags, you create a container that applies bold formatting to the text inside the container. As you create spider web pages, you'll use unlike containers to wrap different pieces of text. If you remember well-nigh elements this way, yous'll never forget to include an finish tag.

Effigy 1-vii. To get assuming text, you lot need to offset with the correct container. It's the <b> chemical element.

Notation

When someone refers to the <b> element , she ways the whole shebang—beginning tag, end tag, and the content in between. When someone refers to a <b> tag , she usually means the beginning tag that triggers the effect.

Of form, life wouldn't be much fun (and computer books wouldn't exist nearly as thick) without exceptions. When you get right downwards to it, in that location are really two types of elements:

• Container elements are, by far, the most mutual blazon of element. They apply formatting to the content nestled between the showtime and end tags.

• Standalone elements don't plow formatting on or off. Instead, they insert something, like an image, into a page. One case is the <br> element, which inserts a line suspension in a web page. Standalone elements don't come in pairs, as container elements practice, and you lot may hear them referred to as empty elements because you can't put any text inside them.

In this book, all standalone elements include a slash character earlier the closing >, sort of like an opening and closing tag all rolled into ane. So you'll encounter a line break written equally <br /> instead of <br>. This form, chosen the empty chemical element syntax , is handy because it conspicuously distinguishes container elements from standalone elements. That way, you'll never become confused.

Note

In the non-then-distant past, web developers were forced to use the empty element syntax—that is, tags that terminate with a frontwards slash—considering information technology was an official role of the (now superseded) XHTML language. Today, the trailing slash is optional, so standalone elements tin can use the same syntax equally start tags (which means y'all can apply either <br /> or <br> to insert a line break, for example).

Figure 1-8 puts the ii types of elements in perspective.

Figure one-viii. Top: This snippet of HTML shows both a container element and a standalone element. Bottom: The browser shows the resulting web page.

Nesting Elements

In the previous instance, you lot practical a elementary <b> element to get assuming formatting. You put the text betwixt the <b> and </b> tags. However, text isn't the just thing yous can put between a start and an end tag. You can also nest one element within another. In fact, nesting elements is common do in building spider web pages. Information technology lets you utilize more detailed style instructions to text by combining all the formatting elements in the same set of instructions. Y'all can too nest elements to create more complicated page components, similar bulleted lists (see Structuring Your Text).

To run across nesting in activity, y'all demand some other chemical element to piece of work with. For this example, consider what happens if you desire to make a piece of text bold and italicized. HTML doesn't include a single chemical element for this purpose, then y'all demand to combine the familiar <b> chemical element (to put your text in boldface) with the <i> chemical element (to italicize it). Here's an instance:

This <b><i>word</i></b> has bold and italic formatting.

When a browser chews through this scrap of HTML, it produces text that looks like this:

This word has bold and italic formatting.

Incidentally, it doesn't matter if you opposite the order of the <i> and <b> tags. The following HTML produces exactly the same result.

This <i><b>word</b></i> has italic and bold formatting.

However, yous should always make sure that yous close tags in the reverse guild from which y'all opened them. In other words, if you utilize italic formatting and then bold formatting, yous should switch off assuming formatting start, and then italic formatting. Here's an example that breaks this rule:

This <i><b>discussion</i></b> has italic and bold formatting.

Browsers can usually sort this out and make a good guess about what you actually want, simply it's a dangerous habit to get into as you lot write more circuitous HTML.

Every bit you'll see in later on chapters, HTML gives you lot many more ways to nest elements. For example, you can nest one element inside some other, and and then nest another element inside that i, and then on, indefinitely.

Annotation

If you're a graphic-design blazon, you're probably itching to become your hands on more powerful HTML tags to modify alignment, spacing, and fonts. Unfortunately, in the web world, you tin't always control everything you lot want. Chapter 2 has the lowdown, and Affiliate 3 introduces the best solution, called mode sheets .

Understanding HTML Documents

Then far, y'all've considered snippets of HTML—portions of a complete HTML document. This gave you a taste of how HTML works, but you'll need to step up your game before you tin conquer the Web. In this section, yous'll learn about the structure that makes the deviation between a scrap of HTML and an official HTML document.

The Document Type Definition

In the early days of the Internet, web browsers were riddled with quirks. When people designed web pages, they had to take these quirks into account. For example, browsers might summate the margins around floating boxes of text in subtly different means, causing pages to look right in one browser only appear odd in another.

Years afterwards, the rules of HTML (and CSS, the style canvas standard you'll acquire almost in Chapter 3) were formalized. Using these new rules, every browser could display the same page in exactly the same way. But this change caused a serious headache for longstanding browsers, like Internet Explorer, that had lived through the dark ages of HTML. Information technology had to somehow support the new standards while still being able to properly brandish existing spider web pages—including those that relied on one-time quirks.

The web community settled on a uncomplicated solution. When designing a new, modern spider web page, you point this fact past adding a code called a certificate blazon definition (DTD) or doctype , which goes at the very beginning of your HTML document (Figure 1-ix).

Figure 1-9. The document blazon definition (DTD) is the kickoff piece of information in an HTML file. Information technology tells the browser what markup standard yous used to write the page.

When a browser encounters a doctype, it switches into standards mode and renders the folio in the well-nigh consequent, standardized way possible. The finish result is that the page looks virtually identical in every mod browser.

But when a browser encounters an HTML certificate that doesn't have a doctype, all bets are off. Internet Explorer, for example, switches into the dreaded quirks way , where it attempts to behave the same way it did x years ago, quirks and all. This ensures that really old spider web pages retain the look they had when they were first created, even if they rely on ancient browser bugs that have long since been fixed. Unfortunately, different browsers bear differently when y'all view a page without a doctype. Y'all're likely to become varying text sizes, inconsistent margins and borders, and improperly positioned content. For that reason, spider web pages without doctypes are bad news, and you should avoid creating them.

In the by, web designers used unlike doctypes to indicate unlike versions of HTML markup (for example, XHTML, HTML5, or truly onetime HTML 4.01). But today, web developers near always use the simple, universal HTML5 doctype:

<!DOCTYPE html>

Even though this doctype was formalized as role of HTML5, every browser supports information technology—even onetime versions of IE that have never heard of HTML5. That's because the universal doctype doesn't indicate anything well-nigh the HTML version yous adopt. Instead, it just indicates that the linguistic communication is HTML. This one-line doctype but reflects the true philosophy of HTML—to support documents former and new.

For comparison, here's the much wordier doctype for XHTML 1.0, which you may still stumble across in older spider web pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Even seasoned spider web developers had to copy the XHTML 1.0 doctype from an existing web folio to avoid typing it in wrong.

In this book, all the examples use the HTML5 doctype non only because it'due south the electric current standard, just because it prepares your pages for the future, too. Simply simply considering you use this doctype doesn't mean you lot can utilise all of HTML5's features. In fact, yous should avert most of them for the time existence, unless you lot're sure they're well supported by all the browsers that people use today.

Note

In this book, you'll use but HTML5 features that work in all of today's browsers. Just if y'all're interested in learning almost the more experimental parts of the linguistic communication that even so take sketchy browser support, check out HTML5: The Missing Manual (O'Reilly).

The Basic Skeleton

Now you're gear up to make full in the residual of your web page.

To create a true HTML document, you first with three container elements: <html>, <head>, and <trunk>. These three elements work together to depict the bones construction of your page:

<html>

This element wraps everything (other than the doctype) in your web page.

<head>

This chemical element designates the header portion of your certificate, which includes some information almost your web page. The first particular is the title—open your page in a browser, and this title shows up as the caption on the tab. Optionally, the <head> section can also include links to style sheets (which you'll learn most in Chapter 3) and JavaScript files (Chapter 14).

<body>

This element holds the meat of your spider web folio, including the actual content you lot desire displayed to the world.

There's only one right way to utilise these three elements in a folio. Hither's their correct arrangement, with the HTML5 doctype at the beginning of the page:

<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>

Every web page uses this basic framework. The ellipses (…) show where you insert additional data. The spaces betwixt the lines aren't required—they're just there to assistance you meet the element structure more than easily.

Once you take the HTML skeleton in identify, you need to add together two more container elements to the mix. Every web folio requires a <title> element, which goes in the header section of the folio, and yous need to create a container for text in the <trunk> section of the page. One all-purpose text container is the <p> element, which represents a paragraph.

Here's a closer look at the elements you need to add:

<championship>

This element sets the championship for your web folio. The championship plays several roles. Kickoff, web browsers display it in the browser tab or at the height of the browser window. Second, when a company bookmarks your page, the browser uses the title as the bookmark's label. 3rd, when your page turns up in a web search, the search engine normally displays this title equally the start line in the results, followed past a snippet of content from the folio.

<p>

This indicates a paragraph. Web browsers don't indent paragraphs, but they do add a niggling infinite between consecutive paragraphs to proceed them separated.

Hither's the web page with these ii new ingredients (in bold):

<!DOCTYPE html> <html> <head>                              <championship>Everything I Know About Web Blueprint</championship>                            </head> <torso>                              <p></p>                            </body> </html>

If you open this document in a web browser, you'll find that the page is blank, merely the title appears (as shown in Figure 1-10).

Figure 1-10. When a browser displays a spider web page, it shows the folio's title on the browser's tab or at the top of the window. Just be warned: the title won't e'er fit.

Every bit it stands right now, this HTML document is a proficient template for future pages. The basic construction is in place; yous simply need to change the title and add some text. That'southward the task you'll undertake next.

Tutorial: Building a Complete HTML Certificate

In this tutorial, you'll learn to assemble your first genuine spider web folio. You'll be creating an online resumé (skip ahead to The ten Most Important Elements (and a Few More than) to encounter the final outcome), simply the details apply to whatsoever page you create.

Tip

Like all the tutorials in this volume, you tin detect the solution for this exercise on the companion site at http://prosetech.com/web. Simply wait in the folder named Tutorial-1-2 (curt for "Chapter 1, second tutorial"). As y'all craft this page, adding a list, pic, and headings, information technology goes through several iterations. The tutorial files include a separate file for each stage of improvement.

Calculation Your Content

No thing what sort of page you want to create, you e'er start out the aforementioned fashion:

1. Launch your text editor .

   That's Notepad or TextEdit.

2. Type the HTML skeleton into a new file .

   That's the doctype, the root <html> element, and the two major sections of every spider web page: <head> and <body>. Information technology looks like this:

   <!DOCTYPE html> <html> <head> </head> <body> </body> </html>

   To save yourself some fourth dimension in the future, save this page and so copy and paste this HTML skeleton each time yous create a new file. The tutorial binder includes a file named skeleton.htm that helps you lot do just that—it contains the doctype and the 3 standard elements of an HTML folio, just no content.

3. Add a title to the <head> section .

   Add the <championship> element on a new line, betwixt the opening <head> tag and the closing </head> tag:

                                             <title>Hire Me!</championship>                                      

4. Add your content to the <body> section .

   For example, suppose you lot desire to write a simple resumé page. Here's a very basic starting time go at it:

   <!DOCTYPE html> <html> <head>                                          <title>Hire Me!</title>                                        </caput> <body>                                          <p>I am Lee Park. Hire me for your company, because my work is                                                              <b>off the hizzle</b>.</p>                                        </torso> </html>

   This instance highlights ( in bold ) the modifications made to the basic HTML skeleton—a changed championship and a unmarried line of text. This case uses a single <b> element within the paragraph, just to apparel upwards the page a lilliputian.

5. Save your HTML file as resume.htm, and open it in a spider web browser .

   If your page displays properly (run into Effigy 1-11), you can be reasonably certain you're off to a good commencement.

Figure ane-xi. Welcome to the Web. This page doesn't have much in the way of HTML goodies (and it probably won't go Lee hired), but it does represent one of the simplest possible HTML pages you tin create.

Using the HTML techniques described in the following sections, you can build on this example and give Lee a better resumé. Each time you lot make changes to your certificate in the text editor, refresh the page in your web browser to see if yous're still on track.

Structuring Your Text

As you start to create more detailed web pages, y'all'll quickly discover that building a page isn't as straightforward every bit, say, creating a page in Microsoft Word. For example, y'all may decide to enhance the resumé folio by creating a listing of skills. Here's a reasonable first endeavour:

<!DOCTYPE html> <html> <head> <title>Hire Me!</title> </caput> <torso> <p>I am Lee Park. Hire me for your company, because my work is <b>off the hizzle</b>.                              My skills include:                                            *Fast typing (nearly 12 words/minute).                                            *Extraordinary pencil sharpening.                                            *Inventive excuse making.                                            *Negotiating with officers of the peace.</p>                            </body> </html>

The trouble appears when you open up this seemingly innocent document in your web browser (Figure i-12).

Figure i-12. HTML disregards line breaks and sequent spaces, and then what appears as neatly organized text in your HTML file can turn into a jumble of text when yous display it in a browser.

The problem is that HTML ignores actress white space. That includes tabs, line breaks, and extra spaces (anything more than one consecutive space). The starting time time this happens, you'll probably stare at your screen dumbfounded and wonder why spider web browsers are designed this way. Merely it actually makes sense when you lot consider that HTML needs to work as a universal standard .

Say yous customize your hypothetical web page with the perfect spacing, indenting, and line width for your computer monitor. The hitch is, this folio may not look every bit good on someone else'due south monitor. For case, some of the text may scroll off the correct side of the folio, making it difficult to read. And different monitors are only part of the trouble. Today's web pages demand to piece of work on unlike types of devices . Lee Park's hereafter dominate might view Lee's resumé on anything from the latest widescreen laptop to a tablet computer or smartphone.

To deal with this range of display options, HTML uses elements to define the structure of your document. Instead of telling the browser, "Here's where y'all go to the adjacent line and here's where yous add four extra spaces," HTML tells the browser, "Here are two paragraphs and a bulleted listing." It'south upwards to the browser to display the folio, using the instructions you lot include in your HTML.

To correct the resumé case, you demand to use more than paragraph elements and 2 new container elements:

<ul>

Indicates the commencement of a bulleted list, chosen an unordered listing in HTML lingo. A list is the perfect fashion to particular Lee's skills.

<li>

Indicates an private item in a bulleted list. Your browser indents each list item and, for sentences that become beyond a unmarried line, properly indents subsequent lines so they align nether the first i. In addition, it precedes each item with a bullet (•). Yous can utilize a list detail merely inside a list element similar <ul>. In other words, every list item (<li>) needs to sit within a list element (<ul>).

Here's the corrected web page (shown in Effigy 1-xiii), with the structural elements highlighted in bold:

<!DOCTYPE html> <html> <caput> <title>Hire Me!</title> </caput> <body>                              <p>              I am Lee Park. Hire me for your company, because my piece of work is <b>off the hizzle</b>.                </p>                                            <p>              My skills include:                </p>                                            <ul>                                            <li>              Fast typing (about 12 words/minute).                </li>                                            <li>              Extraordinary pencil sharpening.                </li>                                            <li>              Inventive excuse making.                </li>                                            <li>              Negotiating with officers of the peace.                </li>                                            </ul>                            </trunk> </html>

Figure 1-13. With the right elements (every bit shown in the code on this page), a browser understands the construction of your HTML certificate and knows how to display it.

Y'all can plough a browser's habit of ignoring line breaks to your advantage. To help make your HTML documents more readable, add together line breaks and spaces wherever you want. Web experts oft employ indentation to brand the structure of nested elements easier to empathise. In the resumé example, y'all can see this style in practice. Notice how the list items (the lines starting with the <li> element) are indented. This has no effect on the browser, but it makes it easier for y'all to come across the structure of the HTML document and to guess how a browser will return information technology.

Figure one-xiv analyzes the HTML certificate using a tree model . The tree model is a handy fashion to go familiar with the anatomy of a spider web folio, because it shows the page's overall construction at a glance. Yet, every bit your web pages become more complicated, they'll probably get too complex for a tree model to exist useful.

Figure one-14. Here's another manner to look at the HTML you created. The tree model shows you how you nested HTML elements. By following the arrows, you lot tin see that the top-level <html> element contains <head> and <body> elements. Inside the <head> element is the <championship> chemical element, and inside the <body> element are ii paragraphs and a bulleted list with four items in it. If yous stare at the tree model long enough, yous'll understand why HTML calls all these elements "container elements."

If y'all're a masochist, yous don't need to use any spaces. The previous example is exactly equivalent to the following much-less-readable HTML certificate:

<!DOCTYPE html><html><head><title>Rent Me!</championship></head><body><p>I am Lee Park. Hire me for your visitor, because my work is <b>off the hizzle </b>.</p><p>My skills include:</p><ul><li>Fast typing (well-nigh 12 words/infinitesimal).</li><li> Extraordinary pencil sharpening.</li><li>Inventive alibi making.</li><li> Negotiating with officers of the peace.</li></ul> </trunk></html>

Of course, it'due south well-nigh impossible for a human to write HTML like this without making a fault.

Where Are All the Pictures?

Whether it's a stock chart, a logo for your underground garage ring, or a doctored photo of your favorite celebrity, the Spider web would be pretty drab without pictures. And so far, you've seen how to put text into an HTML certificate, simply what happens when yous need an image?

Although information technology may seem surprising, you can't store a picture inside an HTML file. There are plenty of skillful reasons why yous wouldn't want to anyhow—your web page files would become really large, it would be hard to modify your pictures or practice other things with them, and you'd have a fiendish time editing your pages in a text editor because the epitome information would make a mess. The solution is to store your pictures every bit separate files, and then link your HTML document to them. This way, your browser pulls up the pictures and positions them exactly where you want them on your page.

The linking tool that inserts pictures is the <img> element (brusk for "image"). It points to an image file, which the browser retrieves and inserts into the folio. Y'all can put the image file in the same binder as your web page (which is the easiest option), or you can put it on a completely dissimilar website.

Although you lot'll larn everything you ever wanted to know most spider web graphics in Chapter 4, it's worth considering a simple example at present. To endeavor this out, yous need a spider web-ready image handy. (The most commonly supported image file types are JPEG, GIF, and PNG.) If you don't accept an image handy, you lot tin can download the sample picture leepark.jpg from the Tutorial-ane-ii folder. Here'southward an case of an <img> element that uses the leepark.jpg file:

<img src="leepark.jpg" alt="Lee Park Portrait" />

Like the <br> element discussed earlier, <img> is a standalone chemical element with no content. For that reason, it makes sense to utilize the empty element syntax and add a forward slash earlier the endmost angle bracket.

Withal, in that location's an obvious difference between the <br> element and the <img> element. Although <img> is a standalone element, it isn't cocky-sufficient. In order for the element to mean annihilation, you demand to supply 2 more than pieces of data: the name of the epitome file and some alternate text, which is used in cases where a browser can't download or display the picture (see Alternating Text). To incorporate this extra data into the image element, HTML uses attributes , extra pieces of information that announced after an chemical element name, only earlier the closing > grapheme.

The <img> example includes two attributes, separated past a space. Each attribute has two parts—a proper noun (which tells the browser what the attribute does) and a value (a slice of information you lot supply). The name of the first <img> attribute is src, which is shorthand for "source"; it tells the browser where to go the image you want. In this example, the value of the src attribute is leepark.jpg , which is the name of the file with Lee Park's headshot.

The name of the second <img> attribute is alt, which is autograph for "alternating text." It tells a browser that y'all desire it to show text if it can't display the paradigm. Its value is the text you want to display, which is "Lee Park Portrait" in this case.

Once yous understand the paradigm element, yous're ready to use it in an HTML document. Just identify it wherever information technology makes sense, inside or subsequently an existing paragraph:

<!DOCTYPE html> <html> <caput> <title>Hire Me!</championship> </head> <torso> <p>I am Lee Park. Rent me for your visitor, considering my work is <b>off the hizzle</b>.                              <img src="leepark.jpg" alt="Lee Park Portrait" />                            </p> <p>My skills include:</p> <ul>   <li>Fast typing (nearly 12 words/minute).</li>   <li>Extraordinary pencil sharpening.</li>   <li>Inventive alibi making.</li>   <li>Negotiating with officers of the peace.</li> </ul> </body> </html>

Figure 1-15 shows exactly where the picture ends up.

Effigy i-xv. Here'south a web folio that embeds a picture, thanks to the linking power of the image element. To display this document, a web browser performs a separate request to retrieve the image file. Equally a result, your browser may display the text of the web folio before information technology downloads the graphic, depending on how long the download takes (typically, that's a fraction of a second).

Annotation

You'll learn many more than techniques for web graphics, including how to change their size and wrap text around them, in Chapter 4.

The ten Nigh Important Elements (and a Few More than)

You've now reached the betoken where yous can create a basic HTML certificate, and you already take several elements nether your belt. You lot know the fundamentals—all that'south left is to expand your knowledge by learning how to use more elements.

HTML has a relatively pocket-size set up of elements. You'll near likely use fewer than 25 on a regular basis. This is a key function of HTML's success, because information technology makes HTML a uncomplicated, shared linguistic communication that anyone tin can sympathise.

Note

You can't define your own elements and apply them in an HTML certificate, considering web browsers won't know how to translate them.

Some elements, like the <p> element that formats a paragraph, are important for setting out the overall structure of a folio. These are called block elements . Block elements go actress infinite—when you add ane to a page, the browser starts a new line (separating this block element from the preceding 1). The browser also adds a new line at the end of the cake element, separating it from the post-obit element.

You can place cake elements directly inside the <body> section of your spider web page or inside another cake chemical element. Table 1-1 provides a quick overview of some of the most fundamental block elements, several of which you've already seen. It likewise points out which of these are container elements and which are standalone elements. (As you learned on Understanding Elements, container elements require start and end tags, but standalone elements get by with only a single tag.) Yous'll study all of these elements more closely in Chapter 2.

Table 1-1. Basic block elements.

ELEMENT	NAME	TYPE OF Element	DESCRIPTION
<p>	Paragraph	Container	Every bit your high schoolhouse English instructor probably told you, the paragraph is the basic unit of measurement for organizing text. When you employ more than one paragraph element in a row, a browser inserts space between the two paragraphs—just a bit more than than a full blank line.
<h1>,<h2>,<h3>, <h4>,<h5>,<h6>	Heading	Container	Heading elements are a skilful fashion to add structure to your folio and brand titles stand out. They display text in big, boldfaced letters. The lower the number, the larger the text, and so <h1> produces the largest heading. By the fourth dimension you get to <h5>, the heading has dwindled to the same size every bit normal text, and <h6>, although assuming, is actually smaller than normal text.
<hr>	Horizontal line (or horizontal dominion in HTML-speak)	Standalone	A horizontal line can help yous dissever ane section of your web page from some other. The line automatically matches the width of the browser window. (Or, if you put the line within some other element, like a cell in a tabular array, it takes on the width of its container.)
<ul>,<li>	Unordered list, list particular	Container	These elements allow you lot build basic bulleted lists. The browser automatically puts private list items on separate lines and indents each ane. For a quick change of pace, y'all can substitute <ul> with <ol> to get an automatically numbered list instead of a bulleted listing (ol stands for "ordered list").

Other elements are designed to deal with smaller structural details—for example, snippets of bold or italicized text, line breaks, links that lead to other web pages, and images. These elements are called inline elements . You can put an inline chemical element in a block chemical element, but you should never put a block chemical element inside an inline element. Table ane-ii lists the about useful inline elements.

Table 1-2. Basic inline elements.

ELEMENT	Proper noun	TYPE	DESCRIPTION
<b>, <i>	Bold and italic	Container	These two elements apply character styling—either bold or italic text. (Technically, <i> means "text in an alternate phonation" and <b> ways "stylistically get-go text," and in that location are ways to modify the formatting they utilise, as you'll come across in Chapter 3. But in the real world, almost all web developers look that <i> means italics and <b> ways bold.)
<br>	Line interruption	Standalone	Sometimes, all you want is text separated by simple line breaks, not separate paragraphs. This keeps subsequent lines of text closer together than when you utilise a paragraph.
<img>	Image	Standalone	To display an epitome inside a web page, apply this element. Make sure you specify the src attribute to indicate the filename of the picture yous want the browser to show.
<a>	Anchor	Container	The anchor chemical element is the starting point for creating hyperlinks that let website visitors spring from one page to another. You'll acquire about this indispensable element in Affiliate 6.

To make the sample resumé expect more respectable, y'all can employ a few of the ingredients from Tabular array one-1 and Table one-2. Effigy 1-xvi shows a revised version of the web page that throws some new elements into the mix.

Figure 1-16. Featuring more headings, lists, and a horizontal line, this HTML document adds a little more mode to the resumé.

Here's the pumped-up HTML, with the new headings and the horizontal rule highlighted in bold:

<!DOCTYPE html> <html> <caput>   <championship>Rent Me!</title> </head> <body>   <h1>Hire Me!</h1>   <p>I am Lee Park. Hire me for your visitor, because my work is <b>off the hizzle</b>. As proof of my staggering computer skills and monumental work ethic, please relish this electronic resume.</p>                              <h2>Indispensable Skills</h2>                            <p>My skills include:</p>   <ul>     <li>Fast typing (virtually 12 words/minute).</li>     <li>Extraordinary pencil sharpening.</li>     <li>Inventive excuse making.</li>     <li>Negotiating with officers of the peace.</li>   </ul>   <p>And I besides know HTML!</p>                              <h2>Previous Piece of work Experience</h2>                            <p>I have had a long and illustrious career in a multifariousness of trades.      Here are some highlights:</p>   <ul>     <li>2008-2009 - Worked as a typist at <i>Flight Fingers</i></li>     <li>2010-2013 - Performed cutting-border spider web design at <i>Riverdale      Subcontract</i></li>     <li>2014-2015 - Starred in Chapter i of <i>Creating a Website: The      Missing Manual</i></li>   </ul>                              <hr />                            </body> </html>

Don't worry if this case has a bit too much markup for you to digest at once. In the next affiliate, you'll get some more practise turning ordinary text into structured HTML.

Checking Your Pages for Errors

Even a web designer with the best intentions can write bad markup and break the rules of HTML. Although browsers really should catch these mistakes, virtually none of them exercise. Instead, they do their best to ignore mistakes and display flawed documents.

At beginning glance, this seems similar a cracking design—after all, it smooths over any small slip-ups you might make. Just there's a dark side to tolerating mistakes. In particular, this behavior makes it all also easy for serious errors to lurk undetected in your web pages. What's a serious fault? A problem that's harmless when you view the page in your favorite browser but makes an embarrassing appearance when someone views the folio in another browser; a mistake that goes undetected until y'all edit the code, which inadvertently exposes the problem the next time your browser displays the page; or an error that has no effect on page display but prevents an automated tool (like a search engine) from reading the page.

Fortunately, there'due south a way to grab problems like these. You can utilise a validation tool that reads through your web page and checks its markup. If you utilize a professional person spider web design tool like Dreamweaver, you can utilise its built-in fault-checker (Affiliate 5 has the details). If yous create pages by hand in a text editor, you tin can use a costless online validation tool (see below).

Here are some potential problems that a validator can catch:

• Missing mandatory elements (for example, the <title> element).

• A container get-go tag without a matching end tag.

• Incorrectly nested tags.

• Tags with missing attributes (for example, an <img> element without the src attribute).

• Elements or content in the incorrect place (for example, text that's placed straight in the <caput> section).

You tin can find plenty of validation tools online. The post-obit steps show how to employ the popular validator provided by the W3C standards organization (the official owners of the HTML language). Try it out with the resume.htm file you created in the second tutorial (Tutorial: Building a Complete HTML Document). Or give the validator something to complain about with the popsicles.htm file yous created in the first tutorial (Tutorial: Creating an HTML File). Considering information technology'south an HTML snippet, non a full HTML document, the validator is quick to complain about the missing bits, like the required <html>, <head>, and <body> elements.

Once yous determine what yous want to validate, here's what to do:

1. Make sure your document has a doctype (Understanding HTML Documents).

   The doctype tells the validator what rules to apply when validating your document. In this book, nosotros stick with the universal HTML5 doctype (The Bones Skeleton).

2. In your web browser, go to http://validator.w3.org (Figure ane-17).

   The W3C validator gives y'all three choices, represented past iii tabs: Validate by URI (for a page that'due south already online), Validate by File Upload (for a page that's stored on your reckoner), and Validate past Direct Input (for markup you type straight into the provided box).

   

   Effigy ane-17. The website http://validator.w3.org gives you three options for validating HTML. You can make full in the address of a page on the Web, you can upload a file of your own (shown hither), or you lot can blazon the markup in straight.

3. Click the tab yous want, and supply your HTML content .

   Validate by URI lets you validate an existing web folio. Simply enter the URL (that's the full Cyberspace address) for the folio in the Address box (similar www.MySloppySite.com/FlawedPage.html).

   Validate past File Upload lets you upload any file from your computer. First, click the Browse push button (chosen Cull File in Chrome) to encounter the standard Open dialog box. Scan to the location of your HTML file, select it, and then click Open. This is the easiest manner to make certain you got everything right with the resume.htm page you built before.

   Validate past Direct Input lets y'all validate any markup—you lot just need to type it into the large box provided. The easiest way to use this option is to copy the markup from your text editor and paste it into the box.

   Before standing, you tin click More Options in any of the tabbed windows to prepare other options, but y'all probably won't. It's all-time to let the validator automatically detect the document type; that way, the validator volition use the doctype specified in your spider web folio. Similarly, leave the Graphic symbol Encoding selection gear up to "notice automatically" unless you wrote your page in something other than English language and the validator has trouble determining the correct character set.

4. Click the Bank check push button .

   After a brief delay, the validator reports whether your document passed the validation cheque or, if it failed, what errors the validator detected (see Effigy 1-eighteen).

   The validator besides may offer a few harmless warnings for a perfectly valid HTML document, including a alarm that the character encoding was determined automatically and a warning that the HTML5 validation service is considered to be an experimental, unfinished feature.

Figure one-xviii. In this file, the validator has discovered 10 errors that stalk from ii mistakes. First, the page is missing the mandatory <title> chemical element. 2d, it closes the <li> element before closing the <b> element nested within. (To solve this problem, you would supersede </li></b> with </b> </li>.) Incidentally, this file is still shut enough to correct that browsers can display it correctly.

How To Set Up A Html Page,

Source: https://www.oreilly.com/library/view/creating-a-website/9781449374525/ch01.html

Posted by: edwardscontings1986.blogspot.com

Share this post