Panduan HTML Definitif untuk Pemula

Terakhir diperbarui pada 15 Mei 2018

Dua puluh tahun yang lalu, bahkan jika Anda hanya seorang blogger hobi, Anda harus mengetahui beberapa pengkodean web untuk melindungi diri Anda sendiri atau menambahkan fungsi sederhana ke situs Anda. Tapi sekarang ada begitu banyak editor dan plugin yang tersedia yang bahkan mengetahui dasar-dasar HTML tidak lagi diperlukan membuat situs or jalankan blog.

Masalah dengan ini adalah bahwa jika Anda tidak tahu beberapa dasar, Anda dapat dengan mudah mendapatkan masalah nyata di blog Anda dan harus menyewa pengembang yang mahal untuk memperbaiki apa yang mungkin menjadi masalah kecil. Tidak hanya itu, tetapi membuat perubahan ke blog Anda seperti menambahkan widget teks khusus membutuhkan sedikit pengetahuan.

Dan jika Anda mengalami tata letak konten tidak terlihat benar, pengetahuan HTML dapat membuat Anda kembali ke jalur.

Berikut adalah beberapa versi panduan HTML kami untuk pemilik bisnis online blogger dan non-techie.

HTML adalah tulang punggung internet saat ini. Jutaan situs web bersama membentuk internet. Di mana HTML adalah blok bangunan dari semua situs web ini.

Q & A pemula

1- Apa itu HTML?

HTML adalah singkatan dari Hyper Text Markup Language. Ini adalah bahasa standar untuk menandai konten untuk browser web.

HTML diwakili oleh "Elemen". Elemen juga dikenal sebagai "Tag".

2- Mengapa HTML dibutuhkan?

Peramban web hanya dapat merender situs web bila ditulis dalam bahasa yang didukung. HTML adalah bahasa markup yang paling umum dan memiliki penerimaan tertinggi ke browser web.

Itulah mengapa Anda perlu HTML.

3- Apakah kasus HTML sensitif?

HTML tidak sensitif huruf. Tetapi praktik terbaik adalah menulis HTML dengan kasus yang tepat.

Langkah-langkah untuk Membuat File HTML Pertama Anda

Anda dapat membuat file HTML dasar menggunakan Notepad di komputer Anda. Tetapi akan menyakitkan untuk menulis banyak baris kode.

Anda membutuhkan Editor Kode. Editor kode yang baik akan mempermudah menulis dan mengatur kode besar.

Saya menggunakan dan merekomendasikan Notepad ++ (gratis dan open-source) untuk menulis bahasa web. Ada editor lain yang mungkin Anda gunakan seperti Sublime Text, Atom dan sebagainya

Inilah yang perlu Anda lakukan:

  1. Instal editor kode
  2. Buka pintunya
  3. Buat file baru
  4. Simpan sebagai file .html

kamu siap untuk pergi!


Go Top

1- Halo Dunia!

Salin dan sisipkan kode berikut ke dalam file HTML baru Anda dan simpanlah. Sekarang jalankan di browser web Anda.

Kode:

<! DOCTYPE html> <html> <head> <title> Halaman web pertama saya </title> </head> <body> <p> Hello World! </p> </body> </html>

Keluaran:

Selamat! Anda telah membuat file HTML pertama Anda. Anda tidak perlu memahaminya pada saat ini. Kami akan segera menutupinya.

Memahami Struktur HTML

Setiap file HTML memiliki struktur umum telanjang. Di sinilah semuanya dimulai. Dan setiap halaman kode besar akan masuk ke struktur ini setelah pemangkasan.

Jadi mari kita coba untuk memahaminya dari kode "Hello World!". Unsur-unsur berikut adalah bagian wajib untuk setiap file HTML.

  • <! DOCTYPE html> = Ini adalah deklarasi ke browser bahwa ini adalah file HTML. Anda harus menentukannya sebelum tag <html>.
  • <html> </ html> = Ini adalah elemen root dari file HTML. Semua yang Anda tulis berada di antara <html> dan </ html>.
  • <head> </ head> = Ini adalah bagian informasi meta untuk browser. Kode di dalam tag ini tidak memiliki keluaran visual.
  • <body> </ body> = Ini adalah bagian yang dirender oleh browser web. Apa yang Anda lihat di situs web adalah render kode antara <body> dan </ body>.


Go Top

2- Tag HTML

HTML adalah kolaborasi dari ratusan tag berbeda. Anda perlu belajar cara kerjanya. Anda juga harus memastikan bahwa mereka telah menggunakannya dengan cara yang benar.

Tag HTML biasanya memiliki pembukaan dan tag penutup. Tag pembuka memiliki kata kunci yang dikelilingi oleh tanda kurang dari (<) dan lebih besar dari (>). Tag penutup memiliki semua yang sama tetapi tambahan garis miring (/) setelah tanda kurang dari (<).

(2a) Tag Kepala

Semua tag kepala berada di antara <head> dan </ head>. Mereka mengandung informasi meta untuk browser web dan mesin pencari. Mereka pada dasarnya tidak memiliki output visual.

<title> </ title>

Tag judul mendefinisikan judul halaman web yang terlihat pada tab browser. Informasi ini digunakan oleh program web dan mesin pencari. Anda dapat memiliki satu judul tertinggi per file HTML.

Kode:

<title> Halaman web pertama saya </ title>
Tag judul muncul di bagian atas browser Anda.

<tautan>

Tautan tag menautkan halaman HTML Anda dengan sumber daya eksternal. Penggunaan utamanya adalah menghubungkan halaman HTML dengan stylesheet CSS. Ini adalah tag penutupan diri dan tidak membutuhkan akhiran </ link>. Di sini rel berarti relasi dengan file dan src berarti sumbernya.

Kode:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

Meta adalah tag penutupan diri sendiri yang menyediakan informasi meta dari file html. Mesin pencari dan layanan web lainnya menggunakan informasi ini. Meta tag adalah suatu keharusan jika Anda ingin mengoptimalkan halaman Anda untuk mesin pencari.

Kode:

<meta name = "description" content = "Ini adalah deskripsi singkat yang ditampilkan mesin telusur"

<script> </ script>

Tag skrip digunakan untuk menyertakan skrip sisi server atau membuat tautan ke file skrip eksternal. Ini dapat memiliki dua atribut di tag pembuka. Salah satunya adalah jenis dan yang lainnya adalah sumber (src).

Kode:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Tag noscript berfungsi saat skrip dinonaktifkan di browser web. Itu membuat halaman yang kompatibel bagi mereka yang tidak mengizinkan skrip di browser web mereka.

Kode:

<noscript> <p> Sial! Skrip dinonaktifkan. </ P> </ noscript>

(2b) Tag Tubuh

Semua tag body berada di antara <body> dan </ body>. Mereka memiliki output visual. Di sinilah sebagian besar pekerjaan dilakukan. Anda harus menggunakan tag ini untuk menyusun konten halaman utama Anda.

<h1> </ h1> ke <h6> </ h6>

Ini adalah tag heading. Tajuk yang paling penting ditandai dengan <h1> dan yang paling tidak penting dengan <h6>. Anda harus menggunakannya dalam hierarki yang benar.

Kode:

<h1> Ini adalah tajuk h1 </h1> <h2> Ini adalah tajuk h2 </h2> <h3> Ini adalah tajuk h3 </h3> <h4> Ini adalah tajuk h4 </hXNUM> <h4> > Ini adalah tajuk h5 </h5> <h5> Ini adalah tajuk h6 </h6>

Keluaran:

Memformat Tag

Teks dalam file html dapat diformat menggunakan banyak tag pemformatan. Ini akan diperlukan ketika Anda ingin menyorot kata atau garis dari konten Anda.

Kode:

<p> Anda dapat menyorot teks Anda dengan banyak cara. </p> <p> Anda dapat <strong> tebal </strong>, <u> menggarisbawahi </u>, <em> miring </em>, <tandai > tandai </mark>, <sub> subskrip </sub>, <sup> superscript </sup> dan banyak lagi! </p>

Keluaran:

<! - ->

Anda dapat menyimpang beberapa kode dari mengoyak menggunakan tag komentar. Kode akan muncul di kode sumber tetapi tidak akan ditampilkan. Penggunaan utama dari tag ini adalah untuk membuat dokumentasi file html untuk referensi di masa mendatang.

Contoh:

<! - <p> Anda dapat mengomentari kode apa pun dengan mengelilinginya dengan cara ini </ p> ->

(2c) Tag HTML Penting Lainnya

<a> </a>

Anchor adalah tag yang tak ternilai yang digunakan hampir di mana-mana. Anda tidak akan melihat halaman web apa pun secara online tanpa setidaknya satu tautan tautan.

Strukturnya sama. Ini memiliki pembuka <a> dan bagian penutup </a>. Teks yang ingin Anda tandai berada di antara <a> dan </a>.

Ada beberapa atribut yang menentukan ke mana dan bagaimana pengguna pergi setelah mengkliknya.

  • ahref = ”“ = Ini mendefinisikan tautan tujuan. Tautan itu berada di antara tanda kutip ganda.
  • target = ”“ = Ini menentukan apakah URL akan terbuka di tab browser baru atau di tab yang sama. target = "_ blank" adalah untuk tab baru dan target = "_ self" untuk pembukaan di tab yang sama.
  • rel = ”“ = Ini mendefinisikan relasi dari halaman saat ini dengan halaman yang terhubung. Jika Anda tidak mempercayai halaman yang terhubung, Anda dapat menentukan rel = "nofollow".

Kode:

<p> <a target="_blank" href="https://www.google.com/"> Klik di sini </a> untuk pergi ke Google. Ini akan terbuka di tab baru. </p> <p> <a target="_self" href="https://www.google.com/"> Klik di sini </a>. Ini juga akan membawa Anda ke Google tetapi akan terbuka di tab saat ini. </p>

Keluaran:

<img />

Tag gambar adalah tag penting lain yang tanpanya Anda tidak dapat membayangkan banyak situs web berbasis gambar.

<img /> adalah tag penutupan diri. Tidak perlu penutupan tradisional seperti </ img>. Ada beberapa atribut yang perlu Anda ketahui sebelum Anda dapat menggunakannya dengan benar.

  • src = "" = Ini untuk menentukan tautan sumber gambar. Letakkan tautan di antara tanda kutip ganda.
  • alt = "" = Ini singkatan dari teks alternatif. Ketika gambar Anda tidak dimuat, teks ini akan memberi pengguna gambaran tentang gambar yang hilang.
  • width = ”“ = Ini mendefinisikan lebar gambar dalam piksel.
  • Tinggi = "" = Ini mendefinisikan tinggi gambar dalam piksel.

Contoh:

<p> Ini adalah Googleplex pada bulan Agustus 2014. </p> <p> Gambar ini memiliki lebar piksel 500 dan tinggi piksel 375. </p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Kantor Pusat Google pada bulan Agustus 2014 "width =" 500 "height =" 375 "/>

Keluaran:

Tips: Ingin memasukkan gambar yang dapat diklik? Bungkus kode gambar dengan tag <a>. Lihat bagaimana kelanjutannya.

<ol> </ ol> atau <ul> </ ul>

Daftar tag adalah untuk membuat daftar item. <ol> adalah daftar pesanan (daftar bernomor) dan <ul> adalah singkatan dari daftar tanpa urutan (butir-butir).

Item daftar di dalam <ol> atau <ul> ditandai dengan <li> </ li>. li adalah singkatan dari daftar. Anda dapat memiliki sebanyak <li> seperti yang Anda inginkan di dalam tag induk <ol> atau <ul>.

Kode:

<p> Ini adalah daftar yang diurutkan: </p> <ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ol> <p> Ini adalah daftar yang tidak berurutan: </p> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul>

Keluaran:

<table> </ table>

Tag tabel adalah untuk membuat tabel data. Ada beberapa tag tingkat batin yang mendefinisikan header tabel, baris, dan kolom.

<table> </ table> adalah kode induk luar. Dalam tag ini, <tr> adalah singkatan dari baris tabel, <td> adalah singkatan dari kolom tabel dan <th> adalah singkatan dari header tabel.

Kode:

<tabel> <tr> <th> Nama </th> <th> Usia </th> <th> Profesi </th> </tr> <tr> <td> Jo <td> 27 </td> < td> Pengusaha </td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td> Perawat </td> </tr> <tr> <td> Simone < / td> <td> 39 </td> <td> Profesor </td> </tr> </table>

Keluaran:

Catatan: Nilai di dalam <tr> pertama adalah judul. Jadi, kami menggunakan <th> yang menerapkan efek teks tebal ke teks.

Tabel Pengelompokan

Anda dapat memperluas fungsi tabel menggunakan elemen pengelompokan tabel. Akan ada waktu ketika Anda perlu membuat tabel besar yang dibagi menjadi beberapa halaman.

Mengelompokkan data tabel Anda ke header, body dan footer, Anda dapat mengizinkan gulir independen. Header dan bagian tubuh akan mencetak ke setiap halaman di mana tabel Anda telah terbentang.

Tag pengelompokan tabel adalah:

  • <thead> </ thead> = Untuk membungkus judul tabel. Mencetak ke setiap halaman terpisah dari tabel.
  • <tbody> </ tbody> = Untuk membungkus data utama dari suatu tabel. Anda dapat memiliki <tbody> sebanyak yang Anda butuhkan. Tag <tbody> berarti kelompok data terpisah.
  • <tfoot> </ tfoot> = Untuk membungkus informasi footer dari meja. Mencetak ke setiap halaman terpisah dari tabel.

Harap dicatat bahwa itu tidak wajib untuk menggunakan pengelompokan. Anda dapat menggunakannya untuk membuat tabel yang lebih besar menjadi lebih mudah dibaca. Sementara beberapa pengembang khusus secara nyata menggunakan tag ini sebagai CSS Selectors.

Di sini adalah bagaimana kita dapat mengelompokkan tabel yang dicontohkan ke dalam <thead>, <tbody> dan <tfoot>:

Kode:

<table> <thead> <tr> <th> Name </th> <th> Usia </th> <th> Profesi </th> </tr> </thead> <tbody> <tr> <td> John </td> <td> 27 </td> <td> Pengusaha </td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td> Perawat </ td> </tr> <tr> <td> Simone </td> <td> 39 </td> <td> Profesor </td> </tr> </tbody> <tfoot> <tr> <td> Total Orang: </td> <td> 3 </td> </tr> </tfoot> </table>

Keluaran:

<form> </ form>

Elemen formulir digunakan untuk membuat formulir interaktif untuk halaman web. Formulir HTML berisi beberapa elemen berurutan. Misalnya: <label>, <input>, <textarea> dll.

Atribut aksi dalam bentuk sangat penting. Ini menunjuk ke sisi server atau halaman pihak ketiga untuk memproses informasi. Untuk pemrosesan, Anda perlu menentukan metode terlebih dahulu.

Anda dapat menggunakan salah satu dari dua metode, dapatkan atau posting. Dapatkan mengirim semua informasi dalam format URL di mana Post mengirim informasi di badan pesan.

Ada banyak jenis input untuk formulir. Jenis input yang sangat mendasar adalah teks. Ini ditulis sebagai <input type = "text">. Jenis mungkin juga radio, kotak centang, email, dan sebagainya. Harus ada input tipe kirim di bagian bawah untuk membuat tombol submit.

Tag <label> digunakan untuk membuat label dan mengaitkannya dengan input. Aturan menghubungkan label dengan input adalah yang memiliki atribut value sama untuk for = ”” label dan id = ”” atribut input.

Kode:

<form action = "#"> <label untuk = "firstname"> Nama Depan: </label> <input type = "text" id = "firstname"> <br> <label untuk = "lastname"> Nama Belakang: </label> <input type = "text" id = "lastname"> <br> <label untuk = "bio"> Bio Singkat: </label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Masukkan bio Anda di sini ... "> </textarea> <br> <label> Jenis Kelamin: </label> <br> <label untuk =" pria "> Pria </label> <tipe input = "radio" name = "gender" id = "male"> <br> <label untuk = "female"> Wanita </label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "kirim" value = "Kirim"> <form>

Keluaran:

Catatan: Saya telah mengarahkan tindakan ke nilai nol karena tidak terhubung ke server apa pun untuk memproses informasi.


Go Top

3- Atribut HTML

Atribut adalah salah satu jenis pengubah untuk tag HTML. Mereka menambahkan konfigurasi baru ke tag HTML.

Atribut tampak seperti atributename = "" dan duduk di tag HTML pembuka. Nilai atribut berada di antara tanda kutip ganda.

id = "" dan kelas = ""

id dan kelas adalah pengidentifikasi tag HTML. Nama yang berbeda ditujukan untuk elemen HTML yang berbeda menggunakan pengenal. Anda dapat menggunakan satu pengenal kelas untuk beberapa elemen. Tetapi Anda tidak dapat menggunakan satu pengidentifikasi id untuk beberapa elemen.

Kode:

<h1 class = "heading"> Ini adalah judul utama </ h1>

href = ""

href adalah singkatan dari Hypertext Reference. Mereka mengarahkan pengguna ke tautan referensi. Tag anchor <a> menggunakan href untuk mengirim pengguna ke URL tujuan.

Kode:

<a href="https://www.google.com/"> Google </a>

src = "”

src adalah singkatan dari sumber. Ini mendefinisikan sumber media atau sumber daya yang Anda gunakan dalam file HTML. Sumbernya bisa berupa URL lokal atau pihak ketiga.

Kode:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

alt adalah alternatif. Ini adalah teks cadangan yang digunakan ketika elemen HTML tidak dapat memuat.

Kode:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Markas Besar Google" />

style = ""

atribut gaya sering digunakan dalam tag HTML. Itu pekerjaan CSS dalam tag HTML. Properti styling Anda berada di antara tanda kutip ganda.

Kode:

<h2 style = "color: red"> Ini adalah judul lain </ h2>


Go Top

4- Tampilan Kode: Blok vs. Inline

Beberapa elemen selalu memulai pada baris baru dan mengambil lebar penuh yang tersedia. Ini adalah elemen "Blokir".

Ex: <div>, <p>, <h1> - <h6>, bentuk dll.

Beberapa elemen hanya membutuhkan ruang yang diperlukan dan tidak memulai pada baris baru. Ini adalah elemen "Inline".

Mis: <a>, <span>, <br>, <strong>, <img> dll.

Anda perlu membedakan elemen blok dari inline ketika Anda akan menggunakan gaya CSS. Dalam panduan HTML ini, itu tidak terlalu penting.

Kode:

<! DOCTYPE html> <html> <head> <title> Halaman web pertama saya </title> </head> <body> <h2> Ini adalah tajuk H2. Ini memiliki tampilan Blokir. </h2> <h2> Ini adalah <u> judul lain </u> judul H2. Di sini tag garis bawah memiliki tampilan Inline. </h2> </body> </html>

Keluaran:


Go Top

5- Kutipan ganda vs kutipan tunggal dalam HTML

Pertanyaan ini sangat jelas. Apa yang harus Anda gunakan dalam HTML? Kutipan tunggal atau kutipan ganda? Orang-orang tampaknya menggunakan keduanya tetapi mana yang benar?

Dalam HTML, kutipan tunggal dan kutipan ganda sama. Mereka tidak membuat perbedaan dalam output.

Anda dapat menggunakan siapa pun yang Anda sukai. Tetapi mencampurkan keduanya dalam satu halaman kode dianggap sebagai praktik yang buruk. Anda harus konsisten dengan salah satu dari mereka.


Go Top

6- Semantic HTML vs Non-semantik HTML

Semantic HTML adalah versi terbaru dari HTML, yang juga disebut HTML5. Ini adalah versi yang dikembangkan dari HTML non-semantik dan XHTML.

Mengapa HTML5 lebih baik? Di versi sebelumnya, elemen HTML diidentifikasi oleh id / nama kelas. Misalnya: <div id = "article"> </ div> dianggap sebagai artikel.

Di HTML5, <article> </ article> tag merepresentasikan dirinya sebagai artikel tanpa memerlukan identifier id / class.

Demi HTML5, sekarang mesin pencari dan aplikasi web lainnya dapat lebih memahami halaman web. Situs web semantik telah terbukti lebih baik untuk SEO.

Berikut ini daftar beberapa tag HTML5 populer:

  • <main> </ utama> = Ini untuk membungkus konten utama yang ingin Anda tunjukkan kepada pemirsa Anda.
  • <header> </ header> = Ini untuk menandai bagian header konten seperti judul atau meta penulis.
  • <article> </ article> = Ini menentukan konten yang ditentukan pengguna atau independen untuk pemirsa Anda.
  • <section> </ section> = Ini dapat mengelompokkan kode apa pun seperti header, footer atau sidebar. Bisa dibilang, itu adalah bentuk semantik dari sebuah div.
  • <footer> </ footer> = Ini adalah tempat konten footer, penafian atau teks hak cipta milik Anda.
  • <audio> </ audio> = Ini memungkinkan Anda memasukkan file audio tanpa masalah plugin apa pun.
  • <video> </ video> = Seperti <audio>, Anda dapat memasukkan video menggunakan tag ini tanpa masalah plugin.

Struktur HTML5 sederhana akan terlihat seperti ini:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Halaman web pertama saya </title> </head> <body> <header> <nav> <ul> < li> Menu 1 </li> <li> Menu 2 </li> </ul> </nav> </header> <main> <article> <header> <h2> Ini adalah judul artikel </ h2> <p> Diposting oleh John Doe </p> </header> <p> Konten artikel ada di sini </p> </article> </main> <footer> <p> Hak Cipta 2017 John Doe </ p> </footer> </body> </html>


Go Top

7- Validasi HTML

Sebagian besar profesional web memvalidasi kode mereka setelah menyelesaikannya. Mengapa perlu memvalidasi kode saat berfungsi dengan baik?

Ada dua kemungkinan alasan untuk memvalidasi kode Anda:

  1. Ini akan membantu Anda membuat kode lintas-browser dan lintas platform yang kompatibel. Kode mungkin tidak menunjukkan kesalahan apa pun di browser Anda saat ini, tetapi mungkin di yang lain. Validasi kode akan memperbaikinya.
  2. Mesin pencari dan program web lainnya dapat berhenti merayapi halaman Anda jika Anda memiliki kesalahan di dalamnya. Anda dapat mengkonfirmasi melalui validasi bahwa Anda tidak memiliki kesalahan besar.

W3C Validator adalah layanan paling populer untuk validasi kode. Mereka memiliki beberapa metode untuk memvalidasi kode. Anda dapat mengunggah file atau langsung memasukkan kode ke mesin validasinya.


Go Top

8- Sumber Daya Bermanfaat Lainnya

HTML adalah topik yang selalu dipelajari. Versi HTML yang lebih diperbarui mungkin akan datang lebih awal. Jadi, Anda harus tetap diperbarui dan terus berlatih. Berlatih adalah apa ace HTML.

Berikut ini beberapa sumber daya bermanfaat untuk Anda: