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 berikut. a.
digunakan untuk menandai suatu kutipan (citation). b. digunakan untuk menampilkan kode-kode pemrograman, misal bahasa C, dll. c. <em> digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis. d. digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard. e. <samp> digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh. f. <strong> digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks. g. digunakan untuk menampilkan nama variabel. Contoh: latihan11.html Belajar Logical Format Bila kamu tak tahan lelahnya belajar, bersiaplah menanggung perihnya kebodohan Imam Syafii.
Untuk menampilkan data array di pemrograman PHP adalah echo "$namaarray[]";
Saya berkata, "Jangan di pegang <em>nanti rubuh."
Mahasiswa dapat belajar perancangan web secara mandiri melalui www.w3schools.com
Pada abjad terdapat 5 huruf vokal, yaitu <samp>AEIUO.
Setiap tugas Pengenalan Perancangan Web dikumpulkan <strong>tepat waktu
Kode program tersebut diiterasi sebanyak N kali.
3.2.
10
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. digunakan untuk menampilkan huruf seperti huruf mesin ketik. e. <strike> digunakan untuk menampilkan garis horizontal pada bagian tengah huruf.
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 f. g. h. i.
digunakan untuk menampilkan ukuran huruf yang lebih besar. <small> digunakan untuk menampilkan ukuran huruf yang lebih kecil. <sub> digunakan untuk menampilkan subscript. <sup> digunakan untuk menampilkan supersxript.
Contoh: latihan12.html Belajar Physical Format Ini ditulis tebal
Ini ditulis miring
Ini digaris bawahi <strike>Ini akan bergaris tengah
Ini akan tertulis seperti huruf dari mesin ketik
H<sub>2O
2<sup>2=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. Contoh: latihan13.html
11
Latihan-13: Penggunaan Tag PRE Tag pre dapat digunakan untuk membuat tampilan seperti ini: <pre> Tabel Mahasiswa: ============================================================= |Id | Nama Mahasiswa | No. Mhs | Jurusan |Sem.| ============================================================= | 1 | Aditya | 16.01.2109 | Teknik | 4 | | 2 | Sinta | 16.02.2233 | Manajemen | 4 | ============================================================= Script program: for($id = 1; $id <= 4; $id++) { if($nama != “”) print($nama); else print(“Kosong”); }
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 3.4.
Address Alamat (address) adalah salah satu elemen yang umum ada di dalam sebuah dokumen. Tag address ditulis dengan dan diakhiri dengan . Setiap baris dalam penulisan alamat dipisahkan dengan menggunakan tag
. Dengan menggunakan tag address, penulisan alamat dapat distandardkan. Contoh: latihan14.html Pembuatan Tag Address STMIK AMIKOM Yogyakarta
Kampus Terpadu: Jl. Ring Road Utara
Condong Catur
Sleman
Yogyakarta
3.5.
Singkatan Penulisan singkatan (akronim) pada halaman HTML mungkin terjadi. Tag dan tag 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 Pembuatan Tag Singkatan WWW
HTTP
Pada beberapa browser atribut tittle dapat digunakan untuk menampilkan kepanjangan dari teks singkatan/akronim apabila mouse diarahkan di atasnya.
3.6. 12
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 dan tag <del>. Tag 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.
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 Contoh: latihan16.html Pembuatan Tag Sisipan/Koreksi Daftar Buku Terbaru:
1. Pemrograman Web dengan HTML Rp. 65.000
2. Sistem Basis Data <del>Rp. 78.000 Rp. 68.000
3. Belajar Bootstrap Rp. 70.000
3.7.
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
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 Contoh: latihan17.html Pemformatan Text
Konsep Basis Data Adalah suatu koleksi data komputer yang terintegrasi, diorganisasikan dan disimpan dalam suatu cara yang memudahkan pengambilan kembali. perangkat lunak basis data
Adalah perangkat lunak sistem yang memungkinkan para pemakai membuat, memelihara, mengontrol dan mengakses basis data dengan cara yang praktis dan efisien.
\
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 Contoh Link Relatif Contoh link relatif dapat dibuka melalui link berikut
14
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:
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 Contoh: latihan19.html Contoh Link Absolut Alamat website resmi STMIK AMIKOM Yogyakarta link berikut
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: Link asal Artikel bebas .. .. Posisi tujuan Artikel bebas .. ..
Contoh: latihan20.html
15
Contoh Penggunaan Link Dalam </head> <body> <p> <a name="top" rel="nofollow"> <a href="#Bab4" rel="nofollow"> Lihat Bab 4. </a> </a> </p> <h2>Bab 1</h2> <p>Bab 1 adalah menjelaskan bla bla <h2>Bab 2</h2> <p>Bab 2 adalah menjelaskan bla bla <h2>Bab 3</h2> <p>Bab 3 adalah menjelaskan bla bla <a name="Bab4" rel="nofollow"><br />
<br />
Next code... Ld.Farida | STMIK AMIKOM Yogyakarta<br />
<br />
Dokumen
bla. bla. bla.
Pengenalan Perancangan Web 2016
Bab 4
Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.
Bab 5
Bab 5 adalah menjelaskan bla bla bla.
Kembali ke atas
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 Contoh Link Mailto Untuk pertanyaan dan tugas dapat dikirimkan ke email berikut
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
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 Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 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 Contoh Marquee 1 Contoh Pembuatan Marquee:
<marquee bgcolor=”blue”>Marquee dengan atribut width
<marquee width=”50%”>Marquee dengan atribut width
<marquee height=”50px”>Marquee dengan atribut height
<marquee direction=”left”>Marquee dengan atribut direction left
<marque direction=”right”>Marquee dengan atribut direction right
<marque direction=”up”>Marquee dengan atribut direction up
<marque direction=”down”>Marquee dengan atribut direction down
Contoh: latihan23.html Contoh Marquee 2 Contoh Pembuatan Marquee:
<marquee scrollamount=”15”>Marquee dengan atribut scroolamount
<marquee behavior=”scroll”>Marquee dengan atribut behavior scroll
<marquee behavior =”slide”>Marquee dengan atribut behavior slide
<marquee behavior =”alternate”>Marquee dengan atribut behavior alternate
17
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 Contoh: latihan24.html Contoh Marquee 3 Contoh Pembuatan Marquee:
<marquee direction=”left” bgcolor=”green” loop=”2” behavior=”slide”>Marquee dengan atribut loop
<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
18
Ld.Farida | STMIK AMIKOM Yogyakarta
Pengenalan Perancangan Web 2016 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
Ld.Farida | STMIK AMIKOM Yogyakarta
