Ana sayfa için hazır HTML kodu. Not Defteri'nde HTML Sayfaları Oluşturma: Aptallar için Açıklamalar

Şimdi bu sayfayı yapmak için kullandığımız Etiketler hakkında birkaç kelime.

Örnek gelen HTML etiketlerinin açıklaması

1. - Her web sayfasında bu etiketler bulunmalıdır. Tarayıcıları ve arama motorlarını bu bir HTML sayfasıdır.

Herhangi bir HTML sayfası aşağıdaki yapıya sahiptir:

... Etiketler Etiketler ... ... Sayfalar vücut ...

2. - Bu etiketler arasında tüm görünen sayfa içeriği var.

4. - Bu etiketler arasında, tarayıcının üstünde görüntülenen bir sayfa başlığı reçete edilir. Bu arada, arama motorlarında bir şey aradığınızda, görüntülenen ilk şey sadece sayfanın adıdır. Etiket Genellikle "tytyl" denilen kısaltılmıştır. Makaleyle tanışmanızı tavsiye ederim: Etiket nasıl yapılır </p> <p>Şimdi HTML sayfalarında (içeride) etiketlere geçelim. <body> ve</body> ).</p> <p>5. <center></center> - Bu etiketler, her şeyi kendi içi merkezde hizalayın. Bu durumda, merkez ekranın merkezi olacaktır. Gelecekte, bu etiketleri kullanmayı reddetmek önerilir.</p> <p>6. <h1></h1> - Bu sınıf etiketi etiketinden biridir. <h1>..<h6> , genellikle sayfanın adı sonucuna varılır. Örneğin, bu sayfa bir HTML sayfası oluşturma örneği "dedi."</p> Not <p>bu etiketlerin sitenin sıralamasında çok fazla ağırlığa sahiptir, bu nedenle düzgünce ve zihinle kullanmaları gerekir.</p> <p>Bir HTML kodu çizerken, basit bir kurala uymanız gerekir: Önce başlık etiketine geçmelisiniz. <h1> ve sonra zaten gidebilir <h2> , <h3> vb. Asıl şey, ilk değildi. <h2> , sonra <h1> , sonra <h3> vb. Katı bir hiyerarşi olmalı. Headlovkov <h2> , <h3> vb. Belki çok.</p> <p>7. <br/> - Bu, kapanış etiketi gerektirmeyen tek bir etikettir. Bir sonraki satıra geçiş. Üst üste iki tek etiket, bir sonraki satıra iki kez gitmek için örneğimde yazılmıştır.</p> <p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span> - Bu, görüntüyü görüntüleyen tek bir etikettir.</p> <ul><li>sRC, görüntü adresinin belirtildiği zorunlu bir parametredir (URL'ler yerine, görüntünüzün depolandığı adresi kaydetmeniz gerekir). <br><u>Not</u>: <ul><li>Görüntü HTML sayfanızla bir klasördeyse, görüntünün adını yazmak yeterlidir, aksi takdirde mutlak veya göreceli bir URL yazmanız gerekir;</li> <li>Görüntünün genişlemesini belirtmeyi unutmayın. Örneğin, .jpg, .gif, .jpeg.</li> </ul></li> <li>alt veya Başlık - Bu parametrelerde resminize bir açıklama yazabilirsiniz. Resme bir fare getirdiğinizde, bu açıklama görünecektir. Bu parametreler, özellikle resimlerle arama yaparken siteyi tanıtmak için önemlidir. Görüntü indiremedi ise, bu metin de bir artı olan türetilir.</li> </ul><p>9. <font></font> - Bu etiketler yazı tipini, arka planı, boyutunu vb. Değiştirmek için tasarlanmıştır. Kısacası, metin biçimlendirme ile ilişkili olan tek şey bir etikette yapılandırılabilir. Bu etiket, ayrı bir derste söyleyeceğim birkaç öznitelik var.</p> <p>Not: - Benzer bir etiket.</p> <p>Ayrıca, tüm bu parametreleri ayarlayabileceğiniz bir CSS yazı tipi özelliği de vardır.</p> <p>10. - Yağ tahsis eder. Hepsi arasında sonuçlanan <b> ve</b> Yağ vurgulanacak. Örneğin, içeriğin başlangıcına yazarsanız ve sonuncusunda kapanırsanız, sayfadaki tüm metin, yağ verilir. Bu, analog olan oldukça yaygın bir etikettir. <strong></strong> .</p> <p>Arama motorları, anahtar kelimelerin etkisini arttırırken bu etikete dikkat eder. Ancak dikkatli olmalısınız, çünkü her seferinde spam için algılanacak olan yağlı anahtar kelimeler tarafından ayrılır.</p> <p>Herhangi bir web sayfasını açarsanız, sitenin türü ve yönünden değişmeyen tipik unsurlar içerecektir. Örnek 4.1'de, ana etiketleri içeren basit bir belgenin kodu gösterilmiştir.</p> <p>Örnek 4.1. Kaynak Kodu Web Sayfası</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Örnek Web Sayfası

Başlık

İlk paragraf.

İkinci paragraf.

Bu örneğin içeriğini kopyalayın ve Example41.HTML adının altındaki C: \\ WWW \\ klasörüne kaydedin. Bundan sonra, tarayıcıyı çalıştırın ve dosyayı menü öğesi üzerinden açın. Dosya\u003e Açık Dosya (CTRL + O). Belge Seçimi iletişim kutusunda, example41.html dosyasını belirtin. Tarayıcı, Şekil 2'de gösterilen web sayfasını açacaktır. 4.1.

İncir. 4.1. Örneğin yürütülmesinin sonucu

Eleman Geçerli belge türünü belirlemek için tasarlanmıştır - DTD (belge türü tanımı, belge türünün açıklaması). Tarayıcının mevcut web sayfasını nasıl yorumlayacağını anlaması gerekir, çünkü HTML birkaç sürümde bulunur, ek olarak, XHTML (Genişletilebilir Köprü Metin İşaretleme Dili, Genişletilmiş Köprü Metin Maddesi Dili), HTML'ye benzer, ancak onunla farklı sözdizimi. Tarayıcıya, bir web sayfasını görüntülemek için hangi standarda sahip olduğuna göre, "şaşkın olmayan" ve anlaşılan tarayıcıya ve birinci sırayı ayarlamanız gerekir. .

Birkaç tür var Yönlendirilmiş olan HTML sürümüne bağlı olarak farklılık gösterirler. Sekmesinde. 4.1. Açıklama ile ana belge türleri verilmiştir.

Masa. 4.1. Geçerli DTD.
DOCTYPE. Açıklama
HTML 4.01.
Sıkı html sözdizimi.
HTML geçiş sözdizimi.
HTML belgesinde çerçeveler uygulanır.
HTML 5.
HTML'nin bu sürümünde sadece bir doctile.
XHTML 1.0.
Sıkı XHTML Sözdizimi.
XHTML geçiş sözdizimi.
Belge XHTML'de yazılır ve çerçeveler içerir.
XHTML 1.1
XHTML 1.1 geliştiriciler, HTML'yi kademeli olarak değiştireceğini varsayıyor. Gördüğünüz gibi, sözdiziminin bir tanesini tanıma ve net kurallara uymadığından türlerde bir tanım yoktur.

Belgenin sıkı ve geçiş açıklaması arasındaki fark, belgenin kodunu yazmak için farklı bir yaklaşımdan oluşur. Sıkı HTML, HTML spesifikasyonuna sıkı bir şekilde bağlılık gerektirir ve hataları unutmaz. Geçiş HTML, daha fazla "sakince" bazı kodları belirtir, bu nedenle bu tür bu tür belirli durumlarda kullanmanız tercih edilir.

Örneğin, sıkı HTML'de ve XHTML'de kesinlikle bir etiket gerektirecektir Ve HTML geçişinde, belirtip belirtmeyin. Aynı zamanda, tarayıcının herhangi bir durumda, sözdizimine uygun olup olmadığına bakılmaksızın belgeyi göstereceğini unutmayın. Böyle bir kontrol, doğrulayıcı kullanılarak gerçekleştirilir ve öncelikle geliştiriciler için belgedeki hataları izlemeleri amaçlanmıştır.</p> <p>Gelecekte çoğunlukla katı uygulayacağız.<!DOCTYPE> Özellikle öngörüldüğü zaman hariç. Bu, tipik hataları önlememize ve sözdizimsel olarak doğru kodun yazılmasını öğretmemize izin verir.</p> <p>Genellikle genel olarak HTML kodunu kullanmadan karşılayabilirsiniz.<!DOCTYPE> Bu durumda web sayfası hala gösterilecektir. Bununla birlikte, aynı belgenin tarayıcıda kullanıldığında farklı şekillerde görüntüleneceği ortaya çıkabilir.<!DOCTYPE> Ve onsuz. Ek olarak, tarayıcılar bu tür belgeleri kendi yoluyla gösterebilir, sonuç olarak, "Kıvrımlar" Sayfası, yani. Geliştirici tarafından gerektiğinde hiç gösterilmeyecektir. Böylece böyle bir durum eklemek için olmaz<!DOCTYPE> Belgenin başlangıcına.</p><p>Etiket <html> HTML dosyasının başlangıcını tanımlar, başlık içinde saklanır ( <head> ) ve belgenin gövdesi ( <body> ).</p><p>Belgenin başlığı, blok olarak adlandırılır <head> Metin ve etiketler içerebilir, ancak bu bölümün içeriği konteyner hariç, doğrudan sayfada gösterilmez. <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etiket <meta> Evrenseldir ve tüm bir olasılık sınıfı ekler, özellikle de metatlar kullanarak, genelleştirilmiş bir arama olarak, sayfanın kodlamasını, anahtar kelimeleri, belgenin açıklaması ve çok daha fazlasını değiştirebilirsiniz. Tarayıcının UTF-8 kodlaması (Unicode Dönüşüm Biçimi, Unicode Dönüşüm Biçimi) ile ne işleyeceğini anlaması için ve bu dize eklenir.</p><p> <title>Örnek Web Sayfası

Etiket Web sayfası başlığını belirtir, bu, çok sayıda görevi çözmek için tasarlanan önemli unsurlardan biridir. Windows işletim sisteminde, başlık metni, tarayıcı penceresinin sol üst köşesinde görüntülenir (Şek. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>İncir. 4.2. Tarayıcıda başlık türü</p> <p>Etiket <title> Zorunludur ve kesinlikle belge kodunda bulunmalıdır.</p><p>Kapanış etiketi eklediğinizden emin olun.</head> Belge başlık biriminin tamamlandığını göstermek için.</p><p>Belgenin gövdesi <body> Web sayfasının etiketlerini ve anlamlı bir kısmını karşılamak için tasarlanmıştır.</p><p> <h1>Başlık</h1> </p><p>HTML, başlıktan sonra bulunan bölümün göreceli önemini gösteren altı metin başlığı sunar. Bu yüzden etiket <h1> Birinci seviyenin en önemli başlığını ve etiketi temsil eder. <h6> Altıncı seviyenin başlığını belirtmek için hizmet eder ve en az önemlidir. Varsayılan olarak, birinci seviye başlığı en büyük yazı tipi yazı tipi tarafından görüntülenir, sonraki seviye başlıkları boyutta daha azdır. Etiketler <h1>...<h6> Bunlar blok elemanlarıdır, her zaman yeni bir satıra başlarlar ve onlardan sonra, başka öğeler bir sonraki satırda görüntülenir. Ek olarak, başlık ve sonra boş alan eklenir.</p><p> <!-- Комментарий --> </p><p>Bazı metinler, bir yorum yaparak tarayıcıdaki ekrandan gizlenebilir. Kullanıcı bu tür bir metin görmese de, belgede hala iletilecektir, bu nedenle kaynak koduna baktıktan sonra gizli notları tespit edebilirsiniz.</p> <p>Herhangi bir web sayfasını açarsanız, sitenin türü ve yönünden değişmeyen tipik unsurlar içerecektir. Örnek 1, ana elemanları içeren basit bir belgenin kodunu göstermektedir.</p><p>Örnek 1. Bir Web sayfasının kaynak kodu</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Örnek Web Sayfası

Başlık

İlk paragraf.

İkinci paragraf.

Bu örneğin içeriğini kopyalayın ve Örnek2.html altındaki C: \\ WWW \\ klasörüne kaydedin. Bundan sonra, tarayıcıyı çalıştırın ve dosyayı menü öğesi üzerinden açın. Dosya\u003e Dosya Aç (CTRL + O). Belge Seçimi iletişim kutusunda, example2.html dosyasını belirtin. Tarayıcı, Şekil 2'de gösterilen web sayfasını açacaktır. bir.

İncir. 1. Tarayıcıdaki örneğin sonucu

Eleman (Jarg. Doktorlar) Geçerli belge türünü belirtmek için tasarlanmıştır - DTD (belge türü tanımı, belge türünün açıklaması). Tarayıcının, geçerli Web sayfasının nasıl yorumlanacağını anlaması gereklidir, çünkü HTML birkaç sürümde - modern HTML5 veya modası geçmiş HTML4 ve XHTML'de bulunur. Tarayıcıya, bir web sayfasını görüntülemek için hangi standarda sahip olduğuna göre, "şaşkın olmayan" ve anlaşılan tarayıcıya ve birinci sırayı ayarlamanız gerekir..

Sadece HTML5 ile çalışmaya devam edeceğimiz için, sadece bir kısa ve modern dokümana ihtiyacımız olacak.

Öğelerin adlarının küçük ve büyük harflerle yazılabileceğini belirttik. İçin Bu kural da geçerlidir ve farklı şekillerde kaydedilebilir. Bununla birlikte, bu öğenin adı geleneksel olarak büyük harfle yazılmıştır.

Açılış etiketi HTML belgesinin başlangıcını belirler, başın içinde saklanır ( ) ve belgenin "gövdesi" ( ).

Bu bölümün içeriği, ürün hariç, doğrudan sayfada gösterilmez. . İçeride <head> Aşağıdaki unsurlar bulunabilir: <base> , <link> , <meta> , <script> , <style> veya <title> .</p><p> <meta charset="utf-8"> </p><p>Eleman <meta> Evrenseldir ve bir tam özellik sınıfıdır, özellikle de bir metatta kullanarak, genelleştirilmiş bu öğe olarak adlandırılır, sayfanın kodlamasını, anahtar kelimeleri, belge açıklaması ve tarayıcı veya arama motorları için tasarlanmış çok daha fazlasını değiştirebilirsiniz. . Özellikle, tarayıcının UTF-8 kodlama (Unicode Dönüşüm Biçimi, Unicode Dönüşüm Formatı) ile nasıl başa çıktığını anladığı ve bu dize eklenmesi.</p><p> <title>Örnek Web Sayfası

Eleman Web sayfasının adını belirtir. Tarayıcıda geçerli sekmesinde görüntülenir (Şek. 2).</p><p><img src='https://i0.wp.com/webref.ru/assets/images/html-tutorial/title.png' height="62" width="367" loading=lazy loading=lazy></p><p>İncir. 2. Web sayfalarını tarayıcıda isimlendirin</p><p>Eleman <title> Zorunludur ve kesinlikle belge kodunda bulunmalıdır. İçinde sadece metin yazmaya izin verilir ve başka bir unsur yok <title> olmamalı. Ancak, örneğin aşağıdaki gibi farklı metin karakterleri eklenebilir: <span><title>Adobe ™ Photoshop® .

Kapanış etiketi Belgenin "başının" tamamlandığını gösterir.

Belgenin "vücut" Öğeleri ve web sayfasının içeriğini yerleştirmek için tasarlanmıştır.

Başlık

HTML, başlıktan sonra bulunan bölümün göreceli önemini gösteren altı metin başlığı sunar. Öyleyse eleman

birinci seviyenin en önemli başlığını ve elemanını temsil eder.

Altıncı seviyenin başlığını belirtmek için hizmet eder ve en az önemlidir. Varsayılan olarak, birinci seviye başlığı en büyük yazı tipi yazı tipi tarafından görüntülenir, sonraki seviye başlıkları boyutta daha azdır. Elementler

...

Bunlar blok elemanlarıdır, her zaman yeni bir satıra başlarlar ve onlardan sonra, başka öğeler bir sonraki satırda görüntülenir. Ek olarak, başlamadan önce ve sonra, tarayıcı boşluk ekler.

Bazı metinler, bir yorum yaparak tarayıcıdaki ekrandan gizlenebilir. Kullanıcı böyle bir metni görmese de, belgede hala iletilecektir, bu nedenle kaynak koduna bakarak gizli notları algılayabilirsiniz.

"HTML sayfası nasıl oluşturulur" dersi, en basit web sayfasının düzenine ayrılmıştır. HTML dosyasının nasıl doğru şekilde kaydedileceğini, tarayıcıdaki HTML sayfasını doğru görüntülemek ve metinleri, listeleri, görüntüleri web sayfasındaki metinleri, listeleri, görüntüleri doğru şekilde görüntülemek için gerekli kodlamayı ayarlayacaksınız.

Bu dersi inceledikten sonra, Şekil 1'deki gibi ilk web sayfasını nasıl oluşturacağınızı zaten öğreneceksiniz.

Resim 1

1. HTML Belge Yapısı

HTML dosyalarının bir uzantısı var .htm. veya .html.

Genellikle etiketler çift: başlangıç \u200b\u200bve bitiş etiketleri. Başlangıç \u200b\u200b-<>, Sonlu, örneğin

ve

Çifti etiketi daha fazla denir konteyner .

Bazı etiketlerin zorunlu bir çift etiketi yoktur, böyle bir etiket denir tek . Bu etiket, örneğin kapanan köşe braketinin önündeki sağ danteyi yazarak kapatılır.

HTML belgesinin yapısı aşağıdaki gibidir (Şekil 2).

Şekil 2.

Şekil 2'deki listenin açıklaması

İlk satırda, DocType tasarımı, Web sayfası düzeninin standartlarından biri anlamına gelir.

Etiketler arasında ve Başlık kısmını içerir. Bir tasarım içerir </b> ve <b>. Bu isim, belgeyi yüklerken tarayıcı başlığı satırında görünür (Şekil 3).

Figür 3.

Kayıt cyrillic kodlaması anlamına gelir, böylece harflerin tarayıcıda doğru şekilde görüntülenir. Kodlama reçete edilmezse, fontlar bazen aşağıdaki gibi görüntülenebilir (Şekil 4)

Şekil 4.

Kodlamayı taktıktan sonra aynı sayfa (Şekil 5)

Şekil 5.

Not: Kodlama yerine charset \u003d "Windows-1251"kodlamayı kullanabilirsiniz charset \u003d " utf -8" Bu, çok dilli siteler oluşturmanıza olanak sağlar, çünkü dünyadaki tüm semboller içinde bulunur. Bu durumda Not defteri.++ düzen vermek ve tasarruf etmek için gereklihtmlDosya Üst menüden birini seçin Kodlama - kodlama Utf -8 olmadan BOM. (BOM'suz UTF-8)

Bu bilgilerin ilk belgesini oluşturmak için yeterlidir.

Pratik Görev 1.

1. Bir klasör oluşturun, adlandırın bENİM.ev.. Tüm klasörlerin ve dosyaların isimleri Latin hat harfleri ile oluşturulmalıdır, rus isimler kullanılamaz. Kısa ve anlamsal isimleri belirtin.

Web sayfası kodu Not Defteri'nde yazılacaktır. Windows'un teslimatında olan notebook'u kullanmak daha iyidir, ancak daha fazla "Gelişmiş", örneğin Notepad ++. Dağıtım Not Defteri ++. Klasörde var CD / DAF..

2. Not Defteri ++ açın. ANSI kodlamasının menüde bunu yapmak için kurulduğundan emin olun. KodlamaPozisyonu takın ANSI'de kodlama.

3. Not Defteri ++ kodunu, Şekil 2'deki listeden çevirin.

Şekil 2'deki listedeki kod, daha sonra bize her seferinde HTML belgesinin yapısını işe almamak için bir şablon olarak hizmet verecektir. DOCTYPE tasarım buradan kopyalama (Unutma ve ezberleme gerekli değil).

4. Dosyayı ad altına kaydedin shablon.html.klasörde benim evim.alandayken Dosya tipi Yüklemek Her türlü.(Şekil 6), aksi halde web sayfanız daha sonra tarayıcıda açılmaz.

Şekil 6.

5. Kaydettikten sonra koşun shablon. html Çift tıklama. Sonuç olarak, dosyanız böyle görünecektir (Şekil 7).

Şekil 7.

Sonucu elde etmediyseniz, yukarıdaki şekilde olduğu gibi, en muhtemel kodda bir hata olduğu anlamına gelir. Yeterince yanlış sembol ve web sayfası doğru görüntülenmeyecektir. Bir kez daha, kodu, Şekil 2'deki listeyle kontrol edin.

6. Klasörün içinde benim evim. Klasör oluşturun halka açık_ html. Böyle bir ad, genellikle bu barındırma üzerine yerleştirildiğinde sitenin kaydedildiği bir klasör olarak adlandırılır (bu klasör de www olarak adlandırılabilir).

7. Dosyayı kaydedin shablon. html klasörde halka açık_ html Yeni isim altında ana.. html.

8. Klasörden CD/ html_css_1.açık dosya text_main.txt Not Defteri ++ 'da, adı altında kaydedilen dosyayı da açın ana.. html

9. Tüm metni dosyadan kopyalayın. text_main.txtve dosyaya ekleyin ana.. html"Web sayfasının içeriği" ifadesi yerine. TEG'de "HOME" kelimesini yazın. Böyle <b><title>ana.

10. Değişiklikleri kaydedin ve dosyayı görüntüleyin. ana.. htmltarayıcıda. Formatsız metin göreceksiniz. Kaynak metinde olan strates bile tarayıcı yapmaz (Şekil 8).

Şekil 8.

2. Biçimlendirmeağ.Alan etiketiHtml

Bu derste, "HTML sayfası nasıl oluşturulur", bir web sayfasını işaretlemek için kullanılan ana etiketleri tartışır.

Etiketler, Web sayfasının metnini biçimlendirmek için tasarlanmıştır. Etiketler listesi klasörde daha ayrıntılı olarak görüntülenebilir. CD/ DizinHtmldizinde html401_ru.chm. (Üst menü öğesinde elementler).

Bazı etiketleri düşünün.

Elementler h. 1, h. 2, h. 3, h. 4, h. 5, h. 6

Belgenin gövdesinin yapısı elemanın içinde gerçekleştirilir. < vücut.> Elements H1, H2, H3, H4, H5, H6 ile tanımlanan başlıkları kullanma.

Başlıkların elemanları çifttir, bu yüzden açılmalılar olmalıdırlar < h.1> ve kapanma h.1> Etiketler.

HTML'nin altı başlık seviyesi vardır: H1 (en üstte), H2, H3, H4, H5 ve H6 (en düşük). Başlıkların fonksiyonları, metin editörlerdeki normal başlık stillerine benzer.

Bu altı etiketin etkisi aşağıdaki rakamlarda sunulmuştur. Bir resimde, kaynak kodu (Şekil 9), diğer taraftaki tarayıcıda bir görünümdür (Şekil 10).

Şekil 9.

Şekil 10.

Paragraflarda metnin ayrılması

Etiket < p.> Paragrafın başlangıcını belirtir ve yukarıdan mesafeyi ekler - bu paragrafın öncekinden ayrılmasına bir girintilidir.

Zorla string boşluğu

Etiket
Paragrafın kalan kısmını bir sonraki satıra aktarmanızı sağlar. Bu ücretsiz bir etikettir ve etiketin aksine, paragraf satırlar arasındaki aralığı arttırmaz.

Pratik Görev 2.

1. "Mimari Projelerin Kataloğu" unvanını formatlayın.

ve

.

2. Etiketleri kullanarak "Gelecekteki eviniz için projeler" unvanını biçimlendirin

ve

.

3. "Evlerin projelerini" ve "Ev Meydanı" başlıklarını etiketleri kullanarak biçimlendirin.

ve

.

4. Ana metin etiketi kullanarak paragraflara ayrılmıştır.

İlk iki paragrafın içinde etiketi kullanın
Dize aktarmak için. Sonuç olarak, kodunuz böyle görünmelidir (Şekil 11).

5. Tarayıcıdaki sonucu gözden geçirin.

Şekil 11.

İşaretli ve numaralandırılmış listeler

HTML, herhangi bir liste oluşturabileceğiniz anlamına gelir: numaralandırılmış (dijital ve alfabe) ve farklı tipte belirteçlerle etiketlenmiştir.

Etiket < irmak>…irmak> İşaretli bir liste oluşturur.

Etiket < ol>…ol> Numaralı bir liste oluşturur.

Ayrı liste öğesi

    ve
      bir etiket kullanılarak oluşturulur < li> .

      Pratik Görev 3.

      1. "Ev Projeleri" başlığı altında bir numaralı liste oluşturun.

      2. "Ev Meydanı" başlığı altında işaretli bir liste oluşturun. Kodunuz böyle görünecek (Şekil 12).

      Şekil 12.

      3. Tarayıcıdaki sayfaya göz atın.

      Listeler, çeşitli işaretleyiciler kullanarak birbirine eklenebilir.

      Ekteki bir liste örneği, Şekil 2'de gösterilmiştir. 13

      Pratik Görev 4.

      1. Şekil 13'te gösterilen yeni dosya kodunda uygulanır.
      2. Dosyayı klasöre kaydedin benim evim. isim altında spisok._ vlozh. html. Sonuç, Şekil 2'dedir. 13

      Şekil 13. Örnek Yatırım Listesi

      Yazı tiplerini başlattı

      Etiket - metni kalın olarak görüntülemenizi sağlar.

      Etiket - Metni uygun bir tarzda görüntülemenizi sağlar.

      Etiket - Altı çizili metni görüntüler.

      Örneğin:

      Bu durumda, metin görüntülenecektir. kalın italik Ama altı çizili değil.

      Ve bu durumda metin yazılacak İtalik'lerde altı çizili yağ .

      Alt ve üst endeksler

      Etiket < alt.> ve alt.> Metni, normal metnin altındaki kenardaki metni azaltmanıza olanak sağlar.

      Etiket < sup.> ve sup.> Her zamanki metnin üzerindeki kaldırımdaki metni kaldırmanızı sağlar. Bu etiketler arasında yer alan metin, geleneksel metne kıyasla daha küçük yazı tipi tarafından tasvir edilecektir.

      Pratik Görev 5.

      1. Birinci paragraf adında format myhouse.ru cesur yazı tipi (Şekil 14).

      Şekil 14.

      2. İkinci paragraf cümlesindeki "Projelerin% 95'inden fazlası" italik olarak altı çizili olarak (Şekil 15).

      Şekil 15.

      3. Üst dizinleri, metrekarelerin kullanıldığı yerlerde biçimlendirin (Şekil 16).

      Şekil 16.

      4. Dosyayı kaydedin. Tarayıcıya göz atın. Web sayfası böyle görünmelidir (Şekil 17).

      Şekil 17.

      3. Görüntüleri Takma

      "HTML sayfası nasıl oluşturulur" makalemizde web sayfasında nasıl yayınlanacağına bakacağız.

      Görüntüleri eklemek için etiket . Bu etiket için zorunlu bir özelliktir src (İngilizce Kaynağından - Kaynak). Görüntünün web sayfasında görüntülenmesi gereken grafik dosyasının yolunu tanımlar.

      Görüntüyü eklemek için bir komut kullanılır.

      Örneğin: " image1.jpg." alt \u003d "(! Lang: resim" /> !}

      ALT özniteliği, Web sayfasını, eksik resim yerine devre dışı bırakılmış görüntüler modunda görüntülemek için gereklidir, ALT özniteliğinde yazıldığından bir yazıt vardı. Ayrıca alt-metinlerin her zaman kullanılması önerilir, çünkü Arama motorları, görüntüleri ararken anahtar kelimeleri olarak analiz eder.

      Grafik dosyaları formatta olabilir jpg, gif, png ve mutlaka renk modelindeRGB..

      Pratik Görev 6.

      1. Evlerin evlerinin listesinden sonra, Web sayfasındaki evlerin görüntülerini yerleştirin. proje._1.jpg. ve proje._2.jpgklasörden CD / HTML_cSS._1 . Bunu yapmak için, ilk önce bu görüntülerin ikisini ana.html dosyasının bulunduğu klasöre kopyalayın. Görüntü ekleme kodu böyle görünecek (Şekil 18).

      Şekil 18.

      2. Tarayıcıdaki sonucu gözden geçirin (Şekil 19).

      Şekil 19.

      Temel olarak etiketleri kullanma ilkesiHtml Anlaşılmalıdır. Aynı prensipte kullanılırlar: Konteyner etiketi, yani açma ve kapatma etiketi. Etiket bekarsa, kapanış etiketi yoktur, bu durumda doğru eğik çizgi bir kapama köşesine yazılmıştır, örneğin< br. /\u003e. Etiket konteyneri veya soliter, her zaman şartnamede görebileceğinizhTML401_EN.CHM "Elementler" bölümünde.

      4. Sitede adresleme

      İlk dersimizde, "HTML sayfası nasıl oluşturulur", HTML'de adresleme kavramlarını analiz edeceğiz.

      HTML dosyasının farklı site klasörlerinde olabilecek görüntüleri yerleştirmesi gerektiğinde adresleme seçeneklerini düşünün.

      İki tür adres türü vardır:

      • mutlak;
      • akraba.

      Mutlak adres (bilgisayar disk adlarını kullanarak) kullanılmamış(Şekil 20)

      Şekil 20.

      Kullanılmış göreceli adresleme - Bir belgede veya bir sunucuda belge kümesi içinde adresleme. Sitedeki dosyaya atıfta bulunmak için, tarayıcıyı belirtmeniz gerekir, istenen dosyaya gelmek için hangi yolu yapması gerektiğini belirtin.

      Örnek 1.

      Görüntü bir HTML belgesi olan bir klasörde bulunur (Şekil 21). Yani, görüntü ve HTML dosyası dosya sisteminde aynı seviyede ve HTML belgesi hemen görüntüyü ekleyebilir. Bu durumda, görüntünün web sayfasına yerleştirilmesi buna benzeyecektir.

      / >

      Şekil 21.

      Pratik görev7

      Uygulama Örneği 1 (Bir klasör oluşturun, DOC.HTML dosyası, herhangi bir resim çekin). Resim

      Örnek 2.

      Resim pic. jpg. Klasörde bulunur klasör._1 . HTML belgesi klasörün dışında bulunur. Şunlar. Sitenin dosya sisteminde, HTML belgesi görüntüden bir seviyeye daha yüksek (Şekil 22) bulunur. Folder_1 klasörüne giriş yapmanız gerekir, ardından görüntüyü ekleyin

      Şekil 22.

      Pratik görev8

      Uygulama Örneği 2 (Bir klasör oluşturun, DOC.HTML dosyası, herhangi bir resim çekin). Görüntü DOC.HTML Web sayfasına eklenmelidir.

      Örnek 3.

      Resim pic. jpg. Klasörde bulunur klasör._1 hangi sırayla klasörde yatıyor klasör._2 . HTML belgesi bu klasörlerin dışında bulunur (Şekil 23). Böylece, HTML belgesi, görüntüden daha yüksek iki seviyedir. İhtiyaç:

      • folder_2 klasörüne giriş yapın.
      • ardından klasör klasörüne giriş yapın_1,
      • sonra görüntüyü ekleyin.

      Şekil 23.

      Pratik görev9

      Uygulama Örneği 3 (Klasörler oluşturun, DOC.HTML dosyası, herhangi bir resim çekin). Görüntü DOC.HTML Web sayfasına eklenmelidir.

      Örnek 4.

      klasör._1 . Görüntü klasörünün dışındadır_1. Şunlar. HTML belgesi, görüntüden daha düşük bir seviyeye yerleştirilir (Şekil 24). Folder_1 klasöründen çıkmanız gerekir, ardından görüntüyü ekleyin. Çıkış Klasör tasarım tarafından gösterilir ../ (İki nokta ve sağa eğik çizgi).

      / >

      Şekil 24.

      Pratik görev10

      Uygulama Örneği 4 (Bir klasör oluşturun, DOC.HTML dosyası, herhangi bir resim çekin). Görüntü DOC.HTML Web sayfasına eklenmelidir.

      Örnek 5.

      HTML belgesi klasörde klasör._1 sırayla klasörde klasör._2 . Görüntü bu klasörlerin dışında. Böylece, HTML belgesi, görüntüden daha düşük bir iki seviye bulunur (Şekil 25). İhtiyaç:

      • klasörden çık Folder_1
      • folder Folder_2'den çıkın
      • görüntüyü ekleyin.

      İki kere çıkmanız gerektiğinden, o zaman tasarım ../ İki kez tekrarlandı.

      / >

      Şekil 25.

      Pratik Görev 1.1

      Uygulama Örneği 5 (Klasörler oluşturun, DOC.HTML dosyası, herhangi bir görüntüyü alın). Görüntü DOC.HTML Web sayfasına eklenmelidir.

      Örnek 6. (Şekil 26)

      İhtiyaç:

      • klasörden çık Folder_1
      • folder Folder_2'den çıkın
      • klasöre git Folder_3
      • folder_4 klasörüne gidin
      • resim ekleyin pic.jpg

      Şekil 26.

      Pratik Görev 1.2

      Uygulama Örneği 6 (Klasörler oluşturun, DOC.HTML dosyası, herhangi bir resim çekin). Resim

      dOC.HTML Web sayfasına eklenmelidir.

      Misal 7 (Şekil 27)

      İhtiyaç:

      • klasörden çık Folder_1
      • folder Folder_2'den çıkın
      • folder Folder_3'ten çıkın,
      • folder_4 klasörüne giriş yapın.
      • resim pic.jpg ekleyin.

      Üç kez çıkmanız gerektiğinden, o zaman tasarım ../ üç kez tekrarlandı.

      Şekil 27.

      Pratik Görev 1.3

      Uygulama Örneği 7 (Klasörler oluşturun, DOC.HTML dosyası, herhangi bir resim alın). Resim

      dOC.HTML Web sayfasına eklenmelidir.

      Böylece, kaç kez dışarı çıkmanız gerektiğine, tasarımı birçok kez ayarlayın ../ ve eğer geçerseniz, klasörlerin yolunda bulunan isimleri listeliyoruz.

      Pratik Görev 1.4

      1. Bir HTML belgesi oluşturun ve görüntüyü görüntünün yolu aşağıdaki gibidir.

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg." / >

      2. İçeriği ve içerdiği için bir HTML belgesine kendi ekleme örneğinizi geliştirin ve çıktı Klasörlerden ve giriş Klasörlerde. Bir örnek, yukarıdaki tüm örneklerden farklı olmalıdır.

      Bu konunun yürütülmesinin bir sonucu olarak, aşağıdaki dosyalara sahip olmalısınız:

      • shablon.html.
      • main.html
      • spisok_vlozh.html
      • klasörün içindebenim evim. Bir klasör olmalıhalka açık_ htmlgelecekteki site dosyalarıyla
      • nispi adresleme ve pratik görevin kontrolü olarak iki örnek iki örnek 14
Konuya devam ediyor:
Aygıtlar

Çevrimiçi Galaxy Invaders oyununu (Galaxy Invaders) ile tanışın - Space Invaders türünün (uzay işgalcileri) en iyi retro oyununun modern versiyonu. Bu eski bir iyi ...