Moh Rifky 18403066 (Laporan Uts P Web 2)

Moh Rifky
18403066
IRM-R42/18
LAPORAN UTS PEMOGRAMMAN WEB 2
Langkah-Langkah Membuat Website Dengan HTML .
1. Buka Dreamweaver
 Buka file/new dokumen = create
 Save as/buat folder untuk penyimpanan contoh folder WEBPROFILE / buka folder yang tadi
terus, buat file di dalam folder dengan nama = index.html. ini membuatnya di dalam aplikasi
Dreamwaver..
 Setelah itu barulah kita memulai mengkode untuk membuat website
Tampilan kode index.html:

Tampilan Utama Website Profile Index:
2. Dibagian tampilan utama profile ada beberapa menu tampilan sebagai berikut:
 Moh Rifky
Nama Moh Rifky jadi di bagian penamaan tersebut kita harus menambahkan di bagian :
<title>MOH RIFKY</title>
 Logo Instagram, Youtube, & Facebook.

Untik logo tersebut kita harus menambahkannya di bagian : 
<div class="medsos">
<div class="container">
<ul>
<li><a href="#">"><i class=”fab fa-facebook"</i></a></li>
Kalau mau menambahkan link facebook atau youtube tinggal isi dibagian: <li><a
href="https://m.facebook.com/mrylow.official"><i class=”fab fa-
facebook"></i></a></li>
 “Text Welcome To My Website”

kita harus menambahkannya dibagian: 
<section class="banner">
<h2>WELCOME TO MY WEBSITE</h2>
</section>
 Foto Buku
Untuk foto buku agar tampil dihalaman index.html. yang pertama kita harus ada
bahan foto jpg. Buat dulu Folder di dalam Folder Webprofile dengan nama folder
img dan ubah nama fotonya menjadi banner karena saya namanya banner. Setelah
itu kita upload foto di bagian style.css seperti ini :
.banner {
height: 60vh;
background-image: url('../img/banner.jpg');
3. Bagian Home, About, Service, & Contact. seperti gambar dibawah ini:
Tampilan di halaman kode Index.html:
 Bagaimana Cara Mengkodenya? Caranya tidak beda jauh dengan nama karena
barisannya sama jadi kita tambahkan di halaman index.html dengan kode:
<ul>
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
4. Untuk menambahkan About beserta textnya, Service, & Copyright di halaman utama atau
home. seperti gambar dibawah ini:
Tampilan di Halaman code index.html:

 Disini kita mengharuskan mengkode dihalaman index.html dengan kode:


<section class="about">
<h3>ABOUT</h3>
<p><strong>Perkenalkan saya Moh Rifky. berasal dari kota Pandeglang,
Banten.</strong> Saya menerima gelar sarjana komputer dari Politeknik Piksi Ganesha Bandung
pada tahun 2021. Saya adalah orang yang sangat antusias dengan segala hal berbau pemrograman
dan selalu merasa tertantang untuk mengerjakan projek-projek baru pembuatan aplikasi berbasis
web atau mobile.</p>
</div>
<section>


<section class="service">
<h3>SERVICE</h3>
<div class="box">
<div class="col-4">
<div class="icon"><i class="fas fa-mobile"></i></div>
<h4>MOBILE APP</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-globe"></i></div>
<h4>WEB DEVELOPMENT</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-edit"></i></div>
<h4>DESIGN</h4>
</div>
<div class="col-4">
<div class="icon"><i class="fas fa-chart-
bar"></i></div>
<h4>DIGITAL MARKETING</h4>
</div>
</div>
</div>
</section>


<footer>
<small>Copyright © 2020 - Moh Rifky. All Rights
Reserved.</small>
</div>
</footer>
5. Style.css apa Itu style.css?

CSS (Cascade Style Sheet)meruapakan sebuah bahasa untuk mengatur tampilanweb
sehingga terlihat lebih menarik dan indah. Dengan CSS, kita dapat mengatur layout(tata
letak), warna, font, garis,dan lain-lain.
6. Sekarang kita kebagian ABOUT atau di halaman About seperti gambar di bawah ini:
 Menambahkan kode VISI & MISI beserta textnya kita hanya perlu menambahkan
kode :
<h3>VISI</h3>
<p><strong>Menjadi manusia taqwa yang dapat menjadi tauladan, bermanfaat, dan
membagikan ilmu yang dimiliki kepada sesama</strong>.</p>
<h3>MISI</h3>
<p><strong>Berperilaku baik sesuai dengan hukum, agama, dan Pancasila</strong>.</p>
Tampilan dihalaman kode about.html :
 Untuk membuat kode agar tampil Logo Instagram, Facebook, Youtube, Moh Rifky,
About, Home, Service, Contact, Visi, Misi, dan Copyrght kita hanya perlu menyalin
beberapa bagian kode dihalaman index,html setelah kita copy, kita pergi ke halaman
about.html dan temple kodenya Seperti kode berikut :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-
9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>

<div class="bg-loader">
<div class="loader"></div>
</div>


<ul>
<li><a href="https://m.facebook.com/mrylow.official"><i
class="fab fa-facebook"></i></a></li>
<li><a
href="https://www.youtube.com/channel/UCtdTaGVshc38Dz7Pw2LkpNQ"><i class="fab fa-
youtube"></i></a></li>
<li><a href="https://www.instagram.com/rifkywy/?
igshid=11jw4r0ju8331"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
<header>
<h1><a href="index.html">MOH RIFKY</a></h1>
<ul>
<li><a href="index.html">HOME</a></li>
<li class="active"><a href="about.html">ABOUT</a></li>
</ul>
</div>
</header>


<section class="label">
<p>Home / About</p>
</div>
</section>


<section class="about">
<h3>ABOUT</h3>
<p><strong>Perkenalkan saya Moh Rifky. berasal dari kota Pandeglang,
Banten.</strong> Saya menerima gelar sarjana komputer dari Politeknik Piksi Ganesha Bandung
pada tahun 2021. Saya adalah orang yang sangat antusias dengan segala hal berbau pemrograman
dan selalu merasa tertantang untuk mengerjakan projek-projek baru pembuatan aplikasi berbasis
web atau mobile.</p>
<h3>VISI</h3>
<p><strong>Menjadi manusia taqwa yang dapat menjadi tauladan, bermanfaat, dan
membagikan ilmu yang dimiliki kepada sesama</strong>.</p>
<h3>MISI</h3>
<p><strong>Berperilaku baik sesuai dengan hukum, agama, dan Pancasila</strong>.</p>
</div>
<section>


<footer>
Reserved.</small>
</div>
</footer>
<script type="text/javascript">
$(document).ready(function(){
$(".bg-loader").hide();
})
</script>
</body>
</html>
7. Sekarang kita kebagian SERVICE atau di halaman Service seperti gambar di bawah ini:
 Untuk menampilkan logo dibawah service kita hanya perlu menambahkan kode:

<h4>MOBILE APP</h4>
</div>
<div class="col-4">
</div>
<div class="col-4">
<h4>DESIGN</h4>
</div>
<div class="col-4">
<h4>DIGITAl MARKETING</h4>
</div>
Tampilan dihalaman kode Service.html:
 Untuk mengkodenya tidak beda jauh dengan about kita hanya perlu menyalin bagian
pentingnya saja dihalaman index.html lalu kita tmple dihalaman service.html seperti
berikut ini:
<!doctype html>
<html>
<head>
</head>
<body>

</div>


<ul>
<li><a
href="https://www.youtube.com/channel/UCtdTaGVshc38Dz7Pw2LkpNQ"><i class="fab fa-
youtube"></i></a></li>
</ul>
</div>
</div>
<header>
<ul>
<li class="active"><a href="service.html">SERVICE</a></li>
</ul>
</div>
</header>


<p>Home / Service</p>
</div>
</section>


<h3>SERVICE</h3>
<div class="box">
<div class="col-4">
<h4>MOBILE APP</h4>
</div>
<div class="col-4">
</div>
<div class="col-4">
<h4>DESIGN</h4>
</div>
<div class="col-4">
<h4>DIGITAl MARKETING</h4>
</div>
</div>
</div>
</section>


<footer>
Reserved.</small>
</div>
</footer>
})
</script>
</body>
</html>
8. Sekarang kita kebagian CONTACT atau di halaman Contact seperti gambar di bawah
ini:
 Untuk menampilkan Maps dibawah Contact kita hanya perlu menambahkan kode:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3965.1582635618142!2d105.91341331431164!3d-6.3735595641185085!2m3!1f0!2f0!
3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e42310695c7794b%3A0xefb12fc2628046ff!
2sPurwaraja%2C%20Menes%2C%20Kabupaten%20Pandeglang%2C%20Banten%2042262!
5e0!3m2!1sid!2sid!4v1604666363654!5m2!1sid!2sid" width="100%" height="450"
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
Tampilan dihalaman kode Contact.html:

 Untuk mengkodenya tidak beda jauh dengan About & Service kita hanya perlu
menyalin bagian pentingnya saja dihalaman index.html lalu kita tmple dihalaman
Contact.html seperti berikut ini:
<!doctype html>
<html>
<head>
</head>
<body>

</div>


<ul>
<li><a
href="https://www.youtube.com/channel/UCtdTaGVshc38Dz7Pw2LkpNQ"><i class="fab
fa-youtube"></i></a></li>
</ul>
</div>
</div>
<header>
<ul>
<li class="active"><a href="service.html">CONTACT</a></li>
</ul>
</div>
</header>


<p>Home / Contact</p>
</div>
</section>


<h3>CONTACT</h3>
<div class="box">
<div class="col-4">
<h4>Alamat</h4>
<p>Kadu Tanggay RT/RW 01/03, Desa Purwaraja, Kec
Menes, Kab Pandeglang, Banten. 42262</p>
</div>
<div class="col-4">
<h4>Email</h4>
<p>99muhamadrifky@gmail.com</p>
</div>
<div class="col-4">
<h4>Telp.</h4>
<p>(021)</p>
</div>
<div class="col-4">
<h4>Hp</h4>
<p>083806085465</p>
</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!
1m3!1d3965.1582635618142!2d105.91341331431164!3d-6.3735595641185085!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e42310695c7794b
%3A0xefb12fc2628046ff!2sPurwaraja%2C%20Menes%2C%20Kabupaten%20Pandeglang
%2C%20Banten%2042262!5e0!3m2!1sid!2sid!4v1604666363654!5m2!1sid!2sid"
width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-
hidden="false" tabindex="0"></iframe>
</div>
</section>

<footer>
Reserved.</small>
</div>
</footer>
})
</script>
</body>
</html>
9. Cara utnuk mengetahui kita di halaman apa seperti di gambar ini:
 Untuk menampilkna kode tersebut, kida kode di bagian Service.html dengan kode
seperti ini:


<p>Home / Service</p>
</div>
</section>
 Tampilan dihalaman kode Service.html:
MOHON MAAF BILA ADA KESALAHAN DAN KEKURANGAN DALAM PENULISAN

TERIMAKASIH

Moh Rifky 18403066 (Laporan Uts P Web 2)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Moh Rifky 18403066 (Laporan Uts P Web 2)

Diunggah oleh

Hak Cipta:

Format Tersedia

Moh Rifky

LAPORAN UTS PEMOGRAMMAN WEB 2

Langkah-Langkah Membuat Website Dengan HTML .

Tampilan kode index.html:

 Logo Instagram, Youtube, & Facebook.

 “Text Welcome To My Website”

Tampilan di halaman kode Index.html:

Tampilan di Halaman code index.html:

5. Style.css apa Itu style.css?

<div class="icon"><i class="fas fa-mobile"></i></div>

Tampilan dihalaman kode Contact.html:

9. Cara utnuk mengetahui kita di halaman apa seperti di gambar ini:

MOHON MAAF BILA ADA KESALAHAN DAN KEKURANGAN DALAM PENULISAN

Anda mungkin juga menyukai