Hey there,
This is the second part of my series of HTML and CSS tutorials. In part 1, I tought you how to make a background and a menu with links by using CSS and HTML. In this tutorial, I'll teach you how to make paragraphs and headers.
We will start with making a header.
As usual, we'll start by looking at the CSS.
As you can see, these will make all text in the <h1> and <h2> tags what is specified in there, like font color, size, background image... H2 will have a bacground image, but H1 won't, that will be the main header. Well this code is really simple, and all has been explained in Part 1, so I will go on with explaining how to use this in HTML.
This is just an example code. If we put together an website of what we have learned so far, we will get something like this:
Short breakdown of new stuff:
This is a line break, hence the name.
This is a paragraph tag, which is for text paragraphs.
Now, lets make some more advanced paragraphs!
This will be used for a pic that will start the content of the page.
For me this pic is the top of a white rounded square, a white rounded square is what I am inseritng text in in my page.
With HTML we will add it like this: (this is put after the H1 and before H2)
All this would do is place that pic there.
Now, we will need the rest of the pic we just added.
This will insert the image which is middle, and must fit to the top one.
Usage:
What do we need now?
The bottom.
Usage:
Now, if we insert everything we learned in this tutorial, it will be:
So, now you should have a website with a background, menu, headers and text! Starting to look like something, eh?
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-Have all images, call them the same as mine or change the code.
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Look forward to next tut, then!
Hope it helps,
--AkselJ
This is the second part of my series of HTML and CSS tutorials. In part 1, I tought you how to make a background and a menu with links by using CSS and HTML. In this tutorial, I'll teach you how to make paragraphs and headers.
We will start with making a header.
As usual, we'll start by looking at the CSS.
Code:
.H1 {
padding-right: 20px;
color: #ffffff;
padding-top: 20px;
font-size: 24px;
}
.H2
{
background: url(images/h2.gif) no-repeat;
height: 63px;
padding-top: 10px;
padding-left: 15px;
width: 400px;
font-size: 16px;
color: #ffffff;
}As you can see, these will make all text in the <h1> and <h2> tags what is specified in there, like font color, size, background image... H2 will have a bacground image, but H1 won't, that will be the main header. Well this code is really simple, and all has been explained in Part 1, so I will go on with explaining how to use this in HTML.
Code:
<h1>Welcome!</h1>
<h2>This is my website!</h2>This is just an example code. If we put together an website of what we have learned so far, we will get something like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My website</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Welcome!</h1><br/>
<div class="menu">
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
</ul>
</div>
<h2>This is my website!</h2><br/>
<p>Welcome to my website!<br/>
I made this website myself using HTML and CSS!</p>
</body>
</html>Short breakdown of new stuff:
Code:
<br/>This is a line break, hence the name.
Code:
<p>This is a paragraph tag, which is for text paragraphs.
Now, lets make some more advanced paragraphs!
Code:
#start
{
background: url(images/top.png) no-repeat;
height: 10px;
margin-top: 15px;
width: 642px;
}This will be used for a pic that will start the content of the page.
For me this pic is the top of a white rounded square, a white rounded square is what I am inseritng text in in my page.
With HTML we will add it like this: (this is put after the H1 and before H2)
Code:
<div class="start"></div>All this would do is place that pic there.
Now, we will need the rest of the pic we just added.
Code:
#middle {
width: 642px;
background: #ffffff url(images/back.gif) repeat-y top;
border-top: none;
}This will insert the image which is middle, and must fit to the top one.
Usage:
Code:
<div class="middle">
CONTENT
</div>What do we need now?
The bottom.
Code:
#end
{
background: url(images/bottom.gif) no-repeat;
height: 19px;
width: 642px;
}Usage:
Code:
<div class="end"></div>Now, if we insert everything we learned in this tutorial, it will be:
Code:
<h1>My website</h1>
<div class="start"></div>
<div class="middle">
<h2>Welcome!</h2><br/>
<p>Welcome to my website!<br/>
I made this website myself using HTML and CSS!</p>
<div class="end"></div>So, now you should have a website with a background, menu, headers and text! Starting to look like something, eh?
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-Have all images, call them the same as mine or change the code.
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Look forward to next tut, then!
Hope it helps,
--AkselJ
