.jpg)
Apa itu HTML?
HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web).
HTML singkatan dari Hyper Text Markup Language
Sebuah bahasa markup adalah seperangkat tag markup
Dokumen HTML dijelaskan oleh tag HTML
Setiap tag HTML menjelaskan isi dokumen yang berbeda
Contoh Dijelaskan
DOCTYPE deklarasi mendefinisikan jenis dokumen menjadi HTML
Teks antara <html> dan </ html> menggambarkan sebuah dokumen HTML
Teks antara <head> dan </ head> memberikan informasi tentang dokumen
Teks antara <title> dan </ title> memberikan judul untuk dokumen
Teks antara <body> dan </ body> menggambarkan isi halaman yang terlihat
Teks antara <h1> dan </ h1> menggambarkan judul
Teks antara <p> dan </ p> menggambarkan sebuah paragraf
Menggunakan deskripsi ini, web browser dapat menampilkan dokumen dengan judul dan paragraf.
Tag HTML
Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut:
<tagname> konten </ tagname>
Tag HTML biasanya datang berpasangan seperti <p> dan </ p>
Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac).
Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.
Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
Langkah 1: Buka Notepad
Untuk membuka Notepad di Windows 7 atau sebelumnya:
Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.
Untuk membuka Notepad di Windows 8 atau yang lebih baru:
Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad.
Langkah 2: Menulis Beberapa HTML
Menulis atau menyalin beberapa HTML ke Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Langkah 3: Simpan halaman HTML
Simpan file di komputer Anda.
Pilih File> Save as dalam menu Notepad.
Nama file "index.htm" atau nama lain yang berakhir dengan htm.
UTF-8 adalah pengkodean pilihan untuk file HTML.
ANSI encoding mencakup AS dan karakter Eropa Barat saja.
Langkah 4: Lihat halaman HTML di Browser Anda
Buka file HTML disimpan dalam browser favorit Anda. Hasilnya akan terlihat seperti ini:
Contoh Dasar HTML
Dokumen HTML
Semua dokumen HTML harus dimulai dengan deklarasi tipe: <! DOCTYPE html>.
Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </ html>.
Bagian terlihat dari dokumen HTML adalah antara <body> dan </ body>.
contoh :
<!DOCTYPE html>
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- Pos HTML(Besar kecilnya bentuk huruf)
Judul HTML didefinisikan dengan <h1> sampai <h6> tag dan setiap <h1> harus diakhiri dengan </h1>:
contoh :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
- Paragraphs HTML
Paragraf HTML didefinisikan dengan tag <p>:
contoh :
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
- Link HTML
Link HTML didefinisikan dengan tag <a>:
contoh :
<html>
<body>
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
Alamat link ditentukan dalam atribut href.
Atribut yang digunakan untuk memberikan informasi tambahan tentang elemen HTML.
- Images HTML
Gambar HTML didefinisikan dengan tag <img>.
File sumber (src), teks alternatif (alt), dan ukuran (width dan height) disediakan sebagai attributes:
contoh :
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
- Membuat Teks berjalan
<head>
<body>
<marquee><b>SILAHKAN DICOBA ???</b></marquee>
</body>
</head>
- Membuat Teks berjalan dari kiri ke kanan
<body>
<marquee align="center" direction="right" height="45"
scrollamount="2" width="70%">
HALLO APA KABAR ?
</marquee>
</body>
</head>
catatan penting :
Pada huruf / angka yang berwarna merah dapat anda sesuaikan menurut keinginan, kata "right" adalah perintah untuk menggerakkan teks ke arah kanan. Anda dapat merubahnya menjadi "left" jika ingin teks berjalan dari arah kanan ke arah kiri. Huruf "45" pada kode diatas adalah untuk mengatur ukuran tinggi bidang gerak teks, anda dapat merubahnya dan menyesuaikan menurut ukuran bidang gerak pada website / blog anda. Sedangkan huruf "2" pada perintah scrollamount adalah untuk mengatur kecepatan gerak teks. Semakin besar nominalnya maka kecepatan gerak teks akan semakin bertambah."70%" pada code width diatas adalah ukuran lebar bidang gerak teks. Anda bisa merubah prosentasenya sesuai dengan keinginan anda.
- Membuat teks berjalan ke kiri dan kembali ke kanan :
<head>
<body>
<marquee align="center" direction="left" height="50"
scrollamount="5" width="70%" behavior="alternate">
<b>Silahkan di Coba hasilnya ?</b>
</marquee>
</head>
</body>
- Membuat Teks berjalan / bergulir dari atas ke bawah atau sebaliknya :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="70%"
height="80" align="center">
<a href="http://www.amikom.ac.id" target="new">STMIK AMIKOM</a><br />
<a href="alamat blog anda" target="new">Tutorial Membuat animasi teks pada Blog</a><br />
<a href="alamat blog anda" target="new">apalah namanya</a><br />
<a href="http://alamat blog anda/sub blog " target="new">Tips</a><br />
</marquee>
Keterangan :
Teks pada contoh 6 di atas selain bergulir juga sekaligus dapat di koneksikan (link) ke alamat situs atau halaman lain. Anda tinggal mengganti huruf yang berwarna biru sesuai dengan yang anda inginkan. Jadi begitu teks tersebut di klik maka secara otomatis akan langsung menuju pada sourch yang di tuju pada tab baru.Sedangkan untuk membuat teks bergulir dari atas ke bawah, anda tinggal mengganti kode "up" yang berwarna merah menjadi "down"
SEMOGA BISA MENAMBAH ILMU DAN WAWASAN ANDA, TERIMAKASIH
Terima kasih yang sebesar-besarnya kepada dosen Mr. Barka Satya, M.Kom yang telah mengajarkan kami ilmu, sehingga kami bisa dalam pembuatan web dan http://www.w3schools.com/
Tidak ada komentar:
Posting Komentar