Pengenalan Perancangan Web 2016

Transkripsi

1 3. Format Teks HTML 3.1. Logical Format Logical format menerapkan layout dokumen secara logis dan terstruktur. Semua tag ini memerlukan tag penutup. Tag yang termasuk dalam logical format adalah sebagai berikut. a. <cite> digunakan untuk menandai suatu kutipan (citation). b. <code> digunakan untuk menampilkan kode-kode pemrograman, misal bahasa C, dll. c. digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis. d. <kbd> digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard. e. <samp> digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh. f. digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks. g. <var> digunakan untuk menampilkan nama variabel. Contoh: latihan11.html <title>belajar Logical Format</title> <cite>bila kamu tak tahan lelahnya belajar, bersiaplah menanggung perihnya kebodohan</cite> Imam Syafii. Untuk menampilkan data array di pemrograman PHP adalah <code>echo "$namaarray[]";</code> Saya berkata, "Jangan di pegang nanti rubuh." Mahasiswa dapat belajar perancangan web secara mandiri melalui <kbd> Pada abjad terdapat 5 huruf vokal, yaitu <samp>aeiuo</samp>. Setiap tugas Pengenalan Perancangan Web dikumpulkan tepat waktu Kode program tersebut diiterasi sebanyak <var>n</var> kali. Physical Format Physical format adalah format terhadap fisik sebuah font. Semua tag ini memerlukan tag penutup. Yang termasuk physical format adalah sebagai berikut. a. digunakan untuk menampilkan huruf tebal. b. digunakan untuk menampilkan huruf miring. c. digunakan untuk menampilkan garis bawah pada teks. d. <tt> digunakan untuk menampilkan huruf seperti huruf mesin ketik. e. <strike> digunakan untuk menampilkan garis horizontal pada bagian tengah huruf.

2 f. <big> digunakan untuk menampilkan ukuran huruf yang lebih besar. g. digunakan untuk menampilkan ukuran huruf yang lebih kecil. h. digunakan untuk menampilkan subscript. i. digunakan untuk menampilkan supersxript. Contoh: latihan12.html <title>belajar Physical Format</title> ini ditulis tebal ini ditulis miring ini digaris bawahi <strike>ini akan bergaris tengah</strike> <tt>ini akan tertulis seperti huruf dari mesin ketik</tt> H2O 22=8 3.3. Preformatted (<pre>) Tag <pre> digunakan untuk membuat tampilan dokumen pada browser sama dengan tampilan pada text editor (preformatted). Dengan menggunakan tag <pre> maka tag dan tag tidak diperlukan lagi. 11 Contoh: latihan13.html <title>latihan-13: Penggunaan Tag PRE</title> <body bgcolor=#ffffcc> Tag pre dapat digunakan untuk membuat tampilan seperti ini: <pre> Tabel Mahasiswa: ============================================================= Id Nama Mahasiswa No. Mhs Jurusan Sem. ============================================================= 1 Aditya Teknik 4 2 Sinta Manajemen 4 ============================================================= Script program: for($id = 1; $id <= 4; $id++) { if($nama!= ) print($nama); else print( Kosong ); } </pre>

3 3.4. Address Alamat (address) adalah salah satu elemen yang umum ada di dalam sebuah dokumen. Tag address ditulis dengan <address> dan diakhiri dengan </address>. Setiap baris dalam penulisan alamat dipisahkan dengan menggunakan tag . Dengan menggunakan tag address, penulisan alamat dapat distandardkan. Contoh: latihan14.html <title>pembuatan Tag Address</title> <address> STMIK AMIKOM Yogyakarta Kampus Terpadu: Jl. Ring Road Utara Condong Catur Sleman Yogyakarta </address> 3.5. Singkatan Penulisan singkatan (akronim) pada halaman HTML mungkin terjadi. Tag <abbr> dan tag <acronym> dapat digunakan untuk menyimpan kepanjangan dari sebuah singkatan yang ditampilkan pada halaman HTML. Fungsi dari tersebut adalah ketika pointer diarahkan ke tulisan(singkatan) yang ada di halaman HTML, maka kepanjangan dari singkatan tersebut akan ditampilkan mengambang di atasnya. Contoh: latihan15.html <title>pembuatan Tag Singkatan</title> <abbr title= World Wide Web >WWW</abbr> <acronym title= HyperText Transfer Protocol >HTTP</acronym> pada beberapa browser atribut tittle dapat digunakan untuk menampilkan kepanjangan dari teks singkatan/akronim apabila mouse diarahkan di atasnya. Teks yang Disisipkan atau Dihapus Pada sebuah halaman web, sering dijumpai tulisan atau teks yang dikoreksi. Koreksi pada halaman HTML dapat dibuat dengan memanfaatkan tag <ins> dan tag <del>. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah. Tag <del> menunjukkan hasil koreksi pekerjaan dengan memberikan garis tengah horizontal pada teks yang dihapus.

4 Contoh: latihan16.html <title>pembuatan Tag Sisipan/Koreksi</title> Daftar Buku Terbaru: 1. Pemrograman Web dengan HTML Rp 2. Sistem Basis Data <del>rp </del> <ins>rp </ins> 3. Belajar Bootstrap Rp Font Tag dapat digunakan untuk menentukan format tampilan font pada dokumen HTML, seperti color, style, size, dll. Atribut yang dapat digunakan untuk tag font antara lain sebagai berikut. a. Ukuran Font Atribud size digunakan untuk mengatur ukuran font pada halaman HTML. Nilai font dimulai dengan nilai 1 untuk huruf terkecil dan nilai 7 untuk ukuran paling besar, atau +1 untuk ukuran huruf terkecil dan nilai +6 untuk ukuran paling besar. b. Jenis Font Jenis font yang digunakan pada pembuatan halaman HTML menggunakan atribut face. Atribut face diisi dengan jenis font misalnya: Arial, Times New Roman, Calibri, Verdana, Courier New, dan lain-lain. c. Warna Font Atribut color digunakan untuk mengatur warna pada halaman HTML. Terdapat dua cara dalam pemberian nilai pada atribut color, yaitu: Dengan menyebutkan warna seperti red, green, dan blue. Dengan menggunakan nilai RGB(Red Green Blue) dari satu warna. Misal: #FF0000 untuk red, #00FF00 untuk green, dan #0000FF untuk blue. Penulisan atribut font adalah: Ukuran Font Jenis Font Warna Font 13

5 Contoh: latihan17.html <title>pemformatan Text</title> <body bgcolor="aqua"> <center>konsep Basis Data</center> <center> Adalah suatu koleksi data komputer yang terintegrasi, diorganisasikan dan disimpan dalam suatu cara yang memudahkan pengambilan kembali. </center> perangkat lunak basis data <left> Adalah perangkat lunak sistem yang memungkinkan para pemakai membuat, memelihara, mengontrol dan mengakses basis data dengan cara yang praktis dan efisien. </left> \ 4. Link HTML (tag Anchor) Dokumen html menggunakan hyperlink (anchor) untuk menghubungkan satu dokumen ke dokuman yang lain. anchor dibuat dengan menggunakan tag a. Terdapat tiga jenis link: 4.1. Link Relatif Dibuat apabila membuat sebuah link pada halaman HTML ke halaman HTML yang lainnya di komputer yang sama, tanpa memerlukan alamat internet yang lengkap. Jika kedua halaman terletak pada direktori yang sama, dapat dituliskan nama file html sebagai berikut: Contoh: latihan18.html <title>contoh Link Relatif</title> Contoh link relatif dapat dibuka melalui <a href= latihan17.html >link berikut</a> Link Absolut Dibuat apabila membuat sebuah link ke halaman web lain di internet. Dalam hal ini alamat internet harus ditulis secara lengkap. Berikut adalah contohnya:

6 Contoh: latihan19.html <title>contoh Link Absolut</title> Alamat website resmi STMIK AMIKOM Yogyakarta <a href= >link berikut</a> 4.3. Link ke Bagian Lain dalam Dokumen Link ini dibuat ketika sebuah dokumen HTML yang dibuat sangat panjang. Sehingga apabila ditampilkan dalam browser web akan mengharuskan pengguna melakukan scroll secara berulang kali. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Penulisan sintaksnya adalah: <a href= #tujuan >Link asal</a> Artikel bebas.... <a name= tujuan >Posisi tujuan</a> Artikel bebas.... Contoh: latihan20.html 15 <title>contoh Penggunaan Link Dalam Dokumen</title> <a name="top"> <a href="#bab4"> Lihat Bab 4. </a> </a> <h2>bab 1</h2> bab 1 adalah menjelaskan bla bla bla. <h2>bab 2</h2> bab 2 adalah menjelaskan bla bla bla. <h2>bab 3</h2> bab 3 adalah menjelaskan bla bla bla. <a name="bab4"> Next code...

7 <h2>bab 4</h2> </a> Bab 4 ini menunjukkan tujuan dari link dalam satu halaman. <h2>bab 5</h2> Bab 5 adalah menjelaskan bla bla bla. <a href="#top">kembali ke atas</a> 4.4. Link Mailto Contoh ini akan mendemonstrasikan bagaimana membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak dipasang). Contoh: latihan21.html <title>contoh Link Mailto</title> Untuk pertanyaan dan tugas dapat dikirimkan ke <a href=mailto:lilisdfarida@amikom.ac.id> berikut</a> 5. Marquee Marquee merupakan tag non-standard elemen HTML yang menyebabkan suatu teks/gambar bergerak ke atas dan ke bawah, kanan atau kiri secara otomatis. Tulisan berjalan ini dapat digunakan untuk menuliskan kata-kata penting di sebuah halaman web. Penulisan sintaksnya adalah: <marquee> Text atau Gambar di sini</marquee> 16 Terdapat beberapa atribut yang dapat digunakan untuk marquee, antara lain: Atribut Fungsi bgcolor mengatur background dari teks yang diberi efek marque width mengatur lebar dari area teks-nya (dinyatakan dalam px atau %) height mengatur tinggi dari area teks (dinyatakan dalam px atau %) direction mengatur gerakan dari teks tersebut (up, down, left, right) scrollamount mengatur kecepatan dari gerakan teks (angka dalam px), semakin tinggi angka digunakan, akan semakin cepat gerakan

8 Atribut behaviour loop onmouseover onmouseout Fungsi dari teksnya mengatur efek dari gerakan (slide, scroll, alternate) menentukan jumlah pengulangan digunakan untuk menghentikan efek ketika disorot (hover) mouse digunakan untuk melanjutkan efek bila mouse sudah tidak menyorot Contoh: latihan22.html <title>contoh Marquee 1</title> Contoh Pembuatan Marquee: <marquee bgcolor= blue >Marquee dengan atribut width</marquee> <marquee width= 50% >Marquee dengan atribut width</marquee> <marquee height= 50px >Marquee dengan atribut height</marquee> <marquee direction= left >Marquee dengan atribut direction left</marquee> <marque direction= right >Marquee dengan atribut direction right</marquee> <marque direction= up >Marquee dengan atribut direction up</marquee> <marque direction= down >Marquee dengan atribut direction down</marquee> Contoh: latihan23.html <title>contoh Marquee 2</title> Contoh Pembuatan Marquee: <marquee scrollamount= 15 >Marquee dengan atribut scroolamount</marquee> <marquee behavior= scroll >Marquee dengan atribut behavior scroll</marquee> <marquee behavior = slide >Marquee dengan atribut behavior slide</marquee> <marquee behavior = alternate >Marquee dengan atribut behavior alternate</marquee> 17

9 Contoh: latihan24.html <title>contoh Marquee 3</title> Contoh Pembuatan Marquee: <marquee direction= left bgcolor= green loop= 2 behavior= slide >Marquee dengan atribut loop</marquee> <marquee direction= down scrollamount= 2 onmouseover= this.stop() onmouseout= this.start() > Marquee akan berhenti bergerak ketika disorot mouse dan bergerak kembali ketika sudah tidak disorot</marquee> 18

10 REFERENSI Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika. Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Satya, Barka (2015). Modul Pemrograman Web. STMIK AMIKOM Yogyakarta Arifin, Oki(2015). Modul Pengenalan Perancangan Web. STMIK AMIKOM Yogyakarta 19