Memisahkan Baris pada html

Posted by : Unknown Sabtu, 23 November 2013

1. HTML

HTML (Hyper Text Markup Language) adalah file text murni yang dapat dibuat dengan editor texts sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTMl merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnye berisi informasi atau interface aplikasi di internet. Ada dua cara untuk membuat sebuah web page, yaitu dengan HTML Editor atau dengan editor teks biasa (Notpad). Saya sarankan untuk pemula menggunakan Notpade. Hal ini dimaksudkan agar anda terbiasa membuat dokumen web secara primitif.

2. Mengenal HTML

Buatlah sebuah folder baru bernama SESPEMROGWEB pada drive C:\ di komputer Anda. Pada latihan pertama ini , kita akan berlatih menggunakan Tag <HTML>, <HEAD>, <TITLE> , dan <BODY>. Jalankan Notepad atau teks editor lain kesayanga n Anda. Dalam pembahasan buku ini, penulis menggunakan Notepad, seperti terlihat pada gambar di bawah ini .

Ketik baris-baris teks di bawah ini (ketiklah persis sepertiyang terlihat di bawah ini).

<HTML>

<HEAD>

<TITLE> Latihan pertama </TITLE>

</HEAD>

<BODY>

Apa kabar kawan-kawan semuanya?

Selamat memulai latihan pertama

</BODY>

</HTML>

Kemudian klik menu File > Save As pada menu barNotepad. Lalu ketika muncul jendela Save As seperti di bawah ini, pada kotak isian File name ketiklah “latihan1.html” (ketik persis berikut tanda nama file tersebut ditujukan agar file benar -benar tersimpan dalam ekstensi .html bukan dalam ekstensi .txt. Kemudian pilihlah folder SESPEMROGWEB pada bagian Save In.7 Kemudian klik tombol Save.

Pada Windows Explorer, browse folder SESPEMROGWEB yang sudah Anda buat sebelumnya. Kemudian klik ganda file latihan1.html untuk menjalankannya. Amati apa yang terjadi. Tampilan web Anda kurang lebih akan menjadi seperti berikut.

Latihan 3: Mengatur Warna Latar Belakang

Warna latar belakang web dapat di atur dengan cara mengubah nilai atribut BGCOLOR dalam Tag <BODY>. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di bawah ini).

<HTML>

<HEAD>

<TITLE> Latihan kedua </TITLE>

</HEAD>

<!– latar belakang warna BLUE (biru) –>

Sekarang warna latar belakang web nya adalah biru

</BODY>

</HTML>

Simpan dengan nama “lat ihan2.html” pada folder C:\SESPEMROGWEB. Jalankan file lat ihan2.html, dari folder C:\SESPEMROGWEB. Perhatikanlah bahwa sekarang warna latar belakang webnya berwarna biru.1

Latihan 3: Mengatur Warna Teks Web

Warna teks web dapat diatur dengan cara mengubah nilai atribut TEXT dalam Tag <BODY>. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di buku).

<HTML>

<HEAD>

<TITLE> Latihan ketiga </TITLE>

</HEAD>

<!—warna teks #ff0022 –>

warna teks web nya berubah

</BODY>

</HTML>

Selain BLUE (biru), terdapat 15 jenis warna lainnya yang bisa Anda pilih secara langsung, yaitu

SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, TEAL, dan AQUA. Selain itu, untuk menentukan sebuah warna dalam dokumen HTML, Anda juga dapat menggunakan kombinasi 6 angka 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e, dan f yang diawali karakter ..#… Contoh penggunaannya adalah <BODY BGCOLOR=..#ff0022..>31Simpan dengan nama “lat ihan3.html” pada folder C:\SESPEMROGWEB. Jalankan file lat ihan3.html, dari folderC:\SESPEMROGWEB. Perhatikanlah bahwa sekarang warna teks webnya menjadi agak merah.

Latihan 4: Mengatur Warna Latar Belakang dan Teks Web Secara Bersamaan

Anda dapat mengatur nilai atribut BGCOLOR dan TEXT secara bersamaan untuk mengubah warna latar belakang dan teks web Anda Jalankan Notepad.

Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE> Latihan keempat </TITLE>

</HEAD>

warna latar belakang dan teks web nya berubah

</BODY>

</HTML>

Simpan dengan nama “latihan4.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan4.html, dari folder C:\SESPEMROGWEB. Perhatikanlah bahwa sekarang warna latar belakang webnya menjadi kuning dan warna teks webnya agak merah.

Latihan 5: Mengatur Gambar Latar Belakang Web

Web yang Anda buat dapat diberi gambar latar belakang tertentu dengan cara mengubah nilai atributBACKGROUND pada Tag <BODY>. Sebelum melakukan latihan kali ini, siapkanlah sebuah gambar berformat JPG dalam komputer Anda. Ubah nama file g ambar tersebut menjadi bernamagambarku.jpg, dan simpan dalam folder C:\SESPEMROGWEB. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat di bawah ini)

<HTML>

<HEAD>

<TITLE> Latihan kelima </TITLE>

</HEAD>

Web dengan gambar latar belakang

</BODY>

</HTML>

Simpan dengan nama “lat ihan5.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan5.html, dari folder C:\SESPEMROGWEB.5Perhatikanlah bahwa sekarang web tersebut telah diberi gambar latar belakang .

Latihan 6: Mengatur Paragraf dengan Tag 

Tag digunakan untuk memisahkan teks yang berada pada paragraf berbeda. Tag juga memiliki atribut ALIGN untuk mengatur perataan paragraf. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE>

Latihan keenam

</TITLE>

</HEAD>

<BODY>

Ini adalah paragraf pertama, yang terdiri atas

beberapa baris. Yaitu baris Satu. Baris Dua. Baris

Tiga.

Ini adalah paragraf kedua yang

terdiri atas dua buah baris. Yaitu Baris satu. Dan

Baris kedua.

Ini adalah paragraf ketiga yang

terdiri atas dua buah baris. Yaitu Baris satu. Dan

Baris kedua.

</BODY>

</HTML>

Simpan dengan nama “lat ihan6.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan6.html, dari folder C:\SESPEMROGWEB. Masing-masing paragraf akan dibuat terpisah sesuai dengan

perataannya masing-masing

Latihan 7: Memisahkan Baris dengan Tag 

Baris-baris teks tidak akan terpisahkan otomatis meskipun Anda menuliskannya secara terpisah. Untuk memisahkan baris -baris teks dalam HTML gunakanlah Tag . Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti

yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE>

Latihan ketujuh

</TITLE>

</HEAD>

<BODY>

Ini adalah paragraf pertama, yang terdiri atas

beberapa baris.

Yaitu baris Satu.

Baris Dua.

Baris Tiga.

Ini adalah paragraf kedua yang

terdiri atas dua buah baris. Yaitu Baris satu.

Dan Baris kedua.

Ini adalah paragraf ketiga yang

terdiri atas dua buah baris. Yaitu Baris satu.

Dan Baris kedua.

</BODY>

</HTML>

Simpan dengan nama “lat ihan7.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan7.html, dari folder C:\SESPEMROGWEB. Masing-masing baris dalam setiap paragraf akan dituliskan

terpisah.

Latihan 8: Menggambar Garis dengan Tag <HR>

Tag <HR> digunakan untuk membuat garis lurus horizontal di dalam web. Tag <HR> juga memiliki atribut SIZE dan WIDTH untuk mengatur tinggi/ketebalan dan lebar garis . Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat dibawah ini).3

<HTML>

<HEAD>

<TITLE>

Latihan kedelapan

</TITLE>

</HEAD>

<BODY>

Ini adalah garis lurus horizontal biasa :

<HR>

Ini adalah garis lurus horizontal dengan size=5 :

Ini adalah garis lurus horizontal dengan lebar 50 %

layar :

Ini adalah garis lurus horizontal dengan size=10

dan lebar 125 pixel :

</BODY>

</HTML>

Simpan dengan nama “lat ihan8.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan8.html, dari folder C:\SESPEMROGWEB. akan dibuat beberapa garis lurus horizon tal dengan berbagai karakteristik tinggi dan lebar garis .

Latihan 9: Mengatur HEADING

Tag <H1> digunakan untuk menentukan Heading 1 yang berukuran paling besar. Tag <H6> digunakan untuk menentukan Heading 6 yang berukuran paling kecil. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE> Latihan kesembilan</TITLE>

</HEAD>

<BODY>

<H6> Ini Teks dengan HEADING 6 </H6>

<H5> Ini Teks dengan HEADING 5 </H5>

<H4> Ini Teks dengan HEADING 4 </H4>

<H3> Ini Teks dengan HEADING 3 </H3>

<H2> Ini Teks dengan HEADING 2 </H2>

<H1> Ini Teks dengan HEADING 1 </H1>

</BODY>

</HTML>

Simpan dengan nama “lat ihan9.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan9.html, dari folder C:\SESPEMROGWEB.

Latihan 10: Memformat Teks

Kali ini, Anda akan berlatih menggunakan beberapa tag tertentu untuk memformat teks. Jalankan Notepad. Ketik baris-baris teks di bawah ini ( ketiklah persis seperti yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE>

Latihan sepuluh

</TITLE>

</HEAD>

<BODY>

Ini Teks Normal

Teks dengan Tag SMALL

<BIG> Teks dengan Tag BIG </BIG>

Teks tercetak miring

Teks tercetak tebal

Teks tercetak bergaris bawah

Contoh dengan superscript : X3

<STRIKE> Teks yang tercoret </STRIKE>

Contoh dengan subscript : CH3COOH

</BODY>

</HTML>

Simpan dengan nama “lat ihan10.html” pada folder C:\SESPEMROGWEB. Jalankan file latihan10.html, dari folder C:\SESPEMROGWEB. Perhatikan perbedaan teks yang ditampilkan.

Latihan 11: Memformat Teks dengan Tag 

Tag memiliki atribut SIZE, COLOR, dan FACE untuk memformat teks. Jalankan Notepad.

Ketik baris-baris teks di bawah ini (ketiklah persis seperti yang terlihat dibawah ini).

<HTML>

<HEAD>

<TITLE>

Latihan sebelas</TITLE>

</HEAD>

<BODY>

Ini Teks Normal

Teks yang diatur menggunakan tag FONT dengan SIZE=5