Asik asik kopi hitam: Belajar HTML

Showing posts with label Belajar HTML. Show all posts

Tuesday, 12 October 2010

Membuat Frames, dan pemanfaatan

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan.
Format:

<html>
<head>
</head>
<frameset>
<frame src>
</frameset>
</html>

Aturan penggunaan atribut ROWS dan COLS pada frameset adalah:

<frameset rows=â''tinggi_baris,tinggi_baris,â'¦â''>
<frameset cols=â''lebar_kolom, lebar_kolom,â'¦â''>

Atribut-atribut yang digunakan dalam FRAME adalah:

Atribut
FRAMESET COLS: Membuat frame vertikal dengan lebar kolom tertentu

FRAMESET ROWS: Membuat frame horizontal dengan tinggi baris tertentu

FRAME SRC: Memasukkan dokumen HTML ke dalam FRAME

NOFRAME : Memasukkan body teks untuk browser yang tidak dapat
menampilkan frame

Model-model frame dan contoh pembuatannya:

Untuk gambar lebih jelasnya klik saja gambarnya...

Saya update sedikit artikel ini...
Karena ada yang minta cara menggabungkan frame dengan data lain.

1. Buat 2 File dalam 1 folder.
2. File "Index" berisi frame, File "atas" berisi data yang ingin di gabung dengan frame.
3. Berikut Isi Kedua file nya.

File Index :

<frameset rows=119,*>
<frame name=judul atas src=atas.html>
 <frameset cols=60%,*>
  <frame name=kiri src=Kategory.html>
  <frame name=kanan src=awal.html>
 </frameset>
</frameset>

File Atas :

<marquee behavior="alternate"><font size=6 Face=arial 
color=GREEN>
SELAMAT DATANG DI WEB ARIF JAINURI</font>
</marquee><BR>

<br><marquee behavior="alternate"><font size=3 Face=arial 
color=blue>
WEB nya Anak RPL SMK Tanggul</font>
</marquee>

MAKA HASIL NYA:

Untuk mengubah kode-kode tersebut menjadi halaman web siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Membuat Tabel (Table) pada HTML

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

<TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut :
• align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• valign – mengatur bentuk perataan secara vertikal
• bgcolor – mengatur warna latar belakang (background) dari tabel.
• background – menentukan gambar yang digunakan sebagai background table
• color – Untuk mengatur warna suatu sel dalam table
• border – menentukan ukuran border tabel (dalam pixel).
• rowspan – menggabungkan beberapa baris
• colspan – menggabungkan beberapa kolom
• cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
• width – menentukan lebar tabel dalam pixel atau percent.
• height – Menentukan tinggi tabel

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
• align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor - warna latar belakang dari baris.
• valign - perataan vertikal : top, middle atau bottom.

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:
• align – untuk menentukan perataan kolom
• background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom.
• bgcolor – untuk menentukan warna latar belakang
• colspan - lihat gambar contoh
• height – untuk mengatur ukuran tinggi cell dalam pixels.
• nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan - lihat gambar contoh
• valign – untuk mengatur perataan vertikal: top, middle atau bottom.
• width – untuk menentukan lebar kolom dalam pixel atau percen.

CONTOH:

<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body background=backgrnd.gif>
<font face=arial size=2 color=maroon>
<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#0000FF">  </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr></table>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Contoh yang lain:

<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam 'Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

cara Menyisipkan Gambar/Images pada HTML

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah

Attribut yang dimiliki tag adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace.
Contoh :

<html>
<head>
<title>::: menampilkan images :::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
<img src="gambar1.gif" alt="ini adalah logo halaman pembuka" width=100 height=50>
<img src="gambar1.gif" hspace=10 vspace=5 align=right border=2> </font>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Hypertext Link

Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah.

Link ke Dokumen Lain

Untuk membuat link dengan target ke dokumen/halaman yang berbeda anda harus membuat dokumen yang dituju/target dan disimpan didirektori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.
Contoh:

<html>
<head>
<title>::: Link Dokumen Lain :::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<b> >> MENU << <br>
<a href=../index.html>H o m e</a><br>
<a href=profile.html>Profile</a><br>
<a href=album/index.html>Album</a><br>
<a href=Karya.html>Hasil Karya</a><br>
<a href=buku/index.html>Buku Tamu</a><br>
<a href=forum/index.html>Diskusi</a><br>
</b>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link ke bagian tertentu dalam dokumen yang sama anda harus memberikan nama anchor dan juga membuat link, sehingga perbedaannya dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan.Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:

<a href=â''#phpâ''> Ada apa dengan PHP? </a>
atau dapat ditulis lengkap:
<a href=â''belajar_php.html#phpâ''> Ada apa dengan PHP? </a>
dan untuk nama anchornya:
<a name=â''phpâ''>Ada apa dengan PHP?</a>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:
http://nama_URL.
Contoh:

<a href=â''http://arifjainuri.blogspot.com/â''>Blog aku</a>
<a href=â''http://www.smkpgri3-mlg.sch.idâ''>www.smkpgri3-mlg.sch.id </a>

Link ke Alamat Email

Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.
Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email ke dalam tag

<A HREF>

contoh

<A HREF="mailto:webmaster@smkpgri3-mlg.sch.id">Kirim email</a>

Link File yang akan didownload

Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen tersebut. Format penulisannya adalah

<a href=nama_file>

contoh

<a href=â''baru.zipâ''>Download baru</a>
<a href=â''baru.docâ''>Download</a>
<a href=â''php404.exeâ''>Download PHP</a>

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Pengaturan Teks Pada HTML

Ada banyak Pengaturan Teks Pada HTML
salah satu contohnya yang akan kita bahas adalah:

Preformatted Text:
<PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya.
Contoh

<html>
<head>
<title>the <pre> tag</title>
</head>
<body>
<h3>without the <pre> tag:</h3>


               here's
             some ditty
           specially done
         to lay it out all
       formatted and pretty.
     unfortunately, that is all
       this junk really means
          because i admit i
           couldn't scrawl
             poetry for 
               beans.
     <p>
<h3>with the &lt;pre&gt; tag:</h3>


     <pre>
               here's
             some ditty
           specially done
         to lay it out all
       formatted and pretty.
     unfortunately, that is all
       this junk really means
          because i admit i
           couldn't scrawl
             poetry for 
               beans.

</pre>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Extended Quotations:

: <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
Contoh:

<html>
<head> <title>::: Blockquote :::</title> </head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll.
</blockqoute>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

LISTS (Daftar)

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists:

<UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk bentuk lingkaran tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna hitam.
Contoh :

<html>
<head>
<title>::: Undordered List :::</title>
</head>
<body>
<b><font size=3 Face=tahoma color=blue>
Hobi saya adalah : </b>
<hr size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Ordered Lists:

<OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI>tag. Atribut yang ada pada Ordered List adalah TYPE dan START.

Contoh :

<html>
<head>
<title>::: Ordered List :::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan saya adalah : </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas PGRI Malang
</ol>
</font>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk attribut TYPE, dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists:

<DL>, digunakan untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.
Contoh :

<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

HORIZONTAL LINE

HORIZONTAL LINE

<HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.
Contoh:

<html>
<head>
<title>::: Membuat Garis Horisontal :::</title>
</head>
<body>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkn1tanggul.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

BASE FONT

<BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<basefont size=2 face="arial,helvetica" color="#ff0000">

Perhatian :
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
<B> </B> Bold text

<I> </I> Italic text

<U> </U> Underscore

<TT> </TT> Typewriter

<S> </S> Strikeout - draws a line through the text

<PRE> Preformatted Text

<DFN> Definition

<BLINK> Text berkedip (lebih baik jgn di gunakan)

<STRONG> Strong

<CITE> Digunakan untuk quoting text

<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat tekssuperscript

<SUB> membuat tekssub script

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam
italics.

Perhatian : Semua tag di atas ini membutuhkan tag penutup.

Untuk mengubah kode-kode tersebut menjadi HALAMAN WEB siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Kode-Kode HTML lainnya

Kode-Kode HTML lainnya:
Dalam HTML lumayan Banyak kode-kodenya untuk membuat sebuah halaman Web...
ni merupakan sedikit tentang Kode, kode tersebut:

A. PARAGRAPH BARU: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

B. LINE BREAK: <BR> Digunakan untuk pindah ke baris baru.

C. NO LINE BREAK: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
D. FONT: <font> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.

a. SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

b. FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

c. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font :::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Contoh lainnya :
<font size=2 face="times_new_roman" color="#0066cc">

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Wednesday, 1 September 2010

Membuat halaman Web menggunakan Notepad

Dalam artikel ini akan menjelaskan tentang bagaimana membuat sebuah halaman web secara sederhana menggunakan N0TEPADE..

Langkah pertama adalah membuka notepade, dengan cara:
klik "start" => pilih "aksesoris" => pilih "notepade"!

Atau klik kanan pilih ""

langkah kedua..
Masukkan kode-kode HTML anda pada notepad!

seperti pada gambar di bawah ini:
Untuk gambar lebih jelasnya klik saja gambarnya...

Langkah ketiga..
Setelah selesai anda memasukkan kode HTML anda ke notepade pilih "save as"
Dengan cara Klik "File" => "save as"
kemudian pilih lokasi penyimpanan!

Pada Kolom "Save as type" pilih ALL FILE

Lalu beri nama file ini dengan akhiran ".html"
contohnya:
nama file.html
kmudian pilih "save"

setelah selesai klik akun halaman web yg telah anda buat....
Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk membukanya:
klik 2 kali pada file tersebut..

maka telah jadilah sebuah halaman web!
Untuk gambar lebih jelasnya klik saja gambarnya...

itulah sedikit info yang kupunya,
untuk pertanyaan silahkan komentar dibawah ini.

TERIMA KASIH

Sunday, 18 July 2010

HEADING

<Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <h1> sampai <h6>, dengan <h1>; merupakan ukuran terbesar dan <h6>; merupakan ukuran terkecil.

<html>
<head>
<title>::: Heading Dokumen HTML :::</title>
</head>
<body>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>

maka hasi dari kode-kode diatas seperti pada gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Struktur Dokumen HTML

Struktur Dokumen HTML

Dewasa ini banyak tersedia program pembuat situs Web yang bersifat ‘drag and drop’ atau WYSIWYG sehingga orang mudah melupakan bahwa dasar dari semua halaman Web masih tetap tag dan kode HTML.

Di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

HTML yang merupakan kepanjangan dari Hyper Text MarkUp Language memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

File-file HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad
Untuk dapat membuat halaman Web yang heboh, kita tidak bisa hanya menguasai satu jenis perangkat lunak pembuat situs. Kadang kita perlu ‘membongkar’ halaman Web dengan mengutak-atik kode-kode yang membentuk halaman itu. Ini berarti kita paling tidak perlu mengetahui dasar-dasar HTML. Kedengarannya mungkin tidak terlalu membesarkan hati, tetapi HTML adalah bahasa yang sederhana dan menggunakan perintah-perintah logis.

Dengan mengikuti petunjuk-petunjuk sederhana, anda dapat membuat dokumen HTML yang pertama. Setelah mengetahui yang dasar, anda dengan cepat akan dapat menguasai langkah-langkah selanjutnya.

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html>
<head>
<title>Judul Form/Caption
</title>
</head>
<body>
ISI WEB
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...

Keterangan:
<html> .. </html>
Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah
file HTML.

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISI INDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

<body> ..</body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Tuesday, 12 October 2010

Saya update sedikit artikel ini...Karena ada yang minta cara menggabungkan frame dengan data lain.

Wednesday, 1 September 2010

Sunday, 18 July 2010

Saya update sedikit artikel ini...
Karena ada yang minta cara menggabungkan frame dengan data lain.