HTML, CSS, dan, JavaScript
1. HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website(WebProgramming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML di disimpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah dijelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website, adapun yang dapat dilakukan dengan HTML adalah sebagai berikut:
- Membungkus elemen-elemen tertentu sesuai kebutuhan.
- Membuat heading atau format judul.
- Membuat tabel.
- Membuat List
- Menampilkan gambar/video.
- dll.
Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya, dengan HTML5 memungkinkan kita untuk membuat streaming video tanpa bantuan adobe flash. untuk tutorial cara membuat streaming video dengan HTML5 juga akan kita bahas pada buku tutorial belajar HTML dasar ini.
Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus menggunakan web browser dan file html di simpan dengan ekstensi .html (dot html).
Dasar-dasar HTML
Dasar-dasar HTML mencakup elemen-elemen dasar yang digunakan untuk struktur dasar dan konten halaman web. Berikut adalah beberapa dasar HTML:
a. Elemen HTML: HTML terdiri dari elemen-elemen dasar seperti tag, atribut, dan teks. Setiap elemen dimulai dengan tag dan dapat memiliki atribut yang memberikan informasi tambahan tentang elemen tersebut.
Contoh elemen HTML:
<tag>Nama Elemen</tag>
b. Struktur Dasar HTML: Setiap halaman HTML memiliki struktur dasar yang terdiri dari elemen-elemen seperti <html>, <head>, dan <body>. Elemen-elemen ini membantu browser memahami bagaimana halaman web seharusnya ditampilkan.
Contoh struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
c. Tag Heading dan Paragraf: Tag-heading (<h1> hingga <h6>) digunakan untuk menandai judul halaman atau bagian, sementara tag paragraf (<p>) digunakan untuk menandai paragraf teks.
Contoh penggunaan tag heading dan paragraf:
<h1>Judul Utama</h1>
<p>Ini adalah paragraf teks.</p>
d. Tag List: HTML mendukung list, baik ordered (<ol>) maupun unordered (<ul>). Setiap item dalam list diwakili oleh tag <li>.
Contoh penggunaan tag list:
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ul>
e. Atribut: Atribut memberikan informasi tambahan tentang elemen dan didefinisikan dalam tag pembuka. Contohnya, atribut href pada tag <a> digunakan untuk menentukan URL tautan.
Contoh penggunaan atribut:
<a href="https://www.example.com">Kunjungi
Example.com</a>
f. Tag Gambar: Tag <img> digunakan untuk menyisipkan gambar ke dalam halaman web.
Contoh penggunaan tag gambar:
<img src="gambar.jpg" alt="Deskripsi gambar">
Pengembangan web membutuhkan pemahaman yang kuat tentang tag, elemen, dan atribut, yang merupakan bagian penting dari struktur dokumen HTML. Ini adalah dasar dari setiap halaman web dan memungkinkan pengembang untuk merancang dan menyusun konten dengan cara yang terstruktur dan dapat diakses. Berikut adalah penjelasan tentang tag, elemen, dan atribut dalam konteks pengembangan web.
1. Tag
Tag adalah elemen dasar dalam HTML yang digunakan untuk menandai atau mengelompokkan bagian-bagian tertentu dari dokumen. Tag, yang biasanya terdiri dari tag pembuka dan tag penutup, menandai bagian tertentu dari dokumen. Paragraf dengan tag <p> dan judul dengan tag <h1> hingga <h6> adalah contoh tag dasar.
2. Elemen
Elemen adalah struktur dasar dokumen HTML dan menentukan bagaimana konten ditampilkan di browser. Elemen terdiri dari tag pembuka, konten, dan tag penutup, yang digunakan untuk menyelesaikan elemen. 3. Atribut
Atribut ditemukan di dalam tag pembuka dan biasanya memiliki nilai yang memberikan informasi tambahan tentang elemen. Atribut juga sering digunakan untuk mengonfigurasi atau menyesuaikan elemen tersebut. Sebagai contoh:
<img src="gambar.jpg" alt="Deskripsi gambar">
<a href="https://www.contohwebsite.com">Link ke contoh
website</a>
Dalam contoh di atas, src dan alt adalah atribut dari elemen
gambar (<img>), sementara href adalah atribut dari elemen
tautan (<a>).
Dengan menggunakan struktur HTML dengan benar, pengembang dapat membuat konten yang mudah dimengerti oleh browser dan mesin pencari, meningkatkan pengalaman pengguna dan dapat
ditemukan dengan lebih mudah.
Dokumen HTML yang valid memberikan sejumlah manfaat, termasuk konsistensi antar browser, perbaikan aksesibilitas, dan kinerja yang lebih baik.
2. CSS
CSS adalah kependekan dari "Cascading Style Sheets," yang sesuai dengan namanya merupakan bahasa gaya yang digunakan untuk desain web. Ini adalah bahasa yang digunakan untuk mendesain halaman web, menggunakan penanda seperti id dan class. Seiring perkembangan dunia pemrograman dan teknologi, CSS tidak hanya digunakan dalam HTML dan XHTML, tetapi juga dapat digunakan untuk mendesain tampilan aplikasi Android. CSS diakses menggunakan id atau class.
Fungsi dan Kegunaan CSS
CSS memiliki kemampuan untuk mengubah font, ukuran font, warna, dan format font. Selain itu, CSS juga dapat mengatur ukuran layout, lebar, tinggi, dan warna elemen, mengubah tampilan formulir, serta membuat halaman website yang responsif. Untuk mendesain font, Anda dapat mendefinisikan font yang diinginkan. Untuk mengatur warna, Anda bisa menggunakan properti `color`, sedangkan properti `margin` digunakan untuk mengatur jarak di luar elemen tertentu. Untuk mengatur warna atau gambar latar belakang, gunakan properti `background`. Untuk mengatur ukuran font, gunakan properti `font-size`, sedangkan untuk jenis font, gunakan properti `font-family`, dan masih banyak lagi properti CSS lainnya yang dapat Anda gunakan untuk mendesain halaman web.
Cara Penggunaan CSS
File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.
<link rel="stylesheet" type="text/css" href="style.css" />
dengan tag <link> seperti di atas di gunakan untuk menghubungkan file HTML dengan file CSS. Syntax di atas di letakkan pada file html. pada atribut rel dan type di tag link di atas digunakan untuk mendefinisikan bahwa yang di panggil atau yang di hubungkan adalah file Style sheet atau CSS. kemudian atribut href di gunakan untuk meletakkan letak file CSS. pada contoh di atas file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.
jika file css terletak di luar folder maka bisa menghubungkanya dengan
href="../style.css"
jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah ”assets“. maka untuk menghubungkannya
href="assets/style.css"
Belajar Dasar CSS: Cara Penulisan CSS
CSS (Cascading Style Sheet) adalah bahasa pemrograman web yang digunakan untuk mengatur tampilan dari elemen-elemen HTML. Dengan CSS, kita dapat mengatur ukuran, warna, dan bentuk elemen HTML, mengganti font, mengatur margin dan padding, serta melakukan banyak hal lainnya untuk mempercantik atau mendesain halaman website.
CSS menggunakan selector (id dan class) untuk menentukan elemen yang akan dimodifikasi atau diberi gaya CSS. Jika HTML diibaratkan sebagai struktur tiang pada sebuah bangunan rumah, maka CSS dapat diibaratkan sebagai cat dan dekorasi pada bangunan tersebut. Ada tiga teknik penulisan CSS:
- Inline CSS Style
- Internal CSS Style
- External CSS Style
3. JavaScript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995 dengan nama "LiveScript," sebagai bahasa sederhana untuk browser Netscape Navigator 2. Namun, bahasa ini awalnya mendapat kritik karena dianggap kurang aman, pengembangannya terburu-buru, dan tidak memberikan pesan kesalahan saat terjadi kesalahan dalam penulisan program.
Kemudian, seiring dengan kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman Java) pada saat itu, Netscape memberi nama "JavaScript" pada bahasa tersebut pada tanggal 4 Desember 1995. Pada saat yang sama, Microsoft juga mencoba mengadopsi teknologi ini dengan sebutan "Jscript" di browser Internet Explorer 3.
JavaScript adalah kumpulan skrip yang berfungsi dalam dokumen HTML. Sejarahnya mencatat JavaScript sebagai bahasa skrip pertama untuk web, yang memberikan kemampuan tambahan terhadap HTML dengan menjalankan perintah-perintah di sisi pengguna (client-side) daripada di sisi server web.
JavaScript dieksekusi oleh browser (navigator) saat memuat halaman web yang mengandung skrip JavaScript di dalam dokumen HTML. Bahasa ini tidak memerlukan kompilator atau interpreter khusus untuk menjalankannya, karena kompilator JavaScript sudah disertakan dalam browser itu sendiri. Berbeda dengan Java, yang memerlukan kompilator khusus untuk menerjemahkannya di sisi pengguna (client-side).
Tabel daftar navigator dan versi dari Javascript:
JavaScript memiliki perkembangan yang lambat dibandingkan dengan Java yang berkembang sangat cepat. Di JavaScript, kode skrip yang ditulis tidak dapat disembunyikan; kode tersebut ditulis langsung di dalam dokumen HTML dan mudah terlihat. Sementara itu, di Java, kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak bisa dilihat dari dalam dokumen HTML. Mesin virtual di sisi pengguna bertanggung jawab untuk menerjemahkan program di dalam applet setiap kali halaman HTML yang memuat applet tersebut dipanggil oleh browser. Dibandingkan dengan applet Java yang lambat dibuka oleh browser, JavaScript cukup cepat di-load oleh navigator.
JavaScript sendiri merupakan bahasa yang mudah dipahami. Diperlukan keterampilan dasar untuk memahami bahasa ini. Jika Anda sudah terbiasa dengan konsep bahasa pemrograman visual, Java, atau C, maka akan sangat mudah untuk memahami konsep JavaScript.
Bentuk skrip dari Javascript
Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript. Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut :
<SCRIPT language="Javascript">
letakkan script anda disini
</ SCRIPT>
Sumber:
Alamsyah, A. (2003). Pengantar javascript. Kuliah Umum IlmuKomputer. Com, 40.
Hadi, D. A. (2019). Ebook Belajar HTML & CSS Dasar.
MalasNgoding.
Mukhlis, Iqbal Ramadhani. dkk. (2023). Buku Ajar Pemrograman Web 1. Penerbit SONPEDIA.COM PT. Sonpedia Publishing Indonesia.
Tidak ada komentar:
Posting Komentar