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

14 Responses to “How a newbie can build a website in two days ( part III)”

  1.  

    hehehe ross, had you been my teacher in my most boring class in college, i would have had a brighter future hehehehe. i enjoyed how you inserted bart, angelina and that man in your lesson 😆

    Reply

     
  2.  

    […] post by quotesincan.com and software by Elliott Back   « WHAT IS A HOME INSPECTION? | […]

     
  3.  

    ross, talagang ki-nareer mo na ha? great job! i remember when i first picked up an html book as a hobby while living in los angeles.. i really enjoyed it too! just like when i first learned to code html, i spent many sleepless nights, i spend so many sleepless nights blogging now.. what is wrong me me?!!!!!!!!!!!!! i have a very addictive personality – and once i learn something, i try to find out more and more and more!!!!!!!! wahhhhhhhhhhhhh!!

    Reply

     
  4.  

    This post would have been a lot better with more pics of Angelina 😛

    ~Becky

    Reply

     
  5.  

    Bea,

    I understand how to be inside a boring class that’s why I hated going to school :)

    Reply

     
  6.  

    Chuva,

    I’m loosing sleepless nights too doing a lot of trial and errors with html and CSS and figuring out “what is a monetized blog?” 😯

    Reply

     
  7.  

    Becky,

    so you like Angelina too? Don’t worry I will put more pics and quotations fr Angelina on my next post! 😉

    Reply

     
  8.  

    Padating na ang mga enterventionist!!!!!! *tara magtago tayo!!!!!! takbo bilissssss* :mrgreen:

    Reply

     
  9.  

    pahabol…na-typo ka yata…sa body tag, one word dapat yung ‘bgcolor’ at di uubra ang ‘bg color’

    Reply

     
  10.  

    DIWATz,
    how are you? saan tayo magtatago?? **lingon left and right 8)

    Reply

     
  11.  

    C5,

    Oh wow…which image?? **hanap

    💡 well you got it right there! galing!!!

    did you do it by yourself?
    you can put that service on your blog’s site …tataas rating mo!

    Yup it was a typo, thank you for reminding me…

    Reply

     
  12.  

    sa ilalim ng lata!!!!!!

    Reply

     
  13.  

    HA HA HA

    When I arrived in the US, first thing I did was go to Computer Learning School. What else? To learn programming. I did Fortran, Cobol, Basic and all those useless language. C+ was not in the vocabulary yet. I did know basic html then and all that. 100 centuries later, I still don’t undertand this whole html thing.

    Hey?! do you have the number of that guy who’d code for money?! (I’m desperate as you can see!!!)

    Reply

     
  14.  

    REyna,

    I’m sorry, I forgot to ask for his number…maybe he’s just bumming around Philadelphia…look for him when you are driving your lotus… :mrgreen:

    Reply

     

Leave a Reply