Website





Haii... apa kabar semuanya.. 
Pada postingan saya kali ini, masih berhubungan dengan tugas dari dosen saya tetapi dengan mata kuliah yang berbeda, pada postingan saya kali ini mengenai mata kuliah  "Pengantar Web Science". pada mata kuliah ini kita akan mengetahui bagaimana proses pembuatan website yang pada umumnya. tapi sebelum kita membuat website kita harus tau terlebih dahulu apa si yang di maksud dengan website itu sendiri dan dengan apa si kita dapat membuat website. nahh.. pada postingan kali ini kita akan membahas itu semua secara detail dan jelas. yukk.. mari kita pelajari!

Website 

Situs web (bahasa inggris : website) adalah suatu halaman web yang saling berhubungan yang umunnya berada pada peladen yang sama berisiskan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah lokal (LAN) melalui alamat internet yang dikenali sebagai URL. gabungan atas semua situs yabf dapat di akses publik internet disebut pula sebagai World Wide Web atau lebih dikenal dengan singkatan WWW.

Sebuah halaman web merupakan berkasyang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XTML kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada monitor komputer

Penemu situs web adalah Sir Timothy John "Tim" Berners-Lee, sedangkan situs web yang tersambung dengan jaringan pertamakali muncul pada tahun 1991. Maksud dari Tim ketika merancang situs web adalah untuk memudahkan tukar menukar dan memperbarui informasi pada sesama peneliti di tempat ia bekerja. Pada tanggal 30 April 1993, CERN (tempat di mana Tim bekerja) mengumumkan bahwa WWW dapat digunakan secara gratis oleh publik.


Secara garis besar, situs web bisa digolongkan menjadi 3 bagian yaitu:

  • Situs web statis
  • Situs web dinamis
  • Situs web interaktif

Elemen – elemen yang di butuhkan untuk membangun website yaitu :



1. HTML


hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.


 Kegunaanya yaitu dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Kegunaan lainnya yaitu mengintegerasikan gambar dengan tulisan, membuat pranala, mengintegerasikan berkas suara dan rekaman gambar hidup dan membuat form interaktif.

Contoh Program Sederhana HTML :

Untuk HTML 4 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head bgcolor=black text=white>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Untuk HTML 5


<!DOCTYPE HTML>
<html>
 <head style="background-color: black; color: white;">
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>


Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh:
<meta name="author" content="ubuntu-online">

Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
  • ·         Tag awal, dinyatakan dalam bentuk <nama tag>
  • ·         Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.

2.    CSS


  Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

 CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. dengan CSS3 desiner lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. selain itu, banyak fitur baru pada CSS3 seperti : multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Objct Model

Contoh penggunaan CSS yaitu :

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

</body>
</html>

 3. PHP

Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:
  • Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya.
  • Web Server yang mendukung PHP dapat ditemukan di mana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.
  • Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.
  • Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.
  • PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.
PHP memiliki 8 tipe data, yaitu
  • Boolean
  • Integer
  • Float/ Double
  • String
  • Array
  • Objec
  • Resource
  • NULL
Contoh Program PHP

Membuat Sebuah Halaman Web PHP
Sebuah Halaman web yang ditulis menggunakan bahasa pemogramanPHP adalah sebagai berikut:

<?php
    echo "Halo dunia";
?>

Program bilangan Fibonacci

Berikut ini adalah contoh program yang relatif lebih kompleks yang ditulis dengan menggunakan PHP. Contoh program ini adalah program untuk menampilkan 20 bilangan pertama dari deret bilangan Fibonacci .terdapat beberapa variable atau sintax. seperti function. itu merupakan bagian dari javascript.

<?php
function fibonacci_seq( $panjang ) {
   for( $l = array(0,1), $i = 2, $x = 0; $i < $panjang; $i++ ) {
        $l[] = $l[$x++] + $l[$x];
   }
   return $l;
}


fibonacci_seq(20);
// Angka "20" dapat diganti sesuai keinginan
?>

4. Java Script


JavaScript adalah  bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer  (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

Penulisan JavaScript
Variabel di JavaScript dapat dipanggil dengan menggunakan kata kunci var

var x;
var y = 2;
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type="text/javascript">.
<script type="text/javascript">
        alert("Halo Dunia!");
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type="text/javascript" src="alamat.js">
</script>

Skrip di head
Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.

<html>
<head>
<script type="text/javascript">
...
</script>
</head>
</html>

Skrip di body

 Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body>. ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>

</html>

 Jumlah JavaScript Mhead> dan <body> yang ditempatkan pada dokumen tidak terbatas

Skrip eksternal

Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js  document.write("pesan ini tampil ketika halaman diload")
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya

<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>Script di atas berada di berkas "xxx.js" (eksternal) </p>
</body>
</html>

Sumber :

https://id.wikipedia.org/wiki/Situs_web

https://id.wikipedia.org/wiki/HTML
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://id.wikipedia.org/wiki/PHP
https://id.wikipedia.org/wiki/JavaScript


Comments

Post a Comment

Popular Posts