Web HTML

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>
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= W arna 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>
</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>
<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>
</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>

Web HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Web HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT WEB

• Buka program notepad yang ada di accesories

• simpan dokumen html dengan nama file latihan1.html.

• Hyperlink digunakan agar halaman web yang satu dengan

Anda mungkin juga menyukai