HTML

Belajar HTML Lengkap Untuk Pemula Disertai Contoh Untuk Latihan

Labkom99 telah banyak memberikan pemahaman tentang beberapa pengetahuan tentang belajar dasar HTML. Kali ini juga akan membuat ringkasan pembelajaran tentang cara cepat tantang Dasar Pemrograman HTML.

1. Definisi HTML


HTML atau Hypertext Markup Language adalah bahasa yang ditulis untuk browser. Saat ini merupakan bahasa yang paling banyak digunakan di web. HTML juga terus diperbarui, dan versi terbaru telah muncul HTML5. Banyak fitur baru telah muncul di HTML5, dan beberapa elemen lama juga telah ditinggalkan. Baca juga Belajar HTML5 Cepat Dan Mudah Langsung Bisa Praktik. Setelah kita menulis file html, buka di browser. Peramban utama termasuk IE, Firefox, Chrome, Google, dll.

2. Elemen Tag HTML


Elemen HTML terdiri dari tag pembuka dan penutup. Seperti <p><p/>,<h1><h1/>. Meskipun jika kita tidak mengetahui arti dari tag tertentu, tag tersebut harus dalam format ini: ada pasangan pembuka <> dan penutup.

Huruf kecil direkomendasikan untuk nama label umum. Label memiliki atribut, dan atribut digunakan untuk mewakili karakteristik label. Misalnya, kita menggunakan ukuran properti untuk mengukur sebuah apel. Jadi, ukuran dapat digunakan untuk mengkarakterisasi apel. Atribut ditulis dalam tag, dan itu ada di tag awal.

3. Struktur Dasar HTML


Struktur terdiri dari header halaman web dan badan halaman web. Contoh berikut:

<html>
    <head>
        <title>Judul Halaman</title>
    </head>
    <body>
      Isi Halaman
    </body>
</html>

Pada contoh di atas, tag pertama memberitahu browser bahwa ini adalah awal dari dokumen html. Tag terakhir dari dokumen Html adalah yang memberitahu browser bahwa ini adalah akhir dari html. Teks di antara tag adalah informasi header,dan teks di antara adalah judul dokumen, yang akan ditampilkan di bilah judul jendela browser.

4. Halaman Standard HTML


Pernyataan Deklarasi

Sebelum <html> tuliskan pernyataan deklarasi dokumen: <!DOCTYPE HTML>, tentunya bisa juga ditulis dengan huruf kecil. Peran dari deklarasi dokumen adalah untuk memberitahu browser bahwa dokumen tersebut mengikuti spesifikasi html.

Title Atau Judul

Dalam keadaan normal, kita akan mengatur judul dokumen html. Efek dari ini adalah untuk membuat pengguna terlihat dan merasa ramah. Tagnya adalah <title></title> dan nama judul ditempatkan di dalam tag.

Pengkodean Halaman

Ada banyak jenis penyandian, tetapi utf-8 dan gb2312 biasanya digunakan. utf-8 adalah kode multi-bahasa, dan gb2312 adalah kode yang disederhanakan. Untuk pertanyaan rinci tentang pengkodean, Anda dapat menelusuri blog.

Pernyataan untuk mengatur encoding halaman web adalah <meta charset= “utf-8” />, yang didefinisikan dalam tag.

Kata Kunci Halaman Konten Atau Keyword

Kami dapat mengatur beberapa kata kunci dalam dokumen dan memperkenalkan konten. Keuntungannya adalah ketika halaman web kami dipublikasikan di Internet, pengguna dapat menemukan beberapa halaman web yang cocok dengan memasukkan kata kunci di kotak pencarian. Dengan cara ini, halaman web kita dapat lebih mudah diakses oleh orang lain.

5. Belajar HTML Elemen Umum


Belajar HTML Baris Baru <br>

Istirahat baris adalah yang paling normal untuk mengedit teks. Ketika teks mengisi satu baris, itu perlu dibungkus. Atau bungkus baris dalam teks sesuai kebutuhan, tidak apa-apa. Contoh berikut:

<body>
     <br/>
</body>

Belajar HTML Paragraf


Saat menulis artikel, kita dapat menggunakan tag p untuk mendefinisikan sebuah paragraf. Dua paragraf didefinisikan sebagai berikut:

<p>
UTF-8. UTF-8 adalah implementasi unicode yang paling banyak digunakan di Internet.
</p>
<p>
Kode GBK, termasuk kode di GB2312, banyak digunakan
</p>

Setelah mendefinisikan paragraf, Anda dapat menggunakan atribut align untuk mengatur paragraf. Nilai dari atribut align meliputi kiri (left-aligned), center (center-aligned), dan kanan (right-aligned).

<p align=“center”>
UTF-8. UTF-8 adalah implementasi unicode yang paling banyak digunakan di Internet.        
</p>

Baca juga Membuat Paragraf HTML Belajar HTML Dengan Mudah

Judul


Judul memiliki enam ukuran, semakin besar angka setelah h, semakin kecil masing-masing huruf judulnya.

<h1>Judul 1</h1>             

<h2>Judul 2</h2>

<h3>Judul 3</h3>

<h4>Judul 4</h4>

<h5>Judul 5</h5>

<h6>Judul 6</h6>

Pemformatan Teks


Beberapa elemen yang biasa digunakan untuk mengatur font teks: ​

​ <b>Menentukan teks tebal</b><br/>

​ <i> Mendefinisikan teks miring</i><br/>

​ <del>Tentukan hapus teks</del><br/>

​ <sup>Tentukan kata superskrip</sup><br/>

​ <sub>Tentukan kata subskrip</sub><br/>

Membuat Hyperlink


Tag a digunakan untuk mendefinisikan hyperlink yang harus berupa atribut href. Fungsi dari href adalah untuk menunjukkan URL yang hyperlink akan ditautkan.

Selain atribut href, ada juga atribut judul yang menunjukkan informasi cepat dari tautan. Atribut target menunjukkan metode pembukaan tautan. Yaitu, ketika tautan diklik, pilih apakah akan membukanya di halaman lain atau halaman ini.

Nilai atributnya meliputi _blank (halaman kosong baru), _self (halaman saat ini), dan _top (halaman saat ini).

<a href="#" target="_blank">Labkom99</a> 

Nilai href dapat berupa tautan eksternal atau file internal, seperti file ***.html.

<a href=“http://www.labkom99.com”>Labkom99</a>

<a href=“http://www.labkom99.com/jasa-buat-blog”> Buat Website </a>

href juga dapat menautkan ke alamat lain, seperti email, telepon, sms.

<a href=“Wa.me”>Wa</a>

<a href=“tel:nomer”>Telphone</a>

<a href="sms:081xxxxxxx">SMS</a>

Anchor


Terkadang ketika kita menelusuri web, kita akan menemukan bahwa beberapa halaman web lebih ramah pengguna dan akan ada tombol untuk mengklik kembali ke atas. Efek ini sebenarnya dapat dicapai dengan tag jangkar. Jangkar adalah klik yang menyebabkan pengguna melompat ke bagian dokumen.

<a href="#namaloksi"> </a>

<a name="nama lokasi"> </a>

Seperti contoh kode:

<a href="#map">Lompat</a>

<p id="map">Kode</p>

Image <img/>


Image <img />

AttributesAttribute ValueIllustrate
srcurlThe address of the image resource
widthPixels (px)image width
heightPixels (px)image height
altalt textalt text for images

Contoh sebagai berikut:

<img src="img/labkom99.jpg" width="100" height="100" alt="labkom99" />

Alamat


Ketika kita memperkenalkan sebuah file, kita harus menulis alamatnya. Yaitu dimana direktori tersebut berada. Dibagi menjadi beberapa situasi berikut:

situationHtml File LocationImage LocationSpelling
the same directoryD:/html/demo.htmlD:/html/01.jpg<img src=”01.jpg” /><img src=”./01.jpg” />
next level directoryD:/html/demo.htmlD:/html/img/01.jpg<img src=”images/01.jpg”/>
previous directoryD:/html/demo.htmlD:/01.jpg<img src=”…/01.jpg”/>
Different directories on the same levelD:/html/demo.htmlD:/img/01.jpg<img src=”…/images/01.jpg”/>

Instruksi terkait:

./ Direktori saat ini

…/ kembali ke direktori sebelumnya

image/ masuk ke direktori tingkat pertama

…/images/ kembali ke direktori sebelumnya, lalu masuk ke direktori gambar

Belajar HTML List


Daftar tidak berurutan

Daftar juga merupakan elemen yang umum digunakan dalam HTML. Daftar tidak berurutan diwakili oleh <ul><li></li></ul>. Bisa menggunakan <ul type=”circle”>, <ul type=”disc”> atau <ul type=”square”>

menjelaskan:

atribut: tipe

Nilai atribut: simbol

Contoh disc adalah sebagai berikut:

<ul type="disc">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

  </ul>

Daftar berurutan

Daftar berurutan menggunakan sistem numerik atau alfabet untuk mengatur informasi yang terkandung dalam daftar. Daftar berurutan dapat menyusun item menggunakan angka (default), huruf besar, huruf kecil, angka Romawi huruf besar, dan angka Romawi huruf kecil.

Penjelasan: atribut deskripsi nilai atribut tipe 1, a, A, i, saya digunakan untuk memberi tanda di depan item start Nilai awal untuk pengurutan numerik gambar

<ol type="1" start="2">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

          </ol>

          <ol type="a">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

          </ol>

          <ol type="A">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

          </ol>

          <ol type="i">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

          </ol>

          <ol type="Aku">

          <li>Apel</li>

          <li>Pisang</li>

          <li>Mangga</li>

    </ol>
Belajar HTML

Daftar definisi

Daftar definisi digunakan untuk mengatur istilah dan definisinya. Setiap informasi yang berisi beberapa istilah dan penjelasan terkait dapat diatur menggunakan daftar definisi.

<dl>

<dt>Hobi</dt>

<dd>Coding</dd>

<dt>Hobi</dt>

<dd>Jalan Jalan</dd>

<dd>Menyanyi</dd>

</dl>
1 2 3Next page

Wanglu Piao

Saya seorang content writer sekaligus editor di Labkom99.com. Menyukai dunia digital media dan SEO.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button