Apa itu HTML? Digunakan Untuk Apa?

HTML adalah kepanjangan dari Hypertext Markup Language dan merupakan salah satu bahasa yang paling banyak digunakan dalam mebuat halaman web.

Hypertext mengacu pada cara di mana halaman web (dokumen HTML) dihubungkan. Jadi, link yang tersedia pada halaman web disebut Hypertext.

Seperti namanya, HTML adalah bahasa Markup yang berarti kamu menggunakan HTML hanya untuk “mark-up” dokumen teks dengan tag yang akan memberitahukan browser struktur untuk menampilkan sebuah desain layout web.

Awalnya, HTML dikembangkan dengan maksud untuk mendefinisikan struktur dokumen seperti judul, paragraf, daftar, dan sebagainya untuk memudahkan berbagi informasi ilmiah antara peneliti.

Sekarang, HTML banyak digunakan untuk membuat format halaman web dengan bantuan tag yang berbeda dalam bahasa HTML.

File HTML tidak lebih dari file teks sederhana, yang membuat kita saat mulai menulis dalam HTML, hanya memerlukan teks editor sederhana saja.

Misalnya ada Notepad yang merupakan teks editor yang selalu kita temukan pada komputer berbasis Windows, kalau bingung cara menemukan notepad kamu bisa search distartup menu Windows, saya yakin kamu sudah pada tahu cara membuat notepad. Untuk komputer Mac OSX datang dengan bundel TextEdit. Ada banyak teks editor yang bisa kamu gunakan untuk menulis kode html, dari yang editor sederhana maupun yang lebih advance.

Untuk pertama coba ketikan kalimat dibawah ini pada notepadmu atau teks editor yang kamu gunakan :

Code is here

Sekarang silahkan buat folder dengan nama latihan_html kemudian simpan file yang sudah kami buat dengan nama “latihanhtmldasar.html” kedalam folder yang sudah kamu buat sebelumnya.

Jika kamu menggunakan notepad berhati-hatilah. Ingat saat menyimpan file harus menggunakan ekstensi “.html”, biasanya notepad secara otomatis akan menyimpannya sebagai “.txt”, tidak cuma notepad saja sih, tapi mungkin beberapa teks editor lainnya juga gitu.

Kamu juga perlu memastikan bahwa file yang sedang disimpan sebagai teks biasa. TextEdit, misalnya, akan memulai file baru sebagai “Rich Text Format“, yang mengandung banyak format tambahan secara default. Dalam kasus tersebut, masuk ke-preferences  dan pastikan kamu memeriksa dan sudah memilih format “Plain text” sebelum membuat file baru.

Untuk melihat hasil file HTML yang sudah kamu buat sebelumnya, kamu bisa langsung klik dua kali (open) file tersebut. Kamu akan langsung melihat tampilan web pertamamu yang berisi tulisan “ini halaman web pertama saya. Harap maklum”.

Dalam artikel ini kami telah mengatakan untuk menggunakan teks editor sederhana, seperti Notepad misalnya, tetapi kamu mungkin akan tergoda untuk menggunakan software khusus seperti Adobe Dreamweaver. Kamu harus sangat berhati-hati ketika menggunakan program ini, terutama jika kamu seorang pemula, karena program ini sering memberi kode yang tidak perlu atau non-standar untuk “membantu”-mu.

Jika kamu serius tentang belajar HTML, kamu harus membaca tutorial seperti ini dulu, sehingga kamu setidaknya memiliki pemahaman dasar tentang apa yang sedang terjadi. Software seperti ini tidak akan pernah memberikan kontrol yang sama atas halaman web seperti coding by hand. Jika kamu memutuskan untuk menggunakan  kode-editing khusus, kami merekomendasikan satu di mana kamu masih coding by hand. Mereka dapat, pada kenyataannya, sangat membantu, terutama lebih maju kamu, dalam hal sintaks kode menyoroti dan manajemen file.

Apa Itu CSS? Bagaimana Cara Menggunakannya?

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Sebagai blogger, Anda juga harus tahu apa itu CSS dan bagaimana menggunakannya agar mudah untuk merancang blog anda. Kode CSS membuat pembaca blog kita menjadi nyaman dan betah berlama-lama di blog kita sehingga pageviews situs kitapun meningkat. Namun, itu semua tergantung bagaimana kita menggunakannya sehingga bisa memikat pengunjung. Untuk itulah serial tutorial ini dibuat  .

PENGENALAN DASAR

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :

Body {background-color: white;}

?Body? adalah Selektor, ?{ }? adalah deklarasi, ?background-color? adalah properti dan ?white? adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ?Body? sebuah halaman web.

CARA-CARA PENGGUNAAN CSS

Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file  dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ?.html?. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.

1. CSS sebagai atribut/elemen/bagian dari tag HTML.

Oke, sebagai contoh, lihat gambar screenshoot kode CSS di bawah ini:

?Div? adalah tag html/Mark up yang dihiasi oleh kode css. kode cssnya adalah ?style =? padding: 5px 20px; ? ?. Cara ini biasanya dipakai jika kode cssnya sedikit.

2. CSS dalam tag <style type=?text/css?> (Kode CSS) </ style>.

Kode css terletak antara tag ?style? yang biasanya diletakkan dibawah elemen <title></title>(Tapi, tidak untuk gambar ini). Dengan cara ini anda harus menentukan nama selektor. Pada gambar diatas, selektornya adalah ?.download?.

3. CSS sebagai file terpisah.

Kode pada gambar diatas adalah kode html untuk memanggil kode css yang terpisah. Kode itu biasanya diletakkan dibawah elemen <title></title> pada sebuah file html. Dalam cara 3 ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan sofware notepad, namun diberi format .css.

Untuk Latihan cara 3 ini silahkan anda buat folder. Dalam folder itu anda buat lagi file .html, misalnya latihan.html . Lalu buat file css-nya misalnya style.css.

Dalam file latihan.html, silahkan ketikkan kode dibawah ini :

<html>
<head>
<title>Latihan</title>
<link rel=?stylesheet? href=?style.css? type=?text/css?/>
</head>
<body>
<div class=?download?>
<a href=?#?>Download</a>
</div>
</body>
<html>

Simpan, lalu buka di browser. File .html anda belum dihias karena kita belum menambahkan kode css kedalam file style.css. Jadi, silahkan masukkan kode seperti dibawah ini, tentu anda bisa merubah-rubahnya :

.download {
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}

setelah itu simpan, lalu refresh file latihan.html yang sedang dibuka di browser

Selamat mencoba  .

Keterangan :
Cara 1 dan 2 sebagian besar digunakan dalam blog blogspot/blogger. Sedangkan, Cara 3  biasanya digunakan dalam situs web berbasis wordpress ataupun yang lainnya, karena membutuhkan ruang untuk menyimpan file css.

Jika menggunakan cara2 dan 3, Anda harus melengkapi tag html yang akan anda hias dengan atribut ?id? atau ?class?. Ini adalah  2 cara untuk penamaan selektor pada kode css. Jika menggunakan atribut ?id? (misal: <div id=?download?></div>), maka selektor dalam kode cssnya adalah sebagai berikut :

#download {
Properti:nilai;
}

Sedangkan, jika menggunakan atribut ?class? (misal:<div class=?download?></div>), maka selektor dalam kode cssnya adalah sebagai berikut :

.download {
Properti:nilai;
}

Dengan kata lain, hanya dibedakan dengan tanda ?#? dan ?.? .

Nah, lalu jika anda ingin menghias tag tertentu dalam file html, misalnya seluruh tag h1 yang ada, Maka anda dapat menuliskan selektornya tanpa menggunakan tanda apapun. Seperti ini :

h1 {
properti:nilai;
}