Mencoba mengingat setiap elemen HTML seperti mencoba mengingat semua informasi pribadi Anda, kartu kredit, nomor rekening bank, dan kata sandi Anda untuk media sosial, email, dan kartu ATM. Bukan hanya tidak mungkin tetapi juga membuang-buang waktu yang berharga

Meluncurkan pencarian Google akan menghasilkan setidaknya 30 tab browser yang berbeda yang akan membuat proses belajar HTML membosankan dan tidak efisien

Jika Anda ingin mempelajari pengembangan web HTML, pilihan terbaik Anda adalah menggunakan lembar contekan HTML. Anda tidak akan sendirian;

Kami telah menyiapkan HTML yang dapat Anda gunakan sebagai sumber langsung saat Anda mempelajari HTML atau bahasa pemrograman lain seperti CSS, JavaScript, dan PHP

Ringkasan Dokumen

< html > … < /html>

Tag ini muncul di elemen root atau awal dan akhir dokumen HTML. Saat Anda melihat tag ini, artinya laman web tersebut dalam format HTML. Semua markup halaman lainnya akan ditampilkan di antara tag awal dan akhir

< kepala > … < /head>

Termasuk informasi seperti halaman tertentu, tag judul, metadata, plus tautan ke skrip dan lembar gaya

< judul > … < /title>

Tag judul mengidentifikasi judul halaman. Mesin pencari menggunakan tag judul untuk memindai dan mengindeks. Pengguna juga menggunakan tag judul saat mengidentifikasi topik utama setiap halaman

< tubuh > … < /body>

Tag tubuh memandu pengguna tentang jenis konten yang akan mereka lihat dan baca

Contoh HTML

< html >
< kepala >
< judul > Judul Situs Web atau Halaman Anda < /title>
</head >
< tubuh >

< h1 > Ini adalah Tajuk << /h1>
< p > Ini adalah sebuah paragraf. </p >

</body >
</html >

Informasi Dokumen

< dasar/ >

Ini disebut URL Dasar. Contoh URL Dasar adalah www. Situs Anda. com. Anda memerlukan ini untuk mengidentifikasi semua tautan relatif dalam dokumen Anda. URL Dasar sangat berharga jika Anda menggunakan banyak tautan internal

< meta/ >

Detail metadata informasi kunci tentang halaman. Ini termasuk deskripsi konten halaman, penulis, data yang dipublikasikan, kata kunci, dan informasi yang biasanya disembunyikan

< tautan/ >

Ini digunakan jika Anda ingin menjalin hubungan dengan halaman eksternal, dokumen, dan style sheet

< gaya > … < /style>

Elemen HTML ini merinci informasi tentang gaya dokumen dan biasanya default ke CSS

< skrip > … < /script>

Elemen HTML khusus ini berisi semua informasi pembuatan skrip, termasuk tautan ke skrip eksternal. Anda juga dapat menggunakan elemen ini di dalam tubuh untuk menghasilkan konten yang hebat

Contoh HTML

< html >

< kepala >

< meta set karakter =”utf-8″>

< basis href =”http. //situs Anda. com” target =”_blank” / >

< judul > Situs Web Anda</title>

< tautan rel =”stylesheet” href< . css” =”/css/main.css” >

< skrip ketik =”teks/javascript”>

varMyVar = 0;

</skrip >

</head >

< tubuh >

< h1 > Ini adalah Tajuk << /h1>
< p > Ini adalah sebuah paragraf. </p >

</body >

</html >

Struktur Dokumen

< h1. h6 > … / . ..h6 >

Tag ini mewakili enam judul pertama halaman. H1 adalah yang paling penting dan akibatnya, H6 adalah yang paling tidak penting. Elemen-elemen ini menjelaskan konten pada halaman

< div > … /div>

Elemen ini disebut wadah generik. Ini digunakan untuk mengidentifikasi bagian halaman atau blok tertentu

< rentang > … /span>

Elemen HTML ini mewakili bagian sebaris yang terkadang disebut sebagai wadah blok. Ini digunakan untuk mengelompokkan elemen gaya

< p > … < /p>

Tag dasar yang mengatur paragraf teks

< br/ >

Menetapkan jeda baris yang mirip dengan carriage-return mesin tik. Anda dapat menggunakan ini untuk mengelompokkan teks yang harus ditempatkan di baris yang berbeda. Pikirkan bagian di mana informasi pribadi dimasukkan satu di atas baris lain

< jam/ >

Jika Anda ingin membuat perubahan topik pada halaman, Anda memerlukan elemen ini

Contoh HTML

< div >

< h1 > Cara makan sehat << /h1>

< p > Anda memiliki < span style=”color: #33cccc;” > kondisi kesehatan < /span> and you want to be as healthy as possible. < /p >

< jam/ >

< h2 > Buang semua junk food di rumah Anda. </h2 >

< p > Diet yang benar adalah << . #33cccc;” span style=”color: #33cccc;” > sangat < /span> important for your health. < br/ > Obesitas adalah sumber masalah umum di kalangan dewasa muda. < /p >

</div >

Bagaimana Kelihatannya

Cara makan sehat

Anda memiliki kondisi kesehatan dan Anda ingin menjadi sesehat mungkin.

Singkirkan semua junk food di rumah Anda

Diet yang benar sangat penting untuk kesehatan Anda.
Obesitas adalah sumber umum masalah di kalangan orang dewasa muda

Teks (+ Pemformatan)

< kuat > … /strong>

Gunakan elemen ini untuk menekankan poin kuat pada konten Anda

< b > … b>

Ini adalah opsi lain untuk menekankan poin-poin penting dalam konten Anda;

< em > … < /em>

Ini disebut tag penekanan dan sesuai dengan istilah digunakan untuk menekankan teks dan frasa yang dapat disajikan dalam format miring di beberapa browser

< i > … < /i>

Anda dapat menggunakan elemen ini untuk menggunakan huruf miring tanpa menambahkan bentuk penekanan lain seperti tag tebal. Elemen ini digunakan untuk menekankan nama dan istilah

< tt > … /tt>

Tag ini tidak lagi didukung di HTML5. Itu digunakan untuk menampilkan teks yang identik dengan mesin tik

< pemogokan > … /strike>

Tag lain yang tidak lagi didukung di HTML5;

< kutip > … < /cite>

Jika Anda ingin mengutip referensi dalam konten Anda, gunakan tag ini

< pra > … < /pre>

Tag ini membuat mono-space atau teks yang ditulis dengan spasi putih di dalam elemen

< del > … < /del>

Gunakan tag ini untuk mengidentifikasi bagian teks yang baru saja dihapus

< in > … < /ins>

Mengidentifikasi bagian yang disisipkan dalam dokumen

< blockquote > … /blockquote>

Tag ini digunakan untuk mengelompokkan paragraf panjang dan kutipan yang dikutip

< q > … < /q>

Jika Anda memiliki kutipan yang lebih pendek, gunakan tag ini sebagai gantinya

< abbr > … /abbr>

Buat singkatan sambil membuat konten lengkapnya tersedia

< akronim > … /acronym>

Tidak didukung oleh HTML5. Tag ini digunakan untuk membuat singkatan dengan penambahan akronim

< alamat > … /address>

Penulis dan penulis memerlukan tag ini untuk menampilkan informasi kontak mereka

< dfn > … /dfn>

Tag ini digunakan untuk memperkenalkan definisi sebaris di dalam tubuh teks

< kode > … < /code>

Disebut sebagai teks kode, ini menampilkan cuplikan kode

< font > … /font>

Tidak lagi didukung oleh HTML5, tag ini digunakan untuk mewarnai font dengan cara tradisional

< sub > … < /sub>

Jika Anda ingin mensubskrip teks seperti menciutkannya dan mengaturnya setengah baris lebih rendah dari teks sebelumnya, ini adalah tag HTML yang harus Anda

< sup > … /sup>

Ini adalah teks superskrip tempat Anda ingin menempatkan teks setengah baris lebih tinggi dari teks sebelumnya

< kecil > … /small>

Tag adalah singkatan dari teks ukuran kecil. Ini digunakan dalam HTML5 untuk mengurangi ukuran teks. Ini juga dapat digunakan untuk mengidentifikasi informasi yang mungkin tidak lagi valid, akurat, atau relevan

< bdo > … /bdo>

Tag ini disebut bi-directional dan mengidentifikasi teks mana yang harus dibaca berlawanan dengan teks sebelumnya

Contoh HTML

< p >< kuat > Keep yourself healthy. < /strong > Anda dapat menangkap a <em>variety of illnesses</em> outside and inside the house. It is important to get a medical check up at least mogok > . </strike> two times a year for a check-up. < /p >

< blockquote >

Anda harus diperiksa untuk mencegah penyakit serius dan tertular virus mematikan

< kutipan > – Dr. Dokter Medis Neil Harris < /cite >

</blockquote >

< pra >

Ini adalah teks yang telah diformat sebelumnya yang merupakan elemen tipe blok

</pra >

< p > Sementara baris ini memiliki di . di . di . di . di . di . di . di . di . di . di . di . di . di . </p >

Bagaimana tampilannya

Jaga kesehatan Anda. Anda bisa tertular berbagai penyakit di luar dan di dalam rumah. Penting untuk melakukan medical check up minimal satu dua kali setahun untuk check up.

Anda harus diperiksa untuk mencegah penyakit serius dan tertular virus mematikan

– dr. Dokter Medis Neil Harris

This is a preformatted text which is a block type element.

Sementara baris ini memiliki code tag di dalamnya, kode-kode yang dapat disematkan sebaris

Tautan (+ Pemformatan)

< a href=”” > … </a>
Digunakan sebagai teks jangkar untuk hyperlink

< a href=”mailto. ” > … /a>
Anda dapat menggunakan tautan ini untuk mengambil pesan keluar untuk alamat email tertentu

< a href=”telp. //###-###” > … />
Jika Anda ingin tautan ke nomor telepon dapat diklik, gunakan tag ini

< a nama=”nama” > < … </a>
Tag ini merupakan jangkar yang dapat membawa pengguna ke elemen dokumen yang teridentifikasi

< a href=”#nama” > … </a>
Gunakan tautan jangkar ini untuk membawa pengguna ke elemen div tertentu

Gambar (+ Pemformatan)

< img/ >
Gunakan tag gambar ini untuk menambahkan dan menampilkan file gambar

src=”URL”
Tag ini digunakan untuk menampilkan URL dari gambar yang ingin ditampilkan

alt=”teks”
Anda memerlukan tag teks alternatif ini untuk membantu menjelaskan konten gambar ke mesin telusur dan pengguna situs

tinggi=””
Berikan detail tentang tinggi gambar tertentu dalam bentuk piksel atau persentase

lebar=””
Berikan informasi tentang lebar tertentu dalam piksel atau persentase

sejajarkan=””
Mewakili perataan gambar relatif terhadap elemen teks yang dapat Anda temukan di halaman

perbatasan=””
Mengidentifikasi ketebalan perbatasan

vspace=””
Mengidentifikasi spasi yang ditemukan di bagian atas dan bawah gambar

hspace=””
Mewakili spasi di atas atau di bawah gambar

< peta > … < /map>
Sarankan pengguna Anda bahwa Anda memiliki gambar interaktif dengan area yang dapat mereka klik

< peta nama=”” > … </map>
Mengidentifikasi nama peta yang ditautkan ke gambar dan peta

< area / >
Mengidentifikasi area peta gambar

Contoh HTML

< img src=”planet. gif” lebar=”145″ tinggi=”126″ alt=“Planets”
peta penggunaan=”#planetmap” >

< peta nama=”peta planet” ><

< luas bentuk=”persegi” koord< . htm”=”0,0,82,126″ href=”sun.htm” alt=”Matahari” >
< luas bentuk=”lingkaran” koord< . htm”=”90,58,3″ href=”mercur.htm” alt=”Merkurius” >
< luas bentuk=”lingkaran” koord< . htm”=”124,58,8″ href=”venus.htm” alt=”Venus” >

</peta >

Daftar (+ Pemformatan)

< ol > … < /ol>

Gunakan tag ini untuk membuat nomor atau daftar yang ditampilkan dalam urutan, preferensi, atau prioritas berurutan

< ul > … < /ul>

Tag ini digunakan untuk membuat daftar peluru tanpa harus menekankan urutan kepentingan

< li > … < /li>

Mengidentifikasi setiap item dalam daftar yang harus disajikan dalam format poin atau angka

< dl > … /dl>

Tag ini digunakan khusus untuk definisi item daftar

< dt > … /dt>

Gunakan tag ini untuk mendefinisikan satu istilah dalam konten tubuh

< dd > … < /dd>

Tag ini digunakan untuk menjelaskan istilah yang didefinisikan

Contoh HTML

< ol >

< li > Uno</li>

< li > Dos</li>

< li > Tres</li>

</ol >

< ul >

< li > 340g Ayam</li>

< li > 56g bawang bombay, iris << /li>

< li > 115g tomat anggur</li>

</ul >

< dl >

< dt > Vegetarian /dt>

< dd > Pasta Musim Panas</dd>

< dd > Enchilada Kacang Cheesy >

< dt > Makan Malam Cepat</dt>

< dd > Burger Spesial < /dd>

</dl >

Bagaimana tampilannya

1. Satu
2. Dos
3. Tres

• 340g Ayam
• 56g bawang bombay, iris
• 115g tomat anggur

VegetarianSummer PastaCheesy Bean EnchiladasMakan Malam CepatBurger Spesial

Formulir (Pemformatan dan Atribut)

< bentuk > … < /form>
Tag ini disebut elemen form. Itu menciptakan formulir yang merinci bagaimana itu akan berjalan berdasarkan atribut

tindakan=”URL”
Disebut sebagai URL tindakan formulir, ini menunjukkan ke mana data akan dikirim setiap kali pengguna mengirimkan formulir

metode=””
Atribut metode menjelaskan metode HTTP (Get, Post) yang menginstruksikan cara mengirim formulir

enctype=””
Atribut khusus ini menunjukkan bagaimana data formulir akan dikodekan ketika informasi dikirim kembali ke server web (hanya untuk metode = "posting")

pelengkapan otomatis
Menunjukkan apakah formulir harus mengaktifkan atau menonaktifkan pelengkapan otomatis

tidak memvalidasi
Menunjukkan apakah formulir tidak harus divalidasi saat dikirimkan

accept-charsets
Setiap kali formulir dikirimkan, elemen ini mengidentifikasi pengkodean karakternya

target
Menunjukkan tempat untuk menampilkan respons formulir setelah dikirim. Biasanya salah satu dari _blank, _self,_parent,_top berikut

< kumpulan bidang > … < /fieldset>
Memperlihatkan grup dari semua bidang yang ditemukan di formulir

< label > … < /label>
Label bidang ini menunjukkan kepada pengguna informasi apa yang harus dimasukkan dalam bidang tertentu

< legenda > … < /legend>
Tag ini disebut legenda formulir. Ini berfungsi sebagai keterangan untuk elemen fieldset

< masukan / >
Tag ini disebut form input atribut dan mengidentifikasi jenis informasi lapangan yang akan diterima dari pengguna

Atribut Tipe Input

ketik=””
Menampilkan jenis input bidang;

nama=””
Mengidentifikasi nama formulir

nilai=””
Mengidentifikasi nilai atau informasi kolom input

ukuran=””
Menunjukkan lebar elemen input dengan penggunaan karakter

maxlength=””
Menunjukkan jumlah karakter elemen input maksimum yang diperbolehkan

yg dibutuhkan
This tag makes sure the element is properly filled out before the user submits the form.

langkah=””
Menunjukkan jumlah interval yang sah untuk bidang input

lebar=””
Indicates the width in pixels of an element.

tinggi=””
Indicates the height in pixels, of an element.

placeholder=””
Memberitahu pengguna apa

pola=””
Shows the regular expression which the element gets checked against to make sure the user entered the correct information.

mnt=””
Indicates the minimum value allowed per element.

maks=””
Indicates the maximum value allowed per element.

fokus otomatis
Tells you if the element comes into focus once the page loads.

dengan disabilitas
Disables the element found on the form.

< textarea > … /textarea>
Menunjukkan input teks yang besar untuk pesan yang lebih panjang

Pilih Atribut

nama=””
Mengacu pada nama untuk kotak kombinasi drop-down

ukuran=””
Menunjukkan jumlah opsi yang tersedia di kotak drop-down

beberapa
Memungkinkan pengguna untuk membuat beberapa pilihan

yg dibutuhkan
Memberi tahu pengguna bahwa nilai harus dipilih sebelum formulir dapat dikirimkan

fokus otomatis
Memberi tahu pengguna bahwa daftar drop-down akan menjadi fokus setelah halaman dimuat

< optgroup > … /optgroup>
Menunjukkan pengelompokan lengkap dari opsi yang tersedia

< opsi > … option>
Mengidentifikasi salah satu opsi yang tersedia di kotak drop-down

Atribut Opsi

nilai=””
Memberi tahu pengguna tentang nilai opsi yang tersedia untuk dipilih

< tombol > … /button>
Mengidentifikasi opsi yang dipilih default untuk pengguna

terpilih
Mengidentifikasi tombol yang dapat digunakan pengguna untuk mengirimkan opsi

Contoh HTML

< bentuk tindakan=”action_page. php” metode=”posting” >

< kumpulan bidang >

< legenda > Informasi pelanggan. </legend >

Nama depan. < br >

< masukan ketik=”teks” nama<=”firstname” value=”John” placeholder=”First Name”><br>

Nama belakang. < br >

< masukan ketik=”teks” nama<=”lastname” value=”Doe” placeholder=”Last Name”><br><br>

Gitar Favorit. < br >

< pilih >

< opsi nilai=”peavey” >< Peavey</option>

< opsi nilai=”fender” >< Fender</option>

< opsi nilai=”gibson” >< Gibson</option>

< opsi nilai=”ibanez” >< Ibanez</option>

</pilih >

Catatan. < br >

< textarea nama=”deskripsi” >< /textarea>

< masukan ketik=”kirim” nilai<=”Submit”>

</fieldset >

</form >

Bagaimana tampilannya

Informasi pengguna

Nama depan

nama keluarga

Gitar Favorit

Catatan

Tabel (+ Pemformatan)

< meja > … < /table>
Ini disebut tag tabel dan menampilkan semua konten terkait tabel

< keterangan > … /caption>
Tag keterangan menjelaskan apa tabel itu dan apa isinya

< kepala > … /thead>
Tag tajuk tabel menunjukkan kepada pengguna jenis informasi yang ditunjukkan di setiap kolom di bawahnya

< tubuh > … /tbody>
Tag badan tabel menampilkan data atau informasi tabel

< tfoot > … /tfoot>
Tag footer tabel memberi tahu pengguna semua tentang konten footer

< tr > … < /tr>
Menyajikan semua informasi yang disertakan dalam satu baris tabel

< th > … < /th>
Menampilkan informasi aktual yang terkandung dalam satu item header

< td > … /td>
Menampilkan informasi aktual yang terkandung dalam satu sel tabel

< grup grup > … /colgroup>
Atur satu atau beberapa kolom untuk pemformatan yang mudah

< col //a> >
Mengidentifikasi satu kolom informasi yang terletak di dalam tabel

Contoh HTML

< tabel >

< grup grup >

< col span=”3″ gaya< . #f1f1f1″=”background-color:#f1f1f1″ >

</colgroup >

< tr >

< th > Nama</th>

< th > Umur</th>

< th > Gender</th>

< /tr >

< tr >

< td > Jack</td>

< td > 38</td>

< td > Pria</td>

< /tr >

< tr >

< td > Jill</td>

< td > 32</td>

< td > Wanita</td>

< /tr >

</tabel >

Bagaimana Kelihatannya

NamaUmurJack38PriaJill32Wanita

Objek dan iFrame

< objek > … /object>

Disebut sebagai tag objek, ini menjelaskan jenis file yang telah disematkan. Ini bisa berupa file audio atau video, PDF, dan halaman tambahan

Apa 12 dasar-dasar HTML?

Beberapa tag dasar yang dapat dilihat di hampir semua dokumen HTML adalah , Doctype html>, , , ,

,

, , , , , ,

---

,
,

,

,
, , header tags like h1, h2, h3, .., ””/>, etc.

Apa saja 10 tag HTML dasar?

Ini adalah daftar tag HTML dasar kami. .

untuk tautan

untuk membuat teks tebal. untuk teks tebal dengan penekanan

bagian HTML utama

untuk istirahat

itu adalah divisi atau bagian dari dokumen HTML

. untuk judul

untuk membuat teks miring

untuk gambar dalam dokumen

Apa 10 tag HTML dasar yang dijelaskan dengan contoh?

10 Tag HTML

Apa saja 5 bagian dasar dari HTML?

Struktur dasar dokumen HTML terdiri dari 5 elemen. .

<. DOKTIPE>