WEB
PROGRAMING
A.
HTML ( Hypertext
Markup Language )
Adalah
kepanjangan dari Hypertext Markup Language, sebuah kumpulan perintah-perintah
untuk web browser tentang bagaimana menampilkan isi ke user.bersifat client
side yang memungkinkan untuk menampilkan informasi dalam bentuk
teks,grafik,serta multimedia dan juga untuk menghubungkan antartampilan web
page(hyperlink).dengan sifatnya yang client side akan menghasilkan web page
yang statis artinya lebih menekankan pada disain format tampilan informasi dan
informasi yang disajikan tidak dapat di update seketika,karena tidak dapat
dilakukan request interaktif dari pengguna dan proses tidak terjadi di server
sehingga tidak menghasilkan output apapun.
HTML/XHTML
merupakan format tampilan yang digunakan untuk menampilkan halaman website.HTML
terdiri dari symbol-simbol tertentu yang sering disebut dengan tag. Sebuah
halaman website yang valid selalu diapit tag <html></html>. File
HTML umumnya memiliki akhiran *.htm atau *.html.
Tag-tag pada HTML selalu diawali dengan
<x>...</x>, dimana x tag HTML seperti <strong>,
<p>,<div>, dan lainlain.
Dibawah ini adalah tabel beberapa tag HTML yang
sering digunakan.
TAG
HTML
|
KETERANGAN
|
<html></html>
|
Tag untuk
mengapit halaman HTML
|
<head></head>
|
Tag yang
berisi informasi umum dari halaman
|
<title></title>
|
Judul Halaman
*
|
<body></body>
|
Akan
ditampilkan di browser
|
<style></style>
|
Untuk CSS *
|
<strong></strong>
|
Untuk
menebalkan teks
|
<a></a>
|
Untuk
membuat hyperlink
|
<p></p>
|
Untuk membuat
paragraf
|
<div></div>
|
Untuk membuat
layer
|
<hn></hn>
|
Untuk membuat
header **
|
<span></span>
|
Untuk inline
style (manipulasi teks)
|
<!>
|
Komentar
|
<b> . .
. </b>
|
Menebalkan
teks
|
<br> . .
. </br>
|
Menyisipkan
baris baru
|
<font> .
. . </font>
|
Menentukan
atribut font
|
<i> . .
. </i>
|
Teks miring
|
<u> . .
. </u>
|
Teks garis
bawah
|
<hr>
|
Menyisipkan
garis
|
<p> . .
. </p>
|
Menyisipkan
satu paragraph baru
|
<h1> . .
. </h1>
|
Headline
|
<li> . .
. </li>
|
List Item –
Daftar Item
|
<ol> . .
. </ol>
|
Order List –
Daftar Terurut
|
<ul> . .
. </ul>
|
UnOrder List –
Daftar Tak Terurut
|
<form> .
. . </form>
|
Membuat Form
Input
|
<table>
. . . </table>
|
Membuat table
|
<img> .
. . </img>
|
Menyisipkan
gambar
|
<input>
. . . </input>
|
Menyisipkan
objek textbox
|
<option>
. . . </option>
|
Menyisipkan
objek optional
|
<select>
. . . </select>
|
Menyisipkan
objek menu – combobox
|
<tr> . . . </tr>
|
Mendefinisikan baris table
|
<td> . .
. </td>
|
Mendefinisikan
data sel baris table
|
* Tag tersebut harus berada didalam tag
<head>...</head>
** n dapat berupa angka dari 1 – 5, contoh
<h1>...</h1>
1.
“Penerapan Teori
HTML”
1. Buka editor anda (gedit(Linux),
Notepad++(Windows), dsb))
2. Ketik kode berikut:
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Hello F**king World!!</h1>
</body>
</html>
3. Simpan pada dengan nama helloworld.html
4. Buka browser
anda(Firefox, IE, dsb) dan buka file yang baru saja anda buat
1.
“ Pengenalan Format dan
editing dalam HTML”
a)
Format Paragraph
-
< p>
tulisan /kalimat < /p >
-
< pre> … < /pre > dan <
blockoute> …. < /blockoute>
b)
Align ( pengaturan posisi tulisan
: block ovate)
-
<
P align = “left” > …< /P >
-
<
P align = “righ” > …< /P >
-
<
P align = “center”> …< /P >
c)
Format Tulisan Atau Font
-
< B > huruf atau tulisan anda < /B > = tebal
-
< U > huruf atau tulisan anda < /U > = miring
-
< I > huruf atau tulisan anda < /I > = garis
d)
Numbered Ust (Daftar Urut Angka)
-
< OL > keterangan anda
<
li> daftar 1
<
li> daftar 2
<
/OL >
e)
Underline List <UL> Daftar
Urut Bullet
Cara : < UL> daftar
pemain FCB
< li > Messi
< li > Victor Valdes
< /UL >
f)
Tambahan Format Font
-
< SUB > …. </SUB> *subscript :
tulisan dibawah text*
Ex : - H <
SUB> 2 </USB> hasilnya : H2
§ D <SUB> 15 </SUB>
hasilnya : D13
-
<SUP> …. </SUP> *superscrip : tulisan di atas text *
Ex : - 15
<SUP> 2 </SUP> x 20 <SUP> 3 </SUP> hasilnya :152 x
203
g)
Marquee : untuk membuat tulisan
berjalan .
Penulisan : < MARQUEE>
tulisan anda </MARQUEE>
Ex prog :
<html>
<head>
<title>
herry wanda </title>
</head>
<body>
<marquee> herry wanda </marquee>
</body>
</html>
h)
Horizontal Ruller < HR >
Garis
Penulisan :
<
HR with =” 75%”> </HR>
1.
<HTML>
<HEAD>
<TITLE>PERTEMUAN KE-1</TITLE>
</HEAD>
<BODY text=white
bgcolor=blue>
<center ><h1>WELCOME TO WEB PROGRAMMING</h1></center>
<hr>
<br>
<p>
<center><img
src="AG00164_.GIF">
</BODY>
</HTML>
2.
<html>
<head>
<title>Manipulasi
Teks</title>
</head>
<body>
<h1 style="color:red;textdecoration:
underline">PENGUMUMAN!</h1>
<span style="color:#FF0000">
Barang siapa yang
menemukan dompet saya, akan saya beri
<span style="fontweight:
bold;fontstyle:
italic">ISTRI, MOBIL, RUMAH dan
Segala SERTIFIKAT TANAH SAYA</span> DIJAMIN!!!.
</span>
</body>
</html>
1.
“Pembuatan Tabel Dan
Elemen”Nya Pada HTML”
a.
Pengertian tabel dalam HTML
Tabel <table> adalah
kumpulan dari beberapa baris < TR > dan di dalam baris tersebut terdapat
beberapa kolom < TD >.
Secara umum penulisan sintak
tabel adalah :
< TABLE>
<TR>
… <TD>….</TD>… <TD> … </TD> … </TD> … </TR>
<TR>
… <TD>….</TD>… <TD> … </TD> … </TD> … </TR>
</TABLE>
Arti dari sintak di atas adalah :
ð Tabel terdiri dari 2 baris
<TR> dan 2 Kolom <TD>
Autput
dari sintak di atas yaitu :
 Baris 1 = <TR> |
<TD>
|
<TD>
|
| Baris 2 = <TR> |
 <TD> |
 <TD> |
Kolom 1 =
<TD> kolom 2= <TD>
b.
Property Yang Dapat Di Atur
Dalam Tabel
-
Backround
(latar belakang tabel bisa berupa gambar/color)
Ex :
*<TD
Background=”img src”=” lokasi dan nama
file GIF”> </TD>
*<TD Background color =”black “ fore
color =”white “> </TD>
-
Lebar
dan tinggi ( dalam pixel / px atau %)
Ex:
<TD> width =”25”
height=”5”>…</TD>
-
Menggabungkan
/ merge kolom / baris tabel
·
Merge
kolom => sintacks Colspan
Ex
:
<TD Colspan =”2” > nilai </TD>
·
Merge
baris => sintacks Rouspan
Ex:
<TD Rouspan = “2” > no bp </TD>
Ex prog :
<html>
<head>
<title> prog web table </title>
</head>
<body bgcolor=blue
text=white>
<table width="50%" align="center"
border=1 >
<tr>
<td colspan=2 align="center"> MY BIODATA </td>
</tr>
<tr>
<td colspan=2 align=center valign=middle>
</td>
</tr>
<tr>
<td> BP </td>
<td> 091012007 </td>
</tr>
<tr>
<td> Namo </td>
<td> Herry Wanda </td>
</tr>
<tr>
<td> Lokal </td>
<td> 5A </td>
</tr>
<tr>
<td> Jurusan </td>
<td> Teknik Komputer </td>
</tr>
<tr>
<td
colspan=2 align=center>
<MARQUEE>
BY_Herry
Wanda</MARQUEE></td>
<BR>
<center>
<h1><b> SEKOLAH TINGGI TEKNOLOGI PAYAKUMBUH </center>
</h1></b>
</BR>
</table>
</body>
</html>
Sumber : Modul kuliah Di STTP
Tidak ada komentar:
Posting Komentar
Pemberitahuan...
komentar jangan kurang ajar, tolong jaga etika !!!!