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




Labels:
Location: Indonesia

Comments

Post a Comment

Artikel Populer

HTML dan CSS - Pengertian, Sejarah, Fungsi, dan Jenis CSS

CSS merupakan kepanjangaan dari   Cascading Style Sheets  dimana css adalah salah satu bahasa pemprogaman yang digunakan oleh seorang programer untuk membuat sebuah website.  CSS digunakan oleh programer untuk mendesain halaman depan atau tampilan dari suatu website agar lebih memiliki variasi Mengapa harus CSS? Karena di CSS ada banyak hal yang dapat kita lakukan dibandingkan dengan bahasa pemrograman inti lainnya seperti HTML dan PHP. Ketika kita menggunakan CSS, kita dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis  background  yang dipakai sesuai kemauna diri kita sendiri. Tidak hanya itu, di CSS kita juga bisa untuk mendesain sebuah  layout , variasi tampilan di berbagai perangkat yang berbeda ( respondsive ), dan masih banyak yang lainnya. Makannya t idak heran jika psada saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP. Apa itu CSS ? CSS sendiri merupakan singkatan dari...
5 comments
Read more »

Download Driver Printer Canon Pixma Ip2770

  Silahkan Download file driver printer Canon Pixma Ip 2770   melalui link di bawah ini, semoga bisa bermanfaat buat kita semua. Jika ada yang mau ditanyakan atau ada kesusahan dalam proses install Visual Studionya. bisa langsung comment di bawah iyoo atau juga bisa melalui Contak Person . Link Download driver printer   Canon Pixma Ip 2770 iP2700 series Printer Driver Ver. 2.56c (Windows) (id.canon) Sekian Dan Terimakasih ....
Post a Comment
Read more »

Squential Search (Liniear Search) - Bahasa C

  Assallammualaikum wr.wb Pada kesempatan kali ini kita akan membuat sebuah program lagi menngunakan bahasa c yaitu tentang Squential Search. Apa seh itu squential search? Squential Search atau yang biasa kita sebut Liniear  Search adalah sebuah teknik pencarian data dari aray yang paling mudah, dimana data di dalam suatu aray di baca satu demi satu, diurutkan dari index terkecil sampai index yang paling besar. dll C ontoh Squential Search Diketahui sebuah array B dengan elemen {3, 45, 75, 8, 10, 2, 17, 50, 35, 45}. Buatlah program C untuk mencari data tertentu menggunakan metoda Sequential Search.  Program Bahasa C #include <stdio.h> main() {     int A[10]= {3,45,75,8,10,2,17,50,35,45};     int I,N;     printf("\t\t\t\t\t===================================== \n");     printf("\t\t\t\t\t  ...
Post a Comment
Read more »

Pengertian CMS WordPress

Pada Artikel sebelumnnya kita sudah mempelajari apa itu CMS (Content Manajement Sistem) serta dengan contoh-contohnya sekaligus. Nah pada kesempatan kali ini mari kita bahas mengenai salah satu CMS yaitu WordPress. Apakah sudah ada yang tau apa itu WordPres?, bagaimana cara kerjanya?, yuuu kita cari tau bareng-bareng pada artikel kali ini. Daftar Belajar CMS ( Content Manajement System ) Pengertian CMS dan contohnya CMS WordPress Cara membuat CMS dst. Apa itu WordPress? WordPres adalah sebuah CMS (Content Management system) yang dapat membantu kita dalam membuat serta mengelola sebuah website tanpa menggunakan sebuah codingan. Dengan menggunakan wordpresskita bisa menata tampilan, menambah fitur-fitur, dan membuat sebuah konten website dengan mudah. WordPress diluncurkan oleh matt mullenweg dan mike little pada tahun 2004. WordPress merupakan sebuah CMS yang bisa kita gunakan secara gratis atau biasa kita sebut dengan open source. WordPress ada 2 macam, yaitu WordPress.org dan Wordpres...
Post a Comment
Read more »