Welcome to TRiBot Forums

Register now to gain access to all of our features. Once registered and logged in, you will be able to contribute to this site by submitting your own content or replying to existing content. You'll be able to customize your profile, receive reputation points as a reward for submitting content, while also communicating with other members via your own private inbox, plus much more! This message will be removed once you have signed in.

UKF_HHA

[Tutorial] Web Programming - Lesson #1

4 posts in this topic

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

  • Recently Browsing   0 members

    No registered users viewing this page.