Belajar Online

membuat format text HTML

HTML mempunyai banyak element untuk memformat output, seperti bold atau italic text.
Dibawah ini terdapat beberapa contoh yang mungkin berguna

Examples
Text formatting
ini contoh yang memperlihatkan bagaimana anda dapat memformat text didalam document HTML.
Preformatted text
ini contoh yang memperlihatkan bagaimana anda dapat mengontrol line break dan spasi dengan pre tag.
"Computer output" tags
ini contoh yang memperlihatkan perbedaan dari computer output dengan .
Address
ini contoh yang memperlihatkan bagaimana caranya menuliskan alamat email dalam document HTML.
Text direction
ini contoh yang memperlihatkan bagaimana caranya menganti text direction.
Quotations
ini contoh yang memperlihatkan bagaimananya caranya manhandle panjang dan pendeknya quotations.
Deleted and inserted text
ini contoh yang memperlihatkan bagaimana caranya untuk menandai sebuah text itu dihapus atau di sisipkan kedalam document.
(image placeholder)
bagaimana caranya untuk melihat source HTML
cara untuk melihat source html adalah dengan mengklik tombol view pada toolbar browser anda lalu pilihlah bagian source. Nanti akan muncul sebuah window baru yang berisikan code HTML.

dait

Contoh untuk Deleted and inserted text

<html>
<body>

<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>

<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>

<p>
Some older browsers will display deleted or inserted text as plain text.
</p>

</body>
</html>

qu

Contoh untuk quatations

<html>
<body>

Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

Here comes a short quotation:
<q>
This is a short quotation
</q>

<p>
With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
</p>

</body>
</html>

td

Contoh untuk text direction

<html>
<body>

<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

al

Contoh untuk alamat

<html>
<body>

<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>

</body>
</html>

co

Contoh untuk "Computer output" tags
<html>
<body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p>
<b>Note:</b> These tags are often used to display computer/programming code.
</p>

</body>
</html>

pt

Contoh untuk Preformatted text

<html>
<body>

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

tf

Contoh koding untuk text formatting

<html>
<body>

<b>This text is bold</b>

<br>

<strong>
This text is strong
</strong>

<br>

<big>
This text is big
</big>

<br>

<em>
This text is emphasized
</em>

<br>

<i>
This text is italic
</i>

<br>

<small>
This text is small
</small>

<br>

This text contains
<sub>
subscript
</sub>

<br>

This text contains
<sup>
superscript
</sup>

</body>
</html>

Basic HTML tags

Tag HTML yang terpenting adalah tag yang menandakan bahwa itu adalah headins, paragraphs, dan line break.

Cara terbaik untuk belajar HTML adalah dengan tutorial-tutorial atau contoh-contoh source HTML.

Coba sendiri yah :D

<html>
<body>
<h1>The content of the body element is displayed in your browser.</h1>
</body>
</html>

contoh pertama.....

<html>
<head><title>contoh</title></head>
<body>
<ul>
<li>contoh1</li>
<li>contoh2</li>
<li>contoh3</li>
</ul>
</body>

contoh ke dua....

Headings Headings terdiri dari tag antara <h1> sampai <h6> . tag <h1> menandakan heading font terbesar. <h6> menandakan heading font terkecil.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML selalu secara automatis menempatkan baris kosong sebelum dan sesudah penempatan sebuah heading.

Paragraphs Paragraphs ditandakan dengan <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML secara automatis menempatkan baris kosong sebelum dan sesudah sebuah paragraphs terbentuk.

pemisah baris/ line break <br> tag digunakan ketika anda ingin mengakhiri sebuah baris, tetapi ini tidak akan memulai sebuah paragraphs baru.

<p>This <br> is a para<br>graph with line breaks</p>

<br> tag adalah tag yang kosong, oleh sebab itu tidak memerlukan tag penutup.

Komentar didalam HTML Tag komentar ini digunakan untuk menyisipkan sebuah komentar didalam source code HTML. sebuah komentar akan di hiraukan oleh browser. anda dapat menggunakan komentar ini untuk menerangkan koding anda, yang mana hal ini akan berguna untuk membantu ingatan anda tentang apa yg anda buat pada waktu nantinya.



Basic HTML Tags

Contoh2 didalam tag ini diambil dari w3schools

Tag Deskripsi

<html> : Menandakan sebuah dokument HTML

<body> : Menandakan/ menjelaskan bagian isi dalam HTML

<h1> to <h6> : menandakan/ menjelaskan header 1 sampai header 6

<p> : Menjelaskan/ menandakan paragrahs

<br> : Menyisipkan satu line break

<hr> : Menaruh satu garis horizontal

<!--> : Menandakan sebuah komentar

Element HTML

Dokumen HTML adalah file text yang dibuat dari element-element HTML

Element-element HTML adalah tag-tag yag digunakan dalam pembuatan HTML

Tag HTML

- Tag HTML digunakan untuk membuat mark-up element-element HTML

- Tag HTML selalu diapit oleh 2 karakter yaitu " < " dan " > "

- karakter2 yang mengapit tersebut biasanya disebut angle brackets

- bisanya tag html selalu ada awal dan akhir seperti <i> dan </i>

- kedua tag tersebut selalu ditampilkan untuk menandakan awal dan akhir dari command tag tersebut

- tulisan diantara/ didalam tag tersebut disebut isi dari element (element content)

- tag HTML tidak case sensitive, artinya jika kita menuliskan tag <ol> sama saja dengan menuliskan <OL>
masih inget koding ini ? namun coba liat ada sedikit penambahan dalam penulisannya

<html>

<head>

<title> page Percobaan 1

</title>

</head>

<body>

Hello World, ini adalah homepage pertama saya ini adalah homepage pertama saya

</body>

</html>

yang dimaksud sebagai element HTML yaitu;

ini adalah homepage pertama saya

masih inget koding ini?
element HTML diawali dengan tag pembuka : isi dari element HTML itu adalah : ini adalah homepage pertama sayaelement HTML ditutup dengan tag penutup :
tujuan dari tag untuk menunjuk element HTML agar bisa ditampilkan dalam bentuk bold

potongan koding dibawah ini juga termasuk element HTML :

<body>

Hello World, <i>ini adalah homepage pertama saya </i>

</body>

kenapa kita harus mengunakan huruf kecil dalam penulisan tag?
kita bisa mengatakan bahwa tag HTML itu tidak case sensitive, dalam artian sama dengan . tapi ketika kita surf suatu web tentang tutorial HTML, banyak diantaranya mengunakan huruf besar dalam penulisan tag HTML. dan kalian pasti mempertanyakan kenapa saya menuliskannya dalam huruf kecil?
jika kamu ingin mempersiapkan dirimu dengan generasi yang akan datang dalam HTML, kamu harus menggunakan huruf kecil dalam penulisan tag. soalnya W3C(The World Wide Web Consortium) merekomendasikan mengunakan penulisan tag dalam huruf kecil pada HTML 4 dan XHTML (yang bakal menjadi generasi terbaru HTML) yang akan berpatokan pada penulisan tag dengan huruf kecil.. jadi siapkan diri lo dari skrg :p

attribut dari tag

tag bisa mempunyai attribut. attribute digunakan untuk mempercantik tampilan dilayar browser kita. seperti contohnya kita mao memberi warna pada bagian isi / body, maka kita dapat menuliskan seperti ini: <body bgcolor="blue"> atau kita ingin mengatur margin dalam body dapat ditulis seperti ini: <body align="center">.

attribut selalu dituliskan didalam tag membuka didalam element HTML. yang dimaksud attribut tersebut adalah kata bgcolor / align, sedangkan nilai / value dari attribut tersebut yaitu; blue dan center. untuk nilai tersebut sebaiknya di masukkan diantara tanda kutip, untuk memperjelas nilainya.

Mengenal Dasar – Dasar HTML

Hmm…kenapa yah tiba-tiba gw buat ini? Sebenernya gw juga binggung sih, kyknya ini pembahasan dah basi banget..waktu kelas 2 smp gw dah bisa nih pake ginian (Uupss..Sombong nya keluar deh :p ). tapi gw rasa ini perlu buet org2 yang pengen belajar pemrograman yang berbasis web, soalnya ini dasar dari segala-galanya di dalam dunia maya. :D

HTML singkatannya Hyper Text Markup Language. HTML itu sendiri adalah file text yang berisi markup tag-tags yang simple2, markup tag itu sendiri kyk koding yang default buet komunikasi dengan web browser untuk seperti apa sih tampilan page yang diinginkan. trus kalo buet HTML bisa dengan notepad / dreamweaver / textpad / text editor lainnya asalkan bisa disave dengan extension htm / html (.htm / .html)

Cara paling mudah untuk mencoba buet diwindows sih tinggal klik start, pilih run ketik notepad. Kalo di mac tinggal pilih simple text (tapi gw kgk tahu letak simple text dimana, so bagi yg tau boleh tuh kasi koment biar gw bisa perbaikin nih tulisan :p )

Nah buet yang nga sabar mencoba gw kasih contoh kodingnya yah.

<html>

<head>

<title> page Percobaan 1

</title>

</head>

<body>

Hello World, ini adalah homepage pertama saya

</body>

</html>

Setelah copy / tulis koding ini simpan dengan nama apa saja namun dengan extension .htm / html. Trus buka deh file ini. Caranya yah gampank aja asalkan punya browser tinggal di klik aja filenya. Nanti juga muncul sendiri.

Oh iya lupa soal gaya penulisan ini, sebenarnya sih Cuma buet rapi aja, kalo misalnya lu mau tulis kyk “<html><head><title> dan seterusnya… “ maksudnya tulis semua koding ini 1 baris aja gpp kok, asalkan tag /tagnya jangan lupa aja ( maksudnya tag itu yg ada “<>” or “ </ >” ).

Sebelumnya gw jelasin dulu yah maksudnya apa tuh koding diatas.

<html> koding ini tuh tag yang buet kasi tahu ke browser kalo mulai dari tulisan ini udah menjadi bagian dari dokumen HTML. Dan diakhir penulisan pasti diberikan tag </html> buet kasih tahu ke browser kalo dokumen HTML itu abis sampai disitu.

Tulisan diantara <head> tag dan </head> adalah informasi tentang header, header informasi ini ngga bakal ditampilin didalam browser. Tulisan antara <title> tag dan </title> adalah judul dari dokumen yg kita buat. Judul ini akan ditampilkan di browser.

Tulisan didalam tags <body> & </body> adalah bagian isi yg akan ditampilkan didalam halaman page browser tersebut. Tulisan antara <b> dan </b> menandakan bahwa tulisan tersebut akan ditampilkan dalam bentuk bold font.

Belajar Online

Wednesday, July 12, 2006

membuat format text HTML

dait

qu

td

al

co

pt

tf

Basic HTML tags

Tuesday, July 11, 2006

Element HTML

Mengenal Dasar – Dasar HTML

About Me

Links

Previous Posts

Archives