Materi HTML 3

Materi HTML 3
A. Cara Membuat Paragraf di HTML (tag p)

Untuk memahami cara pembuatan paragraf di dalam HTML, kita
akan menggunakan contoh struktur HTML yang dibuat pada tutorial
sebelum ini, dan menambahkan beberapa text. Silahkan buka
kembali text editor, lalu ketikkan kode berikut:
Contoh penggunaan tag paragraf:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Title dari Websiteku</title>
5 </head>
6 <body>
7 Ini adalah paragraf pertama
8 Ini adalah paragraf kedua
9 </body>
10 </html>
Save sebagai paragraf.html, lalu jalankan di web browser.
Kita akan melihat bahwa paragraf tersebut tidaklah berada pada

baris berbeda, namun berada pada satu baris yang sama.
Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya
menjadi :
Contoh penggunaan tag paragraf 2:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Title dari Websiteku</title>
5 </head>
6 <body>
7 Ini adalah paragraf pertama Ini adalah paragraf kedua
8 </body>
9 </html>
Kita harus memberi tahu web browser bahwa kedua kalimat itu harus
terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah
paragraf.
Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk membuat paragraf.
Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita
revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.
Contoh penggunaan tag paragraf 3:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>title dari websiteku</title>
5 </head>
6 <body>
7 <p>ini adalah paragraf pertama</p>
8 <p>ini adalah paragraf kedua</p>
9 </body>
10 </html>
Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah
berada pada posisi masing-masing. Setiap tag paragraf, web browser
akan memberikan spasi antar paragraf.
Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan
menggunakan tag <br> (br singkatan dari break).
Contoh penggunaan tag <br>:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 ini adalah paragraf pertama
8 <br />
9 ini adalah paragraf kedua
10 </body>
11 </html>
Jika kode HTML diatas dijalankan, maka hasilnya hampir sama

dengan menggunakan tag <p>. Namun pemisahan paragraf
menggunakan tag <br>bukanlah untuk membuat paragraf.
Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan
text lain. Jika yang kita butuhkan adalah struktur paragraf, maka
gunakan tag <p>.
Perhatikan penulisan tag <br>, tag break adalah salah satu dari
beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis
sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan
dari xHTML yang dianggap lebih rapi. Namun dalam standar
HTML5, penulisan <br> maupun <br /> tetap dianggap valid.
Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat
penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan
dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2
tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis
miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <p>ini adalah kalimat <em>pertama</em>,
8 sedangkan ini adalah kalimat <strong>kedua</strong></p>
9 </body>
10 </html>
Walaupun tanda spasi tidak akan dianggap dalam HTML, namun

untuk membuat kode HTML, menjorokkan (indent) beberapa baris
dalam suatu tag akan membuat kode mudah dibaca.
Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic)
untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf.
Pakar HTML yang mendukung pemisahan konten dengan tampilan
tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag
ini akan mempengaruhi tampilan dari HTML.
Tampilan halaman web seharusnya di tangani oleh CSS, bukan di
dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap
usang dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5,
tag <i> dan <b> kembali dianggap relevan.
B. Cara Membuat Judul / Heading di HTML (tag h1)
Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di
dalam HTML lebih di kenal dengan istilah: heading. Heading
dirancang terpisah dari paragraf. Tag Heading biasanya digunakan
untuk judul dari paragraf, atau bagian dari text yang merupakan
judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>,
<h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara
default akan ditampilkan oleh web browser dengan huruf tebal
(bold). Tampilan dari tag header juga dibuat bertingkat. Tag
header <h1> memiliki ukuran huruf paling besar,
sedangkan <h6> terkecil.
Berikut adalah contoh penggunaan tag heading di dalam HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>penggunaan tag heading</title>
5 </head>
6 <body>
7 <h1>ini adalah judul dengan h1 </h1>
13 </body>
14 </html>
Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan
beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut
adalah contoh struktur artikel HTML sederhana dengan menggunakan
tag <p> dan beberapa tag heading:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar HTML Dasar</title>
5 </head>
6 <body>
7 <h1>Judul Artikel</h1>
8 <p>.....pembahasan artikel.....</p>
9 <h2>Sub Judul Artikel 1</h2>
10 <p>.....pembahasan sub artikel 1.....</p>
11 <h2>Sub Judul Artikel 2</h2>
12 <p>.....pembahasan sub artikel 2.1.....</p>
13 <h2>Sub Sub Judul Artikel 2.1</h2>
14 <p>.....pembahasan sub sub artikel 2.1.....</p>
15 </body>
Dengan menggunakan beberapa tag heading dan paragraf, kita bisa
membuat struktur sederhana konten HTML.
Search Engine seperti Google akan memberikan nilai lebih untuk

heading. Biasanya semakin tinggi tingkat heading, semakin tinggi
pula penekanan search engine. Tag <h1> dianggap lebih bernilai dari
pada <h2>. Tag <h1>umumnya digunakan untuk judul sebuah
konten / artikel, sehingga dianggap dapat mewakili keseluruhan
artikel.
Selain terdiri dari paragraf dan judul, sebuah struktur artikel juga
perlu membuat daftar, atau dikenal sebagai list. Dalam tutorial
selanjutnya kita akan membahas tentang Cara Membuat
Daftar/List di HTML menggunakan tag <ol>, <ul> dan <li>.

Materi HTML 3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi HTML 3

Diunggah oleh

Hak Cipta:

Format Tersedia

Materi HTML 3

A. Cara Membuat Paragraf di HTML (tag p)

Kita akan melihat bahwa paragraf tersebut tidaklah berada pada

Tag Paragraf (<p>)

Tag Break (<br>)

Jika kode HTML diatas dijalankan, maka hasilnya hampir sama

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Walaupun tanda spasi tidak akan dianggap dalam HTML, namun

B. Cara Membuat Judul / Heading di HTML (tag h1)

Cara Membuat Judul (heading) di HTML

Berikut adalah contoh penggunaan tag heading di dalam HTML:

Search Engine seperti Google akan memberikan nilai lebih untuk

Anda mungkin juga menyukai