PEMROGRAMAN WEB. OLEH : Yunita Prastyaningsih,S.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "PEMROGRAMAN WEB. OLEH : Yunita Prastyaningsih,S.Kom"

Yenny Sutedja
7 tahun lalu
Tontonan:

1 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).

2 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. <!--Tag untuk memulai HTML -- > <! bagaian header --!> <title> judul halaman </title> 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 3. Simpan dokumen tersebut dengan nama welcome.html 4. Buka file welcome.html melalui web browser Judul halaman web

4 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. <title>tag heading</title> <h1>teks menggunakan heading 1</h1> <h2> Teks menggunakan heading 2<h2> <h3>teks menggunakan heading 3</h3> <h4>teks menggunakan heading 4</h4> <h5>teks menggunakan heading 5</h5> <h6>teks menggunakan heading 6</h6> 4. Membuat Paragraf dalam dokumen HTML Untuk membuat paragraph dalam html menggunakan tag <p>..</p> <title>paragraf</title> <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> 5. Text Aligment Untuk memformat paragraph agar dapat rata kiri,kanan tengah dan justify,atribut paragraph yaitu align.

5 <p> adalah teks yang berada pada paragraph ketiga</p> 5. Text Aligment Untuk memformat paragraph agar dapat rata kiri,kanan tengah dan justify,atribut paragraph yaitu align. <title>teks Aligment</title> <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

6 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> 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. <title>baris Baru</title>

7 <h3>demo membuat baris baru</h3> Baris pertama <br /> Baris kedua<br /> Baris ketiga<br /> Baris keempat<br /> Baris kelima 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> <title> Teks Tebal</title>

8 <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 ,00. Membuat Teks Miring Teks atau karakter dengan format miring dalam dokumen HTML dibuat menggunakan tag <i>,yang berpasangan dengan tag </i> <title> Teks Miring</title>

9 <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 ,00. Membuat Teks Bergaris Bawah Untuk menjadikan suatu teks dalam dokumen HTML menjadi bergaris bawah,kita perlu menggunakan tag <u>,yang berpasangan dengan </u> <title> Teks Bergaris Bawah</title>

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

10 <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 ,00</u>. Membuat teks dicoret tengah Untuk menjadikan suatu teks dalam dokumen HTML menjadi bergaris bawah,kita perlu menggunakan tag <strike>,yang berpasangan dengan </strike>

<title>mencoret Teks</title> <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>.

11 <title>mencoret Teks</title> <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 ,00</u>. 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.

12 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. <title>kombinasi Format Teks</title> <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>

13 9. Membuat Format superscript Format superscript adalah format teks yang diperkecil ukuran hurufnya dan posisi dinaikkan keatas,sebagai contoh 5 2. HTML menyediakan tag <sup>,yang berpasangan dengan </sup>. <title>superscript</title> <h3>demo Format Superscript</h3> 5<sup>2</sup> = 25<br /> 3<sup>3</sup> = 27<br /> 2<sup>6</sup> = 64<br/ >

10. Membuat Format Subscript Format subscrip merupakan kebalikan dari format superscript. Dalam format ini,teks akan ditempatkan pada posisi bawah. Sebagai contoh H 2 O.

14 10. Membuat Format Subscript Format subscrip merupakan kebalikan dari format superscript. Dalam format ini,teks akan ditempatkan pada posisi bawah. Sebagai contoh H 2 O. HTML menyediakan tag<sub>dan </sub> <title>subscript</title> <h3> Demo Format Subscript</h3> Rumus molekul air adalah H<sub>2</sub>O<br /> Rumus molekul karbondioksida adala CO<sub2<sub><br /> </hmtl>

15 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) <title>horizontal Ruler</title> <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.

16 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. <title>preformated</title> <h3>demo menggunakan Preformated</h3> <pre>tampilan ini akan ditampilkan sesuai format aslinya: ===================== 1. Belajar HTML 2. Belajar Javascript 3. Belajar ASP </pre>

17 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. <title>demo membuat div</title> <div align="right"> HOME KONTAK LINK </Div> <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>

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

dokumen-dokumen yang mirip

<HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P> Paragraf satu</p> <P> Paragraf dua</p> <P> Paragraf tiga</p> </BODY> </HTML>

<HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P> Paragraf satu</p> <P> Paragraf dua</p> <P> Paragraf tiga</p> </BODY> </HTML> Elemen menandai serta melatakkan sekumpulan teks sebagai suatu paragraf. Tag menyatakan awal dari paragraf, sedangkan tag menyatakan akhir suatu paragraf. Bagian akhir paragraf secara