Jurnal Perkuliahan 3

Pengantar Teknologi Web: HTML, CSS, dan JavaScript

Ketika memutuskan untuk mengembangkan aplikasi menggunakan bahasa pemrograman apa pun, salah satu masalah pertama yang dihadapi adalah bahwa bahasa pemrograman tidak menyertakan perpustakaan untuk membuat antarmuka pengguna. Kita perlu menggunakan beberapa kerangka kerja untuk mengakses lapisan OS. Setiap bahasa pemrograman memiliki setidaknya satu, tetapi kita perlu memilihnya terlebih dahulu. Salah satu hal yang bagus tentang pengembangan untuk web adalah web menyediakan kerangka kerja yang sangat kaya dan sederhana untuk membuat aplikasi yang mencakup banyak fitur, bukan hanya antarmuka tetapi juga akses ke perangkat (audio, input, gamepad, dll.), dan API ini sangat mudah digunakan.


Tujuan:

  • Pengantar Teknologi Web:
    -     HTML untuk membuat struktur dokumen dan konten
    - CSS untuk mengontrol aspek visual
    - JavaScript untuk interaktif


Apa yang Perlu Disiapkan:

  • Browser web yang baik (Chrome atau Firefox)
  • Kode HTML contoh untuk memulai
  • Editor teks yang baik seperti Editplus (Windows), VSCode (platform lintas), textWrangler (macOS), vim (Unix), atau sublime text (platform lintas)


Bagaimana Cara Menguji Kode:

  • Buka file index.html dari template di editor teks Anda dan di browser Anda.
  • Ketika melakukan perubahan pada kode, periksa di browser dengan menekan F5 (refresh halaman).
  • Untuk membuka perangkat pengembang, tekan:
    - Windows: Control + Shift + I atau F12
    - macOS: Command + Opt + I
  • Alat lain adalah editor online seperti scratchpad atau htmledit


Anatomi Sebuah Browser:

Dalam sebuah browser, ada beberapa bagian yang berbeda. Yang kita minati adalah dua di antaranya:

  • Mesin Rendering (bertanggung jawab atas mengubah HTML+CSS kami menjadi gambar visual).
  • Interpreter JavaScript (juga dikenal sebagai VM), bertanggung jawab untuk menjalankan kode JavaScript.


Teknologi:

  • HTML
  • CSS
  • JavaScript


Browsers sebagai pengurai:

Browser bertindak sebagai pengurai yang mengambil dokumen dan membuat representasi visual dari mereka. Dimulai dengan yang paling sederhana, dokumen teks, browser akan mencoba memvisualisasikannya. Anda bisa mencoba, tarik file .txt ke browser Anda untuk memvisualisasikannya. Masalahnya adalah dokumen teks tanpa pemformatan cenderung sulit dibaca oleh pengguna (dan cukup membosankan). Itulah sebabnya HTML diciptakan, untuk memberikan teks beberapa format.


Bahasa Markup:

Ada banyak bahasa markup yang menambahkan tag khusus ke dalam teks yang pengurai tidak akan menampilkan tetapi digunakan untuk mengetahui cara menampilkan teks. Dalam HTML, tag-tag ini menggunakan notasi berikut:

"My name is <b>Javi</b>"


HTML:

HTML berarti Hyper Text Markup Language. HTML memungkinkan kita untuk menentukan struktur dokumen atau situs web. HTML BUKAN bahasa pemrograman, itu adalah bahasa markup, yang berarti tujuannya adalah memberikan struktur pada konten situs web, bukan untuk mendefinisikan algoritma. Ini adalah serangkaian tag bersarang (ini adalah subset XML) yang berisi semua informasi situs web (seperti teks, gambar, dan video). Berikut adalah contoh tag:

"<title>This is a title</title>"


Aturan Dasar HTML:

Beberapa aturan tentang HTML:

  • Menggunakan sintaks XML (tag dengan atribut, bisa berisi tag lain).
  • Menyimpan semua informasi yang harus ditampilkan kepada pengguna.
  • Ada berbagai elemen HTML untuk berbagai jenis informasi dan perilaku.
  • Informasi disimpan dalam struktur mirip pohon (node yang berisi node di dalamnya) yang disebut DOM (Document Object Model).
  • Memberikan struktur semantik pada dokumen (ini adalah judul, ini adalah bagian, ini adalah formulir) yang bermanfaat bagi komputer untuk memahami konten situs web.
  • Tidak boleh berisi informasi terkait dengan bagaimana hal itu harus ditampilkan (informasi itu milik CSS), jadi tidak ada informasi warna, ukuran font, posisi, dll.


Contoh Sintaks HTML:

"<div id="main">


<!-- ini adalah komentar -->

Ini adalah teks tanpa tag.

<button class="mini">tekan saya</button>

<img src="me.png" />


 </div>"


DOM adalah pohon:

Setiap node hanya boleh memiliki satu induk, dan setiap node dapat memiliki beberapa anak, sehingga strukturnya mirip dengan pohon. Meskipun ada banyak tag dalam spesifikasi HTML, 99% situs web menggunakan subset tag HTML dengan kurang dari 10 tag, yang paling penting adalah:

  • <div>: kontainer, biasanya mewakili area berbentuk persegi panjang dengan informasi di dalamnya.
  • <img/>: gambar
  • <a>: tautan yang dapat diklik untuk pergi ke URL lain
  • <p>: paragraf teks
  • <h1>: judul (h2, h3, h4 adalah judul yang kurang penting)
  • <input>: widget untuk memungkinkan pengguna memasukkan informasi
  • <style>: untuk menyisipkan aturan CSS
  • <script>: untuk menjalankan Javascript
  • <span>: tag nol (tidak melakukan apa pun)


Tag HTML Utama:

  • <div>: kontainer, biasanya mewakili area berbentuk persegi panjang dengan informasi di dalamnya.
  • <img/>: gambar
  • <a>: tautan yang dapat diklik untuk pergi ke URL lain
  • <p>: paragraf teks
  • <h1>: judul (h2, h3, h4 adalah judul yang kurang penting)
  • <input>: widget untuk memungkinkan pengguna memasukkan informasi
  • <style>: untuk menyisipkan aturan CSS
  • <script>: untuk menjalankan Javascript
  • <span>: tag nol (tidak melakukan apa pun)


Tag HTML Menarik Lainnya:

Ada beberapa tag yang mungkin berguna:

  • <button>: untuk membuat tombol
  • <audio>: untuk memutar audio
  • <video>: untuk memutar video
  • <canvas>: untuk menggambar grafik dari JavaScript
  • <iframe>: untuk menempatkan situs web lain di dalam situs kita

CSS:

CSS memungkinkan kita untuk menentukan cara menyajikan (menggambar) informasi dokumen yang disimpan dalam HTML. Berkat CSS, kita dapat mengontrol semua aspek visualisasi dan beberapa fitur lainnya:
  • Warna: konten, latar belakang, batas
  • Margin: margin dalam, margin luar
  • Posisi: di mana meletakkannya
  • Ukuran: lebar, tinggi
  • Perilaku: perubahan saat mouse bergerak di atasnya


Contoh CSS:




Bidang CSS Umum:

Berikut adalah daftar bidang CSS yang paling umum dan contoh:
  • color: #FF0000; merah; rgba(255,00,100,1.0); //berbagai cara untuk menentukan warna
  • background-color: merah;
  • background-image: url('file.png');
  • font: 18px 'Tahoma';
  • border: 2px solid hitam;
  • border-top: 2px solid merah;
  • border-radius: 2px; //untuk menghilangkan sudut dan membuatnya lebih bulat
  • margin: 10px; //jarak dari batas ke elemen luar
  • padding: 2px; //jarak dari batas ke elemen dalam
  • width: 100%; 300px; 1.3em; //banyak cara yang berbeda untuk menentukan jarak
  • height: 200px;
  • text-align: tengah;
  • box-shadow: 3px 3px 5px hitam;
  • cursor: penunjuk;
  • display: inline-block;
  • overflow: tersembunyi;

Bagaimana Cara Menambahkannya:

Ada empat cara untuk menambahkan aturan CSS ke situs web Anda:
  • Memasukkan kode ke dalam tag style


  • Merujuk file CSS eksternal


  • Menggunakan atribut style pada tag

Comments

Post a Comment

Popular posts from this blog

Jurnal Perkuliahan 1

Dasar-Dasar Pemrograman Web Pemrograman web menggabungkan dua konsep penting: pemrograman dan web. Pemrograman adalah proses pembentukan instruksi atau perintah tertulis untuk program komputer. Ini melibatkan proses menulis, menguji, memperbaiki, dan memelihara instruksi tersebut. Program komputer dapat berupa aplikasi seperti Microsoft Word, Excel, Paint, dan lainnya. Web, di sisi lain, adalah media informasi yang dapat diakses melalui jaringan internet menggunakan perangkat lunak browser. Web mencakup berbagai informasi dalam berbagai bentuk, mulai dari teks, gambar, grafik, video, audio, hingga animasi. Pemrograman web melibatkan pembuatan instruksi untuk membuat program atau aplikasi berbasis internet yang dapat diakses melalui browser. Contoh aplikasi pemrograman web termasuk Gmail, Facebook, Tumblr, dan lainnya. Pemrograman web bukan sekadar tentang membuat situs web; ini melibatkan perencanaan, konseptualisasi, dan pemodelan pengiriman media elektronik melalui internet. Pemrogra
Read more

Jurnal Perkuliahan 2

Pengantar HTML HTML adalah bahasa markup standar untuk membuat halaman web. Singkatan HTML adalah Hyper Text Markup Language. HTML digunakan untuk menggambarkan struktur halaman web menggunakan markup. Element HTML adalah blok bangunan dari halaman HTML. Elemen-elemen HTML adalah komponen dasar dari halaman HTML. Mereka direpresentasikan oleh tag-tag. Penjelasan tentang HTML dan tag-tagnya sebagai berikut: Apa Itu HTML? HTML adalah bahasa penanda standar untuk membuat halaman web. Singkatnya, HTML adalah cara untuk menentukan struktur dan konten sebuah halaman web menggunakan markup. Elemen dan Tag HTML: Elemen HTML adalah komponen individual dari HTML, seperti paragraf, gambar, judul, dan lainnya. Masing-masing elemen memiliki tag yang menandai awal dan akhirnya. Misalnya, <p> adalah tag untuk paragraf. Struktur Halaman HTML : Halaman HTML biasanya terdiri dari beberapa bagian, termasuk <html>, <head>, <title>, dan <body>. <html> menandai awal dan a
Read more