Website lesson 1: structure of HTML

#html #css #tutorial #beginners

As I've already told you, I've decided to make my own school. So the idea is to make by the end your own project.

Introduction

You already have resources to learn tags by yourself. So let's make everything on the example of some website (an easy one).

Open Moqups to start making your template.

What a good simple website needs?

Menu with links that are good visible (no need to scroll down to find the page you need, maybe it can be both in the upper side and lower side).
Pictures (or animated such as slideshow). Less text on the main page, but more visuals.
Good font (size, color, family). It is always more pleasant to read "beautiful" text.
Your heading and logo that catch eyes.
The main page should contain a small introduction and lower things that show the idea of your website.
Communication. There should always be the way to share something and to express feelings (comments, likes)
Contact page (side) with social medias

Try to make something yours just to learn how it works. You will need your template later. Using this template, you will define the width/height (for example) of different objects.

You can check my simple website idea, the easy project we will work on.

Making first steps

Open your tool/app or just notepad where you are going to begin. If it is a specified tool, you already have the template:
<html><head></head><body></body></hmtl>

Head

The main thing that MUST be used is
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
You define your content type.

First of all, let's define the title of our website, that you see in browser as a tab name.
<title>Sonnenberg</title>

Head is the part where you connect your CSS file with HTML. You can write style tags in this part, but the rule of the beautiful code - structure. So if you still haven't made an empty CSS file, it is the right time. Better to save all your files (HTML, CSS, JS) in one folder, so you don't need to write the direction of your file.
<link rel="stylesheet" type="text/css" href="style.css">
Rel is the part where you define.
href links. So instead of the name of your CSS file, you can use any link to a CSS file.
Now all your style tags you just write in your CSS file.

Body

Body is the main part of your website - content. Everything you want to be displayed on your page should be written here. Remember one thing that this HTML file is only for one page. If you want to make another page like not Home, but Contact make another HTML file. One useful thing: all your names should have max value. If you make a page Home, then name your HTML file Home.html. So with classes.

Table or blocks?

Table sites are just like dinosaurs. They are really old and not beautiful if we can say so.

We will use blocks and only blocks!

DIV

(On my template) You devide your website into 3 or more rectangles (parts), for example: header with menu part, introduction part with a picture and a text right to it, line "Top Reiseangebote", 4 tours, line after that and a footer part.
The idea - devide into rectangles.
Every your rectangle (block) is Div.
<div> ... content tags ... </div> <div> ... </div> ...

Class

One more important thing - your tags aren't always empty. Inside of your tags you can write attributes.
The main attribute that is must to be used - CLASS.
As you see, you have, for example, 3 rectangles = 3 div. How do you understand which div is for header and which for footer? So we use class to define our objects (to give them a name).
<div class="header">....</div><div class="introduction">...</div>...
Why do we need it?
When you write style tags for objects, you won't write for every div but for div header.

There is no problem in using tags as it is free on the Internet (check my previous articles for resources). My idea is to make it all understandable. So for the first lesson you don't really need to make any code. Your idea - to try to make your template or repeat mine, cause all coding I will make accourding to my template.

Hopefully, it is all understandable!
Follow me for the next lessons.

Good luck in your job!