Modul 1 : HTML Dan CSS - PDF Free Download - ADOC.PUB

• Home
• Add Document
• Sign In
• Register

Modul 1 : HTML dan CSS

• Home
• Modul 1 : HTML dan CSS

1 Modul 1 : HTML dan CSS Tujuan Praktikum - Praktikan mampu membuat halaman web dengan menggunakan HTML dan CSS. Pengantar HyperText Markup Language a... Author: Susanti Darmali 783 downloads 8685 Views 814KB Size Report DOWNLOAD PDF

Recommend Documents

Belajar HTML dan CSS Modul Desain Web Teori + Praktik HTML, CSS, dan Javascript Pengenalan HTML, CSS, dan Javascript Pengenalan HTML, CSS, dan Javascript HTML, CSS, JavaScript, PHP MODUL PEMROGRAMAN WEB UNP PGRI KEDIRI CSS-segédlet. 1. CSS és HTML Külső stíluslap HTML-hez csatolása HTML dan CSS. Mark Up Language HTML és CSS színes táblák HTML javascript css PHP DOM HTML javascript css PHP BOOTSTRAP (X)HTML, CSS a jquery HTML & CSS. F. Vonk versie Použití CSS v dokumentech HTML CSS hozzákapcsolása a HTML-hez HTML javascript css PHP DOM MODUL 1 DASAR-DASAR HTML MODUL 1 SEKILAS TENTANG HTML Modul 1: Dasar-dasar HTML Pagina 1 - Websites maken met HTML en CSS A HTML ÉS A CSS ALAPJAI Tutorial HTML CSS met Adobe Dreamweaver CSx programmeren in HTML (5) CSS (3) JavaScript INFO1 Tartalom közlése a Weben: HTML, CSS TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Modul 1 : HTML dan CSS Tujuan Praktikum - Praktikan mampu membuat halaman web dengan menggunakan HTML dan CSS. Pengantar HyperText Markup Language atau lebih dikenal HTML merupakan markup language yang digunakan untuk membuat dan merepresentasikan visual dari sebuah halaman web. HTML terdiri dari symbol-simbol yang lebih dikenal dengan sebutan tag. Setiap tag bias saja memliki atribut. Sebuah script yang menggunakan HTML akan selalu didahului oleh tag dan diakhiri dengan . Berikut ini adalah beberapa tag HTML yang sering digunakan : Tag HTML Keterangan … … Tag untuk mengapit halaman HTML Berisi tentang informasi umum dari sebuah halaman web … Judul halaman Web … <style> … <style> …

…

… … Isi dari tag ini yang akan di tampilkan di browser Untuk CSS (Cascading Style Sheet) Untuk hyperlink Untuk paragraph Untuk membuat table Untuk memasukkan gambar Untuk komentar Dokumen HTML dibuat oleh elemen HTML. HTML memiliki elemen, elemen dimulai tag pembuka sampai tag penutup. Beberapa element HTML tidak memiliki tag penutup, seperti . Contoh :

Hello World

Start Tag

Element Content My First Heading My First Paragraph End Tag

Setiap elemen HTML memiliki attributes. Atribut pada elemen HTML dideklarasikan pada tag pembuka berisi informasi tambahan tentang element. Berikut ini adalah beberapa contoh atribut Laboratorium Pemrograman dan Basis Data Atribut alt disabled href id scr style title value Description Untuk alternative teks untuk gambar Untuk input element yang bisa nonaktifkan Untuk URL (web address) untuk link Untuk id yang unik dalam sebuah elemen Untuk URL (web address) untuk gambar Untuk CSS dengan cara inline untuk sebuah element Untuk informasi tambahan tentang elemen Untuk nilai (konten teks) untuk elemen masukan Contoh : This is a link Href merupakan atribut dari tag . File pada HTML disimpan dengan ekstensi *.html. CSS atau Cascading Style Sheets merupakan teknolgi yang digunakan untuk mempermudah pembuatan sebuah website. Melalui CSS kita dapat dengan cepat mengaplikasikan suatu style pada tag tertentu pada HTML. CSS juga dapat diletakkan terpisah dari file HTML sehingga dapat digunakan oleh banayk halaman HTML. CSS diapit oleh tag <style>… dan berada diantara tag …. Komentar pada CSS diapit oleh karakter /*…*/. D Ada tiga cara penggunaan CSS : 1. Inline Styles  menambahkan attribute style kedalam tag HTML. Cara ini hanya berlaku pada tag dimana style ditambahkan. 2. Embedded Styles  style CSS diletakkan pada tag . Cara ini berlaku untuk halaman dimana style ditambahkan. 3. Linked Styles / External Styles  style CSS diletakkan diluar dokumen HTML. Pada halaman HTML yang akan menggunakan CSS, digunakan tag untuk menghubungkan HTML dengan file CSS. Contoh: . File css tersebut disimpan dengan ekstensi file *.css Dalam CSS ada istilah class dan id. Dengan menggunakan class kita dapat menentukan letak bagian yang harus kita aplikasikan dengan style. Penggunaan class diawali dengan tanda titik “.”. Menggunakan Class merupakan cara yang paling efektif dan efisien jika terjadi perubahan. Cara lainnya adalah dengan menggunakan nilai dari attribute id pada setiap tag. Tanda yang digunakan untuk id adalah tanda pagar “#”. Perangkat Praktikum - Netbeans 8.0.1 Browser Chrome Instruksi Praktikum 1. Bukalah Netbeans Laboratorium Pemrograman dan Basis Data 2. Buatlah script dibawah ini, kemudian simpan dengan NIM anda masing-masing dan diakhiri dengan “M1” dengan menggunakan ekstensi HTML. Contoh : 1110962028_M1.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Form Kendaraan Form Kendaraan No Polisi Merk Kendaraan Model Kendaraan Warna Kendaraan Jenis Kendaraan <select> Mobil Sepeda Motor Copyright © Laboratorium Pemrograman dan Basis Data

Data Kendaraan

Laboratorium Pemrograman dan Basis Data

No. Polisi	Merk Kendaraan	Model Kendaraan	Warna Kendaraan	Jenis Kendaraan
BA 2898 BI	Honda	Vario	Pink	Sepeda Motor
BA 1209 B0	Honda	Jazz	Hitam	Mobil
BA 5164 NE	Toyota	Yaris	Merah	Mobil
BA 2937 WQ	Yamaha	Mio J	Biru	Sepeda Motor
BA 1084 ZP	Daihatsu	Xenia	Putih	Mobil
Total Record Data Kendaraan				5

3. Kemudian jalankan script di atas pada browser anda. Maka akan keluar tampilan seperti berikut ini : Laboratorium Pemrograman dan Basis Data 4. Gunakan css untuk mempercantik halaman. Untuk praktikum kali ini kita menggunakan metode embedded styles. Tambahkan script css dibawah ini di dalam tag … : <style> .class { font-family:buxton sketch; } #header { background-color:blue; color:white; text-align:center; padding:5px; width:500px; } #input, #data { width:250px; float:left; padding:5px 5px 5px 5px; font-size:20px; } Laboratorium Pemrograman dan Basis Data #data{ text-align:right; } #footer { background-color:blue; color:white; clear:both; text-align:center; padding:5px; width:500px; } 5. Maka tampilan pada brower anda akan seperti gambar di bawah ini : Tugas Praktikum Kerjakan tugas praktikum sesuai dengan instruksi dari asisten. Referensi - http://www.w3schools.com/ Laboratorium Pemrograman dan Basis Data - Dasar-Dasar Web Programming, http://lug.stikom.edu/wpcontent/uploads/ebook/dasar2-web-programming-1.0.pdf Cascading Style SheetsTM (CSS), http://students.ukdw.ac.id/~23080309/Pengantar%20CSS.pdf Mico Pardosi. 2001. Merancang Website dengan HTML. Indah : Surabaya. Laboratorium Pemrograman dan Basis Data ×

Report "Modul 1 : HTML dan CSS"

Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send Copyright © 2025 ADOC.PUB. All rights reserved. About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy ×

Sign In

Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close