Kembali lagi di web saya...kali ini admin akan mengajak kalian belajar bersama tentang dasar dasar pemrograman ya guys:)...
Sebelum lanjut ke materi ngoding,sebaiknya kalian klik dulu tombol subrek dan aktipin loncengnya>_<
Anjay lonceng:v
#belajar dasar dasar html/part 1
A.APA ITU HTML?
Sebelum lanjut ke materi...kita perlu mengenal dulu,apa itu html.
Html adalah singkatan dari "Hyper Text Markup Language".html bukanlah suatu bahasa pemrograman,namun html digunakan untuk membuat dam menyusun suatu paragraf.heading atau link tautan,dan blockquote untuk halaman web dan aplikasi.
Nah...kalian unduh dulu ngab yang belum punya aplikasinya
B.MACAM MACAM KODE HTML
- 1.TAG DASAR
1.<!DOCTYPE html>
Sebelum membuat codingan,kita harus membuat identifikasi menjadi dokumen html(agar mesin2 dapat mengkonfirmasi bahwa kita akan membuat dokumen dengan html)
2.<html>
Yaitu tag pembuka untuk membuat dokumen
3.<head>
Informasi meta tentang dokumen
4.<title>
Membuat judul halaman yang akan ditampilkan di browser
5.<body>
Tempat dibuatnya seluruh konten dalam website menggunakan html.....
Nah tag kode diatas setelah diberi isi/konten,maka harus ditutup pula dengan tag kode</> misal:
<html>ditutup dengan </html> .Intinya diberi tambahan</>
Nah...diatas adalah tag dasar pada html.
Contoh pembuatan tag dasar html:
<!DOCTYPE html>
<html>
<head>
<title>belajar ngoding</title>
</head>
<body>
Isi dari konten web kita
</body>
</html>
Nanti web tersebut tampilannya menjadi seperti ini:
Nah...kita juga bisa membuat tag judul untuk memberi ukuran pada teks
- 2.TAG JUDUL
1.<h1>sampai<h6>
Untuk memberi ukuran pada teks
2.<hr>
Digunakan untuk memberi garis pada html
Seperti ini contohnya...
<!DOCTYPE html>
<html>
<body>
<h1>Yok Ngoding Yok!</h1>
<p>biar ga ketinggalan jaman:v.</p>
<hr>
<h2>Yok Ngoding Yok!</h2>
<p>biar ga ketinggalan jaman:v</p>
<hr>
<h6>Yok Ngoding Yok!</h6>
<p>Ngoding is Odading:v</p>
</body>
</html>
Nanti jadinya seperti ini:)
- 3.TAG PARAGRAF
1.<p>
Untuk membuat paragraf pada suatu teks html
2.<br>
Untuk membuat garis baru/memberi jarak pada teks.
Seperti ini contohnya:
<!DOCTYPE html>
<html>
<body>
<p>Di html,garis dan enter diabaikan/tidak dianggap dan menjadi suatu paragraf:</p>
<br> contoh:
<p>
Erik anak yang ganteng:v.
Sering juga mendapat ranking 1.
Tapi sayang....
Disia siain :v awokawoakwok.
</p>
</body>
</html>
Hasilnya akan seperti ini:
- 4.TAG STYLE
1.style
Atribut untuk element styling pada html
2.background-color
Memberikan warna pada latar belakang
3.color
Memberikan warna pada teks
4.font-family
Mengubah jenis font pada teks
5.font-size
Memberi ukuran pada teks html
6.text-align
Mengatur perataan teks(tempat)➡center=tengah,left=kiri,right=kanan,justify=kanankiri
Contohnya seperti ini gan:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">judul teksnya</h1>
<p style="text-align:center;">isi/paragraf/konten dari web kita ngab.</p>
</body>
</html>
Hasilnya jadi gini ngab:
Semua teksnya ada di tengah karena gw pake teks align yang center ya ngab,kalo sobat ngap pilih right juga bisa kok:)
- 5.TAG FORMATING
1.<b>
Untuk menebalkan teks(bold)
2.<i>
Untuk memiringkan teks(italiano)
3.<strong>
Biasanya digunakan pada kata2 penting
4.<em>
Membuat teks ditekankan
5.<small>
Membuat teks menjadi lebih kecil
6.<mark>
Membuat teks ditandai
7.<ins>
Teks dimasukkan(insert)
8.<sub>
Teks subscribe
9.<sup>
Teks superscript
10.<del>
Teks yang dicoret
Kira2 seperti ini contohnya:
<!DOCTYPE html>
<html>
<body>
<p><b>teks tebal/bold</b></p>
<p><i>teks miring/ italic</i></p>
<p>Teks<sub> subscript</sub> and <sup>superscript</sup></p>
<p><mark>teks mark</mark></p>
<p><small>teks small</small></p>
<p><em>teks em</em></p>
<p><del>teks del</del></p>
</body>
</html>Hasilnya jadi gini ngab:
- 6.TAG GAMBAR
1.<img>
Untuk mendefinisikan gambar
2.src
Untuk menentukan sumber gambar(source)
3.alt
Untuk mendefinisikan teks pada gambar,jika gambar tdk dapat ditampilkan
4.width&height
Untuk mengatur tinggi dan lebar gambar
5.float
Untuk properti fload image pada css
6.<map>
Mendefinisikan gambar peta
7.<area>
Mendefinisikan area atau daerah daerah gambar pada peta
8.<picture>
Menampilkan gambar yg berbeda untuk perangkat yang berbeda
Contohnya gini sayang:)
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300">
</body>
</html>
Hasinya seperti ini sayaank:v
Nah..jika file img tadi tidak ada di file kita/penyimpanan kita maka teks alt akan mendefinisikannya...seperti ini
- 7.TAG FORM
1.<form>
Membuat formulir untuk mengumpulkan input pengguna
2.<input>
Membuat type inputan pd form yang akan dibuat
3.<textare>
Untuk mendefinisikan field input
4.<fieldset>
Untuk mengelompokkan elemen yg terdapat pada form
5.<label>
Untuk memberikan label pada elemen input
6.<select>
Membentuk input dengan pilihan yang berbentuk list drop down
7.<optgroup>
Mengelompokkan beberapa pilihan pada daftar pilihan input
8.<option>
Mendefinisikan opsi yang bisa dipilih
9.<output>
Menampilkan hasil dari hitungan
10.<button>
Membuat button
11.<datalist>
Membuat daftar pilihan untuk input data
Nah...contohnya gini ngab:v
<!DOCTYPE html>
<html>
<body>
<h2>Membuat datalist</h2>
<p>Elemen datalist menentukan daftar opsi yang ditetapkan untuk elemen masukan</p>
<form action="/action_page.php">
<input list="paham?" name="okeh?">
<datalist id="paham?">
<option value="iya">
<option value="yoi">
<option value="siap">
<option value="Y">
<option value="okey">
</datalist>
<input type="submit">
</form>
<p><b>Nb:</b>silahkan comment dan share yah man teman:)semoga bermanfaat.aamiin </p>
</body>
</html>Hasilnya seperti ini:
Nah...ada list datanya kawan:D
- 8.TAG DAFTAR/LIST
1.<ul>
Untuk membuat tampilan daftar seperti simbol(bullet,cyrcle,dll)
2.<ol>
Untuk membuat daftar seperti huruf romawi,nomor
3.<li>
Untuk menampilkan berbagai item list
4.<dl>
Mendefinisikan daftar deskripsi
5.<dt>
Mendefinisikan instilah deskripsi
6.<dd>
Menggambarkan istilah dalam daftar deskripsi
7.<type>
Untuk menentukan jenis penomoran
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h1>Pelajari juga:</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</body>
</html>
Hasilnya seperti ini gan:
Nah....selesai sudah materi hari ini...jangan luap share ya teman teman,agar web saya semakin berkembang dan bermanfaat..
Assalamualaikum....
