MEMPELAJARI DASAR-DASAR HTML
SUMBER : http://www.w3schools.com
Apa itu HTML ?
Apa itu HTML ?
HTML (Hyper Text Markup Language) adalah bahasa markup untuk membuat sebuah halaman web, Dokumen HTML dijelaskan oleh tag HTML
Contoh HTML :
Contoh HTML dan Hasilnya ketika di review menggunakan browser, Browser tidak menampilkan tag HTML, tetapi menggunakan mereka untuk menentukan bagaimana menampilkan dokumen
Penjelasan :
- DOCTYPE mendefinisikan tipe dokumen
- Teks di antara <html> dan </ html> menjelaskan dokumen web
- Teks di antara <body> dan </ body> menggambarkan isi halaman yang terlihat
- Teks di antara <h1> dan </ h1> menggambarkan judul
- Teks di antara <p> dan </ p> menjelaskan ayat/paragraf
HTML Editor
Ada beberapa aplikasi untuk mengedit HTML seperti :
1.Adobe Dreamweaver
2.Microsoft Expression Web
3.CoffeeCup HTML Editor
dll
HTML DOCUMENTS
Semua dokumen HTML harus dimulai dengan deklarasi tipe: <! DOCTYPE html> , Dokumen HTML dimulai dengan <html> dan diakhiri dengan </ html> , bagian dari dokumen HTML terletak antara <body> dan </ body>
dll
HTML DOCUMENTS
Semua dokumen HTML harus dimulai dengan deklarasi tipe: <! DOCTYPE html> , Dokumen HTML dimulai dengan <html> dan diakhiri dengan </ html> , bagian dari dokumen HTML terletak antara <body> dan </ body>
Contoh :
HTML HEADINGS
Judul HTML didefinisikan dengan <h1> sampai <h6> di tutup dengan </h1> sampai </h6> juga
Contoh :
HTML PARAGRAPHS
HTML paragraph didefinisikan dengan <p> dan di tutup dengan </p>
Contoh :
HTML LINKS
HTML link di definisikan dengan <a> ditutup dengan </a>
Contoh :
diberikan tambahan atribut "href" , Atribut yang digunakan untuk memberikan informasi tambahan tentang elemen HTML
HTML IMAGES/GAMBAR
HTML gambar didefinisikan dengan tag <img> , file sumber (src), teks alternatif (alt), dan ukuran (lebar"weidth" dan tinggi"height") disediakan sebagai atribut
Contoh :
HTML ELEMENTS
Elemen HTML ditulis dengan tag awal, dengan tag akhir, dengan kalimat di tulis diantara tag tersebut, ada juga beberapa element yang tidak menggunakan tag penutup,
KUMPULAN HTML
Elemen HTML bisa dicampur/di gabungkan/di sarangkan bersama , Semua dokumen HTML terdiri dari kumpulan HTML yang menyatu jadi satu
Contoh :
<br> atau baris , Elemen kosong bisa "tertutup" dalam tag pembuka seperti ini: <br />
HTML tidak memerlukan elemen kosong yang harus ditutup. Tapi jika Anda perlu validasi ketat, dan membuat dokumen Anda dibaca oleh parser XML, tutup semua elemen HTML.
HTML ATTRIBUTES
Atribut memberikan informasi tambahan tentang elemen HTML,
Elemen HTML dapat memiliki atribut, Atribut memberikan informasi tambahan tentang elemen, Atribut selalu ditentukan dalam tag awal , Atribut datang dalam pasangan nama / nilai
1. The Lang Attributes
Mendeklarasikan bahasa penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari
\Contoh :
Dua huruf pertama menentukan bahasa (en). Jika ada dialek, menggunakan dua huruf lainnya (AS).
2.Tittle Attribute/Judul
Elemen <p> memiliki atribut "title" judul. "About W3Schools"
3.Alt Attribute
Atribut alt menentukan sebuah teks alternatif yang akan digunakan, ketika sebuah elemen HTML tidak dapat ditampilkan.
Contoh :
Di bawah ini adalah daftar beberapa atribut yang sering digunakan dalam HTML :
alt --> Menentukan teks alternatif untuk gambar
disabled --> Menentukan bahwa elemen input harus dinonaktifkan
href --> Menentukan URL (Alamat Web) untuk link
id --> Menentukan sebuah id unik untuk sebuah elemen
src --> Menentukan URL untuk gambar
style --> Menentukan gaya CSS inline untuk suatu elemen
Tittle --> Judul, Menentukan informasi tambahan tentang elemen
href --> Menentukan URL (Alamat Web) untuk link
id --> Menentukan sebuah id unik untuk sebuah elemen
src --> Menentukan URL untuk gambar
style --> Menentukan gaya CSS inline untuk suatu elemen
Tittle --> Judul, Menentukan informasi tambahan tentang elemen
value --> Menentukan nilai (isi teks) untuk elemen input
Untuk lebih lengkapnya bisa mengunjungi http://www.w3schools.com/tags/default.asp
HTML Horizontal
<Hr> tag menciptakan garis horizontal di halaman HTML
Contoh :
HTML Head
HTML <head> elemen yang tidak ada hubungannya dengan judul HTML, elemen hanya berisi meta data(data tentang dokumen HTML), elemen ditempatkan antara tag <html> dan tag <body>
Contoh :
Untuk lebih lengkapnya bisa mengunjungi http://www.w3schools.com/tags/default.asp
HTML Horizontal
<Hr> tag menciptakan garis horizontal di halaman HTML
Contoh :
HTML Head
HTML <head> elemen yang tidak ada hubungannya dengan judul HTML, elemen hanya berisi meta data(data tentang dokumen HTML), elemen ditempatkan antara tag <html> dan tag <body>
Contoh :
HTML <Pre> elemen
Untuk tulisan/kalimat dengan jarak yang tepat dan line-break yang tepat, Anda harus membungkus teks dalam tag <pre>
Contoh :
HTML Format Elemen
HTML Format menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring,
1. tag <b> ditutup dengan </b> = Menebalkan tulisan
2. tag <strong> ditutup dengan </strong> = Hampir sama dengan bold untuk menebalkan/menjelaskan tulisan
3. tag <i> ditutup dengan </i> = untuk garis miring
4. tag <em> ditutup dengan </em> = untuk menekankan teks, dengan menambahkan semantik penting
5. tag <mark> ditutup dengan </mark> = untuk menandai/menyorot tulisan
6. tag <del> ditutup dengan </del> = untuk menandakan bahwa teks tersebut dihapus/ diberi garis di tulisan/garis coret (blue)
7. tag <sub> ditutup dengan </sub> = mendeskripsikan teks subscript(bawah) "subscripted "
8. tag <sup> ditutup dengan </sup> = kebalikan dari sub mendeskrepsikan teks superscript(atas)
HTML Style
Styling adalah tentang mengubah atau menambahkan gaya elemen HTML yang ada.
1. Cara Merubah Background menggunakan <body style=
(atribut bgcolor , didukung dalam versi HTML, tidak berlaku di HTMLS
2. Cara Merubah Warna teks yang akan digunakan pada elemen HTML :
3. Cara merubah Font pada teks HTML :
4 Cara merubah font size/ukuran huruf pada teks HTML :
5. Cara merubah perataan teks pada HTML :
NB : tag <center> "rata tengah" hanya berlaku pada versi HTML bukan HTML5
HTML Kutipan, Petikan, dan Definisi Elemen
berikut beberapa contoh tag :
1. <abbr> - </abbr> = Mendefinisikan singkatan atau akronim
2. <address> - </address> = Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
3. <bdo> - </bdo> = Mendefinisikan arah teks
4. <blockquote> - </blockquote> = Mendefinisikan bagian yang dikutip dari sumber lain
5. <cite> - </cite> = Mendefenisikan judul karya
6. <dfn> - </dfn> = Mendefinisikan sebuah istilah definisi
7. <q> - </q> = Sebagai tanda kutip
HTML Kode Komputer
1. <code> - </code> = Mendefinisikan teks kode pada komputer
2. <kbd> - </kbd> = Mendefinisikan teks Keyboard
3. <samp> - </samp> = Mendefinisikan sampel kode komputer
4. <var> - </var> = Mendefinisikan variabel
HTML TAG COMMENT
Komentar tidak ditampilkan oleh browser, tetapi dapat membantu mendokumentasikan HTML, komentar dapat ditempatkan sebagai pemberitahuan dan pengingat dalam HTML Anda
Ada tanda seru (!) Dalam tag pembuka, tapi tidak di tag penutupan
HTML CSS (Warna dan Style)
1. CSS Box Model + padding (jarak spasi antar perbatasan) + Margin (diluar perbatasan)
2. Attribute Class , Untuk menentukan gaya untuk tipe khusus (kelas) dari unsur-unsur, menambahkan atribut kelas untuk elemen
Contoh :
NB : Gunakan id untuk mengatasi elemen tunggal. Gunakan kelas untuk mengatasi kelompok-kelompok elemen
HTML Link - HyperLink
Cara membuat link/hyper link = <a href=''url''>link text</a>
Contoh : <a href="http://www.twitter.com/leonardosandy">Profil Twitter saya</a>
HTML TABLE/TABEL
Penjelasan :
Tabel didefinisikan dengan tag <table>
Kolom = <tr>
Baris = <td>
Border = table border = "misal (1)"
Lebar = style = "width : misal (100%)">
Contoh :
Sekian Rangkuman dari saya, mungkin jika masih terlalu singkat/penjelasan nya kurang jelas bisa langsung kunjungi web http://www.w3schools.com secara langsung untuk keterangan lebih lanjut :)
SEKIAN DAN TERIMAKASIH :)
Leonardo Sandi Adhi Pratama
S1-SI01 | 14.12.7863
Leonardo Sandi Adhi Pratama
S1-SI01 | 14.12.7863
sip, tambah lagi artikelnya :D
ReplyDelete