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!

Web Development 101 - HTML nuts and bolts

This is a series of tutorials that will help you learn to code HTML. Before we go getting our hands dirty (well, not literally of course), let us learn first the nuts and bolts of HTML.

Key learning words:

    Elements

    HTML tags

    Attributes

HyperText Markup Language (or HTML as we know it) is the standard markup language used to create web pages. It is what we actually see on websites. On the technical side, we use HTML to create them.

A basic webpage is  made up of different elements. These elements can be: text box, drop-down menus, buttons,radio buttons, links, divisions, tables and paragraphs (well, we'll deal with the others as we go on).

We create these elements using html tags. There are a lot of confusion over the internet on what is the difference between elements and tags. But as far as I understand it (please please please correct me if I'm wrong), the sense of these two terms is this:

         elements     -     the very object that we see on a web page

         html tags     -     the standard codes we use to create the elements on a web page

*feel free to share your thoughts with this on the comments below

HTML tags (elaboration here)

There are different tags for each element we see on a webpage. An html tag is has a opening and closing tags.

     <div>Anything goes in this part</div>

The above example is a div tag (one of the commonly used html tag). The <div> is the opening tag for the div tag while the </div> is the closing tag for the div tag.

These tags have may contain attributes, (same concept for an element having attributes). An an attribute provides additional information about the tag/element. This is usually coded inside an html tag which has a key-value pattern.

    <div id="[you_div_id]">Anything goes in this part</div>

    

The id="[you_div_id]" part is an example of an attribute that an html tag may contain. This is the "id" attribute. Notice that it is in key=value pattern meaning that some value must be put into it. The left part of the equal sign is standard while the other side is defined by us, coders.

Creating your page

We'll be hyping it up a bit on this. Below is an example of a complete code of how basically our page will be coded. 

<!DOCTYPE html>

<html>
    <head>
        <title>Your webpage title goes here</title>
    </head>
    <body>
        <div>
                [Anything goes in this part]
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </body>
</html>

Let us figure this out piece by piece:

<!DOCTYPE html>  - this is the declaration tag which determines what type of document we are creating. Upon load of our code on a browser, the browser will know that this is an html file and will read the markup language we have composed accordingly.

<html>...</html> - this is the <html> tag. We ALWAYS have this tag in every html code we create. We are instructing the code that everything inside the <html> tag is html (or something executable in the web perhaps :)  ).

<head>...</head> - This is the <head> tag. This part is where we include all other head tags (tags/settings/configurations that must be preloaded or must also be initialized together with the webpage upon loading. Please don't confuse yourself with this description. We'll be dealing with this on another tutorial posts.) Example of other tags inside the <head> tag are:

• <title> (required in the head tag)
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>

<body>...</body> - This is the <body> tag. Inside the body tag is where we start putting the elements we need to see on our webpage.  (break it down yo!)

<div>...<div> - And lastly, the div tag. (Please refer to the one discussed above, before "Creating your webpage" section. Thank yah!)

Alright, now we know what are those weird words mean to us, let us now create our page. 

Open any text editor (a notepad will do) and copy the code above (please disregard the colors). After doing so, save the file and name it as basic_page.html. We provide the file extesion .html so that our editor would know that this is an html file. Just save it where you want to save it (for now).

Nice, we have now our file, now where's the page?

Open your file using your preferred browser, or just simply locate your file and hit 'Enter'. It should display the "Lorem ipsum..." thingy that we created awhile ago. It should look like this:

*If you weren't able to achieve the same thing like the one above, please do not hesitate to leave a comment. I will surely address you guys with that.

HAPPY CODING.