HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.

HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan:  Text editor sederhana. Contoh: Windows: Notepad Linux: Bluefish, gEdit, mcedit, pico, dll  Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror.

Istilah-istilah dalam HTML :  Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).Tag kontainer:.....  Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan.  Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.

Tag Utama dalam struktur dokumen HTML: <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META >

Contoh HTML sederhana : HTML Kami sedang mulai belajar HTML

Penggunaan Komentar Format: Fungsi:  Memberi nama aplikasi  Mendeskripsikan tujuan pengkodean tertentu di dalam file  Memberi nama pengarang  Memberi tanggal pembuatan  Memberi nomer versi  Memberi informasi hak cipta

Tag Heading  Untuk judul atau sub judul dalam dokumen HTML........

Script: Heading Heading 1: HTML Heading 2: HTML Heading 3: HTML Heading 4: HTML Heading 5: HTML Heading 6: HTML

Tag Paragraf  Paragraf yang dapat diatur perataannya (kiri, tengah, kanan):... Script: Paragraf Materi HTML Kami sedang mulai belajar HTML Saat ini membahas materi Dasar-dasar HTML

Tag Memformat Dokumen Script: Format Dokumen Contoh Teks Bold Contoh Teks Italic Contoh Teks superscripted Contoh Teks subscripted Contoh Teks struckthrough Contoh Teks Computer Code

Tag Pre-format  Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:... Script: Pre-Format Saya sedang Bel ajar HTML Untuk mem buat aplikasi berbasis web

Tag Break  Untuk menulis teks pada baris berikutnya: Script: Mengganti Baris Muhammad Yusuf Jurusan Teknik Informatika Fakultas Teknik Universitas Trunojoyo

Tag Garis Pemisah Horisontal  Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> Script: Membuat Garis Horisontal Berikut ini penggunaan satu garis horisontal: dan penggunaan dua garis horisontal:

Tag Font  Ukuran font:...  Jenis font:...  Warna font... Script: Memformat Font Teks berwarna hexcolor #FF00FF Teks berwarna merah

Tag Hypertext Link Format:...  Link ke dokumen lain...  Link ke bagian tertentu dalam dokumen yang sama...  Link ke alamat URL atau WebSite...  Link ke alamat Email...  Link File yang akan didownload...

Tag Hypertext Link (2) Script: Membuat link Silahkan download handout perkuliahan di <A href=" http://gubugmasrur.wordpress.com\edukasi\pemrogr aman-internet-basis-java"> blog masrur

HALAMAN WEBSITE PRIBADI HOMEHOME | PROFIL | KONTAKPROFILKONTAK ANDA BERADA DIHALAMAN HOME.HTML

HALAMAN WEBSITE PRIBADI HOMEHOME | PROFIL | KONTAKPROFILKONTAK ANDA BERADA DALAM HALAMAN PROFIL.HTML

HALAMAN WEBSITE PRIBADI HOMEHOME | PROFIL | KONTAKPROFILKONTAK ANDA BERADA DALAM HALAMAN KONTAK.HTML

Tag Memuat Gambar Memuat gambar ke dalam halaman Web Relative Path:  File gambar ada dalam direktori yg sama:./  File gambar ada dalam direktori sebelumnya:../ Script: Insert Gambar Penguins

Warna Background Menggunakan warna... Script: Penggunaan Latar Belakang Warna Kami sedang mulai belajar HTML

Warna Background (2) Menggunakan gambar... Script: Penggunaan Latar Belakang Gambar <body background="./Desert.jpg"> <h2 align="center">Kami sedang mulai belajar HTML

Tag List  - unordered list (daftar tdk bernomor); bullet...  - ordered list; nomor...  - definition list; dictionary...... [ ]

Tag List (2) Script: Penggunaan List Istilah-istilah dalam HTML: Tag Element Attribute Contoh tag : Tag heading Tag list

TABEL Fungsi:  Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca  Mengatur tampilan homepage agar lebih menarik

 Tag yang diperlukan:  Atribut-atribut:

Membuat Tabel Sederhana  Tag yang diperlukan: - Membuat baris: (table row) - Membuat kolom: (table data) Contoh: Baris 1 Sel 1 Baris 1 Sel 2 Baris 2 Sel 1 Baris 2 Sel 2

Menambahkan Judul Tabel  Judul tabel:  Judul baris/kolom: (table header) Contoh: DAFTAR MAHASISWA No NPM Nama 1 06.100.001 Amin A. Angkasa 2 06.100.002 Beni B. Bernardi

Mengatur Lebar & Tinggi Tabel Atribut: width dan height Nilai:  ukuran % (max 100%)  ukuran pixel Contoh: DAFTAR MAHASISWA No NPM Nama 1. 06.100.001 Amin A. Angkasa 2. 06.100.002 Beni B. Bernardi

Perataan dalam tabel  horisontal: atribut align -> utk,, dan  vertikal: atribut valign -> utk, dan Contoh: DAFTAR MAHASISWA No NPM Nama 1. <td align="center" valign="middle" width="80" height="50">06.100.001 <td align="right" valign="top" width="180" height="50">Amin A. Angkasa 2. <td align="left" valign="top" width="80" height="70">06.100.002 <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi

Membuat warna pada tabel  Atribut: bgcolor Contoh: Tabel Daftar Mahasiswa No NPM Nama <td align="center" width="20">1. <td align="left" valign="middle“ width="80" height="40">06.100.001 <td align="left" valign="middle“ width="180" height="40">Amin A. Angkasa 2. <td bgcolor="red" align="left" valign="middle" width="80" height="40">06.100.002 <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi

Penggabungan baris/kolom  Menggabungkan bbrp kolom menjadi 1: atribut colspan  Menggabungkan bbrp baris menjadi 1: atribut rowspan

Script HTML: Tabel Daftar Nilai Mahasiswa No NPM Nama Nilai UTS UAS 1. 06.100.001 Amin A. Angkasa 70 80 2. 06.100.002 Beni B. Bernardi 70 80

form  Sebuah dokumen interaktif dapat menangani input dari user  Analoginya : bahwa dokumen adalah sebuah formulir isian  Sebuah dokumen dapat mengandung satu atau beberapa form  Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll)  Setiap form dapat menghimpun satu atau beberapa elemen input  Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input  Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit)  Skema dasar dokumen form : bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis  Contoh sebuah form sederhana untuk meminta nama user : Ketikkan nama Anda:

Karakteristik data input  Teks satu baris (single-line text)  Teks banyak baris (multi-line text)  Teks rahasia (password)  Pilihan tunggal (single selection),  Pilihan majemuk (multiple selections)  Centang (on/off)  Data bawaan/tersembunyi (hidden)  File  Koordinat 2D dalam sebuah bidang gambar  Aksi user melalui penekanan tombol,,,

Tag input  type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)  readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user  checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih  src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar

Tag textarea, select, button  nilai nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar)  teks1 teks2 … multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default=1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih  tampilan type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol

Contoh form (1) Silahkan isi data Anda Nama lengkap: Password: Jenis kelamin: Laki-laki Perempuan Alamat: <textarea rows="3" cols="30" name="alamat" id="alamat"> Sudah bayar? <input type="checkbox" name="bayar" id="bayar">Sudah

Contoh form (2) Kota: pilih kota... Bandung Jakarta Surabaya Pekerjaan: Mahasiswa Pegawai swasta Pegawai negeri Wiraswasta Bahasa: (bisa lebih dari satu) Indonesia Inggris Cina Prancis Hobi: (bisa lebih dari satu) Berenang Nonton film Musik Foto: Kirim Reset

Contoh form (3) Kode: Jenis: Kapal patroli Kapal perusak Pangkalan udara Markas Logistik Tunjuk lokasi penempatan :

REFERENSI

HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.

Presentasi serupa

Presentasi berjudul: "HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software."— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.

Presentasi serupa

Presentasi berjudul: "HTML  singkatan dari HyperText Markup Language  menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software."— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan