|This page has links to websites or programs not hosted or created by Scratch or Wikipedia. Remember to stay safe while using the Internet, as we can't guarantee the safety of other websites.|
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".
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
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
ol— ordered list (in most cases, preferable to use wiki
li— list item (must be a child (sub element) of a
pre— creates a pre-formatted block of text
code— inline computer code style
b— bold (in most cases, preferable to use wiki
i— italics (in most cases, preferable to use wiki
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)
style— adds CSS to the page
object— embed a Flash object and the like
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
- 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.
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
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
solid— border style (also settable via
- Can also be:
solid, dashed, none, dotted
- Can also be:
black— border color (also settable via
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.
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.
position: relative tells the browser that this element is relatively positioned. There are 4 properties which can be used with this:
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
An "inline" element is one that does not create a new line, and applies within a parent element. Examples include
This is not a full explanation of block and inline; for that, the reader is pointed to this article.
<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.
- Help:CSS — cascading style sheets
For anyone interested in learning more about HTML and CSS, please see the Mozilla Developer Network (MDN):