Kelas: X-C
Hallo, Perkenalkan nama saya Ardian. Saya adalah seorang siswa. Sebagai siswa, memiliki tugas utama yaitu belajar dan mengerjakan tugas serta bertanggung jawab terhadap diri sendiri dalam bentuk kemampuan menghasilkan prestasi yang maksimal. Maka dari itu, untuk memenuhi tugas pelajaran informatika saya membuat web mengenai Materi HMTL&CSS.
HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat Halaman web. HTML adalah markup yang digunakan untuk mendefinisikan struktur halaman web. Hal ini seperti misalnya membuat elemen paragraf, gambar, link dan lain sebagainya. HTML tersusun atas elemen/tag HTML. Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman web. Penanda atau markup ini, nanti akan kita sebut dengan Tag. HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web.
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 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.
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
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.
Kelebihan HTML:Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar. Dijalankan secara alami di setiap web browser. Mudah dipelajari. Open-source dan sepenuhnya gratis. Rapi dan konsisten. Menjadi standar resmi web, dikelola oleh (W3C).
Kekurangan HTML:Umumnya digunakan untuk halaman web statis.Tidak bisa menjalankan logic.Fitur baru tidak bisa digunakan dengan cepat di sebagian browser. Perilaku browser terkadang sulit diprediksi.
CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur tampilan (gaya) elemen-elemen HTML. Dengan CSS, kita dapat memberikan warna background, border, mengatur posisi elemen, ukuran font dan lain sebagainya.
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.
1. Internal CSS
Internal CSS adalah kode CSS yang penulisannya dalam tag style dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan website dengan tampilan berbeda-beda.
Kelebihan internal CSS adalah : Editing yang mudah di tiap halaman website. Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML. Internal stylesheet bisa memakai ID dan Class. Error mudah diperbaiki.
Kekurangan internal CSS adalah : Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website. Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya. Ukuran file menjadi lebih besar.
2. External CSS
External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis sendiri pada file ekstensi .css. Penulisan file eksternalnya bisa diletakkan pada bagian head, jadi setiap halaman website dilakukan pemanggilan file .css. Penggunaannya cukup sederhana karena tidak perlu menuliskan CSS pada setiap file HTML.
Kelebihan external CSS adalah : Ukuran file lebih kecil. Code rapi. Respon website lebih cepat. Bisa digunakan untuk beberapa halaman website berbeda.
Kekurangan external CSS adalah : Kurang cocok untuk halaman custom. Halaman website rawan berantakan saat file CSS gagal load sempurna.
3. Inline CSS
Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut HTML. Jadi, di setiap atribut memiliki style CSS yang berbeda sesuai kebutuhan dan ini tergolong kurang efisien jika dibanding jenis CSS lainnya.
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.