Cara Membuat Web Pure HTML

Langkah-langkah MEMBUAT WEBSITE
HTML
By : Elis & Fidela
Langkah-langkah membuat website pure HTML

1.
2.
3.
4.
5.
Buatlah sketsa website yang akan dibuat

Jalankan notepad++
Buatlah script dasar html dan disimpan dengan format .html
Memberi gambar background
Buat tabel sebagai frame/kerangka website yang akan dibuat
By : Elis & Fidela
Sketsa Website
Selamat Datang di Web TKJ Classix
cari
cari
MENU
MENU
o
o
o
o
LOGO
LOGO
Profil
Sejarah
Artikel
Download
INTERAKTIF
INTERAKTIF
o
o
LOGIN
LOGIN
Gallery
Guestbook
Nama
content
Password
Login
Login
Tidak punya account?

Sign Up
OFFICIAL
OFFICIAL GROUP
GROUP
Created by : Elis & Fidela _TKJ _SMKN 22 Jakarta
By : Elis & Fidela
Script dasar HTML

merupakan tag
berikutnya setelah tag
<html> untuk
menuliskan keterangan
tentang dokumen web
yang akan ditampilkan
merupakan section
utama dalam dokumen
web. Pada section ini
semua isi dokumen yang
akan ditampilkan di
dalam browser harus
dituliskan
merupakan tag dasar

yang mendefinisikan
bahwa dokumen ini
adalah dokumen HTML
<html>
<head>
<title> tekaje22 </title>
</head>
<body>
merupakan tag di dalam head
</body>
</html>
yang harus dituliskan untuk

memberikan judul / informasi
pada caption browser web
tentang topik atau judul dari
dokumen web yang ditampilkan
dalam browser
By : Elis & Fidela
Memberi gambar Background

Backgrou
nd
<html>gambar
<head>
</head>
<body background="10.jpg">
</body>
</html>
By : Elis & Fidela
Membuat frame/ kerangka Web

<html>
Backgroun <head>
Lebar tabel
d warna
Tinggi
tabel
</head>
Header
Header
Tata letak
tabel
<table bgcolor="#663300" width="940" height="160" align="center">

Jarak
<tr>
<td> </td>
antar sel
</tr>
</table>
Footer
Footer
Content
Content
Tata letak
tulisan dalam
<table align="center width="950" height="800" cellspacing="5">
tabel
<tr>
<td valign="top" width="175" bgcolor="#c06000"> </td>
<td valign="top" width="550" bgcolor="#fdeada"> </td>
</tr>
</table>
<table align="center" bgcolor="#663300" width="940" height="35" cellspacing="5">

<tr>
<td> </td>
</tr>
</table>
</body>
</html>
By : Elis & Fidela
Membuat frame/ kerangka Web
Footer
Footer
Content
Content
Header
Header
<html>
<head>
</head>
<table bgcolor="#663300" width="940" height="160" align="center">
<tr>
<td> </td>
</tr>
</table>
<table align="center width="950" height="800" cellspacing="5">
<tr>
<td valign="top" width="550" bgcolor="#fdeada"> </td>
</tr>
</table>
<table align="center" bgcolor="#663300" width="940" height="35" cellspacing="5">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
By : Elis & Fidela
Header
tata
letak
tulisan
Jenis
font/tulisan
Warna
font/tulisan
Ukuran
font/tulisan
<table bgcolor="#663300" width="940" height="160"

align="center">
<tr>
<td >
<div align="center"> <font face="monotype corsiva"
color=#FFFFFF"> <h1> Selamat Datang di Web Tekaje
<div
align="right"
valign="bottom">
<font face="calibri"
Classix
</h1> </font>
</div>
color="white">
<pre>
<img src="welcome.gif" width="250"> <input type="text"
name="cari" size="18"> <input type="button"
value="Cari">
</pre>
</font>
</div>
</td>
</tr>
</table>
Tag html form car
Menu Sebelah kiri
Jarak antar
tulisan
dengan
tabel
Link
<td valign="top" width="175" bgcolor="#c06000">

<table cellpadding="5">
<tr>
<td width="175" height="25" bgcolor="#984807" align="center"> <font color="#ffffff"> MENU
</font> </td>
</tr>
<tr>
<td width="175" height="150" bgcolor="#fac090" valign="top">
<ul type="circle">
<li> <a href="index.html" style="text-decoration:none"><font face="Calibri"
color="#b15a02">Profil</font></a> <br>
<li> <a href="sejarah.html" style="text-decoration:none"><font face="Calibri"
color="#000000">Sejarah</font></a> <br>
<li> <a href="artikel.html" style="text-decoration:none"><font face="Calibri"
color="#000000">Artikel</font></a> <br>
<li> <a href="download.html" style="text-decoration:none"><font face="Calibri"
color="#000000">Download</font></a> <br>
</ul> </td>
</tr>
</table>
Memoton
Link
tanpa
garis
Warna
tulisan
Jenis
font
tulisan
g baris
<tr>
<td width="175" height="25" bgcolor="#984807" align="center"> <font color="#ffffff">
INTERAKTIF </font> </td>
</tr>
<tr>
<ol type="circle">
<li> <a href=gallery.html" style="text-decoration:none"><font face="Calibri"
color="#000000">Gallery</font></a> <br>
<li> <a href=guestbook.html" style="text-decoration:none"><font face="Calibri"
color="#000000">Guestbook</font></a> <br>
</ol> </td>
</tr>
</table>
</td>
By : Elis & Fidela
Content
<td valign="top" width="550" bgcolor="#fdeada">
<p> Assalamu'alaikum Wr. Wb.
Paragraf
<p>Selamat datang di Website Classix,

<p>Website pure HTML ini menyediakan berbagai artikel yang menarik dan berbagai
file bermanfaat yang dapat kalian download disini. <br>
Tapi sebelumnya kalian harus login dulu supaya bisa mendownload file-file disini,
tentunya harus punya akun dong. <br>
Kalau belum punya akunnya, ayo daftar sekarang. <br>
<p>Demi membangun web ini menjadi lebih baik, kami mohon kritik atau pun saran
yang membangun di link Buku Tamu yang sudah kami sediakan. <br>
Sebelumnya terimakasih telah mengunjungi website ini. <br>
Selamat menjelajahi web ini ya. ^_^ <br>
<p>Oya, website pure HTML ini di desain oleh :
<p>Nama
: Elis Muhlishoh <br>
Kelas
: XI-TKJ
<br>
No. Absen : 10
<p>Nama
: Fidela Tyas
<br>
Kelas
: XI-TKJ
<br>
No. Absen : 11
</p>
</td>
By : Elis & Fidela
Menu Sebelah Kanan

<td valign="top" width="200" bgcolor="#c06000">
<tr>
<td width="200" height="25" bgcolor="#984807" align="center"> <font color="#ffffff"> LOGO </font> </td>
</tr>
<tr>
<td width="200" height="150" bgcolor="#fac090"> <img src="2.png" width="200" height="100">
</td>
</tr>
</table>
Tipe
input
password
<tr>
Tipe
Tipe
Nama
input
input
tombol
<td width="200" height="25" bgcolor="#984807"
LOGIN </font> </td>
submit align="center"> <font color="#ffffff">text
</tr>
<tr>
<pre>
<font size="3"><font face="calibri">Nama
: <input type="text" name="nama" size="15">
Password : <input type="password" name="password" size="15">

<input type="submit" value="Login">
Tidak punya account?
<a href="SignUp.html" style="text-decoration:none"><font color="blue">SIGN UP </font></a>
</font>
</pre>
</td>
</tr>
</table>
Ukuran
form
<tr>
<td width="200" height="25" bgcolor="#984807" align="center"> <font color="#ffffff"> OFFICIAL GROUP </font>
</td>
</tr>
<tr>
<td width="200" height="150" bgcolor="#fac090">
<div align="center"> <a href=""> <img src="fb.jpg" width="175" height="50"> </a> </div>
</td>
</tr>
</table>
</td>
By : Elis & Fidela
Footer
<table align="center" bgcolor="#663300" width="940" height="35"
cellspacing="5">
<tr>
<td align="center"><font face="monotype corsiva" color="#ffffff"
size="2">Created by: Elis & Fidela_Tekaje_SMKN 22 Jakarta</font></td>
</tr>
</table>
By : Elis & Fidela
By : Elis & Fidela

Cara Membuat Web Pure HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cara Membuat Web Pure HTML

Загружено:

Авторское право:

Доступные форматы

Langkah-langkah MEMBUAT WEBSITE

By : Elis & Fidela

Langkah-langkah membuat website pure HTML

Buatlah sketsa website yang akan dibuat

By : Elis & Fidela

Tidak punya account?

Created by : Elis & Fidela _TKJ _SMKN 22 Jakarta

By : Elis & Fidela

Script dasar HTML

merupakan tag dasar

yang harus dituliskan untuk

By : Elis & Fidela

Memberi gambar Background

By : Elis & Fidela

Membuat frame/ kerangka Web

<table bgcolor="#663300" width="940" height="160" align="center">

<table align="center" bgcolor="#663300" width="940" height="35" cellspacing="5">

By : Elis & Fidela

Membuat frame/ kerangka Web

By : Elis & Fidela

<table bgcolor="#663300" width="940" height="160"

Tag html form car

Menu Sebelah kiri

<td valign="top" width="175" bgcolor="#c06000">

By : Elis & Fidela

<p>Selamat datang di Website Classix,

By : Elis & Fidela

Menu Sebelah Kanan

: <input type="text" name="nama" size="15">

Password : <input type="password" name="password" size="15">

By : Elis & Fidela

By : Elis & Fidela

By : Elis & Fidela

Вам также может понравиться