Scribd
Unggah
6 tayangan5 halaman

Coding HTML

Dokumen ini menjelaskan dasar-dasar penulisan HTML, termasuk struktur dasar seperti tag <html>, <head>, dan <body>. Selain itu, dijelaskan juga tentang penggunaan heading, paragraf, link, button, garis horizontal, serta cara mengatur teks menjadi bold, italic, dan menambahkan gambar. Dokumen ini juga mencakup pengaturan warna background, jenis font, ukuran font, dan warna font menggunakan atribut style.

Diunggah oleh

lh3423707
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
6 tayangan5 halaman

Coding HTML

Dokumen ini menjelaskan dasar-dasar penulisan HTML, termasuk struktur dasar seperti tag <html>, <head>, dan <body>. Selain itu, dijelaskan juga tentang penggunaan heading, paragraf, link, button, garis horizontal, serta cara mengatur teks menjadi bold, italic, dan menambahkan gambar. Dokumen ini juga mencakup pengaturan warna background, jenis font, ukuran font, dan warna font menggunakan atribut style.

Diunggah oleh

lh3423707
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

Pertama, dokumen diawali dengan tulisan <!DOCTYPE html>.

Kode ini menandakan bahwa dokumen ditulis menggunakan HTML.


Nantinya, browser bisa membaca kode tersebut.
Selanjutnya, terdapat tag <html>. Setiap dokumen HTML wajib
memiliki tag tersebut. Nantinya, dokumen harus ditutup
dengan </html> seperti yang dapat Anda lihat di kode terakhir.
Berikutnya, ada tag <head>. Tag ini menunjukkan kepala
dokumen. Nantinya akan menjadi bagian pada judul tab browser
Anda. Jangan lupa ditutup dengan </head>.
Setelah itu, Anda menuliskan tag <body>. Ini artinya bagian dari
halaman web browser. Isinya bisa berupa heading, paragraf, dan
lain-lain. Jika sudah selesai, pastikan Anda menutupnya
dengan </body>.

2. Heading
Contoh HTML yang kedua adalah heading.

Hal ini sangat penting untuk menjelaskan isi halaman web. Mulai
dari judul, sub-judul, dan seterusnya.

Selain itu, heading juga berfungsi untuk aspek SEO. Hal ini
dikarenakan Google menyukai halaman web yang tertata dengan
rapi dan jelas. Sehingga, mesin pencarian tersebut dapat
merekomendasikan website Anda kepada pengguna.

Heading memiliki banyak jenis. Ada H1, H2, H3, dan seterusnya.
Semakin tinggi angkanya, semakin kecil tulisannya.

Penulisan heading terdapat dalam. Berikut adalah contoh


penulisannya:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

3. Paragraf
Contoh HTML berikutnya adalah paragraf.

Misalkan Anda membuat website berisi artikel. Pastinya, artikel


tersebut berisi banyak paragraf, bukan? Jika tidak, maka artikel
Anda akan sulit untuk dibaca. Hal ini juga akan menurunkan skor
SEO pada website.

Untuk itu, yuk kita gunakan tag <p> untuk membuat paragraf.
Jangan lupa menutup baris tersebut dengan </p> supaya bisa
menuliskan kode lain. Kira-kira, penulisan kodenya seperti ini:

<p>Paragraf artikel</p>

4. Link
Bagaimana kalau ingin mencantumkan link pada artikel di website?

Dalam HTML, sebuah link dapat dicantumkan dengan menuliskan


tag <a> dan diakhiri dengan tag </a>. Contoh penulisannya seperti
ini:

<a href="https://academy.alterra.id/">Kunjungi SMKN 9 Medan!</a>

Nah, di dalam tag <a>, terdapat atribut href. Atribut ini


menunjukkan link yang Anda cantumkan. Dilihat dari contoh di atas,
link nya menuju ke website SMKN 9 Medan

5. Button
Anda ingin membuat link, tapi dalam bentuk button? Bisa!

Penulisan kodenya cukup mudah. Di bawah penulisan kode untuk


membuat link, Anda cukup menuliskan tag dengan awalan
<button> dan diakhiri dengan </button>.

Contoh HTML nya seperti ini:

<a href="https://academy.alterra.id/" target="_blank">

<button>Kunjungi website SMKN 9 Medan </button>


6. Garis Horizontal
Apa itu garis horizontal?

Penjelasannya persis seperti namanya. Biasanya, garis ini


digunakan untuk memisahkan paragraf. Jadi, penulisan kodenya
akan seperti ini:

<p>Paragraf Artikel</p>

<hr>

<p>Paragraf Artikel</p>

Tag <hr> di atas menunjukkan garis horizontal. Anda tidak perlu


memberikan penutup seperti </hr>. Hal tersebut tidak diperlukan
untuk membuat garis horizontal.

7.Bold
Contoh HTML selanjutnya adalah bold.

Dengan membuat teks menjadi bold, Anda bisa membuat beberapa


bagian dari tulisan Anda menjadi lebih menonjol. Caranya sangat
mudah. Anda hanya perlu menggunakan tag <b> dan </b>.
Contohnya seperti ini:

<p>Design is not just what it looks like and feels like.</p>

<p><b>Design is how it works.</b></p>

8. Italic
Bagaimana jika Anda ingin membuat tulisan miring?

Caranya sama persis seperti bold. Anda tinggal


menggunakan <i> dan </i> untuk membuat tulisan menjadi italic.
Kira-kira, seperti ini contohnya:
<p>Design is not just what it looks like and feels like.</p>

<p><i>Design is how it works.</i></p>

9. Images
Sebuah artikel akan lebih menarik jika ada gambar, bukan?

Hal ini juga memberikan gambaran kepada pembaca tentang apa


yang sedang Anda bicarakan di sebuah artikel.

Dalam HTML, memasukkan image ditandai dengan tag <img>. Kira-


kira, begini contohnya:

<img src="alterra.jpg" alt="logo alterra"


style="width:48px;height:48px;">

Jika kalian perhatikan, ada atribut ‘src’, ‘alt’, dan ‘style’. Apa
artinya?

Src artinya url atau lokasi penyimpanan gambar. Sedangkan Alt


adalah atribut berisi teks. Jika gambar tidak muncul, maka teks
tersebut yang akan dilihat oleh pengunjung website.

Lalu, bagaimana dengan Style?

Style menunjukkan ukuran dari gambar yang Anda masukkan.


Tentunya, Anda bisa mengatur ukuran yang Anda mau melalui
atribut tersebut.

10.Background Color
Bosan dengan warna background halaman website yang selalu
putih?

Anda bisa menggantinya loh. Seperti mengatur ukuran image,


mengganti warna background juga menggunakan atribut Style.
Seperti ini contohnya:
<body style="background-color:orange;">

11.Jenis Font
Contoh HTML berikutnya adalah jenis font.

Anda bisa menggantinya dengan menggunakan atribut Style seperti


contoh HTML sebelumnya. Jenis font tersebut bisa Anda ganti di
manapun, baik di heading ataupun paragraf.

Inilah contoh penulisannya:

<h1 style="font-family:century gothic;">Heading</h1>

<p style="font-family:verdana;">Paragraf</p>

12.Ukuran Font
Tidak hanya ukuran gambar nih yang bisa diubah. Ukuran font juga
bisa loh.

Atribut yang dipakai tetap Style. Anda bisa langsung mengatur


ukuran font yang Anda inginkan. Contohnya seperti di bawah ini:

<h1 style="font-size:56px;">Heading</h1>

<p style="font-size:36px;">Paragraf</p>

13. Warna Font


Selain warna background, warna font juga bisa Anda ganti.

Caranya, Anda bisa menggunakan atribut Style. Setelah itu, Anda


bisa menulis warna yang Anda inginkan. Contohnya seperti ini:

<h1 style="color:orange;">Heading</h1>

Anda mungkin juga menyukai