HTML dan CSS

HTML

Pengertian

HTML adalah kependekan dari Hypertext Markup Language yang merupakan sebuah bahasa markup dan menjadi bahasa standar untuk membuat struktur halaman suatu website berupa kode. Di mana, juga menyediakan konten seperti teks, gambar, dan video serta elemen lainnya. Umumnya digunakan untuk menyusun bagian paragraf, heading, maupun link pada halaman web.  Walau susunannya berupa coding, HTML tidak dapat dikatakan sebagai bahasa pemrograman karena tidak bisa memberikan fungsi yang dinamis. 

Sejarah

Html ditemukan oleh Tim Berners-Lee yang merupakan seorang ahli fisika pada tahun 1991 dan berasal dari lembaga penelitian CERN yang ada di Swiss. Di mana, berawal dari ide mengenai sistem hypertext yang terdapat 18 HTML tag dan menggunakan basis internet.  HTML adalah solusi untuk membantu ilmuwan dalam mengakses dokumen, namun kini html semakin berkembang pesat di dunia pemrograman web. 

Sejak tahun 1991, setiap HTML merilis versi terbarunya, selalu dilengkapi dengan attribute dan tag terbaru. Saat ini ada 140 HTML tag berdasarkan HTML Element Reference yang dimiliki oleh Mozilla Developer Network. Karena popularitas dan kemajuan teknologi, HTML terus berkembang dan meningkat. HTML sudah dianggap sebagai website standar yang sudah resmi.

HTML dikembangkan oleh W3C dengan upgrade yang besar pada tahun 2014. Hasilnya yaitu pengenalan tentang HTML 5 dengan semantic baru sehingga dapat memberitahukan arti dari konten HTML tersendiri. Adanya web browser bertujuan untuk memudahkan pengguna saat membuka dokumen yang berformat HTML.

Fungsi

HTML memiliki fungsi utama untuk membuat halaman website sebagai pondasi utamanya, lalu dalam pembuatan website HTML biasanya berpasangan dengan CSS untuk mempercantik dan Javascript yang berguna untuk memberikan animasi dan kontrol fungsi serta dinamis.

Kedua sebagai hyperlink yang akan mengarahkan pengguna berpindah antar halaman melalui teks tertentu yang sudah terdapat kondisi di dalamnya. HTML dapat disebut juga bahasa pemrograman yang juga memiliki peranan yang penting juga dalam ranah SEO (Search Engine Optimization). Karena berkat HTML, pemilik website bisa mengarahkan pengguna atau pembaca ke halaman website lain melalui hyperlink.

Menambah Multimedia pada Website melalui tampilan menarik dan tidak membosankan akan membuat para pengunjung betah. Dengan bahasa markup tersebut, pengguna bisa menampilkan beberapa jenis multimedia pada website. Contohnya seperti menambahkan video, gambar, audio, animasi, dan media lainnya.  Hal tersebut bertujuan agar pengguna dapat menerima informasi secara maksimal serta tidak bosan saat membaca informasi.

Pada awalnya HTML diciptakan untuk membantu para ilmuwan di Komisi Eropa untuk Penelitian Fisika Nuklir (CERN) berbagi dokumen hasil penelitian. Seiring berjalannya waktu, HTML mulai digunakan untuk mengembangkan sebuah website seperti membuat struktur halaman website, membuat hyperlink, menambahkan konten, mengatur format dan tata letak, serta menandai teks.

Cara Kerja

Setelah dokumen HTML dibuat pada aplikasi editor HTML, kemudian dokumen tersebut akan tersimpan dengan format, yakni htm atau html. Pengguna bisa membuat dokumen HTML lebih dari satu. Karena suatu website umumnya terdiri dari banyak halaman di dalamnya. Contohnya seperti halaman utama website, blog, dan lainnya.

Dokumen HTML yang sudah dibuat akan berisi berbagai komponen HTML yang menyusun berbagai bagian. Contohnya seperti bagian isi konten, heading, paragraf dan sebagainya. File atau ekstensi HTML bisa kamu buka dengan menggunakan berbagai browser. Agar orang lain Untuk bisa mengakses informasi yang telah dibuat, kamu harus membuatnya online. HTML adalah bahasa markup yang berfungsi setelah menyewa layanan web hosting untuk mengunggah file tersebut ke website.

Setelah itu, browser kemudian bisa membaca dan juga melakukan rendering terhadap file HTML menjadi tampilan website yang utuh  dan ditampilkan menjadi website yang bisa kamu lihat di layar laptop dan diakses banyak orang. Ekstensi file HTMLbisa dilihat dengan mengGunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan beredar kontennya sehingga user internet bisa melihat dan membacanya.

Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki dokumennya sendiri-sendiri.

Struktur HTML

Tag

Tag merupakan bagian pembuka dan penutup yang digambarkan dengan <..> </..>, lalu dalamnya akan diisi dengan nama tag dan atribut yang nantinya akan diproses oleh browser. Setiap tag memiliki fungsinya masing-masing. Misalnya, untuk membuat judul menggunakan tag <h1></h1> dan untuk menambahkan gambar menggunakan tag <img></img>.

Elemen


Elemen adalah keseluruhan dari awal tag hingga penutup tag. Berarti elemen berisi tag pembuka, isi tag, dan tag penutup. Contohnya seperti ini:

<html>

<h1>Belajar HTML Bersama DomaiNesia</h1>

Atribut


Atribut adalah informasi yang bisa ditambahkan dalam setiap elemen untuk mengatur dan menambahkan sesuatu. Misalnya, dalam penggunaan tag gambar, dapat dilengkapi menjadi `<img src="html.jpg" alt="html"/>`. Dari tag tersebut artinya bahwa gambar akan memproses gambar komputer dan `alt` akan menampilkan tulisan "html" jika gambar gagal diproses

Beberapa Contoh HTML dasar yang kerap digunakan:

HTML Basic

HTML basic ini adalah bentuk dasar bahasa markup tersebut. Beberapa contohnya seperti dokumen HTML dengan kode <!DOCTYPE html> yang berfungsi sebagai deklarasi untuk memberitahu browser bahwa dokumen tersebut ditulis menggunakan bahasa markup HTML.

Contoh HTML basic selanjutnya yaitu tag <html> yang berfungsi untuk menampung seluruh tag HTML dari awal hingga akhir atau penutup dengan kode </html>. Selain itu <head> </head> berfungsi sebagai penampung metadata informasi pada website dan juga <body></body> yang nantinya akan diisi oleh isi konten yang akan ditampilkan.

Images

HTML adalah bahasa pemrograman yang akan membuat website menjadi lebih menarik. Salah satunya yaitu dengan menggunakan images pada halaman website. Melalui HTML ini kita juga bisa mengatur ukuran gambar dan posisi gambar tersebut.

Gambar yang ditampilkan dapat berupa jpg, png, jpeg, dan gif. Images digambarkan dengan tag <img></img> yang memiliki beberapa atribut di dalamnya seperti src (source) yang berisi gambar yang akan ditampilkan dan alt (alternative description) yang akan menampilkan deskripsi dari gambar ketiga gagal ditampilkan. Contoh penerapannya,

<img src=”html.jpg” alt=”gambar html”/>

Font

Keunikan antara satu website dengan website yang lainnya bisa kita lihat dari jenis font yang digunakan. Di sinilah fungsi HTML berperan sebagai coding untuk mengatur jenis font dan ukuran pada website yang pengguna buat. Contohnya pengaplikasian kode font dengan HTML seperti,

<h2 style=”font-family:Georgia;>text</h2>.

Anchor Text

Anchor text berisi potongan teks yang bisa diklik. Markup language juga berperan penting dalam dunia SEO (Search Engine Optimization). Karena dengan HTML kita bisa membuat anchor text yang digunakan untuk optimasi SEO off page maupun on page.

Pada dasarnya Google akan membaca anchor text tersebut untuk mengetahui isi dari website, sehingga anchor text juga mempengaruhi peringkat dalam mesin pencarian. Maka dari itu penting untuk mempelajari anchor text agar website pemuda mendapatkan peringkat yang baik. Contoh bentuk kodenya yaitu,

<a href=”link”>text</a>.

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).
  • Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.

Kekurangan HTML

  • Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, sehingga bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
  • Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
  • Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.
  • Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru.

CSS

Pengertian

CSS adalah singkatan dari Cascading Style Sheets. Ini adalah merupakan bahasa pengkodean yang memberikan tampilan dan tata letak situs web. CSS merupakan dasar desain web dan salah satu teknologi dari World Wide Web, bersama dengan HTML dan JavaScript. 

CSS digunakan untuk menata semua tag HTML, termasuk badan dokumen, judul, paragraf, dan potongan teks lainnya. CSS juga dapat digunakan untuk menata tampilan elemen tabel, elemen grid, dan gambar. Hingga dapat memberikan warna, style, ukuran, dan juga digunakan untuk mengatur posisi pada elemen-elemen di halaman website, sehingga membuat halaman website tampak lebih menarik saat dilihat.

Fungsi

  • Menentukan font selain default untuk browser
  • Menentukan warna dan ukuran teks dan tautan
  • Menerapkan warna ke latar belakang
  • Mengandung elemen halaman web dalam kotak dan mengapungkan kotak-kotak itu ke posisi tertentu di halaman

Kemampuan dalam memasukkan style ke dalam style sheet, yang membuat untuk pertama kalinya, halaman web bisa dirancang. Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft Internet Explorer 3 pada tahun 1998. Hingga hari ini, dukungan untuk fungsi CSS tertentu bervariasi dari browser ke browser. W3C, yang masih mengawasi dan menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS – CSS3. Dengan CSS3, pengembang berharap bahwa semua browser utama akan membaca dan menampilkan setiap fungsi CSS dengan cara yang sama.

CSS memungkinkan kita untuk menentukan gaya, warna, ukuran, jarak, dan fitur dekoratif lainnya untuk elemen-elemen HTML di halaman web. CSS juga dapat mengontrol tata letak halaman web secara keseluruhan atau sebagian. Dengan menggunakan CSS, kita dapat membuat halaman web yang lebih menarik, konsisten, dan responsi sehingga dapat digunakan dengan optimal.

Jenis-Jenis

Inline CSS

Digunakan untuk menerapkan gaya unik ke elemen HTML tunggal. Untuk menggunakan inline css, anda cukup menambahkan atribut style ke elemen HTML yang relevan. Atribut style dapat berisi properti CSS apapun seperti color, font family, dll. Jenis ini memungkinkan perubahan style spesifik pada elemen inti website tanpa mempengaruhi elemen lain.

CSS Internal 

CSS internal digunakan untuk menerapkan gaya unik ke seluruh dokumen HTML atau bagian dari dokumen HTML. Internal CSS ditambahkan dalam elemen <style>, yang terletak di bagian <head> dari dokumen HTML. elemen <style> dapat berisi properti CSS apapun seperti color, font-family, dll. Jenis ini berguna untuk menerapkan style khusus pada satu halaman web.

CSS External

CSS external digunakan untuk menerapkan gaya unik ke seluruh website. File CSS eksternal disimpan dengan ekstensi file .css dan ditautkan dari dalam dokumen HTML menggunakan elemen <link> yang terletak di bagian <head>. Jenis CSS ini mampu mempermudah implementasi style untuk situs web skala besar. Sebab, jenis ini dapat mempercepat waktu muat halaman (loading), dan memfasilitasi penggunaan stylesheet yang sama di beberapa halaman.

Cara Kerja

CSS (Cascading Style Sheets) bekerja dengan cara mengasosiasikan coding settingan style dengan elemen HTML dalam dokumen web. CSS menerapkan aturan styling kepada elemen-elemen dalam dokumen HTML berdasarkan selektor yang ditentukan. 

Selektor ini dapat mengacu pada nama tag, ID, kelas, atau atribut lain dari elemen HTML. Nantinya, selektor ini akan bekerja membantu programmer dalam menentukan elemen mana yang harus menerima oleh style tertentu tertentu.

Dalam mekanisme kerjanya, CSS mengikuti prinsip “cascading”, di mana aturan style diterapkan sesuai dengan spesifisitas selektor, keberadaan style inline, dan urutan kode CSS itu sendiri. Hal ini bertujuan untuk memastikan bahwa setting atau aturan CSS dengan kapasitas tertinggi akan menjadi leads aturan lain yang kurang spesifik.

Sumber:



Comments

Post a Comment

Popular posts from this blog

Perangkat Lunak dan Keras Komputer

Image
Perangkat Lunak Pengertian Perangkat lunak adalah sekumpulan perintah seperti data yang telah diprogram, disimpan, dan diformat sebagai jembatan penting untuk berhubung ke perangkat keras oleh komputer dalam menyelesaikan pekerjaan.  Fungsi Berikut adalah fungsi perangkat lunak dalam bentuk poin: Menghubungkan pengguna dengan perangkat keras. Memastikan komunikasi efektif melalui sistem operasi, program, dan data. Memproses perintah dan instruksi. Menyediakan sarana interaksi antara pengguna dan perangkat keras. Menyediakan fungsi dasar untuk menjalankan komputer. Contoh : Perangkat Lunak Berbayar merupakan perangkat lunak yang mengharuskan penggunanya untuk memberikan bayaran dengan harga tertentu untuk menggunakan perangkat lunak tersebut. Contoh: software berbayar adalah Microsoft Office, Microsoft Windows, Adobe Photoshop, dan sebagainya. Memastikan komunikasi efektif melalui sistem operasi, program, dan data. Microsoft Windows Windows adalah sebuah program komputer yang mengat...
Read more

LAPORAN HASIL OBSERVASI

Image
 COKLAT Pengertian Coklat merupakan makanan hasil olahan biji kakao yang cenderung memiliki rasa dan aroma pahit yang menyegarkan. Sering dijadikan sebagai sajian manis berupa minuman maupun makanan. Salah satu camilan dengan minat paling banyak di dunia dari seluruh golongan. Berdasarkan data, dengan umur di bawah sepuluh tahun hingga kalangan remaja 11-20 tahun ke atas. Juga dapat sebagai pilihan camilan untuk golongan tua namun disajikan dengan komposisi gula yang lebih sedikit.  Sejarah Pada tahun 400 SM, pohon kakao ditemukan oleh suku Maya di hutan Amazon atas Ekuador yang merupakan tugas hujan. lalu datanglah golongan Aztec yang mengenal coklat dan membuat minuman yang disebut xocoalt dengan tujuan kesehatan. Bahkan kaisar Aztec kala itu dapat mengonsumsi 50 cangkir Xocoalt.  Tahun 1500, suku Aztec didatangi si penguasa Spanyol Hernando yang sedang melakukan perjalanan ke Meksiko. Hernando pun mengenalkan coklat ke Paris, yang saat itu Anna dari Austria menikah den...
Read more