MEMBUAT WEB SEDERHANA PENGENALAN HTML Halaman website memiliki
MEMBUAT WEB SEDERHANA
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 /
CONTOH PENULISAN DI NOTE PAD <html> <head> <title>judul web </title> </head> <body> Isi yang tampil di browser </body> </html>
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 latihan 1. 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. • <H 1> teks yang tampil di browser </H 1> • <H 2> teks yang tampil di browser </H 2> • <H 3> teks yang tampil di browser </H 3> • <H 4> teks yang tampil di browser </H 4> • <H 5> teks yang tampil di browser </H 5> • <H 6> teks yang tampil di browser </H 6>
CONTOH 2 <html> <head> <title>heading</title> </head> <body> <H 1> teks yang tampil di browser H SATU </H 1> <H 2> teks yang tampil di browser H DUA</H 2> <H 3> teks yang tampil di browser H TIGA</H 3> <H 4> teks yang tampil di browser H EMPAT</H 4> <H 5> teks yang tampil di browser H LIMA</H 5> <H 6> teks yang tampil di browser H ENAM</H 6> </body> </html>
HASIL DARI CONTOH 2
FORMAT TEKS
CONTOH 3 <html> <head> <title> format teks </title> </head> <body bgcolor=pink> <H 1><b> teks yang tampil </b>di browser H SATU </H 1> <H 2><font color= yellow> teks yang tampil di browser</font> <i> H DUA</i></H 2> <H 3> teks yang tampil di<u> browser </u> H TIGA</H 3> <H 4><center> teks yang tampil di browser H EMPAT</center></H 4> <H 5><tt> teks yang tampil di browser H LIMA</tt></H 5> <H 6> teks yang tampil di browser H ENAM</H 6> </body> </html>
HASIL DARI CONTOH 3
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> <H 1><b> teks yang tampil </b>di browser H SATU </H 1> <H 2><font color= yellow> teks yang tampil di browser</font> <i> H DUA</i></H 2> <H 3> teks yang tampil di<u> browser </u> H TIGA</H 3> <H 4><center> teks yang tampil di browser H EMPAT</center></H 4> <H 5><tt> teks yang tampil di browser H LIMA</tt></H 5> <H 6> teks yang tampil di browser H ENAM</H 6> <img src=m 2 m 1. 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> <H 1><font size=7 color=red> MENGGUNAKAN LINK </font></h 1> <font size=4><a href=”lat 2. html”> ke latihan 2 </a></font> <font size=4><a href=”lat 3. html”> ke latihan 3 </a></font> <font size=4><a href=”lat 4. html”> ke latihan 4 </a></font> </body> </html>
Membuat table Digunakan untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Tag yang digunakan : <table> <tr> <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> <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> <td><img src="m 2 m 1. jpg"> m 2 m</td> <td><font size=7 color=red>HAPPY WITH M 2 M</td> </tr> </table> </body> </html>
- Slides: 23
