Secara umum, kita dapat menggunakan program yang sama untuk membuat dokumen HTML yang digunakan untuk membuat program PHP. Jika kita melihat jenis dokumen ini di halaman web, kita akan tahu bahwa halaman tersebut mungkin menggunakan sintaks yang sedikit berbeda untuk merender dokumen HTML-nya.

MEMBUAT HTML YANG BAIK

Sama seperti bagian kepala yang berisi elemen lain seperti judul dan informasi meta, bagian isi juga dapat berisi beberapa elemen HTML. Misalnya, di bagian utama ini Anda akan menemukan semua link dan elemen gambar, beserta paragraf, tabel, dan semua hal lain yang diperlukan untuk menampilkan halaman.

PERBEDAAN ANTARA ELEMEN DIV DAN SPAN

Elemen judul seperti

,

hingga

merupakan tempat yang baik untuk menempatkan judul, sedangkan
,

, dan

merupakan wadah yang cocok untuk teks yang lebih panjang, misalnya paragraf. Elemen Tingkat Blok: Elemen

dan

keduanya dikenal sebagai elemen tingkat blok.

Gambar 1.2 Berbagai elemen dengan lebar berbeda

BERLATIH MEMBUAT TABEL

Perhatikan bahwa satu-satunya perbedaan adalah penambahan spasi dan kemudian batas di dalam elemen

.

MENYERTAKAN TAUTAN DAN GAMBAR DI HALAMAN WEB ANDA

Seperti sebelumnya, link terdapat dalam elemen

, namun perhatikan bahwa atribut href sekarang hanya mengarah ke table.html. Dengan kata lain, IMG01.jpg terletak di direktori yang sama dengan halaman image.html di server web.

MENULIS HTML VALID

Tempelkan HTML ke Validator: Ini berarti menyalin HTML dari editor teks dan menempelkannya ke tab 'Validasi dengan masukan langsung' di Validator. Dengan browser terbuka, ketik http://validator.w3.org ke alamat browser atau bilah lokasi dan tekan Enter untuk membuka Validator.

Gambar 1.13 W3C Layanan Validasi Markup, terkadang hanya disebut Validator.

MENAMBAHKAN STYLE DENGAN CSS

CSS meringankan beban memperbarui elemen-elemen individual ini dan membuatnya sehingga kita dapat menerapkan satu gaya ke satu atau lebih elemen. Misalnya, jika kita ingin semua judul dicetak tebal, namun beberapa judul harus dicetak miring, kita dapat melakukannya dengan CSS.

KETERBATASAN CSS

Kita bisa menerapkan beberapa gaya ke elemen yang sama, dan kita bisa menargetkan gaya tertentu ke elemen individual. Pengujian di browser lain memungkinkan kami melihat tampilan situs di browser tersebut dan memperbaiki masalah tata letak sebelum menampilkan situs di web.

TIPE GAYA

Untuk mempelajari cara membuat gaya penjelajahan default Anda sendiri, gunakan mesin pencari untuk memasukkan nama browser Anda diikuti dengan "userstyle" (mis. "Firefox userstyle" atau "Opera userstyle") untuk mengetahui caranya. Jika gaya pengguna ditentukan yang ditetapkan sebagai browser default, pengaturan browser default akan ditimpa.

MENYAMBUNGKAN CSS KE HALAMAN

Gaya apa pun yang tidak ditentukan dalam lembar gaya pengguna akan mempertahankan nilai defaultnya seperti yang ditetapkan di browser. Namun, pada titik ini Anda harus mulai menghilangkan pemisahan antara gaya dan konten, karena file gaya eksternal apa pun yang dimuat pada saat yang sama akan memiliki prioritas lebih rendah.

CASCADE CSS

Halaman ini menambahkan lembar gaya internal untuk menambahkan font tebal ke elemen

dan font gaya miring ke semua elemen

di halaman. Pada contoh style sheet internal sebelumnya, pemilihnya adalah elemen

, atau semua elemen

pada halaman.

Gambar 2.4 Membuat halaman web sederhana.

MENGIMPOR CSS DARI DALAM HTML

Daripada

seperti dalam HTML, kita menggunakan div ketika kita menggunakannya sebagai pemilih CSS. Berbeda dengan selector yang terjadi ketika kita memilih semua elemen

, kelas CSS hanya diterapkan pada elemen spesifik yang kita pilih.

COMMENT CSS

Ini menyatakan bahwa konten

dengan salam ID harus menerapkan gaya yang ditentukan dalam pengaturan gaya selamat datang. Elemen HTML bahkan tidak harus bertipe sama; kita dapat menerapkan kelas CSS yang sama pada

, pada tag , dan pada elemen

yang sama.

MENGGUNAKAN KELAS

Namun jika hanya ada satu pernyataan dalam baris (atau dalam pengaturan gaya inline dalam tag HTML), kita dapat menghapus titik koma, sama seperti yang dapat kita lakukan untuk pernyataan terakhir dalam grup. Namun, untuk menghindari kesalahan CSS yang sulit ditemukan, kita dapat memilih untuk selalu menggunakan titik koma setelah setiap pengaturan CSS.

ATURAN CSS

Dengan cara ini, kita dapat dengan mudah melihat di mana setiap kumpulan aturan baru dimulai karena pemilih selalu berada di kolom pertama, dan perintah berikutnya berbaris rapi dengan semua nilai properti yang dimulai pada offset horizontal yang sama. Dalam satu file, tidak ada gunanya mengulangi atribut yang sama untuk pemilih yang sama, namun pengulangan seperti itu sering terjadi di halaman web sebenarnya ketika beberapa style sheet diterapkan.

FONT DAN TIPOGRAFI

Dengan fitur font style kita dapat memilih ingin menampilkan font secara normal, miring atau miring. Seperti yang telah dijelaskan pada bagian ukuran sebelumnya, ada banyak cara untuk mengubah ukuran font.

MENYESUAIKAN PADDING

Dimana padding menggerakkan elemen dari dalam, ada juga properti untuk memindahkan atau memindahkan elemen dari luar. Hasilnya, terdapat 10 piksel padding di atas elemen dalam, 20 piksel di kanan, 30 piksel di bawahnya, dan 40 piksel di kiri.

SELEKTOR CSS

Ketika ada sejumlah elemen pada halaman yang ingin kita bagikan gaya yang sama, kita dapat menetapkan nama kelas yang sama untuk semuanya (seperti:

);. Di browser modern, kita bisa membuat elemen HTML menggunakan lebih dari satu kelas dengan memisahkan nama kelas dengan spasi, seperti ini:

.

MEMILIH BERDASARKAN GRUP

Jika kita menggunakan ul.html, kita hanya perlu menambahkan elemen untuk menyematkan file CSS. Efek ini dibuat dengan menyetel nilai tipe gaya daftar ke none, seperti dalam contoh ini, yang dapat digunakan di file ul.css yang baru saja Anda buat.

MENAMBAHKAN BACKGROUND

Fokus pada elemen

di dalam

lain dalam HTML ini. Dengan menggunakan CSS, kita dapat menargetkan rentang ini berdasarkan posisinya sebagai elemen

turunan.

WARNA CSS

Ini berarti kami dapat melapisi seluruh HTML Anda, termasuk gambar lainnya, di atas gambar latar belakang. Daripada menggunakan warna latar belakang solid, kita dapat memilih untuk menerapkan gradien, yang kemudian secara otomatis akan berpindah dari warna awal yang ditentukan ke warna akhir pilihan Anda.

Gambar 2.25 Warna latar belakang yang solid, gradien linier, dan gradien radial Untuk membuat gradien, pilih di mana itu akan dimulai dari atas, bawah, kiri, kanan, dan tengah (atau kombinasi apa pun, seperti kiri atas atau kanan tengah), masukkan warn

ELEMEN PEMOSISIAN

Ketika hal ini dilakukan, segera terlihat bahwa elemen-elemen dengan posisi tetap tetap di tempatnya bahkan melalui gerakan. Pada gambar, elemen dengan posisi tetap awalnya sejajar dengan dua elemen lainnya, namun tetap di tempatnya sementara elemen lainnya telah berpindah ke atas halaman dan kini tampak tergeser di bawahnya.

Gambar 2.26 Menggunakan nilai pemosisian yang berbeda

PSEUDECLASS

Oleh karena itu, kita dapat menambahkan aturan pada CSS untuk membuat warna latar belakang default menjadi hitam. CSS ini menambahkan aturan penentuan posisi latar belakang dan menempatkannya di tengah bagian atas halaman.

Gambar 2.27 Pseudoclass diterapkan pada pilihan elemen

MENAMBAHKAN GAMBAR BERULANG

Nilai lainnya antara lain kiri, kanan, dan bawah, dan kita bisa menggabungkannya sehingga gambar latar belakang akan muncul di kanan bawah, misalnya. Seperti pada contoh untuk latar belakang gambar tunggal, sekarang kita dapat menambahkan HTML di atas latar belakang, dan sekali lagi memilih warna font yang mengimbangi gambar sehingga pengunjung dapat dengan mudah membaca teksnya.

MEMBUAT LAYOUT HALAMAN

Namun, karena kita ingin kedua kolom tersebut bersebelahan, kita perlu memindahkan wadah konten ke kiri dan sidebar ke kanan. Tata letak ini sekarang berubah sesuai dengan lebar browser, seperti yang ditunjukkan pada Gambar 2.36, di mana kita akan melihat bahwa lebar browser jauh lebih kecil.

Gambar 2.32 Halaman dasar sebelum menambahkan CSS 5. Buat dokumen teks baru.

MENAMBAHKAN HEADER DAN FOOTER KE HALAMAN

Bagian CSS berikut mengubah perilaku elemen dalam menu ini dan dialihkan dengan #menu li a sehingga aturan CSS hanya diterapkan pada elemen . Properti CSS dekorasi teks telah ditambahkan di sini yang mengubah perilaku default tautan .

Gambar 2.37 Layout liquid dua kolom dengan header dan footer Memeriksa file HTML dan CSS

MEMBUAT DAN MENATA FORMULIR WEB MENGGUNAKAN CSS

MENGGUNAKAN FORMULIR WEB UNTUK MENDAPATKAN INFORMASI
MEMBUAT FORMULIR
MENGETAHUI PERBEDAAN METODE GET DAN POST
MENGGUNAKAN CSS UNTUK MENYEJAJARKAN BIDANG FORMULIR

Struktur

, , ini diulangi untuk bidang Email. Perhatikan bahwa nilai dalam bidang Nama kini ditetapkan sesuai dengan properti nilai dalam definisi .

Gambar 3.2 Formulir web dasar dengan dua input.

CSS TINGKAT LANJUT DENGAN CSS3

BAYANGAN KOTAK

Salah satu fitur yang paling banyak diminta dari pengembang web adalah beberapa kolom, dan ini akhirnya diwujudkan dalam CSS3, dengan Internet Explorer 10 menjadi browser besar terakhir yang mengadopsinya. Kini mengalirkan teks melintasi beberapa kolom semudah menentukan jumlah kolom dan kemudian (opsional) memilih jarak antara kolom dan jenis pembatas (jika ada).

WARNA DAN OPACITY

Anda juga dapat menggunakan ini (dan semua fungsi warna CSS lainnya) dengan properti apa pun yang memerlukan warna, seperti warna latar belakang dan sebagainya. Untuk memberikan kontrol yang lebih besar terhadap bagaimana warna muncul, kita dapat menggunakan fungsi hsla, yang memberikan tingkat keempat (atau alpha) untuk warna, yang merupakan nilai floating point antara 0 dan 1.

EFEK TEKS

Misalnya, kata Honorificabilitudinitatibus pada Gambar 4.9 terlalu lebar untuk kotak yang memuatnya (yang tepi kanannya ditampilkan sebagai garis vertikal padat antara huruf t dan a), dan karena tidak ada properti luapan yang digunakan, maka kata tersebut telah melampaui batasnya. Namun pada Gambar 4.10, properti word-wrap pada elemen telah diberi nilai break-word sehingga kata tersebut terbungkus rapi ke baris berikutnya.

Gambar 4.11 Sangat mudah untuk menyertakan font web Google 4.10 TRANSFORMASI

TRANSISI

CSS menampilkan elemen persegi, oranye dengan beberapa teks di dalamnya, dan pseudoclass hover yang menentukan bahwa ketika mouse melayang di atas objek, objek harus berputar 180 derajat dan berubah dari oranye menjadi kuning (lihat Gambar 4-14). Jadi jika kita menggerakkan mouse sebelum transisi selesai, maka mouse akan langsung membalik dan memulai transisi kembali ke keadaan semula.

Gambar 4.14 Objek berputar dan berubah warna saat dilayangkan

HTML5 DAN FITURNYA

PENGENALAN HTML5

Jauh lebih masuk akal untuk membiarkan teknologi browser yang mendasarinya melakukan tugas latar belakang atas nama Anda, yang dapat dilakukan jauh lebih cepat daripada terus-menerus mengganggu browser untuk memeriksa perkembangannya. Seperti yang telah kita lihat, ada banyak hal yang terjadi dengan HTML5, dan inilah hal-hal yang telah ditunggu-tunggu oleh banyak orang - namun akhirnya hadir juga.

Gambar 5.1 Menggambar bendera Jepang menggunakan kanvas HTML5

GEOLOKASI DAN LAYANAN GPS

Jika tidak, alamat Protokol Internet (IP) yang digunakan oleh perangkat kami dapat diambil dan digunakan sebagai indikasi kasar lokasi Anda. Namun paling tidak, alamat IP kita (biasanya) dapat membatasi negara dan terkadang wilayah tempat kita berada.

PENYIMPANAN LOKAL

Masalah terbesar dalam menggunakan cookie untuk penyimpanan lokal adalah kami dapat menyimpan maksimal 4 KB data di setiap cookie. Namun dengan HTML5 kita memiliki akses ke jumlah penyimpanan lokal yang jauh lebih besar (biasanya antara 5MB dan 10MB per domain tergantung pada browser) yang tersisa selama pemuatan halaman dan di antara kunjungan situs web (dan bahkan setelah komputer dimatikan dan disalin lagi).

APLIKASI WEB OFFLINE

File terakhir adalah file clock.css, yang hanya menerapkan gaya tebal pada elemen . Selama file clock.appcache menampilkan semuanya, keempat file ini (clock.html, OSC.js, clock.css, dan clock.js) bersama-sama membentuk aplikasi web offline yang berfungsi yang akan diunduh dan tersedia secara lokal oleh browser web apa pun semuanya, yang mengerti aplikasi web offline.

PESAN LINTAS DOKUMEN

Hal ini penting karena perpesanan web memerlukan pengeposan ke jendela, bukan ke objek di dalam jendela. Namun, contoh-contoh ini menampilkan nilai-nilai tersebut untuk membantu kita bereksperimen dengan perpesanan web dan melihat apa yang terjadi.

Gambar 5.5 iframe sejauh ini telah menerima 17 pesan

MIKRODATA

Selain iframe, dokumen di jendela pop-up dan tab lain juga dapat berkomunikasi satu sama lain melalui metode ini. Browser yang mendukung fitur ini ditampilkan seperti Gambar 5.9, namun browser lain tidak mengaktifkan jendela pop-up.

Gambar 5.6 Dokumen ini berisi microdata,yang tidak memiliki visi.

TAG HTML5 LAINNYA

Untuk perincian lengkap berbagai properti mikrodata yang tersedia, lihat http://schema.org, yang juga merupakan referensi untuk skema mikrodata seperti yang dinyatakan dalam properti itemType. Di bab terakhir, saya akan menunjukkan kepada kita bagaimana kita dapat menyatukan semua teknologi berbeda dalam buku ini untuk membuat situs jejaring sosial mini.

MEMAHAMI DASAR JAVASCRIPT

MELIHAT DUNIA JAVASCRIPTLD DARI JAVASCRIPT

MEMERIKSA CARA MENAMBAHKAN JAVASCRIPT KE HALAMAN

Saat menggunakan file JavaScript eksternal, kami tidak dapat menempatkan JavaScript dalam kumpulan tag yang sama. Contoh ini memuat file JavaScript eksternal dan kemudian mengeksekusi beberapa JavaScript langsung di halaman.

MENJELAJAHI JAVASCRIPT

JAVASCRIPT DAN TEKS HTML

Selain badan dokumen, kita dapat menempatkan skrip di bagian , yang ideal jika kita ingin menjalankan skrip saat halaman dimuat. Jika kita perlu mendukung browser yang tidak menyajikan skrip, kita perlu menggunakan tag komentar HTML () untuk mencegah mereka menemukan kode skrip yang tidak seharusnya mereka lihat.

Gambar 6.1 JavaScript, diaktifkan dan berfungsi

TERMASUK FILE JAVASCRIPT

MEN-DEBUG KESALAHAN JAVASCRIPT

Untuk menguji konsol kesalahan apa pun yang kita gunakan, mari buat skrip dengan kesalahan kecil. Sekarang panggil Error Console di browser Anda, dan kita akan melihat pesan seperti pada Contoh 4.

MENGGUNAKAN KOMENTAR

TITIK KOMA

VARIABEL

Meskipun saya tidak menyarankan menyimpan simbol $, itu berarti kita dapat mem-porting banyak kode PHP lebih cepat ke JavaScript dengan cara ini. Anda dapat memasukkan tanda kutip tunggal dalam string yang diberi tanda kutip ganda atau tanda kutip ganda dalam string yang diberi tanda kutip tunggal.

ARRAY

Contoh 9 menunjukkan bagaimana kita dapat menggunakannya untuk menulis ulang contoh dengan cara yang jauh lebih efisien. Misalnya, untuk membuat array yang berisi detail grid dua dimensi (kotak 8x8), kita dapat menggunakan kode pada Contoh 12.

OPERATOR

Tidak seperti PHP, operator logika JavaScript tidak menyertakan dan dan atau setara dengan && dan ||, dan tidak ada operator xor. Dalam Contoh 17, a dan b adalah dua nilai yang berbeda (satu adalah angka dan yang lainnya adalah string), jadi kita biasanya tidak mengharapkan pernyataan if untuk mengembalikan hasil.

MEMBANGUN PROGRAM JAVASCRIPT

MEMULAI DENGAN PEMROGRAMAN JAVASCRIPT

Jika kita tidak menyetel variabel dengan benar saat membuatnya, seperti pada contoh tersebut, kita dapat menyetelnya kapan saja hanya dengan menyetelnya ke nilai yang kita inginkan. Pernyataan with bukanlah pernyataan yang kita lihat pada bab sebelumnya tentang PHP, karena pernyataan ini eksklusif untuk JavaScript.

Gambar

Tabel 1.1 berbagai jenis elemen dan penggunaanya Elemen Deskripsi Jenis penggunaan

+7

Referensi

Unduh sekarang ( PDF - 325 Halaman - 6.62 MB )

Garis besar

CASCADE CSS FONT DAN TIPOGRAFI MEMBUAT LAYOUT HALAMAN BACKGROUND CSS3 BORDER CSS3 EFEK TEKS GEOLOKASI DAN LAYANAN GPS ARRAY MEMULAI DENGAN PEMROGRAMAN JAVASCRIPT

Dokumen terkait

CORRELATION BETWEEN SELF-REGULATED LEARNING AND ACADEMIC ACHIEVEMENT OF CHEMISTRY EDUCATION STUDENTS OF FKIP SRIWIJAYA UNIVERSITY

Therefore, this research will identify the self-regulated learning in relation to the academic achievement of the chemistry education students of FKIP Unsri by focusing on the following

Apakah Anda tertarik untuk menghasilkan pendapatan pasif? Mari kita mulai bersama kami.

Semakin banyak dokumen yang Anda bagikan, semakin banyak uang yang Anda hasilkan!