Pemrograman web statis
Pemrograman web statis adalah salah satu mata kuliah yang
disedikan oleh ums bagi mahasiswa yang memilih jurusan informatika. Disini
disajikan ilmu tentang bagaimana cara memprogram web statis.
Ada banyak dosen yang mengajar tentang matkul ini. dan dosen yang mengajariku tentang matkul ini bernama bpk./mas./bro yogiek indra kurniawan, S.T.,M.T. , agak cerita sedikit tentang beliau, orangnya itu humoris,keren,funky abis dah pokoknya.beliau bisa tau bagaimana cara mencairkan suasana agar kelas tidak terlalu tegang.
Berhubung di kelas beliau emng dari hari demi hari, tingkat kesulitannya mulai terasa :v . tetapi beliau tau cara mengajar yang rileks dan santai.
Ada banyak dosen yang mengajar tentang matkul ini. dan dosen yang mengajariku tentang matkul ini bernama bpk./mas./bro yogiek indra kurniawan, S.T.,M.T. , agak cerita sedikit tentang beliau, orangnya itu humoris,keren,funky abis dah pokoknya.beliau bisa tau bagaimana cara mencairkan suasana agar kelas tidak terlalu tegang.
Berhubung di kelas beliau emng dari hari demi hari, tingkat kesulitannya mulai terasa :v . tetapi beliau tau cara mengajar yang rileks dan santai.
Oh iya, quotes yang saya inget dari dosen ini.
-
“yah,karena orang orang yang memilih prodi
informatika rata rata pada autis yah.?!! :v.”
-
“rumah kamu mana.?? , saya karanganyar pak.
, Kesini ngelajo.?? , Ngekos pak. Hah,ngekos.?? CUPU. :v “
-
Dll :v
Di bawah ini adalah bagian dari tag-tag pada HTML
Tag Utama
Tag Utama
|
NAMA
|
Atribut
|
Deskripsi
|
|
<html></html>
|
Baris paling atas
dari setiap file HTML
|
|
|
<head></head>
|
Informasi umum dari
sebuah halaman web
|
|
|
<title></title>
|
Judul halaman.
Terdapat pada head
|
|
|
<body></body>
|
Background, bgcolor,
bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight,
marginwidth
|
Settingan atribut
untuk seluruh dokumen
|
Modifikasi Teks
|
Tag
|
Deskripsi
|
Contoh
|
|
<b></b>
|
Teks tebal
|
Teks tebal
|
|
<i> </i>
|
Teks miring
|
Teks miring
|
|
<u> </u>
|
Teks garis bawah
|
Teks garis bawah
|
|
<pre></pre>
|
Preformatted teks
|
Contoh teks
|
|
<h1></h1>
|
Header 1
|
Header 1
|
|
<h2></h2>
|
Header 2
|
Header 2
|
|
<h3>
</h3>
|
Header 3
|
Header 3
|
|
<h4></h4>
|
Header 4
|
Header 4
|
|
<h5></h5>
|
Header 5
|
Header 5
|
|
<h6></h6>
|
Header 6
|
Header 6
|
|
<sub></sub>
|
Subscript
|
Subscript
|
|
<sup></sup>
|
Superscript
|
Superscript
|
Font
|
Tag
|
Atribut
|
Deskripsi
|
|
<font></font>
|
Color, size, name
|
Mengubah gaya suatu
huruf
|
Links
|
Tag
|
Atribut
|
Deskripsi
|
|
<a> </a>
|
Href, target, style,
class, name, id
|
Membuat link ke
dokumen atau situs lainnya
|
Gambar
|
Tag
|
Atribut
|
Deskripsi
|
|
<img>
|
Src, alt, name,
border, height, width
|
Menampilkan sebuah
gambar
|
Formatting
|
Tag
|
Deskripsi
|
Contoh
|
|
<blockquote></blockquote>
|
Digunakan untuk
mengatur text dan gambar dalam suatu tag
|
Contoh text in a
block quote format ( “ “ )
|
|
<ol></ol>
|
Ordered List
(digunakan dengan <li>)
|
1. Item 1
|
|
<ul></ul>
|
Unordered List
(digunakan dengan <li>)
|
• Item 1
|
|
<li>
|
Elemen List
|
|
|
<dd></dd>
|
Definition List
|
|
|
<dt>
|
Definition Term
|
|
|
<dd>
|
Definition
Description
|
|
|
<p></p>
|
Paragraf
|
|
|
<br>
|
Ganti baris
|
|
|
<hr>
|
Garis horizonta
|
|
|
<center></center>
|
Menengahkan elemen
|
Tabel
|
Tag
|
Deskripsi
|
Contoh
|
|
<table></table>
|
Border, cellpadding,
cellspacing, width, height, name, id, title, bgcolor, background, align,
valign
|
Mengatur semua elemen
table
|
|
<tr></tr>
|
Height, bgcolor,
background, align, valign, title
|
Membuat baris baru
|
|
<td></td>
|
Height, width,
bgcolor, background, align, valign, title, colspan, rowspan
|
Membuat kolom
|
|
<th></th>
|
Height, width,
bgcolor, background, align, valign, title, colspan, rowspan
|
Header(kepala tabel).
Otomatis ke tengah dan tebal
|
|
<tbody></tbody>
|
Height, width, align,
valign, bgcolor, background
|
Format yang berlaku
bagi cell yang diapit tag
|
|
<colgroup></colgroup>
|
Height, width, align,
valign, bgcolor, background, colspan
|
Format yang berlaku
bagi kolom
|
Form
|
Tag
|
Deskripsi
|
Contoh
|
|
<form></form>
|
Method, action, name,
enctype
|
Mengatur elemen dari
form
|
|
<input type=>
|
Text, password,
hidden, radio, checkbox, submit, image, reset
|
Variasi dari tipe
elemen input dalam form
|
|
<select></select>
|
Name, size
|
Membuat combo-box.
Digunakan bersama dengan option
|
|
<option>
|
Selected, name, value
|
|
|
<textarea></textarea>
|
Name, rows, cols,
wrap
|
Membuat Text Area
untuk input text dengan length yang lebih besar dari input text.
|
|
wrap
|
Off
virtual
physical
|
no wrap
word wrap, sent as
one line
word wrap, sent with
breaks
|
Anda
tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!.
Cukup hafalkan yang penting-penting saja seperti
<table><form><input><ul>. Tidak hafal pun tidak apa-apa
kan kita bisa melihat daftar kalau lupa, yang penting kita paham.
Contoh HTML :
Berikut adalah kode HTMLnya:
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html>
<head>
<meta charset="utf-8" />
<title>Belajar
HTML5</title>
</head>
<body>
<div id="header">
<h1>Judul
Website</h1>
<img src="logo_website.jpg" />
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="article_1">
<div id="article_header_1">
<h1>Judul
Artikel 1</h1>
<h2>Sub
Judul Artikel 1</h2>
</div>
<p>...Ini
adalah isi dari artikel 1...</p>
</div>
<div id="article_2">
<div id="article_header_2">
<h1>Judul
Artikel 2</h1>
<h2>Sub
Judul Artikel 2</h2>
</div>
<p>...Ini
adalah isi dari artikel 2...</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel
Terbaru</h1>
<ul>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link
2</a></li>
<li><a href="#">Link
3</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
|
Tidak ada komentar:
Posting Komentar