Tutorial html
Dalam membangun sebuah website, salah satu bahasa pemrograman yang sangat dibutuhkan adalah HTML. HTML menjadi elemen penting dalam perkembangan website, HTML juga dapat di kombinasikan dengan bahasa atau script pendukung seperti PHP, Java Script, CSS (untuk tampilan atau style). Untuk kali ini Bali Web Design akan berbagi pengetahuan tentang “HTML”, apa itu HTML? HTML adalah singkatan dari Hyper Text Markup Language. HTML digunakan untuk membuat halaman web yang nantinya akan di baca dan diterjamahkan oleh browser (misal Internet Explorer), File yang ditulis dalam format HTML disimpan dengan ekstensi .htm atau .html . File file ini dapat ditulis/diketik pada editor seperti Notepad, WordPad, Macromedia Dreamweaver dan sebagainya
HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam setiap file HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan
</HTML>. Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :
Penulisan Tag HTML adalah incasesensitive. Artinya, <HTML> akan sama dengan <html> atau <Html>. Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.
a. HEAD
Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk mendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan
</HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :
Belajar HTML – Notepad (ilustrasi)
X
<html>
<head>
</head>
</head>
b. BODY
Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag <BODY> dan ditutup dengan tag </BODY> dibawah tag header, sehingga akan terlihat :
Belajar HTML – Notepad (ilustrasi)
X
<html>
<head>
<body>
</body>
</head>
</html>
Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka digunakan tag <TITLE> dan </TITLE>. Judul ini akan terlihat pada sudut kiri atas pada halaman web. Tag <TITLE> akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode html di bawah ini, kemudian simpanlah di C:\My Documents\hello.htm (atau dimana saja asalkan anda bisa mengingat lokasi penyimpanannya dan bisa dibuka melalui windows explorer). Ingat! Nama filenya adalah hello.htm, bukanlah hello.htm.txt atau hello.txt.
hello – Notepad (ilustrasi)
X
<html>
<head>
<title>Selamat Datang di web tutorial saya
</title>
<body>
Belajar HTML menjadi sangat mudah dan menyenangkan
</body>
</head>
</html>
Tag-tag yang digunakan dalam HTML
Tag adalah perintah – perintah yang digunakan untuk membuat suatu dokumen web, Tag tag dalam HTML ditulis dalam (“<…>“) dan diakhiri dengan (“<…/>”)
Contoh : <html> ….. </html>
Namun tidak semua tag dalam html ditulis dalam pasangan seperti diatas.
Contoh tag <br> tidak mempunyai </br>
Tag < <HTML> <HEAD> dan <BODY>
Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu dokumen html
Tag <head> dan </head> adalah bagian kepala dokumen yang bisa berisi judul dokumen atau style – style yang digunakan pada bagian <body>
Tag <body> dan </body> adalah bagian badan dari dokumen html yang memuat semua tag-tag yang digunakan untuk membuat suatu web
Contoh
1 <html>
2 <head>
3 <title> My First HTML Project </title>
4 </head>
5 <body>
6 WELCOME TO MY WEBSITE
7 </body>
8 </html>
Atribut Tag <Body>
BACKGROUND : Menentukan gambar latar belakang dari badan dokumen
BGCOLOR : Menentukan warna latar belakang dari badan dokumen
Text : Menentukan warna text yang berada dalam badan dokumen
Link : Menentukan warna text hyperlink yang berada dalam badan dokumen
1 <html>
2 <head>
3 <title> My First HTML Project </title>
4 </head>
5 <body BGCOLOR = “Green” TEXT = “Red” >
6 WELCOME TO MY WEBSITE
7 </body>
8 </html>
Tag <P>, <Br> dan <Hr>
Tag <p> digunakan untuk menandai suatu paragraf. Memiliki atribut ALIGN yang berisi LEFT, RIGHT, JUSTIFY, dan CENTER.
Tag <br> digunakan untuk pindah baris saat menulis
Tag <hr> digunakan untuk membuat garis horizontal.Memiliki atribut SIZE dan WIDTH
Contoh
1 <html>
2 <head>
3 <title> Tag P, Br dan Hr </title>
4 </head>
5 <body>
6 <p>Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga. <br><br></p>
7 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p> <hr>
8 Ini adalah garis horizontal.
9 </body>
10 </html>
Tag Heading
Tag <h1> sampai <h6> termasuk dalam tag heading
Tag tersebut biasanya digunakan untuk menentukan bagian bab, subbab dan subsubbab.
Tag <h1> ukarannya paling besar, tag <h6> ukurannya paling kecil
1 <html>
2 <head>
3 <title> Tag Heading </title>
4 </head>
5 <body>
6 <h1> Heading 1 </h1>
7 <h2> Heading 2 </h2>
8 <h3> Heading 3 </h3>
9 <h4> Heading 4 </h4>
10 <h5> Heading 5 </h5>
11 <h6> Heading 6 </h6>
12 </body>
13 </html>
Memformat Teks
<small> : Membuat teks menjadi relatif lebih kecil daripada lainnya
<big> : Membuat teks menjadi relatif lebih besar daripada lainnya
<I> : Membuat teks tercetak miring
<B> : Membuat teks tercetak tebal
<U> : Membuat teks tercetak bergaris bawah
<Sup> : Membuat teks menjadi superscript
<Strike> : Membuat teks tercoret
<Sub> : Membuat teks menjadi subscript
Tag <Font>
Tag <font> digunakan untuk memformat teks yang lebih kompleks
Atribut tag font adalah SIZE, FACE, COLOR
Size untuk menentukan ukuran
Face untuk menentukan jenis huruf
Color untuk menentukan warna
1 <html>
2 <body>
3 teks normal <br>
4 <small> teks small </small><br>
5 <big> teks big</big><br>
6 <b> teks tebal </b><br>
7 <i> teks miring </i><br>
8 <u> teks bergaris bawah </u><br>
9 Contoh superscript : x <sup>2</sup><br>
10 Contoh subscript : H<sub>2</sub>O<br>
11 <strike> Ini teks tercoret </strike><br>
12 <font size = 5 face = verdana>
13 menggunakan tag font
14 </font>
15 </body>
16 </html>
Karakter Khusus
Karakter Kode Deskripsi
“ " Kutip
& & Ampersand
< < Kurang dari
> > Lebih dari
© © Copyright
® ® Reg Trademark
+/- ± Plus Minus
1 <html>
2 <head>
3 <title> Karakter Khusus </title>
4 </head>
5 <body>
6 "
7 <br>
8 ©
9 <br>
10 ®
11 </body>
12 </html>
contoh html:
<!DOCTYPE html>
<html>
<head bgcolor=black text=white>
<title>'''Selamat Datang''' HTML</title>
</head>
<body>
<p>Nama saya Nurhaida!</p>
</body>
</html>
Sumber:
http://wildanfaizzani.wordpress.com/2011/04/13/html-hypertext-markup-language/
http://blog.balimechanicweb.net/2012/07/dasar-pemograman-website-html/