HTML 5 - Easier and faster

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Ubuntu - One of Linux Distribution

Ubuntu is a Linux distribution operating system software, meaning that it runs using Linux applications, kernels and libraries. Ubuntu is developed and sponsored by Canonical, Ltd., a South African company that is founded and funded by Mark Shuttleworth.

JavaScript Introduction

Ryan Paulin When dealing with website development, there is lots of scripting language that you can choose from depending on how you want to develop your website. You can use AJAX, HTML, CSS.

Acquainted with CSS ( What is CSS ? )

CSS stands for Cascading Style Sheets. If you read in the dictionary, cascading is similiar with waterfall. But in this case, it means the flow from one code to another code that are interconected. So it can be concluded, CSS is a collection of codes that are consecutive and interlinked to set the format / display an HTML page.

What is Linux ?

Linux – the operating system for a GNU (pronounced Gnew) generation. It has been dubbed the alternative to Microsoft, the solution to all life’s problems and many other things that may or may not be true. But what is Linux, and should you care?

Tampilkan postingan dengan label html. Tampilkan semua postingan
Tampilkan postingan dengan label html. Tampilkan semua postingan

Rabu, 03 Agustus 2011

The Basic of HTML

What is that HTML ? Maybe for the master designer or web programmers and networks administration, the word is already very familiar. But how for newbie like us ?

Allright, for more details, a brief understanding of HTML will be described below. Come on, check this out :)


HTML Definition

HTML stands for HyperText Markup Language. HTML was first invented by Tim Berners-Lee in 1989, which is the basic framework internet. Although now there are so many language used to create a website, but i'm sure every site using the HTML language to display text, graphics, sound, and animation. World Wide Web Consortium (W3C) adalah pihak yang menjadi pemegang resmi dari bahasa ini. (http://www.w3.org)

The History of HTML

HTML language comes from the old language called Standard Generalized Markup Language (SGML). At least that's what Google said. :) he development of HTML already started approximately ten years before the language was introduced as Bill Atkinson's find HyperCard for a Macintosh computer and MacOS operating systems. Well, the idea behind HyperCard was the one that supports HTML language, which is hyperlinking, which means the ability to connect from one area in a single word or a Web page to the other pages or area. The concept is very simple, but before the presence of HyperCard never would have thought to apply.

Use of HTML

Okay, enough small talk and a history lesson about HTML. Then, how HTML works? Maybe that's the question for us that will begin to learn to create a website.

Simply, HTML is composed from a series of "elements". The elements that worked as a language that tells the browser to display the recipient of certain elements on the screen. Element in HTML is known as "tags". Well, this tag is what will define what should be displayed by the browser, the recipient will be. That Elements work as a language that tells the recepient browser to display certain elements on the screen. Element in HTML is known as "tags". Well, this tag is what will define what should be displayed by the recepient browser than.

HTML Structure

You can say, the HTML document is a web page. Simply put, an HTML document is composed of tags,,. Here is an example HTML page that is very, very, very simple.

[html]
<html>
<head></head>
<title></title>
<body></body>
</html>
[/html]

Any elements or tags in an HTML must have an opening tags and closing tags. For example, the<html> tag is the beginning of an HTML document, and when the </html> tag is written, then the browser will assume there is the end of an HTML document.

Tag is used to tell the browser about everything about the HTML document that is in though. Whether it's title, author, or other script languages ​​are in use. So, when the </html> tag read by the browser, then that's where the end of the description of the HTML document.

Tag <body> is the whole content can be displayed and can be viewed directly by the user. As above, this tag is also in the end by </body> tag. So, we can say, each element should be is in the open and closed. To close an element, most use a slash mark before the name of the element. for example:
Opening tag <html> -> closing tag </html>
Opening tag <head> -> closing tag </head>
Opening tag <title> -> closing tag </title>
Opening tag <body> -> closing tag </body>
But sometimes, there are some tags that do not have a closing tag, or can not add the closing tag. For example, to add a new row is in use the tag <br>. Because these tags do not have a closing tag, it is the recommended giving a slash after the name tag, the example is <br />. Although if you do not add a slash, the browser will still be able to define the tag. But it is not recommended.

Okay, for a basic explanation of HTML i think it is quite up here. For an explanation of the tags in HTML, i will try to explain in my next post. Okay, keep your spirit to learning. I'm just a nubie, so i hope we can learn together.

At last, Happy Coding All. :)

Senin, 01 Agustus 2011

Acquainted with CSS ( What is CSS ? )

What is CSS ?

CSS stands for Cascading Style Sheets. If you read in the dictionary, cascading is similiar with waterfall. But in this case, it means the flow from one code to another code that are interconected. So it can be concluded, CSS is a collection of codes that are consecutive and interlinked to set the format / display an HTML page.


The advantages of using CSS

If you have several pages where you use arial font for writing, then one day you get bored with arial and want replace it with trebuchet, you have to change one by one at your page and change the font type from arial to trebuchet.

By using css, to change the look of many pages, you simply do it in one CSS document, without having to touch the HTML file.

Thus, the advantages of using CSS, more practical!

Disadvantages Using CSS

Although CSS make designing web page easier and faster, but still there is a shortage of css. Not all browsers interpret CSS code in the same way. So sometimes, the web interface with the CSS looks good in one browser, but the mess in other browsers. So you should check the display to look good in all browsers and add special codes specific browser if needed in order to display your website looks good in all browsers. Needed more training so that when you designing a website with CSS, it can showed properly in all browsers.

Syntax / The way to writing CSS

Syntax / CSS sentences composed of several sets of regulations that have: a selector, a property, a value.

The format of writing sentences CSS:
selector { property: value }
Selector to indicate which parts are going to set up / formatted.

Property to show which parts of the selectors who want to set.

Value is the value of its settings.

Example:
h1 { color: red }
The example below show :
Selector: h1

Property: color

Value: red
Or we can said like this : That css has the function to set the color from h1 tags to red.

Grouping the Selectors

You can write a CSS code for a variety of selectors by using a comma. Suppose you want to set the tag h1, h2 and h3 all use red, then the CSS code become like this :
h1,h2,h3 { color: red }
Consider writing h1, h2, h3, separated by commas.

Using Many Properties

To set more than one properties you can use separator semicolon (;).

example:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
In the example above, tags h1, h2 and h3 are set to use red, with arial font type and font size to 150%.

How the Good Writting of CSS ?

It is advisable to write the CSS code using a few lines in which setting property and its values ​​in the indent. Yes, to be more organized and easier to read, not a necessity.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Now that you understand the basic rules of writing sentences CSS. The next post will teach you apply the CSS code to your pages.

CSS Comment

Sometimes, it helps you write comments in your CSS code to give a reminder note.

You can use the syntax /* for the opening tags and * / as clossing tags to write a comment. Any text that is between the tag / * and * / will not be read as a code, but only as a record for yourself.
/* Write your comment here */
p
{
text-align: justify;
/* Write your comment here */
color: blue;
font-family: arial;
}
Inputing CSS to Web Document

There are three ways to inputing CSS to your web document. What are they ? Let me explain it one by one. Check this out :
  1. External style sheet
    An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. It consume less time and powe. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. And you can put that .css files anywhere you want. But, be sure to call the right place in your html files. For a better result, it's recommanded to use full path instead of simple path. An example of a style sheet file is shown below:
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  2. Internal style sheet
    An internal style sheet should be used when a single document has a unique style. You can do this, if don't make many changes to your html files. Or you will get confused to edit it later. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
    <head>
    <style type="text/css">
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>
    </head>
  3. Inline Styles
    An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. For your information, this style rarely use in web developing. Because when you want to edit it, yeah you must find the css and also take a look at the thml tags. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  4. Multiple Style Sheets
    If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.For example, an external style sheet has these properties for the h3 selector:
    h3
    {
    color:red;
    text-align:left;
    font-size:8pt;
    }
    And an internal style sheet has these properties for the h3 selector:
    h3
    {
    text-align:right;
    font-size:20pt;
    }
    If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
    color:red;
    text-align:right;
    font-size:20pt;
    The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
  5. Multiple Styles Will Cascade into One
    Styles can be specified:
    • inside an HTML element
    • inside the head section of an HTML page
    • in an external CSS file
    Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Oke, i think that's all i want to introduce you about CSS. There some word i copy from w3school. Next posting, we will try to make a dropdown menu with css. Interesting? Let's wait until next post. :)

At last, Happy Coding All :)

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More