MEMBUAT WEB SEDERHANA - My Nice Palace | Fairyer Palace

Download Report

Transcript MEMBUAT WEB SEDERHANA - My Nice Palace | Fairyer Palace 

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 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>
HASIL DARI CONTOH 2
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 </pre>
Mengatur 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>
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>
<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>