Laporan pratikum iii web
-
Upload
gisra-rahmadhita -
Category
Data & Analytics
-
view
150 -
download
9
Transcript of Laporan pratikum iii web
LAPORAN PRATIKUM III
PRAKTIKUM PEMROGRAMAN BERBASIS WEB
Desain Web (Layout dan Menu)Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang
dibimbing oleh Bapak Didik Dwi Prasetya
Oleh :
GISRA RAHMADHITA
130533608259
S1 PTI 2013 Offering B
UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
FEBRUARI 2015
BAB IIIDesain Web (Layout dan Menu)
A. TUJUAN
Memahami penggunaan teknik “clear fix” dalam membuat layout website
Memahami fungsi Grid System
Mampu menggunakan teknik “clear fix” dan Grid System untuk membuat layout website
B. ALOKASI WAKTU 4 JS (4 x 50 menit)
C. PETUNJUK
D. DASAR TEORI
1. Permasalahan Penggunaan Property Float Property float berfungsi “mengapungkan” elemen. Sehingga elemen tersebut akan
berpindah sesuai isi dari property float. Permasalahan yang muncul adalah float merusak alur dari halaman. Ketika menggunakan properti float, elemen-elemen lain akan menjadi mengikuti aturan kiri atau kanan dari float. Salah satu cara umum yang dilakukan untuk mengatasi permasalahan float adalah penggunaan clear:both;.
2. Teknik Clear Fix Permasalahan lain muncul setelah penggunaan style clear:both; . Jika kita tidak
mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka style clear:both tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”.
3. Grid System Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan
menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web. Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Jika ingin membuat halaman berukuran 960 px memiliki 12 Grid, kita dapat melakukan perhitungan berikut: lebar_grid = 960 / 12 lebar_grid = 80 px
Jika ingin setiap kolom memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti berikut: konten_grid = 80 - jarak = 80 - 20 = 60 px Sehingga ukuran margin kiri dan kanan dari elemen adalah: margin_kiri_kanan = jarak / 2 = 20 / 2 = 10 px
E. Latihan 1. Penggunaan Property Clear:Both
Sorce Code
CSS
body{ /*pengaturan body*/width: 960px; /*panjang body*/}header, nav, aside, section, footer{ /*pengaturan header, nav, aside, section, footer*/background: #14BCE6; /*pengaturan warna background*/border: 1px solid white; /*pengaturan garis tepi/border*/color: white; /*warna teks*/font-size: 2em; /*ukuran font yg digunakan*/font-variant: small-capps; /*untuk membuat huruf kapital*/text-align: center; /*posisi teks di tengah*/}header,nav,footer{ /*pengaturan header, nav, footer*/width: 100%; /*panjang header, nav, footer*/}header,footer{ /*pengaturan header dan footer*/height:100px; /*tinggi header dan footer disamakan*/} nav{ /*pengaturan menu navigasi*/height: 50px; /*tinggi menu navigasi*/}aside{ /*pengaturan sidebar atau float page*/float: left; /*posisi sidebar sebelah kiri*/height: 270px; /*tinggi sidebar*/width: 29.5%; /*panjang sidebar*/}section #content{ /*pengaturan section konten*/float: right; /*posisi section di sebelah kanan sidebar*/height: 250px; /*tinggi section konten*/width: 70%; /*panjang section konten*/}footer{ /*pengaturan footer*/clear: both; /*agar footer tepat berada di bawah elemen yang menggunakan property float*/}
HTML
<!DOCTYPE html><html> <!-- Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML -->
<head> <!-- informasi umum dari sebuah halaman web --><title>Layout Dasar Dokumen Web</title> <!-- title bar
pada browser/judul halaman --><link rel="stylesheet"href="latihan1.css"> <!-- link
menuju file .css --></head><body> <!-- lingkup teks HTML --><header>Header</header> <!-- isi konten header --><nav>Navigation</nav> <!-- membuat menu navigasi --><aside>SIDEBAR MENGGUNAKAN FLOAT :LEFT</aside> <!-- membuat
sidebar atau float page --><section id="content"> <!-- sama fungsinya dengan <div> -->
<!-- menggunakan heading 3 --><h3>MENGGUNAKAN FLOAT : RIGHT</h3>Alhamdulillah semuanya
sudahselesai, sehingga aku sangat-sangat lega dan sangat
senang.Apa kamu juga merasakan hal yang sama dengan aku?
</section><footer>Footer menggunakan clear : both</footer> <!-- isi
konten footer --></body>
</html>
Printscreen
Penjelasan
Pada Desain layout diatas menghasilkan bentuk layout dengan align kiri,
dengan menggunakan CSS dengan melakukan pengaturan pada style.css
sehingga terbentuk header navigation, sidebar dan footernya. Kemudian Pada
Index1.html melakukan pemanggilan dengan id atau class sesuai fungsinya.
Teknik clear:Both berfungsi agar ruas kiri dan kanan tidak bisa diisi oleh bidang
lain.
2.1. Latihan 2
Teknik Clear Fix
Source Code
CSS
*{ /*pengaturan keseluruhan*/margin: auto; /*margin menyesuaikan dengan nilai panjang dan tinggi*/}body{ /*pengaturan body*/width:960px; /*panjang body*/}header,nav,aside,section,footer{ /*pengaturan header,nav,aside,section,footer*/background: #14BCE6; /*pengaturan warna background*/border: 1px solid white; /*membuat garis tepi/border*/color: white; /*pengaturan warna teks*/font-size: 2em; /*pengaturan ukuran teks*/font-variant: small-capps; /*membuat huruf kapital*/text-align: center; /*posisi teks di tengah*/}header,nav,footer{ /*pengaturan header,nav dan footer*/width: 100%; /*panjang header,nav dan footer*/}header,footer{ /*pengaturan header dan footer*/height:100px; /*tinggi header dan footer*/}nav{ /*pengaturan menu navigasi*/height: 50px; /*tinggi menu navigasi*/}aside{ /*pengaturan sidebar/float page*/float: left; /*posisi sidebar sebelah kiri*/height: 250px; /*tinggi sidebar*/width: 29.5%; /*lebar sidebar*/}section#content{ /*pengaturan section*/float: right; /*posisi section di sebelah kanan sidebar*/height: 250px; /*tinggi section*/width: 70%; /*lebar section*/}.container{ /**/margin: 0; /**/padding: 0; /**/}.container: before, .container:after{ /**/content:""; /**/display:table; /**/}.container:after{ /**/clear:both; /**/}
footer{ /*pengaturan footer*/clear: both; /*agar footer tepat berada di bawah elemen yang menggunakan property float*/}
HTML
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen web yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><title>Layout Dasar Dokumen Web</title> <!--title bar
pada browser/judul halaman--><link rel="stylesheet"href="latihan2.css"> <!--link
menuju file .css--></head><body> <!--lingkup teks HTML--><header>Header</header> <!--isi konten header--><nav>Navigation</nav> <!--membuat menu navigasi--><aside>Sidebar Menggunakan float:left</aside> <!--membuat side
bar atau float page--><section id="content"> <!--sama fungsinya dengan <div>-->
<!--ukuran teks menggunakan heading 3--><h3>Menggunakan float:right</h3>Alhamdulillah semuanya
sudahselesai, sehingga aku sangat-sangat lega dan sangat
senang.Apa kamu juga merasakan hal yang sama dengan aku?
</section><footer>Footer menggunakan clear:both</footer> <!--isi konten
footer--></body>
</html>
Printscreen
Penjelasan
Pada dasarnya pada program diatas menggunakan clear fix pada latihan 2 dan
teknik clear both pada latihan 1 memiliki perbedaan yaitu pada posisinya , pada
latihan satu berada pada sisi kiri windows sedangkan pada latihan 2 berada pada
sisi tengah. Sehingga clear fix memiliki fungsi untuk melakukan pergeseran
content agar sesuai dengan tampilan layar browser.
2.2. Latihan 3
Pembuatan Grid
Source Code
CSS
.col1, .col2, .col3, .col4,
.col5, .col6, .col7, .col8,
.col9, .col10, .col11, .col12{ /*pengaturan kolom 1-12*/background: #CCC; /*warna background kolom*/display: block; /*menampilkan elemen dalam bentuk block*/float: left; /*posisi di sebelah kiri*/height: 30px; /*tinggi kolom*/line-height: 30px; /*mengatur tinggi antar baris paragraf*/margin: 0 10px 0 10px; /*mengatur seleksi batas jarak pada bagian luar elemen*/padding:0; /*mengatur seleksi batas jarak pada bagian dalam elemen*/text-align:center; /*posisi di tengah*/}.col1{ /*pengaturan kolom 1*/width: 60px; /*panjang kolom*/}.col2{ /*pengaturan kolom 1*/width: 140px; /*panjang kolom*/}.col3{ /*pengaturan kolom 1*/width: 220px; /*panjang kolom*/}.col4{ /*pengaturan kolom 1*/width:300px; /*panjang kolom*/}.col5{ /*pengaturan kolom 1*/width: 380px; /*panjang kolom*/}.col6{ /*pengaturan kolom 1*/width: 460px; /*panjang kolom*/}.col7{ /*pengaturan kolom 1*/width: 540px; /*panjang kolom*/}.col8{ /*pengaturan kolom 1*/width: 620px; /*panjang kolom*/}.col9{ /*pengaturan kolom 1*/width: 700px; /*panjang kolom*/}.col10{ /*pengaturan kolom 1*/width: 780px; /*panjang kolom*/}.col11{ /*pengaturan kolom 1*/width:860px; /*panjang kolom*/
}.col12{ /*pengaturan kolom 1*/width:940px; /*panjang kolom*/}.container{ /*pengaturan container*/background: #555; /*pengaturan warna background*/margin: 0; /*mengatur seleksi batas jarak elemen dari luar*/padding: 0; /*mengatur seleksi batas jarak elemen dari dalam*/width: 960px; /*panjang container*/}.container:before,.container:after,.row:before,.row:after{content:"";display:table;}.container:after,.row:after{clear:both;}.row{clear:both;margin:10px 0 10px 0;}
HTML
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><title>Contoh Grid pada HTML</title> <!--title bar pada
browser/judul halaman--><link rel="stylesheet" href="latihan3.css"> <!--link
menuju file .css--></head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2">2</div>
<div class="col2">2</div><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3">3</div><div class="col3">3</div><div class="col3">3</div><div class="col3">3</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col4">4</div><div class="col4">4</div><div class="col4">4</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col5">5</div><div class="col5">5</div><div class="col2">2</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col6">6</div><div class="col6">6</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col7">7</div><div class="col5">5</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col8">8</div><div class="col4">4</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col9">9</div><div class="col3">3</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col10">10</div><div class="col2">2</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col11">11</div><div class="col1">1</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col12">12</div></div>
</div></body>
</html>
Printscreen
Penjelasan
Pada code program diatas membentuk Grid pertama dengan melakukan
bentuka col1-col12 pada css dan pengaturan posisi conten serta floatingnya juga
serta row tablenya, pada col1-col12 diberi width dengan kelipatan 80 sehingga
membentuk panjang grid yang berbeda-beda. Kemudian pada Grid_Style.html
Tinggal kita panggil Css yaitu 3.css.css dengan pengaturan pada pemanggilan col
di Css sehingga membentuk seperti pada printscreen.
F. Studi Kasus
Buatlah sebuah website pribadi anda yang berisi:
a. Halaman beranda
b. Halaman informasi mengenai diri anda
c. Halaman sebuah artikel(sertakan sumber referensi artikel)
File .html
1. Home
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Home-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css-->
</head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><a
href="http://tekno.kompas.com/read/2014/03/03/1836321/Bicara.Soal.Smartphone.Mari.Bicara.Soal.Samsung.Galaxy.S5">
Bicara samsung galaxy S5 </a><br><a
href="http://tekno.kompas.com/read/2014/03/03/1102341/Sejarah.Kelahiran.Android.Nokia.X">
Android Nokia </a><br><a
href="http://tekno.kompas.com/read/2014/02/21/0950207/CEO.WhatsApp.dari.Tukang.Sapu.Jadi.Miliarder">
CEO WhatsApp Mantan Tukang Sapu </a><br><a
href="http://tekno.kompas.com/read/2014/02/13/1636099/Seperti.Inikah.Wujud.iPhone.6.">
Wujud iPhone 6 </a><br></div><div class="col4"><font ><h1>STUDI KASUS</h1><h2>Prak. Pemrograman Berbasis Web</h2><h3>MODUL III</h3></font></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col6"><br>@2015 Created By : Gisra Rahmadhita</div>
</div></div>
</body></html>
2. Profil
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Profil-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css-->
</head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><img src ="PhotoGrid_1423392059517.jpg"></div><div class="col4"><p><h2>Nama : Gisra Rahmadhita</br>
<!--pindah baris-->NIM : 130533608259</br> <!--pindah
baris-->TTL : Padang, 21 Agustus 1994</br>
<!--pindah baris-->Alamat : Komp.Villa Permata Putri
Edelwis No.11 Tanah Sirah </br> <!--pindah baris-->Prodi : S1 PTI 2013 Off. B </br> <!--pindah
baris-->No. Hp : 085791929285 </br> <!--pindah
baris--><ol> <!--ordered list-->
Riwayat Pendidikan : </br> <!--pindah baris-->
<li>SDN 27 Sawahan Dalam (2001-2007) </li> <!--list-->
<li>SMPN 09 Padang (2007-2010) </li> <!--list-->
<li>SMA Semen Padang (2010-2013) </li> <!--list-->
<li>Universitas Negeri Malang (2013-sekarang) </li> <!--list-->
</h2></p></div>
</div><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col6"><br>@2015 Created By :
Gisra Rahmadhita</div></div>
</div></body>
</html>
3. Artikel
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Artikel-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css-->
</head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br>
<a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Bicara Soal Smartphone, <br>Mari Bicara
Soal Samsung Galaxy S5</h1><br><img src="S5.jpg"><br>Kemajuan dunia teknologi telekomunikasi bukan
hanya memberikan arti baru, tetapi juga dapat meningkatkan kualitas hidup
seseorang.Kualitas hidup yang lebih baik bukan hanya
diukur dari kemapanan seseorang dalam soal finansial. Karena, kemapanan seseorang dari segi
finansial tersebut tidak akan lepas dari aktivitasnya dan untuk memenuhi setiap aktivitas tersebut
butuh sebuah dukungan. Misalnya saja, saat membutuhkan dukungan
koneksi yang cepat agar setiap pekerjaan dapat terselesaikan atau dukungan yang berhubungan dengan
kesehatan untuk menunjang aktivitas di atas. Aktivitas yang lancar tersebut secara
otomatis akan meningkatkan kemapanan finansial dan berlanjut dengan meningkatnya gaya hidup.
Dukungan tersebut bisa didapatkan dari mana saja, contohnya sebuah smartphone.Kemajuan teknologi komunikasi yang ada saat
ini membuat ponsel memang layak disebut sebagai smartphone. Selain fungsi utamanya sebagai sebuah alat
berkomunikasi, sebuah smartphone pantas juga disebut sebagai
"pendukung utama" Anda beraktivitas. Contohnya saja apa yang dilakukan oleh
perusahaan asal negeri ginseng yang baru saja merilis Samsung Galaxy S5 di
Barcelona, Spanyol.Seorang JK Shin, President and Head of IT &
Mobile Communications Divison Samsung membuka sebuah tabir apa yang dibutuhkan oleh
konsumen dari sebuah smartphone. "Konsumen mencari sebuah perangkat mobile
yang mampu menginspirasi dan mendukung aktivitas mereka bersamaan dengan usaha mereka meningkatkan
gaya hidup. GALAXY S5 mencerminkan sebuah produk
berdesain ikonik dengan fitur penting dan berguna yang fokus dalam menghadirkan smartphone
canggih di pasaran saat ini yang di inspirasi dari konsumen.”<h2>Terinspirasi dari kebutuhan
konsumen.</h2>Konsumen, adalah inspirasi yang menyebabkan
Samsung Galaxy S5 mampu menghadirkan kecanggihan sebagai sebuah smartphone.
Spesifiaksinya menyebutkan kalau smartphone ini sudah dapat bekerja dalam jaringan LTE Cat.4
yang mampu mengaliri data hingga 150/50Mbps. Jadi, kecepatan data saat sedang berselancar
di dunia maya berjalan mulus tanpa putus.
Pada Samsung Galaxy S5 pun sudah didukung oleh Wi-Fi generasi ke lima 802.11ac dan MIMO 2x2,
sehingga saat mencari koneksi yang cepat Samsung Galaxy S5 ini sudah siap mendukung Anda
ditambah lagi dengan fitur Download Booster sebuah teknologi Wi-Fi inovatif untuk meningkatkan kecepatan data
dengan menggunakan Wi-Fi dan LTE secara bersamaan.
Agar kecepatan jaringan di atas dapat difasilitasi,
perangkat Samsung Galaxy S5 pun sudah siap dijalankan oleh sebuah prosesor berkekuatan 2.5GHz Quadcore
dan memori sebesar 2GB agar setiap akses yang Anda lakukan di smartphone tersebut dapat berjalan dengan lancar tanpa tersendat.
Dan untuk masalah penyimpanan Samsung Galaxy S5 ini tanpa tambahan kartu penyimpanan sudah dapat menyimpan data
yang Anda punya berkat Internal Memory 16/32GB. Sehingga, semua foto yang Anda ambil dari kamera 16MP (depan) atau 2.1MP (belakang)
Samsung Galaxy S5 sudah langsung dapat tersimpan.
Saat menangkap momen berharga bersama keluarga atau sahabat ke dalam foto,
Anda pun dapat merasakan pengalaman kecanggihan High Dynamic Range (HDR) yang mampu mereproduksi cahaya dan warna mencolok
dengan intensitas tinggi dalam kondisi apapun, dan kecepatan autofocus dari kamera Samsung Galaxy S5 ini
yang mampu menangkap objek hanya dalam 0.3 detik. Hal lainnya adalah,
Samsung Galaxy S5 akan menjadikan Anda bak fotografer profesional
dengan fitur Selective Focus yaitu foto dengan bagian tajam di satu obyek saja.
Jadi, untuk menciptakan efek a shallow depth of field (DOF)cukup tekan saja.
Lain lagi apabila Anda ingin merekam momen di atas dalam bentuk video.
Anda dapat menciptakan video dengan resolusi tinggi dengan kecepatan UHD@30fps
dan urusan gambar yang goyang dapat diminimalisir dengan video stabilization.
Setiap video yang Anda buat bisa dibentuk dalam format MP4, M4V, 3GP, 3G2, WMV, ASF, AVI, FLV, MKV, WEBM.
Atau Anda pun dapat menyaksikan video bersama dari layar Samsung Galaxy S5 yang berukuran 5.1” FHD Super AMOLED (1920 x 1080),
asalkan video tersebut ada dalam format H.263, H.264(AVC), MPEG4, VC-1, Sorenson Spark, MP43, WMV7, WMV8, VP8.
<h2>Menjadikan Samsung Galaxy S5 bagian dari gaya hidup</h2>
Sebagai perusahaan gadget terbesar, Samsung selain dapat menciptakan perangkat canggih dan sesuai kebutuhan konsumen
juga tidak pernah lupa melekatkan nilai estetika dari setiap produknya.
Jelasnya, terlihat dari Samsung Galaxy S5 ini yang ikonik dengan tren modern untuk menarik selera konsumen yang berbeda-beda.
GALAXY S5 memiliki pola dengan ilusi lubang di cover belakang yang membuatnya terlihat glamor dan modern.
Terlihat ramping, dengan bentuk kontur yang baru dan warna-warna yang lebih hidup, seperti charcoal Black,
shimmery White, electric Blue dan copper Gold.
Agar Samsung Galaxy S5 ini tetap terlihat "cantik" tak lupa Samsung pun memberikan pertahanan dari debu dan air pada bagian luar produk ini.
Sedangkan untuk bagian keamanan smartphone ini dapat membaca sidk jari Anda dengan fitur finger scanner atau
Anda dapat melakukan penguncian layar biometrik. Untuk masalah ketahanan baterai,
Samsung Galaxy S5 ini dilengkapi dengan baterai berkekuatan 2800mAh (Standby time: 390 hrs / Talk time: 21 hrs)
dan dilengkapi pula dengan The Ultra Power Saving Mode yang akan merubah layar menjadi hitam putih
dan menutup semua fitur yang tidak perlu agar konsumsi baterai lebih hemat.
<h2>Samsung Galaxy S5 dan Kesehatan</h2>Nah ini yang unik, setiap pengguna Samsung
Galaxy S5 akan dimanjakan oleh S Health 3.0 yaitu aplikasi yang akan membantu Anda tetap
fit dan sehat. Samsung Galaxy S5 menyediakan fitness tracker personal yang komprehensif untuk membantu pengguna
memantau dan menjaga aktivitas keseharian mereka juga Samsung Galaxy S5
ini dilengkapi dengan perangkat tambahan termasuk pedometer, catatan diet dan aktivitas olahraga, serta satu perangkat
terbaru yakni built-in monitor denyut jantung. Samsung Galaxy S5 ini juga dapat disandingkan dengan Samsung Gear terbaru
agar dapat mendampingi kegiatan kebugaran secara real-time.</div>
</div><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col6"><br>@2015 Created By :
Gisra Rahmadhita</div></div>
</div></body>
</html>
Artikel2
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML--><head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Artikel-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css--></head>
<body> <!--lingkup semua teks HTML-->
<div class="container"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col1"><br>Gisra Rahmadhita</div></div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br><a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Sejarah Kelahiran Android Nokia X</h1><br><img src="Nokia-X.jpg"><br>KOMPAS.com — Nokia sudah menaruh perhatian pada
Android sejak tiga tahun lalu. Namun, Nokia malu-malu mengadopsi Android karena
telanjur menjalin kemitraan eksklusif dengan Windows Phone. Sebagai jalan tengah dan agar terlihat tidak
bergantung sepenuhnya pada Google, Nokia melakukan modifikasi besar pada sistem robot
hijau hingga terciptalah Android rasa Windows Phone.Eksperimen Nokia terhadap Android sudah dimulai
sejak 2011. Tanda-tanda itu terlihat ketika beredar foto ponsel
Nokia N9 yang menjalankan Android 2.3. Foto ini diyakini bukan rekayasa.Nokia menjadi "pengagum rahasia" sistem operasi
Android. Bahkan, CEO Nokia Stephen Elop dibuat galau. Ia mempertimbangkan agar Nokia mengadopsi Android
demi menyelamatkan bisnis ponselnya yang sedang terpuruk. Terlebih lagi, pertumbuhan pengguna Android sangat
pesat serta mendapat banyak dukungan dari pengembang aplikasi.Sekitar akhir tahun 2013, seorang sumber tepercaya
mengatakan kepada KompasTekno bahwa Nokia memang serius menggarap Android.
Namun, sumber itu mengatakan, Android yang dikembangkan Nokia ini lain daripada yang lain.
Kepala Desain User Interface Nokia saat itu, Peter Skillman,
disebut-sebut sebagai orang yang berperan besar dalam pengembangan Android di Nokia.
Selain Skillman, ada Egil Kvaleberg yang memimpin penelitian dan pengembangan, desain sistem, dan arsitektur ponsel Android Nokia
Beberapa pekan kemudian, beredar kabar Nokia sedang mengerjakan proyek yang disebut "Asha on Linux".
Dengan status super-rahasia, Nokia memproduksi 10.000 unit perangkat purwarupa yang secara fisik mirip ponsel seri Asha
tetapi menjalankan Android. Perangkat ini diproduksi oleh pemanufaktur Foxconn di China
dan menggunakan prosesor Qualcomm Snapdragon 200 seri 8225Q.
Karyawan Nokia menyebut perangkat itu dengan kode nama "Normandy."
Ini hanyalah sebuah kode nama, bukan merek dagang ataupun nama resmi untuk dipasarkan.
Hingga pada Januari 2014, beredar kabar bahwa ponsel pintar Android itu diberi nama resmi Nokia X.
Ini bukan seperti Android yang diadopsi oleh Samsung, Sony, HTC, dan produsen ponsel lainnya.
Proyek ini hanya memanfaatkan sistem operasi Android yang bersifat open source (terbuka)
tetapi tidak menyertakan layanan atau aplikasi Google.
Sejak awal, KompasTekno meyakini bahwa Android yang dikembangkan Nokia mirip seperti sistem pada tablet Kindle Fire buatan Amazon.
Perusahaan e-commerce asal Amerika Serikat itu tidak memungkinkan pengguna Kindle Fire untuk mengunjungi Google Play Store,
atau berselancar internet dengan Chrome, atau memakai aplikasi asli Gmail.
Pengembangan Android terus berlanjut meskipun unit bisnis ponsel Nokia dibeli oleh Microsoft pada September 2013.
The Verge melaporkan, Microsoft terkesan "tidak suka" dengan proyek Android yang dijalani Nokia.
"Ada terlalu banyak intrik politik" dengan keputusan Nokia mengadopsi Android.
Peluncuran Android Nokia bahkan dikabarkan terancam batal.
Di sisi lain, beberapa petinggi Microsoft menilai ponsel Android dari Nokia dapat menjadi kuda troya untuk meningkatkan adopsi Windows Phone.
<h2>Bocoran informasi dari Kemenkominfo</h2>Kode teknis perangkat Android buatan Nokia
terungkap berkat situs web Dirjen Sumber Daya dan Perangkat Pos dan Informatika (SPPI)
Kementerian Komunikasi dan Informatika. Pada 24 Januari 2014,
KompasTekno melaporkan ada pengajuan sertifikasi ponsel baru dengan kode teknis RM-980 kepada Pemerintah Indonesia.
Ponsel itu dirakit di China.Kemenkominfo akhirnya memberi sertifikasi kepada
RM-980. Indonesia merupakan salah satu negara tujuan utama
penjualan ponsel Android Nokia yang mengincar sejumlah negara berkembang.
Bocoran informasi terus menerpa. Akun Twitter @evleaks memublikasi foto ponsel Nokia X berwarna hijau.
Setelah itu, bermunculanlah foto Nokia X yang ternyata menyediakan beragam warna casing.
Bukan sekadar foto, spesifikasi komponen yang dipakai Nokia X juga tersiar.
Prosesor yang digunakan pada Nokia X dibuat oleh Qualcomm, kapasitas RAM 512 MB, memori internal 4 GB,
layar 4 inci resolusi 800 x 480 piksel, kamera 5 MP, mendukung kartu SIM ganda, baterai 1.500 mAh,
dan berjalan dengan basis sistem operasi Android 4.4 (KitKat).
Dari sekian banyak bocoran spesifikasi tersebut, hanya ada satu yang salah, yaitu versi Android yang digunakan.
Ternyata, Nokia X menggunakan basis sistem operasi Android versi 4.1.2 (Jelly Bean).
Hingga pada Februari 2014, Nokia mengirim udangan kepada media massa untuk
sebuah acara di ajang Mobile World Congress (MWC) tanggal 24 Februari 2014 di Barcelona, Spanyol.
Benar saja, CEO Nokia Stephen Elop memperkenalkan Nokia X.
Ada tiga varian yang diperkenalkan Elop saat itu, yaitu Nokia X, Nokia X+, dan Nokia XL.
Nokia X+ dan XL memiliki kapasitas RAM yang lebih besar, yaitu 768 MB. Khusus Nokia XL, terdapat sejumlah peningkatan spesifikasi.
Kamera belakangnya dilengkapi lampu kilat LED, tersedia juga kamera depan, layar berukuran 5 inci, serta baterai berkapasitas 2.000 mAh.
<h2>Semua rahasia Android Nokia X terungkap</h2>Dalam mengembangkan dan menggunakan Android, Nokia
hanya memakai lisensi "Android Open Source Project" (AOSP) dari Google.
Pada lisensi ini, Google mengizinkan siapa saja untuk memanfaatkan Android secara gratis.
Google telah memantapkan komitmen bahwa Android adalah sistem operasi yang bersifat open source atau terbuka.
Sementara itu, Nokia tidak membeli lisensi Google Mobile Service (GMS) dari Google.
Hal inilah yang menyebabkan Nokia X tidak menyediakan secara langsung aplikasi inti Android,
seperti aplikasi asli Gmail, Google Maps, Chrome, YouTube, Hangouts, Google+, Google Drive, dan Google Search.
Bahkan, sistem Nokia X tidak mendukung antarmuka pemrograman aplikasi (application programming interface/API) buatan Google.
Nokia meminta aplikasi-aplikasi Android yang memanfaatkan API Google agar dimodikasi dan menggunakan API buatan Nokia.
Dugaan KompasTekno bahwa sistem Nokia X sama seperti Kindle Fire ternyata benar.
Nokia X tidak memungkinkan penggunanya mengunjungi toko aplikasi Google Play Store.
Sebagai gantinya, Nokia menyediakan toko aplikasinya sendiri, yaitu Nokia Store,
yang merupakan pintu utama untuk mencari, mengunduh, dan memasang aplikasi Android di Nokia X.
Basis Android yang dipakai pada Nokia X saat ini adalah versi 4.1.2 (Jelly Bean) dan disebut sebagai "Nokia X software platform".
Perusahaan asal Finlandia itu melakukan banyak modifikasi pada Android,
termasuk mengubah agar tampilan Nokia X terlihat seperti Windows Phone dengan nuansa kotak-kotak.
Inilah strategi Nokia dalam menyikapi Android. Keberadaan Nokia X menegaskan bahwa Nokia tak mau bergantung pada Google.
Mereka memilih untuk membangun ekosistem sendiri dan menciptakan pasar baru, sambil berharap cemas Nokia X mampu meraih sukses di pasar.
Dalam waktu dekat, Nokia akan mulai memasarkan si ponsel Android rasa windows Phone yang anti-terhadap layanan atau aplikasi buatan Google ini.
<br></div></div><div class="row"> <!--mendefinisikan sebuah selection
pada dokumen--><div class="col6"><br>@2015 Created By : Gisra
Rahmadhita</div></div>
</div></body></html>
Artikel3
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Artikel-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css-->
</head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br>
<a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>CEO WhatsApp, dari Tukang Sapu Jadi
Miliarder</h1><br><img src="CEO-WhatApps.jpg"><br>KOMPAS.com — Pada 1992, Jan Koum yang berusia
16 tahun tiba di Mountain View, Amerika Serikat. Didampingi oleh ibunya, Koum adalah imigran
yang memutuskan hijrah dari Kiev, Ukraina, dengan mimpi meraih kehidupan yang lebih baik.
Di AS, mereka mengalami masa-masa sulit. Keluarga Koum tinggal di apartemen kecil dengan dua kamar tidur hasil bantuan pemerintah.
Mereka terpaksa bergantung pada jaminan sosial dan mengantre kupon makanan karena tak punya uang.
Koum pun bekerja sebagai tukang sapu di sebuah toko untuk memenuhi kebutuhan hidup,
sementara ibunya mengambil profesi baru sebagai baby sitter.
Ayah Koum tak ikut bermigrasi. Pria yang bekerja di sektor konstruksi ini memilih tinggal di Ukraina.
Begitu terpisah, Koum mengaku tak bisa sering-sering menghubungi sang ayah karena mahalnya biaya telepon.
"Jika saja ketika itu saya sudah bisa berkirim pesan instan ke ayah…" ujar Koum berandai-andai dalam wawancara dengan Wired.
<h2>Bersekolah</h2>Saat masih tinggal di Ukraina, keluarga Koum
hidup di sebuah desa di luar ibu kota Kiev. Dia pergi menuntut ilmu di sebuah sekolah
yang keadaannya begitu memprihatinkan sampai-sampai tak punya kamar kecil.
"Bayangkan suhu di luar minus 20 derajat celsius, anak-anak harus berlari menyeberangi lapangan untuk ke kamar kecil…
Saya baru punya komputer saat umur 19 tahun, tetapi pernah memiliki sempoa," kenang Koum.
Sesampainya di rumah, Koum kecil terpaksa bergelap-gelap karena tak ada sambungan listrik ataupun air panas.
Begitu pindah ke Amerika dan mulai bersekolah di sana, keluarga Koum adalah satu-satunya di kelas yang tidak memiliki mobil.
Jadilah Koum terpaksa bangun lebih pagi untuk mengejar bus.
Sang ibu menjejali koper yang dibawa dari negeri asal dengan pulpen dan buku tulis cetakan Uni Soviet untuk menghemat biaya peralatan sekolah.
Datang dari negeri seberang, Koum ketika itu tak pandai berbahasa Inggris.
Koum beberapa kali terlibat masalah karena "membalas anak lain yang mengganggu".
Untung, dia terbantu dengan postur badan yang tinggi menjulang mencapai 188 cm.
"Hidup di Ukraina tak mudah dan membuat saya tangguh secara fisik dan mental," katanya lagi.
Koum kemudian masuk kuliah, mempelajari ilmu komputer dan matematika, tetapi tidak sampai selesai.
"Prestasi saya buruk, ditambah lagi dengan rasa bosan."
Maka, dia pun memutuskan drop out, lalu mulai bekerja sebagai pembungkus barang belanjaan di supermarket,
setelah itu di toko elektronik, internet provider, hingga perusahaan audit.
Sampai kemudian pada 1997 Koum bertemu dengan Brian Acton dari Yahoo. Enam bulan setelahnya, Koum mulai bekerja di Yahoo.
<h2>Mendirikan WhatsApp</h2>Koum menjalin persahabatan dengan Acton, yang
banyak membantu Koum ketika sempat hidup sebatang kara setelah ibunya meninggal pada tahun 2000.
Sang ayah telah lebih dulu wafat pada 1997. "Dia (Acton) sering mengajak saya ke rumahnya," tutur Koum.
Menghabiskan sembilan tahun bekerja di Yahoo, termasuk Yahoo Shopping,
Koum merasa tidak nyaman dengan banyaknya iklan yang harus diurus dan bertebaran di mana-mana.
"Selalu ada perdebatan untuk menempatkan lebih banyak lagi iklan dan logo di laman situs.
Apa urusan pengguna dengan itu semua? Saya jadi tak nyaman. Iklan bukan satu-satunya solusi monetisasi untuk semua orang.
Sebuah layanan harus benar-benar berupa layanan murni, pelanggan adalah pengguna," ujar Koum.
Acton rupanya merasakan hal serupa. Koum dan Acton kemudian memutuskan keluar dari Yahoo pada hari yang sama,
yaitu 31 Oktober 2007. Koum ketika itu berusia 31 tahun dan telah mengumpulkan uang untuk memulai bisnisnya sendiri.
Dia bertekad bahwa bisnisnya ini tak akan direcoki oleh iklan yang mengganggu.
Koum dan Acton pisah jalan, tetapi masih sering bertemu untuk mendiskusikan rencana bisnis.
Keduanya sempat mencoba melamar di Facebook dan sama-sama ditolak.
Pada 2009, setelah membeli sebuah iPhone, Koum menyadari bahwa toko aplikasi App Store yang baru berumur tujuh bulan
akan melahirkan industri baru yang berisi pengembang-pengembang aplikasi.
Koum mendapat ide untuk membuat aplikasi yang bisa menampilkan update status seseorang di daftar kontak ponsel,
misalnya ketika hampir kehabisan baterai atau sedang sibuk.
Nama yang muncul di benak Koum adalah "WhatsApp" karena terdengar mirip dengan kalimat "what's up" yang biasa dipakai untuk menanyakan kabar.
Dia pun mewujudkan ide ini dengan dibantu oleh Alex Fishman, seorang teman asal Rusia yang dekat dengan komunitas Rusia di kota San Jose.
Pada 24 Februari 2009, dia mendirikan perusahaan WhatsApp Inc di California.
<h2>Tumbuh besar</h2>WhatsApp versi pertama benar-benar dipakai
sekadar untuk update status di ponsel.
Pemakainya kebanyakan hanya teman-teman Koum dari Rusia. "Lalu, pada suatu ketika, ia berubah fungsi jadi aplikasi pesan instan.
Kami mulai memakainya untuk menanyakan kabar masing-masing dan menjawabnya," ucap Fishman, sebagaimana dikutip oleh Forbes.
Koum pun tersadar bahwa dia secara tak sengaja telah menciptakan layanan pengiriman pesan.
"Bisa berkirim pesan ke orang di belahan dunia lain secara instan, dengan perangkat yang selalu Anda bawa,
adalah hal yang luar biasa," kata Koum.Ketika itu, satu-satunya layanan messaging
gratis lain yang tersedia adalah BlackBerry Messenger. Namun, aplikasi ini hanya bisa digunakan di
ponsel BlackBerry. Google G-Talk dan Skype juga ada, tetapi WhatsApp menawarkan keunikan
tersendiri di mana mekanisme login dilakukan melalui nomor ponsel pengguna.
Koum merilis WhatsApp versi 2.0 dengan komponen messaging.
Jumlah pengguna aktifnya langsung melonjak jadi 250.000 orang. Dia kemudian menemui Acton yang masih menganggur.
Acton bargabung dengan WhatsApp dan membantu mencarikan modal dari teman-teman eks-Yahoo.
Kendati sempat mengalami kesulitan keuangan, WhatsApp terus tumbuh dan mulai menghasilkan pendapatan
dari biaya langganan yang ditarik dari pengguna.
Kini, WhatsApp telah menjelma jadi layanan pesan instan terbesar dengan jumlah pengguna aktif per bulan mencapai 450 juta.
Setiap hari, sebanyak 18 miliar pesan dikirim melalui jaringannya. Semua itu ditangani dengan jumlah karyawan hanya 50 orang.
<h2>Warisan Soviet</h2>Pengalaman hidup Koum ternyata punya pengaruh
besar dalam membentuk layanan WhatsApp. Pria ini menghabiskan masa kecil di Ukraina
yang masih menjadi bagian dari Uni Soviet. Di negeri tersebut, percakapan warga selalu
dimata-matai oleh pemerintah. "Itulah tempat yang saya tinggalkan untuk
menuju ke sini (AS), di mana ada demokrasi dan kebebasan berbicara," ujar Koum.
Sehubungan dengan kemungkinan penyadapan oleh NSA, Koum mengatakan bahwa privasi pengguna WhatsApp sangat dijaga.
Berbeda dengan perusahaan-perusahaan semacam Facebook dan Yahoo, Koum mengatakan bahwa WhatsApp tak didorong oleh iklan.
"Jadi, kami tak perlu mengumpulkan data pribadi pengguna," katanya.
Soal kebebasan dari iklan ini ternyata juga ada hubungannya dengan masa lalu Koum.
"Tak ada yang lebih personal dari komunikasi yang Anda lakukan dengan teman dan keluarga,
dan menginterupsi itu semua dengan iklan bukanlah solusi yang tepat," ujar Koum.
"Lagi pula, saya tumbuh di sebuah dunia yang tidak mengenal iklan. Tak ada iklan di Uni Soviet yang komunis," imbuhnya.
Sejak dulu, Koum dan Acton selalu konsisten menjaga layanan perusahaan itu agar tetap sederhana
dan berfokus pada pengiriman pesan serta bebas iklan.
Sikap ini tecermin dari secarik kertas di ruang kantor Koum, berisikan semboyan singkat yang ditulis oleh Acton:
"Tanpa Iklan! Tanpa Permainan! Tanpa Gimmick!". Di sampingnya tergeletak sepasang walkie-talkie yang dipakai Koum
untuk mencari tahu bagaimana caranya menyederhanakan pesan instan berbasis suara.
Kini, WhatsApp telah dibeli Facebook dengan nilai 19 miliar dollar AS (sekitar Rp 223 miliar).
Kekayaan Koum yang memiliki 45 persen saham WhatsApp diperkirakan melonjak jadi 6,8 miliar dollar AS.
Kendati demikian, dia tak melupakan masa lalu.
Koum menandatangani perjanjian bernilai triliunan rupiah dengan Facebook itu di depan bekas kantor Dinas Sosial North County,
Mountain View, tempat dia dulu mengantre kupon makanan bersama-sama warga kurang mampu lainnya.</div>
</div><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col6"><br>@2015 Created By :
Gisra Rahmadhita</div></div>
</div></body>
</html>
Artikel4
<!DOCTYPE html> <!--mendefinisikan informasi tipe dokumen--><html> <!--menyatakan pada browser bahwa dokumen yang digunakan adalah HTML-->
<head> <!--informasi umum dari sebuah halaman web--><link rel="shortcut icon" href="B612-2015-02-12-06-53-47.jpg">
<title>Artikel-Gisra Rahmadhita</title> <!--title bar pada browser/judul halaman-->
<link rel="stylesheet" href="webPribadi.css"> <!--link menuju file .css-->
</head>
<body> <!--lingkup semua teks HTML--><div class="container"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col1"><br>Gisra Rahmadhita</div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col2"><a href="Home.html">Home</a></div>
<div class="col2"><a href="Profil.html">Profil</a></div>
<div class="col2"><a href="Artikel.html">Artikel</a></div>
</div>
<div class="row"> <!--mendefinisikan sebuah selection pada dokumen-->
<div class="col3"><a href="Artikel.html">Bicara samsung galaxy S5 </a><br><a href="Artikel2.html">Android Nokia </a><br><a href="Artikel3.html">CEO WhatsApp Mantan Tukang Sapu </a><br><a href="Artikel4.html">Wujud iPhone 6 </a><br></div><div class="col4"><p><h1>Seperti Inikah Wujud iPhone 6? </h1><br><img src="iPhone1.jpg"><br>KOMPAS.com — Bocoran informasi mengenai
iPhone generasi terbaru memang selalu menarik perhatian. Banyak yang ingin mengetahui, akan seperti
apakah inovasi yang dihadirkan oleh Apple nantinya.Bocoran terbaru memperlihatkan beberapa
gambar casing milik perangkat yang diduga sebagai iPhone 6. (lihat gambar di bawah)<img src="iPhone2.jpg"><h6>Casing ini diduga milik iPhone 6</h6>Gambar-gambar tersebut dikutip oleh Sonny
Dickson dalam akun Twitter-nya. Akun ini sudah beberapa kali membocorkan
informasi produk yang bahkan belum diumumkan secara resmi.Menurut pengamatan KompasTekno, gambar-gambar
yang dipamerkan memang tidak terlihat terlalu jelas, cenderung sedikit berbayang. Untungnya,
beberapa detail dari casing ini masih bisa sedikit terlihat.<img src="iPhone3.jpg"><h6>Bagian belakang cangkang produk yang
diduga sebagai iPhone 6</h6>Berdasarkan gambar tersebut, seperti dikutip
dari Pocket-Lint, Kamis (13/2/2014), iPhone 6 terlihat lebih langsing atau lebih
tipis dibandingkan iPhone generasi sebelumnya. Desain perangkat ini mirip, alias tidak jauh
berbeda, dari iPad Mini dan iPad Air.Layarnya pun tampak lebih besar ketimbang
iPhone 5S. Hal tersebut sejalan dengan rumor yang
berkembang selama ini. Beberapa kali, media besar mengungkapkan
bahwa iPhone generasi berikutnya akan dipersenjatai dengan layar berukuran 4,7 dan 5,5 inci.
Sekadar catatan, Apple sendiri gemar melakukan pengujian perangkat dalam berbagai bentuk purwarupa.
Ada kemungkinan, foto yang dipamerkan oleh Dickson merupakan salah satu dari purwarupa tersebut.
Masih ada kemungkinan bahwa iPhone 6 memiliki bentuk yang berbeda dari yang dibagikan oleh Dickson.
Adapun iPhone 6 digosipkan akan diperkenalkan pada Mei 2014 mendatang. </div>
</div><div class="row"> <!--mendefinisikan sebuah
selection pada dokumen--><div class="col6"><br>@2015 Created By :
Gisra Rahmadhita</div></div>
</div></body>
</html>
File .css
.col1, .col2, .col3, .col4,
.col5, .col6, .col7{ /*pengaturan kolom 1-12*/background: #afeeee; /*warna background kolom*/display: block; /*menampilkan elemen dalam bentuk block*/float: left; /*posisi di sebelah kiri*/height: 30px; /*tinggi kolom*/line-height: 30px; /*mengatur tinggi antar baris paragraf*/margin: 0 10px 0 10px; /*mengatur seleksi batas jarak pada bagian luar elemen*/padding:0; /*mengatur seleksi batas jarak pada bagian dalam elemen*/text-align:center; /*posisi di tengah*/}.col1{ /*pengaturan kolom 1*/width: 940px; /*panjang kolom*/height: 80px;font-family: facebook latter faces;text-align: right;font-variant: small-caps;font-size: 40px;font-weight: bold;background-image: url('D.jpg'); /*pengaturan warna background*/color: red;}.col2{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/}.col3{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/height: auto;}.col4{ /*pengaturan kolom 1*/width:620px; /*panjang kolom*/height: auto;}.col5{ /*pengaturan kolom 1*/width: 300px; /*panjang kolom*/height: 80px;}.col6{width: 940px;height: 80px;}.col7{width: 280px;height: 40px;border: 1px solid white;padding: 0px;margin: 0 0px 5 0px;
}.container{ /*pengaturan container*/background-image: url('C.jpg'); /*pengaturan warna background*/margin: 0 200px 0 200px; /*mengatur seleksi batas jarak elemen dari luar*/padding: 0; /*mengatur seleksi batas jarak elemen dari dalam*/width: 960px; /*panjang container*/}.container:before,.container:after,.row:before,.row:after{content:"";display:table;}.container:after,.row:after{clear:both;}.row{clear:both;margin:10px 0 10px 0;}
Hasil
Penjelasan :
Tampilan web di atas merupakan sebuah website pribadi yang berisi Home, Profil dan
Artikel. Setiap menu memiliki link untuk menuju halaman yang berbeda. Desain di atas
menggunakan grid. Memilik 2 konten area disetiap halamannya. Konten kiri berisi 4 link
menuju website lain, konten kanan merupakan konten utama. Halaman home berisi judul
dan 4 link menuju halaman web lain. Halaman profil berisi identitas dan foto. Halaman
artikel berisi 4 artikel menarik tentang perkembangan gadget, dan halaman artikel ini juga
berisi 4 link artikel (4 macam artikel).
G. KESIMPULAN
1. Property float berfungsi “mengapungkan” elemen. Sehingga elemen tersebut
akan berpindah sesuai isi dari property float. Permasalahan yang muncul adalah float
merusak alur dari halaman. Ketika menggunakan properti float, elemen-elemen lain
akan menjadi mengikuti aturan kiri atau kanan dari float. Salah satu cara umum
yang dilakukan untuk mengatasi permasalahan float adalah penggunaan
clear:both;.
2. Permasalahan lain muncul setelah penggunaan style clear:both; . Jika kita tidak
mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka style
clear:both tidak akan dapat bekerja dengan baik. Metode lain untuk
membersihkan float ialah dengan menggunakan teknik “clear fix”.
3. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan
menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama
“Grid” pada dunia web. Sebagai garis pembantu dalam menyusun elemen, Grid
dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan
elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian
Grid umumnya dilakukan untuk menyusun elemen secara merata.
H. Daftar Pustaka
Sidik, Betha. 2012. Pemrograman Web dengan HTML revisi keempat.
Bandung:Informatika.
Modul Pratikum Pemrograman Berbasis Web 3 Desain Web (Layout dan Menu).
2015. Pendidikan Teknik Informatika. Universitas Negeri Malang
http://rumahdot.com/web-programming/mengenal-elemen-elemen-html5-yang-
sering-digunakan/ (diakses tanggal 28 Februari 2014)
http://tokotuaforex.blogspot.com/2012/10/struktur-baru-html-5.html (diakses
tanggal 28 Februari 2014)
http://blogedek.blogspot.com/2012/01/perintah-dan-fungsi-tag-pada-html.html
(diakses tanggal 28 Februari 2014)