A. LKS (Lembar Kerja Siswa) - UjiPraktik-1.
-Bukalah buku LKS Kelas IX, dan kerjakan halaman 57-58 dan halaman 61-63.
-Bagi yang tidak memiliki agar mem-foto copy halaman yang disebutkan di atas.
-Dikumpulkan paling lambat hari Kamis tanggal 26 Maret 2015.
B. Membuat halaman web dengan HTML - UjiPraktik-2
-Buatlah sebuah halaman web menggunakan tag HTML.
-Simpan dengan nama file: NamaLengkap-Kelas.html
-Contoh halaman web, lihat di buku catatan
-Simpan dengan nama file: NamaLengkap-Kelas.html
-Contoh halaman web, lihat di buku catatan
Berikut ini adalah struktur html nya:
untuk syntax atawa tata cara pengetikan script lihat dibuku latihan/catatan atau dibagian C pada halaman ini
C. Mengetik script atau tag HTML5, UjiPraktik-3
-Download file kelengkapan UjiPraktik-3 dibagian paling bawah halaman ini (NamaLengkap-Kelas.rar).
-Extract file yang sudah didowload dengan cara: Klik kanan dan pilih Extract Here
-Ganti atau Rename nama folder hasil extract tersebut dengan NamaLengkap-Kelas
contoh: AndiDudung-9A
-Bahan ketikan difotocopy, dan ketiklah dengan teliti.
-Simpan file ketikan tersebut di dalam folder di atas, dengan nama file: NamaLengkap-Kelas-CSS.html
KLIK disini untuk Download file kelengkapan uji praktik.
**Jadi, di dalam folder NamaLengkap-Kelas terdapat beberpa file hasil download dan 2 buah file hasil kerja kalian. Semoga Berhasil!!
Pengenalan Dasar HTML - Hyper Text Mark-Up Language
-Download file kelengkapan UjiPraktik-3 dibagian paling bawah halaman ini (NamaLengkap-Kelas.rar).
-Extract file yang sudah didowload dengan cara: Klik kanan dan pilih Extract Here
-Ganti atau Rename nama folder hasil extract tersebut dengan NamaLengkap-Kelas
contoh: AndiDudung-9A
-Bahan ketikan difotocopy, dan ketiklah dengan teliti.
-Simpan file ketikan tersebut di dalam folder di atas, dengan nama file: NamaLengkap-Kelas-CSS.html
KLIK disini untuk Download file kelengkapan uji praktik.
**Jadi, di dalam folder NamaLengkap-Kelas terdapat beberpa file hasil download dan 2 buah file hasil kerja kalian. Semoga Berhasil!!
Pengenalan Dasar HTML - Hyper Text Mark-Up Language
HTML merupakan bahasa dasar untuk pembuatan halaman web.
Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Namun sebelum belajar JavaScript maupun PHP sebaiknya memahami HTML terlebih dahulu.
Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language. xHTML merupakan versi tambahan dari HTML.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya dengan hanya meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan di antara tanda lainnya akan tampak besar. Tanda ini akan kita kenal di HTML sebagai tag.
HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada melanjutkan HTML.
Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0 tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri: WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakal HTML5.
Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 Saat ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita mulai membuat kode HTML menggunakan standar HTML5.
Menjalankan file html.
Bukalah program Notepad atau text editor lainnya untuk memulai membuat file html.
Start - All Programs - Accessories - Notepad
Contoh-1.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Titel Halaman</title>
</head>
<body>
Belajar membuat halaman web menggunakan standar HTML5.
<h1>teks ini menggunakan Heading 1.</h1>
<p>Ini adalah sebuah Paragraph.</p>
</body>
</html>
!DOCTYPE mendeklarasikan bahwa file tersebut adalah dokumen HTML.
<html> teks </html> mendiskripsikan bahwa file ini adalah file HTML
<head> teks </head> menginformasikan tentang isi halaman
<title> teks </title> mendiskripsikan tentang judul/titel dari halaman
<body> teks </body> mendeskripsikan dari isi halaman
<h1> teks </h1> mendeskripsikan penggunaan format heading h1, h2 ,h3, h4, h5, atau h6
<p>teks </p> mendiskripsikan penggunaan paragraf
Meta tag adalah ‘data tentang data‘, dimana tag ini ditujukan bukan kepada user, tetapi kepada web browser atau kepada ‘robot program‘ seperti mesin pencari (search engine).
Pengertian Tag dalam HTML
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag atau script atau juga coding.
Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup
Berikut adalah format dasar penulisan tag HTML:
<tagname>content atau teks</tagname>
Pengertian Atribut dalam HTML
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).
Contoh kode atau tag HTML untuk hyperlink:
Pada kode HTML diatas, href=”http://tikdhtugas.blogspot.com” adalah atribut. href merupakan nama dari atribut, dan http://tikdhtugas.blogspot.com adalah value atau nilai dari atribut tersebut.
Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut, terutama atribut id dan class yang sering digunakan untuk manipulasi halaman web menggunakan CSS maupun JavaScript.
Membuat Struktur Halaman HTML5 dengan Tag <div>
Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.
Contoh penggunaan tag <header> dan <footer>
<header>
<h1>Judul Website</h1>
<img src=”logo_website.png” />
</header>
Untuk membuat HTML selain Notepad juga dapat menggunakan Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor dan banyak lagi.
Berikut beberapa tag HTML:
HTML headings are defined with the <h1> to <h6> tags:
<h1>teks menggunakan heading 1</h1>
<h2>teks menggunakan heading 2</h2>
<h3>teks menggunakan heading 3</h3>
Menampilkan gambar.
<img src="gambarsaya.jpg" alt="ini gambar" width="150" height="100">
Gambar tersebut berukuran 150 x 100
Warna latar halaman..
<body style="background-color:lightgrey">
atau
<body bgcolor=”yellow”>
Latar halaman berupa gambar.
<body background=”http://alamatgambar”>
Warna teks dan type font.
<h1 style="color:blue">teks menggunakan format heading 1 dan berwarna biru</h1>
<p style="color:red">teks paragraf dengan teks berwarna merah.</p>
<h1 style="font-family:arial">teks heading 1 dengan jenis font Arial</h1>
<p style="font-family:courier; align:right">paragraf teks dengan jenis font Courier</p>
<p align="center>teks ini ditengah-tengah</p>
<font color=”green” size="20">teks berwarna hijau dengan besar huruf 20</font>
Ukuran atau besar huruf.
<h1 style="font-size:16pt">teks dengan heading 1 berukuran 16pt</h1>
<p style="font-size:10pt">teks parafraf dengan teks berukuran 10pt</p>
Membuat tabel.
<table>
<tr>
<th>No</th>
<th>Nama</th>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>9A</td>
</tr>
</tr>
<tr>
<td>2</td>
<td>Dodo</td>
<td>2</td>
<td>Dodo</td>
<td>9B</td>
</tr>
</table>
</tr>
</table>
Teks tebal dan miring atau italic.
<b> ini teks tebal</b>
<strong>ini juga teks tebal</strong>
<i>ini teks miring</i>
<center>ini teks ditengah</center>
<p align=”center” color=”red”>ini teks ditengah berwarna merah</p>
Garis horizontal.
<hr>
Baris baru.
<br>ini teks pada baris baru</br>
Download file .css dan .js untuk kelengkapan Ujian Praktik dihalaman tikdhtugas.blogspot.com
D. Petunjuk UjiPraktik-3
-Akses halaman tikdhtugas.blogspot.com
-Bacalah dan Download file folder yang ada dibagian paling bawah.
-Ektrask file yang sudah didownload dan gantilah nama folder menjad NamaLengkap-Kelas
Contoh: SintyaKirana-9A
-Kemudian ketiklah script html berikut dengan teliti.
-Simpan didalam folder yang sudah diberi/diganti namanya tadi.
-Simpan dengan nama file: NamaLengkap-Kelas-CSS.html
Contoh: SintyaKirana-9A-CSS.html
