HTML-DASAR

HTML
Irfan Prasetyo
PENGENALAN DASAR HTML (Hypertext Markup Language)
Pengenalan HTML
A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut: Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. HTML digunakan untuk membuat document yang bisa di akses melalui web.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu: Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object- object seperti image, audi, video dan juga java applet dalam document HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
Basic Tag HTML

A. Tag-tag HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML.
<BEGIN TAG> </END TAG>
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML. <HTML> ... <HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut: <ELEMENT ATTRIBUTE = value>
Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut.
Contoh: <BODY BGCOLOR=lavender>
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender. Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note Pad atau editor lainya. Caranya:
1. Ketikkan tag- tag berikut di notepad. 2. Simpan dengan nama file one.htm atau one.html 3. Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini.
B. Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML>
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML.
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan titile sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.
Contoh:
<META name=Author contents=Bocah Gunung>
Author dari document tersebut adalah Bocah Gunung Atribut http- equiv dapat di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header.
Contoh: <META http-equiv=Expires content=Wed, 7 May 2003 20:30:40 GMT>
yang akan menciptakan HTTP header : Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengapdate document tersebut pada cache.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <html> <head> <title>Welcome to HTML</title> </head> <body bgcolor="laveder"> <p>Document HTML yang Pertama</p> </body> </html>
C. Basic HTML Element

Block Level Element
Block level element yang sering di gunakan : Heading (H1 sampai H6) Contoh:
<html> <head> title>Heading Elements</title> </head> <body> <h1>Heading one</h1> <h2>Heading two</h2> <h3>Heading three</h3> <h4>Heading four</h4> <h5>Heading five</h5> <h6>Heading six</h6> </body> </html>
Paragraf (P)
Contoh: <html> <head> <title>Formating Paragraf</title> </head>
<body> <h3>Puisi Ceria</h3> <p>
2-HTML FORMAT TEKS ::
OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan elementelement untuk pemformatan teks.
MATERI: Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule)
ELEMENT BR (Line Break) Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.
Sintaks: <br>
ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").
Sintaks: <p align="left"|"center"|"right"> .......................... </p>
ELEMENT H1,H2,H3,H4,H5,H6 (Header) Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hx align="left"|"center"|"right"> .......................... </hx>
x : 1 ... 6
ELEMENT B (Bold) Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks: <b> .......................... </b>
ELEMENT I (Italic) Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i> .......................... </i>
ELEMENT U (Underline) Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks: <u> .......................... </u>
ELEMENT PRE (Preformated text) Element PRE berfungsi untuk menampilkan teks seperti apa adanya.
Sintaks: <pre> .......................... </pre>
ELEMENT CENTER Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks: <center> .......................... </center>
ELEMENT BASEFONT Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup.
Sintaks: <basefont size="pixel">
ELEMENT FONT Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel).
Sintaks: <font color="warna" face="font" size="pixel">
.......................... </font>
ELEMENT HR (Horizontal Rule) Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).
Sintaks: <hr align="left"|"center"|"right" size="pixel" width="persen" noshade>
LATIHAN
Dalam melatih kemampuan membuat HTML biasanya kita harus mencatat bahasa server dalam note pad, atau aplikaasi seperti Edit plus, Wordpress, Dreamwever. Namun kami mencoba menggunakan Edit plus dan Dreamwever dalam pengerjaannya JANGAN LUPA UNTUK MENYIMPAN FILE-FILE LATIHAN DENGAN JENIS DOKUMEN HTML DAN DALAM 1 FOLDER
Contoh . Mewarnai Background .html
Latihan dasar
1. MEMBUAT TEKS
Dalam Sofware Edit Plus atau Dreamwever silahkan anda ketik seperti pada kode bahasa di bawah <HTML> <HEAD> <TITLE> MY Personal Homepage-Everyting About Me</TITLE> </HEAD> <BODY> <H2> My Personal Homepage-Everytring About Me</H2> </BODY </HTML> Maka akan menampilkan dalam console Dreamwever
Maka apabila Dibuka melalui http dalam browsing internet maka akan sepetti ini
2. MEMBUAT WARNA PADA BACKGROUND Ketiklah kode bahasa server dengan menggunakan kode berikut
<HTML> <HEAD> <TITLE> MY HOME page </TITLE> </HEAD> <BODY> <CENTER><H1>Selamat Datang di My Homepage</H1></Center> </body> </HTML>
Maka tampilannya akan sebagai berikut
Apabila dibuka melalui http maka tampilan sebagai berikut
3. MENAMPILKAN WARNA PADA BACKGROUND 2
Ketiklah kode bahasa server html dalam console yang ada dalam Editplus3
<html> <head> <title>kode warna</title> <body bgcolor=#00FF00> <Font color= #FF000>program menampilkan warna </Font> </body> </html>
Kemudian tamplkan dalam jendela HTML
Maka akan tampil sebagai berikut
4. MEMBUAT DATA PRIBADI
Ketik kode bahasa HTML berikut dalam console Editplus 3
<HTML> <HEAD> <TITLE> MY personal homepage-EVERYTHING ABOUT ME </HEAD>
<BODY> <h1 align= "center">my personal hompage -Everything about Me </Title> </h1> <hr> <p align="center">Situs ini berisi informasi mengenai diri saya dan segala kegiatan yang saya ikuti baik yang resmi ataupun tidak resmi <h2> Data pribadi </H2> <Ol> <Li>NAMA : SAMINO <Li>NAMA PANGGILAN:SAM <li>JENIS KELAMIN:LAKI-LAKI <li>Alamat:Jl Krng Tengah Raya no 56 Tanggerang </ol>
<h3> Pendidikan Formal</h3> <ol> <li>Universitas Jaya Baya Jakarta <ul> <li>Jurusan:Teknik Sipil <li>Lulus:45 Agustus 2018 <li>Indeks Prestasi:4 </ul> <li> SMAN 1 Blambangan Jateng <ul> <li>Jurusan:IPA <li> Lulus:2018 <ol> <li>Nilai:Mengecewakan </ol> </ul> <li>Silakan lanjutkan sendiri! </ol>
<h3>Pendidikan Non-Formal</h3> </Body> </HTML>
Maka akan tampil dalam jendela HTML sebagai berikut
Formatting teks
1.FORMAT TEKS DALAM BACKGROUND BERWARNA Buka Editplus 3 Anda dan ketik kkode server HTML berikut <HTML> <Head> <title>web city</title>
</head> <body bgcolor="aqua"> <fieldset> <legenda>about me</legenda> </marquee bhavior="alternate"> <hl align="center"> welcome to my web</hl> </marquee> <hr color="red"/> <font size="4" color="blue" face="calibri"> <p align="justify"> Dia mendapati ajaran agama terdahulu </p> </font> <p align="justify"> <marquee> <img src="ko.jpg" width="100" align="left" border="S" hspace="10" title="Art Show"/> <marquee> Ia mendapat ijazah di bidang teologi kristen </p>
<p align="justify"> Puluhan buku berkenan dengan islam </p> <marquee direction="up" scrolldelay="300"> <p> <b><i><u>my faforite</u></i></b> <ol type="I"> <li>menu <ul type="disc"> <li>bakso <ul type="circle"> <li>bakso urat</li> <li>bakso tenis</li> <li>bakso biasa</li> </ul> </li> <li>sop <ul> <li>sop iga</li> <li>sop kambing</li>
<li>sop ayam</li> </ul> </li> </ul> </li> </li> </ol> </p> </marquee> </fieldset> </body> </html>
Simpan dalam forder HTML dalam bentuk file html contoh. Lat Formatting.html
Jalankan pada jendela HTML
Html image
ELEMENT IMG Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks: <img align="left"|"right"|"top"|"middle"|"bottom"
alt="text" border="pixel" width="pixel"|"%" height="pixel"|"%" hspace="pixel" vspace="pixel" src="uri">
Latihan
1. LATIHAN GAMBAR 1
Buka Editplus 3 Anda dan ketik kkode server HTML berikut
<HTML> <Head> <TITLE> Belajar Image Didalam HTML </TITLE> </HEAD> <BODY> <img Src= "22idul fitri.jpg"></img> </BODY> </HTML>
Simpan dalam forder HTML dalam bentuk file html contoh. gambar.html
1. MEMBUAT GAMBAR MENJADI BACKGROUND Buka Editplus 3 Anda dan ketik kkode server HTML berikut <HTML> <Head> <TITLE> Belajar Image Didalam HTML </TITLE> </HEAD> <BODY> <body background="gmbr.jpg"></img> html dengan BACKGROUND IMAGES </BODY>
</HTML>
Simpan dalam forder HTML dalam bentuk file html contoh. Gambar2.html
html table
ELEMENT TABLE Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.
Sintaks: <table align="left"|"center"|"right" bgcolor="color" border="pixel"
cellpadding="pixel" cellspacing="pixel" width="pixel"|"%" height="pixel"|"%" > ........................ </table>
ELEMENT CAPTION Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel).
Sintaks: <caption align="top"|"bottom"> .......................... </caption>
ELEMENT TR (Table Row) Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.
Sintaks: <tr align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color"> .......................... </tr>
ELEMENT TH (Table Header) dan TD (Table Data) Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan
Sintaks: <th align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> .......................... </th>
<td align="left"|"center"|"right" valign="top"|"middle"|"bottom"
bgcolor="color" colspan="number" rowspan="number"> .......................... </td>
Latihan
MEMBUAT TABLE
Buka Editplus 3 Anda dan ketik kkode server HTML berikut <HTML> <Head> <TITLE> latihan table </TITLE> </HEAD> <BODY> <table border=3 width=50% height=50% align="center"> <tr bgcolor="redblue" align="center"> <td>no</td> <td colspan=2>data</td>
</tr> <tr align="center"> <td>1</td> <td>budi</td> <td> margonda </td>
</tr> <tr align="center"> <td>2<td> <td>joni<td> <td>cinere<td> </tr> </table> </body> </html>
Simpan dalam forder HTML dalam bentuk file html contoh. Latihan table.html
Maka akan tampil sbg.
Html hyperlink
ELEMENT A Element A befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.
Sintaks: <a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self"> ........................... </a>
\\
Latihan
MEMBUAT HYPERLINK Jendela 1 Buka Editplus 3 Anda dan ketik kode server HTML berikut <HTML> <Head> <TITLE> Belajar Membuat Table </TITLE> </HEAD> <BODY> <p> paragraf ini merujuk ke file/Dokumen yang <a href= link_04.html>lainnya </a>
jadi tolong diperhatikan <p><p> <a name= "tujuan"><p> paragraf rujukan ada disini </a> <p><p>
</BODY> </HTML>
Simpan dalam forder HTML dalam bentuk file html contoh. Link 03.html dalam 1
folder html
Jendela 2 Buka Editplus 3 Anda dan ketik kode server HTML berikut <HTML> <Head> <TITLE> Belajar Membuat Table</TITLE>
</HEAD> <BODY> <p> paragraf ini merujuk ke file/Dokumen yang <a href= link_03.html>sebelumnya</a> <p> paragraf ini menuju file/dokumen yang sebelumnya <a href=link_03 html # tujuan > di bagian lain</a>
</BODY> </HTML> Simpan dalam forder HTML dalam bentuk file html contoh. Link 04.html dalam 1 folder html
Jalankan pada jendela HTML. Apabila kita arahkan kursor ke tulisan yang berwarna biru(sebelumnya) maka akan kembali ke jendela 1 dan kamu buat format html baru dalam jendela 3 dan hubungkan ke jendela 2 dengan kata bagian lainnya.
Kemudian setelah di klik
HTML FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).
Sintaks: <form action="action" method="GET"|"POST"> ........................... </form>
ELEMENT INPUT Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini
mempunyai attribute yaitu name, size, type, value, checked. Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.
Sintaks: <input name="name" size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked >
ELEMENT SELECT Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.
Sintaks: <select name="name" size="number" multiple > ..................... </select>
ELEMENT OPTION Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.
Sintaks: <option selected value="number" > ..................... </option>
ELEMENT TEXTAREA Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM
Sintaks: <textarea name="name" cols="number" rows="number" > ..................... </textarea>
Latihan
Membuat Kolom Isi
Ketiklah kode bahasa HTML dibawah ini dalam Dreamwever dan Edit Plus dan jangan lupa menyimpan dalam file html
<html> <head> <title> form ke 1</title>
</head> <body> <form>
Masukkan nomor anda : <input type=text name= nama> Masukkan password anda : <input type=password name= pass><br> <input type=hidden name=tersembunyi> </form>
</body> </html>
Buka pada halaman HTML
Form yang lain

Ketilah kode dibawah ini yang ada dibawwah
<html> <head> <title> form ke 1</title>
</head>
<body> <form> Masukkan nomor anda : <input type=text name= nama> </form>
</body> </html>
Lalu membuka dalam file HTML
css
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus
memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
Latihan
MEMBUAT JENDELA CSS
Buka Dreamwever Anda dan ketik kode server berikut
#wrapper{width:800px; min-height:700px; background:greenyellow; margin:auto;} #head{width:800px; min-height:200px; background:cyan url("gambar.jpg")} #isi{widht:800px; min-height:400px; background:gold} #bawah{widht:800px; min-height:100px; background:blue}
#content{width:490px; min-height:390px; background:pink; float:left;} #sidebar{widht:300px; min-height:400px; background:wheat; float:left;} #menu ul{list-style-type:none} #menu li{margin-left;20px; float:left; border:solid 1px white; padding:10 px 5px 10px 5ppx; background:bisque; } #menu{position:relative;top:-50px} #menu li a{text-decoration:none;padding:10px 5px 10px 5px;} #menu li a:hover{color:red;background:pink;}Simpan dalam forder CSS dalam bentuk file CSS
MEMBUAT WEB SEDERHANA
Setelah membuat kode untuk CSS lalu hubungkan itu dengan sebuah web sederhana untuk menampilkan web yang indah, Kita buat contoh dengan mengetik code bahasa dibawah ini dalam Edit Plus atau Dreamwever
<head> <title>*web pertama q*</title> <link rel="stylesheet" type="text/css" href="gaya.css"/>
</head> <body> <body background="gmbr.jpg"></img> "TUGAS UTS DARI BU TOYYIBAH" <div id="wrapper"> <div id="head"> </div> <div id="isi"> <div id="content"> <div id="menu"> <ul> <li><a href= barujg.html>BIODATA</a></li>
<li><a href= GAMBAR2.html>HTML</a></li> <li><a href= gontor.html>PONDOK GONTOR 8</a></li> </ul> </div> <h3>"CERITA HIDUPKU" </h3> <p>
</p> </div> <div id="sidebar"> </div> </div>
<div id="samping"> </div> </div> <marquee> <img src="aku.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="HTML.jpg" width="100" align="center" border="5"
hspace="46" title="photo kesukaan"/><img src="58.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="ira.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="35.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="1.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="2.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/><img src="6.jpg" width="100" align="center" border="5" hspace="46" title="photo kesukaan"/> </marquee> </p>
Dalam Web ini aku menulis jihadku. </p> <p align="justify"> Aku senang banget di IIUC.
Jalan karierku dimulai dari sini </p> <marquee direction="up" scrolldelay="100"> <p> <b><i><u>"Apa kau Tahu Aku?"</u></i></b> <ol type="I">
<li> Tentang hidupku deh <ul type="disc"> <li>Terdiri dari : <ul type="circle"><li>pendidikan</li> <li>keluarga</li> <li>Biodata</li> <li>Kesukaan</li>
</ul> <TITLE> latihan table </TITLE> </HEAD> <BODY> <table border=3 width=50% height=50% align="center"> <tr bgcolor=#3300CC align="center"> <td>no</td> <td colspan=2>Hidupku Haya Untuk Allah</td>
</tr> <tr align="center"> <td>1</td> <td>keimana</td> <td> ketaqwaan </td> </tr> <tr align="center"> <td>2<td> <td>tawakal<td> <td> keikhlasan <td> <td>pengorbanan<td>
<td>semoga ku miliki Ya Rab<td> </tr> </table> </body> </html>
ak
Simpan dalam satu folder dan dalam file HTML Maka akan
Lalu buat contoh kedua tentang profil kita. Coba ketik dalam Edit Plus
<html> <head> <title>web city</title> </head> <body background="9.jpg"></img> <fieldset> <legend>aBoUT mE</legend> <marquee bhavior="alternate"> <h1 align="center">This is My WEB</h1> </marquee> <hr color="red"/>
<font size="4" color="#330099" face="Agusta Shadow"> <p align="justify"> <p><a href= gaya.html >BIODATA</a> </p> </font> <p align="justify"> </HEAD> <BODY> x<img Src= "op.jpg" width="500" align="left" border="5" hspace="10" ></img> Nama Irfan Prasetyo dan umur saya 20 tahun. </p> <p align="justify"> Aku senang banget di IIUC. Berikut ini biodataku </p> <marquee direction="up" scrolldelay="300"> <p> <b><i><u>BIODATA</u></i></b> <ol type="I">
<li>Nama
:Irfan Prasetyo
<li>TTGL
:Jakarta 22 January 1991
<li>Alamat :Jl. Karang Tengah Raya Rt 01 <ul type="circle"><li>RW 08 No.23 Kel. Lebak Bulus</li> <li> Kec. Cilandak Jakarta Selatan</li> <li>DKI Jakarata</li>
</ul>
<li>Sekolah :STID AL Hikmah Fakultas Dakwah <ul type="circle"><li>STIMIK IICU Teknologi Informasi</li> <li>Universitas Terbuka Pendidikan Bahasa Inggris</li>
</ul>
<li>Hobi
:Membaca
</ul>
Maka hasil yang diperoleh adalah
Lalu buat jendela web ketiga dalam Edit Plus Sebagai contoh dalam file HTML dengan nama Pondok <HTML> <Head> <TITLE> gontor8 </TITLE> </HEAD> <BODY> <font color = "#FF0099" size ="20" <h3><a href= gaya.html>ISLAMIC CENTER GONTOR </a></h3> </font> <p>
<pre>
Pondok Modern DARUSSALAM Gontor 8 Labuhan Ratu VI-Kec.Labuhan Ratu LAMPUNG TIMUR
Setelah dibuka secara resmi pada tanggal 12 februari 2005 oleh Bapak Pimpinan Pondok Modern Gontor yang juga dihadiri oleh Kapolda Metro Jaya Irjen Pol.Firman Gani serta disaksikan oleh Pejabat Daerah dan masyarakat setempat,maka Islamic Center Gontor atau yang juga disebut Pondok Perintis Pondok Modern Darussalam Gontor yang berada di Desa Labuhan Ratu Kab. Lampung Timur langsung memulai aktivitasnya dengan membuka pendaftaran murid baru.Segala aktifitas yang dilakukan disesuaikan dengan aktifitas aktifitas di Pondok Modern Darussalam Gontor ) Menginjak usia pondok yang ke-6, Pondok Modern Darussalam Gontor 8 terus mengawali perjuangannya dengan meningkatkan kinerja para dewan guru dan pendidikan
santri terus menanamkan nilai nilai gontor demi membentuk Pimpinan Pondok generasi generasi gontory yang islami dan berakhlakul karimah. Untuk menjalankan aktifitasnya Pimpinan Pondok Modern Darussalam Gontor memberikan amanat kepada Ustdz Abdulloh Syukron dengan dibantu oleh 15 orang guru pengabdian sebagai pelaksana harian. <img Src= "35.jpg" width="500" align="left" border="5" hspace="10" ></img> Untuk mempermudah pelaksanaan harian,Pondok Perintis mengembangkan (lima ) bidang pokok.
A).PENDIDIKAN DAN PENGAJARAN Pendidikan dan pengajaran Pondok Perintis dikelompokan menjadi 4 program belajar.yaitu; 1.Play group Darussalam
Program ini diikuti oleh anak-anak pra-TK dengan usia 3-6 tahun. Adapun paran yang diajarkan meliputi;keagamaan,umum,keterampilan,kesehatan,kesenian dan Permainan. Play group pada tahun ini telah dibagi menjadi 3 kelompok belajar yang gterdiri dari kelompok belajar Play group (usia 3 4 tahun),TK A (usia 4,5 -5 tahun), TK B (6 6
tahun keatas). Dan diadakan pembaharuan dalam kurikulum yang disesuaikan dengan kurikulum PAS yang ditetapkan oleh Departemen Agama
Aktivitas yang sudah dilaksanakan adalah: ~Belajar-mengajar ~Penerimaan murid baru ~Kunjungan Ke Kapolsek Labuhan Ratu ~Kunjungan Wisata Alam ke Taman Cagar Alam Way Kambas ~ Membuat perpustakaan untuk ibu ibu Playgroup ~Mengikuti perlombaan perlombaan peringatan hari besar. ~ Renovasi dan menghias kelas Playgroup dan TK ~Mengadakan ujian dan pembagian rapor
Hingga saat ini jumlah santri play group adalah sbb: 1.Putra 2.Putri : 31 Anak : 30 Anak
__________________ JUMLAH : 61 Anak
2.Program Pengembangan Bahasa Dalam rangka meningkatkan ketrampilan santri dalam berbahasa Arab dan Inggris maka dari itu diadakan kegiatan bahasa dan Ilqo Mufradat Program ini dilaksanakan pada siang hari mulai pukul 13.30-14.00. Selain itu juga diadakan program menghafal muhadtsah dan diadakan kegiatan peningkatan bahasa yang dikoordinir bagian bahasa OPPM Gontor 8 .dan khursus bahasa Arab dan Inggris pada hari Jumat dan hari Minggu
3. Taman Pendidikan Al Quran Guna menggalakkan kecintaan dalam membaca Al Quran maka Bagian Pendidikan dan Pengajaran mengadakan recovery progamme . Program ini dilaksanakan pada pukul 14.00-14.45
4.Madrasah Tarbiyatul Athfal (MTA) Semenjak diresmikan penggunaannya, Pondok Perintis terus didatangi oleh para calon murid yang ingin mendapatkan bimbingan dan pengajaran secara langsung dari para ustadz dan Pengasuh Pondok. Rata-rata mereka berusia setingkat SD dan SLTP yang umumnya pada pagi hari mereka telah masuk di sekolah dasar atau sekolah menengah. Untuk membina mereka, Pondok Perintis membuat jenjang pendidikan Madrasah Tarbiyatul Athfal yang dilaksanaakan sore hari dengan mengambil durasi waktu 30 menit untuk tiap oelajaran. Pelajaran dimulai pada pukul 16.30 WIB. Berikut pembagiannya : ~Jam 1 ~Jam 2 :Pkl. 13.55-14.30 WIB :Pkl. 14.30-15.05 WIB
~Istirahat dan sholat :Pkl. 15.05-15.55 WIB ~Jam 3 :Pkl. 15.55-16.00 WIB
Materi pelajaran yang diajarkan adalah sbb : a). Kurikuler 1. Al-Qur`an 2. At-Tajwid 3. Al-Aqo`id 4. Al-Fiqh 8. Bahasa Arab 9. Tarikh Islam 10. Al-Hijaiyyah 11.Al-Imla`
5. Al-Hadits 6. Al-Tafsir 7. Al-Mahfudzot b). Ekstrakurikuler
12. Al-Khot 13. Ibadah Amaliyah dan Qouliyah 14. Bahasa Inggris
Disamping pelajaran di kelas maka untuk melatih mental dan membentuk kepribadian yang militan,dll. Maka diajarkan pula pelajaran ekstrakurikuler seperti: 1. 2. 3. 4. 5. 6. Kepramukaan Muhadzoroh Olah raga Kursus bahasa Arab,Bahasa Inggris,Matematika dan Komputer Kesenian,Bela Diri dan JMQ Teater, FP2WS , Tari
Kegiatan Madrasah yang telah terlaksana hingga saat ini adalah : 1. 2. 3. 4. 5. Proses belajar-mengajar tiap hari Perlengkapan data-data santri Pembuatan buku induk,leger nilai dan Rapor Pelaksanaan Ujian Pertengahan Tahun Pembagian Rapor
6. 7. 8. 9.
Perlombaan 5 K dan Kerajinan Masuk Kelas tiap minggu Membuat kantor baru Kunjungan alam ke Way Kambas Perlombaan Cerdas Cermat
10. Mengadakan evaluasi guru pada hari Jumat Hingga saat ini jumlah santri MTA Darussalam adalah sbb:
5.Kulliyyatul Azhar Untuk memberikan wadah bagi anak-anak yana rata-rata sudah duduk ditingkat SLTP /SMA juga umumnya mereka hanya bias masuk pada malam hari. Maka,bagian Pendidikan dan Pengajaran mengatur mereka dengan program pendidikan setingkat KMI Gontor , akan tetaapi hanya di ambil dirosah islamiyyah-nya saja dengan materi sbb: 1. 2. 3. 4. 5. 6. 7. 8. Al-quran At-tajwid Al-aqoid Al-fiqh At-tafsir Ai-hadist Al- mahfudzot Ai-imla
9.
Alkhot
10. Bahasa arab 11. Bahasa inggris 12. Tarikh islam ` Pembelajaran untuk putra dan putri ini terbagi menjadi dua kelompok , yakni Pembelajaran sore hari untuk Kulliyatul Azhar Putri mulai Pukul 14.00-16.30 dan pada malam hari untuk Kulliyatul Azhar Putra. Untuk sementara ini jumlah santri Kulliyatul Azhar terdiri 28 putra dan 34 putri. Dengan 2 orang guru sebagai wali kelas.
B. PENGASUHAN SANTRI
Bagian Pengasuhan Santri di Pondok Modern Darussalam Gontor 8 berfungsi membna kedisiplinan santri. Dan juga bertanggung jawab atas kelangsungan ktifitas aktifitas santri baik secara intrakulikuler maupun ekstra kulikuler. Program Pengasuhan Santri adalah membina dan menciptakan kehidupan yang Islami. Tarbawy dan Gontory dalam berbagai aktifitas.
Secara umu program pengasuhan santri terbagi menjadi 2 bagian.Bagian pertama berkenaan dengan pelaksanaan kegiatan ekstrakulikuler. Bagian kedua berkenaaan dengan kepengasuhan yang mengarah kepada pembentukan kehidupan santri yang berbudi tinggi, bermental baik, membentuk etika yang baik dalam bergaul, tekun dalam beribadah dll. Program yang telah terlaksana oleh Pengasuhan Santri adalah sebagai berikut. 1. 2. 3. 4. 5. 6. 7. 8. 9. Membentuk OPPM Pondok Modern DARUSSA. Gontor 8 yang baru Membimbing santri ketika shalat Menangani anak anak yang melanggar disiplin Memeriksa perlengkapan anak anak Mencatat anak anak yang melakukan pelanggaran Membina bagian bagian OPPM Bertanggung jawab atas jalandya setiap acara Meningkatkan disiplin santri
C. BIDANG DAKWAH
Dunia Pondok Modern Darussalam Gontor memiliki tiga isi yang sangat pokok,yaitu bidang Keagamaan,Keilmuan, Kemasyarakatan
Dalam mengembangkan misinya Pondok Perintis juga mulai mengembangkan dakwah islamiyahnya kepada masyarakat sekitar. Sihingga saat ini apa yang telah dilakukan oleh pondok perintis dalam bidang dakwah adalah:
1.Mengadakan pengajian umum malam sabtu yang diikuti oleh masysrakat setempat dan Wali santri. 2.Memenuhi undangan ceramah diluar dalam bentuk yasinan atau ceramah Agama. 3.Mengadakan ceramah umum pada peringatan hari besar islam dan hari raya qurban.
D.BIDANG KEMASYARAKATAN
Dalam bidang kemasyarakatan Pondok Perintis teleh memulai hubungan dengan mengadakan beberapa kegiatan , diantaranya :
1.membetuk club Sepakbola dan bolavoli dengan nama Inqortis yang diikuti para asatidz dan para pemuda sekitar pondok.
2.Melibatkan masyarakat dalam beberapa acara seperti penyambelihan hewan qurban , pengajian pengajian umum dan kerja bakti.
3.Mengikuti kegiatan kegiatan yang diadakan oleh RT setempat dalam bentuk yasinan bersama secara bergilir. 4. Mengikuti kerja bakti
5.Mengadakan penyembelihan hewan qurban nersama masyarakat di podok portis. <img Src= "15.jpg" width="500" align="left" border="5" hspace="10" ></img> E. BIDANG PERTANIAN
Pertanian merupakan sector penting bagi Pondok Mmodern Darussalam Gontor 8. Karena dari sector ini adalah sumber dana untuk operasional pondok.. Pada tahun ini banyak kemajuan dalam bidang pertanian. Adapun kegiatan yang telah dilakanakan dalam bidang pertanian adalah sebagai berikut.
1. 2.
Membuka Ladang di daerah Raja Basa Panen raya cabai, kembang kol, pare, jagung , singkong, kacang panjang,
terung,melon.
3. 4.
Membeli alat-alat pertanian baru Membeli pupuk tambahan yang baru
RAGAM AKTIFITAS PONDOK
1.
PELANTIKAN OPPM DAN KOORDIANTOR GERAKAN KEPRAMUKAAN
YANG BARU Pada hari Ahad, 27 Syawal 1431 H untuk kedua kalinya diadakan pengurus OPPM Pondok Modern Darussalam Gontor 8guna melatih santri dalam berorganisai dan berpegang teguh pada \
motto Mau dipimpin dan siap memimpin masa bakti 1432 H 1433 H / 2011 M 2012 M,
berjumlah 35 orang yang mliputi santri KUlliyatul Azhar dan kader Kelas 6 MTA
2.
ART SHOW
Untuk meningkatkan kreatifitas sabtri dalam berseni, maka pada tanggal 17 Oktober 2010 diadakan Pagelaran seni Art Show dalam acara iini ditampilkan berbagai jenis kesenian,
seperti Tari daerah, Tari kombinasi, \lukis, drama, pantomim. Dan dalam acara ini dinuka pendaftaran khusus seperti: kursus bahasa arab, bahas inggris, matematika, Perbeda, Persada, lukis, seni teater, seni tari, FP2WS, volley, futsal, bulu tangkis, badminton, dsb.
3.
PEMBUKAAN TAHUN AJARAN BARU 2011 2012
Bagian pendidikan dan pengajaran Pondok Modern Darussalam Gontor 8, membuka tahun ajaran baru periode 2011 2012, dalam pembukaan ini terdata 235 santri, yang terdiri dari Playgroup dan TK berjumlah 61 santri, santri MTA 149, santri Azhar 27 santri
4.
SUPER CAMP
Super Camp merupakan kegiatan perkemahan santri dari kelas I 6 MTA yang diadakan bulan November 2010, untuk mempersiapkan mental dan spiritual santri agar dapat menjadi pribadii yang mandiri , kreatif dan mampu membangun kebersamaan. Dengan beraneka ragam kegiatan kepramukaan yang berlasung selama 2 hari dan bertepat di Pondok Modern Darusslam Gontor 8
5.
KEGIATAN IDUL ADHA
Kegiatan ini dilaksanakan pada tanggal 10 Dzulhijah 1431 H. Dengan kambing yang disembelih sebanyak 14 ekor. Daging yang diolah dibagikan kepada masyarakat sekitar
dengan ukuran 1,5 kg/bagian.Acara ini diikuti oleh santri dan santriwati , wali santri dan masyarakat. Dirnya diadakan beberapa panca lomba untuk MTA dan Play Group. Dan diakhirnya diadakan Tasyakuran yang dimeriahkan dengan perlombaan Nasyid dan Folksong
6.
PERINNGATAN MAULID NABI BESAR MUHAMMAD SAW
Dalam rangka meningkatkan hubungan masyarakat dalam nuansa dakwah dan mengenang perjuangan Rasullullah maka Pondok Modern Darussalam Gontor 8 mengadakan acara Peringatan Maulid Nabi Besar Muhammad SAW Untuk memberdayakan alumni Gontor maka penceramah yang menggisi acara tersebut adalah ketua IKPM Cabang Lampung Timur yaitu Ust. Subhan Aziz. Dalam acara tersebut masayarakat merasa terkesan dengan apa yang mereka lihat dan yang mereka dengar tentang gontor. Apalagi ditambah dengan penampilan para santri yang cukup menarik perhatian
7.
PERINGATAN 1 MUHARAM
Dalam rangka menyambut tahun baru Islam yang lebih baik ,maka diadakan berbagai macam kegiatan lomba santri MTA dan Azhar antaranya lomba Futsal, Badminton, Volley, Lomba Masak, dsb
8.
KUNJUNGAN KE KAPOLSEK LABUHAN RATU
Pada tanggal 12 Maret 2011 Pondok Modern Darussalam Gontor 8 mengadakan kunjungan bersama anak Play Group ke Kapolsek Labuhan Ratu. Dalam kunjungan ini santri Playgroup diajarkan berbagai macam hal tentang polisi
9.
WISATA ALAM DI WAY KAMBAS
Untuk mengenal lebih dekat dengan alam dan untuk mengenali santri beberapa sedikit khazanah tentang Gajah dan Badak maka Pondok Modern Darussalam Gontor 8 mengadakan kunjungan wisata alam ke Pusat Penagkaran gajah dan badak bercula satu di Way Kambas. Dallam acara ini dimeriahkan pula denga penampilan anak Playgruop dan MTA. Juga diadakan PPL(Pratek Kerja Lapangan ) untuk AMSUS
10. GONTOR 8 OLIMPIED Untuk meningkatkan kresi seni, bahasa, olahraga dan kepramukaan diadakan Pekan Olah Raga dan Seni dalam bentuk GONTOR 8 OLIMPIED.Acara ini berlangsung dari tanggal 8-15 Mei 2011.Dalam acara pembukaan diadakan perlombaan eksidentil seperti pukul air,hulahop, lomba tiup balon dsb.Acara Gontor Olimpied berlangsung selama seminggu yang terdiri dari:
a.
Haflatul Tilawatil Quran (HTQ)
b. c. d. e. f.
Lomba Muhadatsah dan Karaoke Lomba Public Speaking Contest Fighting Wajib Drama Contest Wide Game
11. PANGGUNG GEMBIRA Acara terbesar diakhir tahun yakni adalah Panggung Gembira.yang akan dilaksanakan pada tanggal 23 Juli 2011. Dalam acara ini Para dewan guru Pondok Modern Darussalam Gontor 8 bekerjasama dengan santri dan masyarakat untuk bersama menyukseskan acara ini. Acara yang akan ditampilkan antara lain, Koor,Puisi, Tari Nusantra, Drama Tragedi dsb.
SERBA SERBI
1.
Pada tanggal 22-25 Desember 2011 Pondok Modern Darusssalam Gontor 8 mengutus
kontingen perkemahan Saka Bayangkara di kecamatan Mataram Baru. Kontingen Gontor 8 dapat meraih banyak juara dalam berbagai perlombaan tersebut. 2. Mengutus 2 orang ustadz sebagai perwakilan Kecamatan Labuhan Ratu dala Lomba
Musabaqah Tilawatil Quran (MTQ) se- Lampung Timur di Kecamatan Sekampung.Gelar juara 2 cabang tafsir bahasa Arab diraih oleh Al Ustadz Irfan Prasetyo utusan Gontor 8.
</pre> </p> <body background="12.jpg"></img>
</BODY> </HTML>
Lalu hasilnya akan tampil
Kilk pada bagian kolom BIODATA, PONDOK GONTOR, HTML maka jendela akan saling berhubungan.

HTML-DASAR

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

HTML-DASAR

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

PENGENALAN DASAR HTML (Hypertext Markup Language)

A. World Wide Web

C. Browser dan Editor

Basic Tag HTML

<BEGIN TAG> </END TAG>

Contoh: <BODY BGCOLOR=lavender>

B. Struktur HTML Document

<META name=Author contents=Bocah Gunung>

Contoh: <META http-equiv=Expires content=Wed, 7 May 2003 20:30:40 GMT>

C. Basic HTML Element

<body> <h3>Puisi Ceria</h3> <p>

2-HTML FORMAT TEKS ::

Sintaks: <p align="left"|"center"|"right"> .......................... </p>

<hx align="left"|"center"|"right"> .......................... </hx>

Sintaks: <b> .......................... </b>

<i> .......................... </i>

Sintaks: <u> .......................... </u>

Sintaks: <pre> .......................... </pre>

Sintaks: <center> .......................... </center>

Sintaks: <basefont size="pixel">

Sintaks: <font color="warna" face="font" size="pixel">

Sintaks: <hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

Contoh . Mewarnai Background .html

Maka tampilannya akan sebagai berikut

Apabila dibuka melalui http maka tampilan sebagai berikut

3. MENAMPILKAN WARNA PADA BACKGROUND 2

Kemudian tamplkan dalam jendela HTML

Maka akan tampil sebagai berikut

4. MEMBUAT DATA PRIBADI

Ketik kode bahasa HTML berikut dalam console Editplus 3

<HTML> <HEAD> <TITLE> MY personal homepage-EVERYTHING ABOUT ME </HEAD>

<h3>Pendidikan Non-Formal</h3> </Body> </HTML>

Maka akan tampil dalam jendela HTML sebagai berikut

Jalankan pada jendela HTML

Sintaks: <img align="left"|"right"|"top"|"middle"|"bottom"

alt="text" border="pixel" width="pixel"|"%" height="pixel"|"%" hspace="pixel" vspace="pixel" src="uri">

Buka Editplus 3 Anda dan ketik kkode server HTML berikut

Jalankan pada jendela HTML

Jalankan pada jendela HTML

Sintaks: <table align="left"|"center"|"right" bgcolor="color" border="pixel"

cellpadding="pixel" cellspacing="pixel" width="pixel"|"%" height="pixel"|"%" > ........................ </table>

Sintaks: <caption align="top"|"bottom"> .......................... </caption>

Sintaks: <tr align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color"> .......................... </tr>

Sintaks: <th align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> .......................... </th>

<td align="left"|"center"|"right" valign="top"|"middle"|"bottom"

bgcolor="color" colspan="number" rowspan="number"> .......................... </td>

</tr> <tr align="center"> <td>1</td> <td>budi</td> <td> margonda </td>

Maka akan tampil sbg.

Sintaks: <a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self"> ........................... </a>

Jalankan pada jendela HTML

Jalankan pada jendela HTML

Jalankan pada jendela HTML

Kemudian setelah di klik

Sintaks: <form action="action" method="GET"|"POST"> ........................... </form>

Sintaks: <input name="name" size="number"

Sintaks: <select name="name" size="number" multiple > ..................... </select>

Sintaks: <option selected value="number" > ..................... </option>

Sintaks: <textarea name="name" cols="number" rows="number" > ..................... </textarea>

</head> <body> <form>

Buka pada halaman HTML

Form yang lain

<head> <title>web pertama q</title> <link rel="stylesheet" type="text/css" href="gaya.css"/>