HTML5

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB I
MODUL 1 & 2
“HTML5”
DISUSUN OLEH:
Romy Dinastri Putra Siregar
17.01.3961
PROGRAM DIPLOMA TEKNIK INFORMATIKA

UNIVERSITAS AMIKOM YOGYAKARTA
2017/2018
A. Tujuan Praktikum
 Mengenal HTML5 dan cara penggunaanya
 Membuat tampilan WEB dengan Pembungkusan article
 Membuat aside menu pada tampilan web
 Mengatur Letak menu antara vertical atau horizontal
 Membuat oferflow pada artikel
B. Manfaat Praktikum
 Mengetahui cara buat Pemograman WEB yang rapi dan enak di lihat untuk
orang orang yang ingin melihat web kita.
 Mengetahu cara membuat side menu
 Mengetahui cara membuat scroll pada artikel
 Mengetahui cara membuat menu menjadi rapi
C. Teori singkat
HTML5 Masih sama seperti HTML pada umumnya .. hanya saja di HTML5 ini memiliki
feature-feature tang beda dari html1 atau html lainnya . Di html 5 ini kitabisa menggunak
feature baru dalam pemograman html pada biasanya . feature baru ini untuk memperbaiki
dan melengkapi dari html versi sebelumnya.
Apa saja Feature baru pada HTML5?
1. New Semantic Elements : Ini seperti pada elemen <header>, <footer>, and
<section>.
2. Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag
<input>.
3. Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak
ketiga.
4. WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi
web.
5. Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web
browser yang disebut Server-Sent Events (SSE).
6. Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan
JavaScript.
7. Audio & Video : Anda dapat menanamkan/embed audio atau video pada halaman
web Anda tanpa menggunakan plugin pihak ketiga.
8. Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan
aplikasi web Anda..
9. Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar
HTML5 dan memperluas halaman web Anda dengan kostum semantics.
10. Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web
yang sama.
Apa saja Feature yang dihapus pada HTML5?

1. Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag
<abbr>
2. Applet : Digunakan untuk memasukan file java kedalam dokumen HTML
3. Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk
semua teks dalam dokumen
4. Big : Memperbesar ukuran teks sebesar satu point dari defaultnya
5. Center : Untuk perataan tengah terhadap teks atau gambar
6. Dir : Mendefinisikan sebuah daftar direktori
7. Font : Mendefinisikan jenis font, warna dan ukuran untuk teks
8. Frame : Mendefinisikan frame dalam fremeset
9. Frameset : Mendefinisikan satu set frame
10. Noframes : Jika browser user tidak mendukung frame
11. Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama
dengan tag <del>
12. Tt : Mendefinisikan teletype text
D. Source code program

HTML:-----------
<!DOCTYPE html>
<html>
<head>
<title>(HTML 5)</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="HTML5.css">
</head>
<body background="kaneki.png">
<div class="wrapper">
<header>
<h1 ><font color="white" face="Curlz MT" >Netizen ingin sinau</font></h1>
<nav>
<ul> <br>
<br>
<br>
<li><a href="" class="current">HOME</a></li>
<li><a href="">Jenis Buah</a></li>
<li><a href="">Manfaat Dari buah</a></li>
<li><a href="">Jenis Sayuran</a></li>
<li><a href="">Tips Hidup Sehat</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="alpukat.jpg" alt="Makanan" width="100%" height="100%" />
</figure>
<hgroup>
<h2><a href=""><font color="blue">Manfaat Buah Alpukat</font></a></h2>
<h3>jenis - jenis buah</h3>
</hgroup>
<p>Buah alpukat mengandung lemak sehat oleat (omega-9), vitamin A, vitamin B, vitamin
B6, vitamin C, vitamin E, zat besi, tembaga, kalium, serat, dan asam solfat. Buah alpukat
kaya akan manfaat dan dapat melindungi tubuh dari berbagai penyakit.
Buah alpukat bermanfaat untuk kesehatan jantung, mengontrol tekanan darah, menurunkan
kadar kolesterol, mengatur kadar gula darah, mengurangi resiko stroke, mencegah kanker,
menambah berat badan dan juga bagus untuk kesehatan mata.</p>
</article>
<article>
<figure>
<img src="Cempedak.jpg" alt="Buah" width="100%" height="100%" />
</figure>
<hgroup>
<h2>2. Manfaat Dari Buah Cempedak</h2>
<h3>jenis - jenis buah</h3>
</hgroup>
<p>Buah cempedak memiliki kandungan vitamin A, vitamin C, vitamin B1, protein,
karbohidrat, lemak, kalsium, zat besi, dan juga fosfor. Manfaat utama buah cempedak adalah
untuk menyehatkan mata.
Buah cempedak juga memiliki banyak manfaat seperti mengobati tumor, untuk mengurangi
kolesterol dalam darah, untuk mengusir parasit, untuk meredakan malaria, membantu proses
pencernaan, dan juga untuk meningkatkan daya tahan tubuh.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Article Lainnya</h2>
<a href="">Cara agar Rajin Berolahraga</a>
<a href="">Rutin Sarapan Sehat</a>
<a href="">Menjaga tingkah laku</a>
<a href="">Cara menjaga kesehatan</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Jika kurang jelas, Bisa cek di<br> IG kami @nothing <br />
</section>
</aside>
<footer>
© 2017 Diploma Punya Style
</footer>
</div>
</body>
</html>
CSS:-----------------------------
header, section, footer, aside, nav, article, figure, figcaption {

display: block;}
/*mengaturt kerangka*/
body{
color: #000000;
background-color: #f9f8f6;
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;
}
/*mengatur header*/
header{
padding: 1px;
height: 160px;
background-image: url(amikom.jpg);
}
/* Buat pengaturan Artikel/Konten*/
section.courses {
float: left;
width: 659px;
border-right: 50px #eeeeee;
}
/*membuat pembungkus seluruh konten*/
.wrapper{
width: 940px;
margin: 20px auto 20px auto;
border: 3px solid pink;
background-image: url(R.jpg);
/*membuat transparant*/
filter: alpha(opacity=0%);
}
p{
overflow: auto;
height: 100%;
}
/*mengatur artikel*/
section{
float: left;
width: 659px;
border-right: 1px #eeeeee;
}
article{
overflow: auto;
height: 300px;
width: 100%;
clear: both;
}
hgroup{
margin-top: 40px;
}
figure{
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption{
font-size: 90%;
text-align: left;
}
/*mengatur sidebar*/
aside
{
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a
{
display: block;
padding: 10px;
border-bottom: #efefef;
}
aside section a:hover{
color: #9a12b3;
background-color: #efefef;
}
a{
color: purple;
}
aside h2{
color: #663399;
}
/* Mengatur footer */
footer {
font-size: 80%;
position: center;
}
nav, footer {
clear: both;
color: #000;
height: 30px;
}
/* Mengatur tampilan menu */

nav ul {
margin: 0px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;}
E. Hasil program/screenshoot
F. Kesimpulan
Di Html5 adalah dimana kita bisa menggunakan feature baru dan bisa mengatu design dari
web menjadi lebih rapi . dan itu semua perlu juga menggunakan css stylesheet..

HTML5

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

HTML5

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

PROGRAM DIPLOMA TEKNIK INFORMATIKA

Apa saja Feature baru pada HTML5?

Apa saja Feature yang dihapus pada HTML5?

D. Source code program

header, section, footer, aside, nav, article, figure, figcaption {

/* Mengatur tampilan menu */

Anda mungkin juga menyukai