Rabu, 26 Oktober 2016

List dan Link

List OL

<HTML>
<BODY>
<B>SISTEM KOMPUTER</B>
<OL TYPE="I">
<B><LI>BRAIN WARE</B>
<B><LI>HARDWARE</B>
<OL Type="A" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</OL>
<B><LI>SOFTWARE</B>
<OL Type="a">
<LI>Sistem Operasi
<OL Type="i">
<LI>Windows
<LI>Linux
</OL>
<LI>Aplikasi
<OL >
<LI>MS. Word
<LI>CorelDraw
</OL></OL></OL>
</BODY>

</HTML>


List UL

<HTML><BODY>
<B>SISTEM KOMPUTER</B>
<UL TYPE="Disc">
<B><LI>HARDWARE</B>
<UL Type="Circle" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</UL>
<B><LI>SOFTWARE</B>
<UL Type="square">
<LI><U>Sistem Operasi </U>
<LI><U>Aplikasi</U>

</UL></UL></BODY></HTML>


Latihan1

<html>
<head>
<title>Latihan1</title>
</head>
<body bgcolor="red">
<p>Latihan Satu</p>
<body>
</html>


Latihan2

<html>
<head>
<title>Latihan2</title>
</head>
<body bgcolor="blue">
<p>Latihan Dua</p>
<body>
</html>


Latihan3

<html>
<head>
<title>Latihan3</title>
</head>
<body bgcolor="yellow">
<p>Latihan Tiga</p>
<body>
</html>


Link_Menu

<html>
<head>
<title>Latihan Link</title>
</head>
<body link="red">
Selamat Belajar :
<UL Type="A">
<LI> <a href="Latihan1.html">Latihan 1</a></LI>
<LI> <a href="Latihan2.html">Latihan 2</a></LI>
<LI> <a href="Latihan3.html">Latihan 3</a></LI>
</UL>
<body>

</html>

Jenis_Link

<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP">
<BR>
<H1>Link secara relatif, lihat contoh di bawah
ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini </A> jika mau ke
halaman berikutnya
</P>
<H1>Link secara absolut, lihat contoh di bawah
ini:</H1>
<P>
Klik <A HREF="http://www.facebook.com">facebook</A>
menuju ke facebook
</P>
<P>
<H1>Membuat window baru untuk link:</H1>
Open <A HREF="http://www.mangosoft.com"
TARGET="_blank"> my home page</A>
with new window.
</P><H1>Membuat link tanpa garis bawah:</H1><P>
<A HREF="http://www.mangosoft.com" style=" textdecoration:
none">Klik
This Link </A> , Looks it's not use underline.
</P></P>
<H1>Membuat link pada suatu pesan mail:</H1>
<BR> kirim email ke <a
href="mailto:syafriadi82@gmail.com">
syafriadi82@gmail.com</a>
</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A HREF="#TOP">
kembali ke atas</A>
</BODY>
</HTML>

Formating Teks HTML

PRAKTIKUM 1

Teks dokumen HTML dapat diformat secara khusus u/ menunjukkan perbedaan dan
penekanan terhadap isi dan maksud dokumen.

<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<s>ini di coret</s>
<BR>
X<sup>3</sup> + 2X<sup>2</sup> - 5
<BR>
H<sub>2</sub>O
</BODY></HTML>

PRAKTIKUM 2

Karakter-karakter khusus

<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright &copy; <br>
Trademark &trade; <br>
Registered &reg; <br>
Poundsterling &pound; <br>
Yen &yen; <br>
Euro &euro;<br>
</BODY>
</HTML>

PRAKTIKUM 3

Disamping mengatur perataan, kita pun bisa mengatur posisi baris-baris paragraf dari
margin (tepi halaman). Tag-tag indentasi paragraph yaitu <DD>, <BLOCKQUOTE>,

<DL>,<DT>.

<html>
<head>
<title>Ceritaku Ceritamu</title>
</head>
<body>
<DD>Engkau datang membawa sejarah_
dari kota kecil menuju kota besar_
Indonesia rindu pemimpin sepertimu_
semoga ada tempat bagimu untuk dipilih_</DD>
<BLOCKQUOTE>Memimpin negeri ini bukanlah surga_
meyambung warisan panasnya neraka_
Tak semudah balikkan punggung tangganmu_
mesti seirama beresolusi_</BLOCKQUOTE>
<DL>
<DT>kami gantung harapan kami_
di bahu pemimpin kami</DT>
</DL>
</body>
</html>


Struktur HTML & Tag-Tag Dasar

PRAKTIKUM 1


<html>
<head>
<title>Contoh</title>
</head>
<body>
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>


PRAKTIKUM 2

Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan

pemformatan tampilan teks.

<html>
<head>
<title>Contoh2</title>
</head>
<body bgcolor=”#0000ff” text=”#ff0000” >
SEDANG BELAJAR PEMROGRAMAN WEB
</body>

</html>

PRAKTIKUM 3

Tag yang digunakan <p>… di tutup dengan tanda </p> Digunakan untuk membuat

paragraf

<html>
<head>
<title>Paragraf</title>
</head> <body>
<p>SELAMAT DATANG</p>
<p>Di Dunia HTML</p>
<p>Elemen paragraf ditandai dengan tag P
dan setiap paragraf baru di tampilkan pada baris
baru</p>
<p align=”left”> rata kiri</p>
<p align=”right”>rata kanan</p>
<p align=”center”> rata tengah</p>
<p align=”justiyf”> rata kiri kanan</p>
</body>
</html>

PRAKTIKUM 4

Tag <BR> digunakan untuk pindah baris

<html> <head>
<title>Paragraf</title>
</head> <body>
<p>Elemen paragraf <BR>ditandai dengan tag P <BR> dan
setiap paragraf baru <BR> di tampilkan pada baris
baru</p>
</body>
</html>

PRAKTIKUM 5

Heading biasanya digunakan untuk judul topik dan tag yang digunakan adalah
< H1> . . . <H6>

Makin besar angka dibelakang H, maka huruf yang akan ditampilkan semakin kecil

<html> <head>
<title>Heading</title>
</head> <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

PRAKTIKUM 6

Tag <HR> disisipkan pada tempat garis akan ditampilkan

<html> <body color="silver">
Garis Lebar 80%, rata kiri<hr width="80%" align="left">
Garis Lebar 80%, rata kanan<hr width="80%" align="right">
Garis normal rata tengah<hr align="center">
Garis ukuran "10", rata tengah, lebar "70%"<hr size="10"
align="center" width="70%">
Garis lebar "65%", rata Kiri, ukuran "15" noshade <hr
width="65%" align="left" size="15" noshade>
<p><hr>
<i>Copyright &copy; nama anda</i>
</body>
</html>