Make Your Own Website

Document Sample
Make Your Own Website Powered By Docstoc
					ntroduction

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.

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.
Featured Video

Begin by opening a text editor such as notepad. Create an HTML file by
typing a few letters in the form and saving it, not as a .txt file, but
as an .html file. Drag the newly created file to your web browser, ie.
Firefox or Internet Explorer. After editing in your .html file, refresh
your browser and the new editing will appear in the Internet browser.
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.1
    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.1
    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.2 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 &#38; 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 web
page 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.3Here 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>.

Popular Style Changes
    Here are some of the more common changes you may want to make. Color
and fontchanges 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.4

    When changing the font size, it is best   you set it in terms of
percent rather than points, which creates a   fixed font size.3 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.5 Luckily, CSS allows you to list a variety
of fonts for a given tag or a generic font family.6 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.7
        Sans-serif: Arial, Century Gothic, Tahoma, Helvetica and
Verdana.8
        Monospace: Courier, Lucida Console and Monaco.9
        Cursive: Comic Sans MS, Monotype Corsiva and Apple Chancery.10
        Fantasy: Impact, Haettenschweiler, Marker Felt, Copperplate and
Papyrus.11

    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.6 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).12 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.13 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.14 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.15

    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&#037;” width=”75&#037;”>

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.14 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.14 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.16
        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.16

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

Top
Leave Reply

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:5
posted:6/3/2012
language:English
pages:11