Contoh halaman HTML dan prinsip-prinsip asas

Mencipta banyak bahasa, tetapi bahasa HTML adalah salah satu yang paling khas dan vosstrebovan. Oleh kerana ia melibatkan banyak inisiatif utama lain dalam pengaturcaraan. Banyak yang disediakan, apabila dalam minda pengetahuan masa kini pemaju bahasa penanda - HyperText Markup Language (HTML).

Malah, dalam HTML, tiada apa yang sukar, dan dalam beberapa minit semua yang paling jauh dari pengaturcaraan dan rakyat Internet akan memenuhi penubuhan HTML-muka surat dalam buku nota. contoh perlu diberi perhatian, kesederhanaan, sesungguhnya, boleh diakses oleh semua orang.

perihalan am

fail HTML - tapak satu halaman, walaupun ini boleh dibahaskan, tetapi yang satu fail setiap halaman, untuk memulakannya adalah jelas.

fail HTML bermula dengan tandukan DOCTYPE yang menentukan bahawa jenis fail - HTML. Semua elemen halaman (tag) ditunjukkan dalam kurungan sudut. Setiap pasangan ( "<" dan ">") termasuk satu tag HTML. Biasanya tag HTML berpasangan, iaitu, bagi tiap-tiap «tag» mempunyai «/ tag». Kedua-duanya dikurung dalam kurungan sudut. Terdapat tag tunggal, yang paling popular «br /» yang - peralihan ke baris seterusnya.

Tag terbesar dalam fail - ia sendiri HTML, termasuk hanya dua tag: kepala dan badan. Dalam kes pertama, spesifikasi yang berbeza adalah penunjuk kepada pautan ke fail halaman lain yang berkaitan mungkin PHP kini dan skrip JavaScript. Dalam halaman kedua kandungan bertulis. Juga dalam bentuk tag dan skrip.

Mudah HTML-halaman

Contoh membuat halaman seperti ditunjukkan dalam artikel di bawah. Mempertimbangkan dengan teliti.

seksyen HEAD

Utama tujuan HEAD tag - penerangan umum halaman dan skrip umum, walaupun kedua - hanya satu konsep yang relatif. Biasanya terdapat kepentingan yang besar kepada hanya dua perkara:

• kata kunci dan penerangan halaman;
• pautan ke fail lain (* Css dan * .js).

Untuk memaparkan kandungan kandungan halaman seksyen ini mempunyai kepentingan tidak langsung hanya kerana ia menunjukkan di mana beberapa fail lain mempunyai peraturan CSS untuk tag dan skrip lain bahasa.

HTML-halaman mempunyai tajuk (TAJUK), yang dipaparkan apabila pengunjung membawa tetikus anda ke atas tab mana halaman dibuka. Ini adalah penting, kerana ia membuatkan halaman lebih rapi, lebih mudah untuk mengatakan, yang ditandatangani teks boleh dibaca.

META-tag adalah penting dalam pengaturcaraan web secara umum, tetapi apabila ia memerlukan penciptaan HTML-muka surat dalam buku nota, contoh kekusutan yang tidak diingini struktur berlebihan.

Pada LINK dan pautan SCRIPT perlu memberi perhatian khusus. Yang pertama merujuk kepada tempat di mana terdapat fail CSS lembaran gaya, kedua - lokasi fail JavaScript-kod. Pautan tersebut boleh ditetapkan.

Jika anda menggunakan skrip harus dianggap sebagai pengetahuan HTML akan menjadi lebih kuat, anda perlu memberi perhatian serta-merta pada lembaran gaya melata. Fail CSS adalah, khususnya, kaedah-kaedah pendaftaran tag HTML.

seksyen BODY

Malah, laman sampel HTML - ini adalah seksyen BODY. Ia adalah di sini yang mengandungi semua maklumat, semua halaman kandungan. Semua maklumat yang dikemukakan dalam bentuk tag dan skrip, seperti memasukkan JavaScript-kod atau keping PHP-program.

Ia adalah penting untuk menyedari bahawa contoh halaman web HTML dalam pelayar dan contoh yang sama dalam editor teks seperti notepad, ini bukan perkara yang sama. Dalam kes pertama kami bersedia HTML teks di mana semua skrip dilaksanakan. Sebagai contoh, PHP telah memenuhi peranannya dan membentuk bukannya kod di tempat yang betul tag. JavaScript juga memenuhi misinya, walaupun mengenainya belum menjadi perbualan yang berasingan.

HTML - ia tanda nama bukan skrip. Akhirnya, hanya kandungan laman yang dipaparkan dalam pelayar, tetapi tanda itu. No PHP-kod tidak ada.

JavaScript berada dalam kedudukan yang istimewa, jagaannya - untuk berkhidmat kepada halaman, bukan sahaja pada masa boot (beban), tetapi di saat-saat apabila halaman adalah dalam pelayar pelawat, dan kajian ia.

Satu contoh mudah kod HTML-halaman (hanya seksyen BODY) ditunjukkan di bawah.

Penyemak imbas pelawat ia kelihatan seperti yang ditunjukkan di bawah.

tidak dinyatakan dalam kod sepatutnya kelihatan seperti unsur-unsur yang membawa pelayar. Semua reka bentuk boleh dilihat dalam peraturan CSS. Dalam kes ini, MCSS fail / scPhpWordRW.css yang dirujuk (lihat. Contoh yang pertama daripada HTML halaman).

Tidak seperti HTML, CSS tema adalah lebih mudah, terdapat peraturan yang sangat mudah dan bilangan mereka adalah kecil, apabila contoh penciptaan HTML-laman tidak memerlukan apa-apa selain daripada notepad. Segala-galanya adalah sangat mudah untuk pembangunan serta-merta:

Ini menunjukkan bagaimana mudah ia digambarkan tag scLogo_vDoc, dan keterangan ini adalah bahawa dalam keadaan biasa tag memaparkan gambar vDoc-logo.png, dan apabila tetikus ke atasnya - dipaparkan vDoc-logo-h.png.

Struktur penerangan HTML

Bahasa tidak melibatkan menjalankan mana-mana struktur dan sintaks konsep di sini adalah sangat relatif. Tiada pembolehubah, tetapi terdapat banyak peluang. Asas asas hiperteks adalah bahawa terdapat unsur (tag) yang pasti untuk mempunyai nama.

Nama kes, pasangan tag, terdiri daripada nama khas (tanda nama di) dan kurungan sudut ( «<» + tanda nama di + «>»), jika kita bercakap tentang permulaan tag, dan «», jika direkodkan penghujungnya.

Contoh halaman HTML yang menerangkan sifat-sifat bertempat di teks di bawah.

tag ini mempunyai sifat-sifat, maka mereka akan dimasukkan melalui ruang selepas nama tag sebelum tutup kurung sudut ">". Sifat-sifat, jika mereka mempunyai tag yang dirakamkan hanya pada permulaan. Kandungan tag adalah bahawa yang terletak di antara tag permulaan dan akhir itu.

Jumlah penerangan kandungan HTML

HTML membolehkan anda untuk menggambarkan blok dan sebaris unsur-unsur. Pertama menduduki kawasan tertentu dalam tetingkap pelayar dapat diletakkan secara mutlak, yang ada di tempat yang betul pada bidang paparan HTML-halaman, dan mempunyai saiz yang tertentu.

elemen sebaris umumnya muncul satu thread, iaitu, seperti yang dinyatakan dalam fail halaman, dan dipaparkan pada skrin. Paparan jumlah aliran boleh dipengaruhi apabila beban halaman berlaku. Penempatan, penglihatan, dan hartanah lain unsur-unsur blok boleh dipengaruhi pada bila-bila menerusi JavaScript-kod.

Sebagai tambahan kepada unsur-unsur mudah, HTML menawarkan untuk menggambarkan meja dan bentuk. Elemen-elemen ini sangat diperlukan dalam "bangunan tapak setiap hari."

Keterangan jadual: JADUAL tag, TR, TD

Apabila tag TABLE boleh digunakan untuk membuat jadual, menentukan bilangan baris dan TR berturut-turut untuk beberapa sel TD. Berbeza dengan jadual biasa organisasi, disebabkan HTML markup organisasi jadual sifat terhad kepada pengakuan ini, kerana jika pemaju mahu mempunyai jadual segi empat tepat di mana bilangan lajur dalam semua baris yang sama, maka ia perlu mengikuti bahawa untuk diri sendiri.

Kedudukan berprinsip HTML: melakukan apa sahaja, tetapi apa-apa yang tidak difahami. Dalam beberapa kes ia tidak begitu penting untuk bilangan lajur dalam setiap baris jadual, tetapi jika anda mahu untuk melaksanakan sel cantum melintang atau menegak, ia adalah perlu untuk mengira semua berhati-hati.

page contoh HTML dengan penerangan jadual yang mudah grafik ditunjukkan dalam artikel.

Berikut adalah jadual yang menunjukkan saiz tiga baris tiga tiang, dengan tag baris pertama TH telah digunakan dan bukannya tag TD - pengepala lajur. Terutamanya dibezakan kedua-dua tag tidak mempunyai, tetapi ia adalah mungkin untuk menggunakan yang pertama untuk membezakan antara baris pertama jadual, dan CSS untuk TH, anda boleh melampirkan gaya anda sendiri, yang membezakannya daripada TD lain.

Huraian bentuk: tag BORANG, INPUT

Borang - ini adalah bahagian yang paling menuntut HTML-tag. Menggunakan bentuk boleh menghantar maklumat. Sebenarnya, halaman - paparan maklumat ini, tetapi bentuk - input.

page contoh HTML dengan penerangan bentuk yang mudah:

Menggunakan bentuk banyak lagi, tetapi ciri-ciri utama adalah seperti berikut. Anda boleh menentukan medan input, anda perlu memberikan mereka untuk mereka bentuk dan pengendali acara untuk analisis input pengguna. Anda boleh menentukan medan tersembunyi dan menghantar maklumat dari latar belakang halaman. Anda boleh menetapkan butang penghantaran maklumat, menekan yang memulakan proses pemindahan data.

menggunakan HTML

Tahu bahasa hiperteks - satu keadaan yang amat diperlukan bagi mana-mana pengkhususan kerja dalam bidang pengaturcaraan Internet, tetapi jika anda mahu menulis program dalam PHP atau JavaScript, maka ketahuilah HTML + CSS perlu sempurna.

bahasa PHP telah dikenal pasti dalam contoh sebelumnya. PHP berjalan pada pelayan, kerana halaman borang ini terbang dari pelayan ke pelayar dengan bidang diisi. Khususnya, fungsi TestOnBlur disebut dalam INPUT tag (onblur pengendali peristiwa), menerima semua parameter dalam bentuk medan teks.

Penyemak imbas berjalan JavaScript, dan untuk bekerja dengan betul data menghantar butang kembali ke pelayan, iaitu, reka bentuk :. onclick = jQuery ( '# untuk') val ( 'cart'), adalah perlu untuk mengetahui bukan sahaja tentang apa yang jQuery, tetapi apa #to, val, cart. Lebih tepat lagi, ia adalah perlu untuk mengetahui tag HTML asas dan kaedah-kaedah am memohon kepada mereka gaya CSS.

Ini sudah cukup untuk cepat meningkatkan kelayakan mana-mana pengkhususan dalam bidang pengaturcaraan Internet.