Desain Media Interaktif Praktikum Html5 Css3
19 Feb 2021
Tambah Komentar
 |
| Belajar html5 dan css3 praktikum |
Latihan 1
 |
| Contoh layout yang akan di praktikan |
Persiapan:
Software:
- Dreamweaver
- Notepad++
- Web Browser [ Crome / Opera / Firefox
Membuat folder /direktori dan file
Folder Utama dengan nama siswa contoh : Adinda_Emantika Didalam folder Adinda_Emantika berisi:
Folder:
- image
- audio
- video
- artikel
- kontak
- style
File :
- index.html di dalam folder utama
- video.html di dalam folder artikel
- kontak.html di dalam folder kontak
- style.css di dalam folder style
Cermati dan silahkan di praktikan secara detail baik titik koma, pemberian nama serta tag tag yang kiranya kurang paham langsung di tanyakan.
Membuat layout awal di file index.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="container">
<header>HEADER</header>
<nav> MENU</nav>
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>
<footer>
<div id="column">KOLOM 1</div>
<div id="column">KOLOM 2</div>
<div id="column">KOLOM 3</div>
</footer>
</div>
</div>
</body>
</html>
Menambah kode untuk style style.css
#wrapper{
width: 960px;
margin: auto;
border: #F00 1px solid;
background-color: rgba(212,159,0,1);
}
header{
height: 120px;
width: 960px;
float: left;
background-color: #00BF00;
}
nav{
height: 40px;
width: 960px;
float: left;
background-color: #FF0;
}
#wrapper #content{
width: 620px;
float: left;
padding: 10px;
background-color: rgba(255,95,0,1);
}
#wrapper #sidebar{
width: 300px;
float: left;
padding: 10px;
background-color: rgba(255,0,0,1);
}
footer{
float: left;
width: 960px;
background-color: rgba(42,63,85,1);
}
footer #column{
width: 300px;
float: left;
padding: 10px;
}
Keterangan terkait CSS:
Width dan Height: Menentukan Lebar serta Tinggi suatu elemen.
Float: Menempelkan elemen menuju ke arah kanan ataupun ke kiri sebuah objek dari sebelumnya. Apabila kita menggunakan float, objek akan menempel persis diatas elemen yg di-float. Maka dari itu kita gunakan properti clear:both;
Background: Untuk memberi background pada elemen, bisa berupa gambar ataupun warna
Padding: Jarak antara tepi elemen dengan konten di dalamnya
 |
| Direktori Utama atau Folder Utama |
 |
| Tampilan latihan Layout html5 css3 |
Latihan 2
Membuat Menu
Menu yang dimaksud adalah navigasi di halaman yang mempermudah kita membuaka file html yang lain dengan mengaktifkan hiperlink. Untuk menu standar kita menggunakan CSS dan html ul (unordered list) atau ol (ordered list). Keduanya sama saja, artinya bullet atau nomor tidak akan kita tampilkan.
Ganti tag yang ada di file index.html
<nav> MENU</nav> dengan kode berikut:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Multimedia</a></li>
<li><a href="#">Tips dan trik</a></li>
</ul>
</li>
<li><a href="video.html">Video</a></li>
<li><a href="tentang.html">Tentang Saya</a></li>
<li><a href="#">Kontak saya</a></li>
</ul>
</nav>
Kemudian kita pindah ke style.css ganti dan tambah style nav{} dengan style seperti berikut:
nav{
width: 958px;
float: left;
overflow: auto;
background: #DFDFDF;
border: #AAAAAA 1px solid;
font-family: Arial, Helvetica, sans-serif;
}
nav ul{
list-style:none;
float:left;
overflow:auto;
margin:0px;
padding:0px;
}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;
}
nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{
display:block;
margin:0px;
width:100px;
position:absolute;
margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{
display:block;
width:89px;
padding:5px;
float:left;
border:none;
}
nav ul li:hover{
background-color: #00DFAA;
}
nav ul li a{
color:#000000;
text-decoration:none;
}
nav ul li a:hover{
text-decoration:underline;
}
Membuat Konten
isi konten dengan beberapa artikel. Disini kita akan membuat layout artikel seperti berikut.
 |
| layout conten |
Persiapkan beberapa file gambar (browsing di internet ) yang nanti di gunakan untuk Featured Image di file index.html. Perhatikan ! Gantilah file index.html dan cari kode
<div id="content">CONTENT</div>ganti dengan kode berikut :
<div id="content">
<div id="single">
<div id="featured-image"
style="background:url(image/1.jpg)"> </div>
<h2>Judul1</h2>
hgkjbg uhuiho augho ugodga augaog ag a asgdaogg as gdsa ugluglblba aghslaga jglagougya;lkja'lj wa; ajhsljb auglhba a gal luagljbalb allab lkjasbjljlagusjb jhalksjhlj a jhlash ;haljhlsjhljh a aljkhlkjhlkja ajkshhljha slkjhbalsj [...]
<div id="more"><a href="article-1.html">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(image/2.jpg)"> </div>
<h2>Judul2</h2>
hgkjbg uhuiho augho ugodga augaog ag a asgdaogg as gdsa ugluglblba aghslaga jglagougya;lkja'lj wa; ajhsljb auglhba a gal luagljbalb allab lkjasbjljlagusjb jhalksjhlj a jhlash ;haljhlsjhljh a aljkhlkjhlkja ajkshhljha slkjhbalsj [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(image/3.jpg)"> </div>
<h2>Judul3</h2>
hgkjbg uhuiho augho ugodga augaog ag a asgdaogg as gdsa ugluglblba aghslaga jglagougya;lkja'lj wa; ajhsljb auglhba a gal luagljbalb allab lkjasbjljlagusjb jhalksjhlj a jhlash ;haljhlsjhljh a aljkhlkjhlkja ajkshhljha slkjhbalsj [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(image/4.jpg)"> </div>
<h2>Judul4</h2>
hgkjbg uhuiho augho ugodga augaog ag a asgdaogg as gdsa ugluglblba aghslaga jglagougya;lkja'lj wa; ajhsljb auglhba a gal luagljbalb allab lkjasbjljlagusjb jhalksjhlj a jhlash ;haljhlsjhljh a aljkhlkjhlkja ajkshhljha slkjhbalsj [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(image/5.jpg)"> </div>
<h2>Judul5</h2>
hgkjbg uhuiho augho ugodga augaog ag a asgdaogg as gdsa ugluglblba aghslaga jglagougya;lkja'lj wa; ajhsljb auglhba a gal luagljbalb allab lkjasbjljlagusjb jhalksjhlj a jhlash ;haljhlsjhljh a aljkhlkjhlkja ajkshhljha slkjhbalsj [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
</div>
Memberi Style pada Konten
Buka file style.css tambahkan kode berikut untuk style konten. Perlu di ingat style untuk div dan class jangan sampai terjadi dua penamaan yang sama.
#wrapper #content{
width:620px;
float:left;
padding:10px;
}
#wrapper #content #single{
margin:5px;
border:#DFDFDF 1px solid;
padding:5px;
font-size:13px;
float:left;
overflow:auto;
}
#wrapper #content #single #featured-image{
width:150px;
height:150px;
-moz-background-size:450px 150px; /* CSS3 Mozilla Firefox */
background-size:450px 150px; /* CSS3 Other Browser */
background-position:center;
float:left;
overflow:auto;
margin-right:5px;
}
#wrapper #content #single h2{
margin:0px;
font-family:Cuprum;
font-size:18px;
padding:5px;
border:#DFDFDF 1px solid;
background:#EEEEEE;
margin-bottom:10px;
}
#wrapper #content #single #more a{
float:right;
overflow:auto;
padding:2px 10px 2px 10px;
background:#CF6;
border:#FF9933 1px solid;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
margin-bottom:10px;
margin-right:10px;
margin-top:10px;
text-align:center;
text-decoration:none;
color:#000000;
}
#wrapper #content #single #more a:hover{
background:#BD5;
color:#093;
border:#CC6600 1px solid;
}
Membuat isi Sidebar
Ganti kode berikut di index.html
<div id="sidebar">SIDEBAR</div>dengan kode berikut :
<div id="sidebar">
<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Judul1</a></li>
<li><a href="#">judul2</a></li>
<li><a href="#">Judul3</a></li>
</ul>
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>
<li><a href="#">judul4</a></li>
<li><a href="#">judul2</a></li>
<li><a href="#">Judul5</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/sound.mp3" controls></audio>
</li>
</div>
Selanjutnya, Tambahkan styling pada file style.css, kita tambahkan isinya bagian dengan kode berikut:
#wrapper{
width: 960px;
margin: auto;
border: #F00 1px solid;
background-color: rgba(212,159,0,1);
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;
}
#wrapper #sidebar .widget{
list-style:none;
}
#wrapper #sidebar .widget ul{
list-style:none;
margin-left:-40px;
}
#wrapper #sidebar .widget li a{
color:#446500;
text-decoration:none;
}
#wrapper #sidebar .widget li a:hover{
text-decoration:underline;
}
Footer dengan Tiga Kolom
Ganti footer dengan temukan kode berikut di index.html
<footer>
<div id="column">KOLOM 1</div>
<div id="column">KOLOM 2</div>
<div id="column">KOLOM 3</div>
</footer>Ganti dengan kode berikut:
<footer>
<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan, kunjungi situs <a
href="https://pelemtidar.web.id">Pelem Tidar</a>
</div>
<div id="column">
<h2>Hubungi Kami</h2>
Jl. Tidar 21<br>
Kota Magelang<br>
(+6285643544662)
</div>
<div id="column">
<h2>Medsos Kami</h2>
<a href="http://facebook.com/">Facebook</a><br>
<a href="http://twitter.com/">Twitter</a>
</div>
</footer>
Masuk untuk memperbaiki tampilan footer masuk di style css #footer dan kita tambahkan kode berikut pada style.css nya
footer{
float:left;
background:#333333;
width:960px;
color:#BBBBBB;
}
footer #column{
width:300px;
padding:10px;
float:left;
font-size:14px;
}
footer #column h2{
margin:0px;
margin-bottom:10px;
font-family:Cuprum;
font-size:18px;
color:#FFFFFF;
font-weight:bold;
}
footer #column a{
font-weight:bold;
color:#0099CC;
text-decoration:none;
}
footer #column a:hover{
text-decoration:underline;
}
Berikut tampilan sementara
 |
| Desain Media Interaktif Praktikum Html5 Css3 |
 |
| Desain Media Interaktif Praktikum Html5 Css3 |
---bersambung
| Pelajar | Penikmat Kopi | Menjadi diri sendiri terkadang perlu bahkan kenapa tidak ? semoga tetap bermanfaat salam untuk sahabat..| - Azura Putri
Belum ada Komentar untuk "Desain Media Interaktif Praktikum Html5 Css3"
Posting Komentar
PERHATIAN:
Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini!, dengan Ketentuan :
1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi, bila berkomentar tidak sesuai dengan kebijakan maka tidak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.