How to Build a Website Using HTML & CSS
HTML stands for HyperText Mark Up Language. Breaking this jargon down: hypertext refers to linking from one page to another. When you click on a link on a website it loads another page for you to view. Mark up refers to the tags you write on your source page. The tags "mark" the page to do certain things, such as link to another page. Language refers to the fact that HTML has a large vocabulary of terms and a particular syntax. Cascading Style Sheets (CSS) is a special feature of HTML that makes using the language easier. This tutorial shows you the rudiments of HTML and CSS to help you make a basic website.
Instructions
Difficulty:
Step 1
Open a text editor such as Notepad or Wordpad. Any text editor will do, although some are made for editing HTML and CSS, such as TextMate or DreamWeaver.
Step 2
Type your first tag, or mark up: "<html>". This indicates to the code reader that the page that it is about to read is written in HTML.
Step 3
Type your next tag to begin the content of your website: "<body>" Inside this tag you should write all of your content.
Step 4
Add any CSS styles to the body tag by typing in CSS mark up. For example, type: "<body styles="">" Inside the double-quotations you can give your body tag different styles, such as a background color or a border. Check the Resources section for large lists of different styles you can use with the "Styles=" tag.
Step 5
Type in your content using the appropriate tags. For example, initiate a paragraph using the <p> tag. Hyperlink a set of text with the <a href> tag. Insert an image with the <img> tag. Note that these tags, except for the image tag, have to be ended. For example, if you want a paragraph that says, "Hello, World!" type: "<p> Hello, World! </p>" Note the backslash in the closing tag. The backslash ends the tag so that you can begin another one.
Step 6
Add styles to any of the tags you've written. For example, to choose a particular font size for a paragraph, type: "<p styles="font-size: 15pt">" If you're planning on having many pages in your website with many repeating elements, such as paragraphs that all have similar characteristics, create a new document and save it as ".css." This is your cascading style sheet and it effects all of your tags listed in it that are also used in your webpages. It has a particular syntax that uses open and closed brackets. For example, type p {font-size: 15pt;} to make all of your <p> tags have 15-point fonts.
Step 7
Link your webpage to your stylesheet so that the styles in the stylesheet affect your webpage. Link the webpage typing into the top of the page after the <html> tag the following mark up: <link rel="stylesheet" type="text/css" href="thenameofyourstyle.css">. Save your stylesheet with an easy-to-type name and save it inside the same folder as your webpages when you upload your pages to the Internet. The "href" mark up tells the coder to look for the ".css" file. If it can't find it, it won't include the styles.
References
- "the essential guide to css and html web design"; craig grannell ;2007
Resources
Article Written By Matt Scheer
Matt Scheer began writing professionally in 2005. His work has appeared in "The Daily Texan" and "The New York Tribune." Scheer holds a B.A. in English and a B.A. in history, both from the University of Texas. He is also a certified Yoga teacher and Web designer.