Login
Password

Forgot your password?

How to create a website

By Edited May 29, 2015 0 1

Making a website is easy, making a decent website can be difficult. To create a basic website, the only html needed is:

< html >
< body >
< /body >
< /html >

**For all HTML included in this article, when you are copying it, remove the spaces between < >**

Insert some text between , like Hello world, so you have:

< html >
< body >
Hello World
< /body >
< /html >

and save the file as hello.html. Now, browse to where you saved the file and open it in your favorite browser (I like Google Chrome or Firefox). You have now created your first website... but it sucks.

Adding a Page Title and Cascading Style Sheet

To jazz up the site, let's add a cascading style sheet and a page header. A cascading style sheet (CSS) is a file that basically tells your pages how to look. A page header is the title that you see in your browser, above the tool bar (go to www.torontowebsitedeveloper.com and you'll see my header is Peter Yaworski, Toronto Website Developer | Specializing in Drupal -- which it too long by the way).

To add some CSS and a page header, we need to add a new HTML tag. Here is what our basic structure will look like:

< html >
< head > -- NEW
< /head > -- NEW
< body >
Hello World
< /body >
< /html >

Now, let's add some work to it.

< html >
< head >
< title >
My First Web Page
< /title >
< link rel="stylesheet" type="text/css" href="mystyle.css" / >
< /head >
< body >
Hello World
< /body >
< /html >

First, the tag is very important for search engines and is a great place to put keywords. Because it is so high in your HTML, it is usually indexed by search engines and a good way to associate your site with a specific keyword.

Secondly, the text tells your browser you are adding some CSS and that it is an external file, accessed by calling mystyle.css. It is important to note that with this line, your CSS file has to be saved in the same directory as the webpage, in our case, hello.html.

Creating the CSS File

Now, create a new file and save the blank file as mystyle.css. You've just created your first CSS page... but it's blank. In mystyle.css, type the following:

p {color:red;}

Now save the file. Open hello.html and make the following change:

< html >
< head >
< title >
My First Web Page
< /title >
< link rel="stylesheet" type="text/css" href="mystyle.css" / >
< /head >
< body >
< p >Hello World< p >
< /body >
< /html >

This adds a < p > tag around your text turning it into a paragraph. According to your mystyle.css file, this text should now look red.Go ahead and reload your hello.html file in your favorite browser.

Great Work!

Does the text show in red? If so, great work! You've just created your first web page, called an external sytle sheet and changed the font color for < p> tags. If you created a second page, calling it second.html, included the same tag in the and in your body, used a < p >tag, your text would be red. That is the beauty of CSS stylesheets, they allow you to create a common look and feel.

If the site didn't work, did you remember to remove the spaces in the example html tags above?

If you want more tips on how to take this farther, I suggest you visit www.w3schools.com.

Advertisement

Comments

Jan 8, 2011 1:33pm
Adrn0919
Thank you for breaking this down to simple language. I am still confused but I am sure once I actually try this it will work out fine. Thank you for providing additional references as well.
Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology