LAB ict Terpadu universitas budi luhur, lab 02 - 13 Januari 2017 HTML & CSS LAB ict Terpadu universitas budi luhur, lab 02 - 13 Januari 2017
Profile 6th Semester at Budi Luhur University Supervisor at Lab ICT Universitas Budi Luhur Founder & CEO at DREAM LINE HOST Ambassador at Founded in Indonesia
Apa itu HTML ? HTML merupakan singkatan dari HyperText Markup Language. Menurut Wikipedia sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Format / Ekstensi File HTML, .html (dot html)
Fungsi Untuk Membuat Halaman Web Sebagai Pondasi Bagi Sebuah Website Bisa menampilkan informasi dalam bentuk apapun Dan masih banyak lagi..
HTML5 Struktur HTML <!DOCTYPE html> <html> <html> <head> <head> <title> ... </title> <title> ... </title> </head> </head> <body> <body> </body> </body> </html> </html> HTML
Elemen HTML Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya. <namatag> isi didalam tag </namatag> Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut < dan >, misalnya <h1> dan <p>.
Atribut HTML Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML. Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu.
Atribut HTML Nilai atribut dapat menggunakan baik tanda kutip " maupun tanda petik '. Contoh: <h1 title=“Bosnya ‘Microsoft’”>Bill Gates</h1> atau <h1 title='Bosnya "Microsoft"'>Bill Gates</h1>
Comment Adakalanya kita harus memberikan penjelasan di dalam dokumen HTML tentang bagian-bagian tertentu di dalamnya, agar memudahkan kita atau orang lain untuk memahami isi dari dokumen HTML tersebut. Terlebih lagi bila HTML yang kita tulis sudah ratusan atau bahkan ribuan baris. <!-- ini komentar -->
Code Sebagai (calon) programmer tentu Kamu akan sering bersentuhan dengan kode program. Saat Kamu membuat tulisan tentang kode programmu, Kamu akan perlu menampilkan kode agar tampilannya lebih mudah dibaca. Daripada seperti ini: var x = 5; var y = 6; alert(x + y); var x = 5; Tentu akan lebih mudah dan nyaman dibaca bila ditulis seperti ini: var y = 6; alert(x+y); Maka diperlukan tag html <code>, karena tag <code> bersifat inline, maka diperlukan tambahan tag yakni <pre> sebelum tag <code>
Text Formatting <b> - mencetak tebal teks <strong> - menandai teks penting <i> - mencetak miring teks <em> - memberikan penekanan pada teks <mark> - menandai teks dengan sorotan <small> - membuat teks lebih kecil dari ukuran bawaan <del> - memberi coretan pada teks <ins> - mengarisbawahi teks <sub> - membuat tulisan lebih bawah dari garis datar tulisan <sup> - membuat tulisan lebih atas dari garis datar tulisan
Form Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima inputan dari user. Melalui form, user pada sebuah halaman web dapat melakukan interaksi dengan web/sistem tersebut. <form action=“” method=“”> <form action=“xxx.html” method=“”> <form action=“” method=“post/get”> Input elements Input elements Input elements </form> </form> </form>
Lanjutan HTML Untuk belajar lebih lanjut tentang HTML
.CSS{}
Cascading Style Sheets Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML. CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
Fungsi CSS Memperindah tampilan Membuat halaman web semakin kompleks
Macam-macam CSS Inline CSS Internal CSS Eksternal CSS
Inline CSS Yang dimaksud Inline CSS adalah kita memasukan kode css langsung dalam tag HTML. Contoh: <h1 style=“color:red”>LAB ICT</h1> Maka hasil yang dari menggunakan inline tersebut, LAB ICT
Internal CSS Internal CSS adalah kode kode css yang ditempatkan antara tag <head> </head> Kemudian kita deklarasi css dengan menggunakan tag <style> kemudian di tutup dengan penutup </style>
Internal CSS .... ........ <head> <title>Belajar CSS</title> <style> .warna { color: red; } </style> </head> ......
Internal CSS Untuk memanggil CSS kedalam tag html ... <h1 class=“warna”>LAB ICT</h1> Maka hasil yang didapat, LAB ICT
Eksternal CSS Eksternal CSS adalah sebuah kode kode css dimana kode kode css itu sendiri terpisah dari file HTMLnya, jadi kita memerlukan tag <link> untuk memanggil file css yang telah kita buat.
Eksternal CSS .... ........ <head> <title>Belajar CSS</title> <link rel=“stylesheet” href=“namafile.css” type=“text/css”> </head> ......
Eksternal CSS Buatlah sebuah File dengan nama “namafile.css”, dan pastikan dalam satu folder dengan html itu sendiri. Ketik sebuah code css sebagai berikut #warna { color: red; }
Eksternal CSS Untuk memanggil Eksternal CSS sama seperti Internal CSS, namun pada eksternal CSS harus tau dan benar keberadaan file cssnya itu sendiri. ... <h1 id=“warna”>LAB ICT</h1> Maka hasil yang didapat, LAB ICT
Terima kasih.
Referensi Codepolitan.com W3schools.com Sololearn.com Ryfan.NET Belajar.us