pemrograman web modul - aktivitasshodiq · modul 1 teks dalam paragraf dan format karakter 1....

PEMROGRAMAN WEB

MODULMODULMODULMODUL

OLEH : Yunita Prastyaningsih,S.Kom

Modul 1

Teks dalam Paragraf dan Format Karakter

1. Struktur dokumen HTML

Secara umum, dokumen HTML terbagi atas dua bagian,yaitu bagian header (kepala) dan body (badan). Bagian header diawali dengan tag <head> dan diakhiri dengan tag </head> dan bagian body diawali dengan tag <body> dan ditutup dengan tag </body>. Kedua bagian tersebut diapit oleh tag <html> dan </html>.

<html> <!--Tag untuk memulai HTML -- >

<!—bagaian header --!>

<head>

<title> judul halaman </title>

</head>

<body>

Informasi yang akan ditampilkan pada web browser harus ditulis dalam bagian ini/isi dokumen.

</body>

</html>

2. membuat dokumen HTML

1. Jalankan suatu aplikasi text Editor,misalnya Notepad,sCite atau yang lainnya. 2. Tuliskan kode berikut ke dalam Text Editor bersangkutan.

3. Simpan dokumen tersebut dengan nama welcome.html

4. Buka file welcome.html melalui web browser

Judul halaman web

3. Membuat Heading (judul teks)

HTML menyediakan enam judul teks, dibedakan berdasarkan ukuran hurufnya. Tag yang digunakan adalah <hn>…..</hn>, dimana n adalah bilangan 1 sampai 6.

<html>

<head>

<title>Tag heading</title>

</head>

<body>

<h1>Teks menggunakan heading 1</h1>

<h2> Teks menggunakan heading 2<h2>





</body>

</html>

4. Membuat Paragraf dalam dokumen HTML

Untuk membuat paragraph dalam html menggunakan tag <p>…..</p>

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<h3>demo membuat paragraph</h3>

<p>ini adalah teks yang berada pada paragraph pertama</p>

<p> adalah teks yang berada pada paragraph kedua</p>

<p> adalah teks yang berada pada paragraph ketiga</p>

</body>

</html>

5. Text Aligment

Untuk memformat paragraph agar dapat rata kiri,kanan tengah dan justify,atribut paragraph yaitu align.

<html>

<head>

<title>Teks Aligment</title>

</head>

<body>

<h3 align=”center”>demo “text aligment”</h3>

<p>ini adalah text yang secara default akan dianggap sebagai rata kiri.Mengapa demikian? Karena HTML akan menganggap nilai atribut ALIGN yang tidak dituliskan secara eksplisit dengan nilai LEFT.</p>

<p align=”right”>ini adalah teks yang diatur dengan format rata kanan. Teks seperti ini jarang digunakan atau jarang dijumpai dalam dokumen-dokumen HTML.</p>

<p align=”justify”>ini adalah teks yang diatur dengan format rata kiri kanan,yaitu dengan memasukkan nilai JUSTIFY pada atribut ALIGN. Teks dengan format seperti ini cocok

sekali digunakan untuk dokumen HTML yang sifatnya formal.</p>

<p align=”center”>ini adalah teks yang diatur dengan format CENTER. Dengan memilih format ini,teks akan berada tepat ditengah-tengah layar browser (secara horizontal).</p>

</body>

</html>

6. Membuat Baris Baru

HTML menyediakan tag khusus untuk melakukan pembuatan baris baru di dalam dokumen, yaitu <br>. Tag ini tidak memiliki pasangan, sehingga disisipkan tanda garis miring di dalam tag tersebut.

<html>

<head>

<title>Baris Baru</title>

</head>

<body>

<h3>Demo membuat baris baru</h3>

Baris pertama <br />

Baris kedua<br />

Baris ketiga<br />

Baris keempat<br />

Baris kelima

</body>

</html>

7. Menentukan format Teks

· Membuat teks tebal

Untuk menebalkan teks atau karakter dalam suatu dokumen HTML,kita dapat menggunakan tag <b>,yang berpasangan dengan </b>

<html>

<head>

<title> Teks Tebal</title>

</head>

<body>

<h3>Demo teks Tebal</h3>

Burung <b>Cucak rawa</b> (<b>CR</b>) adala burung yang bersuara merdu serta memiliki bentuk fisik yang indah dan menarik. Tidak heran jika burung tersebut memiliki harga yang sangat tinggi. Harga sepasang burung CR saat ini sudah mencapai Rp 30.000.000,00.

</body>

</html>

· Membuat Teks Miring

Teks atau karakter dengan format miring dalam dokumen HTML dibuat menggunakan tag <i>,yang berpasangan dengan tag </i>

<html>

<head>

<title> Teks Miring</title>

</head>

<body>

<h3>Demo Teks Miring</h3>

Burung <b>Cucak rawa</b> (<b>CR</b>) adala burung yang <i> bersuara merdu serta memiliki bentuk fisik yang indah dan menarik</i>. Tidak heran jika burung tersebut memiliki harga yang sangat tinggi. Harga sepasang burung CR saat ini sudah mencapai Rp 30.000.000,00.

</body>

</html>

· Membuat Teks Bergaris Bawah

Untuk menjadikan suatu teks dalam dokumen HTML menjadi bergaris bawah,kita perlu menggunakan tag <u>,yang berpasangan dengan </u>

<html>

<head>

<title> Teks Bergaris Bawah</title>

</head>

<body>

<h3>Demo Teks Bergaris Bawah</h3>

Burung <b>Cucak rawa</b> (<b>CR</b>) adala burung yang <i> bersuara merdu serta memiliki bentuk fisik yang indah dan menarik</i>. Tidak heran jika burung tersebut memiliki harga yang sangat tinggi. Harga sepasang burung CR saat ini sudah mencapai <u>Rp 30.000.000,00</u>.

</body>

</html>

· Membuat teks dicoret tengah

Untuk menjadikan suatu teks dalam dokumen HTML menjadi bergaris bawah,kita perlu menggunakan tag <strike>,yang berpasangan dengan </strike>

<html>

<head>

<title>Mencoret Teks</title>

</head>

<body>

<h3>Demo Mencoret teks</h3>

Burung <b>Cucak rawa</b> (<b>CR</b>) adala burung yang <i> bersuara merdu serta memiliki bentuk fisik yang indah dan menarik</i>. Tidak heran jika burung tersebut memiliki harga yang sangat <strike> tinggi</strike>. Harga sepasang burung CR saat ini sudah mencapai <u>Rp 30.000.000,00</u>.

</body>

</html>

8. Mengkombinasikan Format Teks

Masing-masing format teks diatas dapat dikombinasikan sehingga suatu teks bisa saja memiliki beberapa format sekaligus. Hal yang perlu diperhatikan untuk melakukan hal ini adalah masalah urutan penempatan tag. Penempatan tag harus sesuia dengan urutannya.

Contoh:

<b><i>Teks</i></b>

Harus diperhatikan urutannya,tidak boleh ditulis seperti ini:

<b><i>Teks</b></i>

Berikut ini contoh kode yang menunjukkan cara mengkombinasikan format teks dalam dokumen HTML.

<html>

<head>

<title>Kombinasi Format Teks</title>

</head>

<body>

<h3>Demo Mengkombinasikan Format Teks</h3>

<p>Teks normal(tidak memiliki format apapun(</p>

<p><b>Teks Tebal</b></p>

<p><b><i>Teks tebal dan Miring</i></b></p>

<p><b><i><u>Teks Tebal,Miring,dan bergaris bawah</u></i></b></p>

</body>

</html>

9. Membuat Format superscript

Format superscript adalah format teks yang diperkecil ukuran hurufnya dan posisi dinaikkan keatas,sebagai contoh 52 . HTML menyediakan tag <sup>,yang berpasangan dengan </sup>.

<html>

<head>

<title>Superscript</title>

</head>

<body>

<h3>Demo Format Superscript</h3>

5<sup>2</sup> = 25<br />

3<sup>3</sup> = 27<br />

2<sup>6</sup> = 64<br/ >

</body>

</html>

10. Membuat Format Subscript

Format subscrip merupakan kebalikan dari format superscript. Dalam format ini ,teks akan ditempatkan pada posisi bawah. Sebagai contoh H2O. HTML menyediakan tag<sub>dan </sub>

<html>

<head>

<title>Subscript</title>

</head>

<body>

<h3> Demo Format Subscript</h3>

Rumus molekul air adalah H<sub>2</sub>O<br />

Rumus molekul karbondioksida adala CO<sub2<sub><br />

</body>

</hmtl>

11. Horizontal Ruler

Tag yang digunakan untuk membuat garis horizontal adalah <hr>,tag ini tidak memiliki tag penutup. Adapun atribut yang dimiliki adalah:

“Align” untuk perataan, ”size” untuk mengatur ketebalan garisnya (dalam pixel),dan “width” untuk mengatur lebar garisnya (dalam pixel atau persen)

<html>

<head>

<title>Horizontal Ruler</title>

<body>

<h3>Demo Membuat Horizontal ruler</h3>

<HR size=10>

Berarti tebal garis 10 pixel<br />

<HR width=”75%” align=”center”>

Berarti lebar garis 75% dari lebar layar browser dan perataannya rata tengah.

</body>

</html>

12. Preformated

Untuk memformat dokumen HTML dengan menggunakan fasilitas Preformat. Dengan fasilitas ini tampilan yang akan diformat sama persis dengan isi yang ada didalam tag <PRE>isi</PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.

<html>

<head>

<title>Preformated</title>

</head>

<body>

<h3>Demo menggunakan Preformated</h3>

<pre>Tampilan ini akan ditampilkan sesuai format aslinya:

===================== 1. Belajar HTML 2. Belajar Javascript 3. Belajar ASP

+++++++++++++++++++++ </pre> </body> </html>

13. Tag DIV

Tag div yang dimaksud adalah singkatan dari Division yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian,atribut div diantaranya “center”,”right”,justify”,”left”.

<html>

<head>

<title>Demo membuat div</title>

</head>

<div align="right">

HOME |

KONTAK |

LINK |

</Div>

<body>

<div align="center" >

<h1> Isi Artikel </h1>

<p> ini bagian utama

</p> berikut ini isi dari cerita sesi pertama . </p>

<h5> ini bagian kedua</h5>

<p> berikut ini isi dari cerita sesi kedua. </p>

</div>

</body>

</html>

TUGAS: Buatlah dokumen HTML sehingga ketika di jalankan di browser akan terlihat tampilan seperti gambar dibawah berikut. NB:

· dokumen dan kode kode HTML yang telah dipelajari harus ada dalam tugas ini. · File yang telah dikerjakan diberi nama sesuai nama dan 2 nomor terakhir NIM masing

masing mahasiswa (contoh: nita12.htm)

pemrograman web modul - aktivitasshodiq · modul 1 teks dalam paragraf dan format karakter 1....

Documents