Getting Started 2: html – markup language for web documents

This is the 2nd post in the Getting Started series.

Basic HTML

HTML(hyper text markup language) is a data representation format based on XML. It is used for formatting web documents in general, and contain all the required elements for a browser to render the tags as a website.

Basic XML

HTML(or XML in general) follows this following set of formatting and rules.

Sample XML Document (Not HTML btw)

<Document>
    <title>Hello World Page</title>
    <article author="Metta Ong">Lorem Ipsum</article>
</Document>

As seen from above, the document is formed by tags in the form of tags. Tags come in pairs, opening and closing tags. The opening tag is enclosed with a less than and greater than sign, and a closing tag has a / before the tag name.

Attributes are “descriptions” attached to the tags. In the above example, the author="Metta Ong" is the attribute attached to the article tag. Content placed between the open and close tags are actual text content of the tags.

XML hierachy is pretty simple to understand. In the example above, both the title and article tags are considered children of the Document root tag.


Main structure of web pages

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Main structure of web document

Different versions of HTML

There are many HTML versions out there (the most recent one is HTML5). To tell the browser which version of HTML your document is, we use the DOCTYPE tag.

So, at the top of your document, incude the following line: “. This tells the browser that your document follows the HTML5 format.

For those curious few out there, there are a few different types of DOCTYPE for HTML4 document is – strict(), transitional(), etc. You can read more about doctypes here.

Main 2 components

The head tag is the place where all the information goes. Data contained in this tag is usually not rendered. By convention, all scripts and styling goes here, together with all the information of the document, like the title, description, etc.

The body tag is the place where all the rendered information go. All your headers, navigation and content goes here.

Document information

<head>
    <title>Title of Document</title>
    <link href='/path/to/stylesheet.css' type='stylesheet' />
</head>

Example head tag

All the information will be stored here, the title of the document, all the metadata (description, author, etc). The metadata can be used for search engine optimization (SEO), it gives the browser detailed information to categorize your document (more on that in other tutorial).

While styling can be done on the main html file itself, you can also attach stylesheets using the link tag. The syntax to do so is as follows: “

You can attach things like favicons (the small tiny logos for your page). Using the link tags, these images can be attached as so:

<!-- linking a style sheet -->
<link href='path/to/style.css' rel='stylesheet' />

<!-- favicon -->
<link href='path/to/icon.png' rel='icon' type='image/png' />

Basic components

In the previous post, you learnt about formatting documents using markdown, know that you know the basics about document formatting, I will now teach you how to do all that in HTML (yeah, finally :>)

Headers

In markdown, there are different kinds of headers, representing different layers of information. The highest level of all headers have the h1 tag, it all goes all the way, from h2, h3, all the way to h6.

<h1>Usually for the main title of the page.</h1>
<h2>Subheadings. Title for the different sections</h2>
<h3>Even smaller headings, content headers maybe?</h3>
<h4>Not too sure why you would go so deep...</h4>
<h5>Probably just use this for styling purposes...</h5>
<h6>When you reach here, its time to split your content...</h6>

Paragraph text

The p tag (yeah, p for paragraph) used to contain all your text. It can be can be any kind of text, its the generic text container. It is to be embedded in the new HTML5 content tags for SEO (searc engine optimization).

Text styling

Within the paragraph tags, there are some special styling tags to basic transformation to yout text. Here are some of the basic tags available for use.

<b>bold, b for bold</b>
<strong>makes the text bold</strong>

<i>italics effect, i for italics</i>
<em>also italics effect, emphasized</em>

<u>underlined text, u for underline</u>

<mark>highlight text. yep, like a highlighter.</mark>

<s>to show cancellalation (strikethrough), really...</s>
<del>strikethough, similar to the 's' tag</del>

<sub>subscript, text written close to the foot of the text</sub>
<sup>superscript, you know like in math, the power function</sup>

<code>Shows code. text will be displayed in monotype font.</code>

For more advanced styling, you can take a look at the CSS declaration specified for text..

Images

Your pages will be boring with any visual candy. The image tags (img) contains your images. (like duh.)

<img src='http://lorempixel.com/400/200/' alt='a random image' />

Yes, img tags are one of those special kinds that do not need to be closed (because your browser most likely wont render anything enclosed by those tags).

Links

The web works like a interwoven collection of pages, and linking them together will be these a tags (a for anchor). These tags have an attribute href (hyperlink reference), which points to the location you want to redirect your readers to. And this is how you use it:

<a href='http://www.google.com' target='_blank'>
    Link to google
    <img src='path/to/img'/>
</a>

Yep, you can put images in your a tags too. Actually, you can put in anything basic tags under the sun and it will work.


Adding more structure

Most pages will have a certain page structure to it, header,content, footer, at least. The basic containers for most elements are the div and span tags.

But in html5, there are many more tags that can better segmentalized your page into the appropriate sections.

Basic containers

The most basic tags are the div and span. There are a few difference between them. div is for block elements and span is for inline elements.

Block elements refers to a whole section of the page which are displayed as blocks of content. These usually refer to section of the page, such as header, navigation bar or footer.

Inline elements as their names suggest, refers to a small portion of content, within a block to which specialized styling (usually through CSS) is applied to.

HTML5 section tags

In HTML5, there are much more section tags that helps add structure to the documents.

header is a section tag for containing the header content. It can include your logo, your page header, and whatever you plan on putting in your header section.

footer serves the same function as the header tag, a container for footer content (including copyright and contact information).

article contains the main content for the document. But if they are sections in the article, you can use the section tag to separate your content.

nav tags are for navigation. It will consist the links to the different sections of your website (home, about, etc).

aside tags are for sidebars which contain additional bits of information (description for blogs for example).

There are more of course, you can view all that here.


Special Content

In HTML5, there are many new semantics tags added to give structure to your documents.

Pre VS Code

We talk about the code tag just now. But for whole sections of codes, we use the pre tag to contain whole sections of code, preserving the newlines and whitespaces, keeping all the indentation intact.

<pre>
function add(x, y){
    return x+y;
}
</pre>

Figure

The figure tag is used to contain illustrations and pictures. The figcaption is used to add description to the figure. This all is written in the following manner:

<figure>
    <img src='http://lorempixel.com/400/200/' />
    <figcaption>
        Some random picture from lorempixel
    </figcaption>
</figure>

Audio

The audio tag is used to embed an audio resource into the page.

<audio src='test.mp3' type='audio/mpeg' />

Video

video tag is similar to audio tag, but with videos instead of audio files.

Canvas & SVG

The canvas and svg tags are used for drawing things on the page. The canvas tag is controlled using javascript. The svg tag draws using xml. Learn more about canvas and svg.


What’s next

  • Forms (text input, form submission)
  • Tables (systematic display of info)
  • Separators (line breaks)
Advertisements

Getting Started 1: Markdown – Simple formatting for your documents

This will be the first post of a series where I teach frontend developement. This series will include everything you need to know, sufficient to get you started with the basic tools that can help you create your site.

All web pages have formatted structure and content. Markdown exposes the most commonly used structures in web documents, so you can produce web documents without any knowledge of HTML.

Markdown is a widely adopted tool, and can be used to write your posts on WordPress and Tumblr, among other places. It is great place to start gaining more control over your content.

Trying it out

You can try Markdown using a web markdown editor, such as dillinger.io. But for those with more time on their hands, you can download the official markdown compiler to generate your web document (instructions here).

Basic markdown syntax

Here are a few basic formatting that you will be using very often in your documents.

# H1 Header: Title of the document
## H2 Header: Subtitle of the document
### H3 Header: Sub-subtitle of the document
#### H4 Header: It goes all the way to H6, so…
Do remember the space after the hashes

– Unordered list item1
* Unordered list item2
+ Unordered list item3
Yep, you can use either "-", "*" or "+"

1. Ordered list item1
2. Ordered list item2
5. Ordered list item3
It doesn't matter the order of items, they will all appear in the same list.

**Bold Text**
__This is bold text too__
These will be surround by <strong> tags (more on that in the next tutorials).

*Italics Text*
_This works too_
Surrounded in <em> tags, it means emphasised text (we'll cover that later too).

> quoteblock
> > Yep, quoteblocks can be nested
Quoteblocks are separated blocks of text that can be styled different from the rest of the text.

`inline code`
“ If you want to put "`" in your code, this is the way to go. Do note the space after the double backticks. “


***
Horizontal rule (one line across the document), both works

Links and Images

Links and images can be written differently, either inline or referenced.

Inline format for links
[Link Text](Link URL)
[Google](http://www.google.com)

Inline format for images
![Alt text for image](Link to image)
![Example Image](http://path/to/image.jpg)

Reference style format
[Google][1]
[1]: http://www.google.com (optional title)

Self referring format
[Google][]
[google]: http://www.google.com (name not case sensitive)

The references can be placed anywhere in the document, after the paragraph they are used, or at the end of the document, like footnotes.

Where to go after this

Markdown is just a basic formatting for your documents. All these are compiled into HTML(hyper-text markup language) which when viewed in browsers, comes will all the appropriate styling.

In the next tutorial, we will delve deeper into HTML itself, which gives you a better understandin of the HTML file that Markdown outputs.

I want more

There are many different markup languages, geared towards different usages. Personally, I would recommend you to learn and master GitHub Flavoured Markdown. It is one of the few widely adopted extension for markdown and can be used in many blogging and content creation platforms (dillinger supports GFM too).

The extended Github Flavoured Markdown includes many syntax to format more complex document structures like tables, code blocks, and many more.

Fountain is a markup language specially designed for writing scripts for plays. There are many different formatting for standard elements in plays, such as the setting, dialog, etc.

There are more of course, so, go forth and explore them on your own.