- HubPages»
- Technology»
- Internet & the Web
How to create a web page
Learn how to make a basic webpage
Web design is a fast growing industry and to do it really isn’t that hard because it’s easy to learn, and there are resources everywhere to learn from. To build a website you first need to learn how a website works. Websites are basically just a bunch of codes all working together to tell your web browser how to look and what to show. Each web page needs to have certain criteria met to make it work. If you do not follow certain rules then the web browser won’t know how to interpret certain codes and can make it look different then you want. Another nice thing about designing websites is that you really don’t need any special tools or programs to make the website. You can use any basic text editor like Notepad which comes free in if you have Windows. Most web designers don’t use text editors because they take too long type out and also programs such as DreamWeaver make it a lot easier to let the program do all the coding as you do all the designing. So now that you know what websites run on code, I’ll tell you the basic codes that are a must for each website.
Websites are in a phase where groups are trying to get all websites to have the same type of code and also for web browsers to read code the same. This is called XHTML, which is a hybrid of XML which is a more dynamic way of designing sites and HTML which is hyper text markup language. Also everything needs to be lowercase, just an FYI. So now that you know that XHTML is the way of the future you have to know what to put at the beginning of any coding you do which is this code line
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is probably at the beginning of any webpage you look at the code of. In face if you right click this web page and go to view source you can see at the top that that line is written there. That line tells the web browser what kind of code is in the website and how to read it and display it. So that is what goes at the top of each webpage. The next tag is the HTML tag which looks like this.
<html>
</html>
The HTML tag goes around all of your content except the doctype tag. When you put all of your content between the html tags it is telling your browser that it is a web page. Pretty simple, nothing special there. Note how there are two head tags. Tags are things in <> they are what the browser reads to put things in the right spots basically. Each tag needs a closing tag which always has a “/” in it. The first tag also can have different attributes which would look like this.
<tag=”attribute”>
Next you need to tell the web browser what needs to go in the head tag. The head tag is where you put in the title of the site like how at the top of this webpage it says, “How to create a web page-hubpages” or something like that. Also that’s where you put in a bunch of undercover coding for different scripts, meta tags, and other commands that control the page. But we can get into that on a different hub. This is the how the head tag should look for a basic page.
<head>
<title>Title of the page here</title>
</head>
So that just told the web browser to put “Title of the page here” at the top of your browser.
Which you have attributes on tags they need to be in quotes. Its part of the XHTML criteria. Ok so that was the head tag. Now onto the next important part of the webpage which is the body tag. The body tag is where you put all your content that you want people to see, the body tag has a ton of info between the tags and is what the browser reads and displays. This is the body tag.
<body>
</body>
You always want all your content between these tags because that’s how your browser knows what to do. So now let’s put these all together and see what we get. Open up your notepad or text editor and copy and paste this into it.
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first webpage
</body>
</html>
Ok after you put that in your text editor save it as whatever you want but make sure you save it as a .html file. For example, mypage.html. This tells your computer that it’s a webpage and will display it as so. After you save it open the folder wherever you saved it and double click it, it should open up as a webpage and you’ll see that at the top it says “My first webpage” and then in the page area it will say “This is my first webpage”. So there you have it, you made your first basic page. There are a ton of tags that you can incorporate into web pages to make them more dynamic. Check out the links I give you to learn more about it. Also check back on my hubs and ill have more on web design. If you have any questions just leave a comment and ill comment back.
Also if you don't want to spend 400 dollars on a copy of DreamWeaver I can get it to you for half the price, just e-mail me at YoJDawg@gmail.com
- YoJDawg.com
My first real website i made for my Web Design class, hasn't been updated for a while but i learned how to do this in one semester - JavaScript Source
Good site for free javascripts - How to Create a web Page
More detailed info on how making a webpage and more tags to learn about. - Googles list of webpage stuff
List of stuff that comes up when you type "HOw ot make Webpages" into google. - WebMaster Forum
A good forum for webmaster to talk about designs and helpful stuff - XHTML definitions
Just some definitions on XHTML
Related
Comments
Cheers for the great info!
I'll add your hub link to a relevant one of mine.
Helpful information for the beginner
Wow! Its a great info! This is very helpful for the beginners. But for that basic html language is essential to create web page. I think the enough information is given in the hub regarding web page creation. Thanks a lot and hope to be updated with any new info in this regard. Thank you.
Great hub, thumbs up from me!
Even if you use a WYSIWYG such as Dreamweaver I think it's important to know the basics of HTML.
- Author
I agree, knowing HTML helps you alot with programs such as dreamweaver because if something goes wrong, you may have to look at the code and figure it out, and if you don't know what certain things mean or the basics of how it should work then you can't fix it. Also, knowing HTML helps you know how structurally how it works.
5