HTML - Horizontal Rule

Use <hr/> to create a horizontal line. THis tag is similar with line break.

<hr/> Use <hr/><hr/> With <hr/> Caution <hr/>

Display

Use With Caution

The horizontal line can be useful in different circumstances, like you can see
in the next example : a footnote.

<hr /> <p>1. "The Hobbit", JRR Tolkein.<br /> 2. "The Fellowship of the Ring" JRR Tolkein.</p>

Display

1. "The Hobbit", JRR Tolkein. 2. "The Fellowship of the Ring" JRR Tolkein.

As you can see, everything that this tag does is to draw a horizontal line
separating different parts of the content or it just decorates the page. Use
it with skill and it will give unexpected results.

References from http://www.tutorialehtml.com

Read More

Line break

A line break is different from the other tags that we have seen before. The place we put it in the source cod of the document, will end the line and it will go down with a line , letting a space which is smaller the the one from the paragraph. In the paragraph is used , as you can see, in the next example.

<p> Charles Brownstone <br /> Florida Street No 1 <br /> New York, USA <br /> </p>

Display

Charles Brownstone Florida Street No 1 New York, USA

 

As well it can be used for pointing out a signature , for example at the end

of a letter.

<p> Thank You,<br /> <br /> <br /> Charles Brownstone <br /> Vice-President </p>

Display

Thank You, Charles Brownstone Vice-President

References from http://www.tutorialehtml.com

Read More

HTML - Titles 1:6 (Headings)

In HTML, a title is exactly what it looks : a real title or a subtitle.When you put a text in a tag <h1> , the text will be bolded, and the dimension of the letter will be the same with the number of the heading. The titles can have dimensions form 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension.

<body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>

Display

You can see that every title has a linebreak before and after. Every time you put a heading, the browser will give automatically a space in the line before it and after as well.

You can see that every title has a linebreak before and after. Every time you put a heading, the browser will give automatically a space in the line before it and after as well.

---

HTML - Practical example

Lets take now an easy example and practice it for a bit so that the information will be understood totally. It would be recommended for you to get used to these terms before we go on.

<h2 align="center">HTML - Titles 1:6 (Headings) </ <p> A title in HTML is exactly what it looks : a real title, or a ... </p> <p> A title in HTML is exactly what it looks : a real title, or a ... </p>

Display

HTML - Titles 1:6 (Headings) A title in HTML is exactly what it looks : a real title or a subtitle.When you put a text in a tag <h1> , the text will be bolded, and the dimension of the letter will be the same with the number of the heading. The titles can have dimensions form 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension. A title in HTML is exactly what it looks : a real title or a subtitle.When you put a text in a tag <h1> , the text will be bolded, and the dimension of the letter will be the same with the number of the heading. The titles can have dimensions form 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension.

References from http://www.tutorialehtml.com

Read More

Paragraph's attribute

The paragraph is a base element in text editing.The tag for a paragraph is <p>.

He places a empty line above and under the text to make it evident, and the browser will take it as it is.

<p> The paragraph is a base element in ... </p> <p> This places a empty line above and ... </p>

Display

The paragraph is a base element in text editing.The tag for a paragraph is <p>. He places a empty line above and under the text to make it evident, and the browser will take it as it is

---

HTML - Paragraph, justify

Paragraphs can be edited almost the same easy way as in a text editor. The next example is made with the help of the justify attribute

<p align="justify">The paragraph is a base element in ...</p>

Display

The paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.

---

HTML - Centered paragraph

<p align="center">The paragraph is a base element in ...</p>

Display

The paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.

In this example every line of the paragraph has been centered in the middle of the giving back line.

---

HTML - The paragraph aligned to the right, right

<p align="right">The paragraph is a base element in ... </p>

Display

The paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.

All the lines of the paragraph had been arranged, in the upper example, to the right.

References from http://www.tutorialehtml.com

Read More

HTML attributes 1

The attributes are used to personalize tags. What do i mean ? Somehow , someday you want to resize a image or a table or to change a font color. All these are possible with the help of the attributes.
The most tags have their own attributes. We will talk about this as we include in our talking a new tag. But now we will talk about a set of generic attributes which can be used with the majority of the tags.

Attributes are putted between the angular brackets (<>) of the opening tag.

---

THe "class" and "id" attributes in HTML

These two attributes are mostly the same. They have no straight role in the formatting of the elements but they are useful behind the scene with the help of CSS. We will talk their role at the right time when we study their syntax and their function in CSS.

The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Take a look at the next example :

<p id="italicparagraph">Paragraph type 1, italic </p> <p id="boldparagraph">Paragraph type 2, bold </p>

Display

Paragraph type 1, italic Paragraph type 2, bold

---

HTML - The "name" attribute

"name" is a bit different from "id" and "class". If you give a name to an element this one becomes a script variable for Javascript, ASP and PHP. Something that is very often meet in formulations and other interactive text fields.

<input type="text" name="TextField" />

Display

This attribute has no effect over the display of the text box, even if in the background it plays a very important role.

---

HTML - "title" attribute

This attribute is used rarely . He adds a title (a pop-up) to every element`s content. This attribute should not be forgotten. You can name almost everything however you want. The visualization appears when you need to stop with your mouse for a few second above the content.
 

<h2 title="I am a title attribute!!">A random title</h2>

Display

A random title

Pass with your mouse over the upper title so that you see the magic of the"title" attribute.This attribute will give yo your site a bit of interaction for those who visit you. Do not pass over this detail.

---

HTML - "align" attribute

If you want to align in a different way some elements of your page then you have at your disposition the "align" attribute. You can align to the left, right or the center of the page almost every element. By default elements will align to the left, excepting when it is specified an other alignment.

<h2 align="center">Centered title </h2>

Display

Centered title

Other examples:

<h2 align="left">Title aligned to the left </h2> <h2 align="center">Centered title </h2> <h2 align="right">Title aligned to the right </h2>

Display

Title aligned to the left Centered title Title aligned to the right

---

The default values for the attributes

Most of the tags are attributed standard attributes. This means that if you do not specify an other attribute, the browser will do it for you. For example a paragraph will align by himself to the left, excepting when you specify in an other way; the same is with a table. As long as you practice you will understand many more things about the default values of some tags.

---

Generic attributes

You must keep in your mind that attributes are used to design the elements of
a web page. I have put here together some of the most commune attributes used in HTML :

Attribute	Options	Function
align	right, left, center	Horizontal alignment
valign	top, middle, bottom	Vertical alignment
bgcolor	numerical, hexadecimal, or RGB value	A background behind an element.
background	URL	An image behind an element.
id	Defined by user	Names an element which will be used with CSS.
class	Defined by user	Classifies un element which will be used with CSS
width	Numerical value	Specifies the width of a table, image or table box.
height	Numerical value	Specifies the height of an table,
title	Defined by user	"pop-up" a title for an element

References from http://www.tutorialehtml.com

Read More

Html tags

A browser read absolutely all you write in the HTML document. Tags have three parts as I said before, the opening, closing and content.

As you will learn there are hundreds of HTML tags. Absolutely all the elements that will be displayed by a browser need a tag or two.

<openingtag>Content</closingtag> <p>Paragraph</p>

Tags are written in small letters. This is the standard of writing in XHTML, and Dynamic HTML.

Above are some examples of tags in HTML.

<body> acts as a capsule on the content. <p>paragraph</p> <h2>Title (heading)< h2> <i>italic</ i> <b>bold</b> </body>

---

Exceptions - tags that do not require closing tag

There are some tags that do not meet the model shown above.The reason is that in fact these tags do not have content. Due to this fact we will use a modified manner of writing these tags.

The simplest example is "linebreak"

<br/>

This tag is combining the two tags, opening and closing.This way is more efficient to use. Line break is used to tell the browser that we want to get down a line below, but not closing paragraph.

Following this example, other tags have been modified to be write in a simpler and quicker way.

<img src="../img/image.jpg" /> -- Image Tag -- <br /> -- Line Break Tag -- <input type="text" size="12" /> -- Input Field --

Display

-- Line Break --

As you can see the browser is able to reproduce the image as long as we provide the location using the attribute "scr". More about this in the next tutorial.

References from http://www.tutorialehtml.com

Read More

HTML Elements

HTML elements have many ranks.All you see : paragraphs, ZiZix`s banner, the
navigation links from the left side and the right side , all are elements of this page.

An element has three parts : an opening tag, element`s content and an closing.

1. <p> - the tag that opens a paragraph
   
2. Element`s content - the paragraph itself.
   
3. </p> - the closing tag.

***Note:
All the web pages will have at least the base elements: html, head, title and body.

--------------------------------------------------------------------------------------------------------------------------

<html>element...</html>

An HTML document will always begin and end with a <html> tag and respective
</html>. This is the standard structure of an HTML.

Please open a Notepad and copy the next cod :

<html> </html>

Save the document from the File/Save As menu. Select All Files and name the new created file "index.html".Hit Save.Now open the file in a browser so that you have the possibility to refresh the page (F5).
If you did everything well you will be able to see your web page white !

--------------------------------------------------------------------------------------------------------------------------

<head> element

The <head> element is the one that is next. While you put in between html and body everything should be just fine."Head" has no visible function, so we will talk about this aspect in the next tutorials. Even though i want to mention that <head> can offer to the browser very useful informations.You can introduce here other cods like Javascript or CSS.

For the moment we will let the notions like that with the exception of the act that we introduce the next element from the list, but first lets take a look without him:

<html> <head> </head> </html>

If you save the document and try to refresh the initial page from the browser you will not see any difference. Just have a little patience, because next we will study some visible elements.

--------------------------------------------------------------------------------------------------------------------------

<title> element

So that every thing goes well you must put the title tag inside the head tag. what you write between those two title tags ( <title> and </title>) will be seen as browser`s name, usually in the upper right side. Next we have the source code:

<html> <head> <title> My first web page!</title> </head> </html>

Now save the file and open it in your browser. You will be able to see the title
in the upper left or right side as like the majority of the browsers.

You can put any name you want, just remember that the descriptive names are the ones that are easier to find later.

--------------------------------------------------------------------------------------------------------------------------

<body> element

The body element is the one that defines the beginning of the itself page`s content (titles, paragraphs, photos, music and any all the others).As you can see in the menu from the left, we debate one by one all these content elements.

For now all you need to keep in your mind is that body covers all the content of the page.

<html> <head> <title> My first web page!</title> </head> <body> Hey guys! Here we will put the content later ! </body> </html>

Now see what you have done, and after i invite you to see what is in the next section.

References from http://www.tutorialehtml.com

Read More

Instalasi Web Server Lokal

Web Server Local ( localhost ) adalah sebuah aplikasi yang memberikan fasilitas kepada penggunanya untuk dapat mengakses Local Hosting . Web server local yang akan digunakan untuk menjalankan script PHP pada aplikasi ini adalah XAMPP, XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket . Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server apache, PHP, dan MySQL secara manual. XAMPP akan meginstalasi dan mengkonfigurasikanya secara otomatis untuk anda atau auto konfigurasi . Untuk menginstall XAMPP lakukan langkah – langkah berikut ini :

·        Download XAMPP ! anda boleh download dari www.download.com lalu ketikkan kata “ xampp “ . Anda akan mendapatkan file installernya.

·        Klik ganda ikon xampp-win32-1.4.12-installer.exe ( atau versi lainya ) .

·        Setelah klik ganda pada installer tersebut , dan secara otomatis program akan menampilkan tampilan seperti Gambar 1.1 Klik Run.

Berikut ini adalah cara menginstall XAMPP.

• Jalankan file xampp-win32-1.4.12-installer.exe (atau versi lainnya)
• Kemudian akan tampil pilihan untuk memilih bahasa ketika proses instalasi berjalan. Silakan pilih  bahasa Indonesian atau English, kecuali anda menguasai bahasa lainnya.  Lihat Gambar 1.1

Gambar 1.1

•   Proses instalasi akan dimulai. Klik Maju untuk mulai. Lihat Gambar 1.2

Gambar 1.2

• Akan muncul lisensi software. Silahkan membacanya jika anda mau, tetapi saya lebih suka untuk tidak membacanya karena terlalu banyak. Klik Saya Setuju untuk melanjutkan. Lihat Gambar 1.3

Gambar 1.3

• Selanjutnya silakan anda pilih lokasi install untuk XAMPP. Kemudian klik install.  Lihat Gambar 1.4 

Gambar 1.4

• Tunggu  beberapa saat sampai proses instalasi  sampai selesai. Lihat Gambar 1.5

Gambar 1.5

•  Sampai tahap ini, berarti kita sudah menginstal XAMPP. Langkah selanjutnya adalah menjalankan servicenya.  Lihat Gambar 1.6

Gambar 1.6

• Jalankan XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs ->  apachefriends -> xampp -> xampp control panel.

• Nyalakan Apache dan Mysql dengan mengklik tombol Start. Buka web browser anda, lalu ketikkan http://localhost. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan xampp.

• Sekedar informasi saja, document root milik XAMPP terletak pada folder E:\Program Files\apachefriends\xampp\htdocs. Hal ini disebabkan karena saya menginstall XAMPP pada folder E:\Program Files\apachefriends

Read More

Elemen - elemen HTML

        HTML dibentuk dari elemen-elemen atau instruksi-instruksi yang diberikan kepada browser World Wide Web untuk melakukan suatu tugas tertentu (misalnya membuat teks menjadi tebal, menjadi miring, dan sebagainya). Kode-kode HTML ditulis dalam tanda ‘<’ dan ‘>’. Dalam HTML terdapat dua macam elemen yaitu open tag (tag terbuka) dan container tag (tag tetutup). Container tag menandai suatu bagian dari dokumen, dengan suatu tanda di awal dan suatu tanda di akhir, sehingga dapat diberikan suatu instruksi yang berfungsi membentuk dan memformat bagian dokumen tersebut.

Container tag memiliki awal dan akhir, yang masing-masing ditandai dengan kode yang serupa, kecuali tanda untuk bagian akhir diberi tanda ‘/’. Dilain pihak open tag tidak memerlukan tanda awal dan akhir. Open tag hanya mewakili suatu instruksi pemformatan seperti ganti baris, pemenggalan paragraph, dan sebagainya.

Contoh open tag dan container tag dapat dilihat sebagai berikut :

<TITLE> ini judul </TITLE> 
<B>ini dicetak tebal </B> 
<I> ini dicetak miring </I>
<U> ini dicetak garis bawah </U> 
<A HREF=”#bab1”>Lihat Bab 1 </A>

Read More

Pengertian HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah browser internet. Bermula dari sebuah bahasa yang sebelumnya banyak dipakai didunia penerbitan dan percetakan yang disebut dengan SGML (Standar Generalized Markup Language). HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Read More