Aturan dasar bahasa HTML. Sintaks Sintaks PHP Html

Aturan dasar bahasa HTML. Sintaks Sintaks PHP Html
Aturan dasar bahasa HTML. Sintaks Sintaks PHP Html
22.04.2020

Mari kita mulai belajar bahasanya. Teks HTML adalah "teks biasa". Semua fitur hypertext dari suatu dokumen ditentukan menggunakan tag - catatan khusus yang disertakan dalam teks ini.

Biarkan ada teks:

Mari kita menulis teks ini secara berbeda, memasukkan instruksi tentang bagaimana teks tersebut harus ditampilkan. Kami menyorot instruksi dengan tanda kurung sudut.

Dalam HTML, instruksi disebut tag. Browser menjalankan instruksi tag, yaitu, tanpa menampilkannya, browser membuat perubahan teks. Oleh karena itu, kita akan melihat yang berikut di layar:

“Ibu sedang mencuci bingkai, dan kucing sedang bermain bola. Anak laki-laki itu mengambil bola dari kucing itu.”

Tag – perintah dalam tanda kurung sudut. Nama tag ditulis pertama kali setelah tanda kurung siku pembuka, tanpa spasi sebelumnya! Ada tag tunggal dan tag kontainer. Tag tunggal– beberapa perintah ke browser dijalankan di tempat yang ditentukan, misalnya perintah “gambar garis”:

Tag wadah terdiri dari tag pembuka dan tag penutup, dan indikasinya mengacu pada semua teks yang terletak di antara keduanya, katanya: "bersarang di dalam wadah". Tag penutup memiliki nama yang sama dengan tag pembuka, namun namanya diawali dengan karakter garis miring: “/”:

Ibu mencuci bingkai itu.

.

Sebuah tag dapat memiliki atribut. Atribut melengkapi dan menjelaskan tag. Urutan atribut tidak penting. Misalnya tag HR memiliki atribut WIDTH yang menunjukkan lebar garis, SIZE, ketebalan garis, ALIGN, letak (alignment), dan COLOR, warna. Nilai atribut menentukan karakteristik tertentu. Aturan sintaksnya adalah sebagai berikut: nama tag dapat diikuti oleh setidaknya satu spasi, kemudian, dipisahkan oleh spasi, dapat diikuti tiga kali lipat: atribut, simbol “=”, nilai. Disarankan agar nilai diapit oleh tanda kutip, meskipun standar HTML memperbolehkan nilai yang hanya terdiri dari huruf Latin dan angka tidak diapit tanda kutip.

Gambar di layar akan terlihat seperti ini.

_____________________________________

Standar ini memungkinkan Anda untuk menghilangkan tag penutup jika tersirat. Misalnya, tandai

Terdapat paragraf penutup, namun dapat dihilangkan sebelum membuka paragraf berikutnya. Menandai

Menunjukkan sebuah paragraf.

Ibu mencuci bingkai itu.

Putrinya sedang bermain bola.

Beberapa atribut tidak memiliki nilai, atau lebih tepatnya, memiliki arti tunggal, oleh karena itu cukup dengan menunjukkan atau tidak menunjukkan atribut ini dalam tag. Misalnya, tag FRAME memiliki atribut NORESIZE, yang menunjukkan bahwa pengguna tidak diperbolehkan mengubah ukuran frame.

Tag (elemen) dalam HTML dapat disarangkan satu sama lain, mirip dengan loop atau pernyataan kondisional dalam bahasa pemrograman. Persimpangan tag tanpa bersarang dilarang.

Contoh entri yang salah:

contoh blok

dengan paragraf bersarang

Contoh entri yang benar:

contoh blok

Dengan paragraf bersarang

Selain tag dan teks biasa, kode HTML mungkin berisi apa yang disebut objek karakter atau urutan escape: entitas bernama dan bernomor. Mereka diperlukan untuk mewakili karakter dalam dokumen yang dilarang secara sintaksis atau fisik, serta karakter yang tidak dapat dimasukkan dari keyboard. Misalnya,

Huruf besar-kecil tidak penting untuk nama tag dan nama serta nilai atribut. Meskipun disarankan untuk mempertahankan beberapa gaya, misalnya menulis nama semua tag dengan huruf kapital, atau dengan huruf kecil, atau dengan huruf kecil, tetapi dengan huruf kapital pertama. Teks seperti itu lebih mudah dipahami seseorang.

Catatan yang sangat penting! Tujuan browser adalah untuk menampilkan halaman Anda kepada klien. Reaksi umum browser terhadap kesalahan adalah mencoba memperbaiki kesalahan tersebut, dan jika gagal, lewati kata atau tag yang tidak dipahaminya. Ini baik dan buruk. Karena, di satu sisi, sebagai akibatnya, browser akan mencoba menampilkan teks sebanyak mungkin kepada pengguna, namun, di sisi lain, teks ini mungkin menyertakan bagian dengan tag dan skrip, atau teks sebenarnya mungkin tidak. disertakan jika browser menganggapnya, misalnya, sebagai komentar. Bagi seorang pengembang website, perilaku browser ini sangat mengganggu. Bersiaplah untuk kenyataan bahwa pada awalnya browser akan dengan rajin memperbaiki kesalahan Anda, tetapi setelah beberapa saat browser akan menjadi bingung dan fragmen yang sebelumnya berfungsi akan berhenti bekerja untuk Anda. Oleh karena itu, sarannya: jangan membuat kesalahan, tetapi gunakan editor modern yang mengetahui aturan html dan menunjukkan kesalahan kepada Anda.

Pembaruan terakhir: 18/11/2019

Saat membuat dokumen HTML5, kita dapat menggunakan dua gaya berbeda: HTML dan XML.

Gaya HTML mengasumsikan poin-poin berikut:

    Elemen mungkin tidak memiliki tag pembuka awal

    Elemen mungkin tidak memiliki tag penutup akhir

    Hanya elemen kosong (misalnya br , img , link) yang dapat ditutup dengan garis miring />

    Kasus nama tag dan atribut tidak menjadi masalah

    Anda tidak perlu mengapit nilai atribut dalam tanda kutip

    Beberapa atribut mungkin tidak memiliki nilai (dicentang dan dinonaktifkan)

    Karakter khusus tidak dapat diloloskan

    Dokumen harus memiliki elemen DOCTYPE

Inilah yang disebut gaya “permisif”, berdasarkan relaksasi saat membuat dokumen.

Dokumen HTML5 juga dapat dijelaskan menggunakan sintaks XML. Gaya ini juga disebut "XHTML". Ini digunakan jika header tipe konten adalah application/xml+xhtml . Aturan berikut ini khas untuk gaya ini:

    Setiap elemen harus memiliki tag pembuka awal

    Elemen tak batal yang memiliki tag pembuka awal juga harus memiliki tag penutup akhir

    Elemen apa pun dapat ditutup dengan garis miring />

    Nama tag dan atribut peka huruf besar-kecil dan biasanya menggunakan huruf kecil

    Nilai atribut harus diapit tanda petik

    Atribut tanpa nilai tidak diperbolehkan (checked=”checked” bukan hanya dicentang)

    Karakter khusus harus di-escape

Mari kita bandingkan dua pendekatan. Pendekatan HTML5:

Menuju

Konten dokumen HTML5


Dan contoh serupa menggunakan pendekatan XHTML:

Menuju

Konten dokumen HTML5



Saat menggunakan sintaks XHTML, kita juga perlu menentukan namespace untuk dokumen tertentu:

Pilihan gaya tertentu saat menulis dokumen HTML bergantung pada preferensi programmer atau perancang web. Gaya campuran sering digunakan, yang meminjam aturan dari gaya pertama dan kedua.

Pada saat yang sama, perlu diingat bahwa keberadaan tag penutup dan pembuka pada suatu elemen mengurangi kemungkinan elemen tersebut disalahartikan oleh browser.

Selain itu, menyertakan nilai atribut dalam tanda kutip akan membantu menghindari potensi kesalahan. Dengan demikian, atribut kelas dapat mengambil beberapa nilai secara berurutan. Misalnya:

. Namun jika kita menghilangkan tanda kutip, "navmenu" akan digunakan sebagai nilainya, dan browser akan mencoba menafsirkan "bigdesctop" sebagai atribut terpisah.

Jika timbul kesulitan, seberapa benar yang dibuat penandaan html, lalu bisa dicek menggunakan validator di https://validator.w3.org:

Kita dapat menempelkan kode halaman web ke dalam kolom teks, dan setelah mengklik tombol “Periksa” di bagian bawah, validator akan menampilkan kesalahan dengan warna merah atau memberi tahu kami dengan warna hijau bahwa tidak ada kesalahan dan kode telah divalidasi.

Alexander Kichatov

Cara kerja skrip PHP

Pasti Anda sudah familiar dengan prinsip pengoperasian mobil yang dikendalikan radio. Anda menekan ke depan - mobil bergerak, Anda menekan ke kiri - mobil mengubah arah roda.

PHP bekerja persis sama. Anda menulis perintah satu demi satu, dan PHP menjalankannya secara berurutan.

Apa itu skrip PHP

Skrip PHP adalah file teks biasa dengan ekstensi .php. Sama persis dengan html dan css.

Namun ada satu perbedaan penting:

Skrip diluncurkan hanya melalui permintaan http di browser. Artinya untuk menjalankan skrip script.php, Anda perlu menulis site.ru/script.php di bilah alamat browser

Jika skrip tidak berfungsi, periksa URL saat ini. Jika ada yang seperti itu file:///D:/openserver/domains/site.ru/script.php- ini berarti Anda tidak mencoba membuka halaman situs, tetapi membuka file PHP itu sendiri di browser. Ini salah.

Server web paling sering dikonfigurasi sehingga ketika Anda mengakses halaman rumah(misalnya site.ru) file index.php atau index.html yang terletak di root situs diluncurkan secara otomatis.

Buat file bernama index.php di folder root situs dan buka di editor teks Anda. Jika ada file index.html harus dihapus.

Jika Anda belum memilikinya editor teks- Saya merekomendasikan Notepad++ yang ringan dan gratis, ini jauh lebih nyaman daripada notepad bawaan Windows.

Pastikan untuk mengikuti pengkodean skrip. Pengkodeannya harus berupa salah satu dari keduanya UTF-8 tanpa BOM(jika tersedia di editor Anda), atau sederhananya UTF-8.

Mencetak angka dan string dalam PHP

Perintah PHP ditulis di antara tag, Misalnya:

Perintah echo bertanggung jawab untuk menampilkan informasi di layar. Setelah operator, nilai yang akan dikeluarkan ditunjukkan.

Untuk menampilkan teks, Anda perlu menentukannya dalam tanda kutip tunggal atau ganda:

Perintah-perintah di PHP dipisahkan dengan titik koma. Untuk kemudahan membaca, biasanya setiap perintah ditulis dengan baris baru:

Hasil di browser:

Ini adalah kode PHP.

Mengeluarkan kode HTML di PHP

Kode HTML dapat dicampur dengan perintah PHP:

Anda juga dapat memasukkan kode HTML ke dalam string PHP:

Napoleon"; ?>

Hasil di browser:

Gajah Napoleon

Kita dapat menggabungkan kode PHP dan tag HTML sesuka kita:

Jalur2" ?>

Fungsi di PHP

Fungsi adalah perintah yang melakukan beberapa tindakan, seperti perhitungan, manajemen file, dll.

Sangat mudah untuk mendefinisikan suatu fungsi - ada setelah namanya tanda kurung:

Fungsi phpinfo() menampilkan informasi tentang pengaturan PHP saat ini.

Beberapa fungsi mengharapkan beberapa nilai diteruskan ke fungsi tersebut. Misalnya, fungsi pembulatan ceil() mengharapkan suatu bilangan dibulatkan:

Fungsi ceil() menerima nilai 91,5 yang kita berikan, memprosesnya (membulatkannya menjadi 92) dan mengembalikan hasilnya. Dan perintah echo menerima nilai yang dikembalikan oleh fungsi tersebut dan menampilkannya di layar. Hasil skrip ini akan menjadi 92.

Perlunya Tag Penutup di PHP

Jika tidak ada HTML atau keluaran lainnya di layar setelah perintah PHP, maka kita dapat menghilangkan tag penutup ?>:

Sintaks tag pembuka yang dipersingkat di PHP

Alih-alih

Selain itu, kita bisa mengganti tagnya

Menggunakan tag

Ini tidak berlaku untuk tag

menunjukkan standar HTML mana yang digunakan untuk menulis halaman Web Anda.


DOCTYPEKeterangan
HTML5
Untuk semua dokumen.
HTML 4.01
"http://www.w3.org/TR/html4/strict.dtd"> Sintaks HTML yang ketat.
Sintaks HTML transisi.
Dokumen HTML menggunakan bingkai.
XHTML 1.0
Sintaks XHTML yang ketat.
Sintaks XHTML transisi.
Dokumen ini ditulis dalam XHTML dan berisi bingkai.
Profil seluler XHTML, menambahkan elemen khusus untuk ponsel.
XHTML 1.1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Definisi ini tidak memiliki pembagian tipe; sintaksisnya sama dan mematuhi aturan yang jelas.

Jadi, ada beberapa doctypes (ketat dan transisi, untuk HTML dan XHTML). Standar mana yang harus dipilih adalah pertanyaannya.

Standar HTML dan XHTML

HTML adalah bahasa markup standar untuk dokumen Web.

Dalam HTML 4.01 dan HTML5, tampilan halaman dipisahkan dari kontennya. Konten dan struktur (judul, paragraf, tautan) ditentukan dalam HTML. Desain (penyelarasan, font, warna) ditentukan oleh gaya CSS.

Misalnya, tandai dan atribut align sudah tidak digunakan lagi.

XHTML adalah bahasa markup dokumen Web yang dapat diperluas berdasarkan XML. Standar XHTML adalah daftar perbedaan antara HTML 4.01 dan XHTML.

Persyaratan XHTMLItu dilarangPerlu
Semua tag harus ditutup.
Semua tag, atribut, dan properti CSS harus menggunakan huruf kecil.
Semua nilai atribut tag harus diapit tanda petik.
Hirarki harus diikuti dengan ketat: tag pertama ditutup terakhir.... ...
Tag blok tidak dapat disarangkan dalam tag sebaris. (Setelah elemen blok, keluaran selanjutnya pada halaman dilakukan pada baris baru. Elemen sebaris tidak menghasilkan jeda baris.)
...
...
Atribut Boolean ditulis dalam bentuk yang diperluas.
Gambar harus memiliki deskripsi

Kelebihan bahasa XHTML bukanlah pada ketatnya sintaksisnya, tetapi pada kemampuannya untuk membuat tag sendiri.

Namun, pada tanggal 2 Juli 2009, World Wide Web Consortium (W3C) mengumumkan penghentian pengerjaan XHTML 2.0, karena menganggap konsep XHTML tidak tepat. Sekelompok programmer beralih untuk mengerjakan standar HTML5. Meskipun standar HTML5 belum disetujui, banyak situs telah menulisnya.

Siapa pun yang bertanya-tanya kapan HTML5 akan selesai dapat melihat sumber aslinya:

Versi resmi standar HTML5 terletak di: www.w3.org/TR/html5/

Mari kita membuat pilihan. Ini tidak sulit untuk dilakukan: Anda tidak boleh menggunakan standar XHTML jika Anda tidak ingin memperluas bahasa HTML.

Kami tidak akan memikirkan!DOCTYPE, ditujukan untuk dokumen menggunakan bingkai: kemarin lusa.

Pertanyaan selanjutnya adalah: sintaks mana yang harus dipilih - ketat atau transitif?

Sintaks HTML 4.01 yang ketat dan transisi

Sintaks transisi ada untuk memudahkan transisi standar baru. Mereka akan melewatkan banyak hal yang dianggap kesalahan oleh sintaksis ketat.

Lebih mudah untuk memahami apa yang ada di sini dengan sebuah contoh. Pertama, mari kita atur sintaks ketatnya.

Sintaks yang ketat

Pemeriksaan validitas

Pemeriksaan validitas

merah warna.



Kesesuaian kode HTML dengan standar yang dinyatakan disebut keabsahan, dan memeriksa korespondensi ini adalah validasi.

Untuk melacak kesalahan tata letak, instal add-on FireFox Html Validator.

Mari buka halaman kami di peramban FireFox, gerakkan mouse ke atas tanda validator:

Mengklik dua kali pada tanda validator akan menampilkan daftar detail kesalahan:


Mari kita ubah! DOCTYPE ke sintaks transisi:

Sintaks transisi

Pemeriksaan validitas

Pemeriksaan validitas

Bagian dari teks perlu disorot merah warna.



Luncurkan FireFox. Tidak ada kesalahan:


Segalanya tampak baik-baik saja. Mungkin kita harus berhenti di situ?

Saran saya: lakukan tata letak yang valid sesuai dengan sintaks ketat HTML 4.01, atau langsung di HTML5. HTML harus digunakan untuk tujuan yang dimaksudkan, dan desainnya harus diserahkan kepada CSS. Selain itu, jika situs memiliki tata letak yang valid, namun tidak ditampilkan dengan benar di browser mana pun, maka ini jelas merupakan masalah browser. Browser versi baru akan lebih sesuai dengan standar dan tidak membuat kesalahan dalam menafsirkan kode yang valid. Jika tata letak yang rumit diimplementasikan dengan cara yang tidak valid, maka tidak ada jaminan bahwa browser versi baru tidak akan menghancurkannya menjadi beberapa bagian.

Jangan tergoda oleh kesetiaan sintaksis transisi, hanya kepatuhan yang ketat terhadap standar!

Mengapa diperlukan tata letak yang valid?

Tampaknya, mengapa repot-repot? Lagi pula, browser sering kali memperbaiki kekurangan tata letak kecil secara otomatis, dan situs berfungsi dengan baik. Namun kesalahan kecil yang hampir tidak terlihat ini tetap diperhatikan oleh mesin pencari. Bahkan satu tag hilang

- ini merupakan minus dalam menilai kualitas situs.

Justru karena kemampuannya mesin pencari perhatikan adanya kekurangan pada kode HTML dan disarankan untuk menjaga keabsahan layout. Selain itu, dengan memeriksa validitas kode, Anda dapat menemukan, bersama dengan kekurangan kecil, kesalahan serius yang tidak diketahui sebelumnya.



Sintaksis bahasa HTML

Beras. 1.6. Menampilkan halaman HTML sederhana di browser web

Aturan dasar bahasa HTML

Nama tag HTML tidak peka huruf besar-kecil, dan dalam XHTML, huruf kecil dan kapital dianggap berbeda, dan nama tag harus ditulis dengan huruf kecil.

Elemen dapat mencakup teks dan subelemen (seperti elemen html yang berisi subelemen head dan body pada contoh di atas). Elemen harus disarangkan dengan benar.

Subelemen yang termasuk dalam suatu elemen harus diakhiri sebelum penutup elemen tersebut. Misalnya, entri berikut ini salah: <а>

Benar, fragmen ini akan terlihat seperti ini:

Ini adalah teks tebal dan miring

Dalam XHTML, jika suatu elemen tidak menyertakan teks dan subelemen (elemen kosong), elemen tersebut harus tetap memiliki tag pembuka dan penutup. Misalnya, elemen br tidak memiliki konten dan menyebabkan jeda baris (teks berlanjut pada baris baru). Namun menurut aturan, sebaiknya ditulis sebagai berikut:

atau singkatnya
. Elemen tersebut harus ditulis dengan cara yang persis sama

– keluaran garis horizontal.

Tag pembuka elemen dapat memiliki atribut, yang memperjelas perilaku elemen dan menetapkan nilai tambahan. Hampir setiap tag memiliki banyak parameter opsional. Selanjutnya, hanya atribut utama dari tag yang akan dipertimbangkan.

Banyak atribut dalam HTML yang umum untuk semua elemen, namun ada pula yang khusus untuk elemen atau elemen tertentu. Semuanya terlihat seperti:

atribut_nama="nilai"

Misalnya:

Dasar-dasar Bahasa Markup Hypertext"

DI DALAM dalam contoh ini elemen div (bagian halaman HTML yang memungkinkan Anda memisahkan dokumen menjadi blok logis) memiliki atribut id yang disetel ke mySection. Elemen div berisi elemen h1 (heading level pertama atau terpenting), yang pada gilirannya berisi beberapa teks. Nilai atribut harus diapit tanda kutip tunggal atau ganda.

Nama tag dan atribut serta kemungkinan nilainya ditentukan oleh spesifikasi bahasa HTML, dan Anda tidak dapat membuat tag atau atribut sendiri.

Semua elemen dapat memiliki atribut id dan kelas, yang nilainya digunakan untuk mengidentifikasi elemen tertentu (id) atau kelompok elemen (kelas). Atribut ini secara aktif digunakan dalam skrip dokumen dan Deskripsi CSS gaya dokumen.

Ada dua kategori utama elemen dalam HTML: memblokir Dan rangkaian

  • Elemen Blok biasanya menginformasikan tentang struktur dokumen. Unsur-unsur tersebut dimulai pada baris baru, melepaskan diri dari apa yang ada sebelumnya. Contoh elemen blok adalah paragraf, item daftar, header dan tabel, wadah div.
  • Elemen string terkandung dalam elemen struktur tingkat blok dan hanya mencakup sebagian teks dokumen, bukan keseluruhan area. Elemen sebaris tidak menyebabkan munculnya baris baru dalam dokumen karena merupakan elemen yang muncul dalam paragraf teks. Contoh elemen string adalah tautan, kata atau frasa yang disorot, wadah rentang.