Cara menggunakan koding html

Question

Saya yakin, Anda pernah mendengar tentang HTML sebelumnya. Tapi tidak ada salahnya membaca kembali artikel ini

Table of Contents Show

Apa itu HTML?
Sejarah dan Asal Usul HTML
Pengembangan dan Versi HTML
Alat untuk Mempelajari HTML
1. Editor Teks untuk Menulis HTML
2. Peramban Web untuk Membuka HTML
Membuat Dokumen HTML Pertama Anda
Nama file untuk HTML
1. ekstensi file HTML
2. Nama Khusus untuk Beranda
3. Hindari Beberapa Hal Ini
Struktur Dasar HTML
1. Bagian Deklarasi
2. bagian KEPALA
3. Bagian tubuh
Pengkodean HTML langkah demi langkah?
Tulis HTML di mana?
Ada kode HTML?
HTML dimulai dengan kode apa?

Dalam tutorial ini, kami akan benar-benar membahas dari awal hingga Anda dapat membuat halaman HTML Anda sendiri

Baik…

Mari kita mulai

Apa itu HTML?

Mari kita lihat pengertian HTML menurut wikipedia

HTML atau HyperText Markup Language adalah bahasa markup untuk membuat halaman web.

Apakah Anda mengerti artinya?

Jika Anda tidak mengerti, di sini saya jelaskan ...

Jadi, HTML adalah bahasa yang menggunakan markup atau penanda untuk membuat halaman web

Penanda atau markup ini, nanti kita sebut Tag

HTML berperan dalam menentukan struktur konten dan tampilan sebuah web

Jika kita bandingkan dengan ini

HTML seperti blok bangunan sebuah rumah. Batu bata ini dapat ditumpuk, hingga menjadi pondasi dasar

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain yang melengkapinya yaitu CSS dan Javascript

CSS adalah bahasa khusus yang digunakan untuk mempercantik tampilan web

Kemudian Javascript bertanggung jawab untuk membuat halaman web menjadi hidup. Karena dengan Javascript kita bisa menentukan fungsi dan efek yang akan diterapkan pada website

Oh ya, pada tutorial ini. Kita akan fokus dulu membahas tentang HTML. Jika Anda ingin belajar CSS dan Javascript, silakan buka

Tutorial CSS untuk Pemula
Tutorial Javascript untuk Pemula

Oke, saya anggap Anda sudah paham apa itu HTML dan perannya dalam pengembangan web

Selanjutnya, mari kita pahami lebih baik. kita akan membahas sejarah dan asal usul HTML

Sejarah dan Asal Usul HTML

Sejarah lengkap HTML juga dapat dibaca di

Sejarah dan Asal Usul HTML

Dalam tutorial ini, kita akan membahas secara singkat sejarahnya

Kisah awal kemunculan HTML dimulai pada tahun 1980

Saat itu seorang ilmuwan bernama Tim Berners-Lee sedang bekerja di CERN

Tim Berners-Lee (2009)

CERN sendiri bukanlah perusahaan yang berhubungan dengan teknologi atau internet. CERN adalah singkatan dari bahasa Perancis. Dewan Eropa untuk Riset Nuklir

Yang berarti. Komisi Eropa untuk Riset Fisika Nuklir

Situs web CERN (2020)

Para peneliti di CERN membutuhkan suatu cara atau sistem untuk dapat saling berbagi dokumen penelitian

Tim kemudian mencoba membuat INQUIRE. Ini adalah perangkat lunak hypertext yang akan digunakan untuk berbagi dokumen

Kemudian pada tahun 1989, Tim memperkenalkan ide hypertext berbasis internet. Ini nantinya akan menjadi cikal bakal HTML

Tim kemudian memulai proyek baru dengan rekannya Robert Cailliau yang merupakan insinyur sistem di CERN. Namun, proyek ini tidak secara resmi diadopsi oleh CERN

Tim Berners-Lee (kiri) dan Robert Cailliau (kanan)

Pada akhir 1991, Tim Berners-Lee menerbitkan sebuah dokumen berjudul. "Tag HTML"

Dokumen ini berisi penjelasan tentang 18 tag awal yang menjadi konsep dasar HTML

HTML sebenarnya dirancang berdasarkan konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language).

SGML adalah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, daftar, judul, dll

Bisa dihitung

HTML merupakan implementasi dari SGML

Jika kita perhatikan, beberapa tag seperti <title>, <p>, <li>, dan <h1> hingga <h6> berasal dari SGML. Namun, tidak semua yang ada di HTML berasal dari SGML

Salah satunya adalah Hyperlink, yang murni merupakan gagasan dari Tim Berners-Lee

Ide tentang HTML ini kemudian menyebar ke milis dan langsung menjadi perhatian berbagai ilmuwan komputer di seluruh dunia

Pengembangan dan Versi HTML

HTML memiliki beberapa versi, dari yang tertua hingga yang terbaru. Berikut adalah pengembangan dari versi HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

0 HTML 1. 0 (Juni 1993) adalah versi HTML pertama, tetapi tidak dirilis secara resmi;

HTML 2. 0 (24 November 1995) adalah versi HTML kedua yang secara resmi dirilis pertama kali di pasaran dan dirilis oleh IETF;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

0 HTML3. 0 (28 Maret 1995) versi ini gagal beredar, karena banyaknya perubahan yang memicu perdebatan;

HTML 3. 2 (14 Januari 1997) versi resmi yang dirilis oleh W3C untuk pertama kalinya
HTML4. 0 (24 April 1998) versi yang diperluas dari yang sebelumnya;
HTML4. 01 (24 Desember 1999) versi perbaikan dari HTML 4. 0;
XHTML 1. 0 (26 Januari 2000) perpanjangan dari HTML 4. 01 dengan mengadopsi XML;
XHTML 2. 0 (Agustus 2002—Juli 2006) versi kedua dari XHTML;
HTML 5 (28 Oktober 2014) versi html saat ini

Versi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

_2 adalah versi tidak resmi yang dirilis ke pasar. Bentuknya masih sebatas rancangan spesifikasi

Itu berarti

Tidak ada yang menggunakan versi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

_2 untuk membuat web

Jadi, versi mana yang akan kita gunakan?

Tentunya versi terbaru yaitu HTML 5

Alat untuk Mempelajari HTML

Baik sekarang. Saatnya berlatih

Namun sebelum itu, sebaiknya siapkan beberapa alat yang akan digunakan untuk latihan

Perlengkapan yang harus anda siapkan adalah

1. Editor Teks untuk Menulis HTML

Kami akan menggunakan editor teks untuk menulis kode HTML. Anda bebas menggunakan editor teks apa pun

Notepad bisa, Notepad++ juga bisa

Apapun text editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML

Namun, pada tutorial ini. kita akan menggunakan editor teks Visual Studio Code

2. Peramban Web untuk Membuka HTML

Kami akan menggunakan browser web untuk membuka HTML. Anda juga bebas menggunakan browser web apa pun

Saranku. gunakan web browser terbaru, karena kita juga akan menggunakan HTML versi terbaru

Firefox atau Google Chrome, saya rasa sudah cukup

Membuat Dokumen HTML Pertama Anda

Sekarang waktunya telah tiba, Anda harus mencoba membuat dokumen HTML sendiri. Metodenya sangat sederhana

Mari kita mulai dengan membuka editor teks, lalu menulis kode berikut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_

Setelah itu, simpan dengan nama

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4

Kiat. bagi anda yang menggunakan Notepad di Windows, simpan nama file dengan tanda petik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

5 agar berekstensi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

6 bukan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

7

Atau anda bisa mengaktifkan fitur show extension pada windows explorer, sehingga anda bisa mengetahui ekstensi filenya

Jalan. buka menu Lihat, lalu centang Ekstensi nama file

Oke. lebih jauh

Sekarang coba buka file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

_4 dengan web browser. lalu hasilnya

Senang. 🎉

Kami telah berhasil membuat halaman web pertama dengan HTML

Sekarang giliran saya yang menjelaskan maksud dari kode diatas, tapi sebelum itu. Saya akan menjelaskan terlebih dahulu tentang nama file untuk HTML

Nama file untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML

1. ekstensi file HTML

Setiap file HTML harus memiliki ekstensi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

_6,

<html lang="en">

0 (untuk XHTML), dan

<html lang="en">

1 saja. Jika Anda tidak menggunakan ekstensi ini, maka tidak akan terbaca oleh web browser

Misalnya seperti ini

Nama file adalah

<html lang="en">

_2

Jelas, ini bukan file HTML, tetapi file teks biasa. Jadi. browser akan menampilkan isi file apa adanya

2. Nama Khusus untuk Beranda

Jika Anda ingin membuat halaman untuk beranda, sebaiknya gunakan nama

<html lang="en">

3. Karena akan otomatis terbuka ketika website dikunjungi

Misalnya, saat Anda membuka

<html lang="en">

4. maka file HTML yang akan dibuka adalah

<html lang="en">

3 yang ada di server Petanikode

3. Hindari Beberapa Hal Ini

Penggunaan Ruang

Nama file HTML biasanya akan dicantumkan pada URL, jadi sebaiknya hindari penggunaan spasi pada nama file HTML, agar URL yang dibuat lebih baik

Spasi pada URL, biasanya akan otomatis berubah menjadi

<html lang="en">

6

Alih-alih spasi, Anda dapat menggunakan tanda min (

<html lang="en">

7) atau hapus skor (

<html lang="en">

8)

Jangan mengejek

Beri nama file HTML dengan file biasa, hindari penggunaan huruf kapital, campuran huruf besar dan kecil, dan juga penggunaan simbol

Contoh

```
<html lang="en">
```
_9

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_0

Meski nama ini bisa valid, tapi tidak enak dibaca. baik oleh manusia maupun mesin

Nah, selanjutnya kita akan belajar tentang kode-kode HTML

Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat

Penulisan kode HTML selalu diawali dengan deklarasi DOCTYPE, kemudian tuliskan tag

<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>

1 dan di dalamnya terdapat tag

<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>

2 dan

<!DOCTYPE html> <html lang="en"> <head> <title>Belajar HTML #01</title> </head> <body> <p>Hello World!</p> </body> </html>

3

Jika kita memperhatikan. Struktur dasar kode HTML terdiri dari tiga bagian penting

Bagian Deklarasi
bagian KEPALA
Bagian tubuh

Mari kita bahas satu per satu

1. Bagian Deklarasi

Lihatlah kode pada baris pertama.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_4

Ini adalah tag deklarasi untuk menentukan jenis dan versi dokumen. Pada contoh di atas, kami menentukan bahwa dokumen ini bertipe HTML dan versinya adalah HTML 5

Nah, untuk HTML versi 4. cara deklarasinya berbeda

Contoh untuk HTML4. 01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cukup lama bukan

Lalu bisakah kita tidak menulis kode ini

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

4?

tidak apa-apa. Dokumen HTML masih dapat dibuka di browser web. Tapi, hal ini tentunya akan melanggar aturan baku yang dibuat oleh W3C

Oh ya, kita bisa memeriksanya. apakah HTML yang ditulis sudah benar atau belum di https. // validator. w3. org/

Lagi…

Selanjutnya, di bawah tag deklarasi

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_4 ada tag pembuka untuk HTML

<html lang="en">

Tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

1 harus ada di setiap dokumen HTML

Pada tag ini kita beri atribut

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

8 untuk menyatakan bahwa isi dokumen HTML ini akan menggunakan bahasa Inggris

Nah di tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

1 ini, ada dua tag penting lagi. itu adalah. beri tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_2 dan beri tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

3

Setelah itu, tag HTML terakhir ditutup dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

2

2. bagian KEPALA

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

2 dan ditutup dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

4

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_

Pada bagian HEAD biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin

Suka

Tag meta untuk SEO;
Tandai <title>_ untuk judul;
Tempat menulis kode CSS dan Javascript;
dan lain-lain

3. Bagian tubuh

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisan dimulai dari tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_3 dan ditutup dengan

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

7

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Belajar HTML #01</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

_

Di sinilah kita akan menulis banyak konten dengan berbagai tag. Saat ini kami baru saja mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf

Pengkodean HTML langkah demi langkah?

Cara Membuat Halaman Web Sederhana dengan HTML .

Buka editor teks. .

Setel jenis dokumen ke HTML. .

Tambahkan tab judul ke halaman web Anda. .

Ketuk di bawah tanda "Kepala" tertutup. .

Selanjutnya buat judul halaman. .

Tambahkan judul tambahan jika Anda mau. .

Buatlah sebuah paragraf. .

Mengubah warna teks

Tulis HTML di mana?

Editor Teks untuk Menulis HTML Dasar . Ada banyak editor teks yang dapat Anda gunakan untuk belajar HTML. Dari yang sederhana seperti Notepad++, hingga Visual Studio Code.

Ada kode HTML?

Berikut adalah 9 kode HTML untuk blog dan arti dari coding tersebut. .

Label Judul. Tag HTML pertama adalah tag judul. .

Deskripsi meta. Selanjutnya, ada deskripsi meta. .

3. Tag Tajuk. .

4. Jangkar Teks dan Tautan. .

Jangan ikuti. .

6. Teks Alt Gambar. .

7. Tag kanonis. .

9. Tag tebal

HTML dimulai dengan kode apa?

Penjelasan. Kode di atas dimulai dengan tag html , yang didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf. Agar lebih jelas, berikut adalah contoh penulisan elemen bersarang yang salah.

kode html