Penerapan HTML (Part 4)
I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
HTML Komputer Kode Elements
HTML Komputer Kode Formatting
HTML biasanya menggunakan ukuran huruf variabel dan spasi.
<kbd>, <samp>, dan <code> elemen semua dukungan tetap ukuran huruf dan spasi.
HTML <kbd> Untuk Keyboard Masukan
HTML <kbd> mendefinisikan input keyboard
Contoh :
Maka outputnya :
HTML <samp> Untuk Output Komputer
HTML <samp> mendefinisikan contoh output dari program komputer.
Contoh :
<code> Untuk Kode Komputer HTML
HTML <code> mendefinisikan sebuah kode pemrograman
Contoh :
Maka outputnya :
Perhatikan bahwa <code> elemen tidak melestarikan spasi ekstra dan line-break.
Untuk mengatasinya, Anda dapat menempatkan <code> elemen di dalam <pre> elemen
Contoh :
Maka outputnya :
HTML <var> Untuk Variabel
HTML <var> elemen mendefinisikan variabel.
variabel yang bisa menjadi variabel dalam ekspresi matematika atau variabel dalam konteks pemrograman
Contoh :
tag Deskripsi
<Code> Mendefinisikan kode pemrograman
<Kbd> Mendefinisikan input keyboard
<Samp> Mendefinisikan output komputer
<Var> Mendefinisikan variabel
<Pre> Mendefinisikan teks terformat
HTML Komentar
tag komentar <! - dan -> digunakan untuk menyisipkan komentar di HTML.
HTML Comment Tags
Anda dapat menambahkan komentar ke sumber HTML Anda dengan menggunakan sintaks berikut
<!-- Write your comments here -->
Catatan: Ada tanda seru di tag pembuka, tapi tidak di tag penutup (!).
Komentar tidak ditampilkan oleh browser, tetapi mereka dapat membantu mendokumentasikan HTML Anda.
Dengan komentar Anda dapat menempatkan pemberitahuan dan pengingat dalam HTML Anda
Contoh :
Maka outputnya:
Komentar juga bagus untuk men-debug HTML, karena Anda bisa komentari baris HTML kode, satu per satu, untuk mencari kesalahan
Contoh :
Maka outputnya :
Anda mungkin bingung dengan komentar bersyarat di HTML
komentar bersyarat mendefinisikan tag HTML yang harus dijalankan oleh Internet Explorer saja.
Contoh :
Maka outputnya :
Tags Program Software
HTML komentar tag juga dapat dihasilkan oleh berbagai program perangkat lunak HTML.
Misalnya <! - Webbot bot -> tag dibungkus dalam komentar HTML oleh FrontPage dan Expression Web.
Sebagai aturan, biarkan tag ini tinggal, untuk membantu mendukung perangkat lunak yang menciptakan mereka.
Warna HTML
Layar komputer menampilkan warna dengan menggabungkan Merah, Hijau, dan biru muda.
Nama warna
Dengan CSS, warna dapat diatur dengan menggunakan nama warna
Contoh :
Maka outputnya :
Dengan HTML, RGB nilai warna dapat ditentukan menggunakan rumus ini: rgb (merah, hijau, biru)
Setiap parameter (merah, hijau, dan biru) mendefinisikan intensitas warna antara 0 dan 255.
Misalnya, rgb (255,0,0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0. Percobaan dengan mencampur nilai-nilai RGB berikut.
Contoh :
Maka outputnya :
Contoh :
Maka outputnya :
Dengan HTML, nilai-nilai RGB juga dapat ditentukan dengan menggunakan nilai warna heksadesimal berupa: #RRGGBB, di mana RR (merah), GG (hijau) dan BB (biru) adalah nilai-nilai heksadesimal antara 00 dan FF (sama seperti desimal 0-255) .
Misalnya, # FF0000 ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (FF) dan yang lainnya diatur ke nilai terendah (00).
Contoh :
Maka outputnya :
Contoh :
Maka outputnya :
CSS singkatan dari Cascading Style Sheets
Styling dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - menggunakan atribut style dalam elemen HTML
Internal - menggunakan <style> elemen dalam HTML <head>
Eksternal - menggunakan satu atau lebih file CSS eksternal
Cara yang paling umum untuk menambahkan styling, adalah untuk menjaga gaya dalam file CSS yang terpisah. Tapi, dalam tutorial ini, kita menggunakan styling internal, karena lebih mudah untuk menunjukkan, dan lebih mudah bagi pengguna untuk mencoba sendiri.
inline Styling (Inline CSS)
styling inline digunakan untuk menerapkan gaya unik untuk elemen HTML:
styling inline menggunakan atribut style.
Contoh :
Maka outputnya :
styling internal yang digunakan untuk menentukan gaya untuk satu halaman HTML.
styling internal didefinisikan dalam <head> halaman HTML, dalam elemen <style>
Contoh :
Maka outputnya :
Eksternal Styling (eksternal CSS)
Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web dengan mengubah satu file!
Untuk menggunakan style sheet eksternal, menambahkan link ke dalam <head> dari halaman HTML
Contoh :
Maka outputnya :
Berikut adalah bagaimana "gaya.css" terlihat
Contoh :
Maka outputnya :
CSS Font
Properti warna CSS mendefinisikan warna teks yang akan digunakan untuk elemen HTML.
Properti CSS font-family mendefinisikan font yang akan digunakan untuk elemen HTML.
Properti CSS font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML.
Contoh :
Maka outputnya :
CSS Box ModelSetiap elemen HTML memiliki kotak di sekitarnya, bahkan jika Anda tidak dapat melihatnya.
Properti border CSS mendefinisikan perbatasan terlihat di sekitar elemen HTML.
Contoh :
Maka outputnya :
Contoh :
Contoh :
Contoh :
Maka outputnya:
Contoh CSS di atas digunakan px untuk menentukan ukuran dalam pixel.
Id Atribut
Semua contoh di atas menggunakan CSS untuk gaya elemen HTML secara umum.
Untuk menentukan gaya khusus untuk satu elemen khusus, pertama menambahkan atribut id ke elemen.
kemudian menentukan gaya untuk elemen dengan id tertentu
Contoh :
Maka outputnya:
Untuk menentukan gaya untuk jenis khusus (kelas) dari unsur-unsur, menambahkan atribut kelas untuk elemen
Sekarang kita dapat menentukan gaya yang berbeda untuk elemen dengan kelas khusus
Contoh :
Maka output :
Gunakan id untuk mengatasi elemen tunggal. Menggunakan kelas untuk mengatasi kelompok-kelompok dari elemen.
Rangkuman Bab Gunakan atribut style HTML untuk styling inline.
Gunakan HTML <style> elemen untuk menentukan CSS internal.
Gunakan HTML <link> elemen untuk merujuk ke file CSS eksternal.
Gunakan HTML <head> elemen untuk menyimpan <style> dan <link>
elemen.
Menggunakan properti Color CSS untuk warna teks.
Menggunakan properti CSS font-family untuk font teks.
Menggunakan properti CSS font-size untuk ukuran teks.
Menggunakan properti Perbatasan CSS untuk batas elemen yang terlihat.
Menggunakan properti CSS Padding untuk ruang di dalam perbatasan.
Menggunakan properti CSS Margin untuk ruang luar perbatasan.
HTML Style Tags
tag Deskripsi
<Style> Mendefinisikan informasi style untuk dokumen HTML
<Link> Mendefinisikan hubungan antara dokumen dan sumber daya
eksternal.
V.Kesimpulan.
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.
VI.Refrensi.
http://www.w3schools.com
Komentar
Posting Komentar