Here is a quick guide to make your first site. It is very basic and not a tutorial to learn HTML.
To make a site, you'll need a host. If going to make a mobile site, you can use Xtgem.com. You can get a free .tk domain at dot.tk. I'll tell you how to make your own site with some lines of codes.
Here we are going to make an HTML document. It is just a plain text document. But contains some tags which a browser can understand. The extension should be .htm or .html
An HTML document has two parts, head and body.
Suppose we are making a page for our UC Browser. So let's start from this.
To make a site, you'll need a host. If going to make a mobile site, you can use Xtgem.com. You can get a free .tk domain at dot.tk. I'll tell you how to make your own site with some lines of codes.
Here we are going to make an HTML document. It is just a plain text document. But contains some tags which a browser can understand. The extension should be .htm or .html
An HTML document has two parts, head and body.
Suppose we are making a page for our UC Browser. So let's start from this.
<html>
<head>
<--Here goes the head-->
</head>
<body>
<--Here goes the body content-->
</body>
</html>
<head>
<--Here goes the head-->
</head>
<body>
<--Here goes the body content-->
</body>
</html>
Here you can notice two types of tags. Start tag - <html> and end tag - </html>. These are just like brackets() which contain something. Every start tag should be closed with the end tag.
The first tag in an HTML document is <html>. Then we use the <head> and body tags to denote the head and body section.
Let's think of a title of our page which will be displayed on top of the browser. Let it be UC Browser - Enhance the way you browse. So we are going to put it in the head section.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
</head>
<body>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
</head>
<body>
</body>
</html>
Then choose an icon for the page and upload it to a image host. Let its URL be "http://ucweb.com/favicon.ico"
Now we place it in head section.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>
Here note that the <link> tag has no closing tag. So we have used <link />. There are also some other tags which don't have closing tags. Examples are <br /> - used for a blank line, <hr /> horizontal rule etc.
Then lets go to the body. We'll do the styling later with CSS. So we'll assign classes to different sections inside the body. We'll use the <div> tag to make more sections. Let's make a header first. Upload the image to a host. Let its url be "http://forum.ucweb.com/images/default/logo.gif"
So we'll place it in the header.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
</body>
</html>
Now lets add a welcome message after the header. Let it be "Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference."
So we can code it like this.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
</body>
</html>
Then we will place some links.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
</body>
</html>
Note that you should write the full address with http:// after href=". In between the tags you should give a title which will be displayed.
We may include google search to search the web.
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
</body>
</html>
Now lets make the footer. We'll write "UC Inc. Copyright 2010. All Rights Reserved."
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
<div class="footer">
UC Inc. Copyright 2010. All Rights Reserved.
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header>
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featured browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
<div class="footer">
UC Inc. Copyright 2010. All Rights Reserved.
</div>
</body>
</html>
Now save it as index.html and open with your browser. Looking bad? Don't worry. We will do the styling now. But first take a look at these points.
* Always name your homepage index.html and upload it in the root.
* In some tags like <img src="..." />, the tag is <img> and "src" is called an attribute(property). There can be many attributes to a tag.
* You can assign styles without CSS.
<body bgcolor="white" color="black">
<hr color="blue" />
</body>
<hr color="blue" />
</body>
But CSS gives more flexibility and features. I strongly recommend it.
* The "class" attribute will help us to style the page with CSS. If you are not using CSS, don't use it.
* Always try to make the page with less codes and more clarity. Like I could have written,
<html><head><title>Uc ...
But to make it look clearer, I inserted line breaks. It makes no difference.
* To optimize your site for search engines, your document should be well formatted. Means no unnecessary codes and all tags closed properly.
* The less codes, scripts and images there in your page, the faster it will load.
Now lets do some styling. In CSS, if we are applying the style to the body section, we will write,
body {
font-color: black;
}
font-color: black;
}
Means, we follow the following format.
tag {
property: valve;
}
property: valve;
}
First lets style the whole body.
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
Now we will style the links.
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
Note that instead of writing
a {
color: #0066ff;
style: none;
}
a:visited {
color: #0066ff;
style: none;
}
color: #0066ff;
style: none;
}
a:visited {
color: #0066ff;
style: none;
}
I have written
a, a:visited {
color: #0066ff;
style: none;
}
color: #0066ff;
style: none;
}
So we can write no. of tags separated with comma(,) if their value is same.
Now we will style the remaining parts. Such as the sections to which we assigned classes.
When we write a class instead of a tag, we use a dot(.) before the class.
.class {
property: valve;
}
property: valve;
}
So now lets code it.
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #ccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #ccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
Now after the styling is complete, let's apply it. In the head section, paste the code between the <style> tags.
<head>
<title>...</title>
<link ... />
<style type="text/css">
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #ccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
</style>
</head>
<title>...</title>
<link ... />
<style type="text/css">
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #ccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
</style>
</head>
Instead, you can save it as style.css, upload it and link to it in the head section.
<link rel="stylesheet" href="http://address of css file">
This is better to use as we can use a single css file for many pages in this way.
So the final result becomes,
<html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
<style type="text/css">
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #cccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
</style>
</head>
<body>
<div class="header">
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featuindigo browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<br />
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
<div class="footer">
UC Inc. Copyright 2010. All Rights Reserved.
</div>
</body>
</html>
<head>
<title>UC Browser - Enhance the way you browse</title>
<link rel="favicon" href="http://ucweb.com/favicon.ico" type="image/x-icon" />
<style type="text/css">
body {
font-family: Serif, Arial;
font-size: 75%;
font-color: black;
background-color: #cfdfef;
margin: 0px;
padding: 3px;
}
a, a:visited {
color: #0066ff;
style: none;
}
a:hover {
color: #00aaff
style: underline;
}
.header {
background-color: #333333;
border-bottom: 1px solid black;
}
.footer {
font-color: #cccccc;
background-color: #333333;
border-top: 1px solid black;
}
.welcome {
align: center;
background-color: white;
border: 1px solid #c6d6e6;
}
.links {
align: center;
}
.search {
background-color: white;
border: 1px solid #c6d6e6;
}
</style>
</head>
<body>
<div class="header">
<img src="http://forum.ucweb.com/images/default/logo.gif" />
</div>
<div class="welcome">
Enjoy the power of a fast and full featuindigo browser in your mobile. Download UC Browser and experience the difference.
</div>
<div class="links">
<a href="http://wap.uc.cn">Official site</a>
<br />
<a href="http://forum.ucweb.com">Official Forum</a>
</div>
<div class="search">
<form action="http://google.com/search">
<input name="q" type="text">
<input type="button" value="Search">
</div>
<div class="footer">
UC Inc. Copyright 2010. All Rights Reserved.
</div>
</body>
</html>
No comments:
Post a Comment