HTML/CSS
APA ITU HTML?
HTML adalah bahasa markup untuk membuat halaman web. Kepanjangan dari HTML adalah Hypertext Markup Language. Artinya, HTML menggunakan simbol tertentu yang nantinya akan diterjemahkan oleh browser ke halaman web.
Dengan menggunakan tag-tag HTML, Anda dapat membangun struktur halaman, menambahkan konten seperti teks dan gambar, serta memberikan format dan tata letak pada website. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Untuk membuat file HTML, harus mengikuti standar atau format khusus. Format ini tertuang dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange).
SEJARAH HTML
Sejarah HTML pertama kali dikembangkan oleh Tim Berners-Lee, ilmuwan dari organisasi European Organization for Nuclear Research (CERN) pada tahun 1990. Awalnya, markup language diciptakan oleh IBM, perusahaan hardware dan software asal Amerika Serikat
Sejak tahun 1991, Tim Berners-Lee, yang juga penemu world wide web (WWW), mengembangkan HTML sebagai solusi untuk memudahkan para ilmuwan CERN dalam mengakses dokumen satu sama lain. Barulah di tahun 1993, bahasa markup ini meluncur resmi ke publik dan berkembang menjadi berbagai versi hingga saat ini. Sampai saat ini HTML5 menjadi versi yang paling update dengan sistem yang paling canggih.
Popularitas HTML versi terbaru ini pun sangat pesat. Bahkan, saat ini ada 87,4 persen website yang sudah menggunakan HTML5. Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web (WWW). WWW dan HTML adalah dua aspek yang saling berhubungan. Karena, HTML adalah dasar untuk membuat halaman website, yang nantinya ditampilkan pada WWW.
FUNGSI HTML
Fungsi HTML adalah untuk mengatur tampilan halaman web. Terutama menyusun teks seperti paragraf dan heading, hingga menambahkan link dan gambar. Berikut adalah beberapa fungsi HTML lainnya:
1. Membuat Struktur Halaman Web
Fungsi utama HTML adalah untuk membangun struktur halaman web. Mulai dari membuat header, footer, navigasi, hingga kontennya. Peran HTML juga sebagai pondasi halaman web. Sebab, untuk menerapkan beberapa bahasa pemrograman maupun bahasa lainnya seperti CSS dan JavaScript, website membutuhkan struktur yang dibangun dari HTML.
2. Menambahkan Konten Website
Selain membuat struktur, Anda juga bisa memasukkan gambar di HTML dan menambah konten pada halaman web. Sebab, bahasa markup ini memungkinkan Anda menyisipkan ilustrasi dan video, membuat tabel HTML, dan memasukkan media lainnya. Misalnya, dengan menggunakan tag <p> untuk menambah paragraf, tag <img> untuk memasukkan gambar.
3. Mengatur Format dan Tata Letak
Berikutnya, HTML memungkinkan Anda mengatur format dan mengatur tata letak konten dalam halaman web. Seperti memilih ukuran dan jenis huruf, menentukan warna huruf dengan berbagai kode warna HTML, serta mengatur tata letak konten pada website. Semisal untuk menandai kalimat cetak tebal, gunakan kode HTML <bold>. Sedangkan untuk memiringkan tulisan, gunakan tag <italic>.
4. Mengarahkan Pengguna ke Halaman Website Lain
HTML juga berfungsi mengarahkan pengguna ke halaman atau website lain menggunakan link tertentu. Link ini bisa disematkan ke dalam teks tertentu, alias sebagai anchor text.
Cara membuat hyperlink dengan kode HTML yaitu menggunakan tag <a>. Misalnya:
<a href="https://www.niagahoster.co.id/blog/peluang-bisnis-online/">Peluang Bisnis Online</a>Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang saling berhubungan dengan halaman yang sedang dibaca. Anda juga bisa mengarahkan mereka ke landing page tertentu..
MENGENAL KOMPONEN HTML
Setelah mengetahui bagaimana sejarah dan fungsi HTML, sekarang Anda perlu tahu komponen yang terdapat pada bahasa markup ini. Secara umum komponen HTML terdiri dari Tag, Elemen, dan Atribut.
1. Tag
Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Tag dibuat dengan menggunakan kurung siku <…>, di mana di dalamnya berisi nama tag. Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, italic, dan lainnya. Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan format tebal. Selain itu, tag ditulis secara berpasangan, yaitu tag pembuka dan tag penutup. Pada tag penutup ditambahkan garis miring (/) di depan nama tag. Tag HTML sendiri awalnya hanya berjumlah 18. Hingga saat ini sudah ada lebih dari 250 tag. Banyak juga, ya. Namun, Anda tak perlu menghafal semua tag yang ada.
Anda hanya perlu mengingat beberapa contoh HTML untuk pemula berikut ini:
- <html>, untuk memulai membuat halaman HTML yang mencakup semua konten dan elemen.
- <head>, untuk membuat halaman HTML yang mencakup tampilan deskripsi di hasil pencarian Google, style konten (CSS), dan lainnya.
- <title>, untuk membuat judul website
- <body>, untuk membuat isi website
- <h1> <h2> sampai <h6> , untuk mengatur heading konten
- <p> , untuk membuat paragraf.
2. Elemen
Elemen merupakan komponen HTML yang berupa keseluruhan kode dari tag pembuka hingga tag penutup. Elemen terdiri dari teks dan simbol yang berupa tag pembuka, isi tag atau konten, dan tag penutup. Contohnya: <bold>Belajar HTML</bold> Pada sebuah elemen juga bisa berisi elemen lainnya. Jadi elemen tersebut tak hanya berisi satu tag saja, tetapi banyak tag. Elemen itu disebut nested elements. Sebagai contoh, simak kode berikut:
<html>
<body>
<h2>Judul Heading</h2>
<p>Paragraf pertama artikel.</p>
</body>
</html>
Jika diperhatikan elemen HTML tersebut, dari tag pembuka <html> lalu tag <body> yang berisi elemen tag heading dan elemen tag paragraf.
3. Atribut
Atribut adalah informasi atau perintah tambahan yang berada dalam elemen. Atribut ini berfungsi sebagai penjelas perintah tag pada elemen. Misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>. Tag <img> memiliki atribut khusus yaitu (scr) dan (alt) yang artinya browser harus menampilkan gambar.jpg dengan alt text “Bunga Matahari”.
Dari contoh di atas, dapat diketahui juga kalau jumlah atribut dalam sebuah tag bisa lebih dari satu. Meski demikian, tidak semua atribut bisa digunakan dalam sebuah tag. Berikut ini jenis atribut khusus beberapa tag:
Misalnya , (onload) saat loading selesai, (onoffline) saat tiba-tiba offline, (onresize) ukuran jendela. Atribut tersebut disebut dengan atribut event. Atribut tersebut nantinya akan diimplementasikan dengan JavaScript. Sehingga halaman website dapat melakukan aksi tertentu.
APA ITU CSS?
CSS adalah singkatan dari cascading style sheets, bahasa tampilan website yang berguna untuk mengelola elemen website seperti font, warna background, hingga layout.
Di dunia web development, CSS digunakan bersama dengan HTML atau XML yang merupakan bahasa markup. Bahkan, menurut sejarahnya, CSS diciptakan agar coding menggunakan HTML menjadi lebih praktis sehingga pekerjaan developer kian mudah.
Ceritanya, pada tahun 1996, Hakon Wium Lie yang saat itu bekerja di CERN menciptakan bahasa style ini. Jadi, CSS bukan bahasa pemrograman, ya.
Sebelum adanya CSS, perubahan format tampilan seperti warna dan jenis font harus dilakukan berulang-ulang. Itu berarti web developer harus selalu menuliskan tag elemen di semua halaman HTML yang dibuat.
SEJARAH CSS
Tahun 1994 Hakon Wium Lie bekerja di CERN yang merupakan sebuah perusahaan dimana tempat lahirnya Web dan Web mulai digunakan sebagai platform untuk penerbitan elektronik. Namun, satu bagian penting dari platform web yaitu adalah tidak ada cara untuk menata dokumen seperti tidak adanya cara untuk menggambarkan tata letak seperti surat kabar di halaman Web.
Setelah mengerjakan presentasi surat kabar yang dipersonalisasi di MIT Media Laboratory, Hakon melihat kebutuhan akan bahasa style sheet untuk Web. Style sheet di browser bukanlah ide yang sama sekali baru. Pemisahan struktur dokumen dari tata letak dokumen telah menjadi tujuan HTML sejak awal tahun 1990. Tim Berners-Lee menulis browser/editor NeXT-nya sedemikian rupa sehingga Tim Berners-Lee dapat menentukan gaya dengan lembar gaya sederhana. Namun, Tim Berners-Lee tidak mempublikasikan sintaks untuk lembar gaya, mengingat itu adalah masalah bagi setiap browser untuk memutuskan cara terbaik untuk menampilkan halaman kepada penggunanya.
Secara resmi, CSS diusulkan pada tahun 1994 sebagai bahasa penataan web untuk memecahkan beberapa masalah Html 4. Ada bahasa penataan lain yang diusulkan saat itu, seperti style page untuk HTML dan JSSS tetapi CSS tidak menyertakan properti di CSS2. Seiring berjalannya waktu, CSS level 2 dikembangkan oleh W3C dan diterbitkan sebagai rekomendasi pada Mei 1998. CSS 2 menyertakan sejumlah kemampuan baru seperti di bawah ini:
- Mutlak
- Relatif
- Tetap
- Penentuan Posisi
- Indeks-z
- Konsep Jenis Media
- Teks Dua Arah
- Properti Font Baru seperti Shadows
Kemudian setelah CSS2 dikembangkan, persiapan peluncuran CSS3 dimulai pada tahun 1998 tetapi di tahun tersebut masih belum selesai. Beberapa bagian masih dikembangkan dan beberapa komponen berfungsi di beberapa browser. CSS3 baru diterbitkan pada bulan Juni 1999. CSS3 dibagi menjadi beberapa dokumen terpisah yang disebut “modul”. Setiap modul menambahkan kemampuan baru atau memperluas fitur yang ditentukan dalam CSS 2.
FUNGSI CSS
Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:
1. Mempercepat Loading Halaman Web
Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website lebih kecil.
2. Memudahkan Pengelolaan Kode
Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.
3. Menawarkan Lebih Banyak Variasi Tampilan
HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan, atau membuat menu dropdown CSS.
4. Membuat Website Tampil Rapi di Semua Ukuran Layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone. Mengapa demikian?
CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.
Cara Kerja CSS
Secara sederhana, cara kerja CSS adalah memberitahukan browser bagaimana sebuah website ditampilkan dengan memanfaatkan selector dan melakukan declaration.
Selector adalah elemen HTML yang nantinya akan diubah stylenya. Sedangkan, declaration adalah perubahan yang diinginkan pada elemen HTML tersebut.
Proses ini berlangsung dengan sangat cepat, tapi akan melewati beberapa tahapan cara kerja CSS sebagai berikut:
- 1. Browser akan membaca dokumen HTML yang berisi konten
- 2. Browser akan membaca file CSS untuk mengetahui style apa yang ditentukan
- 3. Browser mencocokan HTML dengan aturan CSS yang diinginkan, biasa disebut rendering.
- 4. Browser menampilkan tampilan sempurna dari coding HTML dan CSS dokumen online tersebut.
Jika dijabarkan lebih jauh, kurang lebih seperti ini. Katakanlah kamu memiliki sedang melakukan coding dengan konten sebagai berikut:
- <body>
<h1>This is a heading</h1>
</body>
Maka, cara kerja CSS adalah membuat browser menampilkan konten itu dalam font Rubik berwarna hijau seperti ini:
- <style>
h1 {
font-family: Rubik;
color: green;
}
</style>
H1 merupakan selector yang menjadi penunjuk elemen manakah yang harus diubah sesuai aba-aba CSS, dalam hal ini Heading 1. Sedangkan, font family dan color merupakan detail perubahan pada konten yang harus ditampilkan oleh browser pada sisi jenis font dan warna font.
Nantinya perubahan tersebut bisa berlaku ke banyak selector seperti:
- * – semua elemen
- p – element paragraf
- div – element divisi
- ul – list
- ol – list angka
- li – bullet lis
- img – element gambar
- Dan lainnya
Di sisi lain, selector yang bisa digunakan juga bervariasi seperti:
- size – ukuran elemen
- padding – padding elemen
- position – posisi elemen
- border – batas element
- text-align – penataan teks
- dan semacamnya
Jenis Jenis CSS
Jenis jenis CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu Inline, Internal dan External. Ini dia beda Inline CSS, Internal CSS dan External CSS:
1. Inline CSS
Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.
Perhatikan baris kode di bawah ini sebagai contohnya:
<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>Dengan kode tersebut, Anda akan mendapatkan hasil ini:
Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.
2. Internal CSS
Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman.
Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih, kodenya seperti di bawah ini:
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>
<p>Ini adalah contoh kalimat.</p>
Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain
3. External CSS
Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.
Agar halaman website bisa menggunakan external CSS, Anda perlu menambahkan kode di bagian header kode HTML-nya. Contohnya seperti berikut ini:
<head>
<link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>
Dengan kode tersebut, halaman website Anda akan menggunakan fileCSSAnda.css untuk mengatur tampilannya.
Bagaimana Cara Kerja CSS?
CSS bekerja ketika browser memuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah.
Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Kemudian, browser mengubah keduanya menjadi document object model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.
Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses di mana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Anda.
Contoh CSS
Berikut ini adalah beberapa contoh penerapan CSS yang mudah:
1. Menentukan Format Paragraf
Salah satu contoh CSS adalah untuk mengatur format paragraf. Misalkan ingin agar semua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup menambahkan kode di bawah ini:
p { font-size: 120%; color: dimgray; }2. Mengubah Warna Link
Anda juga bisa mengubah warna link dengan CSS. Sebagai catatan, warna link yang ditentukan dengan CSS ada empat, yaitu:
- Normal: warna link yang belum pernah dibuka dan tidak diklik
- Visited: warna link yang sudah pernah dibuka
- Hover: warna ketika Anda meletakkan kursor di atas link
- Active: warna link ketika Anda klik
Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang Anda inginkan setelah color:.
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }
3. Menentukan Huruf Kapital/Kecil
Ingin agar sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda” di kode berikut ini dengan teks yang diinginkan:
<p class="smallcaps">Paragraf Anda.</p>4. Membuat Kotak Teks
CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Kode tersebut akan menambahkan kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang Anda tandai dengan class important. Untuk menandai teks dengan class itu, tambahkan kode berikut ini:
<p class="important">Paragraf Anda.</p>5. Membuat Tombol Link
Link akan terlihat lebih mencolok jika diletakkan dalam sebuah tombol. Untuk membuatnya dengan CSS, gunakan kode di bawah ini:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
Supaya Anda tahu apa saja fungsi dari bagian-bagian kode tersebut, simak penjelasan berikut ini:
- a:link, a:visited, a:hover, a:active memastikan bahwa tombol Anda akan selalu tampil meski sudah diklik atau ditunjuk dengan kursor.
- background-color menentukan warna tombol.
- padding menentukan ukuran tombol.
- text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
- text-decoration menentukan ada atau tidaknya garis bawah di teks.
- display: inline-block memungkinkan Anda untuk mengatur tinggi dan lebar tombol.
-
6. Meng-highlight Baris dalam Tabel
- Jika ingin agar baris dalam sebuah tabel memiliki warna berbeda ketika ditunjuk dengan kursor, Anda bisa menambahkan contoh CSS berikut ini:
tr:hover { background-color: #ddd; }Setelah background-color: Anda cukup mengganti #ddd dengan kode warna CSS. Cek warna CSS apabila Anda belum tahu.
- 7. Menerapkan Efek Hover
- Untuk kebutuhan mengubah warna latar belakang button menjadi kuning saat kursor mouse berada di atas button tersebut, Anda menerapkan efek hover seperti ini:
- button:hover { background-color: yellow; }
8. Menyembunyikan Elemen
Meskipun jarang dipergunakan, ada kalanya kamu perlu untuk menyembunyikan elemen HTML tertentu. Nah, kamu bisa menggunakan kode berikut:
.hidden { display: none; }
Sumber:
https://www.niagahoster.co.id/blog/pengertian-css/
https://www.niagahoster.co.id/blog/html-adalah/
https://www.domainesia.com/css
https://idcloudhost.com/blog/css-adalah/