Pengenalan Perancangan Web 2017

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan Perancangan Web 2017"

Hadi Kartawijaya
6 tahun lalu
Tontonan:

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. 12 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 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: latihan14.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. <address> Universitas AMIKOM Yogyakarta Kampus Terpadu: Jl. Ring Road Utara Condong Catur Sleman Yogyakarta </address> 3.6. 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. 13 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.

4 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 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> \ 14

5 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> 4.2. 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: Contoh: latihan19.html <title>contoh Link Absolut</title> Alamat website resmi Universitas AMIKOM Yogyakarta <a href= >link berikut</a> 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.

6 Penulisan sintaksnya adalah: <a href= #tujuan >Link asal</a> Artikel bebas.... <a name= tujuan >Posisi tujuan</a> Artikel bebas.... Contoh: latihan20.html Pengenalan Perancangan Web 2017 <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"> <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). 16

7 Contoh: latihan21.html <title>contoh Link Mailto</title> Untuk pertanyaan dan tugas dapat dikirimkan ke <a berikut</a> 17

8 REFERENSI Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika. Khafidli, M. Firgiawan. (2011). Trik Menguasai HTML5, CSS3, PHP Aplikatif. Yogyakarta: Lokomedia. Enterprise, Jubile. (2014). HTML 5 Manual Book. Jakarta: Elex Media Komputindo Pidie, Ghazali. Modul Langkah Demi Langkah Menguasai HTML5. 18

dokumen-dokumen yang mirip

Pengenalan Perancangan Web 2016

Pengenalan Perancangan Web 2016 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