hotjam

Useful Basic Scripts

Beginner's Stuff.

Following are basic yet useful scripts for beginners and a refresher for advanced wapmasters as well. For complete script references and tutorials, i recommend that you consult w3schools.com. Enjoy!

HTML/xHTML Tags and Scripts

  1. Creating a Web Page
  2. <html>
    <head>
    <title>Title of Page Here</title>
    </head>

    <body>
    <p>this is a paragraph and you can input some texts and images here.</p>

    </body>
    </html>


    *Note the structure, how each tag is nested, and the proper syntax. A normal html web page starts with the tag <html> and ends with </html> to declare that there's nothing more follows. From the top, the <head> follows after the <html>, then the <title> which will be closed immediately with </title> after putting the desired page title. After this, the <body> comes next where you can put texts and images, or even audio files and inputs, then close it thereafter with </body> when nothing follows.


  3. Adding A Logo, Head and Footer


  4. There are various ways, depending what you like and how it appears in adding your logo, head and footer of your html document or web page. We'll tackle some of these below.

    <html>
    <head>
    <title>your page title here</title>
    </head>

    <body>

    <div id="banner">
    <p align="center">
    <img src="your logo url here.gif" alt="logo" />
    </p>
    </div>

    <h3>Head Title Here</h3>

    <p>texts texts and more texts here</p>

    <div id="footer">
    <p align="center">
    <a href="target destination url here">link text or image here</a>
    </p>
    </div>

    </body>
    </html>



    *note : Here in XTGem, you can immediately insert the image url of your logo (e.g. <img src="logo url" alt="logo" /> and an option maybe to center it by adding <p align="center"> before your image url, and closing it with </p>. Likewise in the footer, you don't need to add the <div> tag if you prefer not to.


  5. Horizontal Rule and Break Tags

  6. <br /> This is a break tag and it has no twin closed tag. Using the <br /> once will prompt you to go one line down.

    The horizontal rule <hr /> has no closing tag likewise. You can set the color, width, height, and image to it, like this: <hr ="image url here" width="200" height="3" />.


  7. Link Tags

  8. This is a very useful tool tag to navigate your web pages and link-ups to other web pages as well - all multimedia forms.


    <a href="target url destination here">link text here</a>

    *The "target url destination" is the destination when clicking "link text" which is the one visible on your page.

    You can also put an image link in place of text by typing the url, e.g., <img src="image url" />.


  9. Styling with (x)HTML
  10. You can style portions of your web page whatever you like to be displayed. Although this is more tedious to do than CSS, it is also fun and interesting especially when you're lazy putting your CSS within your head tag. We'll tackle some of the more familiar ones below.

    • Head Style
    • The <head> tag can be styled, like the other html tags, by adding 'style' to the tag, e.g., <h1-6 style>, then set the attributes and values that you want. See the example below.


      <h4 style="background:blue;color:white;text-align:center;">Head Styling</h4>.

      The head size selected here is the 4th <h4>. You can select whatever size you want from the biggest <h1> to the smallest <h6>. The rest is self-explanatory (background color, font-color, alignment, and the text you want to appear and styled which, in the example is 'Head Styling' - edit these which suits your needs).


    • Body Style
    • If you wish perhaps to have different web pages of different skin, you can use the < body style >. This will override your default skin (css template) without losing it.

      <body style="background:#ffffff;color:#000000;border:1px solid gray;align:center;">


    • Paragraph Style
    • The paragraph tag < p > can also be styled by adding 'style' into it then perform the usual assigning of attributes and values to it. The example below shows how it is done. So simple to follow because all presented here are of the same pattern. No sweat.


      <p style="background:#ffffff;color:#000000;text-align:left;border:0px;">blah blah blah</p>


    • Horizontal Rule Style
    • The horizontal rule < hr > is the horizontal straight line that you can see on your html document. You can add color, width, height (or thickness, in px), or image into it.


      <hr style="color:blue;width:200px;height:2px;" />

more...


Back Page