Scribd Logo
Upload

Welcome to Scribd!

  • Modul 2

    Uploaded by

    Adhitya Franager Manurung
    62 views11 pages

    Original Title

    MODUL 2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    62 views11 pages

    Modul 2

    Uploaded by

    Adhitya Franager Manurung

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    ___________________________________________________________________________

    MODUL 2
    2. Format Halaman, Paragraf dan Text
    2.1. Warna dan Background pada halaman
    Semua halaman web menggunakan warna latar belakang (background color) yang disisipkan di dalam tag <BODY>. Selain warna, latar belakang juga dapat berupa gambar. Berikut adalah bentuk penulisan latar belakang di dalam tag <BODY> :
    <body atribut=value> . isi web .</body>

    Secara default halaman web akan menciptakan halaman dengan warna latar belakang putih, jika nilai atribut tidak ada. Nilai atribut dapat ditulis dalam bentuk kode hexa decimal yang berasal dari campuran warna dasar RGB(Red Green Blue) atau dengan memberikan nama warna dalam bahasa inggris, misalnya(red, green, blue, cyan, pink, yellow, magenta dll). Berikut adalah contoh halaman web dengan warna latar belakang merah.
    Contoh Script warnahalaman.html <html> <head> <title>Judul Web</title> </head> <body bgcolor=red> . isi web </body> </html> Akhir Script

    atau dengan menggunakan kode hexa decimal


    Contoh Script warnahalaman.html <html> <head> <title>Judul Web</title> </head> <body bgcolor=#ff0000> . isi web </body> </html> Akhir Script

    Berikut beberapa atribut yang digunakan dalam tag <BODY> dengan menggunakan nilai(value) hexa decimal.
    Atribut bgcolor background text link vlink alink Value #000000-#ffffff File Gambar #000000-#ffffff #000000-#ffffff #000000-#ffffff #000000-#ffffff Keterangan Untuk menentukan warna latar belakang Membuat latar belakang dengan gambar Warna text seluruh halaman Warna hyperlink Warna link yang telah dikunjungi Warna link yang aktif

    ___________________________________________________________________________ D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    leftmargin rightmargin topmargin marginwidth marginheight 0n 0n 0n 0n 0n Mengatur jarak kiri halaman Mengatur jarak kanan halaman Mengatur jarak atas halaman Mengatur jarak lebar halaman Mengatur jarak tinggi halaman

    2.1.1

    Background Bergambar

    Selain memberikan warna pada background, dapat juga menggunakan media gambar sebagai komponen latar belakang. Cara penulisannya adalah :
    <body background=alamat file> . isi web .</body>

    Apa bila ingin meletakkan gambar yang berasal dari internet, maka harus dituliskan alamat web sitenya secara lengkap menggunakan http://www.alamatwebsite.com/filegambar

    Contoh Script backgambar.html <html> <head> <title>Judul Web</title> </head> <body background=zendbig.gif> . isi web </body> </html> Akhir Script

    2.1.2

    Menentukan Warna Text

    Jika dalam halaman secara standard akan menampilkan latar belakang berwarna putih, maka untuk text warna defaultnya adalah hitam. Untuk dapat mengubah warna text pada seluruh halaman web, bisa dideklarasikan menggunakan atribut text di dalam tag <BODY> seperti berikut :
    <body text=warna> . Isi web . </body> Contoh Script textberwarna.html <html><head><title>Contoh text berwarna</title></head> <body text=green> Halaman web dengan warna hijau </body> </html> Akhir Script

    ___________________________________________________________________________ 8 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    2.1.3 Menentukan Warna pada Link Link merupakan sebuah simbol yang dijadikan sebagai acuan menuju ke suatu halaman tertentu pada suatu web. Link dapat berupa text ataupun gambar. Untuk text warna link akan dibedakan dengan warna text biasa. Dalam pemberian warna pada link, HTML mengenal tiga macam atribut, diantaranya : LINK, VLINK dan ALINK. Dalam penulisannnya hampir sama dengan pendeklarasian text maupun background. Berikut adalah bentuk umum penulisan kode tersebut :
    <body link=warna vlink=warna alink=warna>

    Link=warna :Menentukan warna link yang belum dikunjungi Vlink=warna:Menentukan warna link yang sudah pernah dikunjungi Alink=warna:Menentukan warna link saat diklik

    Untuk warna, dapat digunakan seluruh warna yang ada. Cara penulisannya sama dengan penulisan untuk warna latar belakang, bisa menggunakan bahasa inggris atau menggunakan kode hexa decimal. Berikut adalah warna standard yang sering digunakan :
    Tabel 2.1. Warna Standard Warna Putih Kuning Merah Abu-abu Biru Hijau Hitam Biru Terong Biru Muda Kode Hexadecimal #FFFFFF #FFFF66 #FF0000 #CC9999 #0000FF #00FF00 #000000 #CC33FF #00CCFF

    2.1.4

    Penempatan Area Kerja

    Area kerja adalah tempat dimana posisi kursor pertama kali menuliskan semua isi web. Untuk menentukan area kerja, dapat digunakan tag berikut : Leftmargin=value Topmargin=value Marginwidth=value Marginheight=value : : : : Menentukan batas paling kiri Menentukan batas paling atas Menentukan lebar halaman Menenutukan tinggi halaman

    Cara penulisannya adalah sebagai berikut :


    <body leftmargin=value topmargin=value arginwidth=value marginheight=value>

    Besarnya nilai pada kolom value harus disesuaikan dengan yang diinginkan. Biasanya para programmer menggunakan nilai 0,0,0,0. Sehingga area kerja akan berada pada bagian sudut halaman.

    ___________________________________________________________________________ 9 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    Contoh Script areakerja.html <html><head><title>Contoh Area Kerja</title></head> <body leftmargin=100 topmargin=100 marginwidth=30 marginheight=30> Area kerja halaman web </body> </html> Akhir Script

    2.2. Memformat Text


    Format text adalah sebuah kemampuan yang diharuskan di dalam semua bahasa pemrograman baik visual maupun non visual. 2.2.1 Membuat Huruf Tebal, Miring dan Garis Bawah Huruf dengan properties tebal atau sering disebut dengan istilah bold dapat dibuat dengan menggunakan tag awal <b> dan tag akhir </b>. Berikut beberapa tag yang digunakan untuk pengaturan text :
    Tabel 2.2. Tag pengaturan text Tag <B> <l> <U> <S> Keterangan Memebuat huru tebal (bold) Membuat hurum miring (italic) Membuat huruf garis bawah(underscore) Membuat huruf dicoret (StrikeOut)

    Dari tag yang ada pada tabel 2.2, juga terdapat memiliki fungsi sama, yaitu :
    Tabel 2.3. Tag tambahan pengaturan text Tag <EM></EM> <STRONG</STRONG> <DEL></DEL> <INS></INS> Keterangan miring tebal coret garis bawah

    beberapa tag yang

    Text Text Text Text

    Contoh Script format_text.html <html><head><title>Contoh Format Text</title></head> <body> <b>Ini huruf tebal</b><br> <i>Ini huruf miring</i><br> <u>Ini huruf bergaris bawah</u><br> <s>Ini huruf dicoret</s><br> <strong>Ini juga huruf tebal</strong><br> <em>Ini juga huruf miring</em><br> <ins>Ini juga huruf bergaris bawah</ins><br> <del>Ini juga huruf dicoret</del><br> </body> </html> Akhir Script

    Jika script di atas dijalankan maka, hasilnya adalah sebagai berikut :

    ___________________________________________________________________________ 10 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________

    2.2.2

    Membuat Text Model Kima dan Matematika <sub>.</sub> untuk /subscribe <sup></sup> untuk /superscribe membuat membuat huruf huruf menjorok menjorok ke ke bawah atas

    Untuk membuat text model kimia dan matematika digunakan tag berikut :

    Contoh Script format_kimia.html


    <html> <head> <title>Contoh Format Text Kimia dan Matematika</title> </head> <body> Manusia hidup membutuhan air / H<sub>2</sub>O<br> Rumus kimia asam suffat adalah H<sub>2</sub>SO<sub>4</sub><br> Nilai dari 2<sup>5</sup> adalah 32 </body> </html>

    Akhir Script

    ___________________________________________________________________________ 11 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________ 2.3. Menentukan Ukuran Huruf dan Warna
    Untuk menentukan ukuran huruf dapat digunakan tag <Font> dengan bentuk umumnya adalah : <Font size=value color=warna face=jenis huruf> Value Warna Huruf : dapat digunakan angka 1-7, dan untuk yang lebih besar lagi dapat digunakan tanda (+), misalnya (+4). : warna huruf : jenis huruf yang bisa digunakan

    Contoh Script format_kimia.html <html> <head><title>Contoh Format Font</title></head> <body> <Font size=5 face=arial color=blue>Bentuk text arial berwarna biru dengan ukuran +5</font><br> </body> </html> Akhir Script

    2.4. Memberikan Jarak pada Baris Text


    Di dalam HTML sudah disediakan tag untuk mengatur jarak pada baris text. Tag HTML yang digunakan adalah : <pre>Text</pre> atau <pre width=value>..text..</pre>
    Contoh Script spasitext.html <html> <head><title>Contoh Format Spasi Text</title></head> <body> <pre>Zaiful Bahri</pre> <pre>Nadila Rahayu</pre> <pre>Aulia Septielvira</pre> </body></html> Akhir Script

    ___________________________________________________________________________ 12 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________ 2.5. Menempatkan Kalimat di Tengah


    Untuk menempatkan text di tengah dapat digunakan tag <center>, dengan bentuk : <center> karakter/kalimat</center>
    Contoh Script center.html <html> <head> <title>Contoh Menempatkan Text di Tengah</title> </head> <body> <center>Zaiful Bahri</center> <center>Nadila Rahayu</center> <center>Aulia Septielvira</cebter> </body> </html> Akhir Script

    2.6. Ganti Baris dan Paragraf


    Untuk berganti baris dapat digunakan tag <br> dan untuk membuat paragraph baru dapat digunakan tag <p>, dengan bentuk : <p> Kalimat 1 Kalimat 2 Kalimat 3 </p> <br> <br> <br>

    Contoh Script baris&paragraph.html <html> <head> <title>Contoh Ganti Baris dan Paragraph</title> </head> <body> <p> <center>Aulia Septielvira adalah seorang anak TK Babussalam angkatan 2005 di Pekanbaru</center><br><br> </p> <p> <center>Nadila Rahayu adalah seorang siswa SDIT Al-Fityah angkatan 2003</center></p> <center>Aulia Septielvira</center> </body> </html> Akhir Script

    2.7. Membuat Identasi Halaman


    Identasi halaman adalah teknik pemformatan halaman dengan text menjorok ke dalam, dapat digunakan tag <blockquote>, sintaksnya adalah : <blockquote> text</blockquote>

    ___________________________________________________________________________ 13 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    Contoh Script Identasi.html <html> <head> <title>Contoh Format Identasi</title> </head> <body> blockquote<br> <p> <blockquote>tag ini digunakan untuk menciptakan text identasi, <br> </blockquote> <blockquote>yang dimaksud dengan identasi adalah text menjorok ke dalam </blockquote> </p> </body> </html> Akhir Script

    2.8. Menggunakan tag <PRE>


    Tag <pre> digunakan untuk membuat text persis seperti apa yang diketikan, sitaksnya adalah : <pre> text </pre>
    Contoh Script pre.html <html> <head> <title>Contoh Format Pre</title> </head> <body> <p>PRE</p> <pre> Tag ini digunakan untuk menciptaklan text dengan yang diketikan </pre> </body> </html> Akhir Script

    dengan format yang sesuai

    2.9. Membuat Judul/Heading


    Heading adalah salah satu metode yang ada pada HTML, digunakan untuk membuat judul dalam paragraph, sintaksnya adalah : <hx>Text/Judul </hx> dimana x adalah bilangan bulat dari 1-6.
    Contoh Script heading.html <html> <head><title>Contoh Format Heading</title></head> <body> <address><pre> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>

    ___________________________________________________________________________ 14 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </pre></address> </body> </html> Akhir Script

    2.10. Membuat Animasi Marquee


    Marquee adalah sebuah animasi text sederhana menggunakan tag <marquee>, sintasnya adalah : dibuat dengan

    <marquee atribut=value> text</marquee> Ada beberapa atribut yang dapat digunakan untuk melakukan pengaturan pada animasi marquee, anatara lain :
    Atribut Behavior Value Alternate Scroll Slide Left Top Down Right n Color Keterangan Text bergerak ke kanan dan ke kiri Text berkerak terus menerus Text bergerak sekali Ke kiri Ke atas Ke bawah Ke kanan Perulangan dengan nilai n Untuk warna latar belakang

    Direction Loop Bgcolor

    Contoh Script marquee.html <html> <head> <title>Contoh Format Marquee</title> </head> <body> <marquee behavior=alternate bgcolor=#0099FF> ANIMASI MARQUEE(ALTERNATE)</marquee><br><br> <marquee behavior=scroll bgcolor=#0099FF direction=left> ANIMASI MARQUEE(LEFT)</marquee><br><br> <marquee behavior=slide bgcolor=#0099FF direction=right> ANIMASI MARQUEE(RIGHT)</marquee> </body> </html> Akhir Script

    2.11. Menciptakan Garis Horizontal


    Garis horizontal dapat dibuat dengan menggunakan tag <hr> dengan sintaksnya adalah : <hr atribut=value>

    ___________________________________________________________________________ 15 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    Dari sintaks di atas dapat dijelaskan beberapa atribut yang dapat digunakan :
    Atribut SIZE COLOR ALIGN Width Value N #000000-#ffffff left,right,center length Keterangan Ukuran garis Warna garis Posisi garis Lebar garis

    Contoh Script garis.html <html> <head> <title>Contoh Format Garis Horizontal</title> </head> <body> <h1><center>Kuis siapa dia></center></h1> <hr align=center width=60% color=#ff0000 size=3> <div align=center>Adalah kuis yang saya sukai</div> </body> </html> Akhir Script

    Latihan Modul 2
    1. Buatlah sebuah halaman web yang dapat menampilkan halaman dengan leftmargin 200 dan topmargin 200 dan bentuk tampilan seperti gambar di bawah ini

    2. Buatlah halaman web yang dapat menampilkan tiga buah marquee dengan menggunakan teks D 3 Komputer & Sistem Informasi yang dapat : Bergerak ke kiri dan ke kanan Bergerak ke kiri saja Bergerak ke kanan saja

    ___________________________________________________________________________ 16 D3 Komputer & Sistem Informasi

    Format Halaman,Paragraf dan Text ___________________________________________________________________________


    Diisi oleh Dosen Bersangkutan

    Tugas Praktek Tanggal Penyerahan

    Tuliskan Script Anda Di Sini ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ___________________________________________________________________________ 17 D3 Komputer & Sistem Informasi

    You might also like