Program Tehnik Informatika MAN 1 Boyolali

Program Unggulan MAN 1 Boyolali kerjasama dengan ITTC Javatechno.

MAN Double Degree

MAN 1 Boyolali beralamat di Jl. Kates. Siswodipuran Kabupaten Boyolali, Propinsi Jawa Tengah.

Kegiatan Perkuliahan MDG Javatechno

Dalam perkuliahan diharapkan siswa aktif dalam penerimaan matakuliah yang diajarkan. Siswa diharapkan mempunyai niat yang ikhlas dalam mengikuti kegiatan perkuliahan. Pergunakan waktu luang anda untuk mempelajari materi yang telah diajarkan di lab, untuk menambah wawasan anda. Dan jika ada pertanyaan terkait materi yang diajarkan bisa ditanyakan diluar jam perkulian.

Tugas dan Kehadiran

Tugas harus dikerjakan sesuai dengan waktu yang telah ditentukan. Dosen tidak akan mengejar ngejar atau mengingatkan tentang tugas anda, karena ini yang dituntut adalah kedewasaan anda. Ingat nilai akhir ada ditangan Dosen pengajar,,, Hal tersebut berlaku juga untuk kehadiran.,,,, Tetap semangat ya... :-)

Teknologi Masa Depan

Manfaatkan internet untuk media belajar dan untuk menambah wawasan terutama di bidang teknologi yang semakin berkembang. Tentu saja Ilmu Agama jangan dilupakan. Karena teknologi juga berkembang karena ALLAH yang mengijinkan.. Tetap selalu bersyukur, sabar dan optimis dalam mengarungi kehitupan... selamat belajar......

Thursday, August 10, 2017

Materi Design Web: Membuat layout sederhana dengan HTML dan CSS

Assalamu'alaikum Wr Wb

pada kesempatan hari ini saya akan menjelaskan tentang cara membuat layout sederhana dengan HTML dan CSS. langsung saja untuk yang pertama silahkan buat Folder untuk menyimpan projectnya agar tidak terpencar.
Ketikkan program di bawah ini lalu simpan dengan nama style.css



body{
 background-color:magenta;
 padding:0px;
 margin:0px;
}

.wrap{
 background: blue;
 width: 900px;
 margin: auto;
}

/*bagian header*/
.wrap .header{
 background-color:black;
 height: 150px;
 padding: 5px 10px;
 color:red;
}

/*akhir header*/

/*bagian navigasi*/
.wrap .nav{
 background: yellow;
}

.wrap .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #77f442;
}

.wrap .nav li {
    float: left;
}

.wrap .nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.wrap .nav li a:hover:not(.active) {
    background-color: #111;
}

.wrap .active {
    background-color: #4CAF50;
}
/*akhir menu*/

.clear{
 clear: both;
}

.badan{
 height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
 background: orange;
 float: left; 
 width: 20%;
 height: 100%;
 padding:10px;
}

/*akhir sidebar*/

.wrap .badan .content{
 background: white;
 float: left;
 height: 100%;
 width: 75.5%;
    padding:10px; 
}

.wrap .footer{
 width: 100%;
 padding: 10px;
}


Untuk scrip HTMLnya, ketikkan skrip di bawah ini, lalu simpan dengan nama index.html





 pra ujian
 

 

MY WEB KU

ini hanya latihan

Selamat Datang di My Web

semoga sukses

untuk tampilan awalnya adalah sebagai berikut

silahkan tinggal di edit tampilannnya, untuk mengedit warna, background bisa di edit di bagian style.css.
oke sampai sini dulu,,, tinggal di edit edit isi contentnya terserah kalian
Trimakasih
Wassalamu'alaikum Wr Wb