Home » » Belajar HTML dalam 20 Menit

Belajar HTML dalam 20 Menit

Written By Unknown on Wednesday, December 12, 2012 | 9:54 AM

HTML Dalam 20 Menit
(by Edi Wibowo ©2011)
Cara Membuat File HTML:
Anda hanya perlu tahu perintah HTML ada beberapa (tag) untuk membuat file yg "dipasang" di Web. file-file ini dapat dibuat dengan Microsoft Word® atau notepad. file yg sudah siap harus menyimpannya sebagai file teks dan berekstensi htm atau html (contoh, belajar.html atau belajar.htm). Htm memberitahu browser web Anda bahwa ini adalah dokumen yang dibuat untuk Web.
Tag HTML Yang Diperlukan
(perhatikan)
Urutan dari file HTML harus terlihat seperti ini:
<html>
<head>
<title>Nama dokumen yg muncul pada judul</title>
</head>
<body>Informasi yg ingin ditampilkan pada halaman
</body>
</html>

Dalam tag <body>(perintah), Anda dapat menggunakan tag HTML lain untuk menambah gambar dan / atau suara, menghubungkan halaman Anda ke halaman lain (URL) di Web, sorot teks dengan huruf tebal atau italicizing itu, atau mengubah ukuran font. Perhatikan bahwa semua tag harus dipanggil dengan mengetikkan tag antara dua kurung (i.e., <body>). Ketik tag dalam kurung lagi dengan sebuah garis miring di depan (i.e., </body>) untuk meniadakan efek.
Dasar Perintah HTML
(untuk digunakan dalam <body> file):

<p>teks yg ingin anda ketik</p>
Buat paragrap (buat satu spasi antar baris)

<i>teks yg ingin anda ketik</i>
Perintah teks italic

<b>teks yg ingin anda ketik</b>
Perintah teks yg di bold

<blockquote>teks yg ingin anda ketik</blockquote>
tempat teks yg anda kutip dari web dokumen--teks akan indentsi

<pre>teks yg ingin anda tulis</pre>
format asli/indentasi dr teks yg anda masukan

<strong>teks yg anda ketik</strong>
teks bold antara tag

<center>teks yg anda ketik</center>
perintah teks center

<blink>teks yg anda ketik</blink>
Perintah teks berkedip

<font size=3>teks</font>
ganti ukuran teks--7 adalah yg terbesar dan 1 yg terkecil (satu-spasi)


<h1>

teks yg anda ketik

</h1>
Text muncul dg font terbesar (dua-spasi)

<h6>
teks yg anda ketik
</h6>
Teks muncul dg font terkecil

ada <h2> melalui tag <h5> tersedia ukuran font antar <h1> dan <h6>--coba dg ukuran yg paling cocok untk anda.
<body>
untk membuat warna latar/pola
dimana anda menemukan kode website (contoh., #FF0000=red) untuk latar/warna teks: Latar belakang
<body background="small.gif">
Banyak website penyedia gambar latar (contoh., "small.gif") gratis untuk download. tiga situs favorit saya:
Background Images I
Background Images II
Background Images IIIAlamat URL kadang berubah, cek secara berkala untk memastikan mereka msh aktif!
Anda jg dpt meng-copy gambar latar dr web lain.syaratnya anda menggunakan PC (tekan kanan pada mouse dan simpan gambar!).
<body>
Ini akan merubah smua teks dokumen dg warna merah
<font color="#FF00FF">
Ini akan merubah warna teks menjadi magenta</font>


MEMBUAT DAFTARdaftar bukan perintah
<ul>
<li>Ini adalh tag untk buat daftar bkn perintah
<li>setiap yg anda ketik setelah tag <li> akan muncul disamping halaman web
<li>teks ini akan muncul disebelahnya lagi
</ul>
DAFTAR PERINTAH
<ol>
<li>Ini adalh tag untk membuat daftar perintah
<li>setiap yg anda ketik setelah tag <li> akan muncul disamping nomor web halaman
<li>Ini akan muncul di nomor "3" dalam halaman web
</ol>
Daftar Deskriptif (contoh)
<dl>
<dt>Tag untuk menciptakan judul pertama dari daftar deskriptif Anda
<dd>Ini adalah item pertama di bawah judul pertama dari daftar
<dd>item lain dalam daftar di bawah judul yang sama
<dt> Ini adalah gelar kedua dalam Daftar deskriptif anda
<dd> ini adalah item pertama di bawah judul kedua dalam daftar deskriptif Anda
</dl>
Perhatikan bahwa Anda mungkin "salah" daftar - yaitu, membuat daftar bkn perintah dalam perintah daftar, dll


Membuat Tables
berguna untuk memasukkan tabel pada halaman web Anda. .berikut adalah few dasar membuat tag table.
<table border>Ini adalah tag untuk membuat tag table
<tr>Ini tag untk baris table
<td>Ini adalah tag untk buat kotak dlm baris</td>
<td>Anda blh buat du atau lebih kotak dlm tiap baris.</td></tr>
<tr>Ini adalh tag untuk table baris kedua
<td>Ini adalah tag kotak pertama pada baris kedua</td>
<td>Ini adalah tag kotak kedua pd baris kedua</td>
</tr> </table>
tag HTML lainnya dapat digunakan dalam setiap kotak untuk memformat teks Anda. Pada titik tertentu Anda mungkin ingin memiliki kontrol lebih besar atas batasan atau jarak table Anda. Lihat salah satu tutorial banyak di Web. Melakukan pencarian dan masukkan kata kunci "tutorial HTML."
<hr> Tempatkan bayangan garis pd halaman web


<br>Tulis pd akhir garis untk memulai baris (contoh)
Perhatikan bahwa tdk ada tag "end" (yaitu, tidak ada </hr> atau </br>) dengan tags.

Membuat Link
<a href="http://www.ryzkyrf.blogspot.com">Homepage</a>
Ketik URL atau file ke mana Anda ingin menghubungkan Antara tanda kutip! Dalam contoh ini "Homepage" akan muncul dengan warna biru atau warna lain pada halaman web, sehingga menandakan bahwa ada link hypermedia sini!
Contoh: <a href="http://www.facebook.com">FB</a>
Teks Yang akan muncul dengan warna biru pada halaman web adalah: "FB"
Jika anda klik maka anda di arahkan ke beranda facebook!
Untuk buat link email:
<a href="mailto: ryzkyrf@mhc.mtholyoke.edu">ryzkyrf</a>
(Jika anda klik ryzkyrf maka anda diarahkan ke bentuk email)

Gambar
<img src="MHCSeal.gif">
Ketik tag diatas akan menempatkan gambar yg di sebut "MHCSeal.gif" dalam halaman web.anda jg bs membuat gambar anda sendiri atau meng-copy dr halaman web (selanjutnya di bawah ini). By the way: GIF singkatan dr "Graphics Interchange Format" dan JPEG singkatan dr "Joint Photography Exchange Group."
Anda dapat menyalin gambar yang Anda lihat pada halaman web lain dengan menempatkan mouse pada gambar dan menekan. Sebuah kotak dengan berbagai pilihan, salah satunya adalah menyimpan gambar, akan muncul di layar. Menyimpannya sebagai file dan Anda kemudian dapat memasukkan (gambar) ke dalam file HTML Anda sendiri! Ada juga ikon banyak / situs gambar di Web. Tiga dari arsip yang lebih baik (IMHO) adalah:
Image Archive I





Image Archive II
Image Archive III
Jika Anda tidak dapat menemukan gambar di sini (! termasuk gifs animasi), maka Anda harus melakukan pencarian di Web untuk mengakses situs tambahan yang tak terhitung jumlahnya di mana orang baik telah mengumpulkan gambar untuk Anda untuk digunakan pada halaman web Anda! Pastikan untuk memberikan kredit yang diperlukan untuk orang yang menciptakan citra (hal ini tentunya hal yang sopan untuk dilakukan --> etikat!).
By the way: Anda juga dapat melihat kode HTML orang lain dengan mengakses "sumber dokumen" di bawah " lihat "pada menu browser Anda kemudian dapat copy, dan paste kode ke dalam file HTML Anda
Untuk CENTER dlm halaman web anda (tanpa teks yang menyertai):
<center><img src="mhc.gif"></center>
Jika Anda ingin menyelaraskan teks dengan gambar atau grafis pada halaman web Anda (lihat di atas misalnya dengan gambar MHC!), ada beberapa tag Anda dapat gunakan:
<font size=1>Your text goes here</font><img src="MHCSeal.gif" align=right>
Anda dapat mengganti atas, bawah, kiri atau tengah untuk kanan, dan teks dan gambar akan ditampilkan sesuai. Perhatikan bahwa beberapa teks Anda dapat dipindahkan tergantung pada ukuran font atau gambar yang telah Anda pilih.

File Suara
You can also link sound files pada halaman web anda. anda jg bisa merekam suara anda sendiri (menggunakan program seperti SoundEdit®--lihat contoh 1), atau link file suara pd situs lain (contoh 2).
Contoh 1: Ini adalah sebuah <a href="willkommen.au"> ucapan</a> di Jerman!
Contoh 2: <a href="http://www.dfki.uni-sb.de/imedia/herzog/noise/willkommen.au"> Ucapan jerman!</a>
Untuk menemukan suara dlm bahasa jerman anda bisa ikuti link ini
(http://de.altavista.com/searchaud?stype=saudio) dan melakukan pencarian untuk kata atau kata-kata yang Anda ingin masukkan pada halaman Anda. Pastikan bahwa Anda memiliki yang plug-in yg sesuai yang tersedia untuk memutar file suara! Jika Anda menggunakan Netscape 3.0® atau lbh tinggi, plug-in yg sesuai sdh siap terinstal.

Carakter Asing
Anda harus mengetikkan kode HTML khusus untuk menghasilkan karakter Jerman. Misalnya, jika Anda ingin könnenmuncul pada halaman web, Anda harus mengetikkan kata (dalam sebuah file HTML) seperti ini--> k&#246;nnen
Kode karakter untuk jerman adalah:
Ä = &Auml; (OR&#196;)
ä = &auml; (OR&#228;)
Ö = &Ouml; (OR&#214;)
ö = &ouml; (OR&#246;)
Ü = &Uuml; (OR&#220;)
ü = &uuml; (OR&#252;)
ß = &szlig; (OR&#223;)
Seperti yg disebut sebelumnya, setelah anda menghasilkan file HTML, simpan sebagai text dan berikan nama seperti "index.html". JANGAN LUPA EKSTENSI HTML DAN HTM! sekarang anda siap meng-upload file anda pada web!!!
Tag HTML yang telah saya jelaskan di sini adalah benar-benar yang paling dasar dan penting yang perlu Anda ketahui sekarang. anda bs mengembangkan sendiri kemampuan HTML anda Untuk gambaran yang lebih komprehensif HTML, lakukan pencarian untuk menemukan salah satu dari banyak tutorial di Web. Sebuah tutorial yang baik dapat ditemukan di: http://hotwired.lycos.com/webmonkey/authoring/html_basics/

Fitur dan lanjutan: Frames dan Forms
FRAMES:
Jika Anda ingin "membagi" sebuah halaman web menjadi "bagian" atau jendela, beberapa di antaranya akan tetap secara permanen di tempat dan lain-lain yang terkait dengan file HTML atau situs di Web, Anda harus belajar bagaimana untuk membuat frame. Mari kita lihat contoh file HTML yang akan menghasilkan frame:
<html>
<head>
<title>Practice with Frames</title>
</head>
<frameset rows= "30%, 70%">
<frame src= "frames2.html">
<frameset cols="30%, 70%">
<frame src= "frames1.html">
<frame src= "homepage.html" name="window1">
</frameset></frameset>
</html>
Di atas adalah kode untuk sebuah file HTML saya bernama "frames.html." Tertanam dalam file "frames.html" (yang adalah nama dari seluruh halaman web), Anda dapat melihat bahwa ada dua file HTML (disebut "frames1.html" dan "frames2.html"). Salah satu frame (jendela) terkait dengan sebuah file yang bernama "homepage.html." Ini berarti bahwa "homepage.html" akan muncul dalam bingkai saya bernama "window1." Mungkin lebih mudah jika Anda melihat tampilan grafik dari halaman ini:
 
frames2.html
f
r
a
m
e
s1.
h
t
m
l
ini disebut "jendela1"
Disini anda melihat bahwa halaman web dibagi menjadi tiga bagian yang berbeda - ada dua frame, masing-masing yang merupakan file HTML terpisah ("frames1.html" dan "frames2.html"); "window1" adalah nama saya diberikan ke frame di mana URL yang ditargetkan akan muncul. Halaman web ini juga dibagi menjadi 2 baris (baris 1 adalah di mana "frames2.html" tinggal; baris 2 adalah di mana "frames1.html" dan "window1" berada).Ada juga dua kolom dalam baris 2. Dalam kolom 1 kita menemukan "frames1.html" dan dalam kolom 2 kita menemukan "window1." Baris 1 merupakan 30% dari halaman dan baris ke-2 merupakan 70% dari halaman - dengan demikian, kita memiliki dalam kode HTML untuk frames.html "file . " Kolom 1 (di baris 2) mewakili 30% dari halaman dan kolom ke-2 (di baris 2) mewakili 70% dari halaman - dengan demikian, kita memiliki di kode HTML untuk file (halaman) "frames.html." Meskipun saya telah memilih untuk membagi halaman cara ini, Anda dapat menggunakan persentase lainnya (40%, 60% ATAU 50%, 50%, dll) tergantung pada bagaimana Anda ingin halaman untuk melihat dan seberapa besar Anda ingin baris dan kolom Anda untuk menjadi file HTML
("frames1.html," "frames2.html" and "homepage.html") bisa berisi tag HTML yg anda inginkan. Yang menyenangkan tentang menggunakan frame adalah Anda dapat menyimpan teks yang sama dalam satu atau dua frame dan memiliki isi dari frame ketiga(dalam contoh ini: "window1") .
Mari saya jelaskan bagaimana saya menggunakan frame untuk membuat sebuah halaman web untuk ditampilkan pd situs web saya. Dalam file HTML saya disebut "frames2.html," Teks saya telah dimasukkan ke dalam file ini adalah: learn html.
<html>
<head>
<title>frames1.html</title>
</head>
<body bgcolor="FF00FF">
<h3><ul>
<li><a href="http://www.ryzkyrf.hoszi.com" target= "window1">Ryzkyrf</a>
<p></p>
<li><a href="http://www.ryzkyrf.hostzi.com" target= "window1">Deutsch 209</a>
</body>
</html>
Dalam "frames1.html" dua situs web kelas saya terdaftar: Deutsch Deutsch 103 dan 209. Jika Anda mengklik Deutsch 103, "homepage.html" akan hilang dan situs web untuk kursus itu (yaitu, URL yang tercantum sebelumnya) akan muncul di "window1." Jika Anda kemudian klik Deutsch 209, situs web untuk kursus yang akan muncul di "window1." Itu semua yang ada untuk FRAMES! Jika Anda memiliki penggunaan yang baik bagi mereka, frame dapat menjadi penolong! Anda juga dapat menggunakan frame untuk menambahkan beberapa interaktivitas ke situs web Anda - yaitu, Anda dapat memiliki pertanyaan muncul dalam satu frame, maka jawaban dalam bingkai lain. Ingatlah bahwa Anda hanya dapat menampilkan frame jika Anda menggunakan Netscape 2.0® atau lebih tinggi!

0 comments:

Post a Comment

Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS