Login

bugmenotlol · 04.11.2017, 04:07

Please Note: This tutorial will be divided into different parts. They will be added as I create them. I have just started with this as I didn't want to completely finish this just to realize you guys aren't interested in this type of stuff. Having said that if you do want me to continue adding to this topic just leave a nice reply telling me what you'd like to see.

Part 1 - Introduction

Here I will be teaching you how to make a simple HTML and CSS website. Including some jQuery animations. Before you start with your website you must figure out a design and what you want to put on it. I have made a simple design which we will be recreating using HTML and CSS.

http://www.williamoordt.com/images/design.png

Now don't think you need to first buy a website to do this. This is not needed. You can simply create the website on your desktop, however this won't get your website online. So let's get started.

Part 2 - Creating the root folder of your website

What we first wanna do is go ahead and create a new folder on our desktop. I am gonna name it "root" as it is the root of our website but you may name it whatever you like. Inside this folder we will create a new Text Document. This is the file where we will be adding text, images, etc. to our website. So now we are going to open the file and click "Save as". We will be naming it "index" and giving it the extension of ".html". Once this is done we will create another file and Save it as "style" with the extension of ".css". Now that we've finished setting up the root of our website let's start to create the website itself. Open up your index.html file.

Note: You can use whatever text editor you like. I am going to use Notepad for this but you may have Notepad++ or other text editors and please do feel free to use those if you want.

We're going to start with the very bare bones of HTML.

Code:

<html>
	<head>
	</head>
	<body>
	</body>
</html>

As you can probably see every one of these "tags" have also what's called a closing tag. A closing tag is needed for almost every HTML tag, discluding the following.

[center]• <area>
• <base>
• </br>
• <col>
• <command>
• <embed>
• <hr>
• <img>
• <input>
• <link>
• <meta>
• <param>
• <source>

Part 3 - Linking to your CSS file

Now I will tell you more about the <head></head> tags later but the <body></body> tags are where you put the visual things. Images, text and literally anything you want on your website. Let's start by adding whats called the header. Most website's use their header to put their logo, company name, as well as navigational links such as Home, About, etc. As shown in our picture we have a red rectangle the full width of the page, including "Sanchez is cool." in it. We will be creating this inside our body tag. We create the red rectangle using a <div> tag. This tag does need to be closed. We will be also giving the <div> tag an ID. This is so that we can separate the styling of this <div> from others. You can name the id whatever you want but since its the header I will be naming mine "header". Your code should now look just like this.

Code:

<html>
	<head>
	</head>
	<body>
		<div id="header"></div>
	</body>
</html>

Now to give the <div> a background color, width, height and other things we will need to link it to our style.css file. For this we will be using a <link> tag. This will be located inside of our <head></head> tags instead of the body. As seen above this tag does not need a closing tag. Now to tell the link tag where to find our CSS file we need to tell it the type of the file just like this. The type of our CSS file is "text/css". Your <link> tag should now include this inside of it.

Code:

<link type="text/css">

Now we need to tell it where the CSS file is located. Since both index.html and style.css are located in the same folder we will just tell the computer to look in the same folder as the HTML file. Just like this.

Code:

<link type="text/css" href="style.css">

However if we we're linking a .png file we'd have to tell the computer to look in our images folder. We would do that by adding "images/" in front of the file name. That is done like this.

Code:

<link href="images/picture.png">

We also need to add 'rel="stylesheet"'. This should be your full HTML code right now.

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="header"></div>
	</body>
</html>

Now that we have linked our CSS file to the HTML file we need to go ahead and edit our CSS file. What your going to do is save your HTML and you can just exit out of that. Then go ahead and open up your style.css file. CSS code is different than HTML code but also fairly easy. Previously when we created our <div> we gave it an ID. We will be using this to identify it in our CSS code. You do this by adding a hashtag or a pound sign before the name of your ID, (#). In your CSS file you should have the following.

Code:

#header

Now we need a place to put our code. To open and close our #header styling we use { }. Like this.

Code:

#header {
	code here
}

In between the { } we will have our code such as width, height, etc. Some of the CSS documentation is easy because you'd write just what you think'd you have to write. Plain english. To be adding our height and width we will use "width: ;" and "height: ;". Your code should resemble closely to the following.

Code:

#header {
	width: ;
	height: ;
}

Since we want the width of the header to be the full size of the page we will tell it 100% like this.

Code:

width: 100%;

The height we want to be around 130 pixels, we add that like this.

Code:

height: 130px;

Now that it has a height and width it also needs a background color. This will simply be done with "background: ;" To find what color we want we will going to this website which gives you a variety of HTML web safe colors.

http://www.html-color-codes.info/ is a very good source to use for any occasion, even for VIP's who want colored call signs.

You can pick whatever color pleases you most. I will be choosing a nice dark maroon red color. Just click on the one you want and take the code and copy it inside you "background: ;" like this.

Code:

background: #8A0808;

At the moment this is the code you should have

Code:

style.css
 <html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="header"></div>
	</body>
</html>

style.css
#header {
	width: 100%;
	height: 130px;
	background: #8A0808;
}

Now Save your index.html and style.css and open up index.html in your preferred web browser. If all your code is correct you should see a bar at the top of your screen with the color you have chosen. If you do not see this feel free to look at the code that I've written and review your code. Otherwise congratulations! You're on the road to creating your very own, personalized website.

Part 4 - Website Title/Name

Now of course people can come to your website and think "Hmm... cool design. But what's it about?". So that's why we need to write the name of our website inside our #header <div>. For this we will again open up our index.html file. Here will separate <div> and </div> to fit things inside it, just like so.

Code:

<div>

</div>

Now inside inside our <div> we will be adding an <h1> tag. This tag does need to be closed. In between <h1> and </h1> you can add any sort of text you want. As it is your website title/name I recommend keeping it short. I will just be writing "Sanchez is cool." because after all, I'm cool :P. Now your code should look somewhat like this.

Code:

<div>
        <h1>FreAkeD is cool</h1>
</div>

Now if you open your index.html in your favorite web browser you will see the your website name looks pretty ugly. That's where the CSS comes in. Go ahead and open your style.css file. Remember with our header we gave it an ID to specifically identify it personally? Since our <h1> is inside our #header <div> we can target all the <h1> tags inside that <div>. Simply done just like this.

Code:

#header > h1 {

}

Now that we have targeted our title we need to give it a cool font. Now choosing font's is tricky. If you choose a font and a person viewing your website doesn't have this font installed on their PC nothing will show up. That's why we have an option of making what's called a font family, here's what it looks like.

Code:

font-family: font, alternate font 1, alternate font2;

What this does is if the website viewer's PC doesn't have the first named font, it replaces with the second, etc. I recommend always putting Arial in there somewhere as it is a cross platform font. Here is a small list of a few web safe fonts.

• Arial
• Century Gothic
• Tahoma
• Georgia
• Comic Sans MS

We're also going to give a color to the text and a size. For the text color you simply just use color: ;. For this we will again need to pick an HTML color. As I picked red I'm going to use white text which is simply #FFFFFF.

www.html-color-codes.info - HTML Colors

The font size is also what you may just expect, font-size: ;. I'm gonna give it the font-size of 64px; At this point you should now have this.

Code:

#header > h1 {
	font-family: Century Gothic, Arial;
	font-size: 64px;
	color: #FFFFFF;
}

Now you will probably notice that your text is all the way to the left. We can either center that or push it off the edge a bit. Don't worry, whatever one you choose, I will be teaching both. To get the text in the center we need to add this below color: ;

Code:

text-align: center;

That one is pretty self explanatory, however if you don't want it perfectly centered CSS also has something called padding. This will push your text farther off the edge of the #header <div> depending on how many pixels you add. For my website I will be doing a padding-left of 200px; This code is written like so:

Code:

padding-left: 200px;

We solved the problem of being pushed to the left but its still completely glued to the top of the <div>. To fix this we can either add padding-top: ; (same as padding-left except from the top) or we can add what's called a </br> tag right before it. Just like the ones listed further above, this tag does not need to be closed. I will be using padding-top: ; in our CSS file as it is way more accurate than </br>. You can play around with the pixels for the padding but mine will be 25 pixels. If you have completed this part of the tutorial correctly your code should look somewhat like this.

Code:

index.html
 <html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="header">
			<h1>FreAkeD is Cool</h1>
		</div>
	</body>
</html>

style.css
#header {
	width: 100%;
	height: 130px;
	background: #8A0808;
}

#header > h1 {
	font-family: Century Gothic, Arial;
	font-size: 64px;
	color: #FFFFFF;
	padding-left: 200px;
        padding-top: 25px;
}

~~Kaperstone~~ · 04.11.2017, 04:43

Code:

</br>

You don't have to add that slash
<br>
<br />
</br>
are all the same.

EDIT: <link type="text/css" href="style.css">
Better add that ``charset="utf-8"`` if you want to write proper code & fast code (old browsers)

EDIT2:

Quote:

font-family: Century Gothic, Arial;

Helvetica? serif? sans-serif?

EDIT3: Where is the doctype?

EDIT4: Where is the meta charset?

xxo · 04.11.2017, 17:00

Quote:

Originally Posted by Kaperstone

Code:

</br>

You don't have to add that slash
<br>
<br />
</br>
are all the same.

EDIT: <link type="text/css" href="style.css">
Better add that ``charset="utf-8"`` if you want to write proper code & fast code (old browsers)

EDIT2:

Helvetica? serif? sans-serif?

EDIT3: Where is the doctype?

EDIT4: Where is the meta charset?

The <br /> is the recommended W3C format. Trailing slashes must be used in XHTML

**dugi** · 04.11.2017, 17:17

What does it have to do with sa-mp?

Eoussama · 04.11.2017, 17:25

I'd personally prefer using <header> instead of a <div> to make content on the website's header, HTML5^^
But why post something like this in sa-mp forums?

Dayrion · 05.11.2017, 03:35

Quote:

Originally Posted by dugi

What does it have to do with sa-mp?

N0FeaR · 27.02.2018, 05:30

Good job!

Electron123 · 27.02.2018, 07:56

Thanks bro, I was learning about the web development this guide helped me a lot!

eXtr1kE · 20.05.2018, 12:13

If you use jQuery you can't call you a Web developer, trust me. You have to look in webdev more, working only with JS, TS and using a framework (Angular it's a good example).

Login
Username:
Password:	Lost Password?
	Remember me