Web UTS Ardi Nurdiansyah 19402004

Nama : Ardi Nurdiasnyah
NPM : 19402004
Kelas : SI-XW41/19
PEMROGRAMAN WEB I
TUGAS UTS PERTEMUAN 8 “TUTORIAL HTML DESAIN”
Berikut Langkah-langkah dalam Pembuatan HTML Desain

1. Pertama-tama membuka NotePad anda dengan cara Klik Windows-Ketik Notepad
2. Setelah notepad sudah tersedia lalu kita mula membuat Title Dasar Html terlebih dahulu
dengan Format Coding di notepad sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Ardi Nurdiasnyah 19402004 SI-XW41/19 - Tugas Web UTS Theme</title>

<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"
crossorigin="anonymous"></script>

 Setelah itu Save dengan Format index.html dan Type All Type lalu klik buka
 Berikut Penulisan di NotePad dan beserta Hasilnya :
3. Selanjutnya agar mempersingkat waktu kita lanjutkan desain coding html tersebut sebagai
berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Ardi Nurdiansyah 19402004 SI-XW41/19 - Tugas Web UTS Theme</title>

<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"
crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"
type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
rel="stylesheet" type="text/css" />

<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">

<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">19402004 <br> SI-XW41/19 </a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-
primary text-white rounded" type="button" data-toggle="collapse" data-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-
label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-
trigger" href="#HOBBY">HOBBY</a></li>
trigger" href="#about">About</a></li>
trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">

<img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="" />

<h1 class="masthead-heading text-uppercase mb-0">ARDI NURDIANSYAH</h1>

<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
</div>

<p class="masthead-subheading font-weight-light mb-0">Engineering - Web Designer -
Rebahan</p>
</div>
</header>

<section class="page-section HOBBY" id="HOBBY">

<h2 class="page-section-heading text-center text-uppercase text-secondary mb-
0">HOBBY</h2>
<div class="divider-custom">
</div>

<div class="row justify-content-center">

<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-toggle="modal" data-
target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-
100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-
plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="" />
</div>
</div>
100 w-100">
</div>
<img class="img-fluid" src="assets/img/portfolio/cake.png" alt="" />
</div>
</div>
100 w-100">
</div>
<img class="img-fluid" src="assets/img/portfolio/circus.png" alt="" />
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
100 w-100">
</div>
<img class="img-fluid" src="assets/img/portfolio/game.png" alt="" />
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
100 w-100">
</div>
<img class="img-fluid" src="assets/img/portfolio/safe.png" alt="" />
</div>
</div>
<div class="col-md-6 col-lg-4">
100 w-100">
</div>
<img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="" />
</div>
</div>
</div>
</div>
</section>

<section class="page-section bg-primary text-white mb-0" id="about">

<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<div class="divider-custom divider-light">
</div>

<div class="row">
<div class="col-lg-4 ml-auto"><p class="lead">Hallo Guys, Saya Ardi Nurdiansyah bisa
dipanggil Ardi. Saya seorang Mahasiswa sekaligus pekerja di perusahaan swasta didaerah bandung,
kebetulan nih membuat web desain karena alasan untuk syarat memenuhi nilai UTS.</p></div>
<div class="col-lg-4 mr-auto"><p class="lead">Oh iya gua tinggal di Bandung sejak Tahun
2017 sebenernya gua asli Sumedang, Gua kelahiran 1995 pada Bulan Agustus Ya! 14 Agustus 1995,
so asik ya!!</p></div>
</div>

<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light"
href="https://startbootstrap.com/theme/freelancer/">
<i class="fas fa-download mr-2"></i>
Free Download!
</a>
</div>
</div>
</section>

<section class="page-section" id="contact">

<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Contact
Me</h2>
</div>

<div class="row">
<div class="col-lg-8 mx-auto">

<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Name</label>
<input class="form-control" id="name" type="text" placeholder="Name"
required="required" data-validation-required-message="Please enter your name." />
<p class="help-block text-danger"></p>
</div>
</div>
<label>Email Address</label>
<input class="form-control" id="email" type="email" placeholder="Email
Address" required="required" data-validation-required-message="Please enter your email
address." />
</div>
</div>
<label>Phone Number</label>
<input class="form-control" id="phone" type="tel" placeholder="Phone
Number" required="required" data-validation-required-message="Please enter your phone
number." />
</div>
</div>
<label>Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Message"
required="required" data-validation-required-message="Please enter a message."></textarea>
</div>
</div>
<br />
<div id="success"></div>
<div class="form-group"><button class="btn btn-primary btn-xl"
id="sendMessageButton" type="submit">Send</button></div>
</form>
</div>
</div>
</div>
</section>

<footer class="footer text-center">
<div class="row">

<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p class="lead mb-0">
Jln. Bebedahan, Rt.003/003 <br />
Kec. Cinambo, Kel.Babakan penghulu, Bandung
</p>
</div>

<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-
facebook-f"></i></a>
twitter"></i></a>
linkedin-in"></i></a>
dribbble"></i></a>
</div>

<div class="col-lg-4">
<h4 class="text-uppercase mb-4">About Gua!!</h4>
<p class="lead mb-0">
Kalau Lo masih kepo soal gua <br> silahkan add ig aja yak! <a
href="http://instagram.com">@ehhardi__</a>
.
</p>
</div>
</div>
</div>
</footer>

<div class="copyright py-4 text-center text-white">
<div class="container"><small>Copysusu Â© sama roko magnum-mantap!
2020</small></div>
</div>

<div class="scroll-to-top d-lg-none position-fixed">
<a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i
class="fa fa-chevron-up"></i></a>
</div>


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-
labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
<div class="modal-body text-center">

<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0"
id="portfolioModal1Label">Log Cabin</h2>
</div>

<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png"
alt="" />

<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore
quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<button class="btn btn-primary" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
id="portfolioModal2Label">Tasty Cake</h2>
</div>
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png"
alt="" />
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
id="portfolioModal3Label">Circus Tent</h2>
</div>
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png"
alt="" />
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
id="portfolioModal4Label">Controller</h2>
</div>
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png"
alt="" />
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
id="portfolioModal5Label">Locked Safe</h2>
</div>
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png"
alt="" />
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
id="portfolioModal6Label">Submarine</h2>
</div>
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png"
alt="" />
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
easing/1.4.1/jquery.easing.min.js"></script>

<script src="assets/mail/jqBootstrapValidation.js"></script>
<script src="assets/mail/contact_me.js"></script>

<script src="js/scripts.js"></script>
</body>
</html>
 Berikut Penulisan di NotePad dan beserta Hasilnya :
4. Setelah pengodingan tersebut selesai maka akan terlihat hasilnya sebagai berikut :

Web UTS Ardi Nurdiansyah 19402004

Diunggah oleh

Informasi Dokumen

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

Web UTS Ardi Nurdiansyah 19402004

Diunggah oleh

Hak Cipta:

Format Tersedia

Nama : Ardi Nurdiasnyah

Berikut Langkah-langkah dalam Pembuatan HTML Desain

Anda mungkin juga menyukai