(Top)

AbstractML

AbstractML Documentation

Hello, and welcome to the AbstractML documentation! Here you can find everything you will need to know to learn and be successful using AbstractML. The documentation will explain what types of elements there are in the syntax, and which tags fit into each category, along with how to use them.

Getting Started

Getting started with AbsractML is incredibly easy! All it requires is two files, one of which can be linked to using an external URL. Follow the guide below to learn how to start using AbsractML, and feel free to browse the rest of the documentation to learn about the syntax.

1. Set up your HTML file.

The HTML file is what is called on by your browser when the webpage is requested, and is the page that is dynamically updated to include the parsed AbstractML file. This is the one file that you must have downloaded to your computer or hosted on wherever you are hosting your webpage. You can get it here.

Once you have the file, there is one thing you must do:

  • Replace <body onload="build('MY_FILE')" id="line"> with the path/name of your AbstractML file. For example, if the name of your AbstractML file is index.aml, you would change the HTML to <body onload="build('index')" id="line">


2. Retrieve the Compiler files.

The compiler is the file that makes AbstractML work.

compiler.js is the file that is AbstractML. It contains the switches and other code that takes your aml file and converts it to a valid HTML document. The majority of the updates we make to the language are done to this file, because all of the commands, arguments, and well... everything is calculated in this script. You can get it here.

You don't have to do anything to this file - it works as-is.

3. Create your AbstractML (aml) file.

aml stands for "Abstract Markup Language", and is the file extension for AbstractML files. In order to use AbstractML, you have to... use AbstractML. This can be done by creating a file called "MY_FILE.aml", which can be, for example, "index.aml". Create the file in any text editor, and there, you can write AbstractML! Here's a little sample code for you: 

title -> My First AbstractML Page
h1 -> Hello, World!
p -> This is my first AbstractML page! It is very, very simple, and is just an example.


4. Navigate to your HTML file.

Once you open this file, AbstractML takes care of the rest! Congratulations, you just created your first AbstractML page!

Examples

In this section of the documentation, examples of pages using AbstractML are given. Each page has a link to its AbstractML source.

Landing Page: examples/landing

Components

In this section of the documentation, each type of component along with the elements in its subclass will be listed for you to use.

Headings

Headings are the tags that allow you to append bolder or more obvious text to the document. They are often used to define a page or section.

Types of headings:

  • h1 (largest)
  • h2
  • h3
  • h4
  • h5
  • h6 (smallest)


Usage: 

// -> I use h1 as an example. This also goes for h2, h3, h4, h5, and h6.
h1 -> text
h1
h1 -> arguments -> .
h1 -> arguments -> text


Paragraphs

The paragraph element is one of the most common HTML, and also AbstractML, elements. It is the container for simple text, that can be styled by the developer.

Usage: 

p -> text
p
p -> arguments -> .
p -> arguments -> text


Hypertext

Hypertext, hyperlinks, or simply just links are the elements that allow for the "linking" of the user to another site or section of the page.

Usage: 

a -> text
a
a -> arguments -> .
a -> arguments -> text


Abbreviations

Abbreviations are not a widely used tag, and are typically just for showing what the full version of an abbreviation is when hovering over text.

Usage: 

abbr -> text
abbr
abbr -> arguments -> .
abbr -> arguments -> text


Text Stylers

The bold, underline, and small tags, which can be grouped as 'text stylers', are elements that serve to purpose of attributing text without CSS.

Types of text stylers:

  • b (bold)
  • u (underline)
  • s (strikethrough)
  • small
  • string


Usage: 

// -> I use b as an example. This also goes for u, small, strong, and s.
b -> text
b
b -> arguments -> .
b -> arguments -> text


Buttons

Buttons are elements that can act as a link or perform script function after an interaction. They are a large part of the site's theme.

Usage: 

button -> text
button
button -> arguments -> .
button -> arguments -> text


Divisions

Divisions, or sections, are like container for different area of the site. They are used to organize the code and provide independent section functionality.

Usage: 

div -> arguments
div
div -> arguments -> .
div -> arguments -> text


Span

Spans are the inline version of a section. They are used for providing organization and styling inline elements, used the same way as a division.

Usage: 

div -> arguments
div
div -> arguments -> .
div -> arguments -> text


Center

The center element is responsible for aligning its child elements on the center of the page, horizontally. It acts like a division with automatic centering.

Usage: 

center -> arguments
center
center -> arguments -> .
center -> arguments -> text


Header

The header's job is to define the head of a page or section, often containing a title, logo, or navigation links in an easy-to-find way.

Usage: 

header -> arguments
header
header -> arguments -> .
header -> arguments -> text


Navigation

The navigation tag is a container that holds simple navigation links or a styled navigation system, often as a header or sidebar.

Usage: 

nav -> arguments
nav
nav -> arguments -> .
nav -> arguments -> text


Main

Main defines the dominant, or the 'main', section or body of text on the page, and is merely an alternately named division element.

Usage: 

main -> arguments
main
main -> arguments -> .
main -> arguments -> text


Forms

Forms are places for users to input data in different fields, such as text areas. The form tag defines where a form is on the page.

Usage: 

form -> arguments
form
form -> arguments -> .
form -> arguments -> text


Tables

Tables are bodies of text or other data with a grid-like format displayed to the viewer. The contents are controlled using specific child elements.

Embedded elements:

  • th (table heading)
  • td (table data/cell)
  • tr (table row)


Usage: 

// -> I use table as an example. This also goes for th, td, and tr.
table -> arguments
table
table -> arguments -> .
table -> arguments -> text


Preformatted Text

Preformatted Text is an indicator to the page that the text within has been formatted by another source (such as a code tag), and gives it a different font.

Usage: 

pre -> arguments
pre
pre -> arguments -> .
pre -> arguments -> text


Code

The code element is where code can be rendered inside an HTML document with a special background and font. For multi-line code, it is wrapped in a pre tag.

Usage: 

code -> arguments
code
code -> arguments -> .
code -> arguments -> text


Image

The image element is where an image can be placed on the page and formatted with CSS. When adding an image, either a local file or url can be used.

Usage: 

img -> url
img
image -> url -> arguments


Lists

There are two list element, one for ordered (numbered) lists and one for unordered (bulleted) lists. They are for creating list-style visuals on the page.

Types of lists:

  • ol (ordered list)
  • ul (unordered list)


Usage: 

// -> I use ol as an example. This also goes for ul.
ol -> arguments
ol


Textarea

Textareas are placing for holding bodies of text in a styled box. They have the ability to be edited by the user, which is what sets them apart from paragraphs.

Usage: 

textarea -> arguments
textarea
textarea -> arguments -> text


Inputs

Inputs are inline, shorter textarea where the user can input data. They are usually used within a form for the collecting of information.

Usage: 

input -> arguments
input


Breaks

Breaks are either whitespace or lines that separate two parts of the webpage. They run as horizontal lines, and usually don't have too much styling.

Types of breaks:

  • br (line break/carriage return)
  • hr (horizontal rule)


Usage: 

// -> I use br as an example. This also goes for hr.
br -> arguments
br


Meta

The meta tag is one that goes in the head of the HTML document automatically and provides crucial data about the webpage, also known as 'metadata'.

Usage: 

// -> meta tags require two arguments: name and content
meta -> name -> content


Charset

Charset is another type of data, but one defined independently in the language. It stands for character set and is the page's encoding.

Usage: 

// -> charset tags require an argument
charset -> utf8 (or other encoding)


Linking

Linking is an import element injected automatically into the head. It allows for the importation of a stylesheet or a link to a canonical page.

Usage: 

// -> link tags require two arguments: relationship and url
link -> relationship -> url


Body Style

The body style tag allows for inline CSS to be added to the webpage's body tag. It was made because the language cannot access the direct body or head tags.

Usage: 

// -> bodystyle requires an argument
bodystyle -> css


Title

Title is a head-based metadata tag that holds what the page's title is. This information is viewable from the browser tab and Google.

Usage: 

title -> name
title


Scripts

The scripts element adds the ability for a JavaScript file to be attatched to the page and called from the DOM. It is placed automatically in the head.

Usage: 

// -> script requires at least the src argument (a url)
script -> src
script -> src -> defer


Time

The time tag is supposed to represent a specific time, such as the 24-hour time, Gregorian date, or a valid time duration.

Usage: 

time -> text
time
time -> arguments -> .
time -> arguments -> text


Section

The section tag defines sections in the document, such as a chapter, header, or footer. It groups content, while a division is just a container.

Usage: 

section -> arguments
section
section -> arguments -> .
section -> arguments -> text


Article

An article is a container for content that is independent from the rest of a page, such as a Tweet, article, or blog entry.

Usage: 

article -> arguments
article
article -> arguments -> .
article -> arguments -> text


Comments

Commands allow for the developer to leave notes or instruction to whomever else may view or use the code. At the time, the language only supports one-line comments.

Usage: 

// -> comment


Ends

The end is a catch-all operator for closing tags. Its argument defines what element it is to close, and is used for any element that needs it.

Usage: 

// -> end requires the element be defined
end -> element


Dot Operator

The dot operator is used to provide an alternate outcome to the normal closing sequence of an element. It has two uses:

  • To automatically close a normally open element (such as a div)
  • To leave open a normally self-closing element (such as a p)


Usage: 

// -> I use div and p as examples. This also goes for all the other elements
div -> arguments -> .
p -> arguments -> .