allFromJose

Wednesday, January 27, 2016

JQuery

Hi Guys,

Its been a while already that I haven't posted something here. I've been busy for our thesis project.

But now, let me share to you some interesting thing about web development. We will talk about JQuery. You might hear this already or may not but let me just share a brief background of this.

JQuery is a Javascript Library that allows web developers to add extra functionality to their websites. It is open source and provided for free under the MIT license. In recent years, jQuery has become the most popular JavaScript library used in web development.

This greatly simplifies the Javascript Programming. If you're not familiar yet about javascript just click here. JQuery is much easy to learn.

So lets get started. First we need to have the latest jquery library. To do that, there are two ways.

1. Link the library on your html, but we need internet here to access the library

 <script type="text/javascript" src=http://code.jquery.com/jquery-2.2.0.min.js""></script>

2. Download and store it to your project folder. Download here
To path the file see the image below.

Jquery file linked locally to the project

See the codes below:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>JQuery Tutorials</title>  
 </head>  
 <body>  
      <h1>Learning JQuery is easy</h1>  
      <script type="text/javascript" src="js/jquery-2.1.1.js"></script>  
 </body>  
 </html>

Live example:

Click this button.

You can also have this.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>JQuery Tutorials</title>  
 </head>  
 <body>  
      <h1>Learning JQuery is easy</h1>  
      <div>  
           Click this button. <button id="demo" type="button">BUTTON</button>  
      </div>  
      <script type="text/javascript" src="js/jquery-2.1.1.js"></script>  
      <script type="text/javascript">  
           $(document).ready(function() {  
             $('#demo').click(function() {  
                alert('My button is clicked.');  
             });  
           });  
      </script>  
 </body>  
 </html>

So that's it, we already created our first Jquery web application. I hope you learn something new today. Thanks for checking this out. I'll try to make some more interesting examples on my next posts.

Thank you.

Courtesy to:

Source Code Formatter : for the awesome auto-designed pre/code elements
W3Schools - for some examples
JQuery - for the informations
TechTerms - for the definition of JQuery

Tuesday, April 28, 2015

style tag in HTML

Hi Everyone,

Good day. Last time we discussed about the <title> tag. Now we will talk about the <style> tag.

The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags. To know more about <style> tag, click here.

Let's see the code below:

 <html>  
 <head>  
   <style>  
     h1 {color:green;}  
     p {color:blue;}  
   </style>  
 </head>  
 <body>  
  <h1>Some heading..</h1>  
  <p>Some paragraph . . .</p>  
 </body>  
 </html>

This code will result something like below:

The <style> tag gives design to whatever elements in HTML you specify. This is commonly known as CSS - Cascading Style Sheets. More info.
CSS is another big topic that will surely interest you. We will tackle this CSS sooner. But first we will just focus on the elements that composes an HTML document.

Hope you learn new today. On the next post, we will tackle to our next tag, it is <base> tag.
Thanks for visiting. Have a nice day.

Courtesy to:

W3schools for the <style> tag definition and features.
CodeFormatter for the nice pre element.

Monday, April 27, 2015

title tag in HTML

Hi Everyone,

Good day to all. Last time we knew what composes the <head> element. Now let's discuss about the <title> tag.

<title> tag is required in all HTML documents and it defines the title of the document.
The <title> tag element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

Let us see the code below:

 <html>  
 <head>  
   <title>A title</title>  
 </head>  
 <body>  
   Some contents here...  
 </body>  
 </html>

And let's take a look to the result:

Have you notice almost all websites also include an image or commonly called as their logo in the title bar? I'm sure you are wondering now how to add a logo to our html document.

Now lets talk about it. This can easily be achieved through this code snippet below.

 <link rel="shortcut icon" href="path/to/your/image" type="image/png" />

This <link> tag is also an element in HTML. It defines a link between a document and an external resource. Lets talk about <link> deeper on the next tutorials. You can also see it here.

The rel attribute of <link> tag specifies the relationship between the current document and the linked document/resource. More info.
The href attribute of <link> tag specifies the location (URL) of the external resource (most often a style sheet file but in this tutorial it is an image). More info.
The type attribute of <link> tag specifies the Internet media type (formerly known as MIME type) of the linked document/resource. More info.

Now let's see the full code example:

 <html>   
 <head>   
   <title>Title with icon</title>  
   <link rel="shortcut icon" href="images/icon.png" type="image/png" />   
 </head>   
 <body>   
   Some contents here...   
 </body>   
 </html>

That will output something like image below:

Hope you learn new today. On the next post, we will tackle about the next tag. It is the <style> tag. Thank you for visiting.

Courtesy to:

W3schools for the <title> tag definition, usage and attributes of the <link> tag.
CodeFormatter for the nice pre element.

head tag in HTML

Hi Everyone,

Good day again. This time we will learn more on what composes <head> tag in HTML.

<head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information and more. Click this link for more information about <head>tag.
The following elements can go inside the <head> element:

<title> (this element is required in an HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>

Hope you learn new today. Next time, we will discuss this elements that composes the <head> element. Thanks for visiting.

Courtesy to:

W3Schools for the <head> tag definition

Sunday, April 26, 2015

First HTML

Hi Everyone,

Good day to you. This time we will learn how to create our first HTML document. HTML stands for HyperText Markup Language, is a standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). Click this link for more info about HTML.

See this code below.

 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Title here</title>  
 </head>  
 <body>  
   <h1>Heading here</h1>  
   <p>Some paragraph here.</p>  
 </body>  
 </html>

This will output like the image below.

Hope you learn a little again. Wait for the next tutorials for we will dig deeper on HTML elements.
Thank you for visiting.

Courtesy to :

CodeFormatter for the nice formatted pre element
Wikipedia for HTML definition

Thursday, April 23, 2015

echo in PHP

Hi Everyone,

Good day, its me again. I want to share to you a snippet of a php code.
The code below simply print a string or a word.

String is a data type used in programming, such as an integer and floating point unit, but is used to represent a text rather than numbers. Click this link to know more about Strings and other data types.

Here it goes,

 <?php   
    echo "Hello World";  
 ?>

This will print Hello World in the browser when you run it. See the image below:

Hope you learn even a little. I will make it more detailed for the next post.

Courtesy to :

CodeFormatter for the nice formatted pre element
TechTerms for the String definition

Hello World

Hi Everyone,

This is my first time in blogger.com. This time I will be preparing interesting posts for you.
This blog will talk about some of my personal and intern life. I will also include here posts for new web development technologies, even some little tutorials for newbies in web development.

I'm excited to be part of your learning soon. See you soon.

Sincerely,

Joseph Dicdican

Pages