Minggu, 23 April 2017
Minggu, 09 April 2017
Minggu, 12 Februari 2017
Tugas 5 : HTML Form
Buatlah sebuah Web yang memiliki form Buku Tamu dengan ketentuan sebagai berikut:
1.memiliki text input untuk memasukkan nama
2. memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
3. memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
4. memiliki text area untuk memasukkan Biografi
5. memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
6. memiliki range input untuk menentukan tinggi badan
7. memiliki password input untuk memasukkan kata rahasia
8. memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
9. memiliki number input untuk memasukkan semester yang sedang ditempuh
10. memiliki date input untuk memasukkan tanggal lahir
11. memiliki color input untuk memasukkan warna favorit
12. memiliki email input untuk memasukkan email
13. memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
14. memiliki tombol "Reset" untuk menghapus semua data form
15. memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"
1.memiliki text input untuk memasukkan nama
2. memiliki radio button input untuk memilih jenis kelamin (laki-laki / perempuan)
3. memiliki drop down list untuk memilih Fakultas dari semua fakultas di UNSRI
4. memiliki text area untuk memasukkan Biografi
5. memiliki text input untuk memasukkan mata kuliah favorit, yang sudah memiliki beberapa nama mata kuliah yang sudah terdefinisi (gunakan datalist)
6. memiliki range input untuk menentukan tinggi badan
7. memiliki password input untuk memasukkan kata rahasia
8. memiliki checkbox untuk menentukan apakah tamu membawa kado atau tidak
9. memiliki number input untuk memasukkan semester yang sedang ditempuh
10. memiliki date input untuk memasukkan tanggal lahir
11. memiliki color input untuk memasukkan warna favorit
12. memiliki email input untuk memasukkan email
13. memiliki caption form "Buku Tamu" yang menggabungkan semua isian form
14. memiliki tombol "Reset" untuk menghapus semua data form
15. memiliki sebuah tombol kirim, yang apabila dipilih, akan menampilkan halaman "Terima kasih"
Tugas 4 : HTML Layout
Buatlah sebuah halaman Web menggunakan HTML yang memiliki kriteria sebagai berikut (contoh terlampir):
1. Memiliki Bagian Header sebagai judul website, tulisan warna putih, background warna hitam Kata yang paling akhir pada Judul Website diberi warna merah (gunakan span)
2. Memiliki Bagian Navigasi yang terdapat 5 link ke bagian internal web kita sendiri, rata tengah, background warna tertentu
3. Memiliki Bagian Konten selamat datang yang memiliki judul dan 2 paragraf isi.
4. Memiliki Bagian Sidebar di sebelah kanan Bagian Konten yang terdapat 4 link ke web eksternal, background warna tertentu
5. Memiliki Bagian Footer tulisan warna putih, background warna hitam
6. HTML Responsive untuk small, middle, large device (2 poin)
7. Buatlah layout Anda sendiri yang memanfaatkan materi yang sudah dipelajari pada pekan ini.
1. Memiliki Bagian Header sebagai judul website, tulisan warna putih, background warna hitam Kata yang paling akhir pada Judul Website diberi warna merah (gunakan span)
2. Memiliki Bagian Navigasi yang terdapat 5 link ke bagian internal web kita sendiri, rata tengah, background warna tertentu
3. Memiliki Bagian Konten selamat datang yang memiliki judul dan 2 paragraf isi.
4. Memiliki Bagian Sidebar di sebelah kanan Bagian Konten yang terdapat 4 link ke web eksternal, background warna tertentu
5. Memiliki Bagian Footer tulisan warna putih, background warna hitam
6. HTML Responsive untuk small, middle, large device (2 poin)
7. Buatlah layout Anda sendiri yang memanfaatkan materi yang sudah dipelajari pada pekan ini.
Tugas 3 : HTML Table & List
Tabel
Buatlah sebuah Tabel seperti gambar terlampir yang memiliki spesifikasi sebagai berikut:
1. Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.
2. Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel
3. Judul Kolom "Nama" menggabungkan 2 kolom tabel.
4. Tulisan pada Kolom Judul dibuat rata tengah.
5. Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed)
6. Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)
7. Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil (2 poin)
List:
- Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle
- Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.
Tutorialnya :
1. Pertama tuliskan No,Nama Depan,Nama Belakang, dan Deskripsi di "table header"
2. Kemudian untuk menggabungkan 2 baris tabel No dan Deskripsi gunakan "rowspan"
3, Lalu untuk menggabungkan 2 kolom tabel Nama gunakan "colspan"
4. Untuk membuat tulisan pada Kolom Judul dibuat rata tengah gunakan CSS "text-align: center"
5. Untuk menggabungkan batas (border) menjadi satu (collapse) gunakan CSS "border-collapse: collapse;"
6. Tuliskan caption yang diinginkan di bagian <caption>
7. Dan untuk menambahkan warna background yang berbeda antara baris genap dan baris ganjil gunakan HTML Hex pada bagian CSS id table
8. Selanjutnya pada daftar (list) yang menggunakan bullet bertipe: circle gunakan style="list-style-type:disc"
9. Terakhir untuk daftar (list) yang berupa huruf kecil a,b,c gunakan type="a"
Buatlah sebuah Tabel seperti gambar terlampir yang memiliki spesifikasi sebagai berikut:
1. Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.
2. Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel
3. Judul Kolom "Nama" menggabungkan 2 kolom tabel.
4. Tulisan pada Kolom Judul dibuat rata tengah.
5. Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed)
6. Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)
7. Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil (2 poin)
List:
- Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle
- Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.
Tutorialnya :
1. Pertama tuliskan No,Nama Depan,Nama Belakang, dan Deskripsi di "table header"
2. Kemudian untuk menggabungkan 2 baris tabel No dan Deskripsi gunakan "rowspan"
3, Lalu untuk menggabungkan 2 kolom tabel Nama gunakan "colspan"
4. Untuk membuat tulisan pada Kolom Judul dibuat rata tengah gunakan CSS "text-align: center"
5. Untuk menggabungkan batas (border) menjadi satu (collapse) gunakan CSS "border-collapse: collapse;"
6. Tuliskan caption yang diinginkan di bagian <caption>
7. Dan untuk menambahkan warna background yang berbeda antara baris genap dan baris ganjil gunakan HTML Hex pada bagian CSS id table
8. Selanjutnya pada daftar (list) yang menggunakan bullet bertipe: circle gunakan style="list-style-type:disc"
9. Terakhir untuk daftar (list) yang berupa huruf kecil a,b,c gunakan type="a"
Minggu, 22 Januari 2017
Tutorial HTML Dasar
Tugas 1 Buatlah sebuah web dengan menggunakan rincian berikut:
Tutorialnya :
1. Pertama tuliskan Tugas 1 - <NIM> di dalam bagian Title
2. Kemudian untuk membuat judul yang terdiri dari dua baris tuliskan dua pasang elemen <h1>
3. Lalu gunakan elemen <p> untuk membuat paragraf tulisan
4. Selanjutnya untuk menambahkan gambar masukkan kode: <img src="alamat gambar" />
5. Untuk membuat 2 bagian di gambar jika di klik akan membuka situs tertentu pada halaman baru masukkan kode: <img src="alamat gambar" width="lebar gambar" height="tinggi gambar" usemap="nama usemap"> dan untuk Tag areanya: <area shape="rect" coords=”titik koordinatnya″ href="alamat gambar" target="_blank">
6. Tag untuk membuat garis tuliskan <hr width=100% align=center size=1% color=”warna garis”>
7. Untuk membuat paragraf yang menjelaskan tentang HTML Entities,Symbol dan Charset tutorialnya sama dengan nomor 3
8. Terakhir untuk membuat pantun caranya "hampir sama" dengan nomor 3. Elemen <p> tinggal diganti dengan elemen <pre>
- Title: Tugas 1 - <NIM>
- Memiliki judul dengan font lebih besar dari isi. Judul bebas, dibuat terdiri dari 2 baris (gunakan element br)
- Memiliki 2 paragraf tulisan tentang pengalaman di Fasilkom UNSRI (gunakan element p)
- Memiliki sebuah gambar (gunakan img).
- Buat 2 bagian di gambar yang jika di-klik akan membuka situs tertentu pada halaman baru (gunakan usemap)
- Memilki garis
- Tuliskan paragraf yang menjelaskan tentang jenis-jenis HTML Entities
- Tuliskan paragraf yang menjelaskan tentang Jenis-jenis HTML Symbol
- Tuliskan paragraf yang menjelaskan tentang Jenis-jenis HTML charset
- Buatlah sebuah pantun bebas dengan 4 bait (gunakan element pre. jangan gunakan element br)
Tutorialnya :
1. Pertama tuliskan Tugas 1 - <NIM> di dalam bagian Title
3. Lalu gunakan elemen <p> untuk membuat paragraf tulisan
4. Selanjutnya untuk menambahkan gambar masukkan kode: <img src="alamat gambar" />
5. Untuk membuat 2 bagian di gambar jika di klik akan membuka situs tertentu pada halaman baru masukkan kode: <img src="alamat gambar" width="lebar gambar" height="tinggi gambar" usemap="nama usemap"> dan untuk Tag areanya: <area shape="rect" coords=”titik koordinatnya″ href="alamat gambar" target="_blank">
6. Tag untuk membuat garis tuliskan <hr width=100% align=center size=1% color=”warna garis”>
7. Untuk membuat paragraf yang menjelaskan tentang HTML Entities,Symbol dan Charset tutorialnya sama dengan nomor 3
8. Terakhir untuk membuat pantun caranya "hampir sama" dengan nomor 3. Elemen <p> tinggal diganti dengan elemen <pre>
Jumat, 20 Januari 2017
Cara Membuat Web Dengan Menggunakan HTML Style & Formatting
Assalamualaikum.Wr.Wb
Di post kali ini saya akan menjelaskan Cara membuat Web Dengan Menggunakan HTML Style & Formatting. Pada tutorial ini saya menggunakan aplikasi Notepad++. Jika belum punya aplikasinya bisa download dari http://notepad-plus-plus.org/download/.
1. Pertama silahkan buka text editor (Notepad++), lalu ketikkan kode struktur dasarnya berikut ini:
2. Kemudian masukkan kode: <body style="background-color: warna"> untuk merubah warna background. Disini saya menggunakan warna orange.
3. Selanjutnya untuk membuat judul tulisan berwarna tertentu dengan kode warna HEX dan meletakkannya ditengah masukkan kode: <center><h2 style="kode HEX"> Tempat Makan Favorit di Palembang dan Sekitarnya </h2></center>. Disini saya menggunakan kode #000000. Untuk mengetahui kode warna lain HEX bisa dilihat Disini
4. Lalu untuk mengubah font dari sebuah paragraf tulisan masukkan kode <p><font face="Nama Font"> <!--Isi Paragraf Tulisan--> </p>. Disini saya menggunakan Font Balker. Jika ingin mengganti jenis font lain bisa lihat Disini
5. Untuk membuat huruf kapital pertama setiap kalimat dengan Font berukuran yang lebih besar masukkan kode: <style>.first {font-size: ukuran px;}</style> dan <span class="first">Huruf Kapital</span>. Disini saya menggunakan ukuran 30px.
6. Terakhir letakkan elemen <b>,<em>,<i>,<small>,<strong>,<sub>,<sup>,<ins>,<del>,<mark> di tempat yang kita inginkan seperti dibawah ini.
Note:
<b> Defines bold text
<strong> Defines important text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
7. Dan tampilan akhirnya akan terlihat seperti ini.
Demikianlah tutorial newbie dari saya. Semoga Bermanfaat ^_^
Wassalamualikum Wr.Wb
Di post kali ini saya akan menjelaskan Cara membuat Web Dengan Menggunakan HTML Style & Formatting. Pada tutorial ini saya menggunakan aplikasi Notepad++. Jika belum punya aplikasinya bisa download dari http://notepad-plus-plus.org/download/.
1. Pertama silahkan buka text editor (Notepad++), lalu ketikkan kode struktur dasarnya berikut ini:
2. Kemudian masukkan kode: <body style="background-color: warna"> untuk merubah warna background. Disini saya menggunakan warna orange.
3. Selanjutnya untuk membuat judul tulisan berwarna tertentu dengan kode warna HEX dan meletakkannya ditengah masukkan kode: <center><h2 style="kode HEX"> Tempat Makan Favorit di Palembang dan Sekitarnya </h2></center>. Disini saya menggunakan kode #000000. Untuk mengetahui kode warna lain HEX bisa dilihat Disini
4. Lalu untuk mengubah font dari sebuah paragraf tulisan masukkan kode <p><font face="Nama Font"> <!--Isi Paragraf Tulisan--> </p>. Disini saya menggunakan Font Balker. Jika ingin mengganti jenis font lain bisa lihat Disini
6. Terakhir letakkan elemen <b>,<em>,<i>,<small>,<strong>,<sub>,<sup>,<ins>,<del>,<mark> di tempat yang kita inginkan seperti dibawah ini.
Note:
<b> Defines bold text
<strong> Defines important text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
7. Dan tampilan akhirnya akan terlihat seperti ini.
Demikianlah tutorial newbie dari saya. Semoga Bermanfaat ^_^
Wassalamualikum Wr.Wb
Langganan:
Komentar (Atom)