Selamat datang diblog saya ( Welcome to my blog)
Showing posts with label Pemrograman Web. Show all posts
Showing posts with label Pemrograman Web. Show all posts

Friday, 24 March 2017

Dokumen HTML5

Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor
ataupun HTML Editor :

<! DOCTYPE HTML>
<html>
<head>
<title>Tes HTML5</title>
</head>
<body>
Selamat belajar HTML5
</body>
</html>

Berikut ini penjelasan dari dokumen HTML5 di atas :
o Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
o Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan
sebuah elemen dalam dokumen html.
o Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan
dengan </head>.
o Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya
pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk
menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang
diharuskan untuk ditulis.
o Pasangan <html>..</html> menyatakan awal dokumen HTML.
o Di dalam <html>..</html> terdapat pasangan <head>..</head> dan
<body>..</body>.
o Pasangan <head>..</head> menyatakan bagian judul dokumen HTML.
Isinya paling tidak berupa pasangan <tittle>..</tittle>.
o Pasangan <body>..</body> menyatakan bagian tubuh dokumen. Pada
contoh,
Selamat belajar HTML5

Struktur dasar dokumen HTML

Setiap dokumen HTML memiliki struktur dasar atau susunan file
sebagai berikut :

<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html>
dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah
bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag
<body>…</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari
halaman HTML dan tidak ditampilkan pada browser. Bagian ini
berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi
untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang
akan ditampilkan pada halaman web browser nantinya. Pada
bagian ini anada akan menuliskan semua jenis informasi berupa
teks dengan bermacam format maupun gambar yang ingin
sampaikan pada pengguna nantinya.

Aplikasi transfer file (FTP/File Transfer Protokol)

Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file
antara komputer kita dan komputer yang akan menjadi tempat halaman web/web
server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP
yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang
tercantum di bawah ini:
Windows
 WS_FTP
 CuteFTP
 AceFTP
 Filezilla
Macintosh
 Transmit
 Cyberduck
 Fetch

Aplikasi Internet

Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka
diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut
“browser”. Berikut ini beberapa aplikasi browser yang cukup populer :
 Windows:
o Internet Explorer
o Chrome
o Firefox
o Safari
o Opera
 Macintosh OS X:
o Safari
o Chrome
o Firefox
o Opera
 Browser perangkat bergerak (mobile)
o Mobile Safari (iOS)
o Android Browser (Android)
o BlackBerry Browser (RIM)
o Nokia Series 40 dan Nokia Browser for Symbian
o Opera Mobile dan Mini (installed on any device)
o Internet Explorer Mobile (Windows Phone)
o Silk (Kindle Fire)

Implementasi (page generation) dan pengujian (testing) web

Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web
site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah
dirumuskan pada tahap analisis.
Dalam tahap pengembangan ini, meliputi kegiatan:
Authoring, adalah istilah yang digunakan untuk proses
mempersiapkan konten untuk nantinya diunggah di Web, atau lebih
khusus, menandai konten dengan tag HTML yang menggambarkan
isi dan fungsinya.
Styling, dalam development web, penampilan halaman dalam
browser dikendalikan oleh aturan style yang ditulis dalam CSS (
Cascading Style Sheets )
Scripting dan pemrograman, ada bahasa pemrograman web
terkait diantaranya PHP, Ruby, Python, dan ASP.NET, yang
berjalan pada server dan mengolah data dan informasi sebelum
dikirim ke browser pengguna.

Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian
meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis
web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji
aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk
menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu
aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian
karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai
macam pengguna, berbagai macam sistem operasi, perangkat keras, browser,
protokol komunikasi, dll.
Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :
1. Pengujian fungsional dan operasional (fungsional and operational testing)
Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini.
Hasil keluaran aplikasi bergantung dari teknologi yang digunakan, baik itu
bahasa pemrograman maupun bahasa skrip yang digunakan.
Untuk menguji code HTML dan CSS yang digunakan dapat menggunakan alat
bantu W3C HTML Validation Service di http://validator.w3.org/ dan W3C CSS
Validation Service di http://jigsaw.w3.org/css-validator/
2. Pengujian navigasi (navigation testing)
Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan
navigasi yang ada di aplikasi. Navigasi berhubungan dengan link-link yang
terdapat didalam aplikasi.
Untuk menguji link dapat digunakan alat bantu W3C Link Checker Service di
http://validator.w3.org/checklink
3. Pengujian konfigurasi (configuration testing)
Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras
dan perangkat lunak pendukung. Pengujian ini dilakukan untuk menentukan
batas toleransi kebutuhan aplikasi akan perangkat lunak dan perangkat keras
pendukungnya.
4. Pengujian keamanan dan performansi (security and performance testing)
Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara
menguji aspek-aspek yang dapat menimbulkan gangguan keamanan aplikasi
maupun server. Keamanan aplikasi sangat bergantung pada teknologi
pengembangan website, konfigurasi server yang digunakan dan kelakuan sistem.
Pengujian performansi dapat dilakukan bersamaan dengan pengujian keamanan
aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari
performansi server dan aplikasi tersebut.

Anatomi Browser

Ketika pertama kali membuka browser web, biasanya dengan mengklik dua
kali pada icon di desktop komputer, halaman web yang telah ditetapkan
muncul. Halaman ini disebut sebagai halaman “home” atau halaman awal.
Dengan Mozilla Firefox misalnya, mungkin akan dibawa ke halaman awal
Mozilla atau ke halaman yang dipilih oleh penyedia layanan Internet. Tetapi
jika ingin, dapat dengan mudah mengubah halaman awal tersebut.
World Wide Web sampai saat ini adalah bagian yang paling populer dari
Internet. Setelah menghabiskan waktu di Web akan merasa bahwa tidak ada batas untuk apa yang dapat ditemukan. Web memungkinkan beragam
komunikasi, juga memungkinkan untuk mengakses dan berinteraksi dengan
teks, grafis, animasi, foto, audio dan video.
Jadi apa saja yang membentuk web ini? Pada tingkat yang paling sederhana,
Web secara fisik terdiri dari komputer pribadi atau perangkat mobile,
perangkat lunak web browser, sambungan ke penyedia layanan Internet,
komputer yang disebut server yang disebut hosting dan router dan switch
yang mengarahkan aliran informasi.
Ada banyak pilihan perangkat lunak server, tetapi dua yang paling populer
adalah Apache (perangkat lunak open source untuk server) dan Internet
Information Services (IIS ) dari Microsoft. Apache tersedia secara bebas
untuk komputer berbasis Unix dan dapat diinstal pada Mac menjalankan Mac
OS X. Ada versi Windows juga. Microsoft IIS adalah bagian dari keluarga
Microsoft.
Setiap komputer dan perangkat (modem, router, smartphone, mobil, dll) yang
terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari
Internet Protocol). Sebagai contoh, komputer yang dihosting google.com
memiliki alamat IP 173.194.34.99. Semua angka-angka tersebut dapat
memusingkan, untungnya ada Domain Name System (DNS) yang
dikembangkan untuk memungkinkan kita merujuk ke server dengan nama
domainnya, "google.com ", juga. Alamat IP numerik berguna untuk perangkat
lunak komputer, sedangkan nama domain adalah lebih mudah diakses oleh
manusia. Pencocokan nama domain ke alamat IP numerik masing-masing
adalah tugas dari server.
Hal ini dimungkinkan untuk mengkonfigurasi server web sehingga lebih dari
satu nama domain dipetakan ke satu alamat IP, sehingga memungkinkan
beberapa situs untuk berbagi server tunggal.
Sebuah halaman web adalah dokumen elektronik yang ditulis dalam bahasa
komputer yang disebut HTML, singkatan dari Hypertext Markup Language.
Setiap halaman web memiliki alamat yang unik, yang disebut URL atau Uniform Eerources Locator yang mengidentifikasi di mana web server yang
memuat dokumen web.
Sebuah website memiliki satu atau lebih halaman web terkait, tergantung
pada bagaimana itu dirancang. Halaman web pada situs yang dihubungkan
bersama melalui sistem hyperlink, memungkinkan untuk melompat di antara
halaman web dengan mengklik pada link.
Halaman Web bervariasi dalam desain dan konten, tetapi banyak
menggunakan format majalah tradisional. Di bagian atas halaman adalah
“header” seperti kop surat atau gambar banner, kemudian daftar item dan
artikel. Daftar item atau menu biasanya link ke halaman lain atau situs lain.
Kadang-kadang link ini disusun dalam daftar, seperti indeks. Dapat juga
kombinasi dari keduanya. Sebuah halaman web mungkin juga menggunakan
gambar sebagai link ke konten lainnya.
Bagaimana bisa membedakan mana teks yang ada tautan/link? Link muncul
dalam warna yang berbeda dari teks - biasanya dengan warna biru dan
sering digarisbawahi. Bila memindahkan kursor di atas link teks atau melalui
link grafis, perubahan icon dari panah ke tangan.
Web adalah media yang dinamis. Untuk mendorong pengunjung untuk
kembali ke sebuah situs, banyak penerbit web sering memperbarui konten.
Itulah yang membuat Web sangat menarik.

Thursday, 23 March 2017

Cascading Style Sheet video embed dari Youtube

Penyajian video juga bisa memanfaatkan elemen iframe yang dilinkkan ke
alamat video tertentu , misalnya www.youtube.com. Berikut adalah penerapan
CSS secara embed untuk menampilan video dari youtube.

<html>
<head>
<title>Test</title>
<style>
.videoWrapper { position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; }
.videoWrapper iframe { position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
</style>
</head>
<body>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349"
src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

Cascading Style Sheet pada tampilan Video

Untuk penerapan Cascading style shee pada elemen video dapat dituliskan
secara inline seperti contih berikut ini :

<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin:
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>

Cascading Style Sheet untuk menyisipkan Gambar

Adakala saat membuat halaman web yang berisi artikel diperlukan gambar
yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar
yang disisipka perlu diberi CSS.

<html>
<head>
<title>
CSS image placement
</title>
<style >
#headline1 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px; }
#headline2 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px; }
</style>
</head>
<body>
<div id="headline1">CSS (versi sekarang adalah CSS3)
banyak dilibatkan dalam dokumen Web.
Kegunaannya adalah untuk memformat dokumen.
Sebagai contoh, warna teks atau bahkan warna
latarbelakang bisa diatur melalui CSS.
</div>
<div id="headline2">Namun, tentu saja kegunaan CSS jauh
lebih

Cascading Style Sheet Gambar untuk Background

Seperti penambahan warna latar, penambahan gambar latar belakang juga
dilakukan dengan menggunakan dua properti, yaitu background dan
background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar,
relatif terhadap file CSS, sama seperti pada penambahan font.

div { background: url(“latar.png”);
background-image: url(“latar.png”);}

kesalahan tersebut bekerja, simpan dan jalankan kode Namun, penambahan
gambar dengan cara di atas akan memberikan masalah ketika ukuran gambar
tidak sama dengan ukuran elemen. Gambar akan ditampilkan berulangkali,
secara horizontal maupun vertikal, jika ukuran elemen lebih besar dari ukuran
gambar. Untuk dapat melihat bagaimana berikut :

<html>
<head>
<title>Background Image Goes Wrong</title>
<style type="text/css">
#utama{background-
image:url(kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id="utama">
</div>
</body>
</html>

Cascading Style Sheet pada tampilan gambar

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih
baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag
html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur
gambar dapat dituliskan secara inline seperti contoh berikut :

<img src="nama-file-gambar" width="lebar" height="tinggi"
alt="text" title="text" border="1" />

Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun
eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran
ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px
sehingga antar gambar terlihat ada jarak.

<! DOCTYPE HTML>
<html>
<head>
<tittle>Contoh CSS</tittle>
<style>
Img { Margin-top: 10px;
Float: left;
Clear: both;
width:200px;
height:200px;}
</style>
</head>
<body>
Contoh CSS pada gambar (img)<br>
<img src="brokoli.jpg" >
<img src="tomat.jpg">
<img src="paprika.jpg">
</body>
</html>

Definisi dan fungsi Cascading Style Sheet

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS
merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya
(style) tampilan website.
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk
mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur,
seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak,
bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen
HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML
dalam hal format dokumen web. Adanya CSS memudahkan kita untuk
mengatur dan memilih sebuah website dan tampilannya karena CSS
memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan
memberikan beberapa manfaat seperti berikut ini :
 Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
 Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
 Mudah untuk mengubah tampilan, hanya dengan mengubah file
CSS saja.
 Dapat berkolaborasi dengan JavaScript dan merupakan pasangan
setia HTML.
 Dapat digunakan dalam hampir semua jenis web browser.
CSS merupakan sebuah teknologi internet yang di rekomendasikan oleh World
Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di
standarisasikan, internet explorer dan Netscape merilis browser terbaru yang
mendukung standar CSS.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Host