Hey Folks, i see more and more people with websites these days! While it's easy to use one of those "drag'n drop" editors, or say something like webbly, i think it's more fun to make your own from scratch! So i figured i would start a tutorial of how to build your own. I learned how to do it You can to!
First you should use notepad++ (it's free!). You should not use a word editing software (like Microsoft word) as it adds "funky" characters to it (it's not welcome on websites).
Let's think about the way you build a website like the way you would build a coop. You start with the base.
here's what the basic would look like, think about this as your floor of the coop
<!-- This is a comment -->
<!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"><!-- we are using XHTML strict because it's just good coding pratcice to work with it, You allways should have a doctype! -->
<html><!-- You need to declear this allways -->
<head>
<title>Your Site title (appears in the address bar)</title><!-- You should allways include a title-->
<!-- At some point there well be more in the head, but that's not needed right now
-->
</head>
<!-- Now we need to a place to put the body, or the Main stuff in the page, we need to place a body tag now -->
<body>
<h1>This is the title of my site</h1> <!-- In general we use <h1> tag to repersent the main title site, that part is good for SEO -->
<h2> <!-- This is like a heading... --> This is a subheading less prioirty is given to this then h1</h2>
<p>Now this is a <code><p></p></code> <code><p></code> means a paragraph. you can use this as much or as little as you want</p>
</body>
</html>
there you have it.... your first html website! But Wait it's Black&White don't worry we well take care of that coming soon! You should allways close your tags if you open a tag like this <p> you need to close it!</p> there are some tags that differ from <p></p> type such as the image tag it looks like this <img src="The source of the image" />.
Ps if you need a webhost you could check out this site, it offers free hosting... http://x10hosting.com/
in the next part we well dip our feet in making it look good (using CSS to style the page) Also get into anchor tags lists etc.
Feel free to post any questions you have!
First you should use notepad++ (it's free!). You should not use a word editing software (like Microsoft word) as it adds "funky" characters to it (it's not welcome on websites).
Let's think about the way you build a website like the way you would build a coop. You start with the base.
here's what the basic would look like, think about this as your floor of the coop
<!-- This is a comment -->
<!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"><!-- we are using XHTML strict because it's just good coding pratcice to work with it, You allways should have a doctype! -->
<html><!-- You need to declear this allways -->
<head>
<title>Your Site title (appears in the address bar)</title><!-- You should allways include a title-->
<!-- At some point there well be more in the head, but that's not needed right now
--></head>
<!-- Now we need to a place to put the body, or the Main stuff in the page, we need to place a body tag now -->
<body>
<h1>This is the title of my site</h1> <!-- In general we use <h1> tag to repersent the main title site, that part is good for SEO -->
<h2> <!-- This is like a heading... --> This is a subheading less prioirty is given to this then h1</h2>
<p>Now this is a <code><p></p></code> <code><p></code> means a paragraph. you can use this as much or as little as you want</p>
</body>
</html>
there you have it.... your first html website! But Wait it's Black&White don't worry we well take care of that coming soon! You should allways close your tags if you open a tag like this <p> you need to close it!</p> there are some tags that differ from <p></p> type such as the image tag it looks like this <img src="The source of the image" />.
Ps if you need a webhost you could check out this site, it offers free hosting... http://x10hosting.com/
in the next part we well dip our feet in making it look good (using CSS to style the page) Also get into anchor tags lists etc.
Feel free to post any questions you have!
Last edited:
