Sayfa şablonu kodu. Geniş çerçeveli. HTML5'te İsteğe Bağlı Etiketler
“HTML sayfası nasıl oluşturulur” dersi çok basit bir web sayfasının düzenine ayrılmıştır. Bir HTML dosyasını nasıl doğru şekilde kaydedeceğinizi, bir HTML sayfasını tarayıcıda doğru şekilde görüntülemek için gerekli kodlamayı nasıl ayarlayacağınızı ve bir web sayfasına metinleri, listeleri ve görüntüleri nasıl yerleştireceğinizi öğreneceksiniz.
Bu dersi inceledikten sonra, Şekil 1'deki gibi ilk web sayfanızı nasıl oluşturacağınızı zaten öğreneceksiniz.
Resim 1
1. HTML belge yapısı
HTML dosyalarının uzantısı var .htm veya .html.
Etiketler genellikle eşleştirilir: başlangıç ve bitiş etiketleri. İlk -<>, son, Örneğin
Ve
Eşleştirilmiş etikete de denir konteyner .
Bazı etiketlerin gerekli etiket çifti yoktur, bu etikete denir Bekar
. Böyle bir etiket, örneğin kapanış köşeli parantezinden önce bir sağa eğik çizgi yazılarak kapatılır.
Html belgesinin yapısı şuna benzer (Şekil 2).
şekil 2
Şekil 2'deki listelemeye ilişkin açıklamalar
İlk satırda DOCTYPE yapısı, web sayfası düzeni standartlarından biri anlamına gelir.
Etiketler arasında
Ve
başlık kısmını içerir. Bir tasarım içerir
Figür 3
Kayıt harflerin tarayıcıda doğru şekilde görüntülenmesini sağlayan Kiril kodlaması anlamına gelir. Kodlama belirtilmezse yazı tipleri bazen aşağıdaki gibi görüntülenebilir (Şekil 4)
Şekil 4
Kodlama eklendikten sonra aynı sayfa (Şekil 5)
Şekil 5
Not: kodlama yerine karakter kümesi = "windows-1251" kodlamayı kullanabilirsiniz karakter kümesi = " utf -8" Dünyada var olan tüm karakterlerin içinde mevcut olması nedeniyle çok dilli siteler oluşturmanıza olanak tanır. Bu durumda Not Defteri++ düzen ve kaydetmeden önce gereklidirHTML- üst menüden dosya seç Kodlamalar - Kodlama UTF -8 olmadan ürün reçetesi (BOM olmadan UTF-8)
Bu bilgi ilk belgeyi oluşturmak için yeterlidir.
Alıştırma 1
1. Bir klasör oluşturun ve adlandırın Benimev. Tüm klasör ve dosyaların adları Latin küçük harflerle oluşturulmalıdır, Rusça isimler kullanılamaz. İsimleri kısa ve anlamlı tutun.
Web sayfasının kodunu Notepad'e yazacağız. Windows ile birlikte gelen Not Defteri'ni değil, daha "gelişmiş" olanı, örneğin Notepad++'ı kullanmak daha iyidir. Dağıtım Not Defteri++ klasörde CD/dağıtım.
2. Notepad++'ı açın. Bunu öğedeki menüde yapmak için ANSI kodlamasının ayarlandığından emin olun. Kodlamalar, pozisyonu ayarla ANSI'ye kodla.
3. Şekil 2'deki listedeki kodu Notepad++'a yazın.
Şekil 2'deki listede yer alan kod, gelecekte HTML belgesinin yapısını her seferinde yazmak zorunda kalmamamız için bizim için bir şablon görevi görecektir. DOCTYPE yapısını buradan kopyalayın (ezberlemenize veya ezberlemenize gerek yok).
4. Dosyayı farklı kaydedin şablon.html klasörde benim evim, sahadayken Dosya tipi düzenlemek Her türlü(Şekil 6), aksi halde web sayfanız tarayıcıda açılmayacaktır.
Şekil 6
5. Kaydettikten sonra çalıştırın şablon. HTMLçift tıklama. Sonuç olarak dosyanız şu şekilde görünecektir (Şekil 7).
Şekil 7
Yukarıdaki şekildeki gibi sonuç alamıyorsanız büyük ihtimalle kodda bir hata var demektir. Bir yanlış karakter yeterlidir ve web sayfası doğru şekilde görüntülenmez. Şekil 2'deki listeyle kodu tekrar kontrol edin.
6. Klasörün içi benim evim bir klasör oluştur halk_ HTML. Bu ad genellikle sitenin gerçek barındırmada barındırıldığında depolandığı klasördür (bu klasöre www de denilebilir).
7. Dosyayı kaydedin şablon. HTML klasörde halk_ HTML yeni bir isimle ana. HTML.
8. Bir klasörden CD/ html_css_1 dosyayı aç text_main.txt Notepad++'da aynı adla kaydedilen dosyayı açın. ana. HTML
9. Dosyadaki tüm metni kopyalayın text_main.txt ve dosyaya yapıştırın ana. HTML“Web sayfası içeriği” ifadesi yerine. Etikette
10. Değişiklikleri kaydedin ve dosyayı önizleyin ana. HTML tarayıcıda. Biçimlendirilmemiş metni göreceksiniz. Tarayıcı kaynak metindeki satır sonlarını bile yapmaz (Şekil 8).
Şekil 8
2. Biçimlendirmeağ-etiketlenen sayfalarHTML
Bu HTML Sayfası Nasıl Oluşturulur eğitimi, bir web sayfasını işaretlemek için kullanılan temel etiketleri kapsar.
Etiketler bir web sayfasının metnini biçimlendirmek için tasarlanmıştır. Etiketlerin listesi klasörde daha ayrıntılı olarak görüntülenebilir CD/DizinHTML rehberde html401_ru.chm(üst menü öğesinde elementler).
Bazı etiketlere bakalım.
Elementler H 1, H 2, H 3, H 4, H 5, H 6
Belgenin gövdesinin yapılandırılması öğenin içinde yapılır < vücut> h1, h2, h3, h4, h5, h6 öğeleri tarafından belirtilen başlıkları kullanarak.
Başlık elemanları eşleştirilmiştir, dolayısıyla bir açıklığa sahip olmaları gerekir < H1> ve kapanış H1> Etiketler.
HTML'de altı başlık düzeyi vardır: h1 (en üstte), h2, h3, h4, h5 ve h6 (en altta). Başlık öğelerinin işlevselliği, metin düzenleyicilerdeki normal başlık stillerine benzer.
Bu altı etiketin etkileri aşağıdaki şekillerde gösterilmektedir. Tek bir resimde kaynak(Şekil 9), diğer yandan tarayıcıdaki görünüm (Şekil 10).
Şekil 9
Şekil 10
Metni paragraflara bölme
Etiket < P> paragrafın başlangıcını belirler ve paragrafın üstüne bir boşluk (bu paragrafı öncekinden ayırmak için bir girinti) ekler.
Satır sonunu zorla
Etiket
paragrafın kalan metnini sonraki satıra kaydırmanıza olanak tanır. Bu eşlenmemiş bir etikettir ve paragraf etiketinden farklı olarak satırlar arasındaki boşluğu artırmaz.
Alıştırma 2
1. Etiketleri kullanarak “Mimari projeler kataloğu” başlığını biçimlendirin
Ve
.2. Etiketleri kullanarak "Gelecekteki eviniz için projeler" başlığını biçimlendirin
Ve
.3. “Ev Projeleri” ve “Ev Alanları” başlıklarını etiketleri kullanarak biçimlendirin
Ve
.4. Ana metni bir etiket kullanarak paragraflara bölün
İlk iki paragrafın içinde etiketini kullanın
bir çizgiyi kırmak için. Sonuç olarak kodunuz şu şekilde görünmelidir (Şekil 11).
5. Sonucu bir tarayıcıda görüntüleyin.
Şekil 11
Madde işaretli ve numaralı listeler
HTML araçlarını kullanarak herhangi bir liste oluşturabilirsiniz: numaralı (sayısal ve alfabetik) ve madde işaretli farklı şekiller işaretleyiciler.
Etiket < ul>…ul> madde işaretli bir liste oluşturur.
Etiket < ol>…ol> numaralı bir liste oluşturur.
Tek liste öğesi aşağıdaki gibi
- , ve
- Şekil 13'te gösterilen kodu yeni bir dosyaya uygulayın.
- Dosyayı bir klasöre kaydedin benim evim adı altında spiker_ vloj. HTML. Şekil 2'deki sonuç. 13
- mutlak;
- akraba.
- klasör_2 klasörüne girin,
- daha sonra klasör_1 klasörüne girin,
- daha sonra görüntüyü ekleyin.
- klasör_1 klasöründen çık,
- klasör_2 klasöründen çık,
- bir resim ekleyin.
- klasör_1 klasöründen çık,
- klasör_2 klasöründen çık,
- klasör_3 klasörüne gidin,
- klasör_4 klasörüne gidin,
- resim ekle pic.jpg
- klasör_1 klasöründen çık,
- klasör_2 klasöründen çık,
- klasör_3 klasöründen çık,
- klasör_4 klasörüne girin,
- resim pic.jpg ekleyin.
- şablon.html
- ana.html
- spisok_vlozh.html
- klasörün içindebenim evimbir klasör olmalıhalk_ HTMLgelecekteki sitenin dosyalarıyla
- göreli adreslemeye ilişkin yedi örnek ve kontrol örnekleri olarak iki örnek pratik görev 14
- anahtar kelimeler ve sayfa açıklaması;
- diğer dosyalara (*.css ve *.js) bağlantılar.
- etiket kullanılarak oluşturuldu <
li>
.
Alıştırma 3
1. “Ev Projeleri” başlığı altında numaralandırılmış bir liste oluşturun.
2. “Ev Alanları” başlığı altında madde işaretli bir liste oluşturun. Kodunuz şu şekilde görünecektir (Şekil 12).
Şekil 12
3. Sayfayı bir tarayıcıda görüntüleyin.
Listeler farklı işaretleyiciler kullanılarak birbirinin içine yerleştirilebilir.
Şekil 2'de iç içe geçmiş bir liste örneği gösterilmektedir. 13
Alıştırma 4
Şekil 13. İç içe geçmiş liste örneği
Yazı tipi stilleri
Etiket … - metni kalın yazı tipinde görüntülemenize olanak tanır.
Etiket … - metni italik olarak 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 , ancak altı çizili değil.
Ve bu durumda metin yazılacak kalın altı çizili italik .
Abonelikler ve üst simgeler
Etiket < alt> Ve alt> metni normal metnin yarım satır altına indirmenize olanak tanır.
Etiket < akşam yemeği> Ve akşam yemeği> metni normal metnin yarım satır üstüne çıkarmanıza olanak tanır. Bu etiketler arasında yer alan metin, normal metinden daha küçük bir yazı tipinde görünecektir.
Alıştırma 5
1. İlk paragrafta myhouse.ru adını kalın harflerle biçimlendirin (Şekil 14).
Şekil 14
2. İkinci paragraftaki “Projelerin %95'inden fazlası” ifadesini altı çizili italik olarak biçimlendirin (Şekil 15).
Şekil 15
3. Metrekarenin kullanıldığı yerlerde üst simgeleri biçimlendirin (Şekil 16).
Şekil 16
4. Dosyayı kaydedin. Tarayıcı aracılığıyla görüntüleyin. Web sayfası şu şekilde görünmelidir (Şekil 17).
Şekil 17
3. Resim ekleme
HTML Sayfası Nasıl Oluşturulur makalemizde, görsellerin bir web sayfasına nasıl yerleştirileceğine bakacağız.
Etiket, resim eklemek için kullanılır .
Bu etiket için gerekli özellik: kaynak(İngilizce SouRCe'den - kaynak). Gidilecek yolu belirler grafik dosyası, resminin web sayfasında görüntülenmesi gereken.
Bir resim eklemek için şu komutu kullanın: 
Örneğin: "
resim1.jpg"
alt="Resim" />
!}
Alt özelliği, bir web sayfasını devre dışı bırakılmış resimler modunda görüntülerken, eksik resim yerine alt özelliğinde yazılan bir yazının görünmesi için gereklidir. Ayrıca her zaman alternatif metinlerin kullanılması da önerilir çünkü arama motorları görselleri ararken bunları anahtar kelime olarak analiz eder.
Grafik dosyaları şu formatta olabilir: jpg, gif, png ve her zaman renkli modeldeRGB.
Alıştırma 6
1. Ev alanları listesinden sonra yazlık projelerinin görsellerini web sayfasına ekleyin proje_1.jpg Ve proje_2.jpg klasörden CD/html_css_1 . Bunun için öncelikle bu iki görseli main.html dosyasının bulunduğu klasöre kopyalayın. Resim ekleme kodu şu şekilde görünecektir (Şekil 18).
Şekil 18
2. Sonucu tarayıcıda görüntüleyin (Şekil 19).
Şekil 19
Temel olarak etiket kullanma prensibiHTMLaçık olmalı. Aynı prensibe göre kullanılırlar: Etiket kapsa, o zaman bir açılış ve kapanış etiketi vardır. Etiket tek ise kapanış etiketi yoktur; bu durumda sağ eğik çizgi, örneğin kapanış köşeli parantezinden önce yazılır.< br/>. Etiket ister kapsayıcı ister tekli olsun, her zaman spesifikasyona bakabilirsinizhtml401_ru.chm “öğeler” bölümünde.
4. Site içerisinde adresleme
İlk dersimiz olan HTML Sayfası Nasıl Oluşturulur'da HTML'de adresleme kavramlarını inceleyeceğiz.
Görselleri sitenin farklı klasörlerinde bulunabilecek bir html dosyasına yerleştirmeniz gerektiğinde adresleme seçeneklerini düşünelim.
İki tür adresleme vardır:
Mutlak adresleme (bilgisayar sürücü adlarını kullanarak) kullanılmamış(Şekil 20)
Şekil 20
Kullanılmış göreceli adresleme - tek bir sunucudaki bir belge veya bir dizi belge içinde adresleme. Bir sitedeki bir dosyaya başvurmak için, tarayıcıya istenen dosyaya ulaşmak için hangi yolu izlemesi gerektiğini söylemeniz gerekir.
|
örnek 1 Resim, HTML belgesiyle aynı klasörde bulunur (Şekil 21). Yani, resim ve HTML dosyası aynı seviyededir. dosya sistemi ve HTML belgesi görüntüyü hemen ekleyebilir. Bu durumda bir web sayfasına resim eklemek şu şekilde görünecektir.
Şekil 21 Pratik görev7 Örnek 1'i uygulayın (bir klasör, bir doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim |
|
Örnek 2 Resim resim. jpg klasörde dosya_1 . HTML belgesi, klasör_1'in dışında bulunuyor. Onlar. Sitenin dosya sisteminde HTML belgesi görselden bir seviye daha yüksekte bulunur (Şekil 22). Folder_1 klasörüne girmeniz ve ardından resmi eklemeniz gerekir.
Şekil 22 Pratik görev8 Örnek 2'yi uygulayın (bir klasör, bir doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. |
|
Örnek 3 Resim resim. jpg klasörde dosya_1 , bu da klasörde yer alır dosya_2 . HTML belgesi bu klasörlerin dışında bulunur (Şekil 23). Böylece HTML belgesi görüntüden iki seviye daha yüksektir. Gerekli:
Şekil 23 Pratik görev9 Örnek 3'ü uygulayın (klasörler oluşturun, doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. |
|
Örnek 4 dosya_1 . Resim, klasörün_1 dışında bulunuyor. Onlar. HTML belgesi görselden bir seviye aşağıda bulunur (Şekil 24). Klasör_1'den çıkmanız ve ardından görüntüyü eklemeniz gerekir. Bir klasörden ayrılmak yapıyla belirtilir ../ (iki nokta ve sağa eğik çizgi).
Şekil 24 Pratik görev10 Örnek 4'ü uygulayın (bir klasör, bir doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. |
|
Örnek 5 HTML belgesi klasörde bulunur dosya_1 , bu da klasörde bulunur dosya_2 . Resim bu klasörlerin dışındadır. Böylece HTML belgesi görselden iki seviye daha aşağıda konumlandırılır (Şekil 25). Gerekli: İki kez çıkmanız gerektiğinden tasarım ../ iki kez tekrarlandı.
Şekil 25 Alıştırma 11 Örnek 5'i uygulayın (klasörler oluşturun, doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. |
|
Örnek 6 (Şekil 26) Gerekli:
Şekil 26 Alıştırma 12 Örnek 6'yı uygulayın (klasörler oluşturun, doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. |
|
Örnek 7 (Şekil 27) Gerekli: Üç kez çıkmanız gerektiğinden tasarım ../ üç kez tekrarlandı.
Şekil 27 Alıştırma 13 Örnek 7'yi uygulayın (klasörler oluşturun, doc.html dosyası oluşturun, herhangi bir görüntüyü alın). Resim doc.html web sayfasına eklenmelidir. Böylece kaç kez çıkmanız gerekse de ../ yapısını defalarca koyuyoruz ve girersek yol boyunca karşılaşılan klasörlerin adlarını listeliyoruz. |
/
>
/
>
/
>
Alıştırma 14
1. Bir html belgesi oluşturun ve içine resmin yolu aşağıdaki gibi olacak şekilde bir resim ekleyin.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Bir html belgesine resim ekleme konusunda kendi örneğinizi geliştirin; çıkış klasörlerden ve giriş klasörlere. Örnek yukarıdaki örneklerden farklı olmalıdır.
Bu konuyu tamamladıktan sonra aşağıdaki dosyaları oluşturmuş olmalısınız:
Birçok dil icat edildi ancak HTML en özel ve en popüler dillerden biridir. Programlamadaki diğer birçok önemli gelişme bununla ilişkilidir. Geliştiricinin zihni işaretleme dili - HyperText Markup Language (HTML) hakkında bilgi sahibi olduğunda pek çok şey mümkün olur.
Aslında HTML'de karmaşık hiçbir şey yoktur ve birkaç dakika içinde programlamadan ve internetten uzak olan herkes Not Defteri'nde bir HTML sayfası oluşturabilecektir. Dikkate değer bir örnek, gerçekten herkesin erişebileceği basitlik.
Genel açıklama
Bir HTML dosyası sitenin bir sayfasıdır, ancak bu tartışılabilir, ancak bir dosyanın bir sayfayı oluşturduğu gerçeği başlangıçta açıktır.
Bir HTML dosyası, dosya türünün HTML olduğunu belirten DOCTYPE başlığıyla başlar. Tüm sayfa öğeleri (etiketler) köşeli parantez içinde gösterilir. Her bir çift ("<» и «>") bir HTML etiketi içerir. Genellikle HTML etiketleri çiftler halinde gelir, yani her "etiket" için bir "/etiket" bulunur. Her ikisi de köşeli parantez içine alınmıştır. En popüler olanı “br/” olan bir sonraki satıra geçiş olan tek etiketler vardır.
Dosyadaki en büyük etiket HTML'nin kendisidir ve yalnızca iki etiket içerir: HEAD ve BODY. İlkinde çeşitli açıklamalar yapılır, sayfada ihtiyaç duyulan, mevcut olabilecek diğer dosyalara bağlantılar gösterilir. PHP betikleri ve JavaScript. İkincisi sayfanın içeriğini kaydeder. Ayrıca etiketler ve komut dosyaları şeklinde.
Basit HTML sayfası
Makalede böyle bir sayfa oluşturmanın bir örneği aşağıda verilmiştir. Şimdi dikkatlice bakalım.
BAŞ bölümü
Ana amaç - Genel açıklama sayfalar ve genel komut dosyaları, ikincisi oldukça göreceli bir kavram olmasına rağmen. Genellikle burada yalnızca iki şeye büyük önem verilir:
Sayfa içeriğini görüntülemek için bu bölümün içeriği yalnızca dolaylı olarak önemlidir, çünkü şunu belirtir: diğer dosyaların bir yerinde, diğer dillerdeki etiketler ve komut dosyaları için CSS kuralları vardır.
Bir HTML sayfası, ziyaretçi fareyi sayfanın açık olduğu sekmeye getirdiğinde görüntülenen bir sayfaya sahiptir. Bu önemli nokta, çünkü sayfayı önemli ölçüde daha sunulabilir, söylemesi daha kolay, okunabilir metinle imzalanmış hale getirir.
META etiketleri genel olarak İnternet programlamada önemlidir, ancak Not Defteri'nde bir HTML sayfası oluşturmanız gerektiğinde, örneği gereksiz yapılarla karıştırmanız önerilmez.
Komut dosyası yazmaya HTML bilgisi oluşturulduktan sonra yaklaşılması gerekiyorsa, Basamaklı Stil Sayfaları derhal ele alınmalıdır. CSS dosyaları özellikle tasarım kurallarını içerir HTML etiketleri.
GÖVDE bölümü
Aslında örnek HTML sayfası BODY bölümüdür. Site sayfasının tüm bilgilerinin, tüm içeriğinin bulunduğu yer burasıdır. Tüm bilgiler, örneğin JavaScript kodu veya PHP programlarının eklenmesi gibi etiketler ve komut dosyaları biçiminde sunulur.
Bir tarayıcıdaki HTML web sayfası örneği ile bir metin düzenleyicideki, özellikle Not Defteri'ndeki aynı örneğin aynı şey olmadığını anlamak önemlidir. İlk durumda, tüm komut dosyalarının yürütüldüğü hazır bir HTML metnimiz var. Örneğin PHP üzerine düşeni yaptı ve kendi kodu yerine gerekli etiketleri doğru yerlerde oluşturdu. Her ne kadar ayrı olarak tartışılacak olsa da, JavaScript de misyonunu yerine getirmiştir.
HTML, komut dosyaları değil, etiketlerdir. Sonuçta tarayıcı yalnızca sayfanın içeriğini, yalnızca etiketlerini görüntüler. Orada PHP kodu yok.
JavaScript özel bir konumdadır, endişesi sayfayı yalnızca yükleme (aşırı yükleme) sırasında değil, aynı zamanda sayfanın ziyaretçinin tarayıcısında olduğu ve onu incelediği anlarda da sunmaktır.
Basit bir örnek (yalnızca GÖVDE bölümü) aşağıda gösterilmektedir.
Ve ziyaretçinin tarayıcısında şöyle görünür:
Kod, tarayıcının görüntüleyeceği öğelerin nasıl görünmesi gerektiğini belirtmedi. Görünen tüm stiller CSS kurallarındadır. Bu durumda, bağlantılı olan Mcss/scPhpWordRW.css dosyasında (HTML sayfasının ilk örneğine bakın).
HTML'den farklı olarak, CSS teması daha basittir, çok erişilebilir kurallar vardır ve HTML sayfası oluşturma örneği not defterinden başka bir şey gerektirmediğinde sayıları azdır. Anında ustalaşmak için her şeye çok erişilebilir:
Bu, scLogo_vDoc etiketinin ne kadar basit bir şekilde tanımlandığını gösterir ve bu açıklama, normal durumunda etiketin vDoc-logo.png görüntüsünü görüntüleyeceği ve fare bunun üzerine geldiğinde vDoc-logo-h.png görüntüleneceği şekildedir.
HTML açıklamalarının yapısı
Dil herhangi bir yapıyı ima etmez ve buradaki sözdizimi kavramı oldukça görecelidir. Değişken yok ama olasılıklar çok. Hypertext'in temel temeli, mutlaka bir adı olan bir öğenin (etiketin) bulunmasıdır.
Eşleştirilmiş etiket durumunda ad, adın kendisinden (tagName) ve köşeli ayraçlardan ("<» + tagName +«>"), Eğer Hakkında konuşuyoruz etiketin başlangıcı hakkında ve ""Eğer sonu kaydedilirse.
Nitelikleri açıklayan örnek bir HTML sayfası metnin altında yer almaktadır.
Bir etiketin nitelikleri olabilir; bu durumda etiket adından sonra, ">" kapanış köşeli parantezinden önce bir boşluk bırakılarak yerleştirilirler. Nitelikler, eğer bir etikette mevcutsa, yalnızca etiketin başına yazılır. Bir etiketin içeriği, etiketin başlangıcı ile sonu arasında kalan kısım olarak kabul edilir.
HTML, blok ve satır içi öğeleri tanımlamanıza olanak tanır. Birincisi, tarayıcı penceresinde belirli bir alanı kaplar, HTML sayfası görüntüleme alanında mutlak olarak yani istenilen yere konumlandırılabilir ve belirli bir boyuta sahiptir.
Satır içi öğeler genellikle tek bir iş parçacığında görüntülenir, yani sayfa dosyasında belirtildiği gibi ekranda görüntülenirler. Sayfa yüklendiğinde genel akışın görüntüsü etkilenebilir. Blok öğelerinin yerleşimi, görünürlüğü ve diğer özellikleri herhangi bir zamanda JavaScript kodu aracılığıyla etkilenebilir.
HTML, basit öğelerin yanı sıra tablo ve formların açıklamalarını da sunar. Bu unsurlar "gündelik web sitesi oluşturmada" büyük talep görmektedir.
Tablo açıklaması: TABLE, TR, TD etiketleri
TABLE etiketini kullanarak bir tablo oluşturabilir, her satırda belirli sayıda TR satırı ve belirli sayıda TD hücresi belirtebilirsiniz. Her zamanki tablo düzeninden farklı olarak, HTML işaretlemesinin özellikleri nedeniyle tablo düzeni bu bildirimle sınırlıdır, bu nedenle geliştirici, tüm satırlardaki sütun sayısının aynı olduğu dikdörtgen bir tabloya sahip olmak istiyorsa, o zaman yapması gerekir. bunu kendisi takip etsin.
HTML'nin temel konumu, belirtilen her şeyi yapmak, ancak anlaşılmayan hiçbir şeyi yapmamaktır. Bazı durumlarda tablonun her satırındaki sütun sayısı o kadar önemli değildir, ancak hücreleri dikey veya yatay olarak birleştirmeniz gerekiyorsa her şeyi çok dikkatli saymanız gerekecektir.
Basit bir tabloyu açıklayan örnek bir HTML sayfası makalede açıkça gösterilmiştir.
Burada üç satıra üç sütundan oluşan bir tablo gösterilmektedir ve ilk satırda TD etiketi yerine TH etiketi (sütun başlığı) kullanılmıştır. Bu iki etiket çok farklı değil ancak tablonun ilk satırını ayırt etmek için ilkini kullanmak oldukça mümkün ve CSS'de TH'ye kendi stilinizi ekleyerek onu diğer TD'lerden ayırabilirsiniz.
Form açıklaması: FORM, GİRİŞ etiketleri
Formlar HTML etiketlerinin en popüler parçasıdır. Formları kullanarak bilgi aktarabilirsiniz. Aslında sayfanın kendisi bilginin çıktısıdır ama form onun girdisidir.
Basit bir formu açıklayan örnek HTML sayfası:
Formları kullanmak için daha birçok seçenek vardır, ancak bunlar ana olasılıklardır. Kullanıcı tarafından girilen verileri analiz etmek için giriş alanlarını belirleyebilir, onlara bir tasarım ve işleyiciler atayabilirsiniz. Sayfadan gizli alanları belirleyebilir ve arka plan bilgilerini iletebilirsiniz. Bilgi iletme sürecini başlatacak olana tıklayarak bilgi iletmek için düğmeler belirleyebilirsiniz.
HTML'yi kullanma
Köprü metni dilini bilmek, İnternet programlama alanındaki herhangi bir uzmanlıktaki bir iştir, ancak PHP veya JavaScript'te programlar yazmanız gerekiyorsa, o zaman HTML + CSS'yi mükemmel bir şekilde bilmeniz gerekir.
PHP dili önceki örnekte belirtilmişti. PHP sunucuda çalışır, bu nedenle bu formun bulunduğu sayfa, alanlar doldurulmuş olarak sunucudan tarayıcıya uçtu. Özellikle, INPUT etiketinde (onblur olay işleyicisi) bahsedilen TestOnBlur işlevi, tüm parametreleri metin alanları olarak aldı.
JavaScript tarayıcıda çalışır ve düğmenin verileri sunucuya geri göndermesi ve düzgün çalışması için, yani yapının: onclick=jQuery("#to").val("cart") olması gerekir. sadece jQuery'nin ne olduğu hakkında değil aynı zamanda #to, val, cart'ın ne olduğu hakkında da bir fikir. Daha doğrusu temel HTML etiketlerini bilmeniz ve Genel kurallar onlara CSS stilleri uygulamak.
Bu, İnternet programlama alanındaki herhangi bir uzmanlıktaki niteliklerinizi hızlı bir şekilde geliştirmek için yeterlidir.
Merhaba sevgili blog okuyucuları. Bu makaleyle temelleri öğrenmeye başlayacağız HTML dili.
Muhtemelen zaten İnternet'in ana dilinin olduğunu biliyorsunuzdur. köprü metni biçimlendirme dili HTML (Köprü Metni Biçimlendirme Dili). Bu yazımızda HTML'in temel kavramlarını öğreneceğiz ve basit WEB sayfalarının nasıl oluşturulacağını öğreneceğiz.
En önemli şeyle başlayalım, nasıl çalıştığına bakalım Dünya çapında Ağ— İnternet. Web sayfaları oluşturmak için HTML ile yazılmış dosyalar oluşturur ve bunları bir web sunucusuna yerleştirirsiniz. Bundan sonra ister bilgisayar, ister telefon, ister tablet olsun, internet erişimi olan bir cihaza yüklenen herhangi bir tarayıcı, web sayfalarınızı bulabilir.
Web sunucusu- bu özel bir özelliğe sahip sıradan bir bilgisayardır yazılımİnternet erişimi ile. Web sayfaları, resimler, ses ve video dosyaları için tarayıcılardan gelen istekleri sürekli olarak dinler. Bu kaynaklardan biri için istek alan sunucu, onu arar ve tarayıcıya gönderir.
Tarayıcı- Bu özel programörneğin web sitelerine göz atmak için tasarlanmıştır İnternet Explorer. Bir tarayıcı kullanarak, bağlantılara tıklayarak web sitelerine göz atarsınız. Böyle bir tıklama, tarayıcının HTML sayfası için web sunucusuna istekte bulunmasına, bir yanıt almasına ve sayfayı kendi penceresinde görüntülemesine neden olur. Sayfa görüntülendiğinde HTML dili çalışmaya başlar; tarayıcıya web sayfasının yapısı ve içeriği hakkında her şeyi anlatır. Komutları kullanma - Etiketler HTML, tarayıcıya metin paragraflarının nerede başladığını, metnin hangi kısmının başlık olduğunu ve tabloların, hatta resimlerin nereye ekleneceğini söyler. Ve etiketler köşeli parantez içindeki kelimelerdir, örneğin
,
