PEMROGRAMAN WEB

MODUL

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 dan diakhiri dengan tag dan bagian body diawali dengan tag dan ditutup dengan tag . Kedua bagian tersebut diapit oleh tag dan . Informasi yang akan ditampilkan pada web browser harus ditulis dalam bagian ini/isi dokumen.

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 ….., dimana n adalah bilangan 1 sampai 6.

Teks menggunakan heading 1

Teks menggunakan heading 2

Teks menggunakan heading 3

Teks menggunakan heading 4

Teks menggunakan heading 5

Teks menggunakan heading 6

4. Membuat Paragraf dalam dokumen HTML Untuk membuat paragraph dalam html menggunakan tag

…..

demo membuat paragraph

ini adalah teks yang berada pada paragraph pertama

adalah teks yang berada pada paragraph kedua

adalah teks yang berada pada paragraph ketiga

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

demo “text aligment”

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.

ini adalah teks yang diatur dengan format rata kanan. Teks seperti ini jarang digunakan atau jarang dijumpai dalam dokumen-dokumen HTML.

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.

ini adalah teks yang diatur dengan format CENTER. Dengan memilih format ini,teks akan berada tepat ditengah-tengah layar browser (secara horizontal).

6. Membuat Baris Baru HTML menyediakan tag khusus untuk melakukan pembuatan baris baru di dalam dokumen, yaitu
. Tag ini tidak memiliki pasangan, sehingga disisipkan tanda garis miring di dalam tag tersebut.

Demo membuat baris baru

Baris pertama
Baris kedua
Baris ketiga
Baris keempat
Baris kelima

7. Menentukan format Teks ·

Membuat teks tebal

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

Demo teks Tebal

Burung Cucak rawa (CR) 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.

·

Membuat Teks Miring

Teks atau karakter dengan format miring dalam dokumen HTML dibuat menggunakan tag ,yang berpasangan dengan tag

Demo Teks Miring

Burung Cucak rawa (CR) 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.

·

Membuat Teks Bergaris Bawah

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

Demo Teks Bergaris Bawah

Burung Cucak rawa (CR) 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.

·

Membuat teks dicoret tengah

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

Demo Mencoret teks

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

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: Teks Harus diperhatikan urutannya,tidak boleh ditulis seperti ini: Teks Berikut ini contoh kode yang menunjukkan cara mengkombinasikan format teks dalam dokumen HTML.

Demo Mengkombinasikan Format Teks

Teks normal(tidak memiliki format apapun(

Teks Tebal

Teks tebal dan Miring

Teks Tebal,Miring,dan bergaris bawah

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 .

Demo Format Superscript

5<sup>2 = 25
3<sup>3 = 27
2<sup>6 = 64


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

Demo Format Subscript

Rumus molekul air adalah H<sub>2O
Rumus molekul karbondioksida adala CO<sub2<sub>


11. Horizontal Ruler Tag yang digunakan untuk membuat garis horizontal adalah

---

,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)

Demo Membuat Horizontal ruler

---

Berarti tebal garis 10 pixel

---

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

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

isi

. Di dalam tag

 tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.      
Demo menggunakan Preformated
 <pre>Tampilan ini akan ditampilkan sesuai format aslinya: ===================== 1. Belajar HTML 2. Belajar Javascript 3. Belajar ASP +++++++++++++++++++++ 

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”.

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)