Web Development 101 - Div Positioning

And so welcome to this part of our tutorial, the <div> positioning. We are going to play a bit with our <div> and I assure you this would be fun and very helpful to learn. Open your text editor and copy and paste this code,.. save (of course).

Open your html document on your browser and you should be having something like the one below:

Have you gotten it?

Sorry for surprising you with such a bunch of codes. To make it up to you, let me tackle things one by one, relax  :)

POSITION: FIXED

On your code, take a look on this part:

<div style="position:fixed; background-color:yellow; margin-top:5%; padding:5px;">
 <h2>This is a fixed div</h2>
</div>
<div style="position:fixed; background-color:green; margin-top:10%; margin-left:80%; padding:5px;">
 <h2>This is another fixed div</h2>
</div>

Notice we have taken advantage of the attribute "style" of our div tag. This is where we define our inline CSS (we'll cover a different in depth tutorial regarding CSS).

As per the above codes, notice that we have "position: fixed;" on both <div> tags. A `fixed` position is used when we want our div to be fixed on a particular area on our webpage. Notice that on your browser, there are two divs that are not moving along as you scroll down your webpage. Those are the two fixed <div>s.

POSITION: ABSOLUTE and POSITION: RELATIVE

<div style="border:solid; width:800px; margin-left:auto; margin-right:auto; padding: 10px; ">
 <div style="position: absolute; width: 240px; background-color: yellow;">
  This is a div with an absolute position without a <u>parent div with a relative position</u>
 </div>
...
</div>

I'm sure it's on the code I gave you. On this part I have a <div> with a position: absolute. A <div> with an absolute position takes the size of its parent container. Here's the golden rule with regards to <div>s with absolute positioning:

If an absoluted <div> does not have any existing parent container, or a container with a position:relative, it will appear on the top of our page taking its position from the main page container or body of our page. There are other samples of <div>s with position:absolute in our code. Take a look and spot the differences.

We have something like the one below as well:

<div style="background-color: green; position:relative; width: 100%; height: 20%;">
 This is a div with a relative position
 <div style="position: absolute; top: 50px; left: 3px; width: 240px; background-color: yellow; height:50%;">
  This is a div with an absolute position
 </div>
 <div style="position: absolute; top: 50px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border;">
  This is a div with an absolute position (but with no height)
 </div>
</div>

These <div>s are the ones with position:absolute inside a parent <div> with a position:relative. The absoluted <div>s took the position where our relatived <div> is located.

Meanwhile, in our code below, we have a <div> with a position:relative (This snippet is also in our html file, please look at it, it should be there). Notice that we have floated this <div> into the right. This is the pink <div> on the right of another pink <div> which has contents of "This is a floated div with a relative position"

<div style="position: relative; float: right; width: 140px; height: 70px; margin-right: 3px; background-color:pink;">
 This is a <b>floated</b> div with a relative position
</div>

Inline with this <div> on its left part is another <div> which has a code like the below:

<div style="position: relative; width: 140px; height: 70px; margin-right: 3px; background-color:pink;">
 This is a regular div with a relative position
</div>

Pay very close attention to what I am going to say:

We have two pink <div>s aligned with each other. You see that?[YES][NO]
The one is on the left with a content "This is a regular div with a relative position". [YES][NO]
The other one is on the right with a content "This is a floated div with a relative position".[YES][NO]
Looking on the arrangement of our code, the first one to appear on our editor is the floated relative <div>, then there comes the regular relative <div>. [YES][NO]

Why is it that even the floated one is coded out first, the regular one is the <div> to appear on the left side of the floated <div> making it aligned to each other?

It is because, the floated <div>'s width have taken enough space for its content leaving the untaken part availble for other elements to fill in. And so the next `technically` available element (which is our regular <div>) fills in.

More for position:relative

<div>
 <div style="position: relative; float: left; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border">
  position: relative; float: left; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
 </div>
 <div style="position: relative; float: left; width: 240px; background-color: orange;">
  position: relative; float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 </div>
 <div style="position: relative; float: left; width: 210px; height: 125px; background-color: yellow;">
  position: relative; float: left; width: 210px; height: 125px; background-color: yellow;
 </div>
 <div style="clear:both;"></div>
</div>

This is just an additional example of <div>s with position: relative. Notice that it is all floated in left and have bonus <div>: <div style="clear:both;"></div>. 

These three inline <div>s are bound to show up 'inline' since they have widths summed up together that fits inside the full length of their parent container. Having the bonus <div> with `clear: both;` style will make the unused available space unavailable to be filled by the next element that could fit it inside the unused space. Try removing `<div style="clear: both;"></div>` and see what happens.

Others

The `Lorem ipsum...` thingy are just additionals in our sample code. You may replace anything you want in it.

Summary

So as far as what we have tried, we have used the following positions

• relative
• absolute
• fixed

So, have I made it up to you? If you still have questions, violent reactions or any additionals with regards to this article, please feel free to comment. I will surely address the issue the soonest possible. Happy coding!

Web Development 101 - Div tag

Here's one of my personal favorites, the <div> tag.

The <div> tag defines a section or division on a webpage. 

They group elements: check!

They add life to our webpage: check!

They will make our webpage pleasing to the eyes: check!

<div> tag is so powerful in such a way that familiarity and expertise in playing with this will make you a web design expert. This is what we use to define how we want our webpage to be seen by others (That is how I personally define <div> for me)

Let us dig deeper with this tag. Brace yourselves, for this series is a bit detailed, though I really find these things interesting and worth it to learn.

This is how a coded <div> tag will look like:

<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

[credits for hilite.me website for free code snippet formatting service]

And the output will look like this:

Let us start first with what we have just coded:

<div></div> - This is the opening and closing tag. All defined inside the opening and closing tag are part of that particular section

<h3></h3> - This is the opening and closing tag header tag. Well, this isn't particularly part of the <div> tag because this is a different tag, so as with the <p></p> tag.
style="color:yellow" - do you notice this attribute inside the <div> tag? This is the `style` attribute which can also be present in other html tags. For this instance, in particular, we have used the `style` attribute to format the elements inside our defined <div> tag. 
Try this one:


<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>




... save the html file and open it on your browser. You should get something like this.



Notice that on our second <div>, we have indicated this: style="color:blue". Which means, whatever element style applicable for this attribute to be applied, it must have the color of blue: in our case, the text color became blue.



We already have two <div>s here: the first one with the yellow text color and the second one with the blue text color.



Would you like to see how your div actually looks like? Let us make its borders visible: Tweak your code to this:



<div style="color:yellow; border: solid black;">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue; border: solid black">


  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>





Assuming that you're still not closing the browser where you opened our html file, refresh the page. Did you get something like this?




That is how your <div> looks like on your webpage. See the border lines? It is the space that our <div>s occupy in our webpage.



I have mentioned that <div> tag is so powerful that it defines how our elements are arranged in our webpage, to make the term simpler, the layout: and I'm standing for it. But first, let us talk about <div> positioning.

Web Development 101 - Button tag

Buttons.

As plain as you have read it, they are buttons.

For formality sake, what is the definition of an HTML button?

The button tag represents the clickable buttons in our webpage (though we may also want to take advantage of the <input type="submit" /> or <input type="button" /> tags which will be covered sooner on this series).

Without further ado, this is what a standard button would look like.



which has the following code:

<button>TRY TO CLICK ME</button>

Now, on your text editor, just type the codes above and save it as: button.html

Now, navigate to your saved html file and open it on your browser. You should have a page with a button same looking as the one created above

*Note that nothing happens yet when we clicked that button. As we move onwards, we will be taking advantage of its attributes in order to add life to this boring button. Speaking of attributes, below are some of the attributes of the <button> tag.

• name
• id
• disabled
• form (HTML5)
• formaction (HTML5)
• formenctype (HTML5)

Please get a hold of yourself and pardon for mentioning the HTML5 thing on this part. A button is just the same with other elements which share common attributes: id,class,name. However, to kickoff something new in our readings, I added HTML5 attributes. From the very beginning of this series, we have been working with HTML4 (please do some google :) I'll be covering this part on a different article.) Today, with the existence of HTML5, new attributes and even new tags are added which made our webpages more dynamic and simpler to achieve. You might be curious of what is HTML5 anyway.

* If you have any corrections, or comments or suggestions or violent reactions, please please please feel free to raise it. I'll be very glad to address it the soonest possible. Happy coding!

Web Development 101 - Anchor tag

Anchor tag is the tag that produces the hyperlinks on our webpage. What are these hyperlinks?

"... an icon, graphic, or text in a document that links to another file or object. The worldwide web is comprised of hyperlinks linking trillions of pages and files to one another." - http://www.computerhope.com/jargon/h/hyperlin.htm

Well, below is a link that redirects you to another blog once you clicked it:

Try clicking me.

Notice that it opened in another tab and delivered you a new page.

How will we code it?

Basically, this is the syntax of an anchor tag:

<a href="#">Redirect me, please</a>

... and it looks like this on a webpage

Now, how does our hyperlinks appear on our webpage depending on its status?

• Unvisited/unclicked hyperlink - an underlined blue text 
• Visited/clicked hyperlink - an underlined purple text
• Active link - an underlined red text (try holding down your left click and you'll see)

Attributes

<a href="www.google.com" id="lnk-id" target="_blank">

• href - specifies the target location to where the user will be redirected once the hyperlink is clicked
• id - sets the identity of the hyperlink
• target - defines what will be the behaviour of the hyperlink once clicked. The target attribute has different values and they are as follows:
  
  • _blank - opens the link in a new tab
  • _self - opens the link in the same page where it is clicked
  • _parent - opens the link in its parent frame
  • _top - opens the link in its own page

    Please refer to http://www.w3schools.com/tags/att_a_target.asp for more details about the target attribute. Google is your friend  :)

Let's get it on

1. Open your favorite text editor and type the code below:

<html>
    <head>
        <title>Your webpage title goes here</title>
    </head>
    <body>
        <a href="www.google.com" target="_self">Redirect me, please</a>
    </body>
</html>

2. Save your file then open it on your browser. It should look something like this.

*Please feel free to leave comments, questions and corrections. I will promptly respond to it, promise!

Web Development 101 - Anchor tag

Article is on its way....

Web Development 101 - HTML tags

As discussed in our previous article, we have learned that HTML tags are the syntax we follow in creating the elements of our webpages. I have given a few sample of tags on that post. In this part of our series of tutorials, I will discuss in-depth the other things we need to know about HTML tags.

Let's not beat around the bush, below is the list of the standard HTML tags we use in web development:

Anchor tag	<a></a>
Body tag	<body></body>
Button tag	<button></button>
Division tag	<div></div>
Form tag	<form></form>
Head tag	<head></head>
Iframe tag	<iframe></iframe>
Image tag	<img />
Input tag	<input />
Table tag	<table></table>
Lists tag	<ol></ol> & <ul></ul>
Paragraph tag	<p></p>
Span tag	<span></span>

Also, we have text formattng tags:

itallics	<i></i>
bold	<b></b>
center	<center></center>
subscript	<sub></sub>
superscript	<sup></sup>
strong	<strong></strong>
emphasize	<em></em>
computer output format	<code></code>

The above tags are just the basics that we will encounter in coding webpages. Everything complicated on a webpage starts with those tags. Now, let's move on with the first tag, anchor tag.

Real Life Lessons in Programming

Let me take a break from finishing the second tutorial post. 

Being a programmer is not just something you acquire for the sake of being employed. It is a PASSION (well, this is how I love my job). In everything that we do, we must give our 101%, put our mind, body and soul for a satisfactory output that will benefit not only our users but us as programmers. Programming isn't as techy as it sounds, it also has a heart. Real life lessons are also applicable in this area:

1. "To understand is to perceive patterns" -- Isaiah Berlin. Coding requires critical thinking. Critical-mindedness helps you to see the pattern that lies behind the overall behaviour of a system. Acquiring this pattern will make our coding smooth and modular in approach.

2. "Simplicity is the ultimate sophistication" -- Leonardo da Vinci. Wow, amazing! Even master Leonardo's words of wisdom apply to today's technologies. It's true, the simpler your code will be, the better. Isn't it cool that with just a simple solution, you are able to resolve a whole system's trouble?

3. "If I have seen further, it is by standing on the shoulders of giants" -- Isaac Newton. I personally been just hearing this saying on businesses (since they talk about business giants). In programming, if you feel like you are in a situation of creating a very complex algorithm, chances are that you are in a wrong path. And chances are that somebody has already done it and shared it in the community. Check Google, he is your friend. Do not waste time, simplicity is the ultimate sophistication anyway.

4. "Do what you love and the necessary resources will follow" -- Peter McWilliams. Stop procrastinating! Stop wasting time waiting for the right timing. The right time to start doing what you love is NOW. So you love programming? So you want to create a system? Why tonight? Why later? Create the ember now. 

5. "Logic will get you from A-Z, Imagination will get you everywhere" -- Albert Einstein. Very well said Sir Einstein. It is accepted that developers are left-brained person (well, not literally of course). I mean, developers tend to be more analytic and logical. And that lies in our shortcoming. We must imagine more to  move futher. We have to imagine more to touch real-life situations where our end-users will be testing our products. We have to imagine how our project will work so that we could have a better view on how we are going to design its backend.

Programming is something very loveable. Who says programmers have no life? We are full of life, we sustain life. Be proud. Happy coding!