Desain Media Interaktif Membuat Profil Landing Page
7 Jan 2021
Tambah Komentar
Belajar Html untuk profile dasar
penerapan:
CSS (style)
tag html
link
image /gambar
dll.
Langkah-langkah:
1. Membuat folder praktikum yang didalamnya berisi 5 folder :
1.profile2.image
3.kontak
4.style
5.artikel
2. Membuat file dengan notepad /sublime text /notepad++
dalam folder praktikum dengan nama:index.html
a. buat file di folder profile dengan nama:
tentang-saya.html
b. buat file di folder kontak dengan nama
kontak-saya.html
c. buat file di folder style dengan nama:
style.css
d. buat file di folder artikel dengan nama:
ikan-badut.html
lion-fish.html
moorish-idol.html
penyu.html
3. Silahkan amati dan salin dengan teliti:
index.htmlisikan kode html berikut
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="konten">
<a href="artikel/penyu.html"><img src="image/penyu.jpg" ></a>
<div class="judul">
<a href="artikel/penyu.html">Penyu</a>
</div>
<p>Penyu adalah hewan yang banyak di temukan bertelur di beberapa pesisir pantai di Indonesia sejak dahulu.</p>
</div>
<div class="konten">
<a href="artikel/ikan-badut.html"><img src="image/ikan-badut.jpg" ></a>
<div class="judul">
<a href="artikel/ikan-badut.html">Ikan Badut</a>
</div>
<p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. </p>
</div>
<div class="konten">
<a href="artikel/lion-fish.html"><img src="image/lion-fish.jpg" ></a>
<div class="judul">
<a href="artikel/lion-fish.html">Lion Fish</a>
</div>
<p>Lionfish atau volitans adalah ikan berbisa milik keluarga yang Scorpaenidae terjemahan harfiah berarti ikan kalajengking.</p>
</div>
<div class="konten">
<a href="artikel/moorish-idol.html"><img src="image/Moorish-Idol.jpg" ></a>
<div class="judul">
<a href="artikel/moorish-idol.html">Moorish Idol</a>
</div>
<p>Ikan Moorish Idol adalah salah satu ikan yang cukup populer di kalangan ara hobiis ikan hias karena bentuknya yang unik dan pola warnanya yang menarik.</p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
tentang-saya.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Penyu</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Tentang Saya
</div>
<p>Terimakasih sudah berkunjung di website saya</p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
kontak-saya.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Penyu</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Kontak Saya
</div>
<p>Silahkan Kontak Saya melalui</p>
<ol>
<li>Facebook</li>
<li>Instagram</li>
<li>Whatsapp</li>
</ol>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
style.css
isikan kode css berikut:
body{
font-family: Arial, Helvetica, sans-serif;
background: #e6e6e6;
padding: 0;
margin:0;
}
.container{
width: 65%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
padding-bottom: 5px;
}
.logo {
font-size: xx-large;
padding: 30px 0 30px 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1a75ff;
border: 1px solid gainsboro;
}
nav li {
float: left;
}
nav li a{
display: inline-block;
color:#ffffff;
text-align: center;
padding: 14px 15px;
text-decoration: none;
}
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
}
article {
width: 98.8%;
height: auto;
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
clear: both;
}
article p {
padding: 5px 6px 5px 5px;
line-height: 1.5;
}
article .konten {
width: 23.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi {
width: 98.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
}
article .isi .judul {
font-size: xx-large;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
article .isi p {
margin-top: 0;
}
article .isi img {
float: left;
margin: 5px 5px 5px 5px;
}
article .konten img {
width: 95.8%;
height: 150px;
margin: 5px 5px 5px 5px;
}
article .konten:hover {
opacity:0.9;
}
article .konten .judul a {
margin-left: 5px;
text-decoration: none;
font-size:x-large;
color:#020101;
}
article .konten a:hover {
opacity:0.9;
}
footer {
clear: both;
width: 98.8%;
height: auto;
text-align: center;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
padding-bottom: 15px;
}
@media screen and (max-width:1080px) {
.container, article, footer {
float: none;
width: 98%;
}
article .konten {
float: left;
width: 48%;
}
article .konten img {
height: auto;
}
}
@media screen and (max-width:780px){
/* For tablets: */
.container, article, footer, article .konten {
float: none;
width: 98%;
}
article .konten img {
height: auto;
}
}
ikan-badut.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Ikan Badut</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Ikan Badut
</div>
<img src="../image/ikan-badut.jpg" >
<p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. Hewan ini masuk kedalam Genus Amphiprion. Ikan giru atau lebih dikenal dengan sebutan ikan badut adalah ikan dari anak suku Amphiprioninae dalam suku Pomacentridae. Ada 28 spesies yang biasa dikenali, salah satunya adalah genus Premnas, sementara sisanya termasuk dalam genus Amphiprion. </p>
<p>Mereka tersebar di lautan Pasifik, Laut Merah, lautan India, dan karang besar Australia. Di alam bebas mereka bersimbiosis dengan anemon laut. Anemon akan melindungi Ikan badut dari pemangsa dan Ikan badut akan membersihkan Anemon dengan memakan sisa - sisa makanan Anemon. Ikan badut berwarna kuning, jingga, kemerahan atau kehitaman. </p>
<p>Spesies terbesar mencapai panjang 18 cm, sementara yang terkecil hanya 6 cm. Mereka, pada umumnya, dijumpai pada laguna-laguna berbatu di seputar terumbu karang, atau pada daerah koastal dengan kedalaman kurang dari 50 meter dan berair jernih. Di perairan Papua New Guinea, bisa ditemukan ikan badut tidak kurang dari 8 spesies. Di alam, ikan badut mengkonsumsi zooplankton, udang-udangan dan algae yang dijumpai di habitat mereka.</p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
lion-fish.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Lion Fish</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Lion Fish
</div>
<img src="../image/lion-fish.jpg" >
<p>Lionfish atau volitans adalah ikan berbisa milik keluarga yang Scorpaenidae terjemahan harfiah berarti ikan kalajengking. Ada lima marga dan 16 spesies yang umumnya disebut sebagai lionfish. Penghuni alami mereka adalah di antara terumbu karang dan celah-celah berbatu Indo-Pasifik dan Laut Merah. Jenis ini bukan asli daerah tropis hangat dunia. Populasi baru didirikan yang hadir di Atlantik Timur, Karibia dan Laut Mediterania.</p>
<p>Mereka menjadi tempat yang lebih dan lebih umum di lepas pantai Florida. Para ilmuwan berspekulasi bahwa spesies ini pertama kali diperkenalkan ketika akuarium publik hancur di Florida selatan oleh Badai Andrew, Kategori 5 badai di tahun 1992. Analisis DNA dari ikan ditangkap mendukung teori ini. Semua populasi yang baru dibentuk berasal dari ikan tujuh yang sama. Para pengunduran non-pribumi terus spesies ini telah menciptakan kekhawatiran di kalangan ahli ekologi. </p>
<p>Hal ini belum ditentukan jenis bahaya manusia dan lingkungan makhluk ini akan menimbulkan di lahan baru mereka berkembang biak. Lionfish Semua memiliki sirip khas serta striping sirip dan tubuh. Warna palet dan ukuran khusus untuk spesies. Ikan singa Dwarf hanya mencapai panjang dewasa 5-6 inci dan dapat disimpan dalam akuarium sekecil 30 galon. Spesies lain dapat tumbuh lebih dari 15 inci dan akan membutuhkan tangki galon 75-100. Ini adalah di antara makhluk yang paling beracun yang ditemukan di laut dan hanya harus disimpan oleh aquarists ahli.</p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
moorish-idol.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Ikan Badut</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Moorish Idol
</div>
<img src="../image/Moorish-Idol.jpg" >
<p>Ikan Moorish Idol adalah salah satu ikan yang cukup populer di kalangan ara hobiis ikan hias karena bentuknya yang unik dan pola warnanya yang menarik. Ikan ini juga termasuk jenis ikan yang tenang dan tidak menyerang ikan jenis lainnya, sehingga ikan ini bisa dicampur dengan jenis ikan lainnya di dalam akuarium. Namun bagi para hobiis, menjaga ikan ini agar tetap hidup lama di dalam akuarium menjadi tantangan tersendiri.</p>
<p>ikan ini termasuk jenis ikan yang susah untuk dipelihara karena ikan ini memilih - milih makanannya, sehingga para hobiis ikan hias perlu mengetahui makanan yang tepat untuk ikan ini di dalam perawatannya. Selain itu, ikan ini juga rentan stress karena sensitif terhadap perubahan kualitas air. Meski perawatan ikan ini dapat dibilang sulit, namun ikan ini tetap menjadi idola bagi para hobiis ikan hias laut. </p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
penyu.html
isikan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<title>Penyu</title>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div class="container">
<header>
<div class="logo">
Praktikum XII MM
</div>
</header>
<nav>
<ul>
<li><a href="../index.html">Beranda</a></li>
<li><a href="../kontak/kontak-saya.html">Kontak Saya</a></li>
<li><a href="../profile/tentang-saya.html">Tentang Saya</a></li>
</ul>
</nav>
<article>
<div class="isi">
<div class="judul">
Penyu
</div>
<img src="../image/penyu.jpg" >
<p>Penyu adalah hewan yang banyak di temukan bertelur di beberapa pesisir pantai di Indonesia sejak dahulu. Ini menegaskan perairan Nusantara menjadi jalur migrasi penting bagi populasi penyu di muka Bumi. Berpartisipasilah dengan cara sesederhana apapun untuk melindungi hewan yang cantik dan anggun ini.</p>
<p>Selain menyuguhkan pesona bahari yang memesona dan merupakan salah satu kawasan surga bagi para penyelam, Kepulauan Derawan di Kabupaten Berau, Kalimantan Timur juga menyimpan kekayaan alam lainnya yang langka dan patut dilindungi. Kekayaan dimaksud adalah keberadaan penyu hijau (Chelonia mydas) yang disebut-sebut sebagai hewan yang terancam punah di muka Bumi.</p>
<p>Penyu merupakan hewan penjelajah samudera dimana sebagian besar hidupnya di laut tropis dan subtropis, terutama di kawasan Samudera Atlantik dan Samudera Pasifik. Penyu betina hanya sesekali naik ke pantai untuk bertelur. Dari 7 penyu yang dikenal di dunia, 6 penyu tercatat pernah singgah dan bertelur di beberapa garis pantai di Nusantara. Enam penyu yang hidup di Indonesia adalah: penyu hijau (Chelonia mydas), penyu belimbing (Dermochelys coriacea), penyu pipih (Natator depressa), penyu sisik (Eretmochelys imbricata/Hawksbill Turtle), penyu abu-abu (Olive ridley turtle), penyu merah atau penyu tempayan (Caretta caretta). Sementara satu penyu lainnya, Leupidocalis caspri, hanya hidup di antara Laut Meksiko dan Lusiana, Amerika Serikat.</p>
</div>
</article>
<footer>
Praktikum XII MM
</footer>
</div>
</body>
</html>
Catatan:
wajib teliti sebelum menyalin
pastikan nama file sesuai dan penulisan benar
penjelasan kode akan di sampaikan saat tatap muka.
praktikum mandiri yang tidak mempunyai komputer silahkan bisa mengerjakan di rumah teman.
 | |
| tampilan index html |
| 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 Membuat Profil Landing Page"
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.