 |
| [Inilah Tampilan HTML Saya] |
Pengenalan
Tag Pada HTML
Dalam HTML tag
merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita
inginkan. Tag pada HTML selalu diawali dengan <x> dan
ditutup dengan </x> dimana x adalah
perintah dari apa yang kita inginkan.
·
Daftar Tag Pada HTML
ELEMEN DASAR
|
||
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari
file HTML)
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada mukadimah)
|
Mukadimah (Header)
|
<HEAD></HEAD>
|
(keterangan umum, seperti judul
dsb.)
|
Batang Tubuh
|
<BODY></BODY>
|
(isi dari halaman HTML)
|
FORMAT
TAMPILAN
|
||
Huruf Tebal
|
<B></B>
|
(Bold)
|
Huruf Miring
|
<I></I>
|
(Italic)
|
Garis Bawah
|
<U></U>
|
(Underline - jarang digunakan)
|
Rata Tengah
|
<CENTER></CENTER>
|
(Center - berlaku untuk teks
maupun gambar)
|
Huruf Kedip
|
<BLINK></BLINK>
|
(Blinking - tag terlucu sampai
kini)
|
Ukuran Huruf
|
<FONT
SIZE=?></FONT>
|
(Font Size - boleh diisi dari 1
sampai 7)
|
Warna Huruf
|
<FONT
COLOR="#$$$$$$"></FONT>
|
|
Pilih Jenis Huruf
|
<FONT
FACE="***"></FONT>
|
|
PEMISAH
|
||
Paragraf
|
<P></P>
|
(tag penutup seringkali tak
diperlukan)
|
Align Text
|
<P
ALIGN=LEFT|CENTER|RIGHT></P>
|
|
Pndah Baris
|
<BR>
|
(pindah ke baris berikut)
|
Garis Datar
|
<HR>
|
(Horizontal Rule)
|
Penataan Letak Garis
|
<HR
ALIGN=LEFT|RIGHT|CENTER>
|
|
Tebal Garis
|
<HR SIZE=?>
|
(dalam satuan pixel)
|
Lebar Garis
|
<HR
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Garis Persentasi
|
<HR
WIDTH="%">
|
(dalam persentasi terhadap lebar
halaman)
|
LATAR BELAKANG
DAN WARNA
|
||
Latar Belakang Gambar
|
<BODY
BACKGROUND="URL">
|
(Tiled Background)
|
Warna Latar Belakang
|
<BODY
BGCOLOR="#$$$$$$"
|
(Background Color - urutan:
merah/hijau/biru)
|
Warna Huruf Teks
|
<BODY
TEXT="#$$$$$$">
|
|
TABEL
|
||
Rancangan Tabel
|
<TABLE></TABLE>
|
|
Garis Batas Tabel
|
<TABLE
BORDER=?></TABLE>
|
|
Lebar Tabel
|
<TABLE
WIDTH=?>
|
(dalam satuan pixel)
|
Lebar Tabel Persentasi
|
<TABLE
WIDTH="%">
|
(dalam satuan persen terhadap
lebar halaman)
|
Baris dalam Tabel
|
<TR></TR>
|
|
Penataan Letak Baris
|
<TR
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Sel dalam Tabel
|
<TD></TD>
|
(harus ada dalam setiap baris
tabel)
|
Penataan Letak Sel
|
<TD
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Kepala Tabel
|
<TH></TH>
|
(Table Header - seperti data
dengan Bold dan Center)
|
Penataan Letak Kepala Tabel
|
<TH
ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE> |
|
Warna Kepala Tabel
|
<TH
BGCOLOR="#$$$$$$">
| |
Berikut inilah kode untuk membuat HTML seperti pada gambar diatas:
<html>
<head>
<title>Outfit College</title>
<style type="text/css">
left { text-align: left;}
right { text-align: right;}
center { text-align; center;}
justify { text-align; justify}
</style>
<body bgcolor="#D8BFD8">
</head>
<body>
<h2> Outfit College : </h2>
“Pakai baju apa ya besok ke kampus?” Nah kamu, sadar atau nggak pertanyaan itu sering banget muncul dibenak para wanita. Apalagi kalau besok abis ngampus ada acara hang out bareng temen-temen. Pilih baju bakal jadi momen yang bikin galau dibanding milih pacar. Supaya kamu nggak galau lagi soal baju apa sih yang oke dipake ke kampus tapi tetep sopan, kita punya beberapa inspirasi nih buat kamu. Check this out! 1. Denim Style Denim adalah salah satu must have item, bisa dalam bentuk celana, jacket atau kemeja. Ada beberapa tips yang harus kamu tahu saat memutuskan untuk memakai denim: Hindari menggunakan denim oversize untuk atasan dan bawahan sekaligus. Jika kamu memutuskan memakai boyfriends jeans maka gunakanlah atasan yang lebih slim agar kamu tidak terlihat tenggelam. Gunakan atasan oversize dengan paduan skinny jeans. Padukan denim dengan ankle boots, sneakers atau heels dengan warna netral seperti coklat, abu-abu, atau hitam agar oenampilanmu terlihat lebih formal tetapi tetap fashionable. Kamu juga dapat memadukan denim dengan sweater atau scraft. Sangat nyaman untuk musim hujan dengan udara dingin. 2. Sporty Style Style ini sedang mendominasi banyak majalah fashion. Gaya ini sangat cocok untuk kamu yang cuek, atau tomboy tetapi tetap ingin terlihat fashionable. Sneekers, jacket, sneeker wedges, dan topi bisa jadi item andalan kamu untuk style ini. 3. Vintage Style Selain sporty style, gaya vintage memang nggak ada matinya. Apalagi kamu dapat mendapatkan harga lebih hemat dengan berbelanja di secondhand sjop atau bongkar-bongkar almari baju lama milik mama. Jika kamu salah satu penggemar vintage style, cobalah untuk memadukan item vintage dengan item modern. Hal ini membuat kamu terlihat lebih chic. Misalkan saat kamu memutuskan untuk memakai atasan vintage, padukan dengan skinny jeans atau modern skirt. Begitu juga sebaliknya. Oxford shoes atau boots bisa menjadi andalan kamu untuk style ini. 4. Girly Style Style ini sangat cocok untuk kamu yang memiliki kepribadian feminim. Tampil girly bukan berarti kamu harus selalu memaki rok. Tetapi lebih kepada cara kamu mix n match outfit agar terlihat feminim. Dress, skinny jeans, blouse, dan baju-baju berwarna pastel dapat menjadi andalan kamu untuk terlihat lebih feminim.
</body>
</html>
<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
nb: Tulisan yang saya beri warna merah merupakan kode warna yang dapat diganti sesuai dengan warna yang diinginkan.
Saya meminta maaf jika kode yang saya berikan sangat sederhana, karena disini saya juga masih pada tahap belajar bagaimana cara membuat HTML, semoga bermanfaat.
Selamat Mencoba Membuat HTML!
2 comments:
Sederhana jg ya buat HTML seperti ini, Thanks bgt
Hi, shabrina! Terimakasih jg sebelumnya, karena masih pemula jd html nya sederhana hehe, sama-samaa :)
Post a Comment