Minggu, 26 Maret 2017

Belajar HTML dan CSS Bagian 4 : Pengenalan Tag HTML

Pengenalan Tag HTML

      Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 3 dimana kita sudah mulai bekerja pada html. Bagi sahabat lupacode yang baru saja bergabung silahkan baca terlebih dahulu di artikel saya yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini.

lupacode - Belajar html bagian 4

         Pada kesempatan kali ini saya akan membahas tentang Tag <html> mengenai bagaimana cara pembuatannya, strukturnya, dan tag-tag apa saja yang bisa kita tulis didalam bagian-bagian <html> . pada pembahasan sebelumnya kita telah mempelajari seperti apa struktur kode html itu, dimana struktur kodenya kurang lebih seperti ini

<!DOCTYPE html>
<html>
<head>
            <title></title>
</head>
<body>

</body>
</html>

       Yang akan kita pelajari saat ini adalah kode apa saja yang dapat kita tuliskan pada tag <head> dan pada tag <body>.  Baiklah sekarang kita bahas satu persatu

Tag head

         Di bagian head ada beberapa hal yang bisa kita simpan di antaranya :

- Judul halaman
<title></title>

      Seperti yang telah kita bahas pada pembahasan sebelumnya, bahwa pada tag title itu untuk menambahkan Judul pada halaman website kita dana akan muncul pada Tab browsernya. Kemudian selanjutnya kita dapat menambahkan tag css

- CSS
<style type="text/css"></style>

          Kemudian yang dapat kita simpan selanjutnya adalah tag css dengan menggunakan tag <style>

- Javascript
<script type="text/javascript"></script>

          Kemudian yang dapat kita selanjutnya adalah javascript dengan menggunakan tag <script>

- Metadata
<meta></meta>

         Kemudian yang terakhir adalah meta data dimana kita dapat menggunakan tag <meta> meta data ini penting untuk mendeskripsikan website kita. Contoh tag  <meta> adalah seperti ini

<head>
 <meta charset="utf-8">
            <meta name="description" content="Belajar Pemrograman Web">
            <meta name="keywords" content="HTML,CSS,Javascript">
            <meta name="author" content="Admin Lupacode">
</head>


          Disana ada beberapa penjalasan, pertama kita dapat menuliskan charset atau karakter set dan kita akan bahas itu belakangan. Kemudian selanjutnya deskripsi dari web kita lalu keywords dan author atau pembuatnya siapa. Ini penting juga untuk search engine agar lebih mudah mengidentifikasi website kita, dan itu adalah tag-tag yang berada didalam head.


Tag body

       Selanjutnya ini adalah yang sangat penting, tag-tag apa saja yang dapat kita tuliskan pada bagian tag <body>  Tag nya cukup banyak, dan akan saya ulas hanya beberapa pada artikel ini dan untuk lebih detailnya nanti kita akan bahas pada artikel – artikel selanjutnya. Ini adalah contoh tag yang berada didalam tag <body>

-          Teks
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>,

Yang pertama untuk teks atau apa yang sering disebut Heading. Ya untuk heading itu html punya 6 level. Mulai dari <h1> yang paling besar, sampai <h6> yang paling kecil. Untuk menuliskan paragraf kita dapat menuliskan tag <p>

-          Pendukung teks
<br>, <hr>, <em>, <strong>

Ada pendukung untuk teks, yaitu <br> untuk menambahkan baris baru <hr> untuk menambahkan garis horizontal dan ada <em> dan <strong> dan ini nanti kita akan bahas pada artikel selanjutnya.

-          Gambar
<img>

Untuk menyimpan gambar menggunakan tag <img> atau image

-          Hyperlink
<a>

Untuk menyimpan hyperlink itu menggunakan tag <a> atau anchor

-          List ( Bullets & Numbering )
<ul>, <ol>, <li>, <dl>, <dt>, <dd>

Lalu kemudian untuk list atau kalau pada microft word adalah Bullets & Numbering. Disana ada <ul> atau un order list itu adalah list yang tidak terurut. Lalu ada <ol> untuk order list dimana di dalam <ul> dan <ol> itu nanti terdapat <li> atau list item dan ada <dl> atau definition list dan nanti kita akan bahas pada pembahasan selanjutnya.

-          Tabel
<table>, <thead>, <tbody>,

Didalam body juga kita dapat memasukan table dimana tag nya adalah <table>

-          Form
<form>, <input>, <select>, <button>

Kemudian form beserta element – elementnya, kita nanti punya tag <form> dimana didalamnya punya tag <input> atau text file, kita bisa punya combo box atau select, button dan sebagainya.

-          Script
<script>

Lalu di body juga kita dapat masukan Javascript dengan menggunakan tag <script>

-          Object
<object>

Kemudian kita bisa juga menambahkan object. Biasanya object ibi berupa multimedia jika misalkan kalian ingin menyimpan flash bisa menggunakan object.

-          Grouping
<div>, <span>

Lalu ada tag untuk melakukan grouping. Nanti kita akan melakukan group didalam tag-tag html menggunakan tag <div> dan <span> ini juga penting untuk kita belajar css nantinya.

-          Komentar
<!- - ini adalah komentar - ->

Lalu ada juga tag komentar. Ini juga cukup penting, dan biasakan untuk menyimpan komentar didalam halaman web sahabat yah. Tiap bahasa mempunyai tag-tag komentar sendiri, didalam html menggunakan <!- - , - -> tag komentar ini tidak akan muncul dibrowser. Ini adalah untuk develop atau perancang begitu dia nanti membuka lagi webnya dan lihat source codenya dia bisa tahu baris ini untuk apa dan baris itu untuk apa. Jadi komentar ini bisa membantu kita untuk mengingatnya lagi.


Struktur Tag


      Sekarang kita lihat struktur dari sebuah tag karna tag ini memiiki struktur dan tidak hanya nama tag nya saja. Strukturnya adalah seperti ini :
<namatag atribut=”nilai”>
Diawali dengan nama tag dan tadi kita sudah mencobanya, dan boleh ada nama atributnya dan setiap atribut itu mempunyai sebuah nilai atau value. 

Contohnya seperti ini :

<body bgcolor=”lightblue”>

Body = Nama tag nya
Bgcolor = atributnya ( dimana fungsi dari bgcolor ini adalah untuk merubah warna colour pada body)
Lightblue = Nilai atau value

       Jadi nanti halaman body web saya nantinya akan menjadi warna biru. Tapi ini tidak saya sarankan karna untuk pemberian warna itu adalaha nantinya pada css. Ini hanya contoh menuliskan atribut dan value.

Sebuah tag boleh saja memiliki lebih dari satu atribut, seperti ini contohnya :

<body bgcolor=”lightblue” id=”myid” class=”myclass”>

Jadi boleh tidak punya atribut sama sekali atau punya atribut banyak

       Masih banyak lagi atribut lainnya yang belum kita bahas. Kalau sahabat ingin melihat secara detail atribut lengkapnya, kalian bisa kunjungi website ini www.w3school.com/Tags baik mungkin itu dulu untuk pembahasan Tag <html> dan kita akan langsung lanjut kedalam pembahasan selanjutnya Belajar HTML dan CSS Bagian 5


Sekian dari saya
Admin - lupacode

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon