Selamat datang ! di blog kami dalam artikel belajar HTML ,entah anda secara sengaja datang kesini atau di arahkan mesin pencari,yang terpenting penulis ucapkan terimakasih telah berkunjung. Panduan di blog ini akan mengajarkan anda langkah-langkah dasar belajar HTML dan cara membuat struktur situs web pertama anda.

Itu berarti cara menata halaman HTML, cara menambahkan teks dan gambar, cara menambahkan judul dan pemformatan teks, dan cara menggunakan tabel. Jika anda seorang pemula yang ingin belajar HTML ,blog ini akan membantu anda secara praktis.

Dalam artikel ini, anda akan belajar HTML untuk pemula dan anda akan memiliki pengetahuan atau keterampilan untuk membuat situs web dasar dan penulis berharap ini akan menginspirasi Anda untuk mempelajari lebih jauh dunia HTML dalam panduan blog ini.

Apa fungsi HTML

HTML adalah pondasi utama dalam membuat situs web, seperti kita ketika membangun rumah memerlukan pondasi rumah agar kuat, HTML juga memiliki peranan penting dalam pondasi suatu situs web.

Tentunya, HTML tidak melakukan semua fungsi dalam web itu sendiri ,misalnya di kombinasikan dengan CSS, JavaScript dan bahasa lainya yang mungkin dalam artikel blog berikutnya.

Apa itu tag HTML

Tag biasanya digunakan untuk mengawali sebuah baris kode pada HTML dengan tag pembuka dan di akhiri tag penutup.
Contoh : <p> dan </p>

Buka teks editor anda dan tulis kode berikut:


				
								
						<!DOCTYPE HTML> 
< html  lang = "en" > 
  < head > 
    < meta  charset = "UTF-8" > 
    < title > Halaman Web Pertama Saya </ title > 
  </ head > 
  < body >
    <p>Hello world!</p>
  </ body > 
</ html >

Hasilnya :

Hello world!

Anda baru saja telah menjalankan struktur kode HTML sederhana, dibawah ini penjelasan tentang kegunaan tag struktur HTML di atas.

<!DOCTYPE HTML> - Hal pertama adalah deklarasi doctype dari dokumen. Dalam hal ini HTML5. Anda harus selalu menggunakan ini.
<html lang = "en"> - Semua yang dilakukan adalah mengatakan bahwa ini adalah awal dari dokumen HTML.
<head> - Menandai awal dari bagian dokumen HTML yang disebut head. Bagian ini tidak terlihat di halaman web tetapi membawa informasi penting tentang dokumen.
<meta charset = "UTF-8> - Deklarasi pengkodean karakter: UTF 8.
<title> - Judul halaman dapat dilihat di tab jendela browser dan saat Anda mem-bookmark situs di favorit Anda. Anda dapat meletakkan apa pun yang Anda inginkan di antara tag judul.
</head> - Penutupan bagian kepala .
<body> - Inilah semua hal yang akan terlihat di halaman,di dalam ini konten anda di letakan.
<p> - ini adalah tag untuk membuat paragraf pertama.
</body> - Penutup tubuh tag.
</html> - Mengakhiri dokumen .

Jenis Tag HTML

<article> - Elemen ini digunakan untuk mendefinisikan konten independen dalam dokumen, yang mungkin berupa blog, majalah, atau artikel surat kabar.
<aside> - Ini menentukan artikel yang sedikit terkait dengan sisa seluruh halaman.
<audio> - Tag ini di gunakam untuk file audio.
<bdi> - Ini mengisolasi bagian teks yang diformat ke arah lain dari dokumen teks luar.
<data> - Ini menyediakan versi data yang dapat dibaca mesin.
<canvas> - Digunakan untuk menggambar kanvas.
<datalist> - Ini menyediakan fitur lengkap otomatis untuk bidang teks.
<details> - Ini menentukan informasi tambahan atau kontrol yang dibutuhkan oleh pengguna.
<dialog> - Ini mendefinisikan jendela atau kotak dialog.
<figcaption> - Ini digunakan untuk mendefinisikan keterangan untuk elemen <figure>.
<footer> - Ini mendefinisikan bagian untuk footer atau bawah, misalnya seperti bagian copyright.
<header> - ini digunakan untuk mendefinisikan bagian header.
<main> - Digunakan untuk mendefinisikan konten utama.
<mark> - Menentukan sebuah konten yang ditandai atau disorot.
<menuitem> - Mendefinisikan perintah yang dapat dipanggil pengguna dari menu popup.
<meter> - Digunakan untuk mengukur nilai skalar dalam rentang tertentu.
<nav> - Ini digunakan untuk menentukan tautan navigasi dalam dokumen.
<progress> - Menentukan kemajuan tugas.
<rp> - Ini mendefinisikan apa yang akan ditampilkan di browser yang tidak mendukung anotasi ruby.
<rt> - mendefinisikan penjelasan / pengucapan karakter.
<ruby> - Ini mendefinisikan anotasi ruby bersama dengan <rp> dan <rt>.
<section> - mendefinisikan bagian dalam dokumen.
<section> - Ini menentukan heading yang terlihat untuk elemen <detailed>.
<svg> - Biasanya digunakan untuk menampilkan bentuk.
<time> - Digunakan untuk menentukan tanggal dan waktu.
<video> - Digunakan untuk memutar file video dalam HTML.
<video> - Mendefinisikan kemungkinan jeda baris.
- Tag ini biasanya digunakan untuk mengomentari kode HTML sebagai penanda dan tag ini tidak akan muncul ketika di run.
<a> - Tag ini di kenal dengan hyperlink, yang berguna untuk menautkan di sebuah tautan , biasanya di barengi attribut seperti ini <a href="WQ.com"> klik </a>.
<address> - Berisi informasi kontak sebuah situs web.
<area> - Untuk menetapkan area dapam peta gambar.
<base> - Gunakan untuk menetapkan URL dasar.
<bdi> - Berguna untuk bekerja dengan bahasa yang menggunakan teks dari kanan ke kiri.
<bdo> - Gunakan ini untuk mengganti arah teks saat ini. Berguna untuk bahasa yang menggunakan teks dari kanan ke kiri.
<blockquote> Digunakan untuk mengutip dari sumber eksternal. Biasanya dirender sebagai teks indentasi.
<br> - Digunakan untuk break atau sederhananya spasi antara jarak atas dan bawah.
<button> - digunakan untuk membuat sebuah tombol yang bisa di klik, biasanya dengan formulir.
<caption> - untuk di gunakan dalam sebuah keterangan.
<code> dugunakan untuk mendefinisikan sebuah code.
<colgroup> - pada dasarnya sebuah kolom.
<dd> - dugunakan untuk daftar deskripsi, gunakan dengan <dt> dan <dl>.
<del> - digunakan untuk teks yang di hapus ~~- ini adalah contoh.~~
<dfn> - Berguna untuk saat pertama kali mendefinisikan istilah.
<dialog> - kotak dialog.
<div> - untuk mendefinisika sebuah halaman ,atau sebuah kelas baru .
<link> - mendefiniskan hubungan antar documen.
<embed> - wadah untuk konten eksternal.
<fieldset> - mengelompokan item terkait formulir.
<figure> - konten mandiri seperti foto atau diagram.
<form> - Tempat unntuk input pengguna.
<h1> - heading judul level yang paling besar dan di ikuti level yang semakin kecil <h2>, <h3>, <h4>, <h5>, <h6>.
<hr> - Digunakan untuk memisahkan sebuah baris, biasanya dirender dengan garis horizontal.
<iframe> - memingkinkan anda menyematkan halaman lain di dalam halaman.
<img> - Untuk menampilkan halaman dalam sebuah web.
<track> - Digunakan untuk menentukan trek teks dengan <audio> dan <video> .
<div> - Input digunakan dengan berbagai atribut untuk membuat elemen input form.
<kbd> - Digunakan untuk input keyboard. Ini berbeda dengan input teks elemen form .
<label> - untuk menetapkan label ke elemen antarmuka.
<ul> - Mewakili item dasar ,dan biasanya di gunakan dengan <li>.
<nonscript> - berguna untuk menentukan konten yang harus dirender saat skrip tidak didukung.
<ol> - digunskan untuk daftar dengan di mulai dengan angka 1,2,3 dan seterusnya.
<object> - Menyematkan object dalam dokumen.
<optgroup> - pengelompokan objek.
<option> - digunakan dalam mode pilihan bersama <select>.
<param> - Gunakan ketika parameter perlu diteruskan ke objek yang disematkan di dalam dokumen.
<pre> - Untuk teks yang telah diformat sebelumnya. Ini berguna untuk mendemonstrasikan kode, terutama jika ada banyak baris.
<q> - Untuk kutipan.
<rtc> - wadah teks Ruby.
<samp> - contoh kompile yang di dapat dari program komputer tertentu.
<s> - Untuk menandai teks yang tidak lagi relevan.
<script> - Skrip di dalam dokumen HTML diapit oleh tag skrip.
<select> - Digunakan dengan <option> untuk memilih opsi tertentu.
<source> - Digunakan dengan <audio> dan <video> untuk menentukan sumber media.
<sub> Untuk menampilkan subskrip. Berguna untuk matematika, terutama dalam hubungannya dengan <sub> (superscript), contoh 7/₅ + 5 x 8/₄
<table> - Untuk membuat table di HTML.
<tbody> - Baris tabel.
<td> - Data tabel; ini mewakili sel data dalam tabel.
<template> - Mendeklarasikan cuplikan HTML yang dapat digunakan nanti.
<textarea> - Untuk entri teks multi-baris.
<var> - Mendefinisikan variabel dalam konten halaman HTML .
<wbr> - Bungkus baris opsional .

Penulisan teks

Saat anda membuat halaman web, Anda menambahkan sebuah tag yang di kenal sebagai markup ke konten halaman. Tag ini kemudian memberikan makna ekstradan yang mengizinkan browser untuk menunjukkan kepada pengguna struktur yang sesuai untuk halaman anda.

kita akan fokus pada bagaimana cara menambahkan markup ke teks yang muncul di halaman Anda. kita akan belajar tentang ini :

Markup struktural elemen yang dapat Anda gunakan untuk jelaskan judul dan paragraf.
Semantic markup :yang memberikan informasi tambahan,seperti di mana penekanan ditempatkan dalam sebuah kalimat.


				
				
   
   
<h1>Belajar HTML mudah</h1>
		
<h2>Belajar HTML mudah</h2>
		
<h3>Belajar HTML mudah</h3>
		
<h4>Belajar HTML mudah</h4>
		
<h5>Belajar HTML mudah</h5>
		
<h6>Belajar HTML mudah</h6>

Hasil :

Belajar HTML mudah

HTML memiliki enam "level" dari judul :

<h1> merupakan judul utama.
<h2> digunakan sebagai subpos.
Dibawah subjudul seprti <h3>, <h4>, <h5>, <h6> bisa anda gunakan pada teks judul lainya.

Browser menampilkan konten judul kita dengan ukuran yang berbeda. Misalnya isi dari elemen <h1> adalah terbesar, dan isinya elemen <h6> adalah yang terkecil. Ukuran yang tepat di mana masing-masing browser menunjukkan judul dapat sedikit berbeda.

Pengguna juga dapat sesuaikan ukuran teks di peramban browser mereka . Anda akan melihat caranya mengontrol ukuran teks, warnanya, dan font yang digunakan saat kita akan belajar dengan CSS.

Paragraf

Untuk membuat paragraf, kelilingi kata-kata yang membentuk paragraf dengan pembukaan <p>tag dan tag penutup </p>. Secara default, browser akan menampilkan setiap paragraf pada baris baru dengan beberapa ruang di antara itu dan paragraf berikutnya.


				
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Hasil:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold dan Italic

Dengan menggunakan tag <b> dan </b> kita bisa membuat karakter tebal dalam paragraf kita. Anda dapat mengombinasikan tag ini sebagai penanda dalam paragaraf anda ataupun sebagai pembeda dalam paragraf.

Selain itu, kita juga bisa menggunakan tag lain dalam pargraf kita, misalnya dengan tag <i> dan </i> ini biasanya di gukan sebagai tag pembeda dari sekitarnya di dalam paragraf, misalnya untuk menandai nama tempat, pikiran atau kata-kata asing.


				
							<p>Ini adalah isi teks di dalam paragraf dan ini adalah <li>italic</i></p>
								<p>Ini adalah contoh teks paragraf dan ini adalah <b>bold.</b></p>

Hasil:

Ini adalah isi teks di dalam paragraf dan ini adalah italic

Ini adalah contoh teks paragraf dan ini adalah bold

Superscript dan Subscript

Elemen <sup> digunakan mengandung karakter yang harus superskrip seperti itu sebagai akhiran tanggal atau konsep matematika seperti menaikkan angka menjadi kekuatan seperti sebagai 2².


				
								<p>Pada tanggal 4<sup></sup> September Anda akan belajar tentang E=MC<sup>2</sup>.</p>
<p>Jumlah CO<sub>2</sub> di atmosfer tumbuh sebesar 2ppm pada tahun 2009<sub>1</sub>.</p>

Hasil:

Pada tanggal 4 September Anda akan belajar tentang E=MC².

Jumlah CO₂ di atmosfer tumbuh sebesar 2ppm pada tahun 2009₁.

Sedangkan tag elemant <sub> Elemen digunakan untuk mengandung karakter yang seharusnya menjadi subskrip. Hal ini biasanya digunakan dengan catatan kaki atau bahan kimia rumus seperti H₂.


				
								<p>Jumlah CO<sub>2</sub> di atmosfer
tumbuh sebesar 2ppm pada tahun 2009<sub>1</sub>.</p>

Hasil :

Jumlah CO₂ di atmosfer tumbuh sebesar 2ppm pada tahun 2009₁.

Jeda Baris dan Aturan Horisontal

<br/> tag ini berguna untuk anda memberikan jeda di setiap paragraf. Jika tag tersebut anda gunakan, maka browser akan secara otomatis menunjukkan setiap paragraf atau judul baru pada baris baru.

Untuk membuat jeda antara tema,seperti perubahan topik dalam buku atau adegan baru dalam drama Anda dapat menambahkan aturan horizontal antar bagian menggunakan tag <hr/>.


				
							<p>Bumi<br/>lebih berat seratus ton
setiap hari<br/>karena debu luar angkasa yang berjatuhan.</p>	
	
<hr/>			
				
<p>Venus adalah satu-satunya planet yang berotasi searah jarum jam.</p>
 <hr />
<p>Jupiter lebih besar dari semua planet lain
digabungkan.</p>				
				
</div>

Hasilnya:

Bumi
lebih berat seratus ton setiap hari
karena debu luar angkasa yang berjatuhan.

Venus adalah satu-satunya planet yang berotasi searah jarum jam.

Jupiter lebih besar dari semua planet lain digabungkan.

Ada beberapa elemen yang tidak memiliki kata-kata antara tag pembuka dan penutup seperti <br/> dan <hr/> . Mereka dikenal sebagai elemen kosong dan mereka ditulis berbeda. Elemen kosong biasanya hanya memiliki satu tag.

Semantic Markup

Ada beberapa elemen teks yang tidak dimaksudkan untuk mempengaruhi struktur halaman web Anda, tetapi mereka menambahkan informasi tambahan ke halaman ,mereka dikenal sebagai markup semantik.

Mungkin Anda akan bertemu beberapa elemen lagi yang akan membantu Anda ketika Anda menambahkan teks ke halaman web. Untuk contoh, kamu akan bertemu elemen <em> yang memungkinkan Anda untuk menunjukkan di mana penekanan harus ditempatkan pada yang dipilih kata-kata dan <blockquote>elemen yang menunjukkan bahwa blok teks adalah kutipan.

Alasan menggunakan elemen ini adalah bahwa program lain, seperti pembaca layar atau search engine, dapat menggunakan ekstra informasi ini. Misalnya,suara pembaca layar dapat menambahkan penekanan pada kata-kata di dalam elemen <em>, atau search engine mungkin mendaftarkan bahwa halaman anda menampilkan kutipan jika Anda menggunakan elemen <blockquote>.

Strong dan Emphasis

Penggunaan elemen <strong>menunjukkan bahwa konten memiliki kepentingan yang kuat. Misalnya kata terkandung dalam elemen ini mungkin dikatakan dengan penekanan yang kuat. Secara default, browser akan menampilkan isi dari <strong>elemen dalam huruf tebal.

Selain itu contoh penggunaan lainya adalah pada elemen <em> yang menunjukkan penekanan yang secara halus berubah arti sebuah kalimat. Secara default browser akan menampilkan isi elemen <em>dalam huruf miring.


				
<p><strong>Hati-hati:</strong> Pencopet beroperasi di daerah ini.</p>
 <p>Mainan ini memiliki banyak potongan kecil dan <strong>tidak cocok untuk anak di bawah lima tahun.</strong></p>

<p>Saya <em>berpikir</em> Jono adalah yang pertama.</p>
 <p>Saya pikir <em>Jono</em> adalah yang pertama.</p>
 <p>Saya pikir Jono adalah yang <em>pertama</em>.</p>

Hasil :

Hati-hati: Pencopet beroperasi di daerah ini.

Mainan ini memiliki banyak potongan kecil dan tidak cocok untuk anak di bawah lima tahun.

Saya berpikir Jono adalah yang pertama.

Saya pikir Jono adalah yang pertama.

Saya pikir Jono adalah yang pertama.

Kutipan

Elemen ini <blockquote> digunakan untuk kutipan yang lebih panjang yang membutuhkan sampai seluruh paragraf. seperti bagaimana elemen <p> digunakan di dalam <blockquote>elemen.

Browser cenderung membuat indentasi isi <blockquote>elemen, namun Anda tidak boleh gunakan elemen ini hanya untuk membuat indentasi sepotong teks, sebaiknya Anda melakukan style ini menggunakan CSS.

Anda juga dapat menggunakan elemen <blockquote> untuk kutipan pendek yang ada di dalam sebuah paragraf. Browser adalah seharusnya memberi tanda kutip elemen <blockquote>, namun Internet Explorer tidak oleh karena itu banyak orang menghindari menggunakan elemen <q>.

Abbreviations dan Acronyms

Jika Anda menggunakan singkatan atau akronim, lalu <abbr>elemen dapat digunakan. Sebuah judul atribut pada tag pembuka adalah digunakan untuk menentukan istilah lengkap. Dalam HTML 4 ada yang terpisah <acronym> elemen untuk akronim.

Untuk mengeja selengkapnya bentuk akronim, judul atribut digunakan (seperti dengan <abbr> elemen di atas). HTML5 hanya menggunakan elemen untuk kedua singkatan dan akronim.


				
								
								
<p><abbr title="Professor">Prof</abbr> Stephen Hawking adalah fisikawan teoretis dan
ahli kosmologi.</p>
 <p><acronym title="Aeronautika dan Antariksa Nasional Administration">NASA</acronym> melakukan sesuatu pada benda luar angkasa.</p>

Hasil :

Prof Stephen Hawking adalah fisikawan teoretis dan ahli kosmologi.

NASA melakukan sesuatu pada benda luar angkasa.

Author detail

Elemen <address> memiliki penggunaan yang cukup spesifik: mengandung rincian kontak untuk penulis halaman. Ini dapat berisi alamat fisik, tapi tidak harus.

Untuk misalnya, mungkin juga mengandung nomor telepon atau alamat email. Browser sering menampilkan isi <address>elemen dalam huruf miring.

Anda mungkin juga tertarik sesuatu yang disebut hCard mikroformat untuk menambahkan fisik informasi alamat untuk Anda markup.


				
<address>
 <p><a href="mailto:wq@example.com">
  wq@example.com</a></p>
 <p>742 Evergreen Terrace, Springfield.</p>
 </addres>

Hasil:

wq@example.com

742 Evergreen Terrace, Springfield.

Ini adalah halaman HTML yang sangat sederhana yang menunjukkan markup teks. Markup struktural mencakup elemen seperti <h1>,<h2>, dan <p> dan informasi semantik dalam elemen seperti yang telah kita pelajari dalam artikel di atas ! bagaimana ? mudah bukan belajar Tag HTML.


				
<html>
 <head>
  <title>Teks</title>
 </head>
 <body>
  <h1>Kisah dalam Buku</h1>
  <h2>Bab 1</h2>
  <p>Molly telah menatap keluar jendela selama sekitar satu jam sekarang.  Di mejanya, tergeletak di antara salinan dari <i>Alam</i>, <i>Ilmuwan Baru</i>, dan semuanya jurnal ilmiah lain yang dia miliki
muncul di, adalah salinan dari <cite>On
Jalan</cite>.  Itu adalah buku favorit Molly
sejak kuliah, dan semakin lama dia menghabiskan waktu di sini
empat dinding semakin dia merasa dia perlu
gratis.</p>
  <p>Dia telah menghabiskan sepuluh tahun terakhir di ruangan ini,
duduk di bawah poster dengan kutipan Oscar Wilde menyatakan bahwa <q>Pekerjaan adalah perlindungan dari
orang yang tidak memiliki pekerjaan yang lebih baik</q>.  Meskipun banyak yang menganggap karya perintisnya, terurai rahasia llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, menjadi pencapaian luar biasa, menurut Molly <em>menurut</em>
dia memiliki sesuatu yang lebih baik untuk dilakukan.</p>
 </body>
 </html>

Selanjutnya

AdityaDees

Hot

https://publishers.chitika.com/

28 August 2021

Ask Belajar HTML untuk pemula, membuat struktur HTML pertama dengan tag HTML AdityaDees

Apa fungsi HTML

Apa itu tag HTML

Jenis Tag HTML

Penulisan teks

Belajar HTML mudah