Buat dokumen HTML5. Ini adalah tajuk teks. LLC Tanduk dan Kuku

Kemaskini terakhir: 08.04.2016

Elemen ialah blok binaan yang membentuk dokumen html5. Untuk membuat dokumen, kita perlu membuat yang mudah fail teks, dan tentukan sebagai sambungan fail *.html

Mari buat fail teks, panggil ia indeks dan tukar sambungannya kepada .html.

Kemudian buka fail ini dalam mana-mana editor teks, contohnya, Notepad++. Tambahkan teks berikut pada fail:

Untuk membuat dokumen HTML5, kita memerlukan dua elemen terlebih dahulu: DOCTYPE dan html. elemen doctype atau jenis dokumen Pengisytiharan memberitahu pelayar web jenis dokumen itu.menunjukkan bahawa dokumen ini ialah dokumen html dan html5 itu digunakan, bukan html4 atau beberapa versi bahasa penanda yang lain.

Dan elemen html, antara teg pembukaan dan penutupnya, mengandungi keseluruhan kandungan dokumen.

Dalam elemen html kita boleh meletakkan dua elemen lain: kepala dan badan . Elemen kepala mengandungi metadata halaman web - tajuk halaman web, jenis pengekodan, dsb., serta pautan ke sumber luar- gaya, skrip, jika digunakan. Elemen badan sebenarnya mentakrifkan kandungan halaman html.

Sekarang mari kita ubah kandungan fail index.html seperti berikut:

dokumen HTML5

Kandungan Dokumen HTML5

Elemen kepala mentakrifkan dua elemen:

elemen tajuk mewakili tajuk halaman

Elemen meta menentukan maklumat meta halaman. Untuk memaparkan aksara dengan betul, adalah lebih baik untuk menentukan pengekodan. DALAM dalam kes ini menggunakan atribut charset="utf-8" kami menentukan pengekodan utf-8.

Dalam elemen badan, hanya terdapat satu elemen - div - yang membentuk blok. Kandungan blok ini adalah rentetan mudah.

Memandangkan kami memilih utf-8 sebagai pengekodan, penyemak imbas akan memaparkan halaman web dalam pengekodan ini. Walau bagaimanapun, adalah perlu bahawa teks dokumen itu sendiri juga sepadan dengan pengekodan utf-8 yang dipilih. Sebagai peraturan, dalam pelbagai penyunting teks Terdapat tetapan yang sesuai untuk menetapkan pengekodan. Contohnya, dalam Notepad++ anda perlu pergi ke menu Pengekodan dan pilih item dalam senarai yang terbuka Tukar kepada UTF-8 tanpa BOM:

Selepas ini, anda akan dapat melihat dalam baris status UTF-8 tanpa BOM , yang akan menunjukkan bahawa pengekodan yang diperlukan dipasang.

Simpan dan buka fail index.html dalam pelayar:

Oleh itu, kami mencipta dokumen HTML5 yang pertama. Memandangkan kami menunjukkan dalam elemen tajuk tajuk"Dokumen HTML5", maka ini adalah nama tab penyemak imbas.

Memandangkan pengekodan ialah utf-8, pelayar web akan memaparkan aksara Cyrillic dengan betul.

Dan kita akan melihat semua teks yang ditakrifkan di dalam elemen badan dalam medan pelayar utama.

Apabila membuat laman web, perkara pertama yang anda perlu bayangkan ialah bagaimana halaman web itu terbentuk. Ini adalah sejenis "asas" dalam pembinaan laman web. Oleh itu, sebelum mendalami teknologi penciptaan laman web yang lebih kompleks, adalah disyorkan untuk mempunyai sekurang-kurangnya pengetahuan asas HTML. DALAM pelajaran ini kita akan berjumpa HTML, mari kita selesaikan Struktur dokumen HTML dan seterusnya contoh praktikal Mari kita satukan ilmu yang diperolehi.

Apakah HTML?

HTML singkatan kepada HyperText Markup Language. Bahasa ini bertanggungjawab untuk tepat bagaimana hiperteks akan dipaparkan pada halaman tapak. Sekarang mari kita fikirkan apakah hiperteks? Bukan rahsia lagi bahawa satu halaman web boleh mengandungi banyak jenis maklumat yang berbeza, sama ada teks, beberapa jadual, graf, video, audio, dll. Jadi, semua maklumat ini boleh dipanggil dalam satu perkataan - hiperteks.

Ambil perhatian bahawa HTML ialah bahasa penanda, bukan bahasa pengaturcaraan. DALAM bahasa yang diberikan tidak ada fungsi logik dan adalah mustahil untuk membuat sebarang pengiraan matematik ke atasnya. halaman HTML mempunyai sambungan .html atau .htm dan diproses oleh pelayar - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, dsb.

Sekarang mari kita fikirkan bagaimana penyemak imbas memahami perkara dan cara untuk dipaparkan pada halaman web? Ia sangat mudah. Bahasa penanda hiperteks HTML mempunyai arahan terbina dalam, ia dipanggil tag. Ia adalah oleh mereka bahawa pelayar berorientasikan.

Struktur Dokumen HTML

mana-mana dokumen HTML(halaman web) mesti mempunyai struktur tertentu. Ini akan mengelakkan masalah yang mungkin apabila membuka halaman dalam pelayar. Sebagai contoh, mari kita lihat halaman yang mengandungi mengikuti HTML kod:

Struktur Dokumen HTML ...

Mari lihat apa yang termasuk dalam struktur ini mengikut urutan:

1. Perkara pertama yang terdapat dalam dokumen HTML ialah petunjuk versi (baris pertama). Untuk operasi yang betul, baris ini harus dinyatakan semasa meletakkan halaman web.

3. Kemudian datang kawasan untuk bahagian atas tapak (header). Tag digunakan untuk ini . Dalam pengepala kami menunjukkan nama halaman kami dengan meletakkan tajuk halaman di antara teg Dan. Seterusnya, pengekodan dokumen HTML ditunjukkan (baris kelima). Ini dilakukan untuk memaparkan abjad Cyrillic dengan betul. Menutup kawasan pengepala dengan tag.

4. Teg meta "penerangan" - ringkasan halaman, bertujuan untuk enjin carian. Teg ini penting untuk pengoptimuman enjin carian dan mesti diisi.

5. Meta tag "kata kunci" - kata kunci yang mungkin muncul pada halaman. Tag ini juga bertujuan untuk enjin carian. Tag ini jarang digunakan pada masa kini.

6. Badan halaman dibuka dengan tag dan ditutup, dengan sewajarnya, dengan tag

. Badan halaman web biasanya mengandungi kandungan utama - teks, video, audio dan maklumat lain.

Oleh itu, kami telah menjawab soalan tentang apa itu HTML dan mengkaji struktur dokumen HTML. Maklumat yang diterima dalam pelajaran ini adalah konsep asas, anda tidak boleh melakukannya tanpanya. Kita akan bercakap tentang perkara yang lebih kompleks dalam pelajaran lain.

hello! Anda TIDAK akan menemui apa-apa yang berguna dalam pelajaran ini jika anda SUDAH biasa dengan pembentukan struktur dokumen HTML. Bagi mereka yang TIDAK biasa, saya akan menunjukkan struktur yang betul (sah) bagi dokumen web HTML, termasuk untuk laman WordPress.

Struktur am yang betul bagi dokumen HTML

Pertama sekali, tanpa banyak mukadimah, struktur umum mana-mana dokumen HTML hendaklah seperti ini:

/*Menunjukkan jenis dokumen DTD semasa*/ /*Menunjukkan permulaan dokumen*/ /*Menunjukkan permulaan tajuk (header)*/ Ujian/*Menunjukkan tajuk*//*Menunjukkan permulaan tajuk*/ /*Menunjukkan permulaan bahagian utama dokumen (badan)*/ /*Kandungan dokumen*/

/*Menunjukkan hujung badan utama dokumen*//*Menunjukkan penghujung dokumen*/

Jika anda mengalih keluar penjelasan yang saya tunjukkan selepas setiap teg, maka struktur ringkas dokumen HTML kelihatan seperti ini

Ujian

Jenis dokumen DTD semasa

Jenis dokumen semasa ( Definisi Jenis Dokumen, DTD) adalah perlu untuk penyemak imbas memahami cara mentafsir halaman web semasa, kerana bahasa HTML wujud dalam beberapa versi.

Di samping itu, terdapat bahasa penanda lain selain HTML, seperti XHTML.

Catatan: XHTML ialah Extensible HyperText Markup Language, yang kami terjemahkan sebagai bahasa penanda hiperteks lanjutan.

XHTML adalah serupa dengan HTML, tetapi sintaksnya berbeza. Untuk mengelakkan penyemak imbas daripada keliru antara bahasa, anda perlu menunjukkannya dalam baris pertama kod, jenis dokumen semasa ialah DOCTYPE.

Konsep tag dalam HTML

Adakah anda perasan bahawa keseluruhan struktur dokumen HTML ditentukan oleh tag tertentu - perkataan tertentu yang disertakan dalam kurungan sudut.

Perkataan yang disertakan dalam kurungan sudut dalam dokumen HTML dipanggil tag. Setiap teg mempunyai makna tersendiri, ditentukan oleh peraturan markup.

Tag bermaksud tajuk dokumen html. Tag kepala menyimpan maklumat untuk penyemak imbas dan enjin carian. Termasuk dalam bentuk meta tag;
Tag bermaksud kandungan utama dokumen html. Iaitu teks, imej, skrip Skrip Java, dll.;
Teg [p] ialah elemen blok dan sentiasa bermula pada baris baharu. Ia bermaksud perenggan kandungan utama dokumen html.

Penting! Semua teg markup HTML mesti dipasangkan. Iaitu, tag pembukaan<тег>, mesti ditutup dengan teg penutup, dengan garis miring ke hadapan .

Teg tajuk dan subtajuk h1-h6

Untuk menambah baik penstrukturan teks dokumen, serta meningkatkan SEO halaman web, terdapat teg kandungan badan tambahan. Ia dipanggil teg tajuk dan subtajuk dari h1 hingga h6, 6 semuanya.

Mereka, sama seperti tag [p]-perenggan, yang membolehkan anda menyerlahkan bahagian semantik teks, membolehkan anda membahagikan teks kepada bahagian semantik, memberikan setiap bahagian tajuknya sendiri.

Tag h1—h6 mempunyai tanggungan bawahan, peringkat bawahan subordinat ini ialah perenggan.

Adalah penting untuk ambil perhatian bahawa memecahkan pergantungan subordinat tag h1—h6—hlm tidak akan mengganggu paparan dan kesahihan dokumen, tetapi hanya akan memburukkan pengoptimumannya untuk enjin carian.

Contoh struktur dokumen HTML yang dibangunkan

Izinkan saya memberi anda contoh akademik struktur dokumen HTML yang lebih maju:

Ujian

Tajuk utama

Sari kata pertama

Tajuk utama

Sari kata kedua

Subtajuk kecil pertama

Struktur HTML 5

Dalam HTML 5, struktur dokumen hendaklah seperti ini:

Ini adalah deklarasi yang menunjukkan bahawa dokumen ini berada dalam HTML5;

ini ialah elemen akar halaman HTML;

Elemen dengan tag meta tentang dokumen;

Elemen ini mentakrifkan tajuk untuk dokumen;</p><p><body>Elemen ini mengandungi kandungan halaman yang boleh dilihat;</p><p><h1>Elemen mentakrifkan tajuk besar</p><p><p>Elemen mentakrifkan perenggan.</p><p>H2 - tag h6 berfungsi dalam html5</p><p><i>Semua tag adalah dua kali ganda. Teg permulaan dipanggil teg pembukaan, dan teg penamat dipanggil teg penutup.</i></p><h2>Penanda HTML pada tapak WordPress</h2><p>Walaupun fakta bahawa skrip WordPress ditulis dalam PHP, semua fail tapak, atau lebih tepatnya semua fail templat berfungsi tapak, mempunyai penanda html. Mari lihat contoh dalam fail header.php templat <b>Dua Puluh Tujuh Belas</b>:</p><p> <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>class="no-js no-svg"> <head> <meta charset="<?php bloginfo("charset"); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <?php _e("Skip to content", "twentyseventeen"); ?> <header id="masthead" class="site-header" role="banner"> <?php get_template_part("template-parts/header/header", "image"); ?> <?php if (has_nav_menu("top")) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part("template-parts/navigation/navigation", "top"); ?> </div> </div> <?php endif; ?> </header> <?php if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) : echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail(get_queried_object_id(), "twentyseventeen-featured-image"); echo "</div>"; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> </p><p>Anda boleh melihatnya jika semua fungsi WordPress diletakkan dalam markup HTML klasik. Terdapat jenis dokumen:<!DOCTYPE html></p><p>Tag berpasangan,</p><p>Tag pembukaan.</p><p>Tag penutup boleh didapati dalam fail footer.php.</p><h2>Bagaimana untuk melihat kod HTML halaman laman WordPress</h2><p>Apa yang anda tulis dalam editor tapak, mencipta artikel atau halaman, hanyalah sebahagian daripada halaman HTML tapak. Ini bukan malah keseluruhan kandungan halaman.</p><p>Untuk melihat kod HTML halaman laman WordPress, dan ini diperlukan dengan kerap, anda memerlukan:</p><p>Buka halaman dalam penyemak imbas;</p><p>Tukar kepada fon papan kekunci bahasa Inggeris;</p><p>Tekan butang berikut:</p><ul><li>Chrome: Ctrl+U</li><li>Opera: Ctrl+U</li><li>Mozilla: Ctrl+U</li> </ul><p>Mungkin anda masih belum tahu mengapa ini diperlukan. Percayalah, anda memerlukan ini lebih daripada sekali untuk menganalisis tapak anda dan mungkin tapak pesaing.</p><h2>Kesimpulan</h2><p>Sebagai kesimpulan, saya ingin membuat kesimpulan, tetapi satu-satunya perkara yang terlintas di fikiran ialah artikel itu ternyata benar-benar untuk pemula. Pada pandangan pertama, terdapat perbezaan besar antara contoh kod artikel dan contoh dari tapak sebenar. Walau bagaimanapun, semua fail mempunyai struktur dokumen HTML yang sama dan adalah sangat penting untuk tidak melanggar struktur ini apabila bekerja dengan tapak.</p> <p>Hari ini kita akan bercakap tentang semantik dalam HTML5. Saya telah pun menulis catatan ulasan ringkas tentang . Saya mengesyorkan agar anda membiasakan diri dengannya sebelum membaca artikel ini. Sekarang kita akan melihat isu ini dengan lebih terperinci, tentang cara menyusun struktur semantik dokumen HTML5 dengan betul dan cekap.</p><p>Dalam artikel ini kami akan membuat halaman HTML secara beransur-ansur dan menghiasinya dengan teg HTML5 semantik.</p><p><img src='https://i0.wp.com/rightblog.ru/wp-content/uploads/2015/09/HTML5-semantin-infografic_rightblog.ru_.png' width="100%" loading=lazy loading=lazy></p><p>Rajah - Struktur semantik untuk halaman HTML5.</p><h3>DOCTYPE dan tag meta dalam tajuk halaman</h3><p>Mari kita mulakan dengan templat dokumen HTML5 standard dan tambahkan tag meta pada kepala:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tajuk halaman

Saya menambah tag yang bertanggungjawab untuk kata kunci. Dan tag yang bertanggungjawab untuk penerangan halaman. Untuk pengoptimuman SEO, tag ini diperlukan. Ia juga perlu mengisi tag dengan betul . Tajuk halaman mestilah unik untuk keseluruhan tapak, dan mengandungi dalam tajuk keseluruhan intipati halaman yang ditetapkan untuknya.</p><p>Mari pergi lebih jauh. HTML5 memperkenalkan teg baharu yang digunakan untuk membuat penanda semantik dalam dokumen. Ini ialah teg pengepala, nav, utama, artikel, tepi, pengaki, dsb. Dari segi paparan, ia berfungsi sama seperti yang biasa. <div>tag, iaitu, ini adalah elemen blok. Tetapi kalau <div>tidak mempunyai beban semantik, maka pengepala, nav, utama dan lain-lain hanya boleh digunakan secara bermakna.</p><h3>Tajuk halaman</h3><p>Pengepala halaman diformatkan dalam teg pengepala. Sila ambil perhatian bahawa tajuk halaman ditulis menggunakan tag h1.</p><p>  <header> <h1>Tajuk tapak</h1> </header> </p><p>Jika kita juga mempunyai slogan di sebelah tajuk, maka kita letakkan dalam p, div atau span.</p><p>  <header> <h1>Tajuk tapak</h1> <p>slogan tapak</p> </header> </p><p><b>Nota tentang tag H1</b></p><p>Perlu diingat bahawa dalam HTML5 teg H1 digunakan untuk menunjukkan tajuk bekas di mana ia berada (ini boleh menjadi pengepala, bahagian, artikel, dll.)</p><p>Sebelum kemunculan teg HTML5, semantiknya agak berbeza dan berbeza. Jadi dalam HTML4 hanya boleh ada satu tajuk H1 setiap halaman! Sebagai peraturan, ini ialah tajuk artikel atau tajuk halaman (contohnya, jika halaman kategori di mana beberapa artikel dipaparkan.) H2 digunakan untuk subtajuk atau untuk bahagian artikel utama. H3 untuk sub bahagian dan sebagainya.</p><h3>Navigasi halaman</h3><p>Reka bentuk navigasi utama tapak hendaklah terkandung dalam teg navigasi. Anda juga harus ingat bahawa ia dianggap amalan yang baik untuk mereka bentuk navigasi dengan elemen senarai.</p><p>  <nav> <ul> <li>Rumah</li> <li>Portfolio</li> <li>Galeri</li> <li>Kenalan</li> </ul> </nav> </p><h3>Kandungan pada halaman</h3><p>Kandungan utama halaman diformatkan dalam teg utama. Ini boleh menjadi satu artikel, atau beberapa pratonton artikel jika kita bercakap tentang halaman blog dengan beberapa entri. Anda tidak boleh meletakkan bar sisi, pengepala halaman, pengaki atau navigasi utama dalam teg utama!</p><p>  <main>... kandungan halaman utama...</main> </p><h3>Reka bentuk artikel</h3><p>Tag artikel digunakan untuk membungkus artikel. Secara umum, teg ini mengandungi blok kandungan yang boleh dikeluarkan daripada konteks halaman dan digunakan secara berasingan di tempat lain. Ini boleh jadi artikel (teks penuh artikel atau pratonton), siaran di forum, dsb.</p><p>Dalam contoh di bawah, saya menunjukkan reka bentuk artikel dalam konteks, di dalam teg utama. Artikel tersebut mempunyai blok pengepala dengan tajuk artikel. Tarikh penerbitan artikel ditentukan oleh teg masa khas, yang dipaparkan sebagai elemen sebaris biasa. Teg masa mempunyai atribut khas di mana masa penerbitan mesti dinyatakan dalam format mesin. Ini boleh jadi hanya datetime="2015-09-30" atau dengan jam minit dan saat datetime="2015-09-30T15:25:55" . Parameter pubdate menunjukkan bahawa artikel itu diterbitkan pada masa yang sama seperti ia ditulis. Jika ini adalah berita, maka mungkin masa berita adalah satu, dan masa penerbitan adalah berbeza, untuk ini anda perlu menentukan tag masa dua kali, dan meletakkan pubdate hanya dalam teg di mana masa penerbitan ditunjukkan.</p><p> <main> ...  <article>  <header>  <h1>Tajuk artikel</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30 September</time> </header>  <h2>Sub-tajuk artikel</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Daripada contoh di atas, anda dapat melihat bahawa teg pengepala dan pengaki digunakan di dalam artikel untuk menyerlahkan tajuk dan pengaki artikel.</p><h3>Bar sisi atau lajur dengan widget</h3><p>Untuk setiap elemen bar sisi individu kami menggunakan blok tepi. Di dalamnya, tajuk diformatkan dengan tag h1. Jadi lajur bar sisi mungkin kelihatan seperti ini:</p><p>  <div class="sidebar">  <aside> <h1>Tajuk widget</h1> ... </aside>  <aside> <h1>Nota terakhir</h1> ... </aside>  <aside> <h1>Komen popular</h1> ... </aside> </div> </p><h3>Tag bahagian</h3><p>Teg bahagian digunakan untuk mewakili kumpulan atau bahagian kandungan yang berkaitan secara tematik. Penggunaannya serupa dengan artikel dengan perbezaan utama ialah kandungan dalam elemen dibenarkan tidak mempunyai makna <section>di luar konteks halaman itu sendiri. Adalah disyorkan untuk menggunakan tag ( <h1> – <h6>) untuk menunjukkan topik bahagian.</p><p>Untuk memberikan contoh artikel yang anda baca sekarang, anda boleh membungkus setiap perenggan dalam teg <section>. Contohnya, teg bahagian boleh digunakan untuk menyerlahkan blok kandungan pada halaman pendaratan. Bunyi ini serupa dengan takrifan elemen div, yang sering digunakan sebagai bekas untuk kandungan. Perbezaannya ialah div tidak mempunyai makna semantik, dan ia tidak menyatakan apa-apa tentang kandungan di dalamnya. Teg bahagian, sebaliknya, digunakan untuk menunjukkan dengan jelas bahawa kandungan di dalamnya berkaitan dengan makna. Anda boleh menggantikan beberapa teg div anda dengan teg bahagian, tetapi sentiasa tanya diri anda soalan: "Adakah kandungan ini berkaitan atau tidak?"</p><p>Contoh penggunaan teg bahagian dalam senarai bandar penyenaraian:</p><p> <h1>Terpisah Satu Acara</h1> <section> <header> <h2>Bandar</h2> </header> <p>Sertai kami di bandar-bandar ini pada tahun 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Ikut jalan bata kuning.</p> <section> <header> <h3>Boston</h3> </header> <p>Itulah Beantown kepada rakan-rakannya.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>Ia sangat <em>bagus</em>.</p> <small>Penginapan tidak disediakan.</small> </p><h3>Pengaki tapak - Pengaki</h3><p>Pengaki tapak direka bentuk dengan teg <footer></p><p>  <footer> <p class="copyright">© 2015 Hak Cipta tapak</p> </footer> </p><h3>Kesimpulan</h3><p>Anda boleh menggunakan alat luar HTML5 untuk menyemak struktur halaman. Ia menunjukkan struktur halaman mengikut blok dan tajuk.</p><p>Semantik dalam HTML5 tidak terhad kepada teg yang diberikan di atas dalam artikel. Tetapi menggunakan contoh di atas, anda boleh menyegarkan penanda anda dan menjadikan tapak anda lebih mesra enjin carian, yang akan menghasilkan kedudukan yang lebih tinggi untuk tapak anda dalam hasil carian.</p><p>Untuk meneruskan topik ini, anda boleh meneroka teg HTML5 baharu yang lain. Serta format mikro untuk mereka bentuk dan menstruktur data, seperti schema.org</p><p><b>Nota penting tentang menggunakan teg HTML5.</b> Spesifikasi tidak menyatakan peraturan ketat untuk penggunaan teg semantik; ia hanya memberikan cadangan untuk penggunaannya. Jika anda tidak faham atau tidak tahu di mana dan teg HTML5 mana yang hendak digunakan, lebih baik gunakan div supaya tidak membahayakan atau memecahkan struktur dokumen.</p><p><b>Artikel dan bahan</b></p> <p>Sekarang kita sudah bersedia untuk mengotorkan tangan kita dengan dakwat. Rasa seperti pereka susun atur di rumah percetakan pertengahan abad ke-20. Bunyi berirama mesin cetak, bau cetakan segar, bunyi klik huruf loyang didorong ke tempatnya. Gulungan besar kertas surat khabar asli, menunggu untuk menerima sebahagian daripada maklumat edaran. Dan anda, duduk di mesin penetapan taip, letakkan blok maklumat di tempat yang betul...</p> <p>Adalah baik bahawa komputer menghasilkan perkara ini. Anda boleh mencipta suasana yang sesuai untuk diri sendiri untuk mula mencipta dalam persekitaran yang tenang. Sebenarnya, inilah yang akan kita lakukan sekarang.</p> <p>Untuk menyelesaikan tugas yang anda perlukan (akan ada sebab untuk menaik taraf):</p> <p>Jika berminat, anda boleh menyemak sejauh mana pelayar web anda menyokong standard tersebut <b>HTML5</b>. Ikuti pautan http://html5test.com, di sana anda akan melihat mata, jumlahnya dibentuk oleh bilangan mata yang disokong daripada standard. Pada masa penulisan, pada mesin saya (Ubuntu10.10), Opera11.10 mendapat 258 mata, dan FireFox4 hanya 240. Saya tertanya-tanya apa yang anda ada?</p> <p><i>Dalam tutorial ini, kami:</i></p> <ul><li>Kami akan membuat halaman dengan anda mengikut standard HTML5</li> <li>mari kita gunakan elemen semantik baharu,</li> <li>mari kita melukis sedikit,</li> <li>Mari lihat bagaimana video dipaparkan di halaman kami,</li> <li>Mari kita semak operasi elemen borang baharu.</li> </ul><p>Untuk bekerja, sudah cukup untuk kita menciptanya <b>fail HTML</b> <i>index.html</i> dan satu <b>fail CSS</b> <i>styles.css</i>. Skrip akan muncul pada halaman semasa anda menyelesaikan tugasan, jadi bersedia untuk penyemak imbas anda memberi amaran kepada anda tentang perkara ini. Anda perlu membenarkan skrip dijalankan pada halaman.</p> <h2>Menyediakan bingkai halaman</h2> <p>Pelayar mesti mengetahui halaman dengan melihat! Jika anda tidak memberitahu dia siapa dia dan dari mana dia berasal, dia akan menghidupkan mod keserasian dan anda perlu meneka "bagaimana perkataan anda akan bertindak balas" dalam penyemak imbas pelanggan. Untuk mengelakkan ini daripada berlaku, anda perlu menulis jenis dokumen yang betul sepadan dengan kod halaman di bahagian paling awal halaman.</p> <p>Nampaknya, setelah mendengar rayuan pereka susun atur, lelaki dari <b>W3C</b> kasihan dan membuat tag pendek untuk standard HTML5<!DOCTYPE HTML>. Mana-mana halaman web yang menyokong standard terkini mesti bermula dengannya. Adakah anda masih ingat bagaimana keadaan sebelum ini... <i>awam</i> … <i>peralihan</i> atau <i>tegas</i>... juga alamat fail penerangan jenis dokumen, yang terlalu panjang.</p> <p>Mari kita mulakan. Buat folder pada desktop anda, ia akan mengandungi beberapa fail HTML dan CSS kami. Cipta fail teks ringkas index.html, dalam pengekodan utf-8. Pengekodan aksara ini telah lama menjadi standard untuk semua teks bukan bahasa Inggeris.</p> <p>Baris pertama ialah tempat kita menulis jenis dokumen. <br>Kedua, kami membuka teg utama keseluruhan dokumen html dan menentukan parameter lang, menulis di sana bahasa asas halaman - Rusia. <br>Mari kita beralih kepada tajuk. <br>Perkara pertama yang kami akan tunjukkan ialah pengekodan aksara dokumen. <br>Kemudian tajuk untuk tetingkap penyemak imbas. <br>Kemudian, tanpa teragak-agak, kami akan menyambungkan fail gaya. <br>Akhir sekali, mari tambah bekas badan dokumen kosong.</p> <p>Semua yang kami huraikan di sini adalah dalam Penyenaraian No. 1:</p> <p><b>Penyenaraian 1. Struktur dokumen HTML5 asas</b></p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Pelabur melihat masa depan

Sila ambil perhatian bahawa kebanyakan teg kini tidak panjang seperti dahulu. Tegu tiada lagi yang diperlukan kecuali lang. Untuk tag meta, tulis sahaja charset. Juga, untuk tag pautan tidak perlu dinyatakan menaip.

Rangka kerja sudah sedia, tetapi masih terlalu awal untuk kami memaparkan halaman dalam penyemak imbas. Mari kita beralih kepada elemen semantik halaman.

Menandakan kandungan

Mari letakkan blok semantik pada bingkai

Sekarang mari kita lebih tepat tentang perkara yang akan kita ada pada halaman. Kami akan meneruskan daripada yang berikut: kami perlu menggunakan maksimum elemen semantik baharu HTML5.

Halaman kami akan berfungsi untuk memaparkan teks penuh berita tentang syarikat yang tapak itu didedikasikan. Peralihan kepadanya akan berlaku sama ada dari halaman utama tempat berita terkini disiarkan, atau dari arkib berita.

Mari letakkan blok dalam bekas

. Kami akan mematuhi urutan berikut unsur-unsur ini:

- kepala
– – hgroup
– nav
- artikel
- - kepala
- - "kandungan"
– – bahagian
- - - kepala
- - - "kandungan"
– pengaki

Pada mulanya, kita akan mempunyai blok - tajuk halaman. dengan sekumpulan tajuk bercakap tentang tapak. Kemudian blok semantik untuk menu. Mari jadikan pautan dalam menu rekaan. Selepas ini, artikel bermula, ditunjukkan oleh blok semantik yang sepadan. Ia mengandungi blok pengepala untuk merekodkan tajuk artikel dan tarikh penerbitan. Seterusnya datang kandungan artikel, yang ditambah kesimpulan sendiri penulis yang menulis berita. Alat tambah ini direka bentuk sebagai bahagian dan juga disertakan dengan blok tajuk dan kandungan. Di hujung halaman terdapat satu blok pengaki, di mana kami akan menyiarkan maklumat tambahan tentang kandungan halaman kami.

Semua yang telah kami huraikan di sini dibentangkan dalam Penyenaraian No. 2. Kami tidak memberikan kod penuh halaman, tetapi hanya apa yang sepatutnya antara teg …

.

Penyenaraian 2. Meletakkan blok semantik HTML5

LLC Tanduk dan Kuku

Teks penuh berita

26 Apr

Pelabur melihat masa depan

Tiada apa-apa yang menghalang orang daripada menggunakan tanduk harelope. Walau bagaimanapun, dia tidak mempunyai kuku.

Apa pendapat orang ramai

Pada hakikatnya, hanya ada Ubuntu dengan nama pelik "Harelope".

Kini halaman tersebut boleh dilihat dalam penyemak imbas. Walau bagaimanapun, ia masih kelihatan tidak menarik. Tetapi tidak sia-sia kami telah menjaga dan memasukkan fail dengan gaya.

Mari cat muka depan

Halaman kami masih kelihatan kusam dan tidak menarik. Jom makeup dia. Mari kita laksanakannya dalam fail gaya kita styles.css Perkara pertama yang akan kami lakukan ialah memutuskan fon untuk keseluruhan dokumen. Sekiranya ada yang tidak tahu, katakan bahawa penyelidikan telah dijalankan tentang fon mana yang lebih baik dilihat dari skrin monitor, dan ternyata ia adalah yang tidak mempunyai serif. Fon ini dipanggil sans-serif- sans serif. Ini termasuk, sebagai contoh: Arial, Helvetica, Verdana. Mari kita teruskan, kami akan menentukan mengikut susunan peraturan untuk reka bentuk semua elemen halaman kami. Untuk tidak terlalu mendahului diri sendiri, mari gunakan beberapa ciri buat masa ini - bayang-bayang dan tepi bulat pada bongkah.

Kebanyakan perkara yang akan kami kodkan di sini tersedia dalam piawaian CSS awal. Kami akan menyenaraikan ciri baharu.

bayangan kotak
Parameter ini ditentukan untuk elemen halaman blok dan mencipta bayang di sekelilingnya. Empat nombor pertama ialah parameter linear bayang-bayang; masing-masing, ia ditunjukkan sama ada dalam piksel px, atau unit linear lain ( em, pt), atau tanpanya, dalam kes saiz sifar. Nombor pertama bermaksud hantaran mendatar bayang-bayang ke kanan; jika anda ingin membuangnya ke kiri, letakkan nombor negatif. Yang seterusnya adalah menegak ke bawah; untuk membuatnya, letakkan nombor negatif. Seterusnya ialah jumlah kabur bayang-bayang, kemudian bayang-bayang itu tersebar. Selepas dimensi linear, warna bayang ditunjukkan, dan jika anda mahukan bayangan dalam, maka kata kunci sisipan. Jika satu bayang tidak mencukupi untuk anda, maka realisasikan fantasi bayang anda dipisahkan dengan koma.

bayangan teks
Parameter ini serupa dalam tetapannya dengan yang sebelumnya, satu-satunya perbezaan ialah ketiadaan serakan bayang dan bayang dalaman. Dan tiada siapa yang menghalang anda daripada berkhayal tentang bilangan bayang-bayang, dipisahkan dengan koma.

jejari sempadan (-jejari-sempadan-moz, jejari-sempadan-webkit)
Jejari pembulatan bongkah. Satu blok boleh mempunyai empat penjuru, jadi parameter ini boleh mempunyai bilangan elemen yang sama. Disenaraikan mengikut arah jam bermula dari sudut kiri atas. Nama-nama parameter yang ditunjukkan dalam kurungan digunakan dalam penyemak imbas keluarga Mozilla dan pada enjin Webkit (Chrome, Safari). Jadi pendua dalam peraturan tetapan yang ditentukan jejari sempadan juga dalam beberapa parameter ini.

Reka bentuk yang kami hasilkan dan dikodkan akan kelihatan seperti yang ditunjukkan dalam Penyenaraian No. 3. Kod ini anda perlu masukkan ke dalam fail styles.css.

Penyenaraian 3. CSS untuk elemen semantik HTML5 baharu

* ( font-family: Lucida Sans, Arial, Helvetica, sans-serif; ) body ( lebar: 480px; margin: 0px auto; ) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px; jejari sempadan: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px ; text-align: center; ) header h1 ( font-size: 36px; margin: 0px; ) header h2 ( font-size: 18px; margin: 0px; color: #888; font-style: italic; ) nav ul ( gaya senarai: tiada; padding: 0px; paparan: blok; jelas: kanan; warna latar belakang: #666; padding-left: 4px; tinggi: 24px; -webkit-border-radius: 12px; -moz-border-radius : 12px; jejari sempadan: 12px; ) nav ul li ( paparan: sebaris; padding: 0px 20px 5px 10px; tinggi: 24px; sempadan-kanan: 1px pepejal #ccc; ) nav ul li a (warna: #EFD3D3; teks -decoration: none; font-size: 13px; font-weight: bold; ) nav ul li a:hover (warna: #fff; ) artikel > masa pengepala (fon-saiz: 14px; paparan: blok; lebar: 26px; padding: 2px; text-align: center; warna latar belakang: #993333; warna: #fff; font-weight: tebal; -jejari-sempadan-moz: 6px; -webkit-border-radius: 6px; jejari sempadan: 6px; terapung: kiri; margin-bawah: 10px; ) artikel > jangka masa pengepala ( saiz fon: 10px; berat fon: normal; perubahan teks: huruf besar; ) artikel > pengepala h1 ( saiz fon: 20px; apungan: kiri; jidar-kiri: 14px; bayang teks : 2px 2px 1px #FFFFFF, 2px 2px 5px #888; ) artikel > header h1 a ( color: #993333; text-decoration: none; ) article > section header h1 ( font-size: 16px; ) article p ( clear: kedua-duanya; ) footer p ( text-align: center; font-size: 12px; color: #888; margin-top: 24px; ) article > section ( -moz-border-radius: 6px 0 0 0; -webkit-border -radius:6px 0 0 0; jejari sempadan: 6px 0 0 0; bayang-bayang kotak: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; warna: #665588; margin-top: 40px; )

Jika anda membuka halaman indeks anda sekarang, ia tidak akan kelihatan begitu membosankan, lihat Rajah 1. Berbanding dengan paparan sebelumnya, ia akan menjadi SUPER

Rajah 1. Paparan halaman yang digayakan

Jika halaman kelihatan berbeza, ini bermakna anda membukanya dalam penyemak imbas yang salah. Dengan "salah" saya maksudkan penyemak imbas selain Mozilla4+, Chrome11.0+, Opera11.10+, mereka memaparkan halaman dengan cara yang sama - diuji.

Nota: Jika seseorang tidak memahami entri peraturan dalam penyenaraian, sebagai contoh, anda tidak faham mengapa anda perlu menggunakan > dalam pemilih? Kemudian tulis soalan anda dalam komen.