PENDIDIKAN: 2018

Minggu, 04 November 2018

Perintah ( QUERY ) HTML

Macam macam perintah ( QUERY ) HTML

1. Document Summary

<html> ... </html> adalah elemen akar di dalam html.
<head> ... </head> adalah elemen yang berisi tentang meta dalam html.
<title> ... </title> adalah suatu elemen judul di html yang terlihat di title html kita.
<body> ... </body> adalah elemen yang berisi konten halaman yang terlihat.

2. Document Information

<base/> digunakan untuk menentukkan document base URL (URL dasar sebuah dokumen), artinya kita membuat sebuah alamat URL sebagai sandaran untuk semua relative URL.
<meta/> elemen atau teg yang berfungsi sebagai pemberi informasi metadata dari sebuah halaman web yang harus di letakkan pada “head” dalam html.
<link/> element menunjukkan sebuah hubungan (link) antara dokumen (HTML) yang bersangkutan dengan sumber file dari luar (eksternal).
<style> ... </style> Element digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen web (HTML).
<script> ... </script> Mendefinisikan client-side script

3. Document Structure

<h1..h6> ... </h1..h6> Script untuk ukuran font pada title
<div> ... </div> Mendefinisikan sebuah section dalam dokumen
<span> ... </span> Mendefinisikan sebuah section dalam dokumen
<p> ... </p> Script untuk pemberian paragraf
<br/> Script untuk pemberian line baru. Seperti enter.
<hr/> Membuat garis horisontal

4. Text (+ Formatting)

<strong> ... </strong> Huruf menjadi tebal (mirip Bold)
<b> ... </b> membuat efek huruf tebal (BOLD)
<em> ... </em> Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
<i> ... </i> membuat efek huruf miring
<tt> ... </tt> Huruf menjadi font Teletype Writer
<strike> ... </strike> Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
<cite> ... </cite> Mendefinisikan kutipan
<pre> ... </pre> Preformated Text. Semua spasi yang bukan script akan sama letaknya dengan yang ditulis.
<del> ... </del> Untuk memberi garis tengah pada teks/mencoret teks
<ins> ... </ins> Membuat teks bergaris bawah
<blockquote> ... </blockquote> Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
<q> ... </q> Mendefinisikan sebuah kutipan singkat
<abbr> ... </abbr> Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
<acronym> ... </acronym> Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
<address> ... </address> Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<dfn> ... </dfn> Mendefinisikan sebuah istilah definisi
<code> ... </code> Mendefinisikan sebuah bagian dari kode komputer
<font> ... </font> Mendefinisikan jenis font, warna dan ukuran untuk teks
<sub> ... </sub> Memberikan efek subscript pada teks
<sup> ... </sup> Memberikan efek superscript pada teks
<small> ... </small> Memperkecil ukuran teks dari ukuran defaultnya
<bdo> ... </bdo> Digunakan untuk menimpa arah teks

5. Links (+ Formatting)

<a href=””> ... </a> Untuk menyisipkan Hyperlink
<a href=”mailto:”> ... </a> Membuat link ke dokumen atau situs lainnya
<a href=”tel://###-###”> ... </a> Membuat link ke dokumen atau situs lainnya
<a name=”name”> ... </a> Membuat link ke dokumen atau situs lainnya
<a href=”#name”> ... </a> Membuat link ke dokumen atau situs lainnya

6. Images (+ Formatting)

<img /> Berfungsi untuk menampilkan gambar pada dokumen HTML
src=”url” Berfungsi untuk menampilkan gambar pada halaman url lain HTML
alt=”text”
height=”” Untuk meninggikan Image. Diisi dengan angka biasa maupun persentase
width=”” Untuk melebarkan Image. Diisi dengan angka biasa maupun persentase
align=”” Untuk mengatur letak tulisan.
border=”” memberi gari pada image
vspace=”” Atribut vSpace menentukan spasi di atas dan bawah dari suatu gambar.
Hspace=”” Atribut hspace menentukan spasi di sisi kiri dan kanan dari suatu gambar.
<map> ... </map> Tag untuk membuat gambar-peta
<map name=””> ... </map> Tag untuk membuka gambar-peta
<area /> Tag untuk membuat area dalam gambar-peta

7. Lists (+ formatting)

<ol> ... </ol> Membuat angka
<ul> ... </ul> Membuat bullet.
<li> ... </li> Penulisan setelah <ol> ... </ol> atau <ul> ... </ul>.
<dl> ... </dl> Mendefinisikan sebuah daftar definisi
<dt> ... </dt> Mendefinisikan istilah (item) dalam daftar definisi
<dd> ... </dd> Mendefinisikan deskripsi dari item dalam daftar definisi

8. Forms (formatting and attributes)

<form> ... </form> Tag untuk membuat sebuah form HTML untuk input pengguna
action=”url” Menentukkan alamat (URL) yang memproses data form ketika dikirim.
Method=”” Menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form.
Enctype=”” Menunjukkan encoding type. Konten MIME type yang digunakan untuk mengirimkan data form pada sebuah server. Ini, hanya berlaku untuk form dengan method="post"
autocomplete Menentukkan apakah input (control) secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak. Hal ini dilakukan otomatis (jika on) oleh browser untuk menampilkan tulisan yang sebelumnya telah diinput untuk menghindari penulisan berulang kali.
Novalidate Menunjukkan bahwa form tidak perlu divalidasi ketika dikirim pada sebuah server.
accept-charsets Menentukkan character encodings yang diterima oleh server sebelum form dikirim.
Target Menentukkan tempat dari respon yang diterima setelah mengirim form.
<fieldset> ... </fieldset> Grup unsur terkait dalam bentuk
<label> ... </label> Tag untuk membuat sebuah label untuk sebuah elemen <input>
<legend> ... </legend> Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<input /> Tag untuk membuat sebuah kontrol input

Input type attributes

type=”” Atribut type menentukan jenis <input> elemen untuk menampilkan.
name=”” Menentukkan nama untuk sebuah form.
Value=”” Menentukan nilai default untuk bidang input
size=”” menentukan lebar terlihat, dalam karakter, sebuah <input> elemen.
maxlength=”” berfungsi untuk memberi batasan jumlah minimal karakter
required adalah untuk meminimalisir kesalahan pengguna saat pengisian form, misalnya harus mengisi semua kolom form yang tertera, namun jika ada yang terlewat maka atribut required ini akan memberi tahu kepada pengguna ada form yang terlewat.
Step=”” Atribut langkah menentukan interval nomor hukum untuk <input> elemen.
width=”” menentukan lebar kolom input
height=”” menentukan tinggi kolom input
placeholder=”” untuk menampilkan text di dalam input tetapi jika di isi dia akan hilang
min=”” menerangkan nilai maksimum dari sebuah input
max=”” menerangkan nilai minimum dari sebuah input
autofocus sebagai default/ standar from input yang secara otomatis di select pada sebuah from input.
Disabled digunakan untuk menonaktifkan sebuah elemen (contoh elemen input).
<textarea> ... </textarea> Mendefinisikan sebuah input control multiline atau teks area
cols=”” menentukan lebar terlihat dari area teks.
Rows=”” menentukan baris terlihat dari area teks.
<select> ... </select> Mendefinisikan sebuah daftar drop-down

Select attributes

name=”” Menentukkan nama untuk sebuah form.
Size=”” menentukan lebar terlihat, dalam karakter, sebuah <input> elemen.
Multiple pengguna diperbolehkan untuk memasukkan lebih dari satu nilai dalam <input> elemen.
required adalah untuk meminimalisir kesalahan pengguna saat pengisian form, misalnya harus mengisi semua kolom form yang tertera, namun jika ada yang terlewat maka atribut required ini akan memberi tahu kepada pengguna ada form yang terlewat.
Autofocus sebagai default/ standar from input yang secara otomatis di select pada sebuah from input.
<optgroup> ... </optgroup> Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option> ... </option> Mendefinisikan sebuah option dari sebuah daftar drop-down

Option attributes

value=”” Menentukan nilai default untuk bidang input
selected digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user.
<button> ... </button> Mendefinisikan sebuah tombol
type=”” Atribut type menentukan jenis Option attributes

9. Tables (+ Formatting)

<table> ... </table> Untuk membuat table
<caption> ... </caption> Membuat caption pada tabel
<thead> ... </thead> Untuk mengelompokkan isi head di dalam sebuah tabel
<tbody> ... </tbody> Untuk mengelompokkan isi body di dalam sebuah tabel
<tfoot> ... </tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel
<tr> ... </tr> Membuat baris pada tabel
<th> ... </th> Table Header, membuat kolom judul
<td> ... </td> Membuat kolom pada tabel
<colgroup> ... </colgroup> Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan
<col /> Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel

10. Objects and iFrames

<object> ... </object> Mendefinisikan sebuah embedded objek
height=”” Untuk meninggikan table. Diisi dengan angka biasa maupun persentase
width=”” Untuk melebarkan table. Diisi dengan angka biasa maupun persentase
type=”” Atribut type menentukan jenis Option attributes
usemap=”” menentukan gambar (atau benda) sebagai gambar-peta (gambar-peta adalah gambar dengan area yang dapat diklik)
<iframe> ... </iframe> Mendefinisikan sebuah frame inline

iFrame attributes

name=”” Menentukkan nama untuk sebuah iframe
src=”” menentukan alamat dokumen untuk menanamkan dalam <iframe>.
Srcdoc=”” menentukan konten HTML halaman untuk menunjukkan dalam bingkai inline.
Width=”” menentukan lebar sebuah <iframe>, dalam piksel.
<param /> Mendefinisikan sebuah parameter untuk sebuah object
<embed> ... </embed> Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi

Embed attributes

height=”” menentukan ketinggian konten tertanam, dalam piksel.
width=”” menentukan lebar konten tertanam, dalam piksel.
Src=”” menentukan alamat dari file eksternal untuk menanamkan.
Type=”” menentukan jenis media Internet (sebelumnya dikenal sebagai jenis MIME) dari konten tertanam.

11. HTML5 New Tags

<header> ... </header> Tag untuk membuat sebuah header untuk dokumen atau bagian
<footer> ... </footer> Tag untuk membuat footer untuk dokumen atau bagian
<main> ... </main> Menentukan konten utama dari dokumen
<article> ... </article> Tag untuk membuat sebuah artikel
<aside> ... </aside> Tag untuk membuat konten lain selain dari konten halaman
<section> ... </section> Tag untuk membuat bagian dalam dokumen
<details> ... </details> Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan
<dialog> ... </dialog> Tag untuk membuat sebuah kotak dialog atau jendela
<figcaption> ... </figcaption> Tag untuk membuat sebuah caption untuk elemen <figure>
<figure> ... </figure> Menentukan konten mandiri
<mark> ... </mark> Tag untuk membuat teks yang disorot / ditandai
<nav> ... </nav> Tag untuk membuat navigasi link
<menuitem> ... </menuitem> Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup

latihan soal!!!

contoh soal php

ketik ini pada browser => http://s.id/2p0US

Kamis, 01 November 2018

Layout WEBSITE

Buat seperti di atas

Jawab :

1. HTML

<html>
<head><title>latihan layout</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
</style>
</head>
<body>
<div id="container">
 <div id="top" class="clearfix">
  <ul>
   <li id="judul">
    <h1>Logo Website</h1>
   </li>
   <li id="gambar">
    <img src="https://s3.amazonaws.com/peoplepng/wp-content/uploads/2018/06/08182002/eid-mosque-png-downloads.png">
   </li>
  </ul> 
 </div>
 <div id="header" class="clearfix">
  <ul> 
   <li><a href="#">Link 1</a></li>
   <li class="drap"><a href="#">Link 2</a>
    <div class="down">
     <p><a href="dropdown1.html">Dropdown1</a></p>
     <p><a href="dropdown2.html">Dropdown2</a></p>
     <p><a href="dropdown3.html">Dropdown3</a></p>
    </div>
   </li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
  </ul>
 </div>
 <div id="main" class="clearfix">
  <div id="sidebar">
   <div id="sidbar">
    <h1>Sidbar Links</h1>
    <hr>
    <ul id="text"> 
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
    </ul>
   </div>
   <div id="other">
    <h1>Other Widgets</h1>
    <hr>
    <p>This is Photoshop's version of Lorem lpsum. proin gravida nibh vel velit auctor aliquet. aenean solicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
    <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</p>
   </div>
  </div>
  <div id="kotak"></div>
  <div id="content">
   <h1>This is a Lorem Ipsum Heading</h1>
   <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
   <p><a href="#">Read More</a></p>
   <hr>
  </div> 
  <div id="kotak"></div>
  <div id="content">
   <h1>This is a Lorem Ipsum Heading</h1>
   <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
   <p><a href="#">Read More</a></p>
   <hr>
  </div> 
  <div id="kotak"></div>
  <div id="content">
   <h1>This is a Lorem Ipsum Heading</h1>
   <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
   <p><a href="#">Read More</a></p>
   <hr>
  </div> 
 </div>
 <div id="footer">
  <p>&copy; Copyright<a>YourSite</a>.All rights reserved.</p>
 </div>
</div>

<body>
</html>

2. CSS name field (external.css)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
 }
 body{
 padding: 2%;
 font-family: arial;
 }
 #container{
 margin: auto;
 }
 #top{
 background-color: #323232;
 min-height: 17%;
 }
 #judul h1 {
 float: left;
 color: white;
 font-size: 40px;
 font-weight: bold;
 margin: 3% 0% 0% 5%;
 font-family: times new romant;
 }
 #gambar img{
 float: right;
 position: relative;
 width: 25%;
 margin: 2% 5% 0% 0%; 
 }
 #header{
 background-color:#666666;
 }
 #header ul li{
 display: inline-block;
 float: left;
 border-right: 2px solid #3F3F3F;
 padding: 1.5% 0% 1.5% 0%;
 }
 #header ul li:hover{
 background-color:#444444;

 }
 #header ul li a{
 text-decoration: none;
 color: #D0D0D0;
 font-weight: bold;
 padding: 20px 30px 40px 30px;
 }
 .drap{
 position: relative;
  display: inline-block;
 }
 .down {
  display: none;
  position: absolute;
  background-color: #666666;
 float: left;
 margin-top: 18px;

 }
 .down p {
 padding: 13px 10px 13px 10px;
 border-bottom: 2px solid #3F3F3F;
 }
 .down p:hover {
 background-color: #444444;
 }
 .drap:hover .down{
 display: block;
 }
 #main{
 display: block;
 }
 #sidebar{
 background-color: #E5E5E5;
 float: right;
 margin-left:20px;
 width: 25%;
 height: 1000px;
 }
 #sidbar hr{
 width: 21%;
 margin: 15px 0px 15px 0px;
 position: absolute;
 border: 1px ridge #ADADAD;
 }
 #sidbar {
 float: left;
 font-weight: bold;
 margin: 30px 0px 0px 20px;
 }
 #text{
 margin: 30px 20px 0px 20px;
 float: left;
 }
 #text li{
 margin-bottom: 20px; 
 }
 #text li a{
 text-decoration: none;
 color: #E3A04A;
 }
 #other {
 float: left;
 margin: 0px 20px 10px 20px;
 display: block;
 }
 #other h1{
 font-weight: bold;
 margin: 10px 0px 0px 0px;
 }
 #other hr{
 width: 21%;
 margin: 15px 0px 15px 0px;
 position: absolute;
 border: 1px ridge #ADADAD;
 }
 #other p{
 margin: 30px 0px 0px 0px;
 color: #7E7E7E;
 }
 #kotak{
 background-color: #E5E5E5;
 width: 225px;
 height: 225px;
 float: left;
 margin: 40px 0px 0px 20px;
 }
 #content{
 background-color: #FFFFFF;
 }
 #content h1{
 font-weight: bold;
 font-size: 20px;
 padding: 50px 0px 0px 22%;
 }
 #content p{
 padding: 20px 0px 10px 22%;
 color: #7E7E7E;
 }
 #content p a{
 color: #E3A04A;
 text-decoration: none;
 font-weight: bold; 
 }
 #content hr{
 margin: 120px 0px 0px 20px;
 border: 1px ridge #ADADAD;
 }
 #footer{
 background-color: #333333; 
 }
 #footer p{
 padding: 20px 0px 20px 0px;
 text-align: center;
 color: white;
 font-weight: bold;
 }
 #footer a{
 color: #BA6726;
 }

layout WEBSITE

Buatlah layout css seperti gambar

jawab :

1. HTML

<html>
<head><title>latihan layout</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
</style>
</head>
<body>
<div id="container"> 
 <div id="header" class="clearfix">
 <ul id="text"> 
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Home</a></li>
  <li><img src="http://pondokinformatika.com/wp-content/uploads/2018/03/Pita_web_logo-1.png" ></li>
 </ul>
 </div>
 <div id="main" class="clearfix">
  <div id="sidebar">
   <form>
    <input type="text" placeholder="Masukkan kata kunci">   
    <button type="submit">Search</button>
   </form>
  </div>
 <div id="content">
  <h1>Judul Halaman</h1>
  <p>Pesantren adalah sebuah pendidikan tradisional yang para siswanya tinggal bersama dan belajar di bawah bimbingan guru yang lebih dikenal dengan sebutan kiai dan mempunyai asrama untuk tempat menginap santri. Santri tersebut berada dalam kompleks yang juga menyediakan masjid untuk beribadah, ruang untuk belajar, dan kegiatan keagamaan lainnya. Kompleks ini biasanya dikelilingi oleh tembok untuk dapat mengawasi keluar masuknya para santri sesuai dengan peraturan yang berlaku.</p>
  <p>Pesantren merupakan dua istilah yang menunjukkan satu pengertian. Pesantren menurut pengertian dasarnya adalah tempat belajar para santri, sedangkan pondok berarti rumah atau tempat tinggal sederhana terbuat dari bambu. Di samping itu, kata pondok mungkin berasal dari Bahasa Arab Funduq yang berarti asrama atau hotel. Di Jawa termasuk Sunda dan Madura umumnya digunakan istilah pondok dan pesantren, sedang di Aceh dikenal dengan Istilah dayah atau rangkang atau menuasa, sedangkan di Minangkabau disebut surau.</p>
 </div> 
 </div>
 <div id="footer">
  <p>&copy; Copyright 2017</p>
 </div>
</div>

<body>
</html>

2. CSS EXTERNAL (external.css)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
 }
 body{
 padding: 20px;
 }
 #container{
 max-width: 1000px;
 margin: auto;
 }
 #header{
 padding: 20px;
 background-color: #cccccc;
 }
 #header ul li a{
 display: block;
 float: right;
 margin-top: 15px;
 padding: 20px;
 color: black;
 font-weight: bold;
 text-decoration: none;
 font-family: calibri;
 }
 #text li img{
 margin-top: auto;
 }
 #main{
 padding-top:20px;
 padding-bottom: 20px;
 }
 #sidebar{
 background: #cccccc;
 height: auto;
 width: 25%;
 position: absolute;
 float: left;
 min-height: 400px;
 }
 #sidebar input{
 width: 50%;
 text-align: center;
 margin: 20px 10px 20px 35px;
 }
 #content{
 background: #EEEEEE;
 height: auto;
 width: 65%;
 position: relative;
 float: right;
 min-height: 500px;
 overflow-y: scroll;
 overflow-x: scroll;
 }
 #content h1{
 font-weight: bold;
 padding: 20px 0px 0px 20px;
 }
 #content p{
 padding: 10px 20px 20px 20px;
 text-align: justify;
 }
 #footer{
 display: block;
 background: #AAAAAA;
 width: 1000px;
 padding: 20px 0px 20px 0px;
 }
 #footer p{
 font-weight: bold;
 color: white;
 text-align: center;
 }

CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Membuat Menu

Buatlah Menu seperti gambar di atas

Jawab :

<html>
 <head>
 <title> Tugas Ustadz Alfin </title>
  <style type="text/css">
/* COLOR BLACK */
  body{
  font-family:Sans Serif;      
  }
  #header1{
  display:inline-block;
  margin-top:20px;
  margin-left:300px;
  }
  #header1 ul{
  display:block;
  border-radius:10px;
  background-image :linear-gradient(#686B6F,#43484C);
  padding-bottom: 40px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  height:auto;
  width:auto;
  font-weight:bold;
  border: 2px solid ;
  border-color:#4D5152;
  }
  #header1 ul li{
  display:block;
  float:left;
  padding:5px 10px;
  }
  #header1 ul li a{
  display:inline-block;
  color:white;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px ; 
  width: 110px;
  text-align:center;

  }
  #header1 ul li a:hover{
  display:block;
  color:black;
  background-color:white;
  }
/* COLOR BLUE */
  body{
  font-family:Sans Serif;      
  }
  #header2{
  display:inline-block;
  margin-top:20px;
  margin-left:300px;
  }
  #header2 ul{
  display:block;
  border-radius:10px;
  background-image :linear-gradient(#137CC2,#055E98);
  padding-bottom: 40px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  height:auto;
  width:auto;
  font-weight:bold;
  border: 2px solid ;
  border-color:#16628E;
  }
  #header2 ul li{
  display:block;
  float:left;
  padding:5px 10px;
  }
  #header2 ul li a{
  display:inline-block;
  color:white;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px ; 
  width: 110px;
  text-align:center;

  }
  #header2 ul li a:hover{
  display:block;
  color:black;
  background-color:white;
  }
/* COLOR RED */
  body{
  font-family:Sans Serif;      
  }
  #header3{
  display:inline-block;
  margin-top:20px;
  margin-left:300px;
  }
  #header3 ul{
  display:block;
  border-radius:10px;
  background-image :linear-gradient(#CB0003,#5B0C10);
  padding-bottom: 40px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  height:auto;
  width:auto;
  font-weight:bold;
  border: 2px solid ;
  border-color:#91131D;
  }
  #header3 ul li{
  display:block;
  float:left;
  padding:5px 10px;
  }
  #header3 ul li a{
  display:inline-block;
  color:white;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px ; 
  width: 110px;
  text-align:center;

  }
  #header3 ul li a:hover{
  display:block;
  color:black;
  background-color:white;
  }
/* COLOR GREEN */
  body{
  font-family:Sans Serif;      
  }
  #header4{
  display:inline-block;
  margin-top:20px;
  margin-left:300px;
  }
  #header4 ul{
  display:block;
  border-radius:10px;
  background-image :linear-gradient(#83C715,#3F700E);
  padding-bottom: 40px;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  height:auto;
  width:auto;
  font-weight:bold;
  border: 2px solid ;
  border-color:#305111;
  }
  #header4 ul li{
  display:block;
  float:left;
  padding:5px 10px;
  }
  #header4 ul li a{
  display:inline-block;
  color:white;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px ; 
  width: 110px;
  text-align:center;

  }
  #header4 ul li a:hover{
  display:block;
  color:black;
  background-color:white;
  }
  </style>
 </head>
 <body>
  <div id ="header1">
   <ul>
    <li><a href="./=">home</a></li>
    <li><a href="aboutus.html">about us</a></li>
    <li><a href="services.html">services</a></li>
    <li><a href="solutions.html">solutions</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
   </ul>   
  </div>
  <div id ="header2">
   <ul>
    <li><a href="./=">home</a></li>
    <li><a href="aboutus.html">about us</a></li>
    <li><a href="services.html">services</a></li>
    <li><a href="solutions.html">solutions</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
   </ul>   
  </div>
  <div id ="header3">
   <ul>
    <li><a href="./=">home</a></li>
    <li><a href="aboutus.html">about us</a></li>
    <li><a href="services.html">services</a></li>
    <li><a href="solutions.html">solutions</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
   </ul>   
  </div>
  <div id ="header4">
   <ul>
    <li><a href="./=">home</a></li>
    <li><a href="aboutus.html">about us</a></li>
    <li><a href="services.html">services</a></li>
    <li><a href="solutions.html">solutions</a></li>
    <li><a href="portfolio.html">portfolio</a></li>
   </ul>   
  </div>
 </body>
</html>

CSS Table

Buat Menggunakan Html dan CSS

Jawab :

<html>
 <head><center><b><h1> Jadwal Mata Pelajaran </h1></b></center>
 <title> Tugas Ustadz Alfin </title>
  <style type="text/css">
   #header {
   background-color :#0ba808;
   }
   #color1 {
   background-color :#9ff9bc;
   }
   #color1:hover{
   color: white;
   background-color :brown;
   } 
   #color2 {
   background-color :#e1f2e6;
   }
   #color2:hover {
   color: white;
   background-color : black;
   }
   font {
   color: white;
   background-color :#0ba808;
   }
   font:hover {
   color: black;
   background-color: white;
   }
   #pengajar:hover {
   color: blue;
   background-color: pink;
   } 
  </style>
 </head>
 <body>
 <center>
 <p><table border ="1">
 
 <tr>
 
  <th id = "header" width = "150" height = "60"><font color = "white"> Jam </font></th>
  <th id = "header" width = "150" ><font> Senin </font></th>
  <th id = "header" width = "150" ><font> Selasa </font></th>
  <th id = "header" width = "150" ><font> Rabu </font></th>
  <th id = "header" width = "150" ><font> Kamis </font></th>
  <th id = "header" width = "150" ><font> Jum'at </font></th>
  <th id = "header" width = "150" ><font> Sabtu </font></th>
  <th id = "header" width = "150" ><font> Ahad </font></th>
  
 </tr>
 
 <tr>
  <th id = "header" height = "60"><font color = "white"> 05:00-06:00 </font></th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>
  <th id = "color1"> Tahfidz </th>  
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 06:00-08:00 </font></th>
  <th id = "color2"> Mandi/Sarapan </th>
  <th id = "color2"> Mandi/Sarapan </th>
  <th id = "color2"> Mandi/Sarapan </th>
  <th id = "color2"> Mandi/Sarapan </th>
  <th id = "color2" width = "150" rowspan = "2"> Bersih - Bersih </th>
  <th id = "color2"> Mandi/Sarapan </th>
  <th id = "color2"> Mandi/Sarapan </th> 
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 08:00-09:00 </font></th>
  <th id = "color1"> Fiqih </th>
  <th id = "color1"> Hadits </th>
  <th id = "color1"> Speaking </th>
  <th id = "color1" rowspan = "2"> Web Desain 1 </th>
  <th id = "color1"> Grammar </th>
  <th id = "color1"> Review Desain Grafis </th>
 </tr>
 <tr>
  <th id = "header" height = "60" rowspan = "2"><font color = "white"> 09:00-11:00 </font></th>
  <th id = "color2" rowspan = "2"> Web Programing 1 </th>
  <th id = "color2" rowspan = "2"> Design Grafis 1 </th>
  <th id = "color2" rowspan = "2"> Web Programing 1 </th>
  <th id = "color2" rowspan = "2"> Olahraga </th>
  <th id = "color2" rowspan = "2"> Video </th>
  <th id = "color2" height = "40" > Review Web Desain </th>
 </tr>
 <tr>
  <th id = "color2" height = "40"> Aqidah </th>
  <th id = "color2"> Review Database </th> 
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 11:00-13:00 </font></th>
  <th id = "color1" colspan = "7"> Istirahat/ Shalat/ Makan Siang </th>
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 13:00-15:00 </font></th>
  <th id = "color2" colspan = "7"> Jam Cadangan </th>
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 15:00-19:00 </font></th>
  <th id = "color1"> Tahsin Qiroati </th>
  <th id = "color1"> Olahraga </th>
  <th id = "color1"> Tahsin Qiroati </th>
  <th id = "color1"> Bahasa Arab </th>
  <th id = "color1"> Tahsin Qiroati </th>
  <th id = "color1"> Olahraga </th>
  <th id = "color1"> Olahraga </th>  
 </tr>
 <tr>
  <th id = "header" height = "60"><font color = "white"> 19:00-21:00 </font></th>
  <th id = "color2"> Web Design 1 </th>
  <th id = "color2"> Database 1 </th>
  <th id = "color2"> Saqofa </th>
  <th id = "color2"> Database 1 </th>
  <th id = "color2"> Desain Grafis 1 </th>
  <th id = "color2"> Basic Hacking </th>
  <th id = "color2"> Review Web Programing </th>
 </tr>
 </table>
 </center>
 <table id="pengajar">
 <tr> <td>Fiqih</td><td>=</td><td>Ust Irhamullah</td>
 <tr> <td>Speaking</td><td>=</td><td> Ust Irhamullah</td>
 <tr> <td>Grammar</td><td>=</td><td>Ust Irhamullah</td>
 <tr> <td>Hadits</td><td>=</td><td>Ust Irhamullah</td>
 <tr> <td>Video</td><td>=</td><td>Mas Diki</td>
 <tr> <td>Web Design</td><td>=</td><td>Ust Alfin</td> 
 <tr> <td>Database</td><td>=</td><td>Ust Fuad</td>
 <tr> <td>Laravel</td><td>=</td><td>Ust Nuli</td>  
 <tr> <td>Hacking</td><td>=</td><td>Mas Waskita</td>
 <tr> <td>Aqidah</td><td>=</td><td>Ust Ikhsan</td>
 <tr> <td>Tarbiyah</td><td>=</td><td>Ust Qudus</td>
 </tables>
 </body>
<html>