How to Build Web Pages and Sites
Building Web pages and sites is something that anyone can learn to do for themselves. There are many free resources available online to help when it comes to learning basic Web design. You can build your knowledge incrementally, starting with simple structures and moving on to more complex components. Start with basic HTML and use CSS to style your pages.
- Difficulty:
- Moderate
Instructions
-
-
1
Choose and purchase an account with a Web host if you want your pages to be viewable over the Internet. Shop around to find a deal that appeals to you, and look at reviews, if possible. Choose a domain name for your site, and a package to suit you. Start with a basic package, and sign up for a set term, for example one year. Note down the log-in details provided by your Web host for FTP access, and for the Control Panel, if there is one.
-
2
Create your website homepage as an HTML document. Save the file as index.html and put within it whatever you want to appear when someone types your domain name into a Web browser. Use the HTML markup language in your index document, marking each part of content between tags, for example:
<html>
<head>
<title>This is the title of my site</title>
</head>
<body>
<div>This is the text on my homepage</div>
</body>
</html>Make sure each element is properly formed, and that each bit of content is surrounded by an opening and closing tag. Learn about the different tags and structures you can use in a Web page, and use whatever elements best serve the purpose of your site.
Make an FTP connection using an FTP client program such as FileZilla, and upload your index file to the root directory for your domain. The root directory is normally called "public_html" or "httpdocs".
-
3
Separate the content of your website into different pages. Name each page appropriately, for example, a page containing contact details could be saved as contact.html and placed in the same folder as your index file. Link the pages to one another using hyperlinks, for example, using this code on your index page:
<a href="contact.html" title="contact me">contact me</a>
This allows people browsing the index page to go to the contact page. Make sure all of your pages link back to the homepage, and try to minimize the number of "clicks" that are necessary to get from each page on the site to any other.
-
4
Style your Web pages using Cascading Style Sheets. Specify your style rules and save them in a file, called mystyle.css for example, in the same directory as your index page. Link the CSS file to your page in the head section, like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />Within the CSS file, define the way that you want each element in the page to appear, for example:
div
{color:#FF0000;}This states that the content within <div> elements should be displayed with red text. Include the rules necessary to make your page look the way you want it to.
-
5
Include different media in your site. Websites containing images, video, audio, animation and interactive elements are far more attractive to visitors. Learn about scripting languages such as JavaScript to enhance the way that visitors interact with your site. You do not have to learn to program every element of a site from scratch, as there are many free resources such as jQuery and Google Code that even beginners can use to create sophisticated websites.
-
6
Update the content of your site as often as possible. Sites containing content that is updated regularly are more successful, and appear higher in search engine listings. Building links with other sites will also improve your site's performance. As the name suggests, the Web is a network of linked pages, and in most cases people will visit your website by following a link to it on another site.
-
1
Tips & Warnings
Keep content and formatting separate in your pages. Define style rules within the CSS sections and only use HTML to define the content of your pages, for example the text, data and images. This results in pages that are more accessible.
Building a site that works well for a wide variety of people is something that takes time and determination. Testing your pages in different browsers and learning new technologies both help to ensure your sites will be effective.
Related Searches
References
Resources
- Photo Credit aqua web image by Ruslana Stovner from Fotolia.com
