Help:HTML

Translate: - English (no prefix) - Türkçe - українська мова 

HTML is a markup language for the web. Some HTML, mostly presentational, can be used on the wiki. Some wiki tags (such as <nowiki>) look like HTML, but are not. Each HTML tag creates an "element".

Syntax

HTML syntax is as follows:

<tagname attribute="value">content</tagname>

<                                         tagname                           attribute="value"                                  >                    content                         </tagname>
^                                                ^                                   ^                                         ^                    ^                               ^
open tag (no space between < and tagname)        spaces separate attributes          don't forget the = sign, and both quotes  end the tag opening  can be HTML, text, or wikicode  close the tag by specifying the name, and prefixing it with a slash (no attributes are given)

<br/>
   ^
   some tags are self-closing, i.e. they have no content or end-tag

Tags

Not all tags are allowed to be used on the wiki. Some permitted tags:

• div

— creates a page section

• span

— can be used to style some text

• ul

— unordered list (in most cases, preferable to use wiki *-syntax list)

• ol

— ordered list (in most cases, preferable to use wiki #-syntax list)

• li

— list item (must be a child (sub element) of a <ul> or <ol>

• pre

— creates a pre-formatted block of text

• code

— inline computer code style

• b

— bold (in most cases, preferable to use wiki '''-syntax bold)

• i

— italics (in most cases, preferable to use wiki ''-syntax italics)

• u

— underlined

• s

— strikethrough

• sup

— superscript

• sub

— subscript

• p

— paragraph

• abbr

— abbreviation

• center

— centers text

Some tags that cannot be used: (The descriptions are for ordinary HTML)

• a

— creates a link (must use wiki syntax here)

• img

— creates an image (must use wiki syntax)

• script

— executes JavaScript

• style

— adds CSS to the page

• object

— embed a Flash object and the like

• canvas

— draw on the page with JavaScript

Of course, there are many more tags in the HTML standard.

Classes and IDs

HTML elements can contain "classes" and an ID. These are set via the class="space separated list of classes" and id="my_unique_id" attributes. These are mainly used with CSS, but also with JavaScript.

CSS

Main page: Help:CSS

CSS is a stylesheet language, meaning it tells the browser how to display the HTML. CSS can be used in HTML through the use of the style attribute. Because full CSS cannot be used on the wiki (except in skins), selector syntax will not be covered.

Syntax

Typical CSS properties look like this:

height: 100px;

height         :                                       100px                                         ;
^              ^                                       ^                                             ^
property name  the colon separates property and value  the value, in this case, a number with a unit  separate properties with a semicolon

Properties

Following is a list of properties commonly used on the wiki:

• height: 100px

— sets the height of a block element

• width: 50%

— sets the width of a block element

• color: #577f2a

— sets the color of text

• font-size: 1em

— sets the font size of some text

• border: 1px solid black

— sets borders of a block element

• • 1px

— border width (also settable via border-width: 1px)

• • solid

— border style (also settable via border-style: solid)

• • • Can also be: solid, dashed, none, dotted
  • black

— border color (also settable via border-color: black)

• padding: 5px

— sets padding (internal) of a block element

• margin: 5px

— sets margin (external) of a block element

• border-radius: 5px

— creates rounded corners

• border-top-left-radius

— creates a specified corner radius at the top-left corner

Of course, there are many more properties in the CSS standard, all of which can be used.

Floating

Block elements can be made to float. Float means to head to a specific side or location. This can be accomplished with the float: left/right property.

Another method of floating is called "relative positioning". By default, each element is "statically" positioned — it is in its default space, according to its place in the documents, and its size, float, padding, and margins. However, it can be made to move from this location.

<div style="position: relative; top: 50px; border: 1px dashed green"></div>

This code will move the <div> 50 pixels above its normal location. If -50 were specified, it would be 50 pixels below.

The position: relative tells the browser that this element is relatively positioned. There are 4 properties which can be used with this: top, bottom, left, and right. They can be mixed.

Note however, that relative positioning keeps the element's space intact, i.e. the rest of the page will not also be pushed.

Block vs. Inline

Above, "inline" or "block" elements were sometimes mentioned. These will now be explained:

A "block" element is one that creates a new line, and rendering area, for its space. Examples include div, p, ul.

An "inline" element is one that does not create a new line, and applies within a parent element. Examples include b, span, code.

This is not a full explanation of block and inline; for that, the reader is pointed to this article.

Using <div>

The <div> tag is the most-often used tag for creating block elements for styling. On the wiki, this is manifest in the Table of Contents.

Using CSS properties, a <div> can have a specified height, width, position, and even background. Readers are recommended to look at source code for those articles to gain a better understanding.

See Also

• Help:CSS

— cascading style sheets

External Links

For anyone interested in learning more about HTML and CSS, please see the Mozilla Developer Network (MDN):

• HTML
• CSS