PENGENALAN HTML
Halaman website memiliki pola tersendiri dalam pengisian teks dan gambar. Teks yang digunakan merupakan Hypertext Markup Language, sekaligus digunakan sebagai ekstensi dari file tersebut. HTML merupakan format yang disepakati untuk penulisan halaman website. Sedangkan gambar adalah yang berekstensi jpg, bmp, dan gif Format HTML merupakan format yang dapat diedit melalui Notepad dan Frontpage yang ada pada Microsoft atau program-program yang lain, misalnya Dreamweaver.
ELEMEN HTML
Elemen HTML terdiri dari :
Head, Title Body, setiap elemen diapit tanda <> (delimiter).
Teks yang ada pada delimiter disebut tag. Dan untuk mengakhiri tag digunakan tanda /
LANGKAH MEMBUAT HTML MELALUI NOTEPAD Buka program notepad yang ada di accesories ketik contoh html dibawah ini <html> <head> <title> latihan </title> </head> <body> selamat datang </body> </html> simpan dokumen html dengan nama file latihan1.html. pada menu save as type pilih All files klik save
Maka setelah disimpan, dokumen tersebut menjadi ikon Internet Explore atau browser yang lain, untuk membukanya dapat dilakukan di windows explore dengan cara doubel klik pada dokumen tersebut atau ikuti langkah berikut : aktifkan Internet Explore klik open aktifkan folder tempat penyimpanan file latihan klik atau ketik nama dokumen latihan klik ok
HEADING TEKS
Tag heading memiliki 6 buah, dimulai dari heading 1 yang berukuran besar hingga heading 6 yang berukuran paling kecil. <H1> teks yang tampil di browser </H1> <H2> teks yang tampil di browser </H2> <H3> teks yang tampil di browser </H3> <H4> teks yang tampil di browser </H4> <H5> teks yang tampil di browser </H5> <H6> teks yang tampil di browser </H6>
CONTOH 2
<html> <head> <title>heading</title> </head> <body> <H1> teks yang tampil di browser H SATU </H1> <H2> teks yang tampil di browser H DUA</H2> <H3> teks yang tampil di browser H TIGA</H3> <H4> teks yang tampil di browser H EMPAT</H4> <H5> teks yang tampil di browser H LIMA</H5> <H6> teks yang tampil di browser H ENAM</H6> </body> </html>
FORMAT TEKS
Pemformatan teks dilakukan pada bagian body, biasanya dengan diawali tag <font> dan setelah pemformatan diakhiri dengan tag </font> No Tag Fungsi 1 <b> teks </b> Huruf tebal 2 <i> teks </i> Huruf miring 3 <u> teks </u> Garis bawah 4 <strike> teks </strike> Huruf coret 5 <s> teks </s> Huruf coret 6 <sub> teks </sub> Subscript 7 <sup> teks </sup> Superscript 8 <TT> teks </TT> Huruf mesin ketik 9 <pre> teks <./pre> Menampilkan dengan jarak pra format 10 <pre width= ?> teks </preMengatur jarak huruf 11 <center> teks Rata tengah </center> 12 <blink> teks </blink> Blinking 13 <Font size= > Ukuran huruf , boleh diisi 1 -7 teks</font> 14 <font color= Warna huruf, bisa ditulis jenis warna >teks</font> dalam bahasa Inggrisnya atau dengan kode-kode warna tertentu
CONTOH 3
<html> <head> <title> format teks </title> </head> <body bgcolor=pink> <H1><b> teks yang tampil </b>di browser H SATU </H1> <H2><font color= yellow> teks yang tampil di browser</font> <i> H DUA</i></H2> <H3> teks yang tampil di<u> browser </u> H TIGA</H3> <H4><center> teks yang tampil di browser H EMPAT</center></H4> <H5><tt> teks yang tampil di browser H LIMA</tt></H5> <H6> teks yang tampil di browser H ENAM</H6> </body> </html>
PENYISIPAN GAMBAR
Tag yang digunakan untuk menyisipkan gambar adalah : <IMG SRC=URL ALIGN=PERATAAN GAMBAR, TOP/MIDDLE/BOTTOM. LEFT,RIGHT> Contoh : <img src=gambar.jpg align=top>
CONTOH 4
<html> <head> <title> PENYISIPAN GAMBAR </title> </head> <body> <H1><b> teks yang tampil </b>di browser H SATU </H1> <H2><font color= yellow> teks yang tampil di browser</font> <i> H DUA</i></H2> <H3> teks yang tampil di<u> browser </u> H TIGA</H3> <H4><center> teks yang tampil di browser H EMPAT</center></H4> <H5><tt> teks yang tampil di browser H LIMA</tt></H5> <H6> teks yang tampil di browser H ENAM</H6> <img src=m2m1.jpg width=30%> </body> </html>
HASIL CONTOH 4
HYPERLINK
Hyperlink digunakan agar halaman web yang satu dengan yang lain dapat saling terhubung. Tag yang digunakan yaitu : <a href=halaman yang dituju.html> teks yang dilink</a> Contoh : <a href=home.html> kembali </a>
Contoh 5
<html> <head> <title> menggunakan link </title> </head> <body> <H1><font size=7 color=red> MENGGUNAKAN LINK </font></h1> <font size=4><a href=lat2.html> ke latihan 2 </a></font><br> <font size=4><a href=lat3.html> ke latihan 3 </a></font><br> <font size=4><a href=lat4.html> ke latihan 4 </a></font><br> </body> </html>
Membuat table
Digunakan untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Tag yang digunakan : <table> <tr> <td> .... </td> <td> .... </td> </tr> </table> <table> .... </table> : tag awal untuk membuat tabel <tr> .... </tr> : tag untuk membuat baris <td> .... </td> : tag untuk membuat kolom
<html> <head> <title> tabel </title> </head> <body> <table border=2> <tr> <td> nama </td> <td> alamat </td> <td> no telp </td> </tr> <tr> <td> syaza naura </td> <td> damaran no.25 </td> <td> 081326003961 </td> </tr> <table> </body> </html>
<html> <head> <title> tabel 2</title> </head> <body> <table border=1 bgcolor=green> <tr width=150% height=20%> <td><center><font size=7 color=red>WELCOME</font><center></td> <td bgcolor=black><center><font size=6 color=red> to CONCERT</font></center></td> </tr> <tr> <td><img src="m2m1.jpg"><br>m2m</td> <td><font size=7 color=red>HAPPY WITH M2M</td> </tr> </table> </body> </html>