-
-
If you want to make your own website but do not want to spend money on an expensive program, have no clue what HTML and CSS means and don't know the basics of web design, then this page is perfect for you. It will guide you step by step on the basic elements of a web page using only a text editor, a web browser and your computer.
-
Making a Website Tips
- A web page can be created using only a text editor.
- Cascading style sheets are the best way to change font style and color.
- Sans-serif fonts are the easiest to read on monitors.
- You can use the image tag to change the size of your images.
- Once your website is created, you will need to upload it to your web host's server.
-
Introduction
- Are you feeling like everyone has their own website except you, and that you have no idea where to start? Well, don't despair. This page will take you through the basics of how to create a website. This page was written to conform as much as possible with HTML 4 Specifications created by the World Wide Web Consortium (W3C).
- Since the purpose of this page is to teach you how to make your own website, even if you're not particularly net-savvy, it is going to guide you through the basics of HTML and CSS programing. By the time you're finished with this page, you will master all of the fundamental skills necessary to build your own website from scratch.
-
Let's Get Started
If you want to make your own website but do not want to spend money on an expensive program, or you have no clue what HTML and CSS mean, and you don't know the basics of web design, then this page is perfect for you. It will guide you step by step on the basic elements of a web page using only a text editor, a web browser and your computer.First you will need a domain, which you can find at a site like GoDaddy. Then using a a host provider such as Pow Web, they will direct you to an area where you can begin to formulate your web page.
-
Creating Your Home Page
- It's time to start creating your home page. For the purposes of this exercise, we will be creating a very bare bones webpage. The HTML for a very basic web page looks like this:
- <html>
- <head>
- <title>Page Title</title>
- </head>
- <body>
- </body>
- </html>
- The letters between the <> are called tags. Tags come in pairs that begin with the basic code and end with the basic code preceded by a backslash (/). So what do all these mean?
- <html> tells the browser that the page is written in html. Always start and end your page with this tag. The </html> indicates the end of the page.
- <head> indicates where the header begins and </head> signals where it ends. Information in this section will not be visible on the page.
- <title> is the title of the document that is located at the top of the browser. Again, the </title> is placed at the end of the page. Many beginners forget this tag and the page ends up being titled "untitled." The title of this page is "How to Make Your Own Website - Mahalo".
- <body> indicates where the body begins and </body> where it ends. This is where the majority of your information will be put.
- That's it. That's all you need to have an html page. Of course, what you end up with is a blank page, but the rest is coming. Your home page is the only page that has a predetermined title. For future pages, you can choose your own names for them.
Formatting Text
- Text is the most important aspect of a web page. Formatting text is relatively simple.
- Paragraphs: To create a paragraph, surround the words with p code brackets.
- Bold: You can make text bold by surrounding it with <b></b>. A similar tag is <strong>. Strong is used to indicate that text should have a stronger emphasis, which most browsers display as bold.W3C HTML 4.01 Specification: Text
- Italics: You can add italics by surrounding text with <i></i>. A similar tag is the <em>-- </em> --> or emphasis tag. Emphasis is generally displayed as italics.W3C HTML 4.01 Specification: Text
- Breaks: The <p> tag will automatically create breaks in between paragraphs, to create line breaks elsewhere, you can use the <br> tag. This tag is different because it stands alone and does not require a closing tag such as </br>
- You may see other tutorials talk about fancy tags such as tt, strike or small. These tags have been deprecated in favor of style sheets, which is covered in the next section.
Headings
- Header tags are a great way of breaking up text on a page. They come in six predefined sizes with <h1> being the largest and <h6> being the smallest. An extra blank line is automatically added before and after a heading.W3 Schools: Basic HTML Tags Again, you need both an opening (<h1>) and a closing (</h1>) tag.
Character Entities
- Computers come with all sorts of neat characters that are not easily understood by web browsers. They require character entity references. For example, if you want to display the & sign you need to type in & or it may not show up correctly. Some of the more common characters you will need to know include:
- For more character entities, check out:
- Alan Wood's Web Site: Index of HTML 4.01 Character Entity References
- W3 School: HTML 7-BIT ASCII Reference
- W3C: Character entity references in HTML 4
- Web Design Group: Iso 8859-1 Character Set Overview
Adding a Cascading Style Sheet
- Changing the alignment, color, style and other features in your webpage is done though cascading style sheets. These can be embedded or linked. For the purposes of this page, we are going to create an embedded style sheet.
- Start by going up to the top of your html document.
- After the </title> tag but before the </head> tag add in the following information:
- <style type="text/css">
- </style>
- Every style change made on the web page will be inserted between those two tags.W3C: Dave Raggett's Introduction to CSS Here is how you add style:
- On a new line, in between the two style tags, type in the tag you want to change. For the purposes of this exercise we will be working with the h1 tag.
- Then type a space followed by {
- Type in the style code followed by }
- So, let's say you wanted to change header 1 to make it centered. This is what you would type h1 {text-align: center} between the style tags. The entire code should look like this:
- <style type="text/css">
- h1 {text-align: center}
- </style>
Making Temporary Style Changes
- Now that you understand the basics of style sheets, lets take it one step further. Let's pretend you want to have one paragraph on your web page centered, but the rest of your paragraphs aligned left. This is done by adding classes. You can choose your own names for classes.
- To add a class to a style sheet:
- Add a period (.) after the tag.
- Type in a name.
- For example, you could type p.middle {text-align: center}
- You also need to make a minor adjustment to the body of your document when you want to use that class. Instead of simply typing <p> you type <p class="middle">.
Popular Style Changes
- Here are some of the more common changes you may want to make. Color and font changes are discussed in the next sections. Examples are marked in olive. To review the basic format is Tag.class {attribute: value}
- <td align="left" valign="top">
- Align text center:
- Align text right:
- Align text left:
- Bold:
- Normal font:
- Italic:
- Underline:
- Strike through:
- </td>
- <td align="left" valign="top" width="210px">
- text-align: center
- text-align: right
- text-align: left
- font-weight: bold
- font-weight: normal
- font-style: italic
- text-decoration: underline
- text-decoration: line-through
- </td>
- <td align="left" valign="top" width="260px">
- h1 {text-align: center}
- p.right {text-align: right}
- p {text-align: left}
- h2 {font-weight: bold}
- p {font-weight: normal}
- h3 {font-style: italic}
- h4 {text-decoration: underline}
- p.cross {text-decoration: line-through}
- </td>
- </tr>
- </table>
More Information about Cascading Style Sheets
- For more information about Cascading Style Sheets availability, check out any of the following sites:
- W3 Schools: CSS Tutorial
- W3C: Dave Raggett's Introduction to CSS
- W3C: Cascading Style Sheets
- Sitepoint: An Introduction to Cascading Style Sheets (CSS)
- EchoEcho.com: CSS Tutorial
Changing Fonts
- Changing fonts and font size is not more difficult than other style changes, but it can be trickier. It is trickier because the changes will affect the readability of your website. Using a fancy font may be pretty, but can also make your site unreadable to visitors. The same goes for making fonts smaller and fixing font sizes.useit.com: Let Users Control Font Size
- When changing the font size, it is best you set it in terms of percent rather than points, which creates a fixed font size.W3C: Dave Raggett's Introduction to CSS Percentage allows visitors to increase or decrease the fonts on your site if necessary. Here are a couple of examples on how you can do this:
- Double font size:
- Reduce font size in half:
- Normal font size:
- font-size: 200%
- font-size: 50%
- font-size: 100%
- h1 {font-size: 200%}
- p.small {font-size: 50%}
- p {font-size: 100%}
- You can also change the fonts used on your website. You will find that most sites (like Mahalo) use sans-serif fonts, which have no lines at the end of the characters, because sans-serif fonts are easier to read on monitors. Interestingly, the opposite is true when it comes to printed material. However, fonts will only work if your viewer has the fonts installed on their computer.BCE 61 Resources: Font for Web Pages Luckily, CSS allows you to list a variety of fonts for a given tag or a generic font family.W3 Schools: CSS font-family Property That way, if the user does not have your first choice of font, it will use a similar font.
- Here are the five generic fonts and the most commonly used examples of these fonts:
- Serif: Times New Roman, Book Antiqua, Garamond, Palatino Linotype and Georgia.Code Style: Serif Font Sampler and Survey Results
- Sans-serif: Arial, Century Gothic, Tahoma, Helvetica and Verdana.Code Style: Sans Serif Font Sampler and Survey Results
- Monospace: Courier, Lucida Console and Monaco.Code Style: Monospace Font Sampler and Survey Results
- Cursive: Comic Sans MS, Monotype Corsiva and Apple Chancery.Code Style: Cursive Font Sampler and Survey Results
- Fantasy: Impact, Haettenschweiler, Marker Felt, Copperplate and Papyrus.Code Style: Fantasy Font Sampler and Survey Results
- To change fonts on your site you use the "font-family" and then list the fonts in order of preference. Each font is separated by a comma and fonts that have more than one word must be placed in quotes.W3 Schools: CSS font-family Property A couple of examples on how you would do this:
- p {font-family: arial, "lucida console", sans-serif}
- h1 {font-size: "times new roman", georgia, serif}
More Information on Fonts
- For more information about fonts and font availability, check out any of the following sites:
- Hobo: What Is The Best Font Size To Use In Website Design?
- Alledia: Why Should You Choose a Website Font Carefully? (May 24, 2007)
- Webspace Works: Fonts for Web Design: Further Comparison of Cross-platform Dependability
- Web Design Tips & Tricks: Common Fonts to All Versions of Windows & Mac Equivalents
- Microsoft: Recommended Fonts
Changing Color
- Changing color can be a little trickier because it usually involves RGB hexadecimal codes. RGB hexadecimals codes are six-character codes that represent how much red, green and blue the color has (in that order).The University of Texas at Austin: Generating Colors in HTML The first two characters indicate how much red on a scale from 00 (lowest) to FF (highest). The second indicate how much green and the third how much blue. So, the hexadecimal code for red is #FF0000.
- Sixteen colors have also been assigned names in HTML.W3C: Basic HTML Data Types: Colors These colors along with their RGB hexadecimal codes are:
- White #FFFFFF
- Black #000000
- Silver #C0C0C0
- Gray #808080
- Maroon #800000
- Red #FF0000
- Purple #800080
- Fuchsia #FF00FF
- Green #008000
- Lime #00FF00
- Olive #808000
- Yellow #FFFF00
- Navy #000080
- Blue #0000FF
- Teal #008080
- Aqua #00FFFF
- Note: White was not displayed in its color because it would not have appeared against the background.
- Again, color is changed using a style sheet. Some examples are listed below. The attribute and value includes everything that is not bold.
- Make background black: background-color: black
- Make background green: background-color: #008000
- Make the text red: color: #FF0000
- Make the text navy: color: Navy
- To change the background of an entire page, you simply insert the attribute and value into the style sheet with body as the tag. If you want to change text inside of another element (such as paragraph) you can use span as the tag. Here is an example of how these can be used.
- For other colors, check out one of the following links to find lists of hexadecimal color codes:
- The University of Texas at Austin: Generating Colors in HTML
- Learning Web Design: Color Names
- W3C: Basic HTML Data Types: Colors
- Cookwood Press: The Colors from the Inside Back Cover
- Create a Website with HTML Code: Hexidecimal Color Codes
More Information on Color
- For more information about color, check out any of the following sites:
- Web Design Library: Importance of Colors in Web Site Design
- Web Design Portfolio & Guide: Color: Choosing Website Colors
- Pallasart Web Design: How to Make Effective Use of Color in Websites
- AccessIT: How Do My Choice and Use of Color Affect the Accessibility of My Website?
- Mark Boulton: Five Simple Steps to Designing with Colour
Adding Images
- Adding images is done by using the <img> tag.W3C: Getting started with HTML Then, you tell the browser what image you want to illustrate by typing src="imagename". For example:
- <img src="image.jpg">
- Because the link is on your server, you don't have to include your website's address when linking. Simply include everything after your website address. For example, if you had saved a file named "image.jpg" in the "images" folder on Mahalo's server. You could link to it by typing:
- <img src="images/image2.gif">
- While it is possible to link to images located on another site, this is considered "leeching" and can lead to problems later on.JoeSchmidt.com: Leeching Images and the Leechers Who Leech Them(June 29, 2005)
- You will also want to add a bit more of information into the html code:
- The alt attribute allows you to give a short short description of the image.
- <img src="image.jpg" alt="This is an image">
- The height and width attributes help set the text around the image and allow you to resize it if desired.
- <img src="image.jpg" height="125px" width="60px">
- <img src="image.jpg" height="75%" width="75%">
- The alt attribute allows you to give a short short description of the image.
More Information on Using Images
- For more information about color, check out any of the following sites:
- Website Design Tutorial: Optimizing Images for the Web
- 1-Hit: Loading Time Checker
- Noupe: 63 Impressive Website Background-Images: Trends, Resources and Tutorials (April 14, 2008)
Sources for Free Images
- You can find many sources for free images on the web. Make sure you read any guidelines the site has before using the image. Usually, the sites expect you to link back to them or give them credit.
- Absolute Background Textures Archive
- The Best Collection of Clip Art, Graphics and Web Images
- Cool Text Logo and Graphics Generator
- Blackat's Free Web Graphics
- Brownielocks Free Watercolor Backgrounds
- Dan's Clipart Library
- Eftelibra Graphics
- Ender Design
- Marvelicious Graphics
Creating Links
- There are two types of links you need to know how to create: internal and external. Internal links are links parts of your page. External links are links to pages on other sites or pages on your site.
- An external link has three parts:
- Opening tag (which includes a web address)
- Link text (the words you want the browser to show)
- Closing tag
- It looks like this <a href="http://www.mahalo.com">Mahalo's Home Page</a> but would show up looking like this: Mahalo's Home Page.
- If you are linking to a page in your own site (which you'll want to do as you expand your website), you are not required to (but can) use the entire web address. For example, if I wanted to link to a page on this site named webpage.html all I would need to type is:
- <a href="webpage.html">Web Page</a>.
- If the file is located in a parent folder or directory, you need to add "../" in front of it.W3C: Getting started with HTML For example:
- <a href="../webpage.html">Web Page</a>.
- If the file is located in a subdirectory, you need to add "/" in front of it.W3C: Getting started with HTML For example:
- <a href="/webpage.html">Web Page</a>.
- If you want to display an image instead of text for a link (for example, the Mahalo logo in the upper left is a link to Mahalo's home page, you replace the link text with an image tag. For example:
- <a href="http://www.mahalo.com"><img src="mahalo_logo.gif" alt="Mahalo's Home Page"></a>.
Changing Link Style
- Changing the color or style of links is done the same way text (such as paragraphs) is changed. The only difference is the tags.
- a:link is used for unvisited links.
- a:visited is used for visited links.
- a:active is used for active links. A link is active once you click on it.EchoEcho.com: CSS Tutorial: CSS Links
- a:hover is used for hovered links. A link is "hovered" when the mouse is moved over it. This is not supported by Netscape browsers earlier than version 6.EchoEcho.com: CSS Tutorial: CSS Links
Creating Lists
- There are three types of lists you can create in HTML:
- Ordered (numbered) <ol></ol>
- Each item in the list is surrounded by <li></li> tags.
- Unordered (bulleted) <ul></ul>
- Each item in the list is surrounded by <li></li> tags.
- Definition <dl></dl>
- Each term is surrounded by <dt></dt> tags.
- Each definition is surrounded by <dd></dd> tags.
Uploading the Files to the Web
- Now that you have the very basics of your website, you need to upload them to your web host's server. This is done using FTP (File Transfer Protocol). This differs slightly depending on which host you have chosen. Luckily, it is also one of the most frequently asked questions by new users. Here are links to the more popular web hosts on how to upload to their sites:
- BlueHost: How do I Upload my Website?
- GoDaddy.com: Uploading Files to Your Web Site
- HostMonster: How Do I Upload a Webpage?
- IPOWERWEB: Configuring: Connecting to your site using FTP
- Network Solutions: How To Upload Files Using FTP
- SiteGround: How to Use FTP to Upload Your Website?
- Yahoo! Web Hosting: FTP
Conclusion
- Check out Mahalo's How To pages such as How to SEO Your Website, How to Increase Website Traffic and How to Set Up a Blog for Beginners. You should also check out Mahalo's pages on Web Design, HTML, CSS and Search Engine Optimization for great links to other sites. You may also want to check out some of these links:
- Tutorials
- W3 Schools Online Web Tutorial
- Internet Tutorial: Understanding HTML
- HTML Code Tutorial
- Website Tips
- English Atheist: How to Make An Annoying Webpage
- useit.com: Top 10 Mistakes in Web Design
- Search Engine Guide Blog: Avoiding Common Web Site Mistakes
- Web Design Library: Ten Fatal Mistakes That Make Web Sites Stink
- trace.wisc.edu: Designing More Usable Web Sites
- Creating Website Articles
- 2 Create a Website: Create a Free Website? Think Twice About It!
- A List Apart: Articles
- 456 Berea Street: Turning a List into a Navigation Bar
- Pick Brains: How to Pick the Right Website Topic
About this page
-
Page Views391
This page currently has no vertical manager.
Featured Pages
