Materi HTML

10/19/2019
HTML
 singkatan dari HyperText Markup Language
 menentukan tampilan suatu teks dan tingkat kepentingan dari
HTML teks tersebut dalam suatu dokumen.
Software yang diperlukan:
 Text editor sederhana.
HyperText Markup Language Contoh:
Windows: Notepad
Linux: Bluefish, gEdit, mcedit, pico, dll
 Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, Opera dan Firefox
Linux: Firefox dan Conqueror.
Istilah-istilah dalam HTML : Tag Utama dalam struktur dokumen HTML:

<html>
 Tag - Digunakan untuk menentukan tingkah laku web <!– untuk menyatakan suatu dokumen HTML -->
browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) <head>
dan tanda lebih besar “>” (tag akhir).Tag kontainer: <!-- memberikan informasi mengenai dokumen HTML >
<!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT,
<namatag> ..... </namatag> STYLE dan META >
 Element – Jenis-jenis dari tag. HTML mempunyai banyak <title>……</title>
elemen untuk berbagai keperluan dengan berbagai bentuk <!-- memberikan informasi judul pada tampilan HTML >
penggunaan. </head>
<body>
 Attribute - Digunakan untuk memodifikasi nilai dari <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen
elemen HTML. Suatu elemen biasanya akan mempunyai HTML >
banyak atribut. </body>
</html>
Contoh HTML sederhana : Penggunaan Komentar

<html> Format:
<head> <! -- >
Fungsi:
<title> HTML </title>
 Memberi nama aplikasi
</head>  Mendeskripsikan tujuan pengkodean tertentu di dalam
<body> file
Kami sedang mulai belajar HTML  Memberi nama pengarang
 Memberi tanggal pembuatan
</body>
 Memberi nomer versi
</html>  Memberi informasi hak cipta
1
10/19/2019
Tag Heading
Script:
<html>
<head>
Untuk judul atau sub judul dalam dokumen HTML <title> Heading </title>
</head>
<h1 [align=”left”|”center”|”right”]> . . . </h1> <body>
<h2 [align=”left”|”center”|”right”]> . . . </h2> <h1 align="center">Heading 1: HTML</h1>
<h2 align="center">Heading 2: HTML</h2>
.. <h3 align="center">Heading 3: HTML</h3>
<h6 [align=”left”|”center”|”right”]> . . . </h6> <h4 align="center">Heading 4: HTML</h4>
</body>
</html>
Tag Paragraf Tag Memformat Dokumen

 Paragraf yang dapat diatur perataannya (kiri, tengah, kanan): Script:
<p [align=”left”|”center”|”right”]> . . . </p> <html> <head>
<title> Format Dokumen </title>
Script:
</head>
<html>
<body>
<head>
<title> Paragraf </title> <p>Contoh <b>Teks Bold</b></p>
</head> <p>Contoh <i>Teks Italic</i></p>
<body> <p>Contoh <sup>Teks superscripted</sup></p>
<h2 align="center">Materi HTML</h2> <p>Contoh <sub>Teks subscripted</sub></p>
<p align="right">Kami sedang mulai belajar HTML </p> <p>Contoh <del>Teks struckthrough</del></p>
<p align="left">Saat ini membahas materi Dasar-dasar HTML </p> <p>Contoh <code>Teks Computer Code</code></p>
</body> </body> </html>
</html>
HASIL Tag Pre-format

 Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>
Script:
<html>
<head>
<title>Pre-Format</title>
</head>
<body>
<pre>
Saya sedang
Bel ajar HTML
Untuk mem buat aplikasi
berbasis web
</pre>
</body>
</html>
2
10/19/2019
Tag Break Tag Garis Pemisah Horisontal

 Untuk menulis teks pada baris berikutnya:
<br>  Garis horisontal untuk memisahkan teks dengan teks lain.
Script: <hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]
<html> [noshade]> </hr>
<head> Script:
<title>Mengganti Baris</title> <html>
</head> <head>
<body> <title>Membuat Garis Horisontal</title>
Muhammad Yusuf<br/> </head>
Jurusan Teknik Informatika<br/> <body>
Fakultas Teknik<br/> Berikut ini penggunaan
STMIK BANJARBARU<br/> satu garis horisontal: <hr/>

dan penggunaan dua garis
</body>
horisontal: <hr/> <hr />
</html>
</body>
</html>
Tag Font
#FOF8FF #8B008B #8FBC8B
Aliceblue
 Ukuran font: <font size=“n”> . . . </font> Darkmagenta Darkseagreen
#FAEBD7 #483D8B
 Jenis font: <font size=“n” face=“jenis_font”> . . . </font> #BDB76B
Antiquewhite Darkslateblue
 Warna font #00FFFF Darkkhaki
#2F4F4F
Aqua #556B2F
<font size=“n” face=“jenis_font” color=“warna”> . . . </font> Darkslategray
#7FFFD4 Darkolivegreen #00CED1
Aquamarine #FF8C00 Darkturquoise
Script: #F0FFFF Darkorange #9400D3
<html> Azure #9932CC Darkviolet
#F5F5DC #FF1493
<head> Darkorchid
Beige Deeppink
<title>Memformat Font</title> #FFE4C4 #8B0000
#00BFFF
</head> Bisque Darkred
Deepskyblue
<body> #000000 #E9967A #696969
Black Darksalmon Dimgray
<font size=5 color="#FF00FF"> #FFEBCD #8FBC8B #1E90FF
Teks berwarna hexcolor #FF00FF Blanchedalmond Darkseagreen Dodgerblue
</font><br/>
<font color="red">Teks berwarna
merah</font>
</body>
</html>
TUGAS
1. BUAT INFORMASI DIRI ANDA DENGAN CODING HTML DENGAN SYARAT :
a. Judul informasi dengan Heading
Informasi yang anda masukkan dengan desain standart
2. BUAT SEBUAH PUISI SEBANYAK 5 PARAGRAPH DENGAN CODING HTML DENGAN
HTML
SYARAT:
A. JUDUL PUISI TERLETAK DITENGAH HyperText Markup Language
B. PARAGRAPH 1 MENGGUNAKAN BOLD (KANAN)
C. PARAGRAPH 2 MENGGUNAKAN ITALIC (TENGAH)
D. PARAGRAPH 3 MENGGUNAKAN UNDERLINE (KIRI)
E. PARAGRAPH 4 MENGGUNAKAN CODE
F. PADA KATA YANG ANDA ANGGAP PUITIS BERI DENGAN (SUPERSCRPT /SUBSCRIPT)
G. PADA KATA YANG ANDA ANGGAP BERMAKNA (DEL)
H. BERI WARNA SESUIA DENGAN KESUKAAN ANDA
3
10/19/2019
Tag Hypertext Link Tag Hypertext Link (2)

Format:
Script:
<a href=”address” > . . . </a> <html>
 Link ke dokumen lain
<head>
<a href=”nama_dokumen” > . . . </a> <title>Membuat link</title>
file:///E:/tugas%20HTML/FAUZIYAH%20310110011678/SELAYANGPANDANG.HTML <head>
 Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a> <body>
<a href=”target” > . . . </a> <p>Silahkan download <i>handout</i>
 Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
perkuliahan di <A href="
 Link ke alamat Email http://blackxtrims.wordpress.com">
<a href=”mailto:alamat_email” > . . . </a>
 Link File yang akan didownload
blog </A></p>
<a href=”nama_file” > . . . </a> </body>
</html>
Tag Memuat Gambar Warna Background

Memuat gambar ke dalam halaman Web Menggunakan warna
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] /> <body bgcolor=#nnnnnn> . . . </body>
Relative Path:
Script:
 File gambar ada dalam direktori yg sama: ./ <html>
 File gambar ada dalam direktori sebelumnya: ../
<head>
Script: <title> Penggunaan Latar
<html> Belakang Warna </title>
<head>
<title> Insert Gambar</title>
</head>
</head> <body bgcolor="pink">
<body> Kami sedang mulai belajar
<img src="./penguins.jpg"></br>
<b> Penguins</b>
HTML
</body> </body>
</html>
</html>
Warna Background (2) Tag List

Menggunakan gambar <ul> - unordered list (daftar tdk bernomor);
<body background=“nama_file_gambar”> . . . </body>
bullet
Script: <ul [type=“disc”|”square”|”circle”] > . . .
<html> </ul>
<head>
<title> Penggunaan Latar <ol> - ordered list; nomor
Belakang Gambar </title>
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] >
</head>
<body
. . . </ol>
background="./Desert.jpg"> <dl> - definition list; dictionary
<p><h2
align="center">Kami
<dl> . . . </dl>
sedang mulai belajar <dt> . . . </dt>
HTML</h2></p>
</body> <dd> . . . [</dd>]
</html>
4
10/19/2019
TUGAS TUGAS
BUATLAH DUA BUAH FILE YANG MASING-MASING
Buatlah Sebuah Cerita Pendek yang di tampilkan dalam DIBERI NAMA UNTUK OL-NIM DAN UL-NIM
HTML dengan ketentuan Sebagai berikut : INFORMASI YANG ANDA BUAT ADALAH DAFTAR
1. Judul menggunakan heading MAKANAN DAN MINUMAN SEBANYAK MASING-MASING
20 BUAH
2. Paragraph beserta atributnya, format dokumen, pre BOLEH SAMA TETAPI HANYA 2 ITEM SAJA PADA
format, break, font MASING-MASING DAFTAR TERSEBUT
3. Masukkan gambar pada cerita yang anda buat, dan beri MASUKKAN BACKGROUND WARNA PADA JENIS
background (image/warna) MINUMAN DAN GAMBAR PADA JENIS MAKANAN
DESAIN SESUAI PROSEDURE YANG ADA DAN
MASUKKAN DESAIN-DESAIN COODING YANG SUDAH
DIPELAJARI
Tag List (2)

Script:
<html>
<head>
<title>Penggunaan List</title>
</head>
HTML
HyperText Markup Language
<body>
<h4>Istilah-istilah dalam HTML:</h4>
<ol>
<li><i>Tag</i></li>
<li><i>Element</i></li>
<li><i>Attribute</i></li>
</ol>
<h4>Contoh <i>tag</i>:</h4>
<ul type="square">
<li><i>Tag heading</i></li>
<li><i>Tag list</i></li>
</ul>
</body>
</html>
Tag yang diperlukan: <table>

TABEL
Atribut-atribut:
Fungsi:
Menampilkan informasi secara terstruktur,
ringkas dan mudah dibaca
Mengatur tampilan homepage agar lebih
menarik
5
10/19/2019
Membuat Tabel Sederhana Menambahkan Judul Tabel

Tag yang diperlukan: Judul tabel: <caption>
- Membuat baris: <tr> (table row) Judul baris/kolom: <th> (table header)
- Membuat kolom: <td> (table data) Contoh:
<table border="1">
Contoh: <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<table border="1">
<tr><td>1</td><td>06.100.001</td><td>Amin A.
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> Angkasa</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> <tr><td>2</td><td>06.100.002</td><td>Beni B.
</table> Bernardi</td></tr>
</table>
Mengatur Lebar & Tinggi Tabel Perataan dalam tabel

Atribut: width dan height <tr><td width=“20”>1.</td>  horisontal: atribut align -> utk <caption>,
Nilai: <td width=“80” height=“50“>06.100.001</td>
<td align="right" valign="top"
 <tr>, <td> dan <th>
 ukuran % (max 100%) <td width=“180” height=“50”>Amin A. Angkasa</td></tr>  vertikal: atribut valign -> utk <tr>, <td> dan <th> width="180"
 ukuran pixel height="50">Amin A.
<tr><td width=“20”>2.</td> Contoh: Angkasa</td></tr>
<td width=“80” height=“70”>06.100.002</td> <table border="1" align="center">
Contoh: <tr><td width="20">2.</td>
<td width=“180” height=“70”>Beni B. Bernardi</td></tr> <caption align="top">
<table border="1" width=“50%”> <td align="left" valign="top"
</table> <b> DAFTAR MAHASISWA </b> </caption>
<caption align="top">
<tr><th>No</th><th>NPM</th> width="80"
<b> DAFTAR MAHASISWA </b> </caption>
<th>Nama</th></tr>
height="70">06.100.002</td>
<tr><th>No</th>
<th>NPM</th> <tr><td align="center" width="20">1.</td> <td align="left" valign="bottom"
<th>Nama</th></tr> <td align="center" valign="middle" width="180" height="70">Beni
width="80" height="50">06.100.001</td> B. Bernardi</td></tr>
</table>
Tampilan Perataan dalam tabel Desain table seperti berikut

DAFTAR MAKANAN
NO NAMA MAKANAN HARGA
DST… 20
Desain table seperti berikut:

1. Buatkan cooding desain tersebut
2. Buat nama makanan dan minuman
3. Masukkan nama makanan, harga hingga 20 buah dengan menggunakan table
6
10/19/2019

Membuat warna pada tabel
Atribut-atribut:  Atribut: bgcolor
Contoh:
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center"
width="20">1.</td>
<td align="left" valign="middle“

Membuat warna pada tabel
Atribut-atribut:
 width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A.
Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left"
valign="middle"
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left"
valign="middle"
width="180" height="40">Beni B.
Bernardi</td></tr>
</table>
</body>
Atribut COLSPAN bisa ditempatkan pada tag <TD> atau

a. Atribut ROWSPAN ditempatkan pada tag <TH>
<TD>
<TABLE BORDER = "1"> <TABLE BORDER = "1">
<CAPTION>Daftar Wilayah dan Kota</CAPTION> <CAPTION>Daftar Target</CAPTION>
<TR> <TR>
<TD ROWSPAN = "3">Jawa Tengah</TD>
<TH COLSPAN = "2">Area: Jawa Tengah</TH>
<TD>Semarang</TD>
</TR>
</TR>
<TR><TD>Kudus</TD></TR> <TR><TD>Semarang</TD><TD>15.000</TD></TR>
<TR><TD>Solo</TD></TR> <TR><TD>Kudus</TD><TD>11.000</TD></TR>
</TABLE> </TABLE>
7
10/19/2019
Pengaturan jarak dalam tabel Penggabungan baris/kolom

Menggabungkan bbrp kolom menjadi 1: atribut colspan
CELLSPACING mengatur jarak bagian sel thd Menggabungkan bbrp baris menjadi 1: atribut rowspan
tepi dalam bingkai tabel.
CELLPADDING mengatur jarak teks terhadap
tepi kiri.
contoh
<TABLE BORDER = "5" CELLSPACING = "5"
CELLPADDING = "5" BGCOLOR = "green">
<TR><TD>
<FONT COLOR = "red"><B>e-mail</B></FONT>
</TD></TR>
</TABLE>
Script HTML:
<table border="1" bgcolor="white" align="center“ cellpadding="10" LATIHAN
cellspacing="12">
<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
BANJARBARU KOTA JUMLAH PENDUDUK DAN LUAS DAERAH
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th LANDASAN ULIN 1245 JIWA 456 km
colspan="2">Nilai</th>
CEMPAKA 890 JIWA 34 km
</tr> KOTA BANJARBARU
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> GUNTUNG PAYUNG 560 JIWA 40 km

<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80" height="40">06.100.001</td> LIANGANGGANG 250 JIWA 50 km
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
Script HTML:
<td align="center" valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80"
height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B.
Bernardi</td> BEKERJA DENGAN FORM
<td align="center" valign="middle">70</td> <td align="center"
valign="middle">80</td>
</tr>
</table>
8
10/19/2019
HTML FORM
a. ELEMENT FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. <FORM ACTION = "info.htm" METHOD = "POST">
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).
</form>
Sintaks:
<form action="action" method="GET"|"POST">
...........................
</form>
ELEMENT INPUT
Element INPUT berfungsi untuk mendefinisikan input yang Element ini tidak mempunyai tag penutup dan harus
akan dimasukkan pengguna. Element ini mempunyai attribute berada di dalam element FORM.
yaitu name, size, type, value, checked. <input
Attribute name mendefinisikan nama dari input kontrol form name="name"
 attribute size mendefinisikan ukuran teks pada input
size="number"
kontrol
type="text"|"checkbox"|"radio"|"submit"|"reset“
 type mendefinisikan bentuk-bentuk input kontrol
value="value“
 value mendefinisikan nilai awal/reset/submit
 checked mendefinisikan pilihan terpilih pada type checked >
radio/checkbox.
ELEMENT SELECT
<BODY>
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form
<FORM ACTION = "info.htm" METHOD = "POST"> kontrol. Element ini mempunyai attribute yaitu name, size,
Nama : <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20“ multiple(diizinkan banyak pilihan). Element ini harus berada di dalam
MAXLENGTH = "20"> <BR> element FORM.
Hobby : <INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25“ Sintaks:
MAXLENGTH = "40">
<select
<BR>
name="name"
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
size="number"
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
multiple >
</FORM>
.....................
</BODY>
</select>
</HTML>
9
10/19/2019
Penggunaan tipe checkbox Penggunaan tombol radio dan omentar

<FORM>
<FORM> Jenis Kelamin:<BR>
Buah yang Anda sukai:<BR> <INPUT TYPE = "RADIO"
NAME = "sex" CHECKED>Pria<BR>
<INPUT TYPE = "CHECKBOX" NAME = <INPUT TYPE = "RADIO"
"anggur" CHECKED>Anggur<BR> NAME = "sex">Wanita<BR>
<BR>
<INPUT TYPE = "CHECKBOX" NAME =
Komentar Anda:<BR>
"jeruk">Jeruk<BR> <TEXTAREA NAME = "komentar"
</FORM> ROWS = "5" COLS = "40" >
</TEXTAREA>
<BR>
Pemilihan dengan select

<FORM> TUGAS
Olahraga yang paling Anda sukai:<BR> BUATLAH INFORMASI-INFORMAS SBB:
<SELECT NAME = "olahraga">
1. BIODATA ANDA
<OPTION VALUE = "Sepakbola" SELECTED>Sepak Bola
<OPTION VALUE = "Bulutangkis">Bulutangkis 2. MATERI PRAKTEK YANG SUDAH ANDA AMBIL
<OPTION VALUE = "Tenismeja">Tenis Meja DARI SMT 1 HINGGA SEKARANG
<OPTION VALUE = "Basket">Basket MENGGUNAKAN BULLET DAN NUMBER
<OPTION VALUE = "Lain-lain">Lain-lain 3. GALERY DENGAN BENTUK TABEL (IMAGE +
</SELECT> KETERANGAN GAMBAR MINIMAL 5)
<BR> 4. TAMPILAN KRS SMESTER BERJALAN
</FORM> 5. FORM PENDAFTARAN

Atribut-atribut:
Bekerja dengan form & tabel
10
10/19/2019
HTML FORM ELEMENT INPUT

Element ini mempunyai attribute yaitu name, size, type, value,
a. ELEMENT FORM
checked.
Attribute action berisikan aksi terhadap form yang dikirim
Attribute name ->nama dari input kontrol form
(URI) dan attribute method berisikan metode form
melakukan proses pengiriman(GET/POST).  attribute size ->kuran teks pada input kontrol
Sintaks:  type -> bentuk-bentuk input kontrol
<form action="action" method="GET"|"POST">  value -> nilai awal/reset/submit
...........................  checked -> pilihan terpilih pada type radio/checkbox.
</form>
<html>
<head>
<title> form & tabel</title> <tr>
</head>
<body>
<td width=200>Password</td>
<FORM ACTION = "info.html" METHOD = "POST"> <td width=200><input
<table> type=password name=pass
<tr>
<td width=200>Nama Lengkap</td> size=20></td>
<td width=200><input type=text name=nama </tr>
size=20></td>
</tr>
<tr> <tr>
<td width=200 valign=top>Hoby</td> <td width=200 valign=top>Pendidikan Terakhir</td>
<td width=200>
<td width=200>
<input type=radio value ="D1 Komputer" name=jur>D1 Komputer
<input type=checkbox name=memasak>Memasak<br> Profesional<br>
<input type=checkbox name=membaca>Membaca<br> <input type=radio value ="D1 Inggris" name=jur>D1 Bahasa
<input type=checkbox name=olah raga>Olah Raga<br> Inggris<br>
<input type=checkbox name=seni>Seni<br> <input type=radio value ="S1 TI" name=jur>S1 Teknik
</td> Informatika<br>
<input type=radio value ="S1 TE" name=jur>S1 Teknik
</tr>
ElektronikaK<br>
</td>
</tr>
11
10/19/2019
<tr>
<td width=200 valign=top>Mengenal STMIK</td>
<td width=200> <tr>
<select name=kenal> <td width=200 valign=top>Pesan & Kesan</td>
<option value="teman">dari teman</option>
<option value="internet">internet</option> <td width=200><textarea name=kesan rows=5
<option value="televisi">dari televisi</option> cols=40></textarea></td>
<option value="koran">dari surat kabar</option> </tr>
</select>
</td>
</tr>
TUGAS
<tr>
<td width=200></td> BUATLAH SEBUAH FORM INPUTAN PENDAFTARAN
<td width=200> DENGAN MEMADUKAN TABEL DAN FORM DIMANA
PADA SAAT ACTION AKAN MEMANGGIL SALAH
<input type=submit value=Setuju SATU DARI FILE YANG ADA BUAT
name=kirim>
<input type=submit value=Batal
name=tolak></td>
</tr>
Elemen Frame
• Format untuk membuat frame pada halaman
Mendesain Frame web adalah dengan menggunakan perintah :
<FRAMESET>
<NOFRAMES>
diabaikan jika browser mampu
menampilkan frame
</NOFRAMES>
</FRAMESET>
12
10/19/2019
Atribut-atribut Frame Atribut-atribut Frame
Contoh
• (Satu.html)
<html> Contoh (Lanjutan)
<body bgcolor="#008080"> • (Tiga.html)
<h1 align="center"><font face="Arial">Halaman Satu <html>
dari File Satu.Html </font></h1> <body bgcolor="#aa00ff">
</body></html> <h1 align="center"><font face="Arial">Halaman tiga
dari File tiga.Html</font></h1>
• (Dua.html) </body></html>
<html>
<body bgcolor="#ff0080">
<h1 align="center"><font face="Arial">Halaman Dua
dari File Dua.Html</font></h1>
</body></html>
Penggabungan ke frame (1) Penggabungan ke frame (2)

• Frame dengan framerows :
• Frame dengan framecols :
<html>
<html> <frameset cols="200,*">
<frameset rows="60,40">
<noframes>maaf hanya bisa tampil pada web yang
<frame src="satu.html" name="atas" mendukung frame</noframes>
scrolling="no" noresize> <frame src="satu.html" name="kiri" scrolling="no"
<frame src="dua.html" name="bawah">
noresize>
</frameset> <frame src="dua.html" name="kanan">
<html> </frameset>
<html>
13
10/19/2019
Gabungan dari framecols dan

framerows
<html>
<frameset rows=20%,* border=10 bordercolor="red"> CASCADING STYLE SHEETS
<noframes>maaf hanya bisa tampil pada web yang
mendukung frame</noframes>
(CSS)
<frame src="satu.html" name="atas" scrolling="no"
noresize>
<frameset cols=30%,*>
<frame src="dua.html" name="bawah">
<frame src="tiga.html" name="bawah">
</frameset>
</frameset>
<html>
Apa itu CSS : Aturan penulisan :

􀂾 Feature untuk membuat dynamic HTML. 􀂾 Nilai untuk property tidak boleh dalam
􀂾 Style sheet mendeskripsikan bagaimana tanda petik.
tampilan document HTML di layar (template) contoh : color : green;
􀂾 Membuat special efek (mendefinisikan style
untuk <H1> dengan style bold dan italic dan
􀂾 Nama property bersifat case sensitive.
berwarna color : green;
􀂾 Support ke semua browser. property : color
value : green
Cara penggunaan CSS : Internal Style Sheet

􀂾 External Style Sheet
Bentuk : Bentuk umum :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana : <style type=“text/css”>
􀂾 <link, merupakan tag pembuka diakhiri dengan tanda “>”
􀂾 rel=“stylesheet”, menerangkan halaman ini akan dikenai efek
…definisi style…
style sheet
􀂾 type=“text/css”, file yang dipanggil berupa css
</style>
􀂾 href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
14
10/19/2019
<HTML>
ATURAN PENULISAN PADA CSS
<HEAD>
<TITLE>centranet</TITLE> selector {property : value}
<STYLE type="text/css">
dimana :
body {
color: white; 1. selector : tag HTML yang akan didefinisikan (body, H1,
background: green; Link , dll).
font-family : arial; 2. property : atribut yang akan diubah
}
</STYLE>
Cara penulisan :
</HEAD> FONT-FAMILY : sans-serif;
<BODY> FONT-SIZE : small;
<H1>STMIK Banjarbaru</H1>
<P>Sekolah Tinggi Manajemen Informatika & akomputer
Cara penulisan yang salah :
</BODY> FONT-FAMILY : “sans-serif ”;
</HTML> FONT-SIZE : ‘small’;
SELECTOR SEBAGAI PENGONTROL

Cara mendeklarasikan kelompok : (tanda koma DESIGN
serta &)
H1, H2 {color : green}; salah satu bagian
H3, H4 & H5 {color : red}; Pada CSS, terdapat 3 macam selector, yaitu ID, class, dan
tag HTMLn CSS adalah selector
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!-- - - >
Selector ID diawali dengan tanda #, selector Selector Class

class diawali dengan tanda . (dot), sedangkan Sebuah selector class dapat digunakan pada
selector tag HTML tidak memerlukan tanda lebih dari satu tag HTML. Masukkan style
awalan apapun. Cukup dengan mengetikkan CSS dalam selector class jika terdapat 2 atau
langsung nama tag HTMLnya. lebih elemen/tag HTML yang bisa memiliki
style yang sama dalam satu halaman.
Contoh kode selector class:
[code lang='css']
.post{
background-color:#cdcdcd;
}
[/code]
15
10/19/2019
Kode HTML untuk menggunakan

selector class: Selector ID
<div class="post"> ... teks ... </div> Kebalikan dari selector class, selector ID hanya
Class .post bisa digunakan lebih dari 1 boleh digunakan sekali pada satu halaman.
kali pada sebuah halaman. Contoh Contoh kode selector ID:
nyatanya adalah blog-blog yang dibuat [code lang='css']
dengan WordPress (baik wordpress.com #header{
background-color:silver;
ataupun wordpress.org). padding:5px;
}
[/code]
Kode HTML untuk menggunakan selector ID: Jenis-jenis selector

<div id="header"> majalahweb.com </div> a. Selector bebas
<HTML>
Selector ID digunakan hanya untuk 1 elemen <HEAD>
pada satu halaman web. Misalnya saja ID <TITLE> Selector </TITLE>

<style type="text/css">
#header diatas hanya digunakan sekali karena gbawah{
dalam satu halaman web hanya ada 1 header. TEXT-DECORATION: underline;

}
Jika dalam pemrograman tidak boleh ada 2 </style>

</HEAD>
variabel yang memiliki nama yang sama dalam <BODY>
suatu blok kode, begitu juga dengan HTML <gbawah> Efect Garis Bawah dengan
Selector Bebas </gbawah>
yang tidak boleh ada elemen yang memiliki </BODY>
nama ID yang sama pada satu halaman web. </HTML>
c. Selector Id
b. Selector dengan class <HTML>
<HTML> <HEAD>
<HEAD> <TITLE> Selector </TITLE>

<TITLE> Selector </TITLE>
#BODY_115 {
FONT-SIZE: 20px;
.right { text-align : right } TEXT-DECORATION: underline;
</style> COLOR: blue;
</HEAD> FONT-FAMILY:Comic Sans MS;
<BODY> }
<h2 class="right">Class Heading 2 </h2> </style>
<p class="right"> Class Paragraf</p> </HEAD>
</BODY> <BODY id="BODY_115">

Menggunakan ID Selector
</HTML>
</BODY>
</HTML>
16
10/19/2019
MEMFORMAT HALAMAN WEB
17

Materi HTML

Diunggah oleh

Informasi Dokumen

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

Materi HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

10/19/2019

Istilah-istilah dalam HTML : Tag Utama dalam struktur dokumen HTML:

Contoh HTML sederhana : Penggunaan Komentar

Tag Paragraf Tag Memformat Dokumen

HASIL Tag Pre-format

Tag Break Tag Garis Pemisah Horisontal

STMIK BANJARBARU<br/> satu garis horisontal: <hr/>

Tag Hypertext Link Tag Hypertext Link (2)

Tag Memuat Gambar Warna Background

Warna Background (2) Tag List

Tag List (2)

Tag yang diperlukan: <table>

Membuat Tabel Sederhana Menambahkan Judul Tabel

Mengatur Lebar & Tinggi Tabel Perataan dalam tabel

Tampilan Perataan dalam tabel Desain table seperti berikut

Desain table seperti berikut:

Tag yang diperlukan: <table>

Tag yang diperlukan: <table>

Atribut COLSPAN bisa ditempatkan pada tag <TD> atau

Pengaturan jarak dalam tabel Penggabungan baris/kolom

<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> GUNTUNG PAYUNG 560 JIWA 40 km

Penggunaan tipe checkbox Penggunaan tombol radio dan omentar

Pemilihan dengan select

Tag yang diperlukan: <table>

Bekerja dengan form & tabel

HTML FORM ELEMENT INPUT

Atribut-atribut Frame Atribut-atribut Frame

Penggabungan ke frame (1) Penggabungan ke frame (2)

Gabungan dari framecols dan

Apa itu CSS : Aturan penulisan :

Cara penggunaan CSS : Internal Style Sheet

SELECTOR SEBAGAI PENGONTROL

Selector ID diawali dengan tanda #, selector Selector Class

Kode HTML untuk menggunakan

Kode HTML untuk menggunakan selector ID: Jenis-jenis selector

pada satu halaman web. Misalnya saja ID <TITLE> Selector </TITLE>

dalam satu halaman web hanya ada 1 header. TEXT-DECORATION: underline;

Jika dalam pemrograman tidak boleh ada 2 </style>

nama ID yang sama pada satu halaman web. </HTML>

<HEAD> <TITLE> Selector </TITLE>

</BODY> <BODY id="BODY_115">

MEMFORMAT HALAMAN WEB

Anda mungkin juga menyukai