HTML5 #2 : Elemen HTML5
 |
| HTML5 #2 : Elemen HTML5 |
Dokumen HTML didefinisikan menggunakan elemen-elemen HTML / HTML elements.
Elemen HTML adalah semua yang terdapat diantara start tag sampai end tag.
ELEMEN <p>
Elemen <p> menawarkan cara lain dalam menstrukturisasi teks Anda.
<p>Ini adalah pargraf teks pertama</p>
<p>Ini adalah pargraf teks kedua</p>
<p>Ini adalah pargraf teks ketiga</p>
Maka jika dieksekusi di browser akan muncul seperti ini :
Ini adalah pargraf teks pertama
Ini adalah pargraf teks kedua
Ini adalah pargraf teks ketiga
PEMECAH BARIS / ENTER DENGAN ELEMEN <br/>
Kapanpun Anda menggunalan elemen <br/>, segala sesuatu yang mengikutinya akan ditempatkan ke baris berikutnya.Elemen <br/> merupakan sebuah contoh elemen kosong, dimana Anda tidak memerlukan tag pembuka dan tag penutup.
Anda dapat menggunakan beberapa elemen <br/>. Banyak perancang web menggunakan dua pemecah baris di antara paragraf teks menggunakan elemen <p> untuk menstrukturisasi teks, sebagai berikut :
Paragraf satu<p>
Paragraf dua<p>
Paragraf tiga<p>
Paragraf satu
Paragraf dua
Paragraf tiga
Meskipun dua elemen <br/> tampak sangat mirip dengan penggunaan elemen <p>, ingat bahwa XHTML markup dimaksudkan untuk mendeskripsikan struktur konten. Jadi, jika Anda menggunakan dua elemen <br/> di antara paragraf, maka Anda tidak sedang mendeskripsikan strukur dokumen.
Elemen <br/> seharusnya tidak dipakai untuk memposisikan teks, dan hanya digunakan di dalam apa yang dikenal sebagai elemen level-blok.
Elemen <p> merupakan sebuah elemen level-blok.
Berikut adalah sebuah contoh elemen <br/> yang di gunakan di sebuah paragraf.
<p> Ketika Anda ingin memulai sebuah baris baru, Anda dapat menggunakan sebuah elemen pemecah baris.
Jadi, kata <br/> selanjutnya akan di tampilkanpada baris baru. </p>
Contoh script di atas jika di buka di browser, maka akan tampil :
Ketika Anda ingin memulai sebuah baris baru, Anda dapat menggunakan sebuah elemen pemecah baris. Jadi, kata
selanjutnya akan di tampilkanpada baris baru. Sampai di sini anda mengenal elemen-elemen dasar yang dapat dipakai untuk memformat teks Anda. Sekarang, saatnya untuk mengaplikasikannya. Pada contoh ini, Anda akan menciptakan sebuah halaman untuk sebuah Kafe. Anda akan mengerjakan contohini secara bertahap pada artikel ini sampai terbangun secara menyeluruh. Halaman ini merupakan Halaman beranda untuk situs ini.
Buatlah file html di text editor anda (Notepad ++,etc) dan ikuti langkah berikut :
1. Keseluruhan skeleton dokumen : elemen <html>, <head>, <title> dan <body> :
<html>
<head>
<title>Kafe Programer - Kafe komunitas di Mataram, NTB, Indonesia</title>
</head>
<body>
</body>
</html>
Sementara itu, elemen <body> memuat bagian utama dari halaman web, bagian yang akan dilihat oleh pengunjung situs.
2. Halaman Anda akan memuat heading utama (level 1) dan beberapa heading level 2 untuk menambahkan stuktur pada informasi halaman :
<body>
<h1> KAFE PROGRAMER</h1>
<h2>Sebuah kafe komunitas yang menyajikan masakan rumah,berbahan lokal dan organik</h2>
<h2>Hidangan spesial disajikan di akhir minggu</h2>
</body>
3. Anda dapat melengkapi halaman dengan beberapa paragraf yang mengikuti heading :
<html>
<head>
<title> Kafe Programer - Kafe komunitas di Mataram, NTB, Indonesia </title>
</head>
<body>
<h1>KAFE PROGRAMER</h1>
<p>Selamat datang ke Kafe Programer. Situs ini akan dikembangkan secara bertahap.</p>
<h2>Sebuah kafe komunitas yang menyajikan masakan rumah, berbahan lokal dan organik</h2>
<p>Dengan pemandangan laut, Kafe Programer menawarkan lanskap menarik untuk
merelaksasi pikiran dan ide.</p>
<p>Menu kami menawarkan pelbagai sarapan, makan siang, dan makan malam,
termasuk beberapa pilihan vegetarian.</p>
<p>Anda juga bisa menikmati kopi panas, softdrink, dan jus sembari Anda menikmati
waktu bersama teman, keluarga, dan rekan programer lainnya.</p>
<h2>Hidangan spesial disajikan di akhir minggu</h2>
<p>Akhir minggu ini, sajian istimewa kami adalah HotDog Senggigi.</p>
</body>
</html>
4. Simpan fileter sebut dengan nama indeks.html dan kemudian buka web browser untuk mengamati hasilnya
contoh file indeks saat di eksekusi di browser
Sekian artikel ini, tunggu artikel selanjutnya tentang ELEMEN-ELEMEN PRESENTASI.
Belum ada Komentar untuk "HTML5 #2 : Elemen HTML5"
Posting Komentar