Cara Mudah Belajar Tag Dasar HTML - HTML singkatan HyperText Markup Language, yang merupakan bahasa yang paling banyak digunakan di Web untuk mengembangkan halaman web.
HTML diciptakan oleh Berners-Lee pada akhir 1991 namun "HTML 2.0" adalah spesifikasi HTML standar pertama yang dipublikasikan pada tahun 1995. HTML 4.01 adalah versi utama HTML dan diterbitkan pada akhir 1999. Meskipun versi HTML 4.01 banyak digunakan Namun saat ini memiliki versi HTML-5 yang merupakan perpanjangan HTML 4.01, dan versi ini terbit tahun 2012.
- Hypertext mengacu pada cara di mana halaman Web (dokumen HTML) dihubungkan bersama. Dengan demikian link yang tersedia pada halaman web disebut Hypertext.
- Seperti namanya, HTML adalah Bahasa Markup yang berarti Anda menggunakan HTML untuk sekadar "menandai" dokumen teks dengan tag yang memberi tahu browser Web bagaimana menyusunnya agar ditampilkan.
Tag HTML
Seperti yang telah dikatakan sebelumnya, HTML adalah bahasa markup dan memanfaatkan berbagai tag untuk memformat konten. Tag ini dilingkupi kurung sudut <Tag Name> . Kecuali beberapa tag, sebagian besar tag memiliki tag penutup yang sesuai. Misalnya <html> memiliki tag penutup </ html> dan <body> tag tag </ body> nya .
Untuk mempelajari HTML, Anda perlu mempelajari berbagai tag dan memahami bagaimana perilaku mereka saat memformat dokumen tekstual. Belajar HTML itu sederhana karena pengguna harus mempelajari penggunaan tag yang berbeda agar bisa memformat teks atau gambar untuk membuat halaman web yang indah.
World Wide Web Consortium (W3C) merekomendasikan untuk menggunakan tag huruf kecil mulai dari HTML 4.
Tag Dasar HTML
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.
Tag Judul
Setiap dokumen dimulai dengan judul. Anda dapat menggunakan berbagai ukuran untuk judul Anda. HTML juga memiliki enam tingkat judul, yang menggunakan elemen <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6> . Sementara menampilkan judul apapun, browser menambahkan satu baris sebelumnya dan satu baris setelah judul itu.
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>
Tag Paragraph
Tag <p> menawarkan cara untuk struktur teks Anda ke dalam paragraf yang berbeda. Setiap paragraf teks harus masuk di antara tag pembuka <p> dan penutup </ p> seperti yang ditunjukkan di bawah ini pada contoh:
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut:<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Kapan pun Anda menggunakan elemen <br /> , apapun yang mengikutinya dimulai dari baris berikutnya. Tag ini adalah contoh elemen kosong , di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada yang masuk di antara keduanya.
Tag <br /> memiliki spasi di antara karakter br dan garis miring. Jika Anda menghilangkan ruang ini, peramban lama akan mengalami masalah saat membuat jeda baris, sementara jika Anda melewatkan karakter garis miring dan hanya menggunakannya <br> ini tidak valid dalam XHTML
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Ini akan menghasilkan hasil seperti ini:
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
You delivered your assignment ontime.
Thanks
Mahnaz
Content Center
Anda dapat menggunakan tag <center> untuk memasukkan konten apa pun di tengah halaman atau sel tabel manapun.
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Maka ini akan menghasilkan hasil seperti ini:
This text is not in the center.
This text is in the center.
Garis Horizontal
Garis horisontal digunakan untuk memecah bagian dokumen secara visual. The <hr> tag menciptakan garis dari posisi saat ini dalam dokumen untuk margin kanan dan istirahat garis sesuai.
Misalnya Anda mungkin ingin memberi garis antara dua paragraf seperti pada contoh yang diberikan di bawah ini:
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Maka menghasilkan hasil seperti berikut ini:
This is paragraph one and should be on top
This is paragraph two and should be at bottom
Sekali lagi tag <hr /> adalah contoh elemen kosong , di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada yang masuk di antara keduanya.
The <hr /> elemen memiliki ruang antara karakter hr dan garis miring. Jika Anda menghilangkan ruang ini, peramban lawas akan mengalami masalah dalam membuat garis Horizontal, sementara jika Anda melewatkan karakter garis miring dan hanya menggunakan <hr> itu tidak valid dalam XHTML.
Pertahankan Format
Terkadang Anda ingin teks Anda mengikuti format yang tepat tentang bagaimana penulisannya dalam dokumen HTML. Dalam kasus tersebut, Anda dapat menggunakan tag terformat <pre>.
Teks antara tag <pre> pembuka dan tag </ pre> penutup akan mempertahankan format dokumen sumber.
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Maka akan menghasilkan hasil seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
function testFunction( strText ){
alert (strText)
}
Nonbreaking Spaces
Misalkan Anda ingin menggunakan ungkapan "12 Angry Men." Di sini Anda tidak ingin browser membagi "12, Angry" dan "Men" Di dua baris:
CONTOH
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
Demikanlah Tutorial Belajar Tag Dasar HTML, semoga bermanfaat dan pastinya membantu. Jika ingin belajar HTML ke tahap berikutnya tunggu artikel selanjutnya tentang HTML.
Bagaimana menurut anda, Apakah sulit untuk mempelajari itu semua? Mungkin tidak jika kita latihan. Belajar tidak harus menghafal, karena dengan latihan terus itu juga cukup.