Contoh halaman HTML dan prinsip dasar penciptaan

Banyak bahasa telah ditemukan, namun bahasa HTML adalah bahasa yang paling diminati dan paling banyak dicari. Ini melibatkan banyak inisiatif penting lainnya dalam pemrograman. Banyak yang tersedia saat pengetahuan tentang bahasa markup hadir di benak pengembang - HyperText Markup Language (HTML).

Intinya, dalam HTML tidak ada yang rumit, dan dalam beberapa menit saja, yang paling jauh dari pemrograman dan orang Internet, akan melakukan pembuatan halaman HTML di notebook. Contoh yang patut diperhatikan adalah kesederhanaan, yang benar-benar bisa diakses semua orang.

Deskripsi umum

File HTML adalah satu halaman situs, walaupun hal ini dapat diperdebatkan, namun kenyataan bahwa satu file adalah satu halaman dapat dimengerti untuk memulai.

File HTML dimulai dengan header DOCTYPE, yang menunjukkan bahwa jenis file adalah HTML. Semua elemen halaman (tag) ditunjukkan dalam tanda kurung sudut. Setiap pasangan ("<" dan ">") menyertakan satu tag HTML. Biasanya, tag HTML dipasangkan, yaitu ada "/ tag" untuk setiap "tag". Keduanya tertutup dalam kurung sudut. Ada satu tag, yang mana yang paling populer "br /" adalah transisi ke baris berikutnya.

Tag terbesar dalam file adalah HTML itu sendiri, yang hanya mencakup dua tag: HEAD dan BODY. Pada awalnya, berbagai deskripsi dibuat, tautan ke halaman lain ditentukan, skrip PHP dan JavaScript mungkin ada. Pada bagian kedua, isi halaman direkam. Juga dalam bentuk tag dan skrip.

Halaman HTML sederhana

Contoh pembuatan halaman seperti itu tercantum di bawah ini dalam artikel. Anggap saja hati-hati.

Bagian KEPALA

Tujuan utama tag HEAD adalah deskripsi umum halaman dan skrip umum, walaupun yang terakhir adalah konsep yang relatif relatif. Biasanya, hanya dua hal yang penting disini:

• Kata kunci dan deskripsi halaman;
• Tautan ke file lain (* .css dan * .js).

Untuk menampilkan konten halaman, isi dari bagian ini hanya memiliki arti tidak langsung, karena ini menunjukkan: suatu tempat di file lain ada aturan CSS untuk tag dan skrip bahasa lain.

Halaman HTML memiliki judul (TITLE), yang ditampilkan saat pengunjung membawa mouse ke tab tempat halaman terbuka. Ini adalah poin penting, karena membuat halaman secara signifikan lebih rapi, lebih mudah dikatakan, ditandatangani dengan teks yang mudah dibaca.

Tag META penting dalam pemrograman Internet pada umumnya, namun ketika Anda ingin membuat halaman HTML di buku catatan, tidak mengherankan jika menguraikan contoh dengan konstruksi yang berlebihan.

Link LINK dan SCRIPT harus mendapat perhatian khusus. Yang pertama menunjuk ke tempat di mana stylesheet CSS berada, yang kedua ke lokasi file kode JavaScript. Ada banyak referensi semacam itu.

Jika skrip harus didekati saat pengetahuan tentang HTML diperkuat, maka cascading style sheets harus segera diperhatikan. Dalam file CSS, ada, khususnya, aturan untuk desain tag HTML.

Bagian BODY

Sebenarnya, contoh halaman HTML adalah partisi BODY. Di sinilah yang berisi semua informasi, semua isi halaman situs. Semua informasi disajikan dalam bentuk tag dan skrip, misalnya memasukkan kode JavaScript atau potongan program PHP.

Penting untuk dipahami bahwa contoh halaman web HTML di browser dan contoh yang sama di editor teks, notepad pada khususnya, jauh dari sama. Dalam kasus pertama kita memiliki teks HTML selesai, di mana semua script dieksekusi. Misalnya, PHP telah memenuhi bagiannya dan telah menghasilkan tag yang diperlukan, bukan kodenya di tempat yang tepat. JavaScript juga memenuhi misinya, meski masih ada pembicaraan terpisah tentang hal itu.

HTML adalah tag, bukan naskah. Pada akhirnya, browser hanya menampilkan konten halaman, hanya tagnya. Tidak ada kode PHP disana.

JavaScript berada dalam posisi spesial, yang menjadi perhatiannya adalah untuk melayani halaman tidak hanya pada saat loading (overloading), tapi juga saat halaman berada di browser pengunjung, dan pengguna mempelajarinya.

Contoh sederhana kode halaman HTML (hanya bagian BODY) tercantum di bawah ini.

Dan di browser pengunjung, tampilannya seperti yang ditunjukkan di bawah ini.

Kode tersebut tidak menentukan bagaimana item yang ditampilkan oleh browser seharusnya terlihat. Semua desain yang terlihat ada dalam aturan CSS. Dalam kasus ini, file Mcss / scPhpWordRW.css, yang dirujuk (lihat contoh pertama dari halaman HTML).

Tidak seperti HTML, tema CSS lebih sederhana, ada aturan yang sangat terjangkau dan jumlahnya kecil, ketika contoh pembuatan halaman HTML tidak memerlukan apapun selain notepad. Semuanya sangat mudah diakses untuk penguasaan instan:

Ini menunjukkan bagaimana tag scLogo_vDoc dijelaskan secara sederhana, dan deskripsi ini sedemikian rupa sehingga dalam keadaan normal, tag menampilkan gambar vDoc-logo.png, dan saat mouse di atasnya, vDoc-logo-h.png akan ditampilkan.

Struktur Deskripsi HTML

Bahasa tidak menyiratkan struktur apapun, dan konsep sintaks disini sangat relatif. Tidak ada variabel, tapi ada banyak kemungkinan. Dasar dasar hypertext adalah bahwa ada unsur (tag) yang tentunya punya nama.

Nama, dalam kasus tag pasangan, terdiri dari nama yang tepat (tagName) dan kurung siku ("<" + tagName + ">"), jika itu adalah awal tag, dan "" if Akhir nya

Contoh halaman HTML yang menjelaskan atribut terletak di bawah ini di teks.

Tag dapat memiliki atribut, kemudian ditempatkan setelah spasi setelah nama tag sebelum tanda kurung sudut penutup>. Atribut, jika diberi label, hanya tertulis di awal tag. Isi tag adalah apa yang ada di antara awal tag dan akhirnya.

Isi umum dari deskripsi HTML

HTML memungkinkan Anda untuk menggambarkan elemen blok dan string. Yang pertama menempati area tertentu di jendela browser, bisa diposisikan secara mutlak, yaitu di tempat yang tepat di area tampilan halaman HTML, dan memiliki ukuran tertentu.

Elemen string umumnya ditampilkan dalam satu thread, seperti ditunjukkan pada file halaman, dan ditampilkan. Tampilan aliran total dapat terpengaruh saat halaman dimuat. Penempatan, keterlihatan dan sifat elemen blok lainnya dapat terpengaruh kapan saja dengan menggunakan kode JavaScript.

Selain elemen sederhana, HTML menawarkan deskripsi tabel dan bentuk. Unsur-unsur ini sangat diminati dalam "bangunan situs sehari-hari".

Deskripsi tabel: tag TABEL, TR, TD

Dengan bantuan tag TABLE, Anda bisa membuat tabel, tentukan sejumlah baris TRs, dan di setiap baris sejumlah sel TD. Berbeda dengan organisasi tabular biasa, karena kekhasan markup HTML, organisasi tabular terbatas pada deklarasi ini, oleh karena itu jika pengembang ingin memiliki tabel persegi panjang di mana jumlah kolom di semua baris sama, maka ia harus mengikutinya sendiri.

Posisi dasar HTML: untuk melakukan segala sesuatu yang ditunjukkan, tapi tidak ada yang tidak dimengerti. Dalam beberapa kasus, jumlah kolom di setiap baris tabel tidak begitu penting, namun jika Anda perlu menggabungkan sel secara vertikal atau horizontal, Anda harus menghitung semuanya dengan sangat hati-hati.

Contoh halaman HTML yang menggambarkan tabel sederhana ditunjukkan dengan jelas dalam artikel.

Berikut adalah tabel dengan ukuran tiga baris per tiga kolom, dengan judul kolom TH digunakan sebagai pengganti tag TD di baris pertama. Tidak ada perbedaan khusus antara kedua tag ini, namun Anda dapat menggunakan yang pertama untuk membedakan baris pertama tabel, dan di CSS ke TH Anda dapat melampirkan gaya Anda sendiri, yang membedakannya dari TD lain.

Deskripsi formulir: FORMULIR, tag INPUT

Formulir adalah bagian yang paling diminta dari tag HTML. Dengan menggunakan formulir, Anda bisa mentransfer informasi. Sebenarnya, halaman itu sendiri adalah keluaran informasi, namun bentuknya adalah inputnya.

Contoh halaman HTML dengan deskripsi form sederhana:

Varian dari penggunaan bentuk jauh lebih besar, namun kemungkinan utamanya adalah sebagai berikut. Anda dapat menentukan bidang masukan, menetapkan desain dan penangan untuk menganalisis masukan pengguna. Anda dapat menentukan field tersembunyi dan mengirim informasi latar belakang dari halaman. Anda dapat menunjuk tombol untuk mentransfer informasi, dengan mengklik proses inisiasi pengiriman informasi.

Menggunakan HTML

Untuk mengetahui bahasa hypertext adalah kondisi yang sangat diperlukan untuk setiap spesialisasi di bidang pemrograman internet, namun jika Anda perlu menulis program di PHP atau JavaScript, maka Anda perlu mengetahui HTML + CSS dengan sempurna.

Bahasa PHP dilambangkan pada contoh sebelumnya. PHP berjalan di server, jadi halaman dengan form ini telah diterbangkan dari server ke browser dengan kolom terisi. Secara khusus, fungsi TestOnBlur, yang disebutkan dalam tag INPUT (onblur event handler), menerima semua parameter sebagai bidang teks.

Di browser, JavaScript bekerja, dan agar tombol kirim berfungsi dengan benar kembali ke server, yaitu, desainnya: onclick = jQuery ('# to'). Val ('cart'), Anda perlu memiliki ide tidak hanya tentang apa itu jQuery, Tapi juga apa itu #to, val, cart. Lebih tepatnya, Anda perlu mengetahui tag HTML utama dan aturan umum untuk menerapkan gaya CSS kepada mereka.

Ini cukup cukup untuk segera meningkatkan kualifikasi mereka untuk spesialisasi di bidang pemrograman Internet.