HTML

HTML

Add Comment Edit

Pengertian & Dasar-dasar HTML

1. Pengertian HTML

HTML yang sering disebut juga Hypertext markup language merupakan salah satu format atau kode yang digunakan untuk pembuatan aplikasi atau document yang berada di halaman web. Sebelum membelajari HTML anda harus mengetahui basic HTML ,yang terdiri dari:
  1. Hypertext
  2. Tags dan elements
  3. Text formatting
  4. Lists, hyperlinks, images
  5. Table, frames
  6. Cascanding style sheets

2. Dasar-Dasar HTML 

HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer data-data web yang ditulis atau berformat HTML.

Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tagtag.
Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol ` <` dan ` >`tanpa tanda kutip . Pasangan dari sebuah tag ditandai dengan tanda `/ ` dan ini menunjukan penutupan suatu tag.

Misalnya pasangan dari tag < contoh > adalah </ contoh > . Dalam hal ini < contoh >disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh > bila ditulis dengan

Atributnya adalah sebagai berikut : < contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.



Tag-tag yang terdapat pada HTML

Tag Utama
TagAtributDeskripsi
<html></html>Baris paling atas dari setiap file HTML
<head></head>Informasi umum dari sebuah halaman web
<title></title>Judul halaman. Terdapat pada head
<body></body>Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidthSettingan atribut untuk seluruh dokumen

Modifikasi Teks
TagDeskripsiContoh
<b></b>Teks tebalTeks tebal
<i> </i>Teks miringTeks miring
<u> </u>Teks garis bawahTeks garis bawah
<pre></pre>Preformatted teksContoh teks
<h1></h1>Header 1

Header 1

<h2></h2>Header 2

Header 2

<h3> </h3>Header 3

Header 3

<h4></h4>Header 4

Header 4

<h5></h5>Header 5
Header 5
<h6></h6>Header 6
Header 6
<sub></sub>SubscriptSubscript
<sup></sup>SuperscriptSuperscript

Font
TagAtributDeskripsi
<font></font>Color, size, nameMengubah gaya suatu huruf
Links
TagAtributDeskripsi
<a> </a>Href, target, style, class, name, idMembuat link ke dokumen atau situs lainnya

Gambar
TagAtributDeskripsi
<img>Src, alt, name, border, height, widthMenampilkan sebuah gambar

Formatting
TagDeskripsiContoh
<blockquote></blockquote>Digunakan untuk mengatur text dan gambar dalam suatu tagContoh text in a block quote format ( “ “ )
<ol></ol>Ordered List (digunakan dengan <li>)1. Item 1
<ul></ul>Unordered List (digunakan dengan <li>)• Item 1
<li>Elemen List
<dd></dd>Definition List
<dt>Definition Term
<dd>Definition Description
<p></p>Paragraf
<br>Ganti baris
<hr>Garis horizonta
<center></center>Menengahkan elemen

Tabel
TagDeskripsiContoh
<table></table>Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valignMengatur semua elemen table
<tr></tr>Height, bgcolor, background, align, valign, titleMembuat baris baru
<td></td>Height, width, bgcolor, background, align, valign, title, colspan, rowspanMembuat kolom
<th></th>Height, width, bgcolor, background, align, valign, title, colspan, rowspanHeader(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>Height, width, align, valign, bgcolor, backgroundFormat yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>Height, width, align, valign, bgcolor, background, colspanFormat yang berlaku bagi kolom

Form
TagDeskripsiContoh
<form></form>Method, action, name, enctypeMengatur elemen dari form
<input type=>Text, password, hidden, radio, checkbox, submit, image, resetVariasi dari tipe elemen input dalam form
<select></select>Name, sizeMembuat combo-box. Digunakan bersama dengan option
<option>Selected, name, value
<textarea></textarea>Name, rows, cols, wrapMembuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrapOff
virtual
physical
no wrap
word wrap, sent as one line
word wrap, sent with breaks
note : Anda tidak perlu menghafal semua tag tersebut. Cukup hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham.

Berikan Balasan



SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

luvne.com ayeey.com cicicookies.com mbepp.com tipscantiknya.com kumpulanrumusnya.comnya.com
Langganan: Posting Komentar ( Atom )