How a newbie can build a website in two days ( part III)

 

 

When I took office, only high energy physicists had ever heard of what is called the Worldwide Web…. Now even my cat has its own page.

Bill Clinton, announcement of Next Generation Internet initiative, 1996
42nd president of the United States (1946 – )

 line.gif

 

“Evolution of the C programmer:

  • 0 months to 1 month: complete beginner
  • 1 month to 1 year: incomplete beginner
  • 1 year to 2 years: acolyte
  • 2 years to 3 years: adept
  • 3 years to 8 years: expert
  • at 8 years: discovers
  • 8 years+: buggrit, back to beginner again !”

-Richard Heathfield

Even his cat has its own page, says Bill Clinton. Who doesn’t?? My neighbor has a website about her favorite pet: a Madagascar hissing cockroach! My  friend’s site is about his Tarantullas. So what’s new? Everyone is going gaga about putting a web page on anything under and above the sun.

Now, we are not going to do a geek’s language, even that simple C program, ok?

We’ve already checked our basic skills and tools (Part I); we’ve  talked about planning and designing (Part II); and now we are going to B U I L D!

You’ve read  it right! Nothing is wrong with your eyes, I guess, it’s my head acting weird again.  It’s coaxing me to write something about HTML.  Huh? my right ear raising its lobes while pinching my right cheek refusing to understand what my head is telling me.

Ok, I’ll do it but I’m not going to pretend I am an expert on this area, I am a newbie remember? Like every programmer, you should not stop learning.

Technological progress has merely provided us with more efficient means for going backwards.  ~Aldous Huxley

To be familiar with HTML is like knowing how to change your own oil or change a flat tire — it can save you a lot of time and money. It can give you a chance to tweak a pre made template for your website if you do not have enough time to make your own. It is fun, I assure you.

HTML stands for HyperText Markup Language. It is the “hidden” code that helps us communicate with others on the World Wide Web (WWW).

The tools you need : For MACs, that would be SimpleText and for Windows, Notepad.
Fortunately, HTML is written in plain text so you don’t need fancy software programs to create your HTML files.

In order not to bore you, I asked my friend to pose for you.

 html.jpg <<<Click for fuller view>>>

Tags are enclosed in angle brackets, <like this> or try to imagine how

My Angelina will show you >> tombraider.jpg

Tags come in two varieties: single tags and paired tags.

The difference is that a single tag works on its own, while a pair of tags must have an open and closing part. The closing part is just like the opening except that it is prefixed by a slash.

Single tags are used for separators or for inserting a single item. They do not have a matching closing tag.

EXAMPLES:

    <br> marks the end of a line. (stands for line break.)
    <hr> marks a horizontal rule. (A line across the page.)
    To  insert an image, pls follow instruction below
    Please click it for better view >>howpic.jpg

Some common paired tags are:

    <p> and </p> to start and close a paragraph.
    <b> and </b> for bold.
    <i> and </i> for italics.
    <em> and </em> for emphasis (usually interpreted as italics by the browser).
    <strong> and </strong> for strong text (usually interpreted as bold by the browser).
    <h1> and </h1> for the biggest heading.
    <ol> and </ol> for an ordered (numbered) list.
    <ul> and </ul> for an unordered (bulleted) list
    <font> and </font> for text font changes.
    <sup> and </sup> for superscript text.
    <sub> and </sub> for subscript text.

It is important to make sure that pair tags are always closed properly  (e.g., that the tag that comes last is closed first and vice versa). For instance, if you wanted to create a section of red, bold text, you should write the code like this:

<font color=”red”><b>A flower.</b></font>not: <font color=”red”><b>A flower.</font></b>line.gif

 

Now, how are you going to set up your page? It’s easy like eating popcorn.To start a page on Notepad for Windows, go to start/programs/accessories/notepad. A window will pop up like this:notepadex.gif

Copy and paste the code below into Notepad like this:<html>
<head>

<title>Your page title goes here</title>

</head>

<body>
—Everything that appears on your page will be entered here, text, images etc.—</body>

</html>
 notepad1.gif
Then add your own stuff in between the <body> and </body> tags. 

For  color codes try http://www.webmonkey.com/reference/color_codes/

Example code of what to add to your <body>

<BODY bgcolor=”#33ccff”><br><br><center>I am ugly. Check out my pic<img src=”123@love.com” mce_src=”123@love.com”></center></body>

</html>

When you’re finished, click on the “x” in the upper right hand corner of Notepad. A screen will come up asking you if you want to save the changes, choose yes.

  notepad3a.gif

After you choose yes, that you want to save the changes, this screen comes up. Name your file “index.html” because it will be the first page of your Web site, and then click “save”:

 notepad4.gif

After creating your page/site test it with different browsers:  Internet Explorer (IE) 7, 6, 5.5 and 5.0, Firefox 2.0 and 1.5, Opera 9 and 8, Netscape and so on.  Then there are the different platforms: Windows, Macintosh (Mac), Linux, etc.

It is a good idea to test your site with multiple versions of multiple browsers particularly if you plan to do anything fancy on your site. When you are able to test your pages this way, you can at least reduce the number of problems your pages have with the different browsers.

I’ve learned about this lately after my friend BEA related her problems she encountered when viewing my other website.

As a newbie, I was perplexed about what she told me as I can view it without any problems on my end, even my other friends with different browsers …thus, I made my geeky searching…

net.gif

Now, if the words “will” and “action” to create your own site or page are nowhere to find because you were not able to divide your gift of 24 hours  into a well spent and balanced day, then I would suggest,  to look out for this man, he’ll help you. I hope.

 programmer.jpg

How a newbie can build a site in two days (Part II)

Let’s break your own myth…you can build your own website like me without going to a computer school, listening to your professor’s blah lulling you to a deep sleep.

I broke my own myth, I’m a newbie like you and I still consider myself until now because I still want to learn new things. As I’ve said…it’s only a matter of will and action.

You have to will it and not be lazy into putting in real time what you want. It is like falling in love. Love is not only emotion, it is an act of will. Do you believe it?

You need passion when you want to build something, be it a career, a business, a relationship or like what we are talking about: a website.

Passion, passion, passion until you dream of html/css codes in your sleep and waking up the next day after a few hours of sleep thinking what you want to create in your website.

Scary? come on! Not at all, it’s fun!…ok let’s begin. I’m more motivated now because it’s Valentines day 🙂 Hearts day should remind you of that important person in your life now or before. Do you remember how you were starting to know him/her? How you go nuts figuring out your partner’s eccentricities? Yet, you continue on investing time and patience on this person. Why? It’s all because you will it!

Idem for website building…ok?

Now let’s roll up our sleeves…take a break from being busy with your deadlines and spend a time learning something new, trust me on this, it’s worth spending a little time now to save a lot in a few days.

We’ve talked about having basic computer skills, having or borrowing a personal pc, access to the internet.

Today, let’s plan!comp.gif

Put it on paper, mobile phone or rocks (or at least on screen). Make it short and sweet, yet also as specific as you can.

Sense of purpose

Surprisingly, people start building sites without creating a clear idea of what they want their site to achieve. The first step is to always ask these basic questions:

What do you want the site to do for youYour answer should be based on your own internal goals.  Do you want to tickle your Tourette Syndrome  ? (ADD in short or attention deficit disorder)  Do you want to promote your business or sell your products? Do you want to share information about your hobbies, collections, your personal life or your neighbor’s life? Do you want to criticize your government, Microsoft or attack a group? Set these goals early and specifically.

Sense of place

Plan your background, the colors for your site, your graphics. Now remember these basic pointers basing on my own experience:

1) keep your graphics files small. Cyberspace has the unique trait of being the first medium where you can actually bore your readers by being too exciting. There should be a balance between the graphic “wow” and the real-time “now.”

The more graphically intense a site, the longer it can take to download. The longer it takes, the higher the probability that the visitor will leave before it’s done.

This is true …I’m so impatient waiting for a page to download even for 10 seconds…I just leave and jump off to another site.

2) Make your design for easy reading. Don’t trade readability for style. Every time I see a background too strong for my eyes or I couldn’t read the context because of the background graphics, smoke goes out from my nose or ears! Treat your site like a showroom for cars, an art gallery or a hotel…where your visitor will be at ease moving from one room to another.

 Start planning now.

PS

 I mentioned on my first post  about free hosting, here’s my addendum:
If you’re looking to create a website that will last, you should register your own domain name (yoursite.com), rather than using a  free host.
Why?  Here are the problems with free websites….

  • You won’t have nearly as much freedom when it comes to building and designing your website
  •  The amount of space for your pages is limited and you may not be able to add functionality (order forms, contact forms, interactivity such as chat rooms, gaming, etc.)
  • You’ll also have to wonder if it will be around the next day should the company decide to fold or start charging a fee
  • You may also have to put up with annoying pop-ups and banners on your pages. Also, the support is usually very poor since they are providing the service for free
  • And most…you can’t put up your own ads…that is if you have the intention to earn with Adsense,  Adwords etc
  • To  be continued….

    Quotes

    Advances in computer technology and the Internet have changed the way America works, learns, and communicates.  The Internet has become an integral part of America’s economic, political, and social life.  ~Bill Clinton

    One of the Internet’s strengths is its ability to help consumers find the right needle in a digital haystack of data.  ~Jared Sandberg

WordPress › Error

There has been a critical error on this website.

Learn more about troubleshooting WordPress.