Hallo semuanya, pada pertemuan pertama kita kali ini terkait dengan pelajaran Pemrograman Web, kita akan mempelajari dasar dasar HTML.
HTML
Apa itu HTML ? mungkin pertanyaan inilah yang terbersit pada benak anda yang baru mulai masuk kedalam dunia web programming. HTML merupakan bahasa pemrograman dasar yang wajib di kuasai bagi seorang web developer. karena HTML merupakan unsur dasar dari pembangunan sebuah website. jika di ibaratkan HTML menjadi pondasi pada sebuah rumah atau bangunan. karena bentuk pada halaman website di buat menggunakan HTML.
Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website (Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML di di simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web browser (Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di jelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi- fungsi yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.
Mengenal Tag, Element, Atribut HTML
Setelah sebelumnya kita membahas tentang Pengenalan HTML. kini kita akan memasuki tutorial pengenalan dan penggunaan Tag, Element dan Atribut dalam HTMl. Ketiga pembahasan ini merupakan dasar dalam penulisan kode HTML atau dasar dari seluruh tampilan halaman web yang ada di internet.
Tag HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya. disinilah di gunakan tag. dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. berikut penulisan tag yang digunakan dalam HTML
<tag> Tulis Objek Disni </tag>
Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup,diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</ >).
Ada banyak jenis tag yang biasa digunakan dalam HTML, perlahan kita akan pelajari bersama.
Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>
pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini adalah heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link> dan sebagainya.
Atribut pada HTML
Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. atribut bisanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name="value" ). penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>
Perhatikan pada syntax di atas :
- <h2> adalah tag heading 2
- align adalah nama dari atribut
- center adalah nilai/value dari atribut
- “Pengenalan atribut HTML” adalah element dari tag h2
Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang, namun bagi anda yang bergelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.
Heading Pada HTML
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu : <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
</body>
</html>
Format Text Pada HTML
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul, ataupun isi dari content/halaman website sendiri. penjelasan Berikut beberapa dan contoh dari Format Text Pada HTML.
Membuat huruf tebal (bold) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b> berikut contoh syntax HTML untuk membuat format text tebal :
<b> Hallo ini huruf tebal </b>
Membuat huruf miring (italic) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <i> berikut contoh syntax HTML untuk membuat format text miring :
<i> Hallo ini huruf miring </i>
Membuat huruf bergaris bawah (underline) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <u> berikut contoh syntax HTML untuk membuat format text underline :
<u> Hallo ini huruf garis bawah </u>
Dan masih banyak lagi jenis format text dalam html, seperti yang dapat kita lihat pada contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>
Membuat Paragraf Pada HTML
Untuk memahami pembuatan paragraf <p> 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 <p>. atribut tag tersebut yaitu :
- Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
- Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
- Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
- Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>
Contoh penggunaan dalam kode paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>
Demikian, materi pelajaran dasar-dasar HTML ini. Terimakasih.
Source : malasngoding[dot]com
Ahmad Subki
Posting Komentar