Someday you may want to program a simple webpage. Not something awesome but a simple HTML and maybe CSS code whre you can tell readers some information, status etc. Its very easy to do this.
Below you will see some HTML code where you can write anything. Google "HTML tutorial" to learn more. An HTML page can be shown in any browser though CSS make it beautifull! For example if you have a personal webpage you can add some CSS code and make things better. Let' s start! :)
Organise your files
An important thing is to always organise your files else you' ll get lost. That' s sure! So for the sake of this simple tutorial let's make a folder named "mysite" and two files named "index.html", "mystyle.css" (inside the folder). Remember the file "mystyle.css" is optional as you don't need necessary to have any CSS code. It always depends of you.
HTML Programming
So, the second thing we will do is add some code in the "index.html" file. This is the file which you will later see in your browser. HTML is quite easy language to learn and i can say quite funny too. Copy & paste the code bellow and i will explain this.
index.html
<html>
<head>
{!-- Place you meta tags here --}
{!-- Link you index.html(this file) with your CSS file(mystyle.css). Its placed into commends as its optional. --}
{!-- <link rel="stylesheet" type="text/css" href="mystyle.css" /> --}
{!-- You can add your local language adding the following code(only change the 'charset' to your local). Remove commends again if you want this. --}
{!-- <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> --}
</head>
<body>
{!-- You can place a title bellow --}
<h2>News of the day...</h2>
{!-- Your can place a paragraph bellow --}
<p>You have been hacked! Remember hacking is just POWER...its up to you how to use it!</p>
</body>
</html>
In HTML you always write tags (<tag> </tag>). This is the way you are coding :) Let' s see what we have here...every HTML page start with <html> </html> tag and it must have a head and a body tag too. Only the body tag is shown in browser so the head tag is used to link this file with your CSS(give the path so it can be found), to use your native language instead of the default, for google searches etc. I explain some things in the code above. In the body part there are many things you can white and as we see above we have an h2 tag which is a header level 2. There are 6 levels(try them)! After this there is a p tag which means paragraph. And this is how it ends. Its very simple code which makes a webpage(probably not useful for personal webpage) and if you google some things you will easily modify this to your own.
CSS Programming
CSS programming is a method so you can have a better, maybe more beautiful webpage. Coding in CSS is simple and easier! The idea is to make some identities in your HTML code and in the CSS file for each element(identities) specify some characteristics. eg. in body id(entity) you can say the following (body is the only tag that dont need # or .).
mystyle.css
So, finally you have many id's like, body, main_id, content_id, header_id etc and for each one you specify some beautiful things like above. The way you can add id's in your HTML code is again so simple.
{!-- You can place a title bellow --}
<h2 id="first_header">News of the day...</h2>
{!-- Your can place a paragraph bellow --}
<p>You have been hacked! Remember hacking is just POWER...its up to you how to use it!</p>
</body>
mystyle.css
#first_header {
font-size: 22px;
color: purple;
}
Below you will see some HTML code where you can write anything. Google "HTML tutorial" to learn more. An HTML page can be shown in any browser though CSS make it beautifull! For example if you have a personal webpage you can add some CSS code and make things better. Let' s start! :)
Organise your files
An important thing is to always organise your files else you' ll get lost. That' s sure! So for the sake of this simple tutorial let's make a folder named "mysite" and two files named "index.html", "mystyle.css" (inside the folder). Remember the file "mystyle.css" is optional as you don't need necessary to have any CSS code. It always depends of you.
HTML Programming
So, the second thing we will do is add some code in the "index.html" file. This is the file which you will later see in your browser. HTML is quite easy language to learn and i can say quite funny too. Copy & paste the code bellow and i will explain this.
index.html
<html>
<head>
{!-- Place you meta tags here --}
{!-- Link you index.html(this file) with your CSS file(mystyle.css). Its placed into commends as its optional. --}
{!-- <link rel="stylesheet" type="text/css" href="mystyle.css" /> --}
{!-- You can add your local language adding the following code(only change the 'charset' to your local). Remove commends again if you want this. --}
{!-- <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> --}
</head>
<body>
{!-- You can place a title bellow --}
<h2>News of the day...</h2>
{!-- Your can place a paragraph bellow --}
<p>You have been hacked! Remember hacking is just POWER...its up to you how to use it!</p>
</body>
</html>
In HTML you always write tags (<tag> </tag>). This is the way you are coding :) Let' s see what we have here...every HTML page start with <html> </html> tag and it must have a head and a body tag too. Only the body tag is shown in browser so the head tag is used to link this file with your CSS(give the path so it can be found), to use your native language instead of the default, for google searches etc. I explain some things in the code above. In the body part there are many things you can white and as we see above we have an h2 tag which is a header level 2. There are 6 levels(try them)! After this there is a p tag which means paragraph. And this is how it ends. Its very simple code which makes a webpage(probably not useful for personal webpage) and if you google some things you will easily modify this to your own.
CSS Programming
CSS programming is a method so you can have a better, maybe more beautiful webpage. Coding in CSS is simple and easier! The idea is to make some identities in your HTML code and in the CSS file for each element(identities) specify some characteristics. eg. in body id(entity) you can say the following (body is the only tag that dont need # or .).
mystyle.css
body {
background-color: black;
font-size: 16px;
font-color: green;
}
p {
font-family: Arial;
font-size: 14px;
color: green;
}- id
- class
So let's see an example, in which i modify the body tag in my HTML code like this:
<body>{!-- You can place a title bellow --}
<h2 id="first_header">News of the day...</h2>
{!-- Your can place a paragraph bellow --}
<p>You have been hacked! Remember hacking is just POWER...its up to you how to use it!</p>
</body>
then you could have a CSS code like the following:
mystyle.css
body {
background-color: black;
font-size: 16px;
font-color: green;
}
p {
font-family: Arial;
font-size: 14px;
color: green;
}#first_header {
font-size: 22px;
color: purple;
}
No comments:
Post a Comment