HTML singkatan dari Hyper Text Mark-up Language adalah bahasa yang digunakan untuk
standarisasi pada client browser untuk menampilkan data-data berupa text, gambar, music,
maupun video yang dibuat secara sedemikian rupa.
Untuk pembelajaran awal kita akan memakai editor biasa pada windows yaitu notepad, tekan
start+r maka keluar run command, lau ketikkan “notepad”. lihat gambar 1.1
mudah dan simple. Lihat gambar 1.2
pada directory yang anda kehendaki, dan disini kita contohkan memberikan nama file
“belajar html.html” pada path “Desktop” lalu diganti extensinya dengan tipe html (*.html),
lihat gambar 1.3
Dan untuk mencobanya kita perlu memasukkan sintak-sintak yang akan kita bahas nanti,
serta untuk melihat hasilnya disini kita akan memberikan contoh simple, kita akan
memasukkan sintak font untuk mengganti warna pada huruf yang kita kehendaki.
Lihat kembali notepad lalu masukkan sintak ini : <font color=#FF0000>belajar
html</font>. Dan jangan lupa untuk segera disave dengan menekan tombol Ctrl+s pada
keyboard, lalu buka file “belajar html.html” menggunakan (open with) browser yang kita
suka, disini kita menggunakan firefox. Lihat gambar 1.4 dan 1.5
serta untuk melihat hasilnya disini kita akan memberikan contoh simple, kita akan
memasukkan sintak font untuk mengganti warna pada huruf yang kita kehendaki.
Lihat kembali notepad lalu masukkan sintak ini : <font color=#FF0000>belajar
html</font>. Dan jangan lupa untuk segera disave dengan menekan tombol Ctrl+s pada
keyboard, lalu buka file “belajar html.html” menggunakan (open with) browser yang kita
suka, disini kita menggunakan firefox. Lihat gambar 1.4 dan 1.5
Maka outputnya akan terlihat pada browser kita, seperti gambar 1.6 dibawah ini :
PENDAHULUAN
Pada mulanya bahasa HTML diawali dengan sintaks <html> dan diakhiri dengan
penutupnya </html> seperti pada gambar 2.1
penutupnya </html> seperti pada gambar 2.1
Di dalam bahasa HTML ada 2 bagian penting, yaitu
1. Header
2. Body
1. Header
2. Body
Header
Header adalah bagian yang digunakan untuk mendeskripsikan sebuah website, dimana
didalam bagian ini terdapat beberapa sintaks untuk mendeskripsikan website yang akan
dibuat. Dan didalam bagian body lah semua isi sintaks-sintaks tentang website yang akan kita
buat nantinya.
didalam bagian ini terdapat beberapa sintaks untuk mendeskripsikan website yang akan
dibuat. Dan didalam bagian body lah semua isi sintaks-sintaks tentang website yang akan kita
buat nantinya.
ingat pada html kita akan mengenal backslash untuk menutup sintak, hal ini digunakan untuk
tidak terjadinya kesalahan didalam penulisan, walaupun tidak semua sintaks harus ditutup.
Dalam hal ini kita akan mencoba dengan sintaks <html> dan penutupnya adalah </html>,
sintaks <head> penutupnya </head>, sintaks <body> penutupnya </body>, dan lain
sebagainya.
tidak terjadinya kesalahan didalam penulisan, walaupun tidak semua sintaks harus ditutup.
Dalam hal ini kita akan mencoba dengan sintaks <html> dan penutupnya adalah </html>,
sintaks <head> penutupnya </head>, sintaks <body> penutupnya </body>, dan lain
sebagainya.
Didalam bagian <head> terdapat sintaks sintaks yang medeskripsikan website kita,
diantaranya :
<title>Judul Website</title>
Digunakan untuk memberikan judul dari website kita, masukkan kedalam sintaks lalu save
file kita, lalu buka kembali browser kita, dan tekan refresh, maka akan terlihat judul seperti
gambar dibawah ini :
diantaranya :
<title>Judul Website</title>
Digunakan untuk memberikan judul dari website kita, masukkan kedalam sintaks lalu save
file kita, lalu buka kembali browser kita, dan tekan refresh, maka akan terlihat judul seperti
gambar dibawah ini :
Meta Languge
Meta language adalah bahasa untuk mendeskripsikan suatau website dan sintaks-sintaks ini
berada pada sintaks <head></head>, contohnya :
berada pada sintaks <head></head>, contohnya :
<meta name="Description" content="Muhammad Nazar Agliyono's Website" />
<meta name="Keywords" content="nazar, nazar website, belajar, design, web" />
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Azaret" />
<meta name="Robots" content="index,follow" />
<link rel="icon" href="icon_website.ico" type="image/x-icon">
<meta name="Keywords" content="nazar, nazar website, belajar, design, web" />
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Azaret" />
<meta name="Robots" content="index,follow" />
<link rel="icon" href="icon_website.ico" type="image/x-icon">
Title
<title>Judul Website</title>
Sintak <title></title> berada didalam sintak <head></head> dan digunakan untuk
memberikan judul pada sebuah website.
Sintak <title></title> berada didalam sintak <head></head> dan digunakan untuk
memberikan judul pada sebuah website.
Body
Body merupakan inti dari sebuah website, dimana semua data-data terkandung didalam
bagian body ini, kita akan mengenali sintaks-sintaks dan akan mempelajarinya.
<body></body> merupakan sebuah sintaks, sintaks mempunyai attribut attribut yang
memang sudah diwariskan.
<body bgcolor=”#000000”></body> didalam sintaks body terdapat attribut yang bernama
bgcolor, dan diberikan nilai #000000 (black), yang artinya bahwa setiap bagian body,
backgroundnya akan berwarna #000000 / hitam, nah sekarang kita telah mengetahui yang
mana disebut sintaks dan yang mana disebut attribut.
Ada beberapa attribut dari sintaks diantaranya :
Background untuk mengatur background menggunakan gambar
Misalnya untuk sintak body.
<body background="ground.jpg"></body>
bagian body ini, kita akan mengenali sintaks-sintaks dan akan mempelajarinya.
<body></body> merupakan sebuah sintaks, sintaks mempunyai attribut attribut yang
memang sudah diwariskan.
<body bgcolor=”#000000”></body> didalam sintaks body terdapat attribut yang bernama
bgcolor, dan diberikan nilai #000000 (black), yang artinya bahwa setiap bagian body,
backgroundnya akan berwarna #000000 / hitam, nah sekarang kita telah mengetahui yang
mana disebut sintaks dan yang mana disebut attribut.
Ada beberapa attribut dari sintaks diantaranya :
Background untuk mengatur background menggunakan gambar
Misalnya untuk sintak body.
<body background="ground.jpg"></body>
Bgcolor untuk mengatur warna background dari object, dan berisi value kode-kode warna.
Misalnya untuk sintaks body.
<body bgcolor=#000000></body>
<body bgcolor=#FF0000></body>
<body bgcolor=#00FF00></body>
<body bgcolor=#0000FF></body>
Misalnya untuk sintaks body.
<body bgcolor=#000000></body>
<body bgcolor=#FF0000></body>
<body bgcolor=#00FF00></body>
<body bgcolor=#0000FF></body>
Align untuk mengatur posisi / paragraph dari object, berisi value left, center, right, justify
Left untuk posisi ke sebelah kiri
Center untuk posisi ke tengah
Right untuk posisi ke sebelah kanan
Justify untuk merapihkan posisi / paragraph dari bagian kanan dan kiri
Left untuk posisi ke sebelah kiri
Center untuk posisi ke tengah
Right untuk posisi ke sebelah kanan
Justify untuk merapihkan posisi / paragraph dari bagian kanan dan kiri
Cth.
<p align=left>left</p>
<p align=center>center</p>
<p align=right>right</p>
<p align=justify>justify</p>
<p align=left>left</p>
<p align=center>center</p>
<p align=right>right</p>
<p align=justify>justify</p>
Size untuk mengatur ukuran object, dan berisi value dengan tipe data integer (angka), mulai
dari 1 sampai yang kita butuhkan.
Cth
<font size=1>1</font>
<font size=2>2</font>
<font size=3>3</font>
<font size=4>4</font>
<font size=5>5</font>
dari 1 sampai yang kita butuhkan.
Cth
<font size=1>1</font>
<font size=2>2</font>
<font size=3>3</font>
<font size=4>4</font>
<font size=5>5</font>
Color untuk mengatur warna dari object, berisikan value kode-kode warna, bisa juga dengan
langsung value warnanya.
Cth
<font color=red>red</font>
<font color=green>green</font>
<font color=blue>blue</font>
<font color=#FF0000>#FF0000</font>
<font color=#00FF00>#00FF00</font>
<font color=#0000FF>#0000FF</font>
langsung value warnanya.
Cth
<font color=red>red</font>
<font color=green>green</font>
<font color=blue>blue</font>
<font color=#FF0000>#FF0000</font>
<font color=#00FF00>#00FF00</font>
<font color=#0000FF>#0000FF</font>
Face untuk mengatur bentuk dari object, dalam font biasanya digunakan untuk merubah type
font, bisa times new roman, cosmic, courier new, dan lain sebagainya.
<font face=”Times New Roman”>Times New Roman</font>
<font face=Calibri>Calibri</font>
<font face=”Courier New”>Courier New</font>
font, bisa times new roman, cosmic, courier new, dan lain sebagainya.
<font face=”Times New Roman”>Times New Roman</font>
<font face=Calibri>Calibri</font>
<font face=”Courier New”>Courier New</font>
Border untuk mengatur ketebalan table, berisi value berupa integer, sesuai keinginan kita.
Cth
<table border=1>
<tr>
<td>Table Border 1</td>
</tr>
</table>
Cth
<table border=1>
<tr>
<td>Table Border 1</td>
</tr>
</table>
Bordercolor untuk mengatur warna dari border, dan berisi value warna-warna dari kode
ataupun seacra langsung.
<table border=1 bordercolor=”#00FF00”>
<tr>
<td>Table Border 1</td>
</tr>
</table>
ataupun seacra langsung.
<table border=1 bordercolor=”#00FF00”>
<tr>
<td>Table Border 1</td>
</tr>
</table>
Width untuk mengatur lebar dari object, berisi value berupa pixel ataupun persen.
Cth
<hr width=50%>
<hr width=50>
Cth
<hr width=50%>
<hr width=50>
Height untuk mengatur tinggi dari object, berisi value berupa pixel ataupun persen.
Cth
<table border=1 height=50>
<tr>
<td height=50>Table Height 50</td>
</tr>
</table>
Cth
<table border=1 height=50>
<tr>
<td height=50>Table Height 50</td>
</tr>
</table>
email, dan biasanya attribut ini dipakai pada sintaks hyperlink,
Src untuk menentukan sumber dari object yang ingin dipanggil, biasanya attribut ini dipakai
oleh sintaks iframe, object, ataupun img.
Title untuk memberikan judul dari object, biasanya akan tampil ketika mouse hover dari
object tersebut.
<img src=gambar.jpg titl=”Jangan disentuh”></img>
attribut ini biasanya terdapat pada sintaks img ketika object gambar yang dipanggil tidak
terpenuhi.
<img src=gambar.jpg alt=gambar></img>
pastinya attribute ini bervalue integer (angka) untuk menentukan spasi nya dan juga attribute
ini digunakan oleh sintaks table.
Cellpadding untuk mengatur jumlah spasi yang terdapat antar batas border dengan isi atau
teks didaam ell tersebut, dan bervalue integer (angka), dan attribute ini digunakan oleh
sintaks table.
Colspan untuk menghubungkan beberapa kolom menjadi 1 kolom. Dan juga attribute ini
digunakan oleh sintaks table
Rowspan untuk menghubungkan beberapa baris menjadi satu, dan attribute ini digunakan
oleh sintaks table.
Behavior untuk menggerakkan object, attribut ini biasanya berada pada sintaks marquee.
<marquee behavior=alternate></marquee>
Untuk karakter berputar / bolak-balik
<marquee behavior=scroll></marquee>
Uuntuk karakter bergerak kesisi kiri dan mengulang
<marquee behavior=slide></marquee>
Untuk karakter bergerak kesisi kiri dan berhenti
Class untuk memakai salah satu class yang sudah dibuat dari style css, hal ini memudahkan
kita untuk bisa memanfaatkan style css, karena dia mempunyai sifat pewarisan.
Id sama seperti class, mengambil dari css, namun dia lebih tinggi level diatas class.
Dan kali ini kita akan mempelajari sintaks-sintaks yang digunakan didalam bahasa html, dan
tentu bahwa inti dari websit adalah didalm body, maka kita akan membuat sintaks awal
seperti pada gambar 2.17
Gambar
Tidak ada komentar:
Posting Komentar