Skip to main content

HTML dan CSS - Pengertian HTML, Sejarah, dan Cara kerjanya


 

Apa itu HTML ?

Html merupakan singkatan dari HypeText Markup Language, jadi HTML merupakan bahasa pemprogaman standar yang digunakan untuk membuat sebuah halaman web. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuag file. Dalam mebuat sebuah file HTML, terdapat standar/format khusus yang harus di ikuti. Format tersebut tertuang dalam standar kode internasional atau ASSCII (American Standard Code For Information Interchange).


Sejarah Tentang HTML

Tim Berners-Lee merupakan sosok ilmuwan dibalik lahirnya HTML. Di tahun 1991, ia awalnya menciptakan HTML sebagai solusi untuk memudahkan para ilmuwan dalam mengakses dokumen satu sama lain. Selang setahun kemudian, HTML mulai dapat digunakan untuk umum. Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web atau yang kita kenal dengan WWW. Keduanya saling bersinergi supaya informasi yang ingin disebarkan bisa diakses oleh banyak orang. 

Tak disangka, kini HTML telah berevolusi menjadi bahasa markup yang telah digunakan oleh lebih dari 92,3% persen website di dunia. Selama perjalanannya, HTML tentu mengalami perkembangan yang cukup pesat. Seperti apa evolusinya? Simak timeline perjalanan HTML berikut : 


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. 

Mengenal Tag HTML, Elemen, dan Atribut 

Setelah mengetahui tenytang apa itu HTML dan Sejarahnya. sekarang kita perlu tahu komponen - komponen pada HTML. Secara Umum HTML terdiri dari Tag, Elemen, dan Atribut.


1. TAG

Tag adalah tanda untuk awalan dan akhiran dalam perintah sebuah html yang akan dibaca oleh web browser. Tag sendiri di buat dengan menggunakan kurung siku <...>, dimana di dalamnya berisi nama dari sebuah tag.
Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari menebalkan huruf, membuat tulisan miring, dll. Selain itu, Tag ditulis secara berpasangan, yaitu tag pembuka dan tag penutup. pada tag penutup ditambahkan garis miring (/) di depan nama tag. tag di HTML sangat banyak sekali, hingga pada saat ini sudah ada lebih dari 250 tag. Tapi yang paling sering di gunakan adalah sperti berikut ini :



2. Element

Element adalaalah sebuah komponen HTML yang merupakan keseluruhan kode dari tag pembuka hingga tag penutup. Element terdiri dari teks dan simbol yang berupa tag pembuka, isi tag atau konten, dan tag penutup. 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”. Di 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 : 


Selain atribut khusus, ada beberapa atribut yang digunakan untuk menentukan aksi pada dilakukan jika terjadi sesuatu pada elemen. 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 pemprogaman javascrip. Sehingga halaman website dapat melakukan aksi tertentu. 


Bagaimana Cara Kerja Kerja HTML?

Nah, sekarang bagaiman seh cara kerja dari file HTML sehingga dapat ditampilkan di browser. Sekarang mari simak penjelasannya.

Pertama, dokumen HTML Anda buat di aplikasi editor html dan menyimpannya dengan format .html atau .htm. Dokumen HTML yang dibuat bisa saja lebih dari satu. Sebab dalam sebuah website, biasanya terdiri dari banyak halaman. Misalnya aja, halaman utama, kontak, blog, dan lainnya. Nah, masing-masing dokumen, berisi komponen HTML yang akan menyusun bagian heading, paragraf, isi konten, dan lainnya. 

Ekstensi file ini dapat dibuka dengan menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox. Kemudian, untuk dapat diakses oleh banyak orang, Anda perlu mengonlinekannya terlebih dulu. Anda perlu menyewa layanan web hosting dan mengupload file website Anda di sana. Jika sudah, selanjutnya browser akan membaca  dan me-render file HTML menjadi tampilan halaman website. Sehingga ketika orang mengakses website, mereka dapat mudah membaca informasi yang ditampilkan.





Comments

Post a Comment

Artikel Populer

Protokol yang mendukung WWW

Nama              : Trio Hermanto NIM                  : 205520065 Mata Kuliah  : Sistem Terdistribusi Protocol pendukung WWW Protocol adalah sebuah peraturan yang berfungsi untuk menentukan format dan transmisi data. Peraturan yang sering digunakan dalam proses komunikasi ini sering disebut dengan istilah protokol layer. Protokol juga memiliki banyak macam-macamnya. Nah di bawah ini mrupakan macam-macam protocol yaiitu : Net Beui Protocol Net Beui sangat baik dan cepat untuk bersharing data, namun protocol netbeui memiliki kelemahan yaitu protokol ini tidak dapat dirouting. IPx & SPx (Internetwork paket exchange/Sequnce paket exchange) Protocol yang satu ini sangat mirip dengan Net Beui, tetapi yang membedakan protocol ini dengan net beui adalah protokol ini dapat di routingkan, jadi dapat memungkinkan terjadinya MAN. Protokol yang dikembangkan oleh OSI / ISO Protocol ini sudah digunakan...

Apa itu Java

APA ITU JAVA? Java merupakan bahasa bahasa pemrograman tingkat tinggi yang berorientasi pada object dan program java tersusun dari bagian yang disebut dengan Class. Class terdiri dari metode- metode yang melakukan pekerjaan dan mengembalikan informasi setelah melakukan tugasnya. Para programmer Java banyak mengambil keuntungan dari kumpulan class di pustaka class Java yang disebut dengan Java Application Programming Interface (API). Class- class ini diorganisasikan menjadi sekelompok yang disebut dengan paket (package). Java API telah menciptakan applet dan aplikasi canggih dengan menyediakan fungsionalitas yang memadai. Jadi ada dua hal yang harus dipelajari dalam Java, yaitu bagaimana mempergunakan class pada Java API dan mempelajari bahasa Java. Tidak ada cara lain selain class yang merupakan satusatunya cara menyatakan bagian eksekusi program. Pada Java program javac untuk mengkompilasi file kode sumber Java menjadi class-class bytecode. File kode sumber mempunyai ekstensi *.java. ...

HTML dan CSS - Membuat Form Pendaftaran Sederhana

Nah, Pada kesempatan kali ini saya akan mencoba membuat sebuah form pendaftaran sederhana menggunakan html dan css. pada artikel-artikel sebelumnya kita sudah membahs mengenai pengertian, sejarah dll tentang html dan css. nah sekarang kita coba untuk mempraktekannya. Membuat Form Pendaftaran Sederhana Untuk membuat form nya, pertama-tama kalian buka terlebih dahulu aplikasi code editor kalian. aplikasinya bebas mau sublime text, vs code, dan masih banyak lagi yang lainnya yang penting bisa untuk membuat html dan css. nah untuk langkah langkahnya, kalian bisa ikuti seperti yang saya contohkan di bawah ini. Membuat file html Dibawah ini merupakan file html yang kita gunakan untuk membuat form, silahkan kalian bisa mengikutinya. <! DOCTYPE   html > < html   lang = "en" > < head >     < title >Form Pendaftaran</ title > </ head > < body >      < div   id = "login-box" >  ...

Belajar HTML Dasar #5 - Membuat Paragraf Pada HTML

Membuat Paragraf Pada HTML Untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa dikombinasikan langsung dengan tag paragraf atribut tag tersebut yaitu : 1. Membuat paragraf rata kiri menggunakan <p align="left"> .................. </p> 2. Membuat paragraf rata kanan menggunakan  <p align="right"> .................. </p> 3. Membuat paragraf rata tengan menggunakan  <p align="center"> .................. </p> 4. Membuat paragraf rata kiri kana menggunakan  <p align="justify"> .................. </p> Paragraf menggunakan <p>. Berikut ini adalah implementasi dari <p>   dalam dokumen html : <! DOCTYPE html > < html > < head > < title >belajar membuat parag...