Define a document title. This element is required in every HTML and XHTML document. Different user agents may make use of the title in different ways. For example:
· Web browsers usually display it in a window's title bar when the window is open, and in the task bar when the window is minimized.
· It may become the default filename when saving the page.
· Search engines' Web crawlers may pay particular attention to the words used in the title.
The title element must not contain any nested tags (that is, it cannot contain any other elements). Only one title element is permitted in a document.
<base>
Specifies a base URL for all relative href and other links in the document. Must appear before any element that refers to an external resource. HTML permits only one base element for each document. The base element has attributes, but no contents.
<link>
Specifies links to other documents, such as "previous" and "next" links, or alternate versions.
<script>…</script>
Used to add JavaScript or other scripts to the document. The script code may be typed literally between the script tags or may be given in a separate resource whose URL is specified with the script element's optional src attribute.
<style>…</style>
Specifies a style for the document, usually in the form <style type="text/css">…</style>
<object>…</object>
Used for including generic objects within the document header. Though rarely used within a head element, it could potentially be used to extract foreign data and associate it with the current document.
<meta>
Can be used to specify additional metadata about a document, such as its author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs.
In the general form, a meta element specifies name and associated content attributes describing aspects of the HTML page. To prevent possible ambiguity, an optional third attribute, scheme, may be supplied to specify a semantic framework that defines the meaning of the key and its value: for example, <meta name="foo" content="bar" scheme="DC">
Inline elements cannot be placed directly inside the body element; they must be wholly nested within block-level elements (see Block elements, below).
<em>…</em>
Emphasis (conventionally displayed in italics)
<strong>…</strong>
strong emphasis (conventionally displayed bold). An oral user agent may use different voices for emphasis.
<q>…</q>
A quotation containing only inline elements (for quotations containing block level elements see blockquote below).
<cite>…</cite>
A citation. Reference for a quote or statement in the document.
<dfn>…</dfn>
Defining first instance of a term
<abbr>…</abbr>
Contains an abbreviation, like abbr.
<acronym>…</acronym>
Similar to the abbr element, but contains an acronym, like HTML.
These elements are useful primarily for documenting computer code development and user interaction through differentiation of source code (<code>), source code variables (<var>), user input (<kbd>), and terminal output (<samp>).
<code>…</code>
A code snippet. Conventionally rendered in a monospace font: Code snippet.
<samp>…</samp>
Sample output (from a program or script)
<kbd>…</kbd>
Keyboard - text to be entered by the user
<var>…</var>
Variable
<del>…</del>
Deleted text. Typically rendered as a strikethrough:
<ins>…</ins>
Inserted text.
<a>…</a>
Creates an element that becomes a hyperlink with the href (hypertext reference) attribute set to a URL; additionally the attribute title may be set to a hover box text, some informative text about the link:
<ahref="URL"title="additional information">link text</a>
<img>
Includes an image with the src attribute. The required attribute provides alternative text in case the image cannot be displayed. Alt is intended as alternative text, although Microsoft Internet Explorer renders it as a tooltip if no title is given; the title attribute is the tooltip text. It was proposed by Marc Andreessen.
<br> or <br />
Specifies a line-break.
<map>…</map>
Specifies a client-side image map.
<area>
Specifies an area in the map.
<object>…</object>
Includes an object in the page of the type specified by the type attribute. This may be in any MIME-type the Web browser understands, such as an embedded page, code to be handled by a plug-in such as Flash, a Java applet, a sound file, etc.
<span>…</span>
Creates an inline logical division.
Many HTML elements are designed for altering the semantic structure or meaning of a document. Some are block-level, but most are inline and can be included in the normal flow of text.
Creates a paragraph, perhaps the most common block level element. The closing tag is not required in HTML, however is required for XHTML.
<blockquote>…</blockquote>
Contains quoted material when the quotation itself includes block level elements (for instance, quoting several paragraphs).
<hr>
Inserts a horizontal rule.
<h1>…</h1><h2>…</h2><h3>…</h3><h4>…</h4><h5>…</h5><h6>…</h6>
Section headings at different levels. Use <h1> for the highest-level heading (the major sections), <h2> for the next level down (sub-section), <h3> for a level below that, and so on. The lowest level heading is <h6>.
<dl>…</dl>
Creates a definition list (consisting of definition terms paired with definitions).
<dt>…</dt>
Creates a definition term.
<dd>…</dd>
Creates a definition.
<ol>…</ol> and <ul>…</ul>
Creates an ordered (enumerated) or unordered (bulleted) list.
<li>…</li>
Creates a list item in ordered and unordered lists.
<table>…</table>
Creates a table
<tr>…</tr>
Creates a row in the table.
<th>…</th>
Creates a table header cell within a row or a column; contents are conventionally displayed bold and centered.
<td>…</td>
Creates a table data cell within a row.
<colgroup>…</colgroup>
Specifies a column group in a table.
<col>
Specifies attributes for an entire column in a table.
<caption>…</caption>
Specifies a caption for the entire table.
<thead>…</thead>
Specifies the header part of a table.
<tbody>…</tbody>
Specifies the main part of a table.
<tfoot>…</tfoot>
Specifies the footer part of a table.
These elements can be combined into a form or used separately as user-interface controls. Combined with a first-class javascript engine, these controls provide support for rich user interfaces. HTML specifies the elements that make up a form, and the method by which it will be submitted. However, some form of script either server-side or client side must be used to process the user's input once it is submitted.
<formaction="url">…</form>
Creates a form.
<selectname="xyz">…</select>
Create a selection list, from which the user can select a single option. May be rendered as a dropdown list.
<optionvalue="x">
Creates an item in a select list.
<inputtype="checkbox">
Creates a checkbox. Can be checked or unchecked.
<inputtype="radio">
Creates a radio button.
<inputtype="button">
Creates a general-purpose button.
<inputtype="submit">
Creates a submit button.
<inputtype="image">
Creates a button using an image.
<inputtype="reset">
Creates a reset button for resetting the form to default values.
<inputtype="file">
Creates a file select
<inputtype="hidden">
Is not visible in the rendered page, but allows a designer to maintain a copy of something that needs to be submitted to the server as part of the form.
<labelfor="id">…</label>
Creates a label for a form input (e.g. radio button).
<textarearows="8">…</textarea>
Create a multiple-line text area, the size of which is specified by cols and rows attributes. Text in between the tags appears in the text area when the page is loaded.
<div>…</div>
Creates a block logical division.
<pre>…</pre>
Creates pre-formatted text.
<address>…</address>
Used to mark up contact information like address for the document or a section of it.
<iframe>…</iframe>
Includes another HTML document in the page.
The <iframe> tag must be closed by </iframe>. Otherwise the content after the <iframe> tag will be taken as alternative text to be displayed when the browser has no iframe support.
An HTML document may contain a header and a body or a header and a frameset, but not both. For frames the Frames DTD must be used.
<frameset>…</frameset>
Delimit the frameset. The frames layout is given by comma separated lists in the rows and cols attributes.
<frame>…</frame>
Delimit a single frame, or region, within the frameset. A different document linked with the src attribute appears inside.
<noframes>…</noframes>
Contains a normal <body> element with child elements that will appear in web browsers that don't support frames.
<b>…</b>
Use boldface type. Equivalent CSS: {font-weight: bold}
<i>…</i>
Use italic type. Equivalent CSS: {font-style: italic}
<big>…</big>
Creates bigger text. Equivalent CSS: {font-size: larger}.
<small>…</small>
Creates smaller text. Equivalent CSS: {font-size: smaller}
<tt>…</tt>
Use a typewriter-like, also known as teletype font. Equivalent CSS: {font-family: monospace} [1, p. 46-55]
4. Main types of HTML editors
An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version management systems such as CVS or Subversion.
Text editors
Plain text editors may be used to produce webpages.
The following are some commonly used text editors:
| | |
Text-based HTML editors evolved from basic text editors, but include additional tools specifically geared toward handling code.
| | |
While word processors are not ostensibly HTML editors, many of the major products are capable of exporting document layouts in HTML format. This offers the ease of use of a word processor, similar to a WYSIWYG product (see below), but has some of the same end product limitations.
· AbiWord
· AppleWorks
· Microsoft Word
· OpenOffice.org Writer
· WordPerfect
WYSIWYG (What You See Is What You Get) code generators offer speed and ease of use.
Many of these editors do not require any knowledge of the programming languages generated by the software.
Some of these editors store pages in a proprietary format and then export them as HTML (possibly along with other formats); the user would continue to maintain the website by working with the files in the proprietary format and re-exporting them. Other, generally simpler WYSIWYG editors are designed to work directly with HTML files.
Although the term WYSIWYG is often used for these editors, they are generally not truly WYSIWYG (see Difficulties in achieving WYSIWYG).
|
| |
WYSIWYM (what you see is what you mean) is an alternative paradigm to WYSIWYG, in which the focus is on the semantic structure of the document rather than on the presentation. These editors produce more logically structured markup than is typical of WYSIWYG editors, while retaining the advantage in ease of use over hand-coding using a text editor.