Element Text didalam HTML
Cara paling dasar untuk menambahkan teks ke halaman web adalah elemen paragraf. Jika Anda telah mengikuti tutorial ini, Anda telah melihat elemen ini sebelumnya, tetapi perlu diulang, karena elemen paragraf adalah salah satu elemen HTML paling umum yang digunakan di sebagian besar situs web yang Anda kunjungi setiap hari.
<p>This is a paragraph</p>Secara default, setiap browser menempatkan sedikit ruang di atas dan di bawah elemen paragraf saat mereka menampilkannya, yang membuat setiap paragraf independen dari yang ada di sekitarnya, seperti paragraf yang Anda lihat dicetak dalam buku atau majalah.
Elemen Judul
Judul digunakan sebagai judul bagian dalam dokumen HTML. Secara umum, mereka harus menggambarkan konten yang mengikutinya. Ada enam tingkat judul ( - ) dan mereka dapat digunakan secara hierarkis untuk membuat beberapa tingkat sub-bagian dalam konten. Judul adalah elemen blok secara defaulth1h6
Seperti elemen paragraf, elemen judul juga digunakan untuk menampilkan teks di layar. Mereka umumnya digunakan untuk membuat judul bagian.
<h1>This is a heading element</h1>Misalnya, Anda mungkin menggunakan elemen judul untuk menampilkan judul esai yang sedang Anda tulis, atau nama bab dalam buku. Teks esai atau bab yang sebenarnya, di sisi lain, akan menggunakan elemen paragraf.
Elemen judul datang dalam enam tingkat default, melalui , yang dapat Anda anggap sebagai urutan kepentingan. Jika Anda meletakkan di halaman web Anda, misalnya, aman untuk berasumsi bahwa itu adalah judul bagian yang paling penting dan mungkin di bagian atas halaman Anda, sementara an sedikit kurang dan penting, dan seterusnya. <h1><h6><h1><h2>
Mereka juga datang dengan beberapa gaya browser default, yang memperkuat urutan kepentingan itu: elemennya adalah yang terbesar, yang lebih kecil, dan seperti itu.<h1><h2>
<h1>This is the biggest one</h1>
<h2>This one is a little smaller</h2>
<h3>This one is even smaller</h3>
<h4>They keep getting smaller</h4>
<h5>This one isn't even that big</h5>
<h6>Pretty small now, actually</h6>Contoh element text pembuatan Judul
Judul Level 1
Judul Level 2Judul Level 3
Judul Level 4
Judul Level 5
Judul Level 6
Element Text Paragraf
Paragraf (tag) digunakan untuk blok teks (seperti dalam tulisan). Paragraf adalah elemen blok secara default.p
Cara paling dasar untuk menambahkan teks ke halaman web adalah elemen paragraf. Jika Anda telah mengikuti tutorial ini, Anda telah melihat elemen ini sebelumnya, tetapi perlu diulang, karena elemen paragraf adalah salah satu elemen HTML paling umum yang digunakan di sebagian besar situs web yang Anda kunjungi setiap hari.
<p>This is a paragraph</p>Secara default, setiap browser menempatkan sedikit ruang di atas dan di bawah elemen paragraf saat mereka menampilkannya, yang membuat setiap paragraf independen dari yang ada di sekitarnya, seperti paragraf yang Anda lihat dicetak dalam buku atau majalah.
Daftar
Ada dua tipe daftar dasar—Daftar Tidak Berurutan dan Daftar Terurutkan. Secara default keduanya adalah elemen blok.
Elemen mewakili item daftar. Jika elemen induknya adalah elemen or, maka elemen tersebut adalah item dari daftar elemen induk, seperti yang didefinisikan untuk elemen tersebut.liolul
- Daftar dapat ditumpuk dalam daftar untuk membuat hierarki sub-daftar.
- Daftar Tidak Berurutan (ul)
Elemen ini mewakili daftar item, di mana urutan item tidak penting - yaitu, di mana mengubah urutan tidak akan secara material mengubah arti daftar. Secara default, item daftar dalam daftar yang tidak berurutan dilambangkan dengan simbol poin.ul
Contoh:
<ul>
<li>Bananas</li>
<li>Apples
<ul>
<li>Granny Smith</li>
<li>Braeburn</li>
</ul>
</li>
<li>Oranges</li>
</ul>
Maka akan seperti :
- Pisang
- Apel
- Nenek Smith
- Braeburn
- Jeruk
- Nenek Smith
- Braeburn
Meskipun bukan teks itu sendiri, elemen-elemen penutup diri ini menunjukkan jeda dalam aliran teks atau informasi. Dengan demikian, mereka masing-masing membawa makna yang sangat spesifik untuk konten tempat mereka ditempatkan.
Sekarang kita bisa peraktekan sendiri
Ikuti cara dibawah ini:
Buka file index.html dari proyek Tutorial Pemrograman GCF Anda di editor teks Anda, dan mari tambahkan beberapa elemen teks. Untuk pemahaman terbaik, pastikan untuk benar-benar mengetik kode ini, daripada menyalin dan menempelkannya.
- Ketika Anda pertama kali membuat file ini, Anda sudah memiliki satu elemen konten aktual di halaman. Pertama, temukan elemen itu:
<p>Hello, world!</p> - Silakan dan hapus elemen itu.
- Sebagai gantinya, mari kita mulai membuat sesuatu yang lebih seperti halaman web nyata yang mungkin benar-benar Anda lihat dalam kehidupan biasa: halaman web ulasan film. Mulailah dengan judul, dan pastikan untuk memasukkannya ke dalam elemen, di mana elemen Anda sebelumnya:
<body><p><h1>Cinema Classics Movie Reviews</h1> - Tepat di bawah itu, mari tambahkan sub-judul. Sementara judul pertama adalah judul utama dari seluruh halaman web Anda, yang satu ini hanya akan menjadi judul untuk ulasan Anda tentang hit blockbuster yang dibuat-buat:
<h2>Review: Basketball Dog (2018) < / h2>
- Sekarang mari kita tambahkan beberapa teks. Ini adalah daging asli dari ulasan Anda, jadi ada lebih banyak kata, tetapi perhatikan bahwa mereka masih hanya dibungkus dengan tag sederhana, satu untuk setiap paragraf terpisah. Tambahkan ini tepat di bawah elemen yang baru saja Anda tambahkan:
<p><h1><p>4 out of 5 stars</p> <p>From director Vicki Fleming comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p> <p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p> <p>Find the full cast listing at the Basketball Dog website.</p> - Mengingat bahwa dia adalah sutradara film, sepertinya "Vicki Fleming" mungkin nama yang paling penting dalam paragraf-paragraf itu, jadi mari kita buat berani untuk menarik lebih banyak perhatian padanya. Bungkus hanya nama itu dengan dan tag, seperti:
<b></b><b>Vicki Fleming</b> - Mungkin juga merupakan ide yang baik untuk membedakan peringkat bintang dari teks lainnya juga. Mari kita miringkan itu untuk memisahkannya. Bungkus hanya kata-kata itu dengan dan tag, seperti:
<i></i><p><i>4 out of 5 stars</i></p>
Setelah Anda melakukan semua ini, kode lengkap Anda akan terlihat seperti ini:
<html>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<h2>Review: Basketball Dog (2018)</h2>
<p><i>4 out of 5 stars</i></p>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the Basketball Dog website.</p>
</body>
</html>
Klik dua kali file index.html Anda untuk memuatnya di browser, dan Anda akan melihatnya. Halaman web Anda mulai terlihat sedikit lebih seperti halaman web yang sebenarnya!