HTML YANG BENAR. Cara membuat halaman yang bagus

Web.

Sekarang datang hal yang menarik. Saya menempatkan kesalahan khas situs web, yang sangat sering saya lihat (juga di halaman yang saya buat sejak lama), dan bagaimana memperbaiki kebiasaan buruk untuk akhirnya membuat web dapat diakses oleh browser apa pun, dengan desain dan konten secara terpisah, dan itu mudah dipertahankan.

Mereka adalah trik yang longgar dan berantakan, dan saya yakin mereka akan mendapatkan lebih banyak tambahan dari waktu ke waktu. Baris pertama harus doctype

Adalah wajib untuk meletakkannya, dan sangat penting. Ini untuk memberi tahu browser versi HTML mana yang Anda gunakan di halaman. Jika tidak diletakkan, browser tidak memiliki cara untuk mendeteksinya, sehingga memasuki mode Quirks dan akan mencoba memperbaiki dengan caranya sendiri hal-hal yang tidak dipahaminya, menebak apa arti setiap label, dan mewakili mereka apakah itu valid atau tidak.

Jika versi HTML yang Ketat digunakan, maka browser menggunakan mode kepatuhan standar, dan setiap tag akan memiliki arti normal.

Misalnya, di situs web ini baris pertama adalah:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>

Ingatlah bahwa itu bukan label, dan itulah sebabnya sangat langka, berjamur, dan tidak menutup. Struktur dasar situs web

Contoh minimum yang harus Anda miliki:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title> Web saya. Betapa indahnya miweb.</judulnya>
</kepala>
<>
Berikut isinya.
</tubuh>
</html> Judul, yang paling penting

Mereka mengatakan bahwa <title> adalah, dengan banyak perbedaan, hal yang paling penting di situs web.

Yang benar adalah bahwa itu penting: digunakan oleh pencari untuk mengindeks halaman, tetapi (bahkan lebih penting) orang menggunakannya untuk mengetahui situs web mana yang akan dimasuki ketika mesin pencari menunjukkan ratusan dari mereka. Jadi pilih judul yang bagus, dan jangan pernah berpikir untuk membiarkannya kosong. Tulis semua tag inminucule

Baik huruf besar dan kecil diterima, tetapi lebih baik Anda memilih gaya tetap dan tidak mengubahnya. Saya telah memutuskan yang huruf kecil untuk banyak hal:

  • lebih mudah dibaca.
  • Lebih mudah untuk menulis.
  • dalam XML (dan XHTML) hanya huruf kecil yang diterima, jadi beralih ke XHTML akan sangat mudah.
  • CSS biasanya dilakukan dalam huruf kecil juga.
  • halaman lebih baik dikompresi saat menggunakan tag huruf kecil. Yah, oke, ini sedikit alasan aneh … tetapi beberapa server web mentransfernya terkompresi.

Tutup semua yang Anda buka (dengan pengecualian), dan secara berurutan

Tidak diperbolehkan melakukan hal-hal seperti <td><a>link</td>, ni<ul><li>uno<li>dos<li>tres</ul>,ni <strong>código<em>incorrecto</kuat></em>. Itu menyebabkan ketidaknyamanan di banyak browser: bayangkan Anda memulai tautan di awal halaman, dan Anda tidak pernah menutupnya. Maka seluruh halaman adalah bagian dari tautan! dan Anda dapat menyoroti semua yang digarisbawahi (itu sangat menjijikkan).

Ada beberapa tag yang tidak menutup karena tidak memiliki konten di dalamnya, seperti <img> atau<br>. Di XHTML wajib untuk menutupnya, dan agar tidak perlu menulis <br></br>, <br /> diperbolehkan. Tapi itu XHTML… demomento dalam HTML tidak menutup <br> dan yaestá. Atribut, selalu dalam tanda kutip

Sebenarnya hanya wajib memasukkan atribut tanda kutip yang memiliki karakter non-alfanumerik, misalnya dalam <body bgcolor=”#E099F5″> (by the#).

Tetapi jauh lebih baik bahwa Anda selalu meletakkannya, karena dengan begitu Anda tidak perlu berpikir kapan ya dan kapan tidak, dan itu juga bagaimana Anda harus melakukannya dalam XML dan XHTML. Bagaimanapun, tidak perlu memasukkan hampir atribut ke dalam HTMLcorrect.

Anda dapat menggunakan beberapa jenis tanda kutip, tetapi yang paling umum adalah tanda kutip ganda. Menentukan set karakter (charset)

Server Anda harus sudah siap untuk mengirim jenis dokumen MIME (yang harus teks / html) dan pengkodean (yaitu ISO-8859-1 untuk Spanyol atau ISO-8859-15 jika Anda menggunakan simbol euro, €). Tapi, kalau-kalau browser tidak menerima informasi ini, Anda dapat memberitahunya dengan label ini dalam <head>:

<meta content=”text/html; charset=utf-8″http-equiv=”content-type”>

Jadi Anda juga diberitahu karakter diatur ke ausar, dan Anda memastikan bahwa aksen akan terlihat bagus. Pengkodean karakter lain adalah UTF-8 (Unicode), yang memungkinkan untuk mewakili hampir semua huruf (bahasa Jepang, Tibet, konsonan beraksen, …). Hal yang buruk adalah bahwa masih ada browser yang bingung (karena beberapa karakter menempati lebih dari satu byte), tetapi itu adalah format unik yang harus kita migrasikan untuk menghindari masalah dengan pengkodean. Jangan gunakan <font>

… Tidak sama sekali. Itu tidak perlu sama sekali. Dengan CSS Anda dapat melakukan jauh lebih baik, memilih warna / font / ukuran hanya sekali, dan menerapkannya ke semua elemen sekaligus.

Jika Anda ingin memberikan gaya khusus hanya untuk beberapa huruf atau kata, lihat tip berikut: Format sepotong teks atau sepotong halaman: <span> dan<div>

Anda akan menggunakan label ini banyak. Mereka sendiri tidak melakukan apa-apa; Anda harus memberi mereka gaya.

Pertama, penjelasan penting tentang cara kerja HTML:

Setiap elemen HTML (pada dasarnya) dari typeinline atau blok. Elemen tipe sebaris mengikuti aliran teks, dan dapat dimasukkan seolah-olah itu hanya kata lain. Misalnya, gambar dan tautan berperilaku seperti ini, karena saya dapat menempatkan tautan seolah-olah itu adalah kata-kata normal (saya memiliki batas sehingga Anda dapat melihat dari mana elemen itu terdiri).

Sebaliknya, elemen blok memecah aliran teks: itu menyebabkan baris baru dan seluruh lebar halaman didedikasikan untuk itu. Contohnya adalah header (<h1>, dll): mereka tidak dapat berbagi ruang dengan elemen lain. Paragrafnya juga seperti ini: lihat apa yang terjadi jika saya menempatkan

Nah, <span> inline dan <div> adalah blok. Ketika Anda ingin memformat beberapa kata, tanpa melanggar aliran teks, letakkan kata-kata itu di dalam <span>, dan ketika Anda ingin memformat banyak elemen bersama-sama (sepotong halaman, garis atau beberapa), masukkan ke dalam <div>.

<p>Anda dapat menerapkan <span style=”font-size: 120%;text-transform: huruf besar; warna: biru;kursor:penunjuk;” >pengemanusan</span> ke sepotong teks tanpa menggunakan tag font.</p>
<div style=”text-align: center; perbatasan: 3px berwarna oranye putus-putus;latar belakang: kuning; gaya font:miring;” >
<p>Dan Anda dapat memformat seluruh halaman sekaligus … </p>
<p>jika Anda memasukkannya ke dalam div.< /p>
</div>

Anda dapat menerapkan banyak efek ke sepotong teks tanpa menggunakan tag font.

Dan Anda dapat memformat seluruh bagian halaman sekaligus …

Ingatlah bahwa tidak nyaman menggunakan atribut gaya. Lebih baik mendefinisikan kelas (kelas atribut) dan kemudian menata semua kelas yang sama sekaligus. Saya menjelaskannya di bagian lain. Hindari <br>, usapárrafos: <p>

Konten dari hampir semua situs web diatur oleh halaman (lihat yang satu ini, misalnya). Paragraf tidak boleh dipisahkan oleh jeda baris (<br>), tetapi hanya dengan menempatkan<p> di awal dan < / w> pada akhirnya mereka sudah tertata dengan baik dan dengan pemisahan yang sesuai.

Sangat jarang Anda harus menulis garis istirahat kebenaran … Saya hanya bisa memikirkan kasus bahwa Anda ingin mencantumkan kode sumber suatu program: itu terdiri dari beberapa baris (bahkan beberapa kosong), satu di bawah ini. Setiap baris bukanlah paragraf oleh sisola, jadi akan lebih pintar untuk turun ke sayap berikutnya dengan <br>. Tetapi secara umum tidak ada kesalahan; jauh lebih nyaman untuk menggunakanparagraf. Tidak perlu menggunakan &nbsp; Untuk membuat margin

Untuk membuat baris pertama dari setiap paragraf sedikit lebih jauh ke kanan, banyak yang menempatkan tiga spasi: &nbsp;&nbsp;&nbsp;.. Itu slam dunk; lebih baik menggunakan paragraf dan menerapkan lembar gaya berikut kepada mereka:

Dengan ini, semua paragraf akan menahan baris pertama 20 piksel di sebelah kanan margin. Pilih unit dengan baik; letakkan di cm. atau mm.si Anda mengklarifikasi lebih lanjut, meskipun mungkin akan lebih baik untuk tidak menggunakan unit absolut tetapi dalam kaitannya dengan jenis mantra saat ini.

Jadi kapan Anda harus menggunakan&nbsp;? Nah, hanya ketika Anda ingin menggambar ruang kosong. Ketika Anda membuat desain, saya tidak berpikir Anda akan melakukannya di sini saya akan melakukannya dengan baik untuk menempatkan lima ruang …, tapi saya ingin ini sedikit lebih ke kanan, dan itulah css digunakan untuk. Jika Anda benar-benar perlu menempatkan lima spasi (baik 4 atau 6), letakkan lima kali.<center> tidak ada

Related posts