[title sub="Written by Philip Withnall"]Composr Tutorial: Guide to web technologies (including HTML, CSS, and JavaScript)[/title]

This tutorial is an introduction to the main standard web technologies that Composr is built upon. It does not explain any technologies specific to Composr. If you need to learn about the Composr's own Tempcode technology, please read the [page="_SEARCH:tut_tempcode"]Tempcode programming[/page] tutorial.

[contents]decimal,lower-alpha[/contents]

[title="2"]Overview[/title]

Composr is built on top of standard web/Internet protocols, languages and [abbr="Application Programming Interfaces"]APIs[/abbr]. The main ones are as follows...

[semihtml]
<table class="columned-table results-table autosized-table">
	<thead>
		<tr>
			<th>Protocol</th>
			<th>Description</th>
			<th>Relevance to you</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<th colspan="3"><em>Miscellaneous protocols</em></th>
		</tr>
		<tr>
			<td>[abbr="File Transfer Protocol"][url="https://www.w3.org/Protocols/rfc959/"]FTP[/url][/abbr] and [abbr="Security File Transfer Protocol"][url="https://tools.ietf.org/html/draft-ietf-secsh-filexfer-02"]SFTP[/url][/abbr]</td>
			<td>This is the standard for uploading files to a server.</td>
			<td>It is good to set up an SFTP client (FTP is not secure, so best avoided) and use that for uploading/downloading files. It is more convenient and reliable than using a webhosting control panel's file manager.</td>
		</tr>
		<tr>
			<td>[abbr="Internet Message Access Protocol"][url="https://tools.ietf.org/html/rfc3501"]IMAP[/url][/abbr] and [abbr="Post Office Protocol 3"][url="https://tools.ietf.org/html/rfc1939"]POP3[/url][/abbr]</td>
			<td>These are the common protocols for accessing e-mail.</td>
			<td>Unless you use webmail, you'll be using these already. You don't need any special understanding of them.</td>
		</tr>
		<tr>
			<td>[abbr="Transfer Control Protocol / Internet Protocol"][url="https://tools.ietf.org/html/rfc793"]TCP[/url]/[url="https://www.ietf.org/rfc/rfc2460.txt"]IP[/url][/abbr]</td>
			<td>This is the protocol for transmitting Internet data.</td>
			<td>You won't need much awareness except knowing what IP addresses are and are used for (explained in the [page="_SEARCH:tut_trace"]Using IP addresses to trace users[/page] tutorial).</td>
		</tr>
		<tr>
			<td>[abbr="Domain Name System"][url="https://tools.ietf.org/html/rfc1101"]DNS[/url][/abbr]</td>
			<td>This is the protocol for looking up the IP address for a domain name.</td>
			<td>When you buy and configure a domain name, you are using DNS. Also RBLs (block lists) use DNS.</td>
		</tr>
		<tr>
			<td>[abbr="Domain Name System"][url="https://tools.ietf.org/html/rfc3492"]Punycode[/url][/abbr]</td>
			<td>This is a standard for International Domain Names (IDN).</td>
			<td>When you input URLs into most non-Composr systems you'll need to make sure you use the Puny-coded version (only a tiny minority of users have an IDN though).</td>
		</tr>
		<tr>
			<td>[abbr="Simple Mail Transfer Protocol"][url="https://tools.ietf.org/html/rfc2821"]SMTP[/url][/abbr]</td>
			<td>This is the protocol for sending e-mail.</td>
			<td>Unless you use webmail, you'll be using these already. You don't need any special understanding of it.</td>
		</tr>
		<tr>
			<td>[abbr="Multipurpose Internet Mail Extensions"][url="https://tools.ietf.org/html/rfc2045"]MIME[/url][/abbr]</td>
			<td>This is the standard for the composition of e-mails.</td>
			<td>You don't need to know anything about MIME specifically, but a basic awareness that e-mails can have dual text and HTML versions, and contain both attachments and inline images, is useful.</td>
		</tr>
		<tr>
			<td>[abbr="DomainKeys Identified Mail"][url="https://tools.ietf.org/html/rfc6376"]DKIM[/url][/abbr]</td>
			<td>This is the standard for signing e-mails.</td>
			<td>You don't need to know about this, unless you are configuring it to run on Composr generated e-mails.</td>
		</tr>
		<tr>
			<td>[abbr="Sender Policy Framework"][url="https://www.open-spf.org/"]SPF[/url][/abbr]</td>
			<td>This is the protocol for limiting what servers can send e-mail for a particular domain.</td>
			<td>It is advised to set this up to reduce spam and fraud.</td>
		</tr>
		<tr>
			<td>[abbr="Domain-based Message Authentication, Reporting, and Conformance"][url="https://mxtoolbox.com/dmarc/details/what-is-dmarc"]DMARC[/url][/abbr]</td>
			<td>This protocol defines what should happen if an e-mail fails SPF or DKIM.</td>
			<td>You don't need to know about this unless you want to define special behaviour for e-mails which fail DKIM or SPF validation.</td>
		<tr>
			<td>OAuth</td>
			<td>A protocol allowing your website to authenticate itself to act as a user on a target website.</td>
			<td>OAuth is used for creating some API connections.</td>
		</tr>
		<tr>
			<td>Trackbacks</td>
			<td>A simple protocol for websites to tell other websites when they have referenced a blog post.</td>
			<td>Trackbacks are no longer widely used, but may receive upgrades in the future to break reliance on centralised social networks.</td>
		</tr>

		<tr>
			<th colspan="3"><em>Web</em></th>
		</tr>
		<tr>
			<td>[abbr="HyperText Transfer Protocol"][url="https://datatracker.ietf.org/doc/html/rfc2616"]HTTP[/url][/abbr] with some [url="common extensions"]https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers[/url]</td>
			<td>This is the protocol for transmitting web data. We also use [url="https://indieweb.org/meta_http-equiv_status"]meta http-equiv status[/url].</td>
			<td>You won't need much awareness that web [abbr="Uniform Resource Locator"]URL[/abbr]s come from the HTTP standard, as do cookies, as does HTTP authentication (not used on many sites, but sometimes useful).</td>
		</tr>
		<tr>
			<td>Web server</td>
			<td>This is the software application that serves data over HTTP, and ties into PHP; Apache and [abbr="Internet Information Server"]IIS[/abbr] are examples of the web server applications Composr can use.</td>
			<td>An awareness of web server configuration may be important. For example, how to configure Apache via [tt].htaccess[/tt] files.</td>
		</tr>
		<tr>
			<td>[abbr="eXtensible HyperText Markup Language 5"]XHTML5[/abbr], [abbr="HyperText Markup Language 5"][url="https://www.w3.org/TR/html5/"]HTML5[/url][/abbr] (and microformats)</td>
			<td>This is the standard for web pages. XHTML is (for all intents and purposes) a more formal version of HTML, and we ensure Composr is written to this to make things clear and consistent. You will usually hear people talk about HTML rather than XHTML, and practically you can consider them the same.</td>
			<td>Knowing (X)HTML is crucial to defining layouts and general template editing.</td>
		</tr>
		<tr>
			<td>[abbr="Cascading Style Sheets"][url="https://www.w3.org/Style/CSS/Overview.en.html"]CSS[/url][/abbr]</td>
			<td>This is the standard for styling web pages; it ties into the (X)HTML.</td>
			<td>Knowing CSS is crucial for adjusting theme styles.</td>
		</tr>
		<tr>
			<td>PHP</td>
			<td>This is the programming language Composr is written in.</td>
			<td>Knowledge of PHP is only required if changing core Composr code or developing addons.</td>
		</tr>
		<tr>
			<td>JavaScript (aka [url="https://ecma-international.org/publications-and-standards/standards/ecma-262/"]ECMAScript[/url]) [i](optional)[/i], [abbr="Document Object Model"][url="https://www.w3.org/DOM/DOMTR"]DOM[/url][/abbr], and [url="https://www.w3.org/TR/XMLHttpRequest/"]XMLHttpRequest[/url]</td>
			<td>This is the standard to make web pages interactive; it ties into the (X)HTML.</td>
			<td>You will only need to know JavaScript if doing particularly advanced themeing.</td>
		</tr>
		<tr>
			<td>[url="CSP"]https://www.w3.org/TR/CSP3/[/url]</td>
			<td>Extra security for web pages. Other similar micro standards we use: [tt]X-Content-Type-Options[/tt] and [tt]X-XSS-Protection[/tt] and [tt]Cross-Origin-Opener-Policy[/tt].</td>
			<td>This imposes various constraints on how you can code, but no true limitations.</td>
		</tr>
		<tr>
			<td>[abbr="Scalable Vector Graphics"][url="https://www.w3.org/Graphics/SVG/"]SVG[/url][/abbr]</td>
			<td>Vector graphics standard, used for icons and drawing statistics graphs.</td>
			<td>You are unlikely to need any awareness of this aside from the fact CSP may block your ability to render SVGs as embedded images.</td>
		</tr>
		<tr>
			<td>[url="https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt"]robots.txt[/url]</td>
			<td>Robots exclusion standard. Google's version of the specification is the most accurate to what search engines now support. We also use the [tt]X-Robots-Tag[/tt] header.</td>
			<td>Knowing this may be important for [abbr="Search Engine Optimisation"]SEO[/abbr] and for [abbr="Note that this is a specification; bots do not always respect it"]specifying how bots should access your site[/abbr].</td>
		</tr>
		<tr>
			<td>[url="https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag"]Robots meta tag and X-Robots-Tag HTTP header[/url]</td>
			<td>Specifying what URLs may be indexed. Google's version of the specification is the most accurate to what search engines now support.</td>
			<td>Knowing this may be important for [abbr="Search Engine Optimisation"]SEO[/abbr].</td>
		</tr>

		<tr>
			<th colspan="3"><em>Accessibility and Internationalisation</em></th>
		</tr>
		<tr>
			<td>[url="https://www.w3.org/TR/WAI-WEBCONTENT/"]WCAG 1.0[/url] and [url="https://www.w3.org/TR/WCAG20/"]2.0[/url] and [url="https://www.w3.org/WAI/intro/aria"]WAI-ARIA[/url]</td>
			<td>{$IS_MAINTAINED,standard_accessibility,Accessibility standards}, particularly for blind users.</td>
			<td>We support the highest levels of compliance (AAA).</td>
		</tr>
		<tr>
			<td>[url="https://en.wikipedia.org/wiki/Access_key#UK_Government_recommendation_for_access_keys"]UK Gov. recommendation for access keys[/url] and [url="https://zoek.officielebekendmakingen.nl/stcrt-2006-136-p23-SC75949.html"]Besluit Kwaliteit Rijksoverheidswebsites[/url] and [url="https://www.section508.gov"]Section 508[/url]</td>
			<td>{$IS_MAINTAINED,standard_accessibility,Detailed accessibility standards from particular countries}.</td>
			<td>We support these standards.</td>
		</td>
		<tr>
			<td>[url="https://www.w3.org/WAI/intro/atag.php"]{$IS_MAINTAINED,standard_accessibility,ATAG}[/url]</td>
			<td>Accessibility standards for site authors.</td>
			<td>We are fully compliant.</td>
		</tr>
		<tr>
			<td>ISO character sets and Unicode (UTF-8)</td>
			<td>These are the alternative standards for Internationalisation support; Composr supports both.</td>
			<td>By default Composr uses UTF-8 which means you don't really need much awareness of character sets. It is useful to know how UTF-8 works (particular how some character use more than one byte)</td>
		</tr>

		<tr>
			<th colspan="3"><em>Data &amp; Feeds</em></th>
		</tr>
		<tr>
			<td>[abbr="eXtensible Markup Language"][url="https://www.w3.org/TR/2008/REC-xml-20081126/"]XML[/url][/abbr] (including [abbr="Really Simple Syndication"][url="https://cyber.law.harvard.edu/rss/rss.html"]RSS[/url][/abbr], [url="https://datatracker.ietf.org/doc/html/rfc4287"]Atom[/url], [abbr="Outline Processor Markup Language"][url="https://opml.org/spec2.opml"]OPML[/url][/abbr], [abbr="Extensible Stylesheet Language Transformations"][url="https://www.w3.org/TR/xslt20/"]XSLT[/url][/abbr], [url="https://www.sitemaps.org/"]XML Sitemaps[/url] and [url="https://developers.google.com/search/docs/crawling-indexing/sitemaps/news-sitemap?hl=en&visit_id=638038726780268799-4227682099&rd=2"]Google News Sitemaps[/url], and use in [abbr="Asynchronous JavaScript and XML"]AJAX[/abbr])</td>
			<td>XML is a standard for structuring data, used for many web formats that Composr supports, as well as a few configurable parts of Composr. RSS, Atom and OPML are feed technology, to export Composr news. XSLT is a technology we use to make RSS, Atom and OPML display in a web browser.</td>
			<td>You won't need much awareness of XML unless doing particular advanced configuration.</td>
		</tr>
		<tr>
			<td>File formats like [url="https://datatracker.ietf.org/doc/html/rfc5545"]iCalendar 2.0[/url], JPEG, PNG, ZIP, Tar, Gzip</td>
			<td>These are used in specific areas of Composr, for reading and writing special file types. PNG is an image file format. PNG is used in favour to GIF, as it supports images more than 256 colours, 'alpha transparency' (blended transparency that is not tied to background colour) and is not encumbered by software patents.</td>
			<td>The ability to use image editors, and choose appropriate image file types, is definitely useful.</td>
		</tr>
		<tr>
			<td>[abbr="comma-separated Values"]CSV[/abbr] spreadsheet files</td>
			<td>CSV spreadsheet files are used for importing and exporting record-based data. By convention Composr will assume <kbd>.csv</kbd> spreadsheet files are in the same character set as the website is configured to use, unless a byte-order-mark says otherwise or the website is in utf-8 but the text is <em>invalid</em> utf-8.</td>
			<td>Being able to import and export appropriately-structured CSV spreadsheet files is also useful.</td>
		</tr>
		<tr>
			<td>[abbr="Lightweight Directory Access Protocol"][url="https://datatracker.ietf.org/doc/html/rfc4510"]LDAP 3[/url][/abbr]</td>
			<td>This is the standard for having shared logins on a computer network, which Composr can use.</td>
			<td>This is only relevant if you are setting up a corporate Intranet.</td>
		</tr>
		<tr>
			<td>[url="https://www.webdav.org/"]{$IS_MAINTAINED,webdav,WebDav}[/url]</td>
			<td>A network file system.</td>
			<td>This can be used with [page="_SEARCH:tut_repository"]The Repository[/page] for accessing the Commandr-fs filesystem.</td>
		</tr>
		<tr>
			<td>[abbr="JavaScript Object Notation"][url="https://www.json.org/"]JSON[/url][/abbr]</td>
			<td>This is a popular alternative to XML and is commonly used for web APIs between servers or between servers and web browsers.</td>
			<td>Composr uses JSON in a few niche locations such as eCommerce tax tracking, telemetry, and [tt]data/endpoint.php/[/tt] API endpoints; otherwise you will not need to know JSON.</td>
		</tr>
		<tr>
			<td>[abbr="Structured Query Language"][url="https://en.wikipedia.org/wiki/Sql"]SQL[/url][/abbr]</td>
			<td>This is the standard for accessing/manipulating data inside databases; Composr uses it to talk to the database (e.g. [tt]SELECT * FROM table WHERE something='somevalue'[/tt]), which is usually the MySQL database application.</td>
			<td>A basic understanding of SQL is useful. Sometimes going down to the database level, bypassing Composr, is useful. For example, to make a bulk text change across the system you could write some queries to do so.</td>
		</tr>
		<tr>
			<td>[url="https://github.com/dewitt/opensearch"]OpenSearch 1.0[/url]</td>
			<td>This allows site searching (with auto-completion) integrated direct into web browsers.</td>
			<td>You are unlikely to need any awareness of this.</td>
		</tr>

		<tr>
			<th colspan="3"><em>Metadata</em></th>
		</tr>

		<tr>
			<td>[url="https://developers.facebook.com/docs/opengraph/"]{$IS_MAINTAINED,standard_opengraph,Open Graph}[/url]</td>
			<td>Facebook-originated metadata standard, with data being embedded into normal web pages.</td>
			<td>This is automatically included in Composr's templates. Further documentation is in the [page="_SEARCH:sup_facebook"]Facebook Support[/page] tutorial.</td>
		</tr>
		<tr>
			<td>[url="https://schema.org/"]{$IS_MAINTAINED,standard_schema_org,schema.org}[/url]</td>
			<td>Search Engine originating standard for providing extra data about objects within web pages.</td>
			<td>This is automatically included in Composr's templates.</td>
		</tr>
		<tr>
			<td>[url="https://dublincore.org/"]Dublin Core[/url] and <a href="{$BASE_URL}/cmscore.rdf" title="Composr Core is a simple extension to Dublin Core, extending it to encapsulate social-networking data.">Composr Core</a></td>
			<td>This is the standard for adding metadata to web pages; it ties into the XHTML.</td>
			<td>This is automatically included in Composr's templates.</td>
		</tr>
		<tr>
			<td>[url="https://microformats.org/wiki/hcalendar"]{$IS_MAINTAINED,standard_microformats,hCalendar}[/url]</td>
			<td>Standard for embedding calendar data within web pages.</td>
			<td>This is automatically included in Composr's templates (calendar).</td>
		</tr>
		<tr>
			<td>[url="https://microformats.org/wiki/hcard"]{$IS_MAINTAINED,standard_microformats,hCard}[/url]</td>
			<td>Standard for embedding contacts data within web pages.</td>
			<td>This is automatically included in Composr's templates (member profiles).</td>
		</tr>
		<tr>
			<td>[url="https://microformats.org/wiki/hreview"]{$IS_MAINTAINED,standard_microformats,hReview}[/url]</td>
			<td>Standard for embedding user review data within web pages.</td>
			<td>This is automatically included in Composr's templates (content comments/reviews).</td>
		</tr>
		<tr>
			<td>[url="https://microformats.org/wiki/rel-nofollow"]rel-nofollow[/url], rel-noopener (and removing rel-opener), [url="https://microformats.org/wiki/rel-enclosure"]rel-enclosure[/url], [url="https://microformats.org/wiki/rel-license"]rel-license[/url], [url="https://microformats.org/wiki/rel-tag"]rel-tag[/url]</td>
			<td>{$IS_MAINTAINED,standard_microformats,Standards for describing linking behaviour}.</td>
			<td>This is automatically included in Composr's templates.</td>
		</tr>
		<tr>
			<td>[url="https://gmpg.org/xfn/"]{$IS_MAINTAINED,standard_microformats,XFN}[/url]</td>
			<td>Standard for showing how website users are friends of each other.</td>
			<td>This is automatically included in Composr's templates [size=".85"](limited support)[/size].</td>
		</tr>
		<tr>
			<td>[url="https://oembed.com/"]oEmbed[/url]</td>
			<td>Provide extra information (e.g. thumbnails) for a link to a page on a site.</td>
			<td>Composr can automatically locate oEmbed data for included links.</td>
		</tr>
	</tbody>
</table>
[/semihtml]

Composr itself provides the following protocols and languages...

[semihtml]
<table class="columned-table results-table autosized-table">
	<thead>
		<tr>
			<th>Protocol</th>
			<th>Description</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>[page="_SEARCH:tut_tempcode"]Tempcode[/page]</td>
			<td>This is Composr's template technology (Composr combines data with XHTML templates in order to construct XHTML web pages).</td>
		</tr>
		<tr>
			<td>[page="_SEARCH:tut_comcode"]Comcode[/page]</td>
			<td>This is Composr's easy-to-use content language (lumps of text are written in this, and there are optional ways of encoding sophisticated behaviours; it compiles to more complex XHTML/CSS/JavaScript, via templates).</td>
		</tr>
		<tr>
			<td>Chatcode</td>
			<td>A sub-set of Comcode for use in chatrooms (e.g. to start new chatrooms automatically with people you mention).</td>
		</tr>
		<tr>
			<td>Dublin Core extensions</td>
			<td>Composr extends Dublin Core (described above).</td>
		</tr>
		<tr>
			<td>Page-links</td>
			<td>A simple technology for generating link between pages, that compiles to HTTP URLs; page-links are local to a website (i.e. they can only work to generate links within a site), and are consistent regardless of the URL Scheme employed (Composr supports URL rewriting, which can make the appearance of final URLs vary considerably).</td>
		</tr>
		<tr>
			<td>[page="_SEARCH:tut_filtercode"]Filtercode[/page]</td>
			<td>For filtering results via property querying, simpler than SQL.</td>
		</tr>
		<tr>
			<td>[page="_SEARCH:tut_selectcode"]Selectcode[/page]</td>
			<td>For selecting particular results via ID, ID range, category, or tree-position.</td>
		</tr>
		<tr>
			<td>Language packs</td>
			<td>Translation of a site into different/multiple languages</td>
		</tr>
	</tbody>
</table>
[/semihtml]

This tutorial focuses mainly on XHTML, CSS and JavaScript, which are the three technologies one needs to understand to do advanced themeing. Links to full resources for learning these technologies are also provided.

[title="2"]URLs[/title]

Like all websites, a Composr site uses [abbr="Uniform Resource Locator"]URL[/abbr]s (aka web addresses) to link pages. Within Composr, they are usually written as Composr page-links (defined above in "Overview") and then compiled to URLs at the same time the XHTML is generated.

URLs (when written in full) are constructed as follows:
[code="URL"]
protocol://server:port/path?parameter=value&anotherparameter=anothervalue&anotherparameter=anothervalue
[/code]

They are constructed as follows:
 - [b]Protocol[/b]: For a web page, the protocol is always 'http' or 'https' (because the page is transferred via the HTTP(S) protocol).
 - [b]Port[/b]: The port is almost always '80' which is the default port. If the port is 80 then it is not written down (i.e. ":80" is actually not in the URL).
 - [b]Hostname[/b]: The server is either specified by a domain name or an IP address.
 - [b]Path[/b]: The path often relates to a file on the server, but does not have to: it is up to the web server how to treat it. For a Composr site the path usually points to a PHP file on the server (which the web server will recognise as being something it has to run, and relay the output), except if a URL Scheme is on then it might go through a level of indirection (e.g. it looks to the visitor like it refers to an [tt].htm[/tt] file but actually is invisibly redirected to go through a complex path involving the [tt]index.php[/tt]).
 - [b]Parameter(s)[/b]: There can be any number of parameters (including none). The first one has a "?" before it and subsequent ones have a "&" before it.

Here is a real example:
[code="URL"]
http://localhost/composr/docs/index.php?page=tut-markup
[/code]

This deconstructs as follows:
 - [b]Protocol[/b]: This is an [tt]HTTP[/tt] URL.
 - [b]Port[/b]: As the port is not specified this is on the standard port 80.
 - [b]Hostname[/b]: This is on the machine where the domain name [tt]example.com[/tt] points to.
 - [b]Path[/b]: The path is [tt]somepath/deeper/something[/tt].
 - [b]Parameter(s)[/b]: We have two parameters [tt]one[/tt] as 1, [tt]two[/tt] as 2.

[title="2"]XHTML[/title]

XHTML5 (eXtensible HyperText Markup Language) is the language in which the Composr layout is written, and is what Composr is designed to output. A markup language is a text-based formatting system that allows an author to designate the structure and importance of pieces of a web page. You can't have a web page without markup; all web pages consist of markup. XHTML5 is the same as HTML5 except written to a higher standard of tidiness. It is designed with XML (eXtensible Markup Language) compatibility in mind.

As previously mentioned, all Composr pages are output as XHTML. To customise the appearance of your site, it is just about impossible to do anything major without editing the XHTML. In Composr, the XHTML is split up into various templates for ease-of-use and reusability. Composr also has an inbuilt XHTML webstandards checker, to help you in customising your site.

[title="3"]Syntax[/title]

The basic concepts behind XHTML are very simple: your document starts with a document-type definition, then the markup follows. The markup consists of various [concept]tag[/concept]s, each with optional and mandatory [concept]attribute[/concept]s.
[code="HTML"]
<tagname attribute1="attribute1value" attribute2="attribute2value">tagcontent</tagname>
[/code]
As you can see, the markup is quite simple. The tag consists of an opening part, and a closing part, with content in-between, and attributes listed in the opening part. However, some tags can be even simpler, and not contain any content, or even a closing part.
[code="HTML"]
<tagname attribute1="attribute1value" attribute2="attribute2value" />
[/code]
This form of tag is called self-closing, but is only found occasionally. For both forms of tag, however, there are some rules and guidelines that should be followed:
 - Don't place extraneous spaces in the tag (i.e. between the less-than and the first character of the tag name)
 - [b]Always[/b] close the tag with a closing part, or a self-closing part
 - Don't put more than one space between anything

Tags can contain as many attributes as you like, but they must be valid, and you can't repeat the same attribute twice. Let's look a little closer at the syntax for an attribute.
[code="Text"]
attributename="attributevalue"
[/code]
The syntax for an attribute is quite simple, too. However, there are some rules and guidelines you must stick to:
 - Encase the attribute value in double-quotes
 - Don't surround the equals with spaces (it must be next to the last character of the attribute name, and the opening double-quote for the attribute value)
 - Keep the attribute name lower case

Putting tags together is only slightly more complex than using single tags. You must bear in mind that XHTML is designed to produce a tree-structure of tags: one tag will contain several others ([i]descendants[/i]), which in turn will contain another few (more descendants), or some text, etc.
[code="HTML"]
<tag1>
	<tag2>
		<tag3>Text</tag3>
		<tag4 />
	</tag2>
	<tag2>Text</tag2>
</tag1>
[/code]

A key part of this is the fact that there is some required markup in all XHTML documents: the three root tags. These tags ([tt]<html>[/tt], [tt]<head>[/tt] and [tt]<body>[/tt]) [b]must[/b] be present in a particular place in [b]every[/b] XHTML document along with a valid document-type definition and some required attributes, or browsers won't be able to make head-or-tail of the page.
[code="HTML"]
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Sample page</title>
	</head>
	<body>
	</body>
</html>
[/code]
That is just about the smallest valid page possible. However, you needn't worry about all this, as Composr already has the basic XHTML structure in-place and working perfectly.

One of the nice things about XHTML is the fact that you can place extraneous whitespace (spaces and tabs) between tags, to make the markup easier to read.
[code="HTML"]
<tag1>
	<tag2 />
</tag1>
[/code]
Doing this when writing markup is [b]highly advisable[/b] as it saves hours of searching through markup to find closing parts, etc.

Up until now, we've only been working with theoretical and fictional XHTML tags and attributes. Next it's time to introduce you to some of the most commonly-used tags. However, first it must be noted that XHTML is not a [b]layout[/b] language! It should not be used with the intention of creating a page with a particular appearance! XHTML coding should be approached with a purely structure-based mindset. That is, XHTML should be used to [b]mark-up the structure of the document[/b] (e.g. headings, paragraphs, sections, links, lists, and other such [b]structural[/b] paradigms). Anybody who uses XHTML with the intention of creating a page that looks a particular way is using it [b]incorrectly[/b]. To learn about how to style a page, see the CSS section below.

[title="3"]Elements and attributes[/title]

Now, some HTML elements...

[html]
<table class="columned-table results-table wide-table autosized-table">
	<thead>
		<tr>
			<th>
				Element
			</th>
			<th>
				Description
			</th>
		</tr>
	</thead>

	<tbody>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;a&gt;</kbd></p>
			</td>
			<td>
				<p>A hyperlink. Recommended attributes: <kbd>href</kbd>
				(URL to link to), <kbd>title</kbd>
				(text to display when hovered-over).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;body&gt;</kbd></p>
			</td>
			<td>
				<p>The parent tag for the main document body.
				<strong>Required</strong>.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;div&gt;</kbd></p>
			</td>
			<td>
				<p>Defines a document container. (See CSS section
				below.)</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;em&gt;</kbd></p>
			</td>
			<td>
				<p>Adds emphasis to the text it surrounds (usually rendered in italics).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;fieldset&gt;</kbd></p>
			</td>
			<td>
				<p>Groups form elements together logically. (See
				<kbd>&lt;form&gt;</kbd>
				tag below.)</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;form&gt;</kbd></p>
			</td>
			<td>
				<p>Defines a form with which to submit data.
				Required attributes: <kbd>action</kbd>
				(URL to send data to). Recommended attributes: <kbd>method</kbd>
				(how to send the data; either <kbd>get</kbd>,
				or <kbd>post</kbd>)</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;h1&gt;</kbd>
				to <kbd>&lt;h6&gt;</kbd></p>
			</td>
			<td>
				<p>Document headings; <kbd>&lt;h1&gt;</kbd>
				is the most important (you should have one of these at the
				beginning of your page, quoting your page title), <kbd>&lt;h6&gt;</kbd>
				is the least important.</p>
				<p>You must follow logical process when using headings (do not use headings for text formatting); you cannot have an <kbd>&lt;h3&gt;</kbd> heading without first having an <kbd>&lt;h2&gt;</kbd> heading. And the <kbd>&lt;h3&gt;</kbd> heading / section must be a sub-set of the <kbd>&lt;h2&gt;</kbd> heading / section in terms of context.
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;head&gt;</kbd></p>
			</td>
			<td>
				<p>The metadata section of the document. Contains
				information about the document which isn't displayed, but
				used by the browser in other ways. <strong>Required</strong>.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;html&gt;</kbd></p>
			</td>
			<td>
				<p>The main tag in an XHTML document. <strong>Required</strong>.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;img
				/&gt;</kbd></p>
			</td>
			<td>
				<p>An in-page image. Note that this tag shouldn't
				be used to place layout images; only page-specific images. (See
				CSS section below.) Required attributes: <kbd>src</kbd>
				(the URL of the image), <kbd>alt</kbd>
				(alternate text to be displayed if the image cannot be displayed).
				Recommended attributes: <kbd>title</kbd>
				(text to display when hovered-over).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;input
				/&gt;</kbd></p>
			</td>
			<td>
				<p>A form input, for entering data. Recommended
				attributes: <kbd>value</kbd>
				(the value to display &ndash; varies from type to type), <kbd>type</kbd>
				(the type of input to display: <kbd>button</kbd>,
				<kbd>checkbox</kbd>,
				<kbd>file</kbd>,
				<kbd>hidden</kbd>,
				<kbd>image</kbd>,
				<kbd>password</kbd>,
				<kbd>radio</kbd>,
				<kbd>reset</kbd>,
				<kbd>submit</kbd>,
				<kbd>text</kbd>),
				<kbd>name</kbd>
				(the name with which to refer to the input on the server), <kbd>id</kbd>
				(the <strong>unique</strong> identifier with which to refer to this element
				(see CSS and JavaScript sections below)).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;label&gt;</kbd></p>
			</td>
			<td>
				<p>A label associated with a form element.
				Recommended attributes: <kbd>for</kbd>
				(the ID of the form element associated with this <kbd>&lt;label&gt;</kbd>).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;legend&gt;</kbd></p>
			</td>
			<td>
				<p>A caption for a <kbd>&lt;fieldset&gt;</kbd>.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;li&gt;</kbd></p>
			</td>
			<td>
				<p>An element in a list (see <kbd>&lt;ul&gt;</kbd>
				and <kbd>&lt;ol&gt;</kbd>).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;ol&gt;</kbd></p>
			</td>
			<td>
				<p>An <em>ordered</em> (sequential and numbered)
				list.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;optgroup&gt;</kbd></p>
			</td>
			<td>
				<p>Groups <kbd>&lt;option&gt;</kbd>s
				in a <kbd>&lt;select&gt;</kbd>
				list. Required attributes: <kbd>label</kbd>
				(the label for the option group).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;option&gt;</kbd></p>
			</td>
			<td>
				<p>An option in a <kbd>&lt;select&gt;</kbd>
				list. Recommended attributes: <kbd>value</kbd>
				(the value to be sent to the server when the form is submitted).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;p&gt;</kbd></p>
			</td>
			<td>
				<p>A paragraph. This element is very commonly
				used.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;select&gt;</kbd></p>
			</td>
			<td>
				<p>A drop-down list. Recommended attributes: <kbd>name</kbd>
				(the name with which to refer to the input on the server), <kbd>id</kbd>
				(the <strong>unique</strong> identifier with which to refer to this element
				(see CSS and JavaScript sections below)).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;span&gt;</kbd></p>
			</td>
			<td>
				<p>Groups inline elements. (See CSS section
				below.)</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;strong&gt;</kbd></p>
			</td>
			<td>
				<p>Designates text as strong (usually displayed as
				<strong>bold</strong>).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;sub&gt;</kbd></p>
			</td>
			<td>
				<p>Designates text as subscript.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;sup&gt;</kbd></p>
			</td>
			<td>
				<p>Designates text as superscript.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;table&gt;</kbd></p>
			</td>
			<td>
				<p>A table. Note that this <strong>should not</strong> be
				used to lay-out pages! (See CSS section below.) Recommended
				attributes: <kbd>summary</kbd>
				(a medium-length summary of the content of the table for
				non-visual browsers).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;td&gt;</kbd></p>
			</td>
			<td>
				<p>A table cell.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;textarea&gt;</kbd></p>
			</td>
			<td>
				<p>A multi-line text input area. Required
				attributes: <kbd>cols</kbd>
				(how many character columns to display), <kbd>rows</kbd>
				(how many character rows to display). Recommended attributes: <kbd>name</kbd>
				(the name with which to refer to the input on the server), <kbd>id</kbd>
				(the <strong>unique</strong> identifier with which to refer to this element
				(see CSS and JavaScript sections below)).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;th&gt;</kbd></p>
			</td>
			<td>
				<p>A table header cell.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;title&gt;</kbd></p>
			</td>
			<td>
				<p>The title of the page (to be displayed in the
				browser's title bar, for example). <strong>Required</strong>.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>&lt;tr&gt;</kbd></p>
			</td>
			<td>
				<p>A table row.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>&lt;ul&gt;</kbd></p>
			</td>
			<td>
				<p>An <em>unordered</em> (non-numbered &ndash; blank
				bulleted) list.</p>
			</td>
		</tr>
	</tbody>
</table>
[/html]

Although the above table doesn't list all of the XHTML elements (it lists approximately half of them), the others are used so rarely it's easier to look them up when required, than learn them first. This table also does not list all the attributes of all the elements. However, it lists the important ones, and the following table lists all the attributes that can be used with any XHTML element; the standard attributes.

[html]
	<table class="columned-table results-table wide-table">
		<thead>
			<tr>
				<th>
					Attribute
				</th>
				<th>
					Description
				</th>
			</tr>
		</thead>

		<tbody>
			<tr class="zebra-0">
				<td>
					<p><kbd>class</kbd></p>
				</td>
				<td>
					<p>The CSS class of the element; used to style
					and jazz-up appearances. (See CSS section below.)</p>
				</td>
			</tr>
			<tr class="zebra-1">
				<td>
					<p><kbd>id</kbd></p>
				</td>
				<td>
					<p>The <strong>unique</strong> identifier for the element
					(see CSS and JavaScript sections below).</p>
				</td>
			</tr>
			<tr class="zebra-0">
				<td>
					<p><kbd>style</kbd></p>
				</td>
				<td>
					<p>Inline styling rules &ndash; used to apply
					styling without using a separate CSS definition. Note that it's
					advisable to <em>separate</em> structure and styling, so use of
					this attribute is deprecated for all intents and purposes. (See
					CSS section below.)</p>
				</td>
			</tr>
			<tr class="zebra-1">
				<td>
					<p><kbd>title</kbd></p>
				</td>
				<td>
					<p>Text to display in a tooltip when the element
					is hovered-over.</p>
				</td>
			</tr>
		</tbody>
	</table>
[/html]

There are other standard attributes, but only four, and they're used exceedingly infrequently. Note that there are also event attributes (see JavaScript section below).

[title="3"]Element types[/title]

Now that you've learnt all the XHTML elements, how to use them, and their attributes, you might think it's all over. This is not true; XHTML has a final surprise for you.

As you might have guessed, you can't put any element inside another. There are rules. The basic rule is that of block-level and inline elements. Every XHTML element is either a block-level element, or an inline element (with a few exceptions). Block-level elements may contain either other block-level elements or inline elements. However, inline elements may only contain other inline elements.

Examples of block elements: [tt]div[/tt], [tt]p[/tt], [tt]body[/tt], [tt]ul[/tt], [tt]li[/tt]

Examples of inline elements: [tt]span[/tt], [tt]h1[/tt], [tt]a[/tt], [tt]strong[/tt], [tt]em[/tt]

Examples of other elements (not so easily classifiable): [tt]html[/tt], [tt]head[/tt], [tt]style[/tt], [tt]script[/tt], [tt]table[/tt], [tt]tr[/tt], [tt]td[/tt]

[title="3"]Example[/title]

What follows is an example XHTML document, utilising all of the above principles:
[code="HTML"]
<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML document</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
		<meta name="keywords" content="example document,XHTML,element,attribute" />
		<meta name="author" content="Core Development Team" />
		<meta name="description" content="An example XHTML document." />
		<script src="https://example.com/script.js" />
		<link href="https://example.com/style.css" rel="stylesheet" media="all" />
		<link href="https://example.com/favicon.jpg" rel="icon" type="image/jpg" />
		<link href="https://example.com/" rel="home" title="Home" />
	</head>
	<body>
		<div id="top-bar">
			<h1>
				<a href="https://example.com/" title="The example.com homepage">example.com</a>
			</h1>
		</div>

		<div id="main-doc">
			<h2>Example content</h2>
			<p>This is example content.</p>
			<ul>
				<li>How about</li>
				<li>an example</li>
				<li>unordered list?</li>
			</ul>

			<div id="bottom-bar">
				<a href="https://www.blogrankings.com"><img src="https://www.blogrankings.com/images/blogrankings.gif" alt="BlogRankings" /></a>
				<a href="https://www.spreadfirefox.com/?q=user/register&amp;r=23557"><img src="https://example.com/firefox.png" alt="Get Firefox!" /></a>
			</div>
		</div>

		<div id="right-doc">
			<h3>Login status</h3>
			<ul>
				<li>
					<a href="https://example.com/login.html" title="Log in to example.com">Login</a>
				</li>
				<li>
					<a href="https://example.com/register.html" title="Register an account at example.com">Register</a>
				</li>
			</ul>
		</div>

		<div id="left-doc">
			<h3>Intro</h3>
			<p>This is a well-written <abbr title="eXtensible HyperText Markup Language">XHTML</abbr> page.</p>
			<p>Example paragraph.</p>
		</div>
	</body>
</html>
[/code]

[title="2"]CSS[/title]

CSS (Cascading StyleSheets) is the language used to style and position elements in a webpage. The advantage of separating [i]content[/i] and [i]structure[/i] from [i]style[/i] and [i]layout[/i] is that if, for example, you have a separate CSS file (i.e. the CSS is not embedded into the XHTML), you can easily apply a standard style across a whole website, without duplicating the CSS over and over again (which would inevitably lead to omissions, errors, and maintenance problems).

CSS is a simple language, consisting of [i]rules[/i], which contain various [i]properties[/i]; the individual parameters for styling an element.
The basic format of a rule is as follows.
[code="CSS"]
selector {
	property: property-value;
}
[/code]
The [i]selector[/i] defines which XHTML elements/classes/IDs the properties in the rule are applied to, the [i]property[/i] is the predefined name of the property, and the [i]property-value[/i] is the value assigned to the property (the allowed values vary from property to property). Note the spaces, colons and the semi-colon at the end of the property line.

There are several types of selector defined by the CSS 1 standard, which we will cover here. There are also several new selectors defined by both CSS 2 and CSS 3. You can look online for more information about those, such as [url="CSS Selectors on Mozilla's site"]https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors[/url].

The most basic selector is the [i]type selector[/i], and it selects all the XHTML tags in the markup of the specified name.
[code="CSS"]
p {
	property: property-value;
}

div {
	property: property-value;
	property: property-value;
}
[/code]
The CSS above would apply the specified properties to any [tt]<p>[/tt] or [tt]<div>[/tt] element in the page.

Another basic selector is the [i]class selector[/i], which selects all XHTML tags with the specified class attribute value.
[code="CSS"]
.warning {
	property: property-value;
}
span.timestamp {
	property: property-value;
}
[/code]
This example applies the specified properties to any tag which has a class of [tt]warning[/tt], or any [tt]<span>[/tt] tag which has a class of [tt]timestamp[/tt]. Note that you can combine type and class selectors together (as in the second rule in the above example), to produce a class selector which only applies properties to tags with the specified class, that also are of the specified tag name.

A little aside explanation about the XHTML class attribute is probably required here. As mentioned in the XHTML section above, it is a standard attribute, and as such can be applied to any element. It should contain a space-separated list of CSS class selector names to be applied to the tag. Usually, however, only one class selector is listed in the class attribute.
[code="HTML"]
<div>
	<span class="timestamp red">Warning received yesterday.</span>
	<p class="warning">I know you know that I've been messing with knowledge. However, I'd like you to forget that I know what you know, and that you don't know what I know. I know more about what you know that you could possibly ever know about my knowledge. My knowledge about your knowledge of what I know regarding now is secret, and I know that you know about the now and then of knowledge, new life, and gibberish.</p>
</div>
[/code]
In that example, the [tt]<span>[/tt] tag has two CSS classes attached. However, it should be noted that when naming CSS classes, you should name them for their [i]function[/i], rather than for their [i]appearance[/i]. This is for maintenance considerations: if you name a class [tt]red[/tt], then change the colour to blue, you'd have to rename it, and change all the references to it, or leave it as a mess.

ID [i]selectors[/i] are another basic selector type, which apply properties to elements based upon their ID attribute (for more information on the ID attribute, see the JavaScript section below).
[code="CSS"]
#main-doc {
	property: property-value;
}
[/code]
Note that this rule should (in theory) only be applied to [b]one[/b] tag in the entire page (if at all), as the ID attribute of any tag should be [b]unique[/b]. Due to this, the ID selector isn't used as frequently as other selectors, and when it is used, it is usually used for basic page layout rules, such as positioning the title, main body, and menus. Note also that ID selectors can be coupled with type selectors, as with the class selector.
[code="CSS"]
h1#title {
	property: property-value;
}
[/code]

The final basic selector is the [i]descendant selector[/i], which applies properties to specific tags, but only if they are a descendant of another specified tag (or tags). Note that it applies the properties to the final tag in the sequence (i.e. the right-most tag in the selector).
[code="CSS"]
h3 a {
	property: property-value;
}
[/code]
This example applies the specified properties to any [tt]<a>[/tt] tag which is beneath a level-three heading ([tt]<h3>[/tt]).

Now that the basic selectors have been covered, we move on to properties and property values. A property can only accept [b]one[/b] out of a list of predefined values. Some values are variable (such as widths, and other numeric values), but most are just text.

Some commonly used properties are listed below...

[html]
<table class="columned-table results-table wide-table autosized-table">
	<thead>
		<tr>
			<th>
				Property
			</th>
			<th>
				Description
			</th>
		</tr>
	</thead>

	<tbody>
		<tr class="zebra-0">
			<td>
				<p><kbd>background</kbd></p>
			</td>
			<td>
				<p>The background colour and image.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>border</kbd></p>
			</td>
			<td>
				<p>The border; a line (of specified width) that
				borders (in a box) the specified element.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>display</kbd></p>
			</td>
			<td>
				<p>Used to alter the display mode of the specified
				element (i.e. change it from a block-level to an inline element).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>position</kbd></p>
			</td>
			<td>
				<p>The mode with which to place the element.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>height</kbd></p>
			</td>
			<td>
				<p>The height.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>width</kbd></p>
			</td>
			<td>
				<p>The width.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>font</kbd></p>
			</td>
			<td>
				<p>Font options and configuration.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>list-style</kbd></p>
			</td>
			<td>
				<p>How to layout and draw a list.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>margin</kbd></p>
			</td>
			<td>
				<p>The margin options: the space around the
				<strong>outside</strong> of an element separating it from other elements
				(think of it as a &ldquo;moat&rdquo; for an element).</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>padding</kbd></p>
			</td>
			<td>
				<p>The padding options: the space on the <strong>inside</strong>
				of an element (between the border and the content &ndash; think of
				it as the cavity in a cavity wall).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>bottom</kbd></p>
			</td>
			<td>
				<p>The space below an element, and above the
				element's parent's border.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>left</kbd></p>
			</td>
			<td>
				<p>The space to the left of an element, and to the
				right of the element's parent's border.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>right</kbd></p>
			</td>
			<td>
				<p>The space to the right of an element, and to
				the left of the element's parent's border.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>top</kbd></p>
			</td>
			<td>
				<p>The space above an element, and below the
				element's parent's border.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>color</kbd></p>
			</td>
			<td>
				<p>The colour of <strong>text</strong>.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>text-align</kbd></p>
			</td>
			<td>
				<p>The horizontal alignment of text.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>text-decoration</kbd></p>
			</td>
			<td>
				<p>Decoration applied to text, such as underline.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>text-indent</kbd></p>
			</td>
			<td>
				<p>Indentation applied to the <strong>first line</strong> of
				text.</p>
			</td>
		</tr>
	</tbody>
</table>
[/html]

Note that most of these properties can be split up into separate properties (i.e. [tt]margin[/tt] can be split up into [tt]margin-left[/tt], [tt]margin-right[/tt], [tt]margin-top[/tt] and [tt]margin-bottom[/tt]).

All these properties are no use without property values. Although most elements only accept values from a property-specific predefined list, some elements accept more general values, such as pixel or percentage measurements.

Pixel measurements should generally be used for fixed-size objects, which are usually encountered when doing the basic layout of a page.
[code="CSS"]
#left-col {
	width: 200px;
}
[/code]
Percentage measurements are much better to use, however, as they allow dynamic resizing of page layout if the browser window is resized.
[code="CSS"]
#left-col {
	width: 20%;
}
[/code]

There are other general property values. You can view more about them and CSS in general at [url="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference"]Mozilla's CSS reference[/url].

The final part of the CSS jigsaw is [i]inheritance[/i], or [i]cascade[/i]. This is one of the main features of CSS, and gives it power and flexibility. The basic principle is that properties applied to one tag are automatically applied to any descendant tags of that tag (with a few exceptions for sanity's sake). So, for example, if you had a rule that applied a red text colour to an element, that element's descendants would also have red text, unless they had rules applied to them to override this.

[i]Cascade[/i] is actually a variation of inheritance, on a larger scale. Specifically, it is the inheritance of rules in the hierarchy of stylesheets. Although only applicable for very large sites, it is important to know about: a stylesheet can import another stylesheet using something called the '@import' rule. [i]Cascade[/i] is when the rules and properties from the first stylesheet cascade into the second stylesheet, and are applied to elements unless overruled.

[title="2"]JavaScript (advanced)[/title]

JavaScript is the final piece in the web development puzzle. It allows dynamic, event-driven, interactive functionality, and is the prime component of emerging technologies such as Ajax.

It would be pointless to go into a detailed explanation of JavaScript and how to script in it, as all the JavaScript a developer could ever require is available online already.
However, it is useful to be able to understand roughly what some JavaScript does, and the concepts behind it.

JavaScript is a [i]client-side[/i] scripting language; the web server sends the raw JavaScript to the client's browser, which goes through it, performing the specified operations. It is very fast, and can manipulate a webpage in microscopic detail.

JavaScript generally consists of [concept]function[/concept]s, which contain lines of code.
[code="JavaScript"]
function function-name(argument1,argument2)
{
	lines-of-code;
}
[/code]
Functions have to start with the [i]keyword[/i] [tt]function[/tt], then the name of the function, and the arguments required to be passed to the function in parentheses. Following this should be the lines of code in the function, surrounded by curly brackets.

The lines of code themselves have to follow strict rules (which are beyond the scope of this document), and have to be terminated with a semicolon.
[code="JavaScript"]
function is_IE()
{
	if (navigator.appName == "Microsoft Internet Explorer")
	{
		return true;
	}

	return false;
}
[/code]

JavaScript is most powerful when applied to the DOM -- the Document Object Model, which is a way of accessing the properties and attributes of every node in the document tree of an XHTML (or XML, etc.) page. You don't need to know about how to use the DOM in JavaScript, you just need to know that the DOM extensively references the IDs of XHTML elements, specified by their ID tag.

Another feature of JavaScript is its event model. You can specify JavaScript functions or code to be called when, for example, a link is clicked. You do this either via the event attributes in an XHTML document, or through event listening functions in JavaScript.

[html]
<table class="columned-table results-table wide-table autosized-table">
	<thead>
		<tr>
			<th>
				Event attribute
			</th>
			<th>
				Description
			</th>
		</tr>
	</thead>

	<tbody>
		<tr class="zebra-0">
			<td>
				<p><kbd>onload</kbd></p>
			</td>
			<td>
				<p>Called when the document loads. Can only be put
				in <kbd>&lt;body&gt;</kbd>
				or <kbd>&lt;frameset&gt;</kbd>
				tags.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>onchange</kbd></p>
			</td>
			<td>
				<p>Called when an input is changed. Can only be
				put in one of the form tags (<kbd>&lt;input&gt;</kbd>,
				<kbd>&lt;select&gt;</kbd>,
				etc.).</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>onsubmit</kbd></p>
			</td>
			<td>
				<p>Called when the form is submitted. Can only be
				put in a <kbd>&lt;form&gt;</kbd>
				tag.</p>
			</td>
		</tr>
		<tr class="zebra-1">
			<td>
				<p><kbd>onkeypress</kbd></p>
			</td>
			<td>
				<p>Called when a key is pressed (and released) and
				the element has focus. Can be put in any tag, with a few logical
				exceptions.</p>
			</td>
		</tr>
		<tr class="zebra-0">
			<td>
				<p><kbd>onclick</kbd></p>
			</td>
			<td>
				<p>Called when a the element is clicked. Can be
				put in any tag, with a few logical exceptions.</p>
			</td>
		</tr>
	</tbody>
</table>
[/html]

To use these event attributes, simply put them into the tag.
[code="HTML"]
<a href="https://example.com/" title="Example website" onclick="log_click('https://example.com/'); ">example.com</a>
[/code]

You can also put more than just a function call into event attributes.
[code="HTML"]
<a href="https://example.com/" title="Example website" onclick="window.alert('You clicked the link!'); log_click('https://example.com/'); ">example.com</a>
[/code]

JavaScript is a flexible language, and many things can be achieved by using it. However, you must remember that styling should be left to CSS, structure should be left to the XHTML, and JavaScript should be used for interactivity.

It should also be stressed as a last point that [b]JavaScript is not secure[/b]; if you write a login system in JavaScript that checks an inputted password against a one coded into the JavaScript, anybody can just view the source of the JavaScript using their browser, look through it, and extract the password with ease. This goes for other similar situations as well, such as quizzes; the answers, passwords, or any other potent information that should be kept secret. It should be stored, processed, and handled exclusively [b]on a server[/b]!

[title="2"]Online tools and references[/title]

[title="3"]General web platform references[/title]

 - https://webplatform.org
 - https://w3.org
 - https://caniuse.com/
 - https://webdesign.about.com/
 - https://teamtreehouse.com/

[title="3"]XHTML tools/references[/title]

 - https://www.yourhtmlsource.com/
 - https://www.html.net/
 - https://www.tizag.com/
 - https://www.w3schools.com/html/default.asp
 - https://en.wikiversity.org/wiki/Web_design

[title="3"]CSS tools/references[/title]

 - https://code.tutsplus.com/tutorials/design-and-code-your-first-website-in-easy-to-understand-steps--net-6062
 - https://www.yourhtmlsource.com/
 - https://www.html.net/
 - https://www.tizag.com/
 - https://www.w3schools.com/css/default.asp
 - https://www.blooberry.com/indexdot/css/propindex/all.htm
 - https://www.westciv.com/style_master/house/index.html
 - https://www.alistapart.com/
 - https://www.skybound.ca/
 - https://www.layerstyles.org/builder.html
 - https://engineering.appfolio.com/2012/11/16/css-architecture/
 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

[title="3"]JavaScript tools/references[/title]

 - https://www.tizag.com/
 - https://javascriptkit.com/
 - https://developer.mozilla.org/en-US/docs/Web/JavaScript
 - https://www.devguru.com/content/technologies/javascript/home.html
 - https://www.w3schools.com/js/default.asp
 - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
 - https://jquery.com/

Some cool effects:
 - https://web.archive.org/web/20081110140704/https://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
 - https://www.turnjs.com/
 - https://www.chartjs.org/
 - https://inorganik.github.io/countUp.js/
 - https://www.zachleat.com/web/bigtext-makes-text-big/
 - https://freqdec.github.io/slabText/
 - https://tympanus.net/Tutorials/3DHoverEffects/
 - https://isotope.metafizzy.co/

[title="2"]Structured Data testing[/title]

 - https://www.bing.com/webmasters/help/url-inspection-55a30305
 - https://developers.google.com/search/docs/appearance/structured-data
 - https://webmaster.yandex.com/tools/microtest/

[title="2"]Miscellaneous[/title]

 - https://uitest.com/
 - https://dev.twitter.com/cards/getting-started (you may want to implement this yourself if you use Twitter)
 - https://developers.facebook.com/tools/debug/sharing/

[concepts
 1_key="XML"                  1_value="eXtensible Markup Language: a format for structuring other languages that fit well into a tree structure"
 2_key="HTML"                 2_value="HyperText Markup Language: a language for the documents of the world wide web"
 3_key="XHTML"                3_value="eXtensible HyperText Markup Language: HTML adapted to follow XML rules"
 4_key="CSS"                  4_value="Cascading Style Sheets: a technology that allows style to be specified in a config-file like fashion, and mapped to XHTML structure"
 5_key="JavaScript"           5_value="The standard client-side scripting language for the Internet, allowing web pages to be dynamic without reloading of pages. In standardisation, it is known as ECMA-Script, but that term is rarely used."
 6_key="Tag"                  6_value="A piece of structure: an XML tree is made up of tags"
 7_key="Element"              7_value="Another name for a tag really"
 8_key="(Tag) Attribute"      8_value="Tags may contain attributes that specify properties for the tag"
 9_key="Inline (tag)"         9_value="A tag that wraps around a portion of HTML to apply something to it, or to use it"
 10_key="Block (tag)"         10_value="A tag that takes up a boxed area of the screen space, and may have its own background. Block tags force a visual line-break after them, unless they are styled to be inline"
 11_key="(Tag) Class"         11_value="A tag class is generally used so as to join XHTML tags to CSS styles"
 12_key="(XML) ID"            12_value="An ID is generally used so as to allow JavaScript code to reference specific XHTML tags"
 13_key="(JavaScript) event"  13_value="JavaScript hooks on to web browser actions via an event model; tags 'fire' events, and JavaScript can be set up to launch certain code upon the event firing"
 14_key="(CSS) selector"      14_value="CSS rules apply to certain tags, and selectors are used to determine which tags; selectors are very powerful"
 15_key="(CSS) property"      15_value="CSS rules specify values for properties in order to style"
 16_key="DOM"                 16_value="Document Object Model. A scheme of referencing a document based upon the XHRML structure. Usually used with JavaScript."
 17_key="DHTML"               17_value="Dynamic HTML. Almost a synonym for JavaScript"
 18_key="Client-side"         18_value="Code that is processed on a viewer's computer. The opposite of server-side"
]Concepts[/concepts]

[title="2"]See also[/title]

 - [page="_SEARCH:tut_themes"]Themeing your site[/page]
 - [page="_SEARCH:tut_designer_themes"]Designer themes, implementing a clean-room design[/page]
 - [page="_SEARCH:tut_tempcode"]Tempcode programming[/page]
 - [page="_SEARCH:tut_accessibility"]Helping improve site accessibility for disabled users[/page]
 - [page="_SEARCH:tut_browsers"]Browser version requirements[/page]
 - [page="_SEARCH:sup_how_internet_works"]How the Internet actually works[/page]
 - [page="_SEARCH:tut_structure"]Composr site structure[/page]
 - [page="_SEARCH:sup_chrome_tools"]Using Chrome development tools to help with themeing[/page]

{$SET,tutorial_tags,Web standards & Accessibility,core_webstandards,Design & Themeing,CSS,JavaScript,regular}{$SET,tutorial_add_date,May 2009}{$SET,tutorial_summary,This tutorial is an introduction to the main standard web technologies that Composr is built upon.}[block]main_tutorial_rating[/block]
