Bir HTML sayfasına örnek ve oluşturma temelleri

Birçok dil icat edilmiştir, ancak HTML diliBir dizi özel ve en çok talep edilen gruba ait. Programlamadaki diğer kilit girişimlerin birçoğu onunla bağlantılıdır. İşaretleme dili bilgisi üreticinin kafasında mevcut olduğunda çokça kullanılabilir - HyperText Markup Language (HTML).

Özünde, HTML'de karmaşık bir şey yoktur veprogramlamadan en uzak olan ve İnternet kullanıcısı olan birkaç dakika, bir dizüstü bilgisayarda bir HTML sayfası oluşturacak. Dikkat çekmeyi hak eden bir örnek basitliktir; bu da herkese gerçekten erişilebilir durumdadır.

Genel açıklama

HTML dosyasý sitenin bir sayfasýdýr, ancak iddia edilebilir, ancak bir dosyanın bir sayfa olması anlaşılabilirdir.

HTML dosyası DOCTYPE başlığı ile başlar;bu dosya türünün HTML olduğunu gösterir. Sayfanın tüm öğeleri (etiketler) köşeli parantez içinde gösterilir. Her bir çifti ("<" ve ">") bir HTML etiketi içerir. Tipik olarak, HTML etiketleri eşleştirilir, diğer bir deyişle, her "etiket" için "/ etiket" bulunur. Her ikisi de köşeli parantez içine alınır. En popüler "br /" bir sonraki satıra geçiş olan tek etiketler var.

Dosyadaki en büyük etiket HTML'in kendisidir;hangi yalnızca iki etiketi içerir: HEAD ve BODY. İlk durumda, farklı şartname mevcut PHP ve JavaScript komut olabilir diğer ilgili sayfa dosyalara bağlar göstergesidir. İkincisinde, sayfanın içeriği kaydedilir. Ayrıca etiketler ve senaryolar şeklinde.

Basit HTML sayfası

Böyle bir sayfa yaratmanın bir örneği, makalede aşağıda listelenmiştir. Dikkatle düşün.

Bölüm HEAD

HEAD etiketinin ana amacı, sayfanın ve genel komut dosyalarının genel bir açıklamasıdır, ancak ikincisi nispeten görece bir kavramdır. Genellikle burada sadece iki şey önemlidir:

• anahtar kelimeleri ve sayfanın açıklamasını;
• diğer dosyalara (* .css ve * .js) bağlantılar.

Sayfa içeriğini görüntülemek için, bu bölümün içeriği yalnızca dolaylı bir anlam taşır; çünkü başka dosyalardaki bir yerlerde etiketlerin ve diğer dillerin komut dosyalarının CSS kuralları vardır.

HTML sayfası bir başlık (TITLE) içeriyorZiyaretçi, farenin sayfanın bulunduğu sekmeye getirildiğinde görüntülenir. Bu önemli bir noktadır, çünkü sayfanın okunabilir metni ile imzalanması, söylemesi daha kolay, daha anlaşılabilir bir yapıdadır.

META etiketleri, genel olarak İnternet programlamasında önemlidir, ancak bir dizüstü bilgisayarda bir HTML sayfası oluşturmak istiyorsanız, bu örnek gereksiz yapılarla karmaşık hale getirmek için istenmemektedir.

Linkler LINK ve SCRIPTdikkat. İlki, CSS stil sayfasının bulunduğu yere, ikincisi JavaScript kod dosyasının bulunduğu yere işaret eder. Pek çok referans olabilir.

Senaryolara yaklaşılması gerekiyorsa, bilgiHTML güçlendirilecek, sonra basamaklı stil sayfalarına dikkat edilmelidir. CSS dosyalarında, özellikle, HTML etiketlerinin tasarımı için kurallar vardır.

BÖLÜM GÖVDE

Aslında, bir HTML sayfası örneği budurbölüm GÖVDE. Buradaki tüm bilgiler, sitenin tüm içeriği sayfasını içermektedir. Tüm bilgiler, JavaScript kodunu veya PHP programlarının parçalarını eklemek gibi etiketler ve komut dosyaları şeklinde sunulmaktadır.

HTML web sayfasının örneğinin şu şekilde olduğunu anlamak önemlidir:tarayıcıyı ve aynı örneği bir metin editöründe, özellikle not defterinde kullandığınızda, bu aynı şey değildir. İlk durumda tamamlanmış HTML metnine sahibiz, burada tüm komut dosyaları çalıştırılır. Örneğin, PHP kendi görevinde çalıştı ve doğru yerde kod yerine gerekli etiketleri üretti. JavaScript, görevini yine de yerine getirdi, ancak yine de bu konuda ayrı bir konuşma yapıldı.

HTML bir etiket değil, senaryo değildir. Sonuçta, tarayıcı yalnızca sayfanın içeriğini, yalnızca etiketlerini görüntüler. Orada bir PHP kodu yok.

JavaScript özel bir konumdadır, endişesi, yalnızca yükleme sırasında (aşırı yükleme) değil, aynı zamanda sayfa ziyaretçinin tarayıcısında olduğunda ve kullanıcı incelemekte olduğu zaman sayfaya hizmet etmektir.

Kod HTML sayfası (sadece VÜCUT bölümü) basit bir örnek aşağıda gösterilmiştir.

Ve ziyaretçinin tarayıcısında, aşağıda gösterilen gibi görünüyor.

Kod, nasıl görüneceğini belirtmediTarayıcıda görüntülenen öğeler. Görünür tasarımların tümü CSS kurallarında. Bu durumda, başvurulan Mcss / scPhpWordRW.css dosyasında (bir HTML sayfasının ilk örneğine bakın).

HTML'den farklı olarak, CSS teması daha basittir.Çok uygun fiyatlı kurallar ve sayıları küçüktür, bir HTML sayfası oluşturma örneği not defteri dışında bir şey gerektirmez. Her şey anında mastering için erişilebilir:

Bu, bir etiketin nasıl tarif edildiğini gösterir.scLogo_vDoc ve bu açıklama, normal durumda etiketin vDoc-logo.png görüntüsünü görüntülediği ve farenin üzerine geldiği zaman, vDoc-logo-h.png'nin görüntüleneceği şekildedir.

HTML Açıklama Yapısı

Dil herhangi bir yapıya işaret etmez vesözdizimi kavramı çok göreceli. Değişken yoktur, ancak birçok olasılık vardır. Hipermetin temel temeli, mutlaka bir adı olan bir eleman (etiket) olmasıdır.

etiketteki başında ve söz ediyoruz if ( «<» + tagName + «>») özel isimler (tagName) ve açı parantez oluşan davanın adı, etiket çifti, «</» + tagName + «>» kaydedildi eğer onun sonu.

Niteliklerini açıklayan bir HTML sayfasının bir örneği metinde aşağıda yer almaktadır.

Bir etiket özniteliklere sahip olabilir, sonra yerleştiriliretiket adından sonra ">" kapanış açısı braketine bir boşluk. Nitelikler, bir etikete sahiplerse, yalnızca etiketin başında yazılır. Etiketin içeriği, etiketin başı ve sonu arasında olan şeydir.

HTML açıklamalarının genel içeriği

HTML, bloğu ve küçük harfleri tanımlamanıza olanak tanıröğeleri. İlk olarak tarayıcı penceresinde belirli bir alanı kaplayan, tam olarak, yani HTML sayfasının görüntüleme alanında doğru yere yerleştirilebilir ve belirli bir boyuta sahip olabilir.

Satır öğeleri genellikle görüntülenirbir iş parçacığı, yani sayfa dosyasında belirtildiği gibi görüntülenir ve görüntülenir. Toplam akış gösterimi, sayfa yüklendiğinde etkilenebilir. Blok öğelerin yerleşimi, görünürlüğü ve diğer özellikleri, JavaScript kodu aracılığıyla herhangi bir zamanda etkilenebilir.

Basit öğelere ek olarak, HTML tablo ve formların açıklamasını sunar. Bu elemanlar "günlük site binasında" çok talep görüyor.

Masanın açıklaması: Etiketler TABLO, TR, TD

TABLE etiketini kullanarak bir tablo oluşturabilirsiniz.belirli sayıda satır TR'yi ve her satırda bir takım TD hücrelerini belirtir. Her zamanki tablo yapısının aksine, HTML biçimlendirmesinin özellikleri nedeniyle, elektronik tablo organizasyonu bu bildirimle sınırlıdır, bu nedenle geliştirici, tüm satırlardaki sütunların sayısının aynı olduğu bir dikdörtgen tabloya sahip olmak istiyorsa, o zaman bunu kendisi izlemelidir.

HTML'nin temel konumu: Belirtilen her şeyi yapın, ama anlaşılmayan hiçbir şey yapmayın. Bazı durumlarda, tablonun her satırındaki sütun sayısı çok önemli değildir, ancak hücreleri dikey veya yatay olarak birleştirmeniz gerekiyorsa, her şeyi çok dikkatli saymanız gerekir.

Makalede, basit bir tabloyu açıklayan bir HTML sayfasının bir örneği açıkça görülmektedir.

Burada üç başına üç sıra büyüklüğünde bir tablo var.sütunlar ve ilk satırda TD etiketi yerine, TH etiketi kullanılmıştır - sütun başlığı. Bu iki etiket arasında özel bir fark yoktur, ancak ilk satırı tabloyu ayırt etmek için kullanabilirsiniz ve CSS'den TH'ye kendi stilinizi ekleyebilir ve diğer TD'lerden ayırt edebilirsiniz.

Form açıklaması: FORM, INPUT etiketleri

Formlar, HTML etiketlerinin en çok istenen kısmıdır. Formları kullanarak bilgi aktarımı yapabilirsiniz. Aslında, sayfanın kendisi bilgi çıktısıdır, ancak form onun girdisidir.

Basit bir form açıklamasına sahip bir HTML sayfası örneği:

Formların kullanımı çok daha fazla amaana olasılıklar aşağıdaki gibidir. Giriş alanlarını belirtebilir, kullanıcı girdisini analiz etmek için tasarım ve işleyicileri atayabilirsiniz. Gizli alanları belirtebilir ve sayfadan arka plan bilgileri gönderebilirsiniz. Bilgilerin aktarımını başlatan bilgileri tıklatarak bilgi aktarma düğmelerini belirtebilirsiniz.

HTML kullanma

Hipermetin dilini bilmek vazgeçilmez bir durumdurİnternet programlama alanında herhangi bir uzmanlık üzerinde çalışın, ancak PHP veya JavaScript programlarını yazmanız gerekiyorsa, HTML + CSS'yi mükemmel bir şekilde bilmeniz gerekir.

PHP dili önceki örnekte gösterildi. PHP sunucuda çalışır, çünkü bu formdaki sayfa sunucudan tarayıcıya dolu alanlarla akar. Özellikle, INPUT etiketinde (onblur olay işleyicisi) belirtilen TestOnBlur işlevi, tüm parametreleri metin alanları biçiminde almıştır.

Tarayıcı, JavaScript’igeri sunucu anahtarına veri göndermek için düzgün çalıştı, o tasarım :. onclick = jQuery ( "için #") val ( "sepet") kullanarak, sadece hangi jQuery hakkında bir fikir olması gerekir, ama ne için *, val olduğunu , alışveriş sepeti. Daha kesin olarak, ana HTML etiketlerini ve onlara CSS stillerini uygulamak için genel kuralları bilmeniz gerekir.

Bu, İnternet programlama alanında herhangi bir uzmanlık için niteliklerini hızla geliştirmek için yeterlidir.