Free xhtml manual

Tags define elements and tell the browser how to display them for example, they can tell the browser whether an element is an image or a paragraph of text. Most HTML elements have an opening tag and a closing tag that show where the element begins and ends. We can generalize the format of an HTML element as follows:. Here, content is something we add. HTML elements can have certain attributes that modify their functionality and behavior.

These attributes are written inside the opening tag. For example,. The very aptly named textarea element will display a text input field where our users can write text. In this example, rows and cols are attributes that define the number of rows and columns the textarea should span respectively. Attributes like width and height for img, or rows and cols for textarea are useful directly within HTML.

This is because image elements have a source attribute src which fetches the image to be displayed. HTML elements can be nested inside each other; in other words, one element can hold other elements. Take a look at the following block of code. The previous two examples will display in the exact same way but the latter is easier to read, so we prefer that.

Apart from these, there are a few basic rules that apply to all HTML pages. Headings are exactly as the name suggests. In HTML, there are six headings, ranging from h1 to h6. Heading 1, or h1, is the largest and most significant heading; it signals that this is the most important text on the page.

The significance decreases gradually as we move towards h6. It can link to another page on the same or a different website. This code will display as follows. Notice how hovering the mouse pointer on the link shows the anchor href value in the bottom left corner of the page. The paragraph element, p , is used for text blocks. We usually style paragraphs such that they have a nice space between one another and between the first paragraph and its heading.

Lists are very useful for displaying data in an ordered or unordered list. Everything on a webpage can be imagined to be contained in a series of boxes. Our job as web developers is to arrange these boxes so that the whole page looks nice on all screens.

These boxes contain text, images, and everything else that we see on webpages. The names of these boxes are divisions div and spans span. A good analogy for divs and spans are bags. Bags like handbags or backpacks are not very useful by themselves. No one would carry an empty bag around. They become useful when we store stuff in them—they help us keep things organized. We fill in forms all the time on the internet.

Forms and form elements allow us to accept user input. Start tag: optional End tag: optional Categories: None. Contained By: As the root element of a document. Wherever a subdocument fragment is allowed in a compound document. Content Model: A head element followed by a body element. Attributes Global attributes manifest. Contained By: As the first element in an html element.

Content Model: One or more elements of metadata content , of which exactly one is a title element. Attributes Global attributes.

Start tag: required End tag: required Categories: Metadata content. Contained By: In a head element containing no other title elements. Content Model: Text.

Start tag: required End tag: empty Categories: Metadata content. Contained By: In a head element containing no other base elements. Content Model: Empty. Attributes Global attributes href target. Contained By: Where metadata content is expected. In a noscript element that is a child of a head element. Attributes Global attributes href rel media hreflang type sizes Also, the title attribute has special semantics on this element. Contained By: If the charset attribute is present, or if the element is in the Encoding declaration state : in a head element.

If the http-equiv attribute is present, and the element is not in the Encoding declaration state : in a head element. If the http-equiv attribute is present, and the element is not in the Encoding declaration state : in a noscript element that is a child of a head element.

If the name attribute is present: where metadata content is expected. Attributes Global attributes name http-equiv content charset.

If the scoped attribute is present: flow content. Contained By: If the scoped attribute is absent: where metadata content is expected. If the scoped attribute is absent: in a noscript element that is a child of a head element.

If the scoped attribute is present: where flow content is expected, but before any other flow content other than other style elements and inter-element whitespace. Content Model: Depends on the value of the type attribute. Attributes Global attributes media type scoped Also, the title attribute has special semantics on this element. Flow content. Phrasing content. Where phrasing content is expected.

Content Model: If there is no src attribute, depends on the value of the type attribute. If there is a src attribute, the element must be either empty or contain only script documentation. Attributes Global attributes src async defer type charset. Where phrasing content is expected in HTML documents , if there are no ancestor noscript elements.

Content Model: When scripting is disabled , in a head element: in any order, zero or more link elements, zero or more style elements, and zero or more meta elements. When scripting is disabled , not in a head element: transparent , but there must be no noscript element descendants. Otherwise: text that conforms to the requirements given in the prose. Start tag: optional End tag: optional Categories: Sectioning root. Contained By: As the second element in an html element.

Content Model: Flow content. Attributes Global attributes onbeforeunload onerror onhashchange onload onmessage onoffline ononline onpopstate onresize onstorage onunload. Start tag: required End tag: required Categories: Flow content. Sectioning content. Contained By: Where flow content is expected. Heading content. Content Model: Phrasing content.

Content Model: Flow content , including at least one descendant that is heading content , but no sectioning content descendants, no header element descendants, and no footer element descendants.

Content Model: Flow content , but with no heading content descendants, no sectioning content descendants, and no footer element descendants. Content Model: Flow content , but with no heading content descendants, no sectioning content descendants, no footer element descendants, and no address element descendants. Start tag: required End tag: optional Categories: Flow content. Start tag: required End tag: empty Categories: Flow content. Contained By: Where phrasing content is expected.

Content Model: Zero or more pairs of one dt element followed by one dd element. Sectioning root. Attributes Global attributes cite. Content Model: Zero or more li elements. Attributes Global attributes reversed start. Start tag: required End tag: optional Categories: None. Contained By: Inside ol elements. Inside ul elements. Inside menu elements. Attributes Global attributes If the element is a child of an ol element: value. Content Model: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.

Contained By: Before dd or dt elements inside dl elements. Before a dd element inside a dialog element. Contained By: After dt or dd elements inside dl elements. After a dt element inside a dialog element. Start tag: required End tag: required Categories: Interactive content. When the element only contains phrasing content : phrasing content. Content Model: Transparent , but there must be no interactive content descendant. Attributes Global attributes href target ping rel media hreflang type.

Content Model: Phrasing content , but there must be no descendant dfn elements. Attributes Global attributes Also, the title attribute has special semantics on this element. Attributes Global attributes datetime. Attributes Global attributes value max. Attributes Global attributes value min low high max optimum. Attributes Global attributes Also, the dir global attribute has special semantics on this element.

Content Model: One or more groups of: phrasing content followed either by a single rt element, or an rp element, an rt element, and another rp element. Start tag: required End tag: required Categories: None. Contained By: As a child of a ruby element. Contained By: As a child of a ruby element, either immediately before or immediately after an rt element. Content Model: If the rp element is immediately after an rt element that is immediately preceded by another rp element: a single character from Unicode character class Pe.

Otherwise: a single character from Unicode character class Ps. Content Model: Transparent. Attributes Global attributes cite datetime. Content Model: Either: one legend element followed by flow content. Or: Flow content followed by one legend element.

Or: Flow content. Embedded content. If the element has an usemap attribute: Interactive content. Contained By: Where embedded content is expected. Attributes Global attributes alt src usemap ismap width height. Content Model: Text that conforms to the requirements given in the prose. Attributes Global attributes src name sandbox seamless width height. Attributes Global attributes src type width height Any other attribute that has no namespace see prose.

Listed , submittable , form-associated element. Content Model: Zero or more param elements, then, transparent. Attributes Global attributes data type name usemap form width height. Start tag: required End tag: empty Categories: None. Contained By: As a child of an object element, before any flow content. Attributes Global attributes name value. If the element has a controls attribute: Interactive content. Content Model: If the element has a src attribute: transparent.

If the element does not have a src attribute: one or more source elements, then, transparent. Attributes Global attributes src poster autobuffer autoplay loop controls width height. Attributes Global attributes src autobuffer autoplay loop controls. Contained By: As a child of a media element , before any flow content. Attributes Global attributes src type media.

Attributes Global attributes width height. Attributes Global attributes name. Contained By: Where phrasing content is expected, but only if there is a map element ancestor. Attributes Global attributes alt coords shape href target ping rel media hreflang type.

Content Model: In this order: optionally a caption element, followed by either zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element but there can only be one tfoot element child in total.

Contained By: As the first element child of a table element. Contained By: As a child of a table element, after any caption elements and before any thead , tbody , tfoot , and tr elements. Content Model: Zero or more col elements.

Attributes Global attributes span. Contained By: As a child of a colgroup element that doesn't have a span attribute. Contained By: As a child of a table element, after any caption , colgroup , and thead elements, but only if there are no tr elements that are children of the table element.

Content Model: Zero or more tr elements Attributes Global attributes. Contained By: As a child of a table element, after any caption , and colgroup elements and before any tbody , tfoot , and tr elements, but only if there are no other thead elements that are children of the table element.

Contained By: As a child of a table element, after any caption , colgroup , and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element.

As a child of a table element, after any caption , colgroup , thead , tbody , and tr elements, but only if there are no other tfoot elements that are children of the table element. Contained By: As a child of a thead element. As a child of a tbody element. As a child of a tfoot element. As a child of a table element, after any caption , colgroup , and thead elements, but only if there are no tbody elements that are children of the table element.

Content Model: Zero or more td or th elements Attributes Global attributes. Start tag: required End tag: optional Categories: Sectioning root. Contained By: As a child of a tr element. Attributes Global attributes colspan rowspan headers. Attributes Global attributes colspan rowspan headers scope.

Content Model: Flow content , but with no form element descendants. Attributes Global attributes accept-charset action autocomplete enctype method name novalidate target. Listed form-associated element. Content Model: One legend element follwed by flow content. Attributes Global attributes disabled form name. Interactive content. Form-associated element. Content Model: Phrasing content , but with no descendant labelable form-associated elements unless it is the element's labeled control , and no descendant label elements.

Attributes Global attributes form for. If the type attribute is not in the Hidden state: Interactive content. Listed , labelable , submittable , and resettable form-associated element. Attributes Global attributes accept action alt autocomplete autofocus checked disabled enctype form height list max maxlength method min multiple name novalidate pattern placeholder readonly required size src step target type value width. Listed , labelable , and submittable form-associated element. Content Model: Phrasing content , but there must be no interactive content descendant.

Attributes Global attributes action autofocus disabled enctype form method name novalidate target type value. Content Model: Zero or more option or optgroup elements. Attributes Global attributes autofocus disabled form multiple name size.

Content Model: Either: phrasing content. Or: Zero or more option elements. Contained By: As a child of a select element. Content Model: Zero or more option elements. Attributes Global attributes disabled label. As a child of a datalist element. As a child of an optgroup element. Attributes Global attributes disabled label selected value. Attributes Global attributes autofocus cols disabled form maxlength name readonly required rows wrap. Listed and resettable form-associated element.

Attributes Global attributes for form name. Content Model: One legend element followed by flow content. Attributes Global attributes open. Attributes Global attributes type label icon disabled checked radiogroup default Also, the title attribute has special semantics on this element.

Attributes Global attributes type. If the element's type attribute is in the tool bar state: Interactive content. Content Model: Either: Zero or more li elements. Attributes Global attributes type label. Contained By: As the first child of a fieldset element. As the first child of a details element. As a child of a figure element, if there are no other legend element children of that element. Text , elements , comments , character references. Optional for selected elements; forbidden for void elements or if empty element tag is used; required for others.

Required for all elements with matching start tag, unnecessary and forbidden if empty element tag is used. As the root element of a document. A head element followed by a body element. As the first element in an html element. W hen that tim e com es, proper planning w ill be a far m ore im portant aspect of the job. So, what tools do you need?

Any instructions and screen shots will be with Vista in m ind. Windows com es with a very sim ple text editor called Notepad. Many professional web designers who use com plicated software packages first started out m any years ago using Notepad; indeed, m any professionals who have expensive pieces of software that should be tim e -savers still resort to using Notepad for m any tasks.

It also loads m uch m ore quickly than fully-featured web developm ent program s. Bells and whistles are definitely not featured. Tip: Shortcut to Notepad To save y ourself navigating to this location each tim e y ou w ant to open N otepad, create a shortcut on y our desktop.

W hen y ou release the m ouse button, a shortcut to the application w ill appear on y our desktop. Notepad is the m ost basic of applications, as you can see below. Internet Explorer sits right there in the Start m enu, also in the Pro gram s folder accessed via All Pro gram s from the Start m enu , in the Qu ick Lau n ch area bottom left of the Start m enu, near the Windows logo , and a shortcut m ay also lurk on your desktop.

These tools are virtually equivalent to the Windows program s m entioned above. Unlike Notepad, TextEdit works as a rich text editor by default, which m eans we can work with fonts, m ake text bold and italic, and so on.

The next tim e you create a new file in TextEdit, it will be a plain text docum ent. You can usually find Safari in the d o ck the dock is the bar of icons at the bottom of your screen , but you can also access it through the Applications folder. To add a program to the dock, just drag its icon from the Applications folder onto the dock, and presto!

The application is now easily accessible w henever y ou need it. If you are using a slightly older Mac, you m ay also have a copy of Internet Explorer installed. Our advice for Internet Explorer for Mac? Send it to Trash. It also bears no real resem blance to its Windows counterpart, for those m ore com fortable using IE. Be yon d t h e Ba sic Tools You can certainly m ake a good start using the tools m entioned above. Countless other text editors and web browsers are available for download, and m any of them are free.

Fire fo x As m entioned in the Preface, Firefox is a very popular alternative to Internet Explorer and, as we proceed through this book, it will be our browser of choice for a num ber of reasons. As with NoteTab, Firefox offers a tabbed interface that helps keep your com puter free from window clutter. However, there are a few program s that you m ight like to consider as you m ove beyond the basics. As with NoteTab for Windows, TextWrangler can tidy up your workspace by allowing several text files to be open for editing at the sam e tim e the docum ents are listed in a pull-out drawer to one side of the interface, rather than in tabs.

Fire fo x Firefox is popular not just am ong Windows users, but also with Mac users, m any of whom prefer to use it instead of Safari often because of the extra features—known as ad d -o n s —that can be bolted on to the browser.

A web page viewed in Firefox should display the sam e regardless of whether the browser is installed on a PC running Windows XP or Vista, on a Mac running OS X, or on Linux, a free, open source operating system generally favored by highly technical people who like to tinker with their com puters a lot.

The predictability of Firefox is a welcom e change from the bad old days of endless browser com petition, and is one very good reason why we will m ainly use Firefox in the exam ples included in this book. A professional im age editing program , like Photoshop or Fireworks, costs hundreds of dollars. If you already have a copy of one of these, or a sim ilar im age editing program , by all m eans use it and experim ent with it. Keep an eye open for free im age editors that are included on disks attached to the covers of Internet, com puting, and design m agazines.

Software vendors often give away older versions of their software in the hope that users m ight be tem pted to upgrade to a new version at a later date. Look out for Paint Shop Pro, or any im age editor that supports laye rs —a way to construct an im age by stacking 2 or m ore layers, one on top of the other. Ta k in g t h e Big Bo y s fo r a Sp in The m ost com m only used im age editing packages are available for trial dow nload. They are large dow nloads hundreds of m egaby tes and m ay need to be left to dow nload overnight, even on a broadband connection.

How ever, those 30 day s m ight just be enough tim e for y ou to use the softw are w hile y ou w ork through this book. Ad o be Ph o to s h o p A trial of the latest version of Photoshop is available for download [7]. Ad o be Fire w o rks You can download a trial version of Fireworks from the Adobe web site [10 ]. W in dow s Tools A standard Windows install has not always been blessed with im age editing software. In Windows Vista, the Photo Gallery application has seen som e big im provem ents over its previous XP incarnation and now includes som e basic, but still useful, im age m anipulation tools, including cropping, color, and contrast adjustm ent.

The Photo Gallery application can be found directly in the Start m enu. With that in m ind, you m ight like to try out an excellent im age m anagem ent tool that Google offers for free download. M a c OS X Tools The Mac has a reputation for being favored by designers and creative types, and the platform m akes m any tools available to the budding artist. However, they usually com e at a price, and often that price is higher than those of the Windows equivalents.

So, what free software can we use on the Mac, assum ing that we want som ething m ore perm anent than a 30 -day trial version of Photoshop or Fireworks?

Grap h icCo n ve rte r GraphicConverter has m uch greater capabilities than its nam e suggests. Although this is prim arily a tool for converting graphic files, it can also be used for sim ple editing tasks. The next task we m ust tick off our to-do list before we go any further is to create a space for your web site on the hard drive.

W in dow s The easiest and m ost logical place to keep your web site files is in a dedicated folder within the D o cu m e n ts folder or the My D o cu m e n ts folder in Windows XP. The D o cu m e n ts folder can be found inside your user folder. Missing y our My Docum ents folder in XP? This is how y ou can return the folder to y our desktop: From the Start Me n u , select Co n tro l Pan e l. Vis ta u s e rs : choose Pe rs o n alizatio n and listed in the top left, under the title Tas ks is the option to Ch an ge D e s kto p Ico n s.

You m ay now also close the Ap p e aran ce an d Pe rs o n alizatio n window. XP u s e rs : select Ch an ge th e d e s kto p backgro u n d from the list of options, then click the Cu s to m ize D e s kto p … button at the bottom. Check the My D o cu m e n ts option in the dialogue box that appears, then click OK. Close the Ap p e aran ce an d Th e m e s window also by pressing OK. What do you do next? Oh, and did we m ention that all this friendly, helpful advice is free of charge?

We thought that m ight encourage you! Finally, we m entioned som e m ore capable—and m ore expensive—options, such as Photoshop and Paint Shop Pro. You r Fir st W e b Pa ge s A wise m an once said that a journey of a thousand m iles begins with a single step.

Elem ents tell the web browser what a particular item in the page is: a paragraph, a heading, a quotation, and so on. There are som e things that are essential to the process of driving; others are m ere fashion item s.

To drive the car you need to have wheels including the steering wheel , and a place to sit. The car m ust also have som e kind of chassis to which the bodywork can be bolted. An engine is required to power the car, as is bodywork to which your nonessential, but spiffy trim can be attached.

Anything less, and all you have is a collection of attractive—but useless! Like the car, your web page also needs to have a chassis: a basic structure upon which everything else can be built. But what does this hypothetical chassis look like? Position your cursor som ewhere on the page other than over an im age , and right-click Ctrl-click on a Mac.

You should be presented with a context m enu sim ilar to those shown below. A car enthusiast would call it a project—a solid foundation that needs a little extra work to turn it in to som ething usable. The sam e goes for a web page. It m ust be the first item on a web page, appearing even before any spacing or carriage returns. Have you ever taken a docum ent you wrote in Microsoft Word 20 0 7 on one com puter, and tried to open it on another com puter that only had Word 20 0 0 on it?

This is where the doctype com es in. The browser uses this inform ation to decide how it should render item s on the screen. Got all that? There are way too m any abbreviations for this paragraph. You should, how ever, be aw are of its existence at the very least. W 3C W 3C is an abbreviation of the nam e W orld W ide W eb Consortium , a group of sm art people spread across the globe w ho, collectively , com e up w ith proposals for the w ay s in w hich com puting and m arkup languages used on the W eb should be w ritten.

The W 3C docum ents are the starting point, and indeed every thing in this book is based on the original docum ents. What com es next? Som e HTML! Rem em ber, elem ents are the bricks that create the structures that hold a web page together. But what exactly is an elem ent?

What does an elem ent look like, and what is its purpose? Inside a tag, there is a tag nam e; there m ay also be one or m ore attributes. The figure below shows what we have. Attributes appear only in the opening tag of any given elem ent. Back to the purpose of the htm l elem ent. There are two m ajor sections inside the htm l elem ent: the head and the body. Th e h e a d Ele m e n t The head [16] elem ent contains inform ation about the page, but no inform ation that will be displayed on the page itself.

As the figure below shows, it really pays to put som ething m eaningful as a title, and not just for the sake of those people who visit our web page. It also appears in the dock on a Mac. If users decide to add the page to their bookm arks or favorites , the title will be used to nam e the bookm ark. Your title elem ent is used heavily by search engines to ascertain what your page contains, and what inform ation about it should be displayed in the search results.

J ust for fun, and to see how m any people forget to type in a useful title, try searching for the phrase Untitled Docum ent in the search engine of your choice. In the exam ple above, the meta tag tells the browser which character set to use specifically, UTF-8, which includes the characters needed for web pages in just about any written language.

Self-closing Elem ents The m eta elem ent is an exam ple of a self-closing elem ent or an em pty elem ent. Even the m ost hardened and w orld-w eary coders w ould have difficulty rem em bering these elem ents exactly , so m ost do the sam e thing—they copy from a source they know to be correct m ost likely from their last project or piece of w ork. Fully -fledged w eb developm ent program s, such as Dream w eaver, w ill norm ally take care of these difficult parts of coding.

But if y ou are using a hum ble text editor and need som e help, y ou need only rem em ber that there is a com pletely searchable HTML reference, accessible at any tim e at SitePoint. Th e body Ele m e n t Finally, we get to the place where it all happens. However, to start to appreciate how everything fits together, you really need to see a sim ple page with som e actual content on it. Hopefully you will get to see how the markup that drives the page relates to the end result that you can see on screen.

Just to show how it works. Enter the filenam e as basic. Select UTF-8 from the Encoding drop -down list. Click Save. Find the Sites folder, enter the filenam e as basic. We want to save this file with an. Because their com puter is set up to read Korean text, and y ours is set up to create English text.

UTF-8 can handle just about any language there is including som e quite obscure ones and m ost com puters can read it, so UTF-8 is alw ay s a safe bet. Next, using Windows Explorer or Finder, locate the file that you just saved, and double-click to open it in your browser.

The figure below shows how the page displays. The figure below shows a direct com parison of the docum ent displays. In the sam e way, the p elem ents contain the text in the two paragraphs. All of our attribute nam es w ill be in low ercase, too. If we wanted to include a subheading beneath this heading, we would use the h2 elem ent.

A subheading under an h2 would use an h3 elem ent, and so on, until we get to h6. The lower the heading level, the lesser its im portance and the sm aller the font size unless you have re-styled the headings with CSS, but m ore of that later in this article.

With headings, an im portant and com m onsense practice is to ensure that they do not jum p out of sequence. In other words, you should start from level one, and work your way down through the levels in num erical order.

The elem ent we use to deal with blocks of text is the p elem ent. An unordered list—known as bullet points to the average person—m akes use of the ul elem ent. In both types of list, individual points or list item s are specified using the li elem ent.

So we use ol for an ordered list, ul for an unordered list, and li for a list item. Sim ple. To see this m arkup in action, type the following into a new text docum ent, save it as lists. A lovely, concise little paragraph. Did you type it all out? Rem em ber, if it seem s like a hassle to type out the exam ples, you can find all the m arkup in the code archive, as I explained in the preface. When displayed in a browser, the above m arkup should look like the page shown below.

Any guesses? All will be revealed in good tim e. The trouble is, if you had a reason to attach the hubcaps that way before, surely you should do it the sam e way again. What a quandary. You m ight build a site then not touch it again for six m onths. Then when you revisit the work, you m ight find yourself going through the all-too-fam iliar head-scratching routine. Fortunately, there is a solution.

XHTML—like m ost program m ing and m arkup languages—allows you to use com m ents. Handy one, that. Why not? Oh, and did you spot how we snuck another new elem ent in there? Read that part to yourself now, and listen to the way it sounds in your head. Now you know when to use the em elem ent. Usin g Com m e n t s t o H ide M a r k u p fr om Br ow se r s Te m por a r ily There is no lim it to the am ount of inform ation you can put into a com m ent, and this is why com m ents are often used to hide a section of a web page tem porarily.

So, what can we do? Thankfully, we can use special little codes called entities in our text instead of these sym bols. None of the exam ples shown so far are worth keeping, though. Th e H om e pa ge : t h e St a r t in g Poin t for All W e b Sit e s At the very beginning of this chapter, we looked at a basic web page with nothing on it the car chassis with no bodywork or interior.

You saved the file as basic.