Skip to main content

Belajar HTML Dasar #2 - Mengenal Tag, Elemen, Dan Atribut HTML

Mengenal Tag, Elemen, Dan Atribut HTML

Mengenal Tag, Element, dan Atribut HTML

Setelah sebelumnya kita membahas tentang Pengenalan HTML, Text Editor. 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.

Baca juga : Belajar HTML Dasar untuk pemula #1

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> Objek yang diisi </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 (</>).

Jenis tag yang sering digunakan dalam html berikut beberapa jenis tag yang akan sering anda jumpai kalo di web programing :

<!- ..... ->    Digunakan untuk memberi sebuah komentar atau keterangan

<!DOCTYPE html>     Digunakan untuk Mendefinisikan tipe document HTML5

<a> link </a>    Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain (membuat link)

<b> ...... </b>     Membuat teks menjadi tebal

<p> ...... </p>    Membuat pargraf

<h1> ...... </h1>    Membuat heading satu

<h2> ...... </h2>    Membuat heading dua 

<body>    Mendefinisikan body/isi dokument html 

<head>    Mendefinisikan bagian kepala dokumen html

<title>     Memdefiniskan judul halaman

<div>    Mendefinisikan halaman

<link>     Mendefinisikan hubungan antar dokumen

<script>     Mendefinisikan client-side script

<table>     Mendefinisikan table

<th>     Mendefinisikan sel header di dalam sebuah table

<td>     Mendefinisikan sel di dalam sebuah table

<tr>    Membuat baris di dalam sebuah table

<ul>    Mendefinisikan daftar dalam format bullet

<li>    Mendefinisikan list

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 lang="en">
<head>
    <title>.......</title>
</head>
<body>
    ..........
</body>
</html>


Pada contoh diatas <h2> adalah heading dua 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 bergelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.


Mungkin cukup sampai disini dulu mengenai pembahasan Tag, Element, dan Atribut HTML, untuk selanjutnya kita akan belajar mengenai membuat heading di HTML. Semoga sampai disini teman-teman bisa mengikutinya dengan baik, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

sekian dan terimakasih...


Daftar Belajar HTML Dasar

1. Belajar HTML Dasar  #1 - Belajar HTML Dasar Untuk Pemula
2. Belajar HTML Dasar  #2 - Membuat Mengenal Tag, Element, Dan Atribut Pada HTML
3. Belajar HTML Dasar  #3 - Membuat Heading Pada HTML
4. Belajar HTML Dasar  #4 - Membuat Format Text Pada HTML
5. Belajar HTML Dasar  #5 - Membuat Paragraf Pada HTML




Comments

Artikel Populer

Cara Mendaftar Hosting Gratis di InfinityFree

Nah, pada kesempatan kali ini saya akan mengajari cara mendaftar Hosting Gratis di InfinityFree. Tapi sebelumnya saya akan menjelaskan terlebih dahulu secara singkat apa itu InfinityFree. InfinityFree adalah sebuah website hosting yang memberikan Unlimited Disk Space dan Unlimited Bandwidth.  Infinityfree.net  adalah sebuah layanan hosting yang disponsori oleh iFastNet yang memiliki dua layanan yaitu berbayar (Premium) dan Gratis (free). InfinityFree juga menyediakan berbagai layanan fitur-fitur untuk layanan hosting gratis, yaitu : Hosting gratis dan cepat 99,9% Up Time Hosting tanpa batas Hosting sepenuhnya gratis Tidak ada iklan paksaan Host domain apa saja Fitur Web Hosting Infinity Free: Unlimited Disk Space Unlimited Bandwidth 10 Email Accounts 400 MySQL Databases PHP 5.4, 5.5, 5.6, 7.0 MySQL 5.6 Apache 2.4 with .htaccess Linux 3.2 Free Subdomain Name Free SSL on all websites Free Cloudflare CDN Free DNS Service Nah, setelah mengetahui sedikit mengenai apa itu IfinityFre...

Tutorial Membuat HTML Sederhana

Apa itu HTML HTML merupakan sebuah kepanjangan dari Hyper Text Markup Language. HTML juga dapat diartikan sebagai suatu file teks sederhana yang mengandung perintah-perintah berupa TAG sehingga sebuah web browser dapat menampilkan suatu halaman dengan display tertentu. Nah disini saya akan mencontohkan tutorial tentang cara untuk membuat sebuah html sederhana untuk pemua sebagai bahan belajar bersama sama. Cara Membuat html Sederhana 1. pertama kalian buka dulu teks editor kalian seperti Sublime Teks, Visual Studio Code, dll. tapi disini saya  menggunakan Visual Studio Code. 2. setelah itu langsung buat File baru 3. Kemudian Pilin Plant Teks  ==> Pilih HTML 4. Lalu ketikan html seperti gambar di bawah ini untuk menampilkan sebuah tulisan Hello Word ! di browser. <! DOCTYPE html > < html >     < head >       < title >Langkah Awal</ title >     < head >     < body >      ...

Cara Instal Visual Studio 2010 Ultimate

  Pada kesempatan kali ini, saya akan memberikan sebuah tutorial tentang bagaimana cara menginstal aplikasi microsoft visual studio 2010 Ultimate. Jika belum punya file microsoft visial studio 2010 ultimatenya, silahkan download dulu file visual studio 2010 ultimatenya Dibawah ini. Tapi sebelum melanjutkan cara menginstalnya, pertama-tama saya akan menjelahkan sedikit menginai apa itu visual studio 2010 Ultimate.  Download Visual Studio 2010 Ultimate Disini Visual Studio 2010 pada dasarnya merupakan sebuah bahasa pemrograman komputer. Dimana pengertian dari bahasa pemrograman itu adalah perintah-perintah atau instruksi yang dimengerti oleh komputer untuk melakukan tugas-tugas tertentu. Visual Studio 2010 (yang sering juga disebut dengan VB .Net 2010) selain disebut dengan bahasa pemrograman, juga sering disebut sebagai sarana (tool) untuk menghasilkan program-progam aplikasi berbasiskan windows. Beberapa kemampuan atau manfaat dari Visual Studio 2010 diantaranya seperti : Untu...

Apa itu jQuery Selectors

  Assallammualaikum wr.wb Setelah kemarin kita mengenal mengenai apa itu jQuery dan sintaknya. Nah sekarang kita akan membahas mengenai jQuery selector. Apa itu sebenarnya jQuery Selector? apakah ada yang sudah tau? kalo  belum tau, mari kita bahas di pembahasan kali ini. Apa itu jQuery Selector? Selector dapat memungkinkan kita untuk memanipulasi sebuah elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada kesempatan sebelumnya, kita sudah memlihat contoh cara memilih elemen HTML menggunakan jQuery. jQuery element selectors dan attribute selectors memungkinkan anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribute atau konten. Selectors memungkinkan kita untuk memanipulasi element HTML sebagai kelompok atau sebagai elemen tunggal. jQuery Element Selectors $ ( "p" ) : Memilih semua elemen <p> $ ( "p.intro" ) : memilih semua elemen <p> yang mempunyai class="intro" $ ( "p#demo" ) : memilih elemen ...