Getting StartedGetting 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:
<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!
ExamplesIn 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
ComponentsIn this section of the documentation, each type of component along with the elements in its subclass will be listed for you to use.
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)
- h6 (smallest)
// -> I use h1 as an example. This also goes for h2, h3, h4, h5, and h6. h1 -> text h1 h1 -> arguments -> . h1 -> arguments -> text
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.
p -> text p p -> arguments -> . p -> arguments -> text
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.
a -> text a a -> arguments -> . a -> arguments -> text
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.
abbr -> text abbr abbr -> arguments -> . abbr -> arguments -> text
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)
// -> I use b as an example. This also goes for u, small, strong, and s. b -> text b b -> arguments -> . b -> arguments -> text
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.
button -> text button button -> arguments -> . button -> arguments -> text
Divisions, or sections, are like container for different area of the site. They are used to organize the code and provide independent section functionality.
div -> arguments div div -> arguments -> . div -> arguments -> text
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.
div -> arguments div div -> arguments -> . div -> arguments -> text
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.
center -> arguments center center -> arguments -> . center -> arguments -> text
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.
header -> arguments header header -> arguments -> . header -> arguments -> text
The navigation tag is a container that holds simple navigation links or a styled navigation system, often as a header or sidebar.
nav -> arguments nav nav -> arguments -> . nav -> arguments -> text
Main defines the dominant, or the 'main', section or body of text on the page, and is merely an alternately named division element.
main -> arguments main main -> arguments -> . main -> arguments -> text
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.
form -> arguments form form -> arguments -> . form -> arguments -> text
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.
- th (table heading)
- td (table data/cell)
- tr (table row)
// -> I use table as an example. This also goes for th, td, and tr. table -> arguments table table -> arguments -> . table -> arguments -> 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.
pre -> arguments pre pre -> arguments -> . pre -> arguments -> text
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.
code -> arguments code code -> arguments -> . code -> arguments -> text
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.
img -> url img image -> url -> arguments
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)
// -> I use ol as an example. This also goes for ul. ol -> arguments ol
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.
textarea -> arguments textarea textarea -> arguments -> text
Inputs are inline, shorter textarea where the user can input data. They are usually used within a form for the collecting of information.
input -> arguments input
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)
// -> I use br as an example. This also goes for hr. br -> arguments br
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'.
// -> meta tags require two arguments: name and content meta -> name -> content
Charset is another type of data, but one defined independently in the language. It stands for character set and is the page's encoding.
// -> charset tags require an argument charset -> utf8 (or other encoding)
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.
// -> link tags require two arguments: relationship and url link -> relationship -> url
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.
// -> bodystyle requires an argument bodystyle -> css
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.
title -> name title
// -> script requires at least the src argument (a url) script -> src script -> src -> defer
The time tag is supposed to represent a specific time, such as the 24-hour time, Gregorian date, or a valid time duration.
time -> text time time -> arguments -> . time -> arguments -> text
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.
section -> arguments section section -> arguments -> . section -> arguments -> text
An article is a container for content that is independent from the rest of a page, such as a Tweet, article, or blog entry.
article -> arguments article article -> arguments -> . article -> arguments -> text
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.
// -> comment
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.
// -> end requires the element be defined end -> element
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)
// -> I use div and p as examples. This also goes for all the other elements div -> arguments -> . p -> arguments -> .