How to Get Started on Making a Web Page
Anyone can learn to create websites. There's no need to go to a training course, as you can teach yourself basic Web design and development skills for free using Internet resources. There are many different technologies used on the Web today, and by starting with simple structures you will be able to work toward more sophisticated elements in only a short time. For first Web pages, it's best to stick to HTML and CSS.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Create a basic HTML page using tags. A template for a typical Web page might look like this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<div>
<h1>My First Web Page</h1>
<p>
My first paragraph
</p>
</div>
</body>
</html>Enter this code into a file using a text editor program such as Notepad and save it somewhere on your computer as "mypage.html". Open the file in your Web browser (e.g. Internet Explorer, Firefox, Chrome or Safari). You should see a heading and a paragraph of text.
-
2
Experiment with the HTML code by making changes to it and refreshing it in your browser to see the effect that they have. HTML content is "marked up" with tags such as <head>, <body> and <div>. There are many available tags that Web browsers are able to render. All of the content on your site, from text to images, video and all other media, must appear between tags in the HTML. If your HTML is not "well-formed", i.e. not correctly structured, then it may not appear properly to visitors to your site.
-
3
Add style rules to your Web page using CSS. Cascading Style Sheets are the most commonly used way of tailoring the visual appearance of websites. You can apply CSS rules in a number of ways, but the most efficient is to create a separate file. Open a new file in a text editor and save it as "somestyle.css", then enter the following text, saving when you are finished:
h1
{color:#FF0000;}Enter this code in your HTML file within the head section (before the closing </head> tag):
<link rel='stylesheet' type='text/css' href='somestyle.css'/>
Save the changes and reload the HTML file in your browser again. The heading text should now be red in color. You can use CSS to tailor all aspects of the visual appearance of your page including color, layout and background images.
-
4
Add different tags to your HTML. Use online resources to explore the different tags that are available. Look around at different websites and view the page source using your browser menus. Don't be intimidated by the amount of code that appears on many websites, as these will have been built incrementally over time, adding each element in turn. Include different types of media on your page, for example images, with the <img> tag:
<img src='images/picture.jpg' alt='picture' />
This example code would display an image that is in a directory called "images", sitting in the same directory as the HTML page.
-
5
Upload your files to a Web server. If you do not yet have an account with a Web host you can use a local server, which is software you can download to run on your computer that replicates the function of a Web server. Test your page in different browsers and notice how differently it appears in them. Add elements of different content to your page over time, and remember to test it each time you make a change.
-
1
Tips & Warnings
Keep the content and formatting for your site separate by using external style rules to dictate how your site should look. Use the available validators to check that your site is structured properly, as this makes it more likely to appear in the same way to different visitors.
Bear in mind that your Web pages may appear very differently to people using different, browsers, devices and operating systems as this is almost always the case.
Related Searches
References
Resources
- Photo Credit computer image by Angie Lingnau from Fotolia.com
