A. PENGANTAR HTML
HTML merupakan bahasa dasar pembuatan web. Disebut
dasar karena dalam membuat web, jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa
pemrograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
Sumber : https://www.duniailkom.com/belajar-html-pengertian-html/
Sumber : https://www.duniailkom.com/belajar-html-pengertian-html/
Editor HTML
Text Editor merupakan sebuah software yang biasanya digunakan oleh
seorang programmer dalam menulis sebuah kode
program. Text Editor kadang digunakan juga oleh
seorang web designer untuk menciptakan halaman webyang didesain olehnya. Berikut adalah beberapa text editor yang dapat digunakan untuk programming:
- Notepad++
website resmi: http://notepad-plus-plus.org/
- Atom
website resmi: https://atom.io/
- Geany
website resmi: http://geany.org/
- Komodo Edit
website resmi: http://komodoide.com/komodo-edit/
- Sublime Text
website resmi: http://www.sublimetext.com/
Pengertian tag HTML
Hampir semua tag di
dalam HTML ditulis
secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text,
gambar, maupun video. Penulisan tag berada di antara dua kurung siku:
“<” dan “>”. Format dasar
penulisan tag HTML: <tag_pembuka> objek </tag_penutup>
Struktur Dokumen HTML
a. Doctype
Berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML.
b. <html>
Berfungsi sebagai tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>
c. <head>
Bagian ini biasanya dimuat tag <title> yang menampilkan judul dari halaman pada titlenya browser.
d. <body>
Tag ini akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>
Contoh :
Keterangan :
- <!DOCTYPE html> = untuk memberitahukan browser bahwa dokumen yang akan diproses adalah html
- <html> = mendefenisikan root dari suatu dokumen
- <title>Welcome to HTML</title> = judul untuk dokumen html
- <body bgcolor="laveder"> = bgcolor sebagai atribut dan lavender sebagai nilainya
- <p>Document HTML yang Pertama</p> = paragraf
Output :
B. CONTOH KASUS
1. Menggunakan Tag Paragraph <p>
Keterangan :
- <TITLE>Paragraf</TITLE> = judul
dokumen adalah paragraf
- <BODY BGCOLOR =
“LIGHTGREY”> = memberikan warna pada background dimana bgcolor sebagai atribut yang nilainya light
grey
- <p> </p> = Berfungsi untuk membuat paragraf baru
- <h4> </h4> = Mengatur ukuran text
- <p align ="left"> </p> = Membuat text yang ada didalamnya rata kiri
- <p align = "center"> </p>= Membuat text yang ada didalamnya rata tengah
- <p align ="right"> </p> = Membuat text yang ada didalamnya rata kanan </p>
- <p align
="justify"> </p> = Membuat text yang ada didalamnya rata kanan dan kiri
Output :
2. Menggunakan Baris Baru <br> dan <i>
Keterangan :
- <TITLE>Membuat Dokumen HTML</TITLE> = Judul dokumen
- <BODY BGCOLOR ="LIGHTGREY"> = Pemberian warna pada background
- <BR> = Memberi baris baru
- <I> Membuat document HTML </I> = Membuat text miring
Output :
3. Membuat Outline Text Menggunakan <h1> - <h6> dan <hr>
Keterangan :
- <TITLE>Membuat Dokumen HTML</TITLE> = Judul dokumen
- <H1 align="center">Level 1 Heading<H1> = Membuat ukuran text besar dan rata tengah
- <H2 align="left">Level 2 Heading</H2> = Membuat text lebih kecil dari H1 dan rata kiri
- <H3 align="right">Level 3 Heading</H3> =Membuat text lebih kecil dari H2 dan rata kanan
- <H4 align="justify">Level 4 Heading</H4>= Membuat text lebih kecil dari H3 dan rata kiri dan kanan
- <H5>Level 5 Heading</H5> = Membuat text lebih kecil dari H4
- <H6>Level 6 Heading</H6> = Membuat text lebih kecil dari H5
- <hr> = Digunakan untuk membuat garis horizontal penuh layar
Output :
3. Menggunakan Preformatted Text
Keterangan :
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.
Sumber: https://www.duniailkom.com/tutorial-text-html-cara-membuat-text-html-tanpa-format-tag-pre-dan-tag-code/
- <TITLE>Membuat Dokumen HTML</TITLE> = Judul dokumen
- <BODY BGCOLOR ="LIGHTGREY"> = Pemberian warna pada background
- <BR> = Memberi baris baru
- <I> Membuat document HTML </I> = Membuat text miring
Output :
3. Membuat Outline Text Menggunakan <h1> - <h6> dan <hr>
Keterangan :
- <TITLE>Membuat Dokumen HTML</TITLE> = Judul dokumen
- <H1 align="center">Level 1 Heading<H1> = Membuat ukuran text besar dan rata tengah
- <H2 align="left">Level 2 Heading</H2> = Membuat text lebih kecil dari H1 dan rata kiri
- <H3 align="right">Level 3 Heading</H3> =Membuat text lebih kecil dari H2 dan rata kanan
- <H4 align="justify">Level 4 Heading</H4>= Membuat text lebih kecil dari H3 dan rata kiri dan kanan
- <H5>Level 5 Heading</H5> = Membuat text lebih kecil dari H4
- <H6>Level 6 Heading</H6> = Membuat text lebih kecil dari H5
- <hr> = Digunakan untuk membuat garis horizontal penuh layar
Output :
3. Menggunakan Preformatted Text
Keterangan :
Tag <pre> adalah singkatan dari Preformatted Text. Sesuai dengan namanya, tag ini digunakan untuk text yang ‘belum’ diformat. Jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘apa adanya’. Text akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada.
Sumber: https://www.duniailkom.com/tutorial-text-html-cara-membuat-text-html-tanpa-format-tag-pre-dan-tag-code/
Output :
4. Menggunakan Tag Blockquote
Keterangan:
Tag <blockquote> digunakan untuk bagian text yang merupakan kutipan panjang. Disebut kutipan panjang karena tag ini merupakan tipe block element, sehingga akan memisahkan diri dari text yang ada menjadi baris baru. Tag <blockquote> lebih cocok digunakan untuk memberikan penegasan penting untuk kutipan.
Output :
Untuk Tutorial Instalasi SublimeText silahkan buka video saya dibawah ini :
Comments
Post a Comment