HTML DASAR 1
HTML ( hyper text markup language) adalah skrip untuk menyimpan
dokumen web.
Struktur dasar dokumen HTML
:
<html>
<head>
<title> diisi dokumen html </title>
</head>
Diisi penulisan informasi web
</body>
</html>
Struktur dasar HTML :
a. Tag
Adalah teks khusus (markup) berupa dua karakter < dan > sebagai
contoh <body> adalah tag dengan body . secara umumteks ditulis
berpasangan yang terdiri atas tag pembuka dan tag penutup ( di tambahkan
karakter / setelah karakter < sebagai contoh <body> adalah tag pembuka
isi dokumen html dan </body> ini adalah tag penutup isi dokumen html.
b. Element
Terdiri dari :
Tag pembuka
Isi
Penutup
Untuk menampilakan judul dokumen html pada web browser digunakkan element
title. <title> adalah tag pembuka judul dokumen html tag-tag yang ditulis
pada html tidak boleh tumpang tindih harus berpasangan.
Contoh penulisan yang
benar
<p>
<b>
</b>
</p>
ü Attribute
Mendefinisikan property daru suatu element html yang terdiri atas nama dan
nilai.
Contoh:
<tag>
Nama-attr=”nilai-attr”
|
Tag
|
Atrribut
|
Fungsi
|
|
<Body>
|
<body bgcolor=”red>
Text=”….”
Link=”…”
Vlink=”…”
Alink=”….”
<body
background=”D:\gambar.jpg”>
|
Background berwarna merah
Memberi warna teks
Warna link
Link yg sudah dikunjungi
Memberi gambar pada halaman
|
|
<a>….</a>
|
<a
herf=”D:\home.html”>
home </a>
<a
href=”html://www.yahoo.com/”>
yahoo ! </a>
|
Membuat hyperlink
|
|
<img>
|
<img src=”nama gambar.jpg
width=”50” height=”50” >
|
Memasukkan gambar dengan
lebar 50px tinggi 50px
|
|
<font>….
</font>
|
<font size=”2”
color=”#ffffoo” face=”arial”>…..</font>
|
Mengatur font dengan ukuran
2, warna kuning.huruf arial.
|
|
<big> ….</big>
|
<big> contoh
</big>
|
Tag untuk membuat teks
menjadi besar
|
|
<small<…
</small>
|
<small> contoh
</small>
|
Untug membuat teks menjadi
kecil
|
|
<b>…</b>
|
<b> contoh </b>
|
Untuk membuat teks menjadi
bold
|
|
<i>…</i>
|
<i>contoh</i>
|
Untuk membuat teks menjadi
italic
|
|
<strike>…
</strike>
|
<strike>contoh
</strike>
|
Untuk membuat teks tercoret
|
|
<u>…</u>
|
<u>contoh</u>
|
Teks underline
|
|
<h1>….</h1>
|
<h1>contoh
</h1>
|
Teks heading 1 tingkant
heading bisa sampai 6 semakin besar tingkatannya headong semakin kecil.
|
|
<hr>…</hr>
|
<hr widht=”600”>
<hr align=”center”
size=”5=”80%”>
|
Garis dengan lebar 600
Tag <hr> tidak perlu
di tutup, dengan tinggi 5, lebar 80% dari lebra layar browser dan rata tengah
.
|
|
<p align=”center”>
</p>
|
Pargraf rata tengah perintah
ini dapat ditulis juga dengan <center>…</center>
|
|
|
<br>
|
Tag untuk ganti baris
|
|
|
<sup>…
</sup>
|
Tag untuk superscript
|
|
|
<sub>…</sub>
|
Tag untuk subscript
|
|
|
<pre>..</pre>
|
Untuk menampilkan teks
sesuai asli nya
|
Nama-attr=”nilai-attr”
……………………………………………….
<tag>
Contoh untuk membuat warna pada background.
<body bgcolor=”black” text=”yellow”>
ü Element html
Menyatakan pada browser bahwa dokumen yang digunakan adalah html.
Sintaks:
<html>
………………………
</html>
ü Element head
ü Element
title
ü Element body
TABLE
Beberapa perintah penting untuk membuat tabel:
1. <table border=”1”> .... </table> _ merupakan
perintah utama dalam pembuatan tabel,
tabel dengan ketebalan 1px
2. <tr> ... </tr> _ tag untuk membuat baris
3. <td> ... </td> _ tag untuk membuat kolom/cell
4. colspan _ merge/melebarkan kolom/cell
5. rowspan _ merge/melebarkan baris
|
Tag
|
Atribut/Contoh penulisan
|
Fungsi
|
|
<table>
...
</table>
|
border=”...”
|
Ketebalan tabel.
Contoh:
<table border=”1”>
|
|
align=”...”
|
Pengaturan tabel (rata tengah,
kanan atau kiri)
|
|
|
width=”...”
|
Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width=”80%”> atau
<table width=”600”>
|
|
|
valign=”...”
|
Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
|
|
|
bordercolor=”...”
|
Warna border
|
|
|
bgcolor=”...”
|
Warna background tabel,
baris atau cell
|
Postingan
bang minta html templatenya dong
BalasHapus