GFGDV

TUGAS WORKSHOP DESAIN WEB
PROJECT 1
Disusun Oleh :
Nama : Mei Rosa Widyawati
NRP : 3122500036
Kelas : D3 Teknik Informatika B
Dosen Pengampu : Arif Basofi S.Kom,M.T.
PRODI TEKNIK INFORMATIKA

DEPARTEMEN TEKNIK INFORMATIKA DAN KOMPUTER
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2022
A. Tampilan
B. Script
<!DOCTYPE html>
<html>
<head>
<title>Mei Rosa Widyawati</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Roboto">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
.magic-resize > marquee > img {
width: 100px;
height: 100px;
padding: 16px;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif
}

;
</style>
<link rel="icon" href="https://cdn.glitch.com/9be2272f-b4da-46fa-95e7-
d94a1cad4bc8%2Ficons8-checked-48.png?v=1581404444680
" type="image/gif" sizes="16x16">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></
script>
</head>
<body class="w3-light-grey">


<div class="w3-content w3-margin-top" style="max-width:1400px;">

<div class="w3-row-padding">

<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4 w3-animate-top">
<div class="w3-display-container">
<img src="https://cdn.glitch.global/64eeacbb-ffe9-
49a1-932e-881311af487c/IMG_20220227_105732.jpg?v=1667292084352"
style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-
text-black">
<h2 style="background-
color:white;padding:8px;">Mei Rosa Widyawati</h2>
</div>
</div>
<div class="w3-container">
<p><i class="fa fa-briefcase fa-fw w3-margin-right
w3-large w3-text-teal"></i>Student</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-
large w3-text-teal"></i>Ponorogo</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right
w3-large w3-text-teal"></i>meirosa350@gmail.com</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-
large w3-text-teal"></i>+62 853-3474-6219</p>
<hr>
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-
text-teal"></i>Organisasi</b></p>
<p>Wakil Ketua Dewan Ambalan</p>
<div class="w3-light-grey w3-round-xlarge w3-
small">
<h6 class="w3-text-teal"><i class="fa fa-
calendar fa-fw w3-margin-right"></i>2019 - 2020</h6>
</div>
<p>Sekretaris Karang Taruna</p>
small">
</div>
<p>Ketua Dewan Ambalan</p>
small">
</div>
<p>Sekretaris Dewan Kerja Ranting</p>
small">
calendar fa-fw w3-margin-right"></i>2020 - Sekarang</h6>
</div>
<br>


</div>

<div class="w3-margin-right">
<div class="w3-container w3-card w3-white w3-margin-bottom w3-
animate-right">
<h2 class="w3-text-grey w3-padding-16"><i
class="fas fa-school fas-fw w3-margin-right w3-xxlarge
w3-text-teal"></i>Education</h2>
<h5 class="w3-opacity"><b>SDN
Bandaralim</b></h5>
<h6 class="w3-text-teal"><i class="fa
fa-calendar fa-fw w3-margin-right"></i>2010 - 2016</h6>
<hr>
</div>
<h5 class="w3-opacity"><b>SMPN 1
Badegan</b></h5>
<hr>
</div>
<h5 class="w3-opacity"><b>SMAN 1
Badegan</b></h5>
<hr>
</div>
</body>
</html>
C. Penjelasan
 Baris <!DOCTYPE> menjelaskan versi HTML. Halaman itu ditulis sehingga
browser internet dapat menafsirkan teks yang mengikutinya.
 Tag pembuka memungkinkan browser mengetahui bahwa ia sedang membaca
kode HTML.
 Bagian berisi informasi tentang halaman, seperti judul, tag meta, dan dimana bisa
menemukan file CSS.
 Pada program diatas ada tag yang dipakai yaitu :
 Tag dengan penutup tag ( <title>…</title>, <h1>…</h1>, <p>…</p>,<ul>…
</ul>, <a>…</a>, <form….</form> ).
 Tag <title> </title> adalah judul halaman yang terlihat.
 Tag <p> </p> adalah paragraf teks. Sebagian besar halaman web memiliki
beberapa tag paragraf.
 Tag <html> </html> penutup membungkus setiap tag di atas.
 Tag tanpa penutup ( <link>, <br>, <img>, <hr> ).

GFGDV

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GFGDV

Uploaded by

Copyright:

Available Formats

TUGAS WORKSHOP DESAIN WEB

Dosen Pengampu : Arif Basofi S.Kom,M.T.

PRODI TEKNIK INFORMATIKA

You might also like