Panduann Lengkap HTML Dan CSS

Panduan Lengkap HTML dan CSS
A. Pengertian HTML
Di dalam sebuah halaman website tidak terlepas dari HTML. Hyper Text Markup Language
(HTML adalah kumpulan struktur bahasa markup bukan bahasa pemr!graman untuk
membangun sebuah halaman website. "ahasa merkup mengk!mbinasikan teks dan
in#!rmasi mengenai tambahan teks tersebut. HTML merupakan d!kumen penting standar
untuk sebuah halaman website.
Dalam pemr!graman website dibutuhkan dasar te!ri HTML. Semua bentuk web tidak
terlepas dari struktur HTML. Struktur tersebut dapat dibuat pada aplikasi berbasis teks$
seperti n!tepad$ n!tepad %$ gedit$ dan aplikasi lainnya yang mendukung pembuatan struktur
HTML.
". Struktur HTML
Setiap d!kumen HTML di awali dengan sebuah tag <html> dan diakhiri dengan </html>
tag. Tambahan d!kumen HTML ada tiga bagian yang harus ada pada d!kumen HTML.
"agian tersebut yakni&
Tag <head> dan </head> ' digunakan untuk memberikan in#!rmasi mengenai
HTML.
Tag <title> dan </title> ' berguna untuk menuliskan (udul halaman web
yang akan terlihat pada halaman br!wser.
Tag <body> dan </body> ' berisi tampilan seluruh k!nten in#!rmasi untuk
melengkapi HTML. )!nten yang ada berupa teks maupun gambar.
Selain tiga bagian di atas pada saat menuliskan k!de HTML sering digunakan k!de
k!mentar. "agaimanapun tag k!mentar sangat membatantu untuk mengetahui setiap bagain
yang telah di buat. Tag yang dapat digunakan adalah  .
C. Persiapan )ebutuhan
Pada saat menuliskan bahasa markup di butuhkan sebuah aplikasi pendukung edit!r teks
untuk memudahkan dalam membangun sebuah halaman web. Selain edit!r teks diperlukan
(uga web ser*er$ walaupun d!kumen HTML sendiri tetap dapat ditampilkan pada br!wser.
Sebuah web ser*er nantinya akan ber#ungsi pada saat pembuatan struktur data yang
membutuhkan database.
Panduan Lengkap HTML dan !! " #ahyu !etiyono
"eberapa kebutuhan yang harus dipersiapkan antara lain sebagai berikut&
+. ,dit!r Teks
Aplikasi edit!r teks sangat diperlukan untuk membangun halaman web. ,dit!r teks
yang dapat digunakan antara lain&
-!tepad$
-!tepad %$
.edit$
"lue#ish$
/. Aplikasi "r!wser
0ntuk menampilkan hasil d!kumen HTML diperlukan aplikasi br!wser. Dapat
digunakan aplikasi M!1ila 2ire#!x atau yang lainnya sebagai perbandingan hasil
tampilannya.
3. 4eb Ser*er
Aplikasi web ser*er yang dapat digunakan sebagai pendukung HTML yakni 5amp$
PhpMyadmin$ Apa6he$ dan lain7lain.
Tips dan Trik&
.unakan huru# besar atau ke6il dan menggunakan k!de HTML. 8ika menggunakan huru# besar$
gunakan huru# besar untuk semua k!de HTML.
Sedangkan huru# ke6il (uga sama gunakan seluruhnya menggunkan huru# ke6il. 98angan
ber6ampura:
D. Latihan
Pada latihan kali ini dalam pembuatan d!kumen HTML tersusun atas bagian7bagian
tersendiri. Struktur HTML tersebut diantaranya&
<html>
<head>
<title>Berisi Judul Halaman Web</title>

</head>
<body>
Berisi konten berupa teks maupun gambar
</body>
</html>
D!kumen HTML di atas agar dapat tampilkan pada br!wser harus disimpan dengan ekstensi
;.html maupun ;.htm. .unakan salah satu (enis ekstensi penyimpanan tersebut dan selalu
k!nsisten. Tidak b!leh menggunakan keduanya$ karena nantinya (ika akan memanggil
d!kumen HTML lainnya tidak akan berhasil. Sebagai 6!nt!h penyimpanannya yaitu
index.html' tentang.html' dan lain7lain. Simpanlah pada satu #!lder yang sama agar mudah
dalam memanggil d!kumen HTML yang lain.
"eberapa k!de HTML yang sering digunakan pada saat membuat isi dari halaman web
antara lain yakni&
a. Heading
2ungsi heading untuk memilih ukuran teks<huru# se6ara de#ault tanpa menggunakan
ukuran biasa yaitu pixel (misal& +/px. "uatlah s!kumen HTML seperti di bawah ini
simpan dengan #ile heading.html .
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Ini adalah teks untuk H1</h1>
<h>Ini adalah teks untuk H</h>
<h!>Ini adalah teks untuk H!</h!>
<h">Ini adalah teks untuk H"</h">
<h#>Ini adalah teks untuk H#</h#>
<h$>Ini adalah teks untuk H$</h$>
</body>
</html>
"uka menggunakan br!wser dan hasilnya seperti gambar di bawah ini$
b. .aris H!ris!ntal
S6ript atau k!de HTML yang digunakan untuk membuat garis h!ris!ntal adalah =hr>
Sebagai 6!nt!h kita buat d!kumen HTML seperti dibawah ini&
<html>
<head>
<title>%aris Horisontal</title>
</head>
<body>
Ini &ontoh garis horisontal 'ang ditampilkan(
<hr>
</body>
</html>
6. Paragra# dan .anti baris
Pada saat menuliskan teks untuk mengisi k!nten halaman web diperlukan paragra#
pada penulisannya. Hal ini untuk memper(elas barisan teks yang ada. S6ript yang
digunakan untuk membuat paragra# dan mengganti baris kalimat antara lain seperti
6!nt!h di bawah ini. ?stilah lain ganti baris yang sering adalah enter pada peng!lah
kata.
<html>
<head>
<title>)enggunaan )aragra* dan Baris +alimat</title>
</head>
<body>
)ada saat menuliskan teks untuk mengisi konten halaman
web diperlukan paragra* pada penulisann'a( Hal ini untuk
memper,elas barisan teks 'ang ada(
 
 -ontoh paragra* ini bisa digunakan untuk berbagai ide
gagasan(
 
 )enggunaan baris atau ganti baris diperlukan untuk
memisahkan paragra* 'ang satu dengan 'ang lainn'a(
.ehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan 'ang kedua( Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun &erita(

<hr>
</body>
</html>
d. Teks Miring$ Tebal dan .aris bawah
Pengunaan tek miring$ tebal dan garis bawah mengugunakan k!der tag yakni&
Miring & di akhiri dengan tag 
Tebal & diakhiri dengan tag 
.aris bawah & diakhiri dengan tag 
Sebagai 6!nt!h buatlah d!kumen HTML berikut ini.
<html>
<head>
<title>-ontoh /eks 0iring1 /ebal1 dan %aris bawah</title>
</head>
<body>
Pada saat menuliskan teks 2ini teks miring3
untuk mengisi konten halaman $eb diperlukan paragra% pada
penulisannya. Hal ini untuk memper&elas barisan teks
2ini tek tebal3 yang ada.
 
 ontoh paragra* 2ini teks garis bawah3 ini
bisa digunakan untuk berbagai ide gagasan.
 
 Penggunaan baris atau ganti baris diperlukan untuk
memisahkan paragra% yang satu dengan yang lainnya.
!ehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan yang kedua. Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun 'erita.

<hr>
</body>
</html>
e. Align
Penggunaan align ini untuk menata teks apakah rata kiri$ rata tengah$ rata kanan
maupun rata kanan7kiri. Perpaduan penataan teks ini berhubungan dengan paragra#
yaitu dengan s6ript . )!de yang digunakan pada HTML adalah&
rata kiri & align@le#t
rata tengah & align@6enter
rata kanan & align@right
rata kanan7kiri& align@(usti#y
Sebagai 6!nt!h buatlah d!kumen HTML di bawah ini$
<html>
<head>
<title>-ontoh 4lign</title>
</head>
<body>
)ni adalah 'ontoh teks paragra% rata kiri.
Pada saat menuliskan teks untuk mengisi konten halaman
$eb diperlukan paragra% pada penulisannya. Hal ini untuk
memper&elas barisan teks yang ada.
 
)ni adalah 'ontoh teks paragra% rata
tengah. Pada saat menuliskan teks untuk mengisi konten
halaman $eb diperlukan paragra% pada penulisannya. Hal
ini untuk memper&elas barisan teks yang ada.Pada saat
menuliskan teks untuk mengisi konten halaman $eb
diperlukan paragra% pada penulisannya. Hal ini untuk
memper&elas barisan teks yang ada.Pada saat menuliskan
teks untuk mengisi konten halaman $eb diperlukan paragra%
pada penulisannya. Hal ini untuk memper&elas barisan teks
yang ada.Pada saat menuliskan teks untuk mengisi konten
ini untuk memper&elas barisan teks yang ada.
 
 ontoh paragra% ini bisa digunakan untuk berbagai ide
gagasan.
 
 
)ni adalah 'ontoh pragra% rata kanan.
Penggunaan baris atau ganti baris diperlukan untuk
memisahkan paragra% yang satu dengan yang lainnya.
!ehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan yang kedua. Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun
'erita.
 
 
)ni adalah 'ontoh teks paragra% rata
tengah. Pada saat menuliskan teks untuk mengisi konten
ini untuk memper&elas barisan teks yang ada.Pada saat
menuliskan teks untuk mengisi konten halaman $eb
diperlukan paragra% pada penulisannya. Hal ini untuk
memper&elas barisan teks yang ada.Pada saat menuliskan
teks untuk mengisi konten halaman $eb diperlukan paragra%
pada penulisannya. Hal ini untuk memper&elas barisan teks
yang ada.Pada saat menuliskan teks untuk mengisi konten
ini untuk memper&elas barisan teks yang ada.

<hr>
</body>
</html>
#. 8enis dan 0kuran Huru#
)egunaan (enis dan ukuran huru# adalah untuk memilih (enis huru# yang dipakai dan
berapa besar (dalam pixel ukuran huru# tersebut. )!de tag yang di pakai dalam
HTML adalah&
<%ont %a'e(*&enis+huru%* si,e(*ukuran+huru%*> )si dari
teks dan di kahiri dengan tag </%ont>
)eterangan&
8enis huru# yang berisi berbagai (enis huru# yang dipakai. Seperti Arial$ Times -ew
A!man$ Calibri dan lain7lain. Sedangkan ukuran hurus yang dipakai dalam pixel dari
+ pixel sampai +BB pixel. -amun untuk menampilkan standar ukuran teks pada
halaman website yakni +/ pixel hingga /C pixel.
"uatlah d!kumen HTML sebagai berikut.
<html>
<head>
<title>-enis dan .kuran Huru%</title>
</head>
<body>
<h/ align('enter> ontoh -enis Huru%</h/>
<%ont %a'e(*0rial* si,e(*1p2*>
)ni adalah teks berukuran 3 pi2el dengan
&enis huru% 0rial.

</%ont>
<hr>
<%ont %a'e(*alibri* si,e(*34p2*>
&enis huru% alibri.

</%ont>
<hr>
<%ont %a'e(*Time 5e$ 6oman* si,e(*7p2*>
&enis huru% Times 5e$ 6oman.

</%ont>
<%ont %a'e(*0rial* si,e(*34p2*>
&enis huru% 0rial.

</%ont>
</body>
</html>
g. Penggunaan Supers6ript dan Subs6ript
Supers6ript berguna untuk membuat karakter huru# berpangkat. C!nt!h& /
C
sedangkan subs6ript untk membuat huru# seperti berikut ini. C!nt!h& H
/
SD
C
.
0ntuk membuat huru# seperti 6!nt!h di atas pada HTML menggunakan k!de$ yakni&
supers6ript & dan diakhiri dengan tag 
subs6ript & diakhiri dengan tag 
<html>
<head>
<title>!upers'ript dan !ubsrip't</title>
</head>
<body>
<h/> )ni adalah teks dengan e%ek supers'ript 
37 ( 8 
)ni adalah 'ontoh subs'ript 
H3!94
</body>
</html>
h. List dan Da#tar
Penggunaan list dan da#tar sangat berguna pada saat mempunyai pilihan sebuah
in#!rmasi. Pada list dan da#tar terdapat dua (enis yaitu se6ara urut (number dan tidak
urut (bullets. )!de yang digunakan antara lain&
se6ara urut$
<ol>
<li>!atu</li>
<li>:ua</li>
<li>Tiga</li>
<li>;mpat</li>
<li>dst</li>
</ol>
se6ara tidak urut
<ul>
<li>:ata /</li>
<li>:ata 3</li>
<li>:ata 7</li>
<li>:ata 4</li>
<li>dst</li>
</ul>
D!kumen HTML yang dapat dibuat seperti berikut ini.
<html>
<head>
<title>List dan :a%tar</title>
</head>
<body>
<h/>!e'ara .rutan
<ol>
<li>!atu</li>
<li>:ua</li>
<li>Tiga</li>
<li>;mpat</li>
<li>dst</li>
</ol>
 
!e'ara tidak urut
<ul>
<li>:ata /</li>
<li>:ata 3</li>
<li>:ata 7</li>
<li>:ata 4</li>
<li>dst</li>
</ul>
</h/>
</body>
</html>
i. Membuat Tabel
Table terdiri atas k!l!m dan baris. Pada saat membuat table tentukan (umlah k!l!m
dan baris agar mudah dalam pembuatannya. )!de tag untuk membuat table antara
lain&
<table>
<tr>
<td>
</td>
</tr>
</table>
)eterangan&
0ntuk memulai pembuatan table dimulai dengan tag =table> dan diakhiri dengan tag
=<table>. Tag =tr>=<tr>menun(ukan baris sedangkan tag =td>=<td>menun(ukan
k!l!m.
Sebagai 6!nt!h buatlah sebuah table dengan / k!l!m dan 3 baris.
<html>
<head>
<title>Table</title>
</head>
<body>
<table border(*/p2*>
<tr>
<td>kolom ke / baris ke /</td>
<td>kolom ke 3 baris ke /</td>
</tr>
<tr>
<td>kolom ke / baris ke 3</td>
<td>kolom ke 3 baris ke 3</td>
</tr>
</table>
</body>
</html>
"erikut ini atribut pendukung table yang sering digunakan antara lain&
Atribut 2ungsinya
widht Mengatur lebar table (dalam E
maupunn pixel
bg6!l!r (warna Memberi warna table
align Fle#t G 6enter G right G (usti#yH Mengatur rata teks pada table
ba6kgr!und @ url Memberi gambar ba6kg!rund
(. Memanggil .ambar dan Link
Link adalah met!de memanggil suatu halaman web dari satu web ke halaman web
lain. )!de s6ript yang digunakan pada HTML ialah&
=a hre#@IalamatJurlJatauJhtml>nama yang akan mun6ul di halam website=<a>
C!nt!h&
<html>
<head>
<title>Link dan <ambar</title>
</head>
<body>
<h/> ontoh link untuk memanggil halaman $eb lain
!ilakan klik <a hre%(*http=//$$$.$eb$ahyu.$eb.id*>di
sini</a> 
0tau bisa &uga dengan <a hre%(*heading.html*>Halaman $eb
pada html</a>
</h/>
</body>
</html>
0ntuk memanggil gambar dari k!de HTML agar tampil pada halaman br!wser
menggunakan k!de <img sr'(*lokasi+tempat+gambar*>. C!nt!h
d!kumen HTML berikut ini&
<html>
<head>
<title>Link dan <ambar</title>
</head>
<body>
<'enter><img sr'(*img/logo-blog.png* height(*3>>*
$idht(*3>>*></'enter> 
ontoh s'riptnya seperti ini ?lt@img
sr'(*img/logo-blog.png* height(*3>>*
$idht(*3>>*?gt@ 
ontoh link untuk memanggil halaman $eb lain 
!ilakan klik <a hre%(*http=//$$$.$eb$ahyu.$eb.id*>di
sini</a> 
0tau bisa &uga dengan <a hre%(*heading.html*>menu&u ke
halaman heading</a> 
.ntuk s'ript link di atas 'ontohnya seperti ini ?lt@a
hre%(*heading.html*?gt@di sini?lt@/a?gt@
</body>
</html>
Tips dan Trik&
.unakan tanda 6lt7 untuk mengganti tanda < dan 6gt7 untuk mengganti tanda >
Tentang Penulis
-ama & 4AHK0 S,T?KD-D
)elahiran tahun & +LL3
"idang peker(aan & Desain .ra#is
2a6eb!!k & www.#a6eb!!k.6!m<wahyuninggusti
Twitter & www.twitter.6!m<whyJusetiy!n!
4ebsite & http&<<www.webwahyu.web.id
http&<<webwahyu.w!rdpress.6!m
Deskripsi lain & )esukaan dan h!bi pada pemr!graman website membuat saya bisa
mengutak7atik. "ukannya saya bisa namun karena suka.

Panduann Lengkap HTML Dan CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Panduann Lengkap HTML Dan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Panduan Lengkap HTML dan CSS

Anda mungkin juga menyukai