You need to know first html ( Hypertext Markup Language ). We skip this step now. You will get some idea what it is on the way anyway. Later on you can check all about html tags and codes. At first you only need to know maybe 20 to 40 of them. You do not need to know all of it for now. Later on when you study more you can learn more tags and create more complicated things.
Step by step
To write this codes you need a text writing program like word pad or note pad is enough for it. You can later on use programs like frontpage specially created for this purpose which has actually properties for designing without coding too which named as editor. But i recommend you to learn this language.
Open your word pad or note pad now. Let' start your first page.
Any website need a homepage. So create a homepage first and a .CSS ( Cascade Style Sheet ) document which is style for your site. You do not need to know all of them what they are right now. Later on slowly you will know what they are. Create a new folder on desktop or anywhere you want and name it 'mywebsite'. Because you will put all files of your website inside this folder.
Ok now open notepad or wordpad. We will create a cascade style sheet first. Briefly CSS is a file which is holding all designing tags, attributes, colors, font types and anything about your website design.
Write there
body {
background-color: #ffffff;
color: #330000;
font-family: Verdana, Arial, Sans-serif;
}
You can ask what these are all means? This means your websites background color will be #ffffff means white. You can write there white instead of #fffffff which is hexacolor(16 bit color) code but old versions of browsers not perceive name so i suggest you use hexacolor codes. Color refers text color, font family is font types. What if we do not put this colors. Well it will still work but default color is grey. So everything inside the site will be grey. You can see all this hexcolor in some sites like this: http://www.colorhexa.com
Now what? Now we will put a header style to website. just under this code write this.
h1 { background-color: #cc9966;
color: #000000;
line-height: 200%;
text-align: center;
}
Like sites body same, background color, text color, plus here line hight and text align exist for positioning the header, text line etc..
Also lets put a navigation, footer and wrapper. Wrapper not much necessary for now but lets do it. What else we can put is sidebars and some others. But for now as simple as possible.
.nav {
text-align: center;
}
.footer {
background-color: #ccaa66
color: #000000;
font-size: .60em;
font-style: italic;
text-align: center;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Ok it is done. But do not forget all of this you have to write in same place altogether not part by part like it is seen here. Now go to on left top of word pad and click 'file' and click 'save as' and name it like yourname and give a surname as .css so it will be like "yourname.css" and click ok. But save it into folder you open on desktop as website. Css can be internal too just inside head tag. By the way starting with . is class and with # is div (division) they calling. You can name it anything you want. It is not necessary to name them nav and header..Why not in front of body or h1? Because they are elements of html ,they are html tags..
Our cascade style sheet is ready. Now we will create the pages. Every website has a homepage. So we will create a homepage first too. For this we will use again word pad or note pad. Open word pad.
Write this first, this is for something about registration and protocols this and that. You do not need to know it for now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
And under this write
<head> this is a tag name is head tag you probably seen it on net time to time and wonder what it is. Now you starting to know. But every tag must be closed except a few of them. How you close a tag is like this. </> . So you will write </head> and we will put inside this start and close tags some other codes. You need to relate your css with pages so you have to put there this.
under the head
<link rel="stylesheet" href="NAME.css" type="text/css">
And before this we can put a title otherwise it will show on browser name as a link.
<title>Whatever you want to put tittle here just write it</title> This is also under head. I almost forgot. You need to close head and html tags. <head> and <html> . For now you can save and see how it look like later on we can add more. How you will save it. Same like css go file click to save as ( this is important ) Write name as index.html and change document type as text document and click ok. save it also in same folder you create first. Now open folder and click on index.html. It will open in your browser a page but no one can see it yet because you did not publish it yet. If you want to add new things inside you have to open it right click and click "open with" choose note pad or word pad.
Actually professionals mostly first design website and later on put all coding inside. Designing means is like where i will put header where sidebar will stay what i will put in footer etc. What kind of pictures and crop and clean them on Photoshop etc.. If you will use flash, java applet or any applications where and how etc.. So we are not professional yet so no worry.
I will continue this later on. And change this site little bit more. I did not test yet so can be some faults there.
No comments:
Post a Comment