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>

This will result in a red headline.

Stylesheets

This is the preferred way to style your publications since it defines universal styling rules that will be automatically applied.

Firstly, we have to add a head block with a link to our css file (here book.css):

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="book.css">
</head>
<body>

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

</body>
</html>

Now we will need to create this css file:

h1{
color: red;
}

Now all level 1 headings (h1) will be rendered red.

More Resources

This article can only give you a first impression of what HTML/CSS is. You can find a detailed guide to create templates in the next articles, but you should learn the HTML/CSS basics first.

Here is a list of good resources for learning the basics:

Keine Kommentare vorhanden

nach oben