Click on the Logo to return to the homepage

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Resources

 

Step 3: Formatting text: headings, paragraphs, line break

Headings:

Now you will start bringing your text into shape. You will format the heading of your text and give your resume text a better structure. For doing this you will have to add additional html tags to your text. Remember: html tags 'tell' a web browser how text and other content will be displayed.

The so-called heading tags <h1>text</h1> to <h6>text</h6> are used for formatting a heading. As you might guess h stands for heading. 1 to 6 indicates the size of the heading wheras <h1> is the biggest and <h6> the smallest.

If you want to display your page title, e.g. Resume Max Mustermann, as a heading size 1, the syntax is as follows:

You type in your text editor:

<h1>Resume Max Mustermann</h1>

And your web browser displays the heading as:

You can later try out the effect of different heading tags on your text.

 

Paragraphs:

The paragraph tag <p>text</p> is used to create a paragraph. There is always a space between paragraphs.

If you want to group sentences to paragraphs, the syntax is as follows:

You type into your text editor:

<p>Structuring a text into paragraphs makes it easier for the reader to scan the text.</p>
<p> You can use the paragraph tag for separating paragraphs.</p>

And your web browser displays the text as:

 

Line Break:

You can create a simple line break between sentences of a paragraph with the break tag <br>.

If you want to create a line break you type into your text editor:

<p>Structuring a text into paragraphs makes it easier for the reader to scan the text.<br>
You can use the paragraph tag for separating paragraphs.</p>
<p>The formatting guidelines for web text differ from print text to a certain extent.</p>

And your browser displays the text as:

 

Exercise:

  1. Open your file index.html with the text editor.

  2. Add a headline (e.g. Resume of Max Mustermann) to your resume text and use the tags for heading 2, i.e.: <h2>head line</h2> You have to write the heading right after the <body> tag!

  3. Structure your text into paragraphs and insert line breaks where needed.

  4. Save your file again and display it in your web browser.

  5. Your web page should look similar to this example.

  6. Tip: in case your web page does not like in the example view the source code of the example and compare the syntax with the one in your document. Make sure all the html tags are written in the correct form and at the right position.

  7. Very good! You have now mastered step 3 and can move on to step 4 of this tutorial.
Copyright: Christian Maurer