Website lesson 2: coding strategy

Welcome back!

If you've just found this article, I recommend checking my introduction articles and, of course, the first lesson .

Our goal - to make a project, starting with HTML, moving to CSS, JS, DOM and databases.

Introduction

Hopefully, you've tried to make a template by yourself. The more you try, the more time you save in future. The following code will be an example of my simple project.

Making content

Looking at your template, you already see what objects you have. According to my template , our header have

• logo
• heading
• subheading
• menu.

Header

We already have our block

<div class="header">...</div>

Let's fill it with the objects. The first tag is what goes first (here it is a logo). You understand that its object is image, don't be afraid to use html books to check how to use each tag.

Image

<div class="header"><img src="img1.jpg" />

What is important here? No need to write any special style tags for image, cause it is already have specific attributes such as width and height:

<div class="header"><img src="img1.jpg" widht="400px" height="400px" />

Heading and subheading

The next object is the text which is different. If the objects aren't the same, then they are separated. You see different sizes - you make two objects of text. Of course, you can use specific tags <h1><h2><h3>..., but what for do we have style tags?

As the result we have:

<div class="header"><img src="img1.jpg" widht="400px" height="400px" /><h1>Sonnenberg</h1><h1>Entspannung für alle</h1>

Where is the mistake?

We've already spoken about identity. The objects are different, so we should define classes:

<div class="header"><img src="img1.jpg" widht="400px" height="400px" /><h1 class="heading">Sonnenberg</h1><h1 class="subheading">Entspannung für alle</h1>

Menu

Our menu objects are links. As the result we have:

<div class="header"><img src="img1.jpg" widht="400px" height="400px" /><h1 class="heading">Sonnenberg</h1><h1 class="subheading">Entspannung für alle</h1><a href="#">Home</a><a href="Anmeldung.html">Anmeldung</a><a href="Flug.html">Flug</a><a href="Kontakt.html">Kontakt</a>

Why #?

# - a link to itself. If we click on the home button, it won't redirect us. What are the files in the links?

It is a direction of your other files-pages. Each page has its file, so make as many files as you need.

Other content

I don't think it is a problem to fill your website with bare content in its order. Yes, it looks bad, because of no style, but it contains all the information you work with. In the lext lesson we will start working on our design, so you will see that as for HTML it is almost done.

Tips

• No need to use this level headings, you can use the same one (for example <h1>), but with defining classes.
• If the type of the object is the same (for example, both text in one part), but they are different (for example, different color), you don't need to find other tags to make this text, just define class.
• Don't be afraid to use any resources to check the tags, but don't copy, it is not effective. Write the same by yourself instead of ctrl+c and ctrl+v.
• These colored lines in my template are independent blocks (divs). Why? They are different to others (upper and lower), at least with color. It is an independent rectangle.

Try to fill the other content by yourself using my template or make it for yours. In 4 days, we will sum up everything and move to css.

If you have any questions, write to me anytime!

Good luck in your job!

Written by Yuri Filatov, IT Expert at Andersen