Belajar Cepat HTML Dasar

Assalamualaikum wr.wb

pada kesempatan kali ini kita akan mulai mempelajari beberapa HTML dasar, CSS, dan JavaScript dan mulai mengerjakan proyek untuk melengkapi Menu Web Design pada Santri E-Learning.
segala sesuatu yang Anda akan pelajari sepanjang jalan ini. jangan lupa membaca sembari mencoba. sediakan waktu luang untuk belajar, karna ini investasi masa depan. sediakan kopi juga😂

Pelajari HTML | Kata Pengantar

HTML ( Hyper text Markup Language) adalah kode yang digunakan untuk struktur halaman web dan isinya.
Misalnya, konten dapat disusun dalam satu set paragraf, daftar perpoin, atau menggunakan gambar dan tabel data.
Seperti judulnya, artikel ini akan memberi Anda pemahaman dasar tentang HTML dan fungsinya.
Pada intinya, HTML adalah bahasa yang cukup sederhana yang terdiri dari Elemen-elemen , yang dapat diterapkan pada potongan-potongan teks untuk memberi mereka makna yang berbeda dalam sebuah dokumen (Apakah itu paragraf? Apakah daftar berpoin? Apakah itu bagian dari sebuah tabel? ), menyusun dokumen menjadi bagian logis (Apakah memiliki header? Tiga kolom konten? Menu navigasi?), dan menyematkan konten seperti gambar dan video ke dalam halaman. Modul ini akan memperkenalkan dua yang pertama dan memperkenalkan konsep dasar dan sintaksis yang perlu Anda ketahui untuk memahami HTML.
HTML menyediakan kerangka halaman Web. Pelajari dasar-dasar HTML; pelajari tag dasar, pelajari cara menulis HTML semantik, pahami SEO dasar, pelajari cara membagi halaman Anda menjadi beberapa bagian yang akan membantu Anda mendesainnya.

Jadi apa itu HTML?

HTML bukan bahasa pemrograman; itu adalah bahasa markup yang mendefinisikan struktur konten Anda.
HTML terdiri dari serangkaian elemen , yang Anda gunakan untuk melampirkan, atau membungkus, berbagai bagian konten untuk membuatnya tampak dengan cara tertentu, atau bertindak dengan cara tertentu. Tag terlampir dapat membuat hyperlink kata atau gambar ke tempat lain, dapat membuat huruf miring menjadi huruf, dapat membuat font lebih besar atau lebih kecil, dan sebagainya.

langkah-langkah dasar untuk menyiapkan dokumen HTML yang baik .
1. Ketahui penamaan yang benar dari apa yang Anda tulis: dalam HTML, ada istilah khusus untuk setiap komponen. 
Tampaknya tidak begitu penting ketika Anda menulis sendiri, tetapi mengetahui nama yang tepat untuk setiap hal akan membantu Anda. 
Berikut adalah beberapa istilah HTML dasar:
– Elemen: elemen HTML dibentuk oleh tag pembuka, konten, dan tag penutup. Ada beberapa jenis elemen, seperti paragraf, div, dan heading. Saya akan menjelaskan lebih banyak tentang itu nanti.
– Tags: sebuah pembukaan tag tanda awal elemen, dan terdiri dari tanda pembuka (<), diikuti dengan nama elemen, dan setelah itu (>) sebagai tag penutup menunjukkan akhir dari elemen HTML. Ini memiliki formasi yang sama dengan tag pembuka tetapi memiliki garis miring (/) sebelum nama elemen.
*opening tag (tag pembuka)
*closing tag (tag penutup)

– Atribut: atribut adalah konten yang ditambahkan ke tag pembuka elemen dan memiliki banyak kegunaan, dari memberikan informasi hingga mengubah gaya. Itu dibentuk oleh nama atribut dan nilainya. Atribut yang umum digunakan adalah id dan class.

2. Jangan lupa deklarasi <! DOCTYPE>: 
itu harus selalu menjadi baris pertama pada setiap dokumen HTML. Ini bukan tag, tetapi instruksi ke browser web tentang jenis dokumen apa yang diharapkan, dan versi HTML halaman yang ditulis. Jika anda Lupa itu dapat menyebabkan rendering aneh halaman Anda. Deklarasi doctype yang paling sederhana dan paling dapat diandalkan untuk digunakan adalah yang didefinisikan dalam HTML5: 
<! DOCTYPE html>
Juga, jangan pernah lupa untuk menyimpan file Anda dengan ekstensi .html sehingga OS (Operating System) Anda akan mengenalinya sebagai dokumen HTML.
3. Tag HTML: 
meskipun deklarasi !doctype memberi tahu browser web bahasa apa yang digunakan untuk menulis dokumen Anda, itu tidak benar-benar menambahkan struktur atau konten HTML apa pun. Ini dilakukan oleh elemen <html>, yang seharusnya menjadi hal kedua dalam dokumen Anda. Setiap elemen lain dari halaman web harus berada di antara tag HTML pembuka (<html>) dan penutup (</html>).
Menurut W3C ( World Wide Web Consortium ), Anda harus mendeklarasikan bahasa utama untuk setiap halaman web. Ini membantu mesin pencari dan browser, dan itu dilakukan dengan menggunakan atribut lang di dalam tag pembuka <html>, seperti ini: <html lang = “en”>.

4. Di dalam <head>: 
elemen <head> terletak tepat setelah tag pembuka <html>. Ini berisi informasi yang tidak ditampilkan langsung di halaman web, metadata. Ini adalah informasi tentang halaman itu sendiri, seperti judul dokumen (ditampilkan pada bilah judul di jendela browser), dan tautan ke file eksternal, seperti lembar gaya CSS. Tag berikut menjelaskan metadata: <title>, <style>, <meta>, <link>, <script>, dan <base>.
Satu tag <meta> yang penting adalah charset: <meta charset = “UTF-8”>. Ini digunakan untuk memberi tahu browser web tentang rangkaian karakter apa yang digunakan pada dokumen. UTF-8 (Unicode) mencakup hampir semua karakter dan simbol di dunia.
Tag <meta> penting lainnya yang diperkenalkan dalam HTML5 adalah viewport: <meta name = “viewport” content = “width = lebar perangkat, skala awal = 1.0”>. Area pandang adalah area yang terlihat pengguna dari halaman web, dan ini bervariasi dengan perangkat. Elemen viewport <meta> memberikan instruksi browser tentang cara mengontrol dimensi dan penskalaan halaman. Itu pasti akan membantu Anda untuk membuat halaman web Anda responsif.
masih bingung? mari kita mencoba praktek.
Silahkan Download Aplikasi SPCK Editor di Playstore atau bisa Gunakan Codepen.io
untuk mencoba praktek html kali ini.
Disini saya akan mencoba menggunakan aplikasi SPCK Editor untuk membuat Html
silahkan download aplikasinya, mari kita coba !.
Setelah Download silahkan buka aplikasi tersebut, kemudian akan ada tampilan seperti berikut.

*langsung saja klik baik.

Maka anda akan melihat tampilan seperti berikut, kemudian klik. ikuti tanda panah.
Ikuti Tanda Panah, klik +
kemudian klik, Proyek Baru.
Setelah itu pilih HTML.
kemudian pilih, No CSS Framework.
Lalu Biarkan standar. dan langsung klik buat.
Maka tanpilan akan terlihat seperti ini.
pilih saja file index.html (panah merah).
disini kita sudah selesai membuat proyek pertama kita. dengan tampilan seperti ini.
silahkan klik run (jalankan) tombol berwarna hijau disebelah kanan layar.
maka kemudian kita akan dibawa untuk pertama kalinya pada halaman html kita.
klik saja kembali, dan mari kita kupas satu satu secara detail.
Masih ingat pada artikel -Elemen & -Tag 
Mewajibkan kita setiap kali menulis html harus dengan tag pembuka, konten kemudian tag penutup.?
perhatikan gambar ini, bahwa setiap kali ada tag <html> pasti ada tag </html>
tag <head> pasti ada pula tag </head>
tag <body> pasti ada jua tag </body>
Perhatikan.
gimana? udah ketemu belum?
mari kita hapus semua tag disini agar lebih mudah mencontohkannya.
setelah hapus semua mari kita coba membuat tag pembuka, konten dan tag penutup yakni<p>konten</p>
<p> artinya paragraf
setelahh itu coba jalankan program.
ikuti tanda panah

makaa kita akan melihat konten halaman kita seperti berikut.
Bagian utama / anatomi dari elemen adalah sebagai berikut:

  1. Tag pembuka: Ini terdiri dari nama elemen (dalam hal ini, <p>), dibungkus dengan kurung sudut buka < dan kurung sudut tutup . Tag pembuka ini menandai di mana elemen dimulai atau mulai berlaku. Dalam contoh ini, ia mendahului awal teks paragraf. <p>
  2. Tag penutup: Ini sama dengan tag pembuka, kecuali bahwa itu termasuk garis miring di depan nama elemen. Ini menyatakan di mana elemen berakhir yakni </p> *dan ingat Gagal menambahkan tag penutup adalah salah satu kesalahan standar pemula dan dapat menyebabkan hasil kesalahan.
  3. Konten: Ini adalah konten elemen, yang dalam hal ini, hanya teks.
  4. Elemen: Tag pembuka, tag penutup dan konten bersama-sama terdiri dari elemen.

kembali ke program. dan silahkan desain ulang kembali.

ingatlah pada artikel -•2 Jangan Lupa Deklarasi <!DOCTYPE> harus berada pada awalan tag atau elemen lain.
kemudian disusul dengan tag pembuka dan penutup pada bagian <head> dalam arti kepala : hal yang ditampilkan diatas halaman. jangan lupa tutup dengan </head>
*ingat bahwa konten yang boleh berada pada bagian head adalah hal penting seperti title (judul pada halaman). 
Kemudian disusul dengan <body> dan penutup </body> dalam arti badan : isi dari hal yang akan kita tampilkan di halaman / browser (bebas apa saja kontennya , berbeda dengan tag head hanya tag tertentu yang boleh ada dibagian head)
contoh sebagai berikut.
maka ketika kita jalankan program seperti ini.
mudah bukan?
sekarang mari kita coba praktek lebih dalam lagi. sebelum kembali ke program editor.
kita wajib tau keseluruhan struktur tag dan elemen apa saja yang ada pada html. berikut adalah hal hal atau struktur yang wajib pada bagian html.
1. Deklarasi html : <!doctype html>
kegunaan memberitahu pada browser type file yang akan ditampilkan, yakni html.
2. tag html :
pembuka & penutup <html></html>
3. tag head :
pembuka dan penutup <head></head>
4. tag metadata :
tag elemen <meta> yang hanya boleh pada bagian <head> mencakup <meta name , property & content>
Tag Wajib Dalam Meta dibagian <head
• meta document karakter encoding
contoh : <meta charset=”utf-8″>
• meta author, nama, & deskripsi
contoh :
<meta name=”author” content=”Mang Santri”>
<meta name=”description” content=”Penulis Santri E-Learning”>
• meta property name, content , browser yang cocok, optimasi layar dan favicon / gambar.
contoh :
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta property=”og:image” content=”https://www.santri.website/favicon.ico”>
<meta property=”og:description” content=”Deskripsi Santri E-Learning”>
<meta property=”og:title” content=”Santri E-Learning”>
• meta twitter (karna memiliki meta sendiri)
contoh : <meta name=”twitter:title” content=”Santri E-Learning”>

5. tag title : (Judul Halaman)
tag <title> yang juga hanya boleh pada bagian <head
contoh : <title>Toko Santri E-Learning</title>
6. tag stylesheet / css (gaya tampilan halaman , mulai dari warna dan penempatan dari keseluruhan halaman).
dan ini masih dalam bagian <head
contoh pemanggilan css pada halaman web: <link rel=”stylesheet” href=”style.css”>
7. tag body : (isi kontent dalam halaman badan)
tag bebas dalam body (boleh tag apa saja)
dan biasanya terdiri dari
<h1> sampai <h6> :
<p> untuk paragraf
dan tag elemen dan atribut lainnnya.
8. tag javascript : elemen pemanggilan fungsi js atau javascript.
contoh : <script src=”main.js”></script>

9. tag penutup body dan html : tanda berakhirnya pembuatan halaman/web
contoh : </body>
kemudian : </html>

Kesimpulan :  disetiap ada tag pembuka, pasti harus diakhiri dengan tag penutup.
secara keseluruhan maka :
<!DOCTYPE HTML>
<html>
   <head
       <metadata>
          <title> </title>
<—pemanggilan css–>
   </head>
<body>
isi dari seluruh konten yang akan ditampilkan
<–pemanggilan js–>
</body>
</html>
*note : selalu gunakan : <–nama–> untuk setiap komentar atau pemisah atau tanda dalam bagian semisal pemanggilan css dan js. agar mudah ditemukan saat diedit.

jika kita rangkai hal hal diatas maka kita aplikasikan ke editor jadi seperti ini.
dan bila dijalankan akan seperti ini
bagaimana? mudah bukan?
nantikan artikel selanjutnya yaaa. see you next time
selamat belajar, wassalam.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *