Mungkin pelajaran ini seharusnya disebut: 'Mengembangkan pemahaman lanjutan tentang dasar-dasar HTML'. Kami tidak mencoba mempelajari trik canggih atau tag baru, kami melakukan sesuatu yang jauh lebih berguna: Memahami dasar-dasarnya adalah apa yang membedakan pro dari amatir.

Pengantar

HTML adalah teknologi yang relatif sederhana untuk dipelajari, sehingga sangat mudah sehingga sekali orang mendapatkan pemahaman yang sangat mendasar, mereka melompat ke dalam membangun halaman web tanpa banyak berpikir tentang mempelajari apa pun lebih lanjut tentang dasar-dasar HTML.

Dengan demikian, sebagian besar desainer web tidak memanfaatkan HTML dan CSS sepenuhnya; mereka membuang-buang waktu dan uang mereka, umumnya membuat hidup mereka lebih sulit.

Perbedaan antara tag logis dan fisik adalah salah satu konsep dasar kunci dalam HTML yang, jika dipahami, dapat memiliki dampak besar pada cara perancang web. melakukan banyak hal.

Tag inline logis vs. Tag inline fisik

Label Logis

Di HTML ada tag logis dan tag fisik . Tag logis dirancang untuk menggambarkan (ke browser) makna teks terlampir. Contoh tag logis adalah < strong > < / strong > menandai. Dengan menempatkan teks di antara tag-tag ini, Anda memberi tahu browser bahwa teks tersebut memiliki kepentingan yang lebih besar.

Secara default, semua browser membuat teks tampak tebal saat di antara tautan < strong > dan < / strong > tag, tetapi intinya untuk mengambil dari ini adalah bahwa tag yang kuat menyiratkan pentingnya teks itu. Ini memiliki dampak dengan mesin pencari seperti Google yang mencari tag tersebut untuk membantu mencari tahu tentang apa halaman tersebut.

Ada banyak tag logis dan termasuk:

< kuat > : Kuat & #8211; seperti di atas.

< em > : tekankan & #8211; biasanya merender (dibuat agar terlihat seperti oleh browser) sebagai huruf miring.

< span > : wadah inline netral. & #8211; Baca tentang perbedaan ini di bawah.

< div > : elemen blok netral. & #8211; Baca tentang perbedaan ini di bawah.

Tag logis, seperti yang disebutkan di atas, memiliki cara default di mana browser (seperti IE atau Opera) merendernya. Namun dapat dipahami bahwa CSS harus digunakan untuk memberi mereka gaya mereka, atau dengan kata lain tampilan ‘ mereka ’ ;.

Tag Fisik

Tag fisik di sisi lain memberikan instruksi spesifik tentang cara menampilkan teks yang dilampirkan. Contoh tag fisik meliputi:

< b > : Membuat teks tebal.

< besar > : Membuat teks biasanya satu ukuran lebih besar dari apa yang ada di sekitarnya.

< font > : Digunakan untuk menerapkan font-face (seperti Arial atau Helvetica) dan font-color.

< i > : Membuat teks menjadi miring.

Tag fisik lebih mudah; < i > membuat teks menjadi miring, < b > membuat teks tebal dan < font > digunakan untuk mengatur wajah dan warna font untuk teks.

Jadi mengapa menggunakan yang satu atau yang lain?

Singkatnya, tag fisik diciptakan untuk menambahkan gaya ke halaman HTML karena style sheet tidak ada, meskipun maksud asli HTML adalah untuk tidak memiliki tag fisik. Mengapa? Tag fisik baik hanya berantakan, membosankan, dan lebih banyak masalah daripada nilai mereka (sebagian besar).

Daripada menggunakan tag fisik untuk memberi style pada halaman HTML Anda, Anda harus menggunakan style sheet (juga disebut Cascading Style Sheets atau CSS).

Blokir level vs tag Inline

Apa gunanya ‘ sebaris ’ dalam deskripsi kategori tag?

Dalam HTML, tag adalah ‘ sebaris ’ atau ‘ tingkat-blok ’ elemen.

Elemen HTML level blok

Elemen tingkat blok ada di kotak ‘ virtual ’ dan selalu diikuti oleh penghentian baris (seperti menekan tombol ‘ masukkan ’ setelah mengetik beberapa teks). Dengan kata lain, elemen tingkat blok memecah aliran teks dan elemen lain untuk membuat kotak virtual di sekitarnya.

Elemen HTML sebaris

Tag (elemen) sebaris menjadi bagian dari aliran teks tempat mereka disisipkan dan tidak memiliki kotak di sekitar mereka dan tidak memiliki line break, baik.

Contoh tag blokir adalah < p > tag (paragraf) dan contoh tag inline adalah < b > tag (tebal). Cobalah tag dan Anda akan melihat apa yang terjadi pada halaman Anda ketika Anda menggunakan < p > tag dan < b > tag; semua akan diperjelas setelah Anda melihatnya sendiri.

Model Kotak HTML

Jadi siapa yang peduli?

Kamu harus peduli! Setelah Anda memahami perbedaan (itu benar-benar tidak sulit jika Anda memberi diri Anda kesempatan) dan begitu Anda memahami bahwa Anda dapat menggunakan CSS untuk mengubah elemen dari menjadi tag blok menjadi inline tag dan sebaliknya, Anda akan menemukan luar biasa kekuatan dalam kemampuan Anda untuk tata letak halaman Anda.