User Input Forms

Today , i will explain about Form

A form is part of a web document that can be loaded by the user, for giving out certain information from the user to the website. A form is very important in a web application, especially dynamic web applications, because the form is the only means for the developer's website to obtain information from the user.

Knowing how to create an HTML form on the right is important to ensure there is no misunderstanding of the user in using the form provided. This section will explain how North create a form with HTML, form elements are provided, and how these elements are used. Processing dynamically form will not be discussed, and the CSS properties to beautify the look of the form will be discussed in the next section.

example :

Radio Button Form 

Check Box

Drop Down

for concern : download

Table

   This time I will be a little story about how to create a table in HTML. Tables in the website is widely used to present information that consists of rows and columns that appear neater and easier to understand.
    With a simple HTML code we can create a static table, information that appears from the data that is written in simple HTML code. In web design, the table also can make you look more beautiful and neat. In html table starts with the <table> and end tag </ table>, then follow with the <tr> (table rows) is to create a new row in the table and then the <td> (table data) is as a data displayed. Nesting tables (nested tables) can also be created in HTML. Here is a sample code in html create a simple table:

it will have result :

For more concern : download

Planning Site Navigation (lect)

Before making a website. We have to understand how to plan the navigation in the website.
example, we have to create a site map;

Site Map

in making navigation, endeavored to be good and easy to use and understand user.

for more concern : download

Incorporating Graphics and Color ( lect)

Today , i learn about Incorporating Graphics and Color.

1. Graphics Format
2. Use <img> element
3. Control image , background with CSS

Graphics Format

GIF

   GIF (Graphics Interchange Format) is an 8-bit image supports 256 colors and can only be used in grayscale mode, bitmaps, and color index. Image with this format supports the use of multiple bitmaps in one file so that it can be used to create animated images (animation). In addition, the GIF format also supports Transparency and Interlacing.

PNG

    Image with PNG (Portable Network Graphics) was first developed in 1995. This format uses lossless compression method, which is a method of compressed images with not too much reducing its quality. At first the PNG format is designed to be a lack of GIF.

JPG / JPEG

    JPEG was developed in the early 1980s by the Joint Photographic Experts Group (JPEG). JPEG is the most commonly used format on the internet. Such as GIF, JPEG format also uses a compression system, but the algorithm is different; much more complex and lossy.
    Because it is a lossy compression process it is not recommended if we edit it repeatedly. Why? Because in every process there will be a compress-decompress the original image information is lost (wasted) and can not be saved, especially if there is a process of "crop" or "shift" of the image.


For more concern : download

Designing Page Layout (lect)

Today, I get a lesson about designing page layouts and understand it:
1. Normal flow.
2. Using division element to the make Contain containers.
3. Create floating layouts.
4. Build flexible and fixed layouts

Normal flow.
Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes roomates are either inline boxes or block boxes.

Division Element.

Use <div> to make elements :

Floating element 

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

More concern : download

(Using The CSS Box Model (lecturing)

Today I get a lesson about css box models.

When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result.

For more concern : download

Typography Website (lecturing)

What is Typography?

Typography is a combination of art and engineering to set the paper so as to make the meaning of the text is well conveyed visually. Typography is a complementary element in the design of which must be considered. For example, if the wrong type of font, font size, alignment posts, they will make you feel bland design, ridiculed, less readable, even in jest reader for writing disheveled.

Processing typography is not only limited by the selection of fonts, font size, kerning, leading, decor & so on, but also on the fit between the theme and the impression you want to show. Many web designers so do not understand and do not care about typography in web design. As a result of their web design work seemed bland because there is no fusion of typography even difficult to read the article. Then the question we create a website to share information through articles in the form of text what just show off the design with images bejibun number?

What should be noted in Web Design

   Read Article Before Di Publish
Read the article to be published, it is important that we know how the text will be integrated into the website, so that between text and design fused and messages conveyed properly.

   Draw the structure Hireaki The Clear
Show me a clear hierarchy, Illustration like this, when you see a website, which parts are directly you see? Next to where? With the clarity like this, your website typography will look more regularly to be seen. You can try to choose the size of the font size, shape attractive and clear, then the placement of the letter should also be adjusted properly.

   Choosing Fonts & Colors Background
Choose the color of the letters are comfortable to be seen or read. Then the color of the letters also be different from the background color, not necessarily with a contrasting color, but can be a color that is more clearly visible so easy to read. Do not occasionally choose red color for text with black background. It can make our eyes tired to read. Find font color comfortable as possible adapted to the background color.

for more concern : download

Introduction to CSS (lecturing)

What is CSS?

CSS stands for Cascading Style Sheets. If you read in the dictionary, it means the cascading waterfall. But in this case, the intent is, the flow from one code to another code interconnected.

So if a complete written in Indonesian roughly meaning CSS is: a collection of sequential codes and interconnected to set the format / display an HTML page.

Advantages of Using CSS

If you have multiple pages where you use arial font for writing, then one day you get bored with the arial and want to change to a trebuchet, you have to change one by one page of your website and change the font type of arial be trebuchet.

By using css, where all the web pages use the same CSS, you simply change one line of code css to change the font on all web pages of arial to the trebuchet.

Thus, the advantages of using CSS, more practical!

Disadvantages of Using CSS

Not all browsers interpret the CSS code in the same way. So sometimes, the web interface with CSS looks good in one browser, but messy in other browsers. So you must check the display to look good in all browsers and add special codes specific browser if necessary in order to display your website looks good in all browsers.

for more concern : download

Plainning The Site (lecturing)

Today I get lectures about planning the sites. The goal is:

1. To understand the development of a website.
2. Creating a website specification.
3. identify the purpose formation of a website.
4. Establish a team to create a website.

Understand the development of a website.

Before creating a website, we have to understand how to develop the website itself. Therefore we need to know before we make whether it's about navigation, appearance, structure and others.

Creating a website specification.

We as developers must understand how to create a website useful specifications in accordance with our clients.

Identify the purpose formation of a website.

We must understand the purpose of the establishment of a website itself, whether its for business purposes, for sale, or for personal.

Establish a TEAM.

In order for the website that we do quality, we have to have a great team to divide each task. We have to be smart to choose a person to be able to join in our team.


for more concern : download

Layout 

In the world of design, layout talked about how the arrangement of elements within a page correctly. Just like typography, there are so many elements to the layout, which certainly can not be discussed in this section alone. Discussion of the overall layout would require a separate book. We will only see the layout of the elements commonly found in web documents, and how to make these elements with HTML and CSS.

A web document generally have the following elements:


element Header 
As the name suggests, is an element that contains the title and other explanatory documents. Usually this element is loaded with website logo, global menus (such as login and logout), and the name of the currently displayed page.
element Navigation 
Navigation elements, which provide navigation access to other pages on the web.
element Sidebar 
Support element content, the content can be a navigational aide, or a variety of other things like a list of other content, advertisements, or additional menus. Sidebar can be left or right in the content, or even on the left and right of the content, according to the designer's creativity.
element content 
The main contents of web documents. Users usually come to the web to see the text that is in this section.
Footer elements 
The concluding section of the website, which may contain other information on the website, such as the use of the license, sitemap, or links to other websites.
How can we create a general layout as shown in the picture elements in the Document Layout above site? Before you create a layout, of course, we first have to know how to measure elements in the HTML. Because without being able to measure the elements correctly, we will not be able to make a nice layout.

                                                      For more information : here

CSS Box Model

Margin 
How to write the following CSS
margin: 3px 3px 3px 3px;
The order of the numbers is Up, Right, Down, Left, or you can write one by one like this:
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;

Padding
For writing CSS Padding is similar to the margin we only need to change the "margin" to "padding" like this:
padding: 3px 3px 3px 3px;

Border
How to write the following CSS
border: 4px solid # 000;
# 000 is the color code of the HTML, you can change this to black or another color coding HTML. To find the HTML color code, please enter here. If you want to give a border only on one side please use code like this:
border-top: 4px solid # 000;
border-left: 4px solid # 000;
border-bottom: 4px solid # 000;
border-right: 4px solid # 000;


Various Kinds of Border Style 

Download example of my code : here

Font in CSS

There are many fonts that are contained in the CSS. So, to set the font css style of writing contained in the html. Many fonts are available in CSS for example Arial, Times New Roman and many others.

Style and Selector

       Okay, today I will show you what I did yesterday about css and selector.
HTML is an Internet programming language that can display images and information with a good view, but to support it all, required to use css
CSS can be divided into three: 

1. Internal Css 

2. Inline css

3. External Css

For more information : here

HTML 5 NEW ELEMENTS

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C).

What is new in HTML5:

1. New Elements

2. New Attributes

3. Full CSS3 Support

4. Video and Audio

5. 2D/3D Graphics

6. Local Storage

7. Local SQL Database

8. Web Applications

9. This is example of syntax HTML5

Canvas tag in html5

Canvas tag is Defined graphic drawing using JavaScript.

Example

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

Your browser does not support the HTML5 canvas tag.

</canvas>

New media element:

New form element:

Example of JavaScript of canvas:

<script> 

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

GRAPHIC TOOLS

Graphical tools are software tools that link resources together in an online visual collaboration to author rich web presentations, upload and share visual content among team or customers inside a visual workspace.It can help link people’s experiences from across the globe and foster collaboration by providing a dynamic workspace to draw, annotate and review shared designs and documents.

The design concept

There are three objectives of designing concept :

To Inform

To Identify

To Persuade

Graphic

Graphics are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. In contemporary usage it includes: pictorial representation of data, as in computer-aided design and manufacture, in typesetting and the graphic arts, and in educational and recreational software.

There are two graphics, they are:

Bitmaps

 Vector

Graphic tool

There are many graphic tool can we find, such us: 

               Tool box :

              Layout tool

Writing HTML FOR THE MODERN WEB

From my Lecturer Achan Sumonta , i learn the basics all of the envorinment about HTML including;

CREATING WEB PAGE WITH HTML

    In the first time , before we learn about HTML , we must know about the Structure of HTML .
This is an example for the Structure :

                <html>

                       <head>
                           <title> Type your title here </title>
                      </head>

                      <body>
                     
                               fill this section with whatever you want !! ... ( we will learn more on another section)
                     </body>

                    </html> 

    

      HTML is a markup language which lets you make identify common sections of a Web page,

for example element <h1> is define to make first-level heading 

               <h1> What is HTML ? </h1>

                    The output will be :

            

THE HISTORY OF HTML     

         Hypertext Markup Language (HTML) is the language used to write web pages. HTML is an extension of the standard formatting text documents namely the Standard General Markup Language (SGML). HTML actually is ASCII or plain text document, designed to not depend on a specific operating system. 

         HTML created by Tim Berners-Lee while still working for CERN and was first popularized by the Mosaic browser. During the early 1990s HTML experiencing very rapid growth. Each expansion will add HTML capabilities and facilities better than the previous version. But official development issued in November 1995 by the IETF (Internet Engineering Task Force). 

         HTML 2.0 is a refinement of the HTML + (1993). 

HTML 3.0 (1995) provide more capabilities than the previous version. An effort of the World Wide Web Consortium's (W3C) HTML Working Group in 1996 to produce HTML 3.2. HTML version was officially published in January 1997 the latest version of HTML is HTML 4:01 officially released by W3C on 24 April 1998 HTML HTML 4.0 is a refinement of the first issue. (18 December 1997). 

 HTML POLICY 

         HTML design means doing an action programming. But HTML is not a programming language. But only contain HTML commands have been structured in the form of tags compiler. Write HTML tags are limited not enter certain orders that we can in HTML by the browser access. HTML is designing is an art of its own. Homepage which is an implementation of HTML is a reflection of the person making it. For that we need mendesainnya well that the visitors homepage we make it fun and rewarding. 

HTML design can be done in two ways: 

1 Using an HTML editor, such as Microsoft FrontPage, Adobe Dreamweaver, and others. Find other HTML editors here. 

2 The way to write it yourself manually one by one HTML tags in the HTML document. 

DEVELOPMENT HTML 

          Before an HTML confirmed as a standard HTML document, it must be approved first by the W3C to strictly evaluated. 

Every place a development version of HTML, the browser shall perforce have to improve themselves so that can support HTML code, the new code. Because if not, the browser will not be able to display HTML. 

HTML version 1.0 

         Capacity owned version 1.0 is among other heading, paragraph, hypertext, lists, and bold and italic text. This version also supports image placement on documents without a permit to put text around it (wrapping). 

HTML version 2.0 

          In this version, the addition of quality HTML rests in its ability to display a form in the document. With this form, then we can enter the name, address, and suggestions / criticisms. HTML version 2.0 is a pioneer of the interactive homepage. 

HTML version 3.0 

         HTML version 3.0 adds a number of new facilities such as a table. This version is referred to as HTML + does not last long and soon replaced the HTML version 3.2. 

HTML version 4.0 

         HTML version 4 is the latest version of HTML when resources are taken. HTML has to download a lot of changes and revisions from its predecessors. These changes occurred in almost all HTML commands such as tables, image, link, text, meta, imagemaps, form, and others. 

         Then was born the HTML version officially released by the W3C on 24 April 1998. HTML standart in 1999 HTML HTML is a refinement of the earlier version 4.0 published (18 December 1997). HTML HTML version still standart official until today. 

HTML 5 

        HTML 5 is the development of the current generation of html and the last generation and will likely grow more and more .

TOOLS

        You can use all of tools that use to edit HTML code , for example ;

       1. NOTEPAD ++ (For Windows)

          2. GEANY ( For Linux)

     For more concern, you can download this file .

Overview Of HTML Models

Now , i will learn about Overview some models on HTML. For example , i compare the two models of HTML.

HTML	HTML5
DOCTYPE is much longer as HTML4 is based on SGML-based. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	DOCTYPE is required to enable standards mode for HTML documents. <!DOCTYPE html>
Audio and Video are not part of HTML4 specification	Audio and Videos are integral part of HTML5 specifications e.g. <audio> and <video> tags
Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.	Vector graphics is integral part of HTML5 e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.	JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
Browser cache can be used as temporary storage.	Application Cache, Web SQL database and Web storage is available as client side storage. Accessible usingJavaScript interface in HTML5 compliant browsers.
Web Sockets are not available. Generally used mechanisms are long polling and streaming.	Full duplex communication channels can be established with Server using Web Sockets. Accessible using JavaScript interface in HTML5 compliant browsers.
Works with all old browsers	Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari  etc.
Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.	Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5

for more concern , you may download this file here

Good or Bad Website ?

There are many website that contains good or bad about the design, so from my Lecturer Dr.Sumonta, i can make comparasion both Good or Bad website , let's get example :

For website :
Apple Website ( www.apple.com)

Apple web has a very very good home page , so consumers or viewers can get beautiful pictures, words font, colorfully design make that interesting . And friendly navigation to another menu.
They have a simplicity web but not simpler, they have consistent in every pictures on their device in HD resolution, their website is very clear view and make that responsive

Axioo Website (www.axiooworld.com)

From my opinion, Axioo has a bad website because they are a big developer technology but their website is very useless. The background of the web make costumers/ viewers were bored, because they used classic's color . There is many menus which very very usefull, but they makes that location inconsistent, so not easy to find what the consumers want. Their website is not interesting , yes because they have miss to locating the best area of their link and their picture, and once again, their picture is not in HD , so poor resolution

for more learning and education about comparison good or bad website , you can download this file here