Jump to content
UKF_HHA

[Tutorial] Web Programming - Lesson #1

Recommended Posts

Hey guys,

I decided to start a series of Web Programming lessons since I like coding and designing websites.

So let's get things started!

 

Web Programming

 

Table of content:

  • Page structure.
  • HTML introduction.
  • CSS introduction.

 

Page structure:

Whenever you go to a website, the first page that will appear, is the index page with the extension of .php or .html or .asp depending on the script running and the server's environment.

What about the page? What are the components of a page?

The structure of a web page is as follows:

  • The Doctype
  • The Document Tree
  • html
  • head
  • body

 

Doctype:

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

Document tree:
The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.

html:

It is the root element of the document tree and everything that follows is a descendant of that root element.

head:

The head element contains metadata—information that describes the document itself, or associates it with related resources, such as scripts and style sheets.

body:

Everything that you can see in the browser window (or viewport) is contained inside this element, including paragraphs, lists, links, images, tables, and more.

 

 

 

 

________________________________________

 

 

HTML Introduction:

A simple HTML template is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

 

P.S: To add a comment inside HTML (Comments are not read), you add the following:

<!-- Write here -->

 

Everything you write, data, objects and items are posted within the body.

<style></style>

is posted inside the before closing </head>

Each tag starts as follows <tag> and ends with </tag> and tag stands for tag name, such as

  • p (paragraph)
  • div (division)
  • h1, h2, h3, h4, h5, h6 (font-size decreases from left to right) (biggest font-size from left to right).
  • span
  • a (anchor)
  • And a lot more.

 

To make a .html page, do the following (basics):

  1. Open notepad.
  2. Put the HTML template same as above.
  3. Add "<p>Hello World!</p>" without the double quotes.
  4. Save it as mypage.html to your desktop or documents or any place (No need for index.html at the moment).
  5. Go to the directory (folder) where you saved this page.
  6. Open it.

Your page should show up "Hello World!"

 

 

 

 

 

CSS Introduction:

CSS stands for Cascade Style Sheet, which is the design you make for your website, which is the style.

There are three ways of implementing a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

 

External style sheet (Global):

 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

Internal style sheet:

<head>
 <style>
        body {
            background-color: red;
        }

        p {
            color: yellow;
            font-size: 50px;
        }
 </style>
</head>

 

The following is sort of self-explanatory:

  • The body's background color will change from white (default) to red.
  • The paragraph's font color will change from black to yellow, as well its size, from small to 50px.

 

 

Inline style sheet:

<body style="background-color: red">
<p style="color: yellow; font-size: 50px">
    Hello World!
</p>
</body>

 

This will do the same as the Internal Style Sheet.

We placed our style within the tag, each style will modify the tag's content, we could've make:

<body style="background-color: red;color: yellow;">
  
  <p style="font-size: 50px">Hello World!</p>
  <p>Help me, I don't like yellow color</p>
  
</body>

 

But what would happen? What about if we have another paragraph that we want its color to be different than yellow?

In this case, we made the whole body's font color yellow, we can adjust the following using div and classes or even modifying the Inline Style Sheet, but the best way is to modify the External Style Sheet if we are using it as reference or we can modify the Internal Style Sheet.

Result:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }

        p.paragraphYellow {
            font-size: 50px;
            color: yellow;
        }

        p.paragraphNormal {
            color: black;
        }


    </style>
</head>
<body>

<p class="paragraphYellow">Hello World!</p>
<p class="paragraphNormal">I don't need any help anymore!</p>

</body>
</html>

 

What we did above is that we specified classes that will only work for classes of type (tag) paragraph (p):

<p class="paragraphYellow">
</p> 
<p class="paragraphNormal">
</p> 

 

 

P.S: To do a break-line, you can do it using the tag <br/>

Example:

<p class="paragraphYellow">My name is UKF.
This is a test.</p>

 

Output:

My name is UKF. This is a test.

 

Now using a break-line tag <br/>

<p class="paragraphYellow">My name is UKF.<br/>This is a test.</p>

 

Output:

My name is UKF.
This is a test.

 

 

 

Now using divisions (div):

It is often used with JavaScript to collect DOM (Document Object Model) entities and to obtain a cleaner design.

We define the division's style inside the style section using hashtag (#), and to call that Style, we have to name the id of the division same as the style's name with the hashtag.

 

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }

        #paragraphYellow {
            font-size: 50px;
            color: yellow;
        }


    </style>
</head>
<body>

<div id="paragraphYellow">
    Hello World!
</div>

</body>
</html>

 

 

What about if we want some text to be different than the rest?

The following will result in having "Hello" in normal font size and black color, and "World!" with font size of 50 pixels and yellow color, this won't affect the paragraph or anything outside of it.

This method is used to avoid nesting classes and paragraphs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }

        span.paragraphYellow {
            font-size: 50px;
            color: yellow;
        }


    </style>
</head>
<body>

<p>Hello <span class="paragraphYellow">World!</span></p>

</body>
</html>

 

 

 

P.S: To add a comment inside Style (Comments are not read), you add the following:

/*
	Anything written here isn't counted.
*/

 

 

 

I hope you enjoyed this lesson ^.^

If you have any comment, feel free to post, and if there's anything I can improve, let me know!

 

References: w3schools.com and sitepoint.com for some definitions.

More series are coming whenever I have free time :) !

 

Best regards

UKF

Edited by UKF_HHA

Share this post


Link to post
Share on other sites

nice work!

it will help alot of people in the future

will your next lesson involve in like how to edit ur site and external links in ur site? like how to add forums etc...

i made a website few months ago and had to go through a long process, and because i was a noob and i didn't know what to do it took me time till i got used to it XD

u can check my website and tell me what u think of it, honorgaming.net :)

edit: i've had alot of bots spamming the forums and i didnt know how to get rid of them, so i deleted all the topics sadly :x

Edited by leoshiro

Share this post


Link to post
Share on other sites
2 minutes ago, leoshiro said:

nice work!

it will help alot of people in the future

will your next lesson involve in like how to edit ur site and external links in ur site? like how to add forums etc...

i made a website few months ago and had to go through a long process, and because i was a noob and i didn't know what to do it took me time till i got used to it XD

u can check my website and tell me what u think of it, honorgaming.net :)

edit: i've had alot of bots spamming the forums and i didnt know how to get rid of them, so i deleted all the topics sadly :x

 

Yes, later on, by editing your site, you mean editing files on the the server using FTP/cPanel, if it's the case, it's a yes.

Also I might add guides etc... But let's start with baby steps so people can learn :P

Share this post


Link to post
Share on other sites
Just now, UKF_HHA said:

 

Yes, later on, by editing your site, you mean editing files on the the server using FTP/cPanel, if it's the case, it's a yes.

Also I might add guides etc... But let's start with baby steps so people can learn :P

yes exactly in the cpanel.

yep thanks alot for the guide i really love it!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Our picks

    • This release includes:

      Fix updater bug which was causing a bunch of issues


      TRiBot will no longer require manual hook fixes every time the RS client updates - the updater has been fully patched for objects


      Hooked login fields


      Improved the login bot


      Ability to recognize the banned/locked messages again


      Ability to read the current input for username and password fields


      If the username or password is already entered correctly, it won't be erased


      If only part of the username or password is already entered correctly, it won't be erased. The login bot will fill in what's missing.


      If there are a few invalid characters after a valid substring of your username/password, only (approximately) those invalid characters will be erased. The login bot will then proceed to fill in the missing characters.





      Coming soon:

      Skull icon fix


      Improve screen rate and responsiveness of the RS client (both regular client and LG)


      Much more
        • Thanks
        • Like
      • 23 replies
    • This release includes:

      Fix shift clicking option selecting


      Fix high paint delay settings saving


      Update prayer IDs for the quick select menu


      Remove RS3 support


      Fix hooks



      RS3 Support Removed

      The RS3 client hasn't been updated since our Old-School version of TRiBot was released, as many of you may have noticed. Keeping all of the RS3 code in the client made the client as a whole harder to maintain, larger, slower, and messier. As hardly anyone still uses the RS3 client, and since the RS3 API was hardly functioning, we made the decision to completely remove it from TRiBot.

      For the average user, this means that the client will be smaller, cleaner, and faster. Future updates will also take less work meaning there will be more frequent updates.

      If you were one of the few users still using the RS3 client, we apologize for the inconvenience. No future support for RS3 is planned. There are many other botting clients which has support for RS3, so we recommend finding an alternative if you wish to continue botting on RS3.
        • Thanks
        • Like
      • 25 replies
    • Please welcome our new developers, @JoeDezzy1, @erickho123, @Encoded, and @wastedbro.

      These members will be responsible for working on, maintaining, and improving TRiBot.

      This means that bug fixes and improvements will now come at a much faster pace! We're committed to providing users with the best botting experience possible!
        • Thanks
        • Like
      • 30 replies
    • This release includes:

      More 3rd party libraries for script writers to use


      Apache Commons Codec


      Apache Commons Collections


      Apache Commons Configuration


      Apache Commons IO


      Apache Commons Lang


      Apache Commons Math


      GSON


      Guava


      JFoenix




      Hint arrow API


      Game#getHintArrowX


      Game#getHintArrowY




      Fix player hooks including Player#getSkullIcon and Prayer#getPrayerIcon
        • Thanks
        • Like
      • 49 replies
    • This update includes:

      Fix broken hooks


      Fix login bot for the message "No reply from login server. Please wait 1 minute and try again."


      Fix bug relating to which bot tab is sent human input


      General#randomLong bug fix involving negative numbers


      Fix GE API



      Please note: There are still some issues with the login bot due to a change in the game mechanisms handling the login screen. We're working on a fix and will upload it when ready.
        • Thanks
        • Like
      • 37 replies
  • Recently Browsing   0 members

    No registered users viewing this page.

×