Creating the most basic HTML site
Introduction
In this tutorial, I would like to give you the most basic tools to make a HTML document with CSS.
This will not dive too much into the theoretical aspects, though.
The HTML document
Create a text file, call it index.html (The ending .html makes it an HTML file.)
And open it with a basic texteditor. I tend to flip-flop between Notepad++ and Visual Studio Code these days.
(If you us vs Code you also need to install the extension HTML CSS Support, btw.)
To start with, let's contruct the basics piece by piece. Starting with a html Element.
<html>
</html>
Next, we are gonne add a head Element (this is where meta infos like the title will go).
And a body Element. This will contain all the main infos.
<html>
<head>
</head>
<body>
</body>
</html>
To finish it of, we add the doctype, what language we are using, the encoding, and a titel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Title - Our little HTML Document </title>
</head>
<body>
</body>
</html>
Getting you started with some HTML Elements
Now we want to actually display some stuff in our document. So I am going to introduce to the tags
h1-h6, p,br,
strong, em, div,
span
<body>
<h1>
The main title of the document, only one!
</h1>
<h2>
A smaller title, as you go higher, they will get smaller.
</h2>
<p>
A paragraph. Will create a new line afterwards and add some space.(It is called a block Element)
Now lets make a <strong>strong</strong> statement, write some <em> italic </em>,
with <em> we will create a new line.
Those last three are inline Elments, of which only br creates a new line.
</p>
<div>
<div>
Div Elements are your basic block-Element container. Very useful to create all kinds of designs,
Internally all of this is INSIDE a div Element!
<span> span is similar but inline!</span>
<span> Internally:span^3</span>
</div>
</div>
</body>
Now let's combine all of this with the rest of our document and open it in the browser of your choice!
(Firefox.)
How does it look? THAT'S right it looks terrible! No formatting at all. For that, I will teach you some basic CSS!
Adding form and color with CSS
Before we get started, let's organize things a bit: If you haven't already, put your index.html in an
appropriate folder. Then create a new folder in there called 'css'.
In there, create a new text file called style.css ! This is where all our CSS code will live in.
Now it is time to link the file (in our head of course.) For that simply add the following line inside of the head Element:
<link
href="css/style.css"
rel="stylesheet"
type="type/css"
media="screen">
With href you specify which CSS file is being used.
With rel you say it is your stylesheet, type is your MIME type (what the file is made of, essentially).
media is only kinda relevant for us. What it does is specify where the CSS file gets applied. With this whatever we put in style.css will for example not be printed.
Color, Background Color, and Borders
First concept we will need to look at, are selectore! So open your style.css in the editor of your choice!
We are gonna start by manipulating our p!
p {}
THAT is a selector (for p here of course)! Now let's add some background color, a color for our text.
p {
: #000000;
: #FFFFFF;
}
Let's do a short summary of ways to use colors in css, all using RGB (red,green,blue) values:
- As hexidezimal values: #000000 is black
- As rgb value: rgb(255, 255, 255) gives you white!
- With predefined key words: black also gives you black!
If you use some kind of art software (like krita), you can always use the color picker (and the pipette) to choose a color!
Let's add a border as well.
p {
: #000000;
: #FFFFFF;
: 6px solid purple;
}
Size, Margin, and Padding
If we are talking about space, we need to talk about units:
- 2px : Space measured in pixel, here 2 pixel
- 50% : Take up a percentage value of the container we are in
- 1em : This is a multiple of font size of the container we are in.
The very first will be based on font size of your browser! (You can change that,btw!)
- 1rem : Similar to em, but is not dependent on em values of ancesters
Now, if you use rem, you will want to add the following line at the beginning of your CSS file.
html {
: 100%;
}
Now let's look at width, height, margin, and padding!
p {
: #000000;
: #FFFFFF;
: 6px solid purple;
: 50%;
: 200px;
: 8px;
: 16px;
}
With this, now every paragraph will take up only half of the possible width and take up at least 200px.
It will have 8 pixel distance to other elements (in all directions), and the text in it will have 16 pixel distance (on all sides) towards the edge of the background.
For margin (and padding) you also have more options:
- margin: top left bottom left; (replacing these with actual values, of course)
- margin: vertical horizontal;
- or more directly with: margin-top,margin-bottom, margin-left, margin-right
And the same is possible for padding!
Classes and Ids
Of course, I can't just leave without THE most important tool:
Ids (only one of each in html doc) and Classes (multiple uses).
They are really easy to use. (I will only give you the most simple usage here/for today.)
First we will create some div and and span Elements in our document:
<div id="myId" >
<div class="myClass" >
</>
</div>
These are called attributes,btw.
Now let's define their usage in our style.css!
#myId {
: #000000;
: #FFFFFF;
: 50%;
: 200px;
: 8px;
: 16px;
}
.myClass {
: #cccccc;
: #000000;
: 50%;
: 100px;
: 8px;
: 16px;
}
This will display the two divs we created as a grey box inside a black box!
And of course you can combine these things however you want.
End of the tutorial
Now this should give a pretty decent foundation for things to come.
Of course if you want more, you can always go to https://www.w3schools.com/ for a whole
lot more tutorials. And I will likely also write more in the future!
Until then, see next time!
