Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

Web Page isn't interesting without these (Basic HTML)

Less interesting! Suppose a web page only contained writings alone. Basic HTML we have learned will not be complete if no images. In this article I will explain how to create a background image, so that the web interface is more pleasing to the eye.

To create a background image that you should consider is to determine the place (folder) or a directory to save the image. Should be in the folder where you saved the html file that you create. Make it easy!

For more details, you just write the following script:


Description:
  • Text = "white": color text to be displayed
  • Bgcolor = "blue": background color, the background will be colored blue if the image is not found
  • Image: Name of the directory where you save the image
  • beside-you.jpg: the name of the image to be used as background
Image will look like this:


Learn while you still have time, before you get old and lose the opportunity to explore your talent! May be useful

Sensation create table (Basic HTML)

On occasion I am trying to complete the sheet that is not over the Basic HTML you have learned in previous articles. Now you're going to play how to make a table.

Understanding briefly about the table is a list of information in the form of data that is created in the form of rows and columns.

To display a table in the browser page you have to know the elements and attributes. Quite a lot, but take it the results will be comparable to what you learn. Because I think in learning basic html, create a table one of my favorite materials.

What should you know? Element table include:
  • Caption: This element is used to give the title of the table to be created, its attributes are: align that has a value of "Top" (the title is on the table) and the "bottom" (where the title was under the table).
  • TR (table row): specify rows in the table
  • TH (table header): a cell in the column header, in bold and at the center of the cell
  • TD (table data): data content of column cells
While Attribute to create the table include:
  • Align: used to determine the position of the table that will be created as left (L), center (middle), right (right)
  • BGCOLOR: background color for the table
  • Border: Specifies the border on the table, using a pixel size.
  • Cellpadding: distance to the edge of the cell contents of the cell
  • Cellspacing: distance between cell
  • Width: specify the width of the table
  • Height: height specify the table
Write the following script:



The result will be as shown below:


Write the following script:


The result will be as shown below:


Write the following script:


The result will be as shown below:



Learn while you still have time, before you get old and lose the opportunity to explore your talent! 
May be useful :-)

Unordered list, what is different from the ordered list? (Basic HTML)

In the article about basic HTML entitled "Ordered list, Have you ever heard?", You already know what it is an ordered list. For this time you will learn about the unordered list, what is an unordered list?

The principle is the same as an ordered list, which lists the sequence and there must be the element list item (li). difference for the unordered list does not use letters or numbers, but a sign or bullet. This element has a type attribute that has a value such as circle, square or disc.

Now you open Notepad or your editor software, wrote the following script:


Save the file name or the file name unorderedlist.html you like, then it will look like the image below:



Now you understand the difference between an ordered list and unordered list, you can combine the two so that could be interesting.

Learn while they have the time, before you get old and lose the opportunity to explore your talent!. May be useful :-)


Ordered list, Have you ever heard (Basic HTML)

You must be familiar with what you will learn in the article HTML this time. Have you ever heard the term ordered list? Or you must have made ​​a list of sequences, such as: timetable, a list of values ​​or a list of places to eat in the food menu.

Basic HTML element in ordered list or a list of sequences that will be discussed this time, this element has the attribute that start and type. Start serves to demonstrate how the ordered list was started, whereas the type attribute is used to select the type of order. like start = "1" & type = "1" then it will use a sequence starting from the decimal numbers 1,2,3 ... and so on, if the attribute type using Roman numerals I or i then that will be displayed is also the Roman numeral sequences, both figures roman large or small.

To make ordered list (ol) can also use the alphabet A or a B, but by default for the attribute start = "1" and type = "1". to make ordered list contained element must also list item (li). example:


<ol start=”1” type=”1”>
<li>…</li>
<li>…</li>
</ol>

And to clarify please you open notepad or your editor software and write this script:



Save the file name Orderlist.html, In the browser window will display a list of the starting sequence number 1 and so on, you can display a sequence starting with the letter or Roman numeral changing / adding tags such as tag <ol> <ol start = "1 "type =" I ">.

By default it will display as shown below:


Similarly, this article the basic HTML orderlist in the material, I was glad to share his knowledge with you. Hopefully useful and keep smile! :-)

Element font, making the display more attractive (Basic HTML)

Still discussing the text formatting in learning basic HTML, this time you will be introduced to the elements and font attributes. What are the elements that exist in the font?

The font element consisting of text color, size and font type. Text color using the color attribute, you can use color to color name like "red", "green", "blue" or use the hexadecimal code (in full color knowledge you can learn through the Wikipedia site). Example: <font color="red"> ... </ font>

While to change the text size using the size attribute size in pixels, the default size that will be displayed in the browser is "3" pixel, it has been described in a previous article with the title Center & Basefont Lest Forgotten. Example: <font size="2"> .. </ font> will produce letter-sized 2 pixels, but when using the relative size (+ or -) as <font size="+2"> .. </ font> will produce letter-sized 5 pixels (the default value plus 2)

As for using a font face attribute, examples of the typeface such as Arial, Calibri, Courer new, and others (knowledge about the typeface / font you can learn on Wikipedia). Example: <font face="arial"> .. </ font>

And to clarify about the third attribute, you just wrote the script below:


The result will be as shown below:



Ok, I think enough about the font element and ends are the various text formats are discussed. But for basic HTML is still much to be you know.

My message "Do not tire of learning what you like! If you feel bored, remember that what you learn today will be useful for your future ". So keep the spirit! :-)
Good work!

Center & Basefont Lest Forgotten (Basic HTML)

This time we will understand how the center element works in web browsers. The center element is used to display the text in the middle of the web page. Tag element is <center> center with a closing tag </ center>. For more details, we just write the script below:

The result will be as shown below:


Much different from BASEFONT element size, element base is used to change the font size to be displayed in a web browser page. This element does not have a closing tag, an attribute that is used is the size that is the value of the font size, the default size is displayed in the browser is "3" pixel. The size starts from "1" to "7" pixels or relative size (+ or -). For more details, you wrote the following script:



The result will be as shown below:


Of you have learned about this HTML article, you should be able to creation your own simple web interface. Continue to learn and improve your skills, then you will get what you dream. Keep the spirit and hopefully this article useful. amen

3 + Text Format All you have to know (Basic HTML)

You must be familiar about using this text format, what is it?. I give a clue, this format is used to mark a word that indicates that this word is important, what?.

Never seen or heard of the term bold writing (writing in bold), italic and underline? This is what we will learn in this article. In HTML there are also tags that we can use to indicate a word or phrase that is important to note. Tags include:
  • <b> To Bold -> Used to make an appearance in bold words, closing tag </ b>
  • <i> For Italic tag -> In order for a word or phrase in italics, closing tag </ i>
  • <u> Tag to underline -> This will make the bottom line of the printed word, closing tag </ u>
For more details, we direct the practice of it, OK? In order to learn more interesting you can incorporate what you have learned in previous articles HTML. You write the following script:


The result will be as shown below:



Also, there is the html tag is used to display the text as it is as it is written in your editor software. This is called the preformatted text tag, the tag <pre> the closing tag </ pre>. Still confused? Note the following script:

Would look like this:


For the next article about HTML you will get to know about the element center and BASEFONT size.
See you again and keep the spirit!

Heading? like you ever learn it (basic HTML)

Further to the text in HTML format, now you will know heading. What is it heading? Heading is a text format that is usually used for the title of an article or other papers, or more specifically the title of a paragrahp.

Heading has six levels, starting from H1 to H6 which has a font size and bold. Starting from the largest font size (H1) to the smallest (H6). For more details, you just copy & paste the following script:



The result will look like the image below:


Heading also has the same attributes as tags <p> (paragraph) on the article with the title format text, line breaks and paragraphs (HTML), which has a value that is align "left" (the default), "center" and "right".

Note: The default here means without giving the value of "left" in the text we will show, the text will be positioned on the left.

Looks like we've gone a bit far, but need a bit of patience because the next article is discussing about text formats. See you in the next article about basic HTML.:-)
Good work!

Format text, line breaks and paragraphs (HTML)

Continue to learn html? Well now you will learn how to replace the line. Little about the line break tag element tag called tag <br> (line break), this element will be written after the sentence is replaced row. You need to know also that this element does not have a closing tag. Us directly to the examples:


The result will be like this:


As for the element paragragh <p> used to replace the paragraph that will be followed by a blank line at the beginning and end of the paragraph, this tag has a closing tag is </ p>. <p> tag also has the align attribute which has a value of "left", "right", "center" which indicates the position of horizontal edges, by default this attribute value "left". example:


The result will be as shown below:


Already know how yet? If you do not understand try reading again from the top. If there are not clear just ask via the comments box or via email should also. Well for the next HTML article we are still discussing the text format. May be useful

How to Decorate Web Pages (HTML Basic)

In the article entitled "Interested in learning web design, HTML first identify" you are acquainted with HTML, now you will be creative decorating web pages, but step by step while learning about text formats. And this time you will get acquainted with the existing attributes in the body tag.

In the body there is a name tag attribute, this attribute is used to make web pages look more attractive, slowly we will get acquainted with them. Attribute that is in the body tag, such as:

  • Bgcolor = "" (used to create web background color as you wish, for example: <body bgcolor="green"> or <body bgcolor="#008000">
  • Background = "" (to show the form background image) example: <body background="./image/IMG-AA0216.jpg"> (. / Image / enjoy.jpg is the name of the directory / folder where you save the image to be displayed)
  • Text = "red" (used to give color to the text that will be displayed on the web page)

Immediately, you write the following script:

Will display as shown below:


Background display if attribute not found:


Note: bgcolor = "green", useful when the background attribute (picture) was not found. The web page will use green or green background.
May be useful!

Interested to Learn Web Design, First Identify HTML


HTML (Hypert Text Markup Language) is a basic lesson that should be known to those of you who are interested to learn to create Web Design. HTML is a collection of scripts that are stored in text format and contains the specified tag commands, those commands will be executed by the web browser.

Writing structure as follows:

<html>
<head>
Title <title> Web </ title>
</ head>
<body>
The content of the web that you created
</ body>
</ html>

From the above structures can be noticed that the writing of tags (the text in the form of two special characters "<" and ">") consists of three parts.

Example: note the title tag writing structure above, <title> an opening tag, and "Title Web" is the tag contents while the closing tag is </ title>. In order to know more details you just try the example below:



And here's the result:


HTML tags are usually paired writing and in the writing must not overlap. such as:

<tr>
          <td>
          </ tr>
</ td>

Right:

<tr>
         <td>
         </ td>
</ tr>

Now I will explain one by one about the structure of the script above:
  • <html> ... </ html>: to declare to the browser that the script used to use HTML
  • <head> .. </ head>: Head of HTML
  • <title> .. </ title>: This tag is located between <head> tag and </ head>, is used to display the title in the browser.
  • <body> .. </ body> tag: This tag is the content of the HTML, it contains everything that will be displayed on the web page. Located between <html> tag and </ html>, under <head> tag and </ head>.
May be useful, and if there is criticism or suggestions or perhaps something to ask. Please fill in the comments or via e-mail can be. thanks

Make Input Form with Checkbox – PHP


In using of checkbox, we can choose more of one choice. Below is example from order form of foods by using checkbox. Save with file name is in-checkbox.php (in checkbox = input checkbox).

<head>
 <title>Checkbox</title>
 </head>
 <body bgcolor="yellow">
<FORM ACTION="pro-checkbox.php" METHOD="POST" NAME="input">
<h3>Pesan Makanan disini :</h3>
<input type="checkbox" name="menu1" value="Bakso" checked> Bakso<br>
<input type="checkbox" name="menu2" value="Mie Ayam"> Mie Ayam<br>
<input type="checkbox" name="menu3" value="Soto Ayam"> Soto Ayam<br>
<input type="checkbox" name="menu4" value="Soto Babat"> Soto Babat<br>
<input type="submit" name="pilih" value="pilih">
</FORM>
 </body>
</html>

Input Form

For process file below, save with file name pro-checkbox.php (pro-checkbox = process checkbox)

<body bgcolor="yellow">         // Tag body need not to write, writer use the tag just
</body>                                // page browser looked more interesting
<?php
         if (isset($_POST['pilih'])) { 
                    echo "Makanan pesanan kamu :<br>"; 
         if (isset($_POST['menu1'])) { 
                    echo "*" . $_POST['menu1'] . "<br>"; 
         } 
        if (isset($_POST['menu2'])) { 
                    echo "* " . $_POST['menu2'] . "<br>"; 
        } 
        if (isset($_POST['menu3'])) { 
                    echo "* " . $_POST['menu3'] . "<br>"; 
        } 
        if (isset($_POST['menu4'])) { 
                    echo "* " . $_POST['menu4'] . "<br>"; 
        }
}
?>


Process Form

Are your post error?



When I changed template on my blog, I was surprised because almost all article of my blog error. In my post appears word “Normal 0 false false...”, because it must a cut of my post appear on auto readmore. I think it happened because I changed the template, what I supposed to do? The template was so nice. It was pity if I have to change?

I think “is there other way?” then I ask grandfather (Google) “what cause it?”. Why my post was error? Because you copy and paste from Ms. Word directly. Format that contented in Ms. Word was different that there was in blogger. Calm down! It is not only you that have problem like that, your old brother (other blogger) too. Almost of them do the same wrong. (Lough)

So how what the solution grandpa? Be patient! My grandchild:

1. Block and change the format:

Block your letter of post, remove or format then change format of post with format that content in blogger. If done, try refreshing your blog page.

Note: this way only success in some post, because format of Ms. Word still left behind the blog.

2. Move your articles

Edit letter of post (copy & paste) move on notepad, while picture was deleted. Then click html (edit html) in blog, it was really right that format of Ms. Word left behind blog. Directly I block & delete it. Then I click compose, copy article in notepad and upload picture, the last click update.

Note: because notepad use standard format, so still can received by blog.
The problem have done, next when I intend to post my articles I wright directly from blogger or I create article on notepad then copy & paste on blogger. So the problem will not happen again. Thanks

SanDisk Extreme 32 GB SDHC Class 10 UHS-1 Flash Memory Card 45MB/s (SDSDX-032G-X46)

Fix Eror Timezone PHP


When I was learning PHP until how to showed time on browser, there was warning like writing bellow. The warning straight on appeared when I wanted to show time. Why like that? Really, it happened because the time zone setting on PHP different with my location.

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in C:\websites\belajar-php\hari.php on line 6
January 26, 13

Process of learn is really full of obstacle, if not about limited of time usually because of the material. Yeah, that’s why learn is interesting and how very happy when we can solve the problem, can’t we?

After day on alternate week I traid to solve the problem, I finally success. Version of PHP in my computer use time zone ‘UTC’, while I am in Indonesian. Then I wrote script bellow when I would show the time.

Script : 

date_default_timezone_set('Asia/jakarta');
$script_tz = date_default_timezone_get();

Like script bellow:




Before
After

Actually there are many way to solve it, now that is your job to find it. (Lough)
Good luck!

Learn diligently! While you still have time, before you too old and lose your chance for excavate your talent!