Direkt zum Hauptinhalt

Introduction

We are using HTML & CSS to typeset and layout publications. HTML (Hypertext Markup Language) is a markup language and the base of every website. HTML contains your contents in a structured, machine readable form. CSS (Cascading Style Sheets) adds styling to HTML documents, so they no longer just a wall of text.

HTML

A basic HTML document would look like this:

This is not a useful template and just an example how basic HTML works

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Templates

Our templates are not pure HTML, they are written with handlebars. The templates contain HTML but also adds placeholders where your content blocks (e. g. a headline and a paragraph) will be added later. The template is used to generate the finished HTML file.

So this template:

<!DOCTYPE html>
<html>
<body>

{{#each children}}
{{html}}
{{/each}}  

</body>
</html>

with two content blocks inside, children could generate the HTML above.

CSS

When we created a template, we can add CSS to style our publications. There are multiple ways to add CSS:

Inline CSS

This should only be used if you only want to style one specific element.

<!DOCTYPE html>
<html>
<body>

<h1 style="color: red;">My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
nach oben