Jurnal Perkuliahan 3 Pemrograman Web

 Nama : Fannisa Nurhaffifi

Kelas : PSTI A

NPM : 2215061009

Jurnal Perkuliahan 3

Introduction

Anatomy dari sebuah browser

Dalam sebuah browaser memiliki bagian yang berbeda-beda, ada part yang bertugas untuk rendering engine dan javascript interpreter. Rendering engine berfungsi untuk mengartikan HTML + CSS menjadi sebuah gambar visual, sedangkan Javascript Interpreter berfungsi untuk mengeksekusi kode javascriptnya. 

HTML (Hyper Text Markup Language)

HTML memungkinkan untuk menentukan struktur dokumen atau situs web. HTML bukan bahasa pemrograman, HTML adalah bahasa markup, yang berarti tujuannya untuk memberikan struktur pada konten situs web, bukan untuk mendefinisikan algoritma. Berikut adalah syntaks dari HTML

Berikut adalah Tags yang digunakan pada HTML :

• <div>: sebuah wadah, biasanya mewakili area persegi panjang dengan informasi di dalamnya.
• <img/>: sebuah gambar
• <a>: tautan yang dapat diklik untuk menuju ke URL lain
• <p>: paragraf teks
• <h1>: judul (h2,h3,h4 adalah judul yang kurang penting)
• <input>: widget yang memungkinkan pengguna memasukkan informasi
• <style>: untuk menyisipkan aturan CSS
• <script>: untuk menjalankan Javascript
• <span>: tag null (tidak melakukan apa pun)
• <button>:untuk membuat tombol
• <audio>: untuk memutar audio
• <video>: untuk memutar video
• <canvas>: untuk menggambar grafik dari javascript
• <iframe>: untuk memasukkan situs web lain ke dalam situs kami

CSS 

CSS memungkinkan kita menentukan cara menyajikan (render) info dokumen yang disimpan dalam HTML. Berkat CSS kita dapat mengontrol semua aspek visualisasi dan beberapa fitur lainnya: 

• Warna: konten, latar belakang
• Margin: margin interior, margin eksterior
• Posisi: di mana meletakkannya
• Ukuran: lebar tinggi 
• Perilaku: perubahan saat mouse di atas

Berikut adalah contoh dari CSS

Berikut adalah lingkup dari CSS

• color: #FF0000;
•  background-color: merah;
• gambar latar belakang: url('file.png');
• font :18px 'Tahoma';
• border: 2 piksel hitam pekat;
• border-top:2 piksel merah pekat;
• border-radius:2 piksel;//untuk menghilangkan sudut dan membuatnya lebih bulat
• margin:10 piksel; //jarak dari batas ke elemen luar
• padding:2 piksel; //jarak dari perbatasan ke elemen dalam
• width:100%; 300 piksel; 1,3em; //banyak cara berbeda untuk menentukan jarak
• height:200 piksel;
• text-align: tengah;
• box-shadow:3px 3px 5px hitam;
• cursor:penunjuk;
• display:blok sebaris;
• overflow:tersembunyi;

JavaScript

JavaScript adalah Bahasa pemrograman biasa yang mudah untuk memulai,sulit untuk dikuasai. JavaScript memberikan beberapa interaktivitas ke elemen di web. Sintaksnya mirip dengan C atau Java tetapi. Ada tiga cara untuk mengeksekusi kode javascript di situs web:

• Menanamkankode dalam HTML menggunakan tag <script>.

            <script>/* some code */</script>

• Impor file Javascript menggunakan tag <script>:

            <script src="file.js" />

• Memasukkan kode pada suatu peristiwa di dalam tag:

            <button onclick="javascript:/*code*/">press me</tombol>

Berikut adalah syntaks dari JavaScript

Berikut adalah contoh dari HTML, CSS, dan JavaScript pada sebuah website :

Jurnal Perkuliahan Pertemuan Kedua, Pemrograman WEB

 Nama : Fannisa Nurhaffifi

NPM : 2215061009
Kelas :PSTI A

Apa itu HTML

HTML adalah Bahasa standar yang digunakan untuk membuat halaman website, HTML adalah singkatan dari hyper text markup language. HTML menjelaskan mengenai struktur dari halaman sebuah website. Elemen-elemen HTML diwakilkan oleh tags atau penanda. Elemen adalah komponen individual dari HTML yang Dimana elemen-elemen mengandung paragraph, image, dan header. Selain itu tag atau penanda berada pada bagian awal dan akhiran dari elemen HTML.

 

Anatomy dari elemen HTML

Atribut

- Memberikan informasi tambahan tentang elemen HTML

- Kelas, ID, bahasa, gaya, identitas, sumber

- Ditempatkan di dalam tag pembuka, sebelum braket sudut kanan.

Nilai

- Nilai adalah nilai yang diberikan pada atribut tertentu.

- Nilai harus diapit oleh tanda kutip.

 

-        <!DOCTYPE>

Deklarasi <!DOCTYPE> mewakili tipe dokumen, dan membantu browser untuk  menampilkan halaman web dengan benar. Deklarasi <!DoCtYpE> tidak peka huruf besar-kecil. Deklarasi <!DOCTYPE> untuk HTML5 adalah <!DOCTYPE html> Setelah <!doctype>, konten halaman harus berada di antara tag <html>. Kepala berisi judul halaman & informasi meta tentang halaman tersebut.

 

-        Nesting

Semua elemen "nesting" di dalam satu sama lain yang Dimana bersarang atau nesting adalah apa yang terjadi ketika meletakkan tag di dalam tag lainnnya.  Misalnya ketika diletakkan tag <p> di dalam tag <body> sehingga tag <p> akan bersarang di dalam tag <body>.  Judul pada html didefinisikan dengan tag <h1> hingga <h6> yang mana <h1> mendefinisikan judul yang paling penting dengan font yang besar hingga <h6> mendefinisikan judul yang paling tidak penting dengan font yang semakin mengecil. Tautan HTML dapat didefinisikan dengan tag <a> dan tujuan tautan menggunakan atribut href serta atribut target yang digunakan untuk menentukan tempat untuk membuka dokumen tertaut.

 

-        Headings

Heading HTML didefinisikan dengan tags <h1> sampai <h6>, dari <h1> paling penting ke <h6> yang paling terakhir. Contohnya adalah sebagai berikut.

 

-        Paragraphs

Paragraph pada HTML didefinisikan dengan tag <p>, contohnya adalah sebagai berikut

Preformatted Text

Teks di dalam elemen <pre> ditampilkan dalam font dengan lebar tetap (biasanya Courier), dan mempertahankan spasi dan jeda baris. contohnya sebagai berikut

Links

HTML links didefinisikan dengan tag <a>., dan destinasi dari linknya menggunakan atribut "herv" contohnya adalah seperti ini:

Images

HTML images didefinisikan dengan tag <img>. File sumber (src), teks alternatif (alt), lebar, dan tinggi disediakan sebagai atribut.

Tables

Tabel adalah cara untuk merepresentasikan informasi kompleks dalam format grid. Tabel dapat ditata dengan CSS untuk menambahkan garis zebra atau untuk menyorot baris/kolom penting. Fungsionalitas tambahan dapat ditambahkan ke tabel seperti memfilter atau mengurutkan baris dan kolom.

Comments

menambahkan komentar pada code yang tidak akan terlihat oleh browser, tetapi hanya terlihat saat melihat kode tersebut. Komentar dapat digunakan untuk:

- atur code menjadi beberapa bagian

- 'memberi komentar' sejumlah besar kode untuk menyembunyikannya dari browser.

Jurnal Perkuliahan Pemrograman Web

 Nama : Fannisa Nurhaffifi

Kelas : PSTI A

NPM  : 2215061009

• Internet

INTERnational NETworking Merupakan 2 komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia (internasional), yang saling berinteraksi dan bertukar informasi. Sedangkan INTERconnected NETworking adalah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.

• WWW (world wide web)

Adalah salah satu bentuk layanan yang dapat diakses melalui internet. Biasa disingkat sebagai Web. WEB Merupakan sekumpulan dokumen, gambar-gambar, dan bentuk resources yang lainnya yang dihubungkan melalui hyperlinks dan URLs.

• Protokol

Merupakan bahasa/software standar untuk mengatur komunikasi jaringan komputer. ТСР/Р (Transmission Control Protocol Internet. Protocol) merupakan cara standar untuk mempaketkan dan menyelamatkan data komputer (sinyal elektronik) sehingga data tersebut dapat dikirim ke komputer yang lain.

• HTTP (Hypertext Transfer Protocol)

Adalah protokol yang menentukan aturan yang perlu dikuti oleh web browser dalam meminta dan mengambil suatu dokumen dan oleh web server dalam menyediakan dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML

• URL (Uniform Resource Locator)

digunakan untuk menentukan lokasi informasi pada suatu web server. dapat diibaratkan sebagai suatu alamat, yang terdiri dari:

1. Protokol yang digunakan oleh suatu browser untuk mengambil informasi
2. Nama komputer (server) dimana informasi tersebut berada
3. Jalur/path serta nama file dari suatu informasi

• Protokol Transfer

adalah protokol yang digunakan untuk pengiriman informasi di internet. Beberapa protokol transfer:

1. HTTP • protokol standar untuk suatu dokumen web
2. TP (File Transfer Protocol) • digunakan untuk mentransfer file dalam format text atau binary dalam suatu server komputer dinternet.
3. Gopher • digunakan untuk mengakses server gopher yang menyediakan informasi dengan menggunakan suatu sistem menu atau melalui hubungan telnet.
4. News NNTP (Network News Transfer Protocol) • digunakan untuk mendistribusikan berita di USENet. USENet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut news-group.
5. Telnet • digunakan untuk login ke suatu server komputer.

• DNS (Domain Name System)

Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tuiuan untuk mempermudah pengelolaan server komputer internet. Merupakan suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet.

• Homepage

Website (situs web) • merupakan alamat (URL) yang berfungsi sebagai tempt penyimpanan data dan informasi dengan berdasarkan topik tertentu. Web Page (halaman web) • merupakan halaman khusus dari situs web tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik it dalam page yang sama ataupun web page lain pada website yang berbeda. Home page merupakan sarana dasar untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau pribadi.

• Server dan Cliennt

Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu:

1. Server  penyedia berbagai layanan termasuk web. Layanan web ditangani oleh sebuah aplikasi bernama web server.
2. Client bertugas mengakses informasi yang disediakan oleh server. Pada layanan web, client dapat berupa web browser.

• Server-side Programming

Programming O web server melakukan parse dan eksekusi sehingga script embedded dalam halaman web Contoh: CGI/Perl, ASP, JSP, PHP, CFM

• Client-side Programming

Programming O web browser melakukan parse dan eksekusi sehingga script embedded dalam halaman web Contoh: JavaScript, HTML VBScript




Perkembangan Website

Website pertama kali ditemukan oleh sir Timothy John dan Tim Berners Lee. tahun 1991 website sudah terhubung dengan jaringan. dari tujuan dibuat nya website pada saat itu yakni untuk mempermudah tukar menukar dan mempengaruhi informasi kepada sesama peneliti di tempat mereka bekerja. oleh sebab itu pengertian dari website itu sendiri saat itu masih sebatas tukar menukar informasi bukan pengertian website secara terminologi. World Wide Web, yang lebih populer disingkat dengan WWW merupakan satu buah ruang informasi yang digunakan oleh pengenal global yang dinamakan dengan URL (Uniform Resource Locator) untuk mengenal pasti sumber daya berguna. WWW tidak jarang dianggap sama dengan Internet dengan cara total, meski sebenarnya WWW sendiri hanyalah bagian daripada Internet. baca juga sejarah internet. WWW merupakan kumpulan situs server dari seluruh dunia yang memiliki kegunaan untuk menyediakan data & info untuk bisa digunakan bersama. WWW sektor yang paling menarik dari Internet. Lewat web, para customer bisa terhubung informasi-informasi yang tidak hanya berupa teks namun mampu pula berupa gambar, nada, video & animasi.

• WEB 1.0

web 1.0 adalah merupakan teknologi web yang pertama kali digunakan dalam aplikasi world wide web, atau ada yang menyebut web 1.0. sebagai www itu sendiri yang banyak digunakan dalam situs web yang bersifat personal.
Beberapa ciri atau karakteristik web 1.0. adalah:
1. Merupakan halaman web yang statis atau hanya berfungsi untuk
menampilkan.
2. Halaman masih didesain sebagai html murni, yang ‘hanya’
memungkinkan orang untuk melihat tanpa ada interaksi
3. Biasanya hanya menyediakan semacam buku tamu online tapi tidak
ada interaksi yang intens
4. Masih menggunakan form-form yang dikirim melalui e-mail, sehingga
komunikasi biasanya baru satu arah.

• Web 2.0

Web 2.0, adalah sebuah istilah yang dicetuskan pertama kali oleh O’Reilly Media pada tahun 2003, dan dipopulerkan pada konferensi web 2.0 pertama di tahun 2004, merujuk pada generasi yang dirasakan sebagai generasi kedua layanan berbasis web seperti situs jaringan sosial, wiki, perangkat komunikasi, dan folksonomi yang menekankan pada kolaborasi online dan berbagi antar pengguna.
Prinsip-prinsip Web 2.0
1. Web sebagai platform.
2. Data sebagai pengendali utama.
3. Efek jaringan diciptakan oleh arsitektur partisipasi.
4. Inovasi dalam perakitan sistem serta situs disusun dengan menyatukan fitur dari pengembang yang terdistribusi dan independen
(semacam model pengembangan “open source”).
5. Model bisnis yang ringan, yang dikembangkan dengan gabungan isi
dan layanan.
6. Akhir dari sikllus peluncuran (release cycle) perangkat lunak
(perpetual beta).
7. Mudah untuk digunakan dan diadopsi oleh user.

 Referensi

Penggunaan Teknologi Web 2.0 dan Dampak Perubahannya pada Aplikasi Website berbasis Rich Internet Application (RIA)

Pengembangan dan Pembuatan Website: Sebuah Tinjauan Literatur