1 I HTML INTRO HTML (Hyper Text Markup Language) adalah bahasa markup (kumpulan sintaks/tag yang berpasangan) untuk melukiskan dokumen web dengan bena...
HTML (Hyper Text Markup Language) adalah bahasa markup (kumpulan sintaks/tag yang berpasangan) untuk melukiskan dokumen web dengan benar. Sebuah dokumen web selalu berisikan teks tanpa terformat dan sintaks HTML. HTML TAG memiliki nama tersendiri dan selalu berpasangan seperti dan , tag pertama disebut start tag dan yang kedua disebut end tag. End tag ditulis seperti start tag dengan diawali slash sebelum nama tag.
content Struktur dokumen web HTML
Belajar HTML
JUDUL TULISAN
ini adalah sebuah paragraf
ini adalah sebuah paragraf lainnya
EDITOR
Web Editor, untuk membuat dokumen web kita membutuhkan local server, browser untuk preview dan text editor apapun misalkan : ➔ Notepad ++ ( http://notepad-plus-plus.org ) ➔ Kompozer ( http://www.kompozer.net ) ➔ Bluefish ( http://bluefish.openoffice.nl ) ➔ BlueGriffon ( http://www.bluegriffon.org ) ➔ Geany ( http://www.geany.org ) ➔ Nvu ( http://net2.com/nvu ) ➔ Screem ( http://www.screem.org )
I - 1
sekarang bukalah web editor, lalu ketiklah tag HTML berikut :
Simpanlah dokumen tersebut dengan ekstensi .htm atau .html, dan ingatlah lokasi file tersebut. Bukalah browser, dan bukalah file tersebut melalui browser (CTRL + O), dan hasilnya akan seperti berikut :
BASIC
HEADING (judul) pada html di definisikan dengan tag
sampai
judul pertama menggunakan h1
judul pertama menggunakan h2
judul pertama menggunakan h3
PARAGRAF, pada html di definisikan dengan tag
ini adalah paragraf pertama ini adalah baris kedua paragraf pertama
HTML Elemen bisa saja memiliki atribut, dan atribut memberikan informasi tambahan pada elemen tersebut dan atribut selalu disertakan di dalam start tag. Atribut selalu berpasangan seperti nama_atribut="nilai atribut", dan nilai atribut selalu diapit oleh tanda petik.
Tag comment digunakan untuk menyisipkan catatan pada source code dan komentar tidak akan ditampilkan pada browser. Tag comment dapat digunakan untuk menjelaskan kode anda sehingga membantu ketika melakukan perubahan di kemudian hari.
ini adalah sebuah paragraf
HEAD
Elemen head adalah tempat bagi seluruh elemen di dalamnya, elemen di dalam head dapat berupa script, lokasi file style sheet dan file lain yang dibutuhkan, informasi meta dokumen dan lainnya. Adapun tag yang dapat ditambahkan di dalam elemen head adalah : TITLE merupakan tag untuk mendefinisikan judul dokumen, nilai dari tag title akan ditampilkan pada tab browser.
Selamat datang di website belajar web HTML BASE merupakan tag untuk mendefinisikan lokasi file untuk seluruh URL yang bersifat relatif.
STYLE adalah tag untuk mendefinisikan informasi style dokumen, mengatur bagaimana elemen yang terdapat dalam dokumen ditampilkan pada browser.
<style type="text/css"> body{background-color:yellow;} p{color:#333;} LINK merupakan tag untuk mendefinisikan hubungan antar dokumen dan dokumen eksternal.
META merupakan tag untuk mendefinisikan metadata tentang dokumen HTML dan berfungsi sebagai SEO (search engine optimizer), metadata tidak akan ditampilkan pada browser dan umumnya berisikan keterangan dokumen, kata kunci pencarian, penulis, waktu modifikasi dan lainnya.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="description" content="tutorials HTML and CSS gratis"> <meta name="author" content="Mardhani"> <meta http-equiv="refresh" content="30">
I - 5
CSS
CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk mengatur dan memperindah dokumen HTML, css dapat diletakkan langsung pada head dokumen, start tag atau file css yang terpisah. Untuk css yang diletakkan pada head dokumen ( <style> ) serta penggunaan file css terpisah ( ) telah dicontohkan diatas, berikut contoh penggunaan css yang diletakkan pada start tag :
judul pertama menggunakan h1
ini paragraf
TABLE
Untuk membuat tabel pada HTML menggunakan tag
dan dalam sebuah tabel terdapat row (baris) yang di definisikan dengan tag
dan dalam sebuah baris terdapat beberapa cell yang di definisikan dengan tag
, pada cell inilah yang dapat diisikan data berupa teks, tautan, gambar, list, form, tabel, dan lainnya. Berikut contoh pembuatan tabel :
Contoh Pembuatan Tabel Pada HTML
Nama
Item
Harga
isi baris 1, cell 1
isi baris 1, cell 2
isi baris 1, cell 3
isi baris 2, cell 1 baris yang digabung
isi baris 2, cell 2
isi baris 2, cell 3
isi baris 3, cell 2
isi baris 3, cell 3
isi baris 4, cell 1
isi baris 4, cell 2 kolom yang digabung
I - 6
Kode diatas akan terlihat seperti gambar berikut pada browser :
Pada kode diatas terdapat beberapa tag dan atribut tambahan berikut;
Tag
Hasil
Judul tabel "Contoh Pembuatan Tabel Pada HTML"
Mengelompokkan beberapa kolom dan harus menggunakan
Penggabungan 2 baris pada kolom nama (row 2 cell 1)
colspan
Penggabungan 2 kolom (cell 2 & 3) pada baris ke 4
LIST
List biasa digunakan untuk membentuk menu dan sub menu pada web design, umumnya list memiliki dua bentuk yaitu unordered list (bulleting) dan ordered list (numbering), pada HTML bulleting dinotasikan dengan tag
sedangkan numbering dinotasikan dengan tag dan list item di notasikan dengan
Kopi
Susu
Teh
Kopi
Susu
Teh
Kode diatas akan terlihat seperti gambar berikut pada browser :
1. Kopi 2. Susu 3. Teh
• • •
Kopi Susu Teh
I - 7
BLOCK
HTML tag block terbagi dua jenis yaitu tag
yang dapat digunakan sebagai wadah bagi elemen, tag
adalah pengganti
dalam pembuatan layout web, dan selanjutnya adalah tag <span> yang merupakan block yang digunakan dengan metode inline biasanya menjadi wadah untuk teks.
Selamat datang di rumah makan <span class="nama-resto">Padang Tiji silakan melakukan pesanan
Makanan
Nasi Goreng
Nasi Bakar
Nasi Rebus (Bubur)
Minuman
Kopi
Susu
Teh
FORM
HTML Form digunakan untuk melakukan parsing/transfer data ke server, sebuah form dapat berisikan elemen input seperti text field, checkbox, radio-buttons, tombol submit, select list, textarea, fieldset, legend dan label. Berikut contoh penggunaan form :
Kode diatas akan terlihat seperti gambar berikut pada browser :
LAYOUT
Berikut adalah contoh layout dasar web menggunakan
Main Title of Web Page
Menu HTML CSS JavaScript
I - 9
Content goes here
Kode diatas akan terlihat seperti gambar berikut pada browser :
ELEMENT, adalah apapun dimulai dari start tag hingga end tag