A. PENDAHULUAN
- Pengertian
- Latar belakang masalah
B. MAKSUD DAN TUJUAN
Membaca materi yang akan di agendakan untuk hari ini dan tujuannya dalah mengerti, memahami dan bisa mengimplementasikannya
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- HTML Responsive
- HTML Computercode
- HTML Semantics
D. TARGET DAN HASIL YANG DIHARAPKAN
Mengerti dan memahami HTML Responsiv, Computercode, Semantics
E. METODE PELAKSANAAN
- Membaca referensi di w3schools
- Mencari referensi lain di google
- Coding
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Membaca referensi di W3schools
- Mencari referensi lain di google
- Coding
> Penejelasan <
- HTML Responsive
HTML Responsive adalah sebuah metode untuk membuat halaman web yang terlihat bagus di semua perangkat, desain web yang responsive akan secara otomatis untuk menyesuaikan di berbagai ukuran layar device seeprti laptop, Handphone, Tv dan lain sebagainya.
untuk cara penulisan agar desain web responsive kalian bisa menggunakan tag <meta>
<meta rel="viewport" content="width=device-width, initial-scale=1.0">
kalian bisa memasukkan kode di atas ke dalam tag <head>
nahh jika kalian ingin membuktikkan, kalian bisa coba hasilnya di beda device. Jika webnya menyesuaikan di kedua device yang kalian punya maka sudah berhasil berjalan Responsivenya.
Atau cara mudah lagi untuk membuktikan responsive nya adalah dengan cara kalian cek hasilnya di browser dan kalian perkecil tab nya, jika web nya menyesuaikan maka sudah berjalan web responsivenya.
- HTML Computercode
HTML code digunakan untuk menunjukkan bagian dari kode komputer ( Computercode ). Kode komputer mencangkup sebuah nama element XML, nama sebuah file, program komputer, atau kode-kode lainnya yang dapat di kenali oleh komputer,
Dalam penggunaannya, disarankan memakai nama atribut class yang menunjukkan bahasa dari kode komputer yang digunakan. Contohnya jika anda ingin menyisipkan CSS ke dalam tag code maka di sarankan memakai atribut class untuk penulisannya seperti ini
<p>Hallo nama Saya <code class="adelwin">Adelwin Nugroho Liandy</code></p>
untuk cssnya kalian bisa buat sesuai keinginan anda, semisal Saya tadikan menamakan classnya adelwin
kalian bisa memanggilnya dengan seperti ini
<style>
.adelwin {
padding: 20px;
background-color: tomato;
}
</style>
jangan lupa anda memasukkan CSS nya di dalam tag <head> ya....'
dan perlu kalian ketahui bahwa tag code ini mencangkup global attributs, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tag.
- HTML Semantics
Sering dijumpai untuk membuat struktur halaman. Jika anda pernah merancang web menggunakan CSS, tag <div> adalah tag yang sangat sering digunakan. Untuk membuat bagian header yang berisi manu biasanya menggunakan <div id="footer">, sedangkan untuk menu utama bisa menggunakan <div id="menu"> atau untuk membuat navigasi <div id="nav">.
Nahh di HTML terbaru ini yaitu HTML5 memperkenalkan tag-tag baru yang di tujukan untuk mengatasi hal ini. Daripada menggunakan <div id="header">, sekarang sudah bisa menggunakan tag <header> sebagai penanda bagian atas halaman HTML, dan <footer> untuk penanda bagian bawah halaman web.
Beberapa tag-tag baru yang di perkenalkan di HTML5 ini antar lain adalah :
<article> - Untuk membuat elemen artikel
<aside> - untuk membuat elemen bagian samping
<figcaption> - untuk membuat teks caption pada figure
<figure> - untuk membuat figur atau gambar
<footer> - untuk membuat elemen bagian bawah halaman
<header> - untuk membuat elemen bagian atas
<main> - untuk membuat elemen utama
<mark> - untuk menandai teks
<nav> - untuk membuat navigasi
<section> - untuk membuat bagian artikel
<summary> - untuk membuat ringkasan artikel atau spoiler
<time> - untuk membuat elemen yang menyatakan waktu
Dan masih banyak lagi...
I. TEMUAN PERMASALAHAN DAN SOLUSI
J. KESIMPULAN YANG DIDAPAT
-
K. REFERENSI
- w3schools
- apacara.com
- petanikode.com
