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
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
<h1>
), but with defining classes.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
#html #css #tutorial #lessons #for #beginners