Özet: Html dili: html programlama sistemleri, dil özellikleri ve sistem uygulaması. Amaç, uygulama programlama örnekleri. HTML, CSS, PHP, JavaScript, SQL - ne ve neden

Reg.ru: etki alanları ve barındırma

Rusya'nın en büyük kayıt şirketi ve barındırma sağlayıcısı.

2 milyondan fazla alan adı hizmette.

Promosyon, etki alanı için posta, iş çözümleri.

Dünya çapında 700 binden fazla müşterimiz şimdiden tercihini yaptı.

*Kaydırmayı duraklatmak için fareyi üzerine getirin.

İleri geri

Bu yazımda web geliştirmede kullanılan ana programlama ve işaretleme dillerinin amacını gözden geçirmek istiyorum.

Bu makaleyi yazma fikri kendiliğinden değil, bana mektuplarla gönderilen ve destek servisinde sorulan, sık sık tekrarlanan soruların etkisi altında doğdu.

Bunlar aşağıdaki sorulardır:

Web sitesi oluşturmak için dilleri hangi sırayla öğrenmelisiniz?
- Hangisi daha zor: JavaScript mi ​​yoksa PHP mi?
SQL'e neden ihtiyaç duyulur?
- CSS sürümleri birbirinden nasıl farklıdır ve hangisi üzerinde çalışılmalıdır?
- Dinamik web siteleri nasıl çalışır?
- PHP ne içindir?
vesaire…

Bu yazıda bu dillerin her birinin web siteleri oluşturmadaki rolünden bahsedeceğim ve eminim ki büyük çoğunluğu Genel Konular kendi kendine düşecek.

Bu materyalde neredeyse hiç kod örneği olmayacak çünkü. başka bir görevle karşı karşıyayız - dillerin her birinin amacı ve web geliştirmedeki yeri hakkında genel bir fikir edinmek.

O zaman hadi gidelim. HTML diliyle başlayacağız.

Dosya uzantıları: .htm, .html

HTML, Köprü Metni Biçimlendirme Dili anlamına gelir. Hiper Metin İşaretleme Dili).

Bu dil web sayfaları oluşturmak için kullanılır. Tarayıcı tarafından yorumlanır (işlenir) ve insan dostu bir biçimde belge olarak görüntülenir.

HTML hemen hemen her web sayfasının ayrılmaz bir parçası ve temelidir. HTML dili öncelikle mantıksal sayfa işaretleme aracı olarak işlev görür.

Sayfanın içeriğine belirli bir anlam kazandırmamızı sağlayan HTML'dir ve bu, sözde etiketler kullanılarak uygulanır.

Etiketler, tarayıcı tarafından belirli bir şekilde yorumlanan özel işaretleyicilerdir. Etiketlerin özü, farklı etiketlerle çevrelenmiş sayfa içeriğinin tarayıcı tarafından farklı şekilde işlenmesidir.

Diyelim ki sayfanın içeriğini bir paragraf etiketine sarabiliriz ve bu içerik tarayıcı tarafından paragraf olarak değerlendirilecektir.

İçeriği bir liste etiketi içine alabiliriz ve ardından içindeki bilgiler bir liste olarak yorumlanır.

İçeriği bir tablo etiketine koyabiliriz ve sonuçta ortaya çıkan belgedeki içerik bir tablo olarak görüntülenecektir, vb.

Başka bir deyişle, işaretleme amaçlı HTML etiketlerinin her biri metin bilgisi, bu bilgiyi anlamlı kılar..

HTML dilinin oldukça uzun bir gelişim geçmişi vardır ve bu süre zarfında önemli değişikliklere uğramıştır. Değişikliklerin çoğu dile yeni etiketlerin eklenmesi ve eski etiketlerin "kullanımdan kaldırılması" ile ilgilidir. Bu yazının yazıldığı sırada HTML 5.1'in geliştirilmesi zaten başlamıştı.

İçin farklı versiyonlar HTML sağlanan çeşitli bildirimler Belge Türü. HTML 4.01 tür bildirimlerinin birkaç örneğine bir göz atalım (şu anda eskimiş sayılabilir).

1. Katı: "eski" veya "onaylanmadı" (kullanımdan kaldırıldı) olarak işaretlenmiş öğeler içermiyor:

2. Geçiş: uyumluluk ve eski HTML sürümlerinden geçiş kolaylığı için eski etiketler içerir:

3. Çerçeveli (Çerçeve Seti): geçişe benzer, ancak aynı zamanda çerçeve kümeleri oluşturmaya yönelik etiketler de içerir:

Yukarıdaki belge türü bildirimleri zamanla giderek geçerliliğini yitirecek ve yerini HTML 5'e bırakacaktır.

HTML 5 yalnızca bir seçenek kullanır DOKTİP(Belge Türü):

Ayrıca XHTML dilinin de olduğunu belirtmek gerekir. Genişletilebilir bir hiper metin işaretleme dilidir. Genişletilebilir Köprü Metni Biçimlendirme Dili). Şu anda geliştirilmesi durdurulmuştur ve HTML kullanılması tavsiye edilmektedir. XHTML'nin yeni sürümleri yayınlanmadı.

Sonuç olarak, HTML araçlarının web sayfalarının yalnızca mantıksal yapısını değil aynı zamanda görünümünün bazı yönlerini de kontrol edebildiğini de belirtmek isterim.

Ancak bu yaklaşım yanlış ve modası geçmiş kabul ediliyor çünkü. görünümü ayarlamak için ayrı bir dil var.

Böylece HTML tamamlanır ve CSS diline geçilir.

Dosya uzantısı: .css

CSS, biçimlendirme dili kullanılarak yazılmış bir belgenin görünümünü tanımlayan bir dildir. Adı İngilizce'den geliyor. Basamaklı Stil Şablonu- Basamaklı Stil Şablonu.

Basit ifadeyle, CSS dili gerekli olanı sağlamak üzere tasarlanmıştır dış görünüş HTML belgeleri.

HTML belgelerinin görünümünü vermek, en popüler olmasına rağmen, CSS dilini kullanmanın yalnızca özel bir durumudur, çünkü. bununla diğer belge türlerinin görünümünü verebilirsiniz: XHTML, SVG Ve XUL. Bunlardan ayrı ayrı bahsetmeyeceğiz çünkü. bu, bu sorunun kapsamı dışındadır.

Yani amaç css oluşturma Bir web sayfasının mantıksal yapısının açıklamasında görünümünden bir ayrım vardı. Bildiğiniz gibi HTML yapıyı tanımlamak için kullanılır, ancak CSS bu mantıksal yapının nasıl görüneceğini açıklayan cevaptır.

Belgenin mantıksal yapısının ve sunumunun ayrı açıklaması, belgenin görünümü üzerinde daha esnek bir kontrole olanak tanır ve belgenin görünümünü tanımlamak için HTML kullanıldığında kaçınılmaz olarak ortaya çıkacak tekrarlayan kod miktarını en aza indirir.

Bir web geliştiricisi, CSS'yi kullanarak sayfa ve sayfanın tek tek öğeleri için farklı yazı tipleri ve yazı tipi boyutları, öğe renkleri, öğelerin birbirlerinden girintileri, sayfadaki ayrı blokların konumu vb. ayarlayabilir.

Elbette, bir HTML belgesinin görünümünü vermek amacıyla CSS'yi kullanmak için, bu belgeyi bir şekilde stillerle ilişkilendirmeniz gerekir; HTML belgesine CSS ile stillendirileceğini "söyleyin".

Bunu yapmanın çeşitli yolları vardır. CSS bağlantıları tarayıcıya stilin sayfanın tamamına veya bazı bireysel öğelerine uygulanması gerektiğini bildiren belgeye.

Stil sayfaları doğrudan uygulanacakları belgenin içine yerleştirilebilir veya uzantılı ayrı bir dosyaya yerleştirilebilir. .css.

Bunu anlamak önemlidir CSS dosyası normal Metin dosyası . Öğenin görünümünü ve sayfadaki konumunu açıklayan özel talimatların yanı sıra yorumları (yazılı talimatlara ilişkin keyfi açıklamalar) içerir.

CSS stilleri bir sayfaya dört şekilde eklenebilir (veya gömülebilir):

1. Stil sayfası ayrı bir dosyadaysa, özel bir etiket kullanılarak belgeye bağlanır. bağlantı, bu belgede etiketinin içinde yer almalıdır KAFA:

Öznitelikte href aynı zamanda dahil edilen stil dosyasının yolu da gösterilir.

2. Stiller ayrı bir dosyadaysa ikinci bağlantı yöntemi de kullanılır. Bu direktifi kullanır @içe aktarmak, bu belgede etiketlerin içinde olması gereken stil KAFA):

@import url(style.css);

Burada gördüğünüz gibi, eklenen dosyanın yolu kelimeden sonra parantez içinde belirtilmiştir. URL.

3. Üçüncü yöntem şu durumlarda kullanılır: css stilleri uygulanacağı belgenin içinde yer alır. Bu durumda stiller bu belgede etiketlerin içinde olmalıdır stil(bu da etiketlerin içinde olmalıdır) KAFA):

gövde (renk: kırmızı;)

Yukarıdaki örnekte etiketlerin içinde stilöğenin metin rengini kırmızıya ayarlayan bir stil var vücut internet sayfaları.

4. Dördüncü yöntem ayrıca stil sayfasının belgenin kendisinde açıklandığı durumlarda da geçerlidir. Bu durumda stil, web sayfasının belirli bir öğesi (etiket) için onun özniteliği kullanılarak ayarlanır. stil.

Bu durumda, bu şekilde ayarlanan tüm CSS kuralları yalnızca geçerli etikete (web sayfası öğesi) uygulanacaktır.

Yerleşik stil sayfalarını kullanıyoruz.

Yukarıdaki örnekte, belgedeki metnin belirli bir paragrafı için yazı tipi boyutunu ve rengini ayarladık.

Stilleri dahil etme yollarını özetlersek, ilk iki durumda belgeye harici stil sayfalarının uygulandığını, yöntem 3 ve 4'te ise satır içi (veya dahili) stillerle uğraştığımızı söyleyebiliriz.

Stil kurallarının kendisi çiftler halinde belirtilir "mülk değeri;". Bunu yaparken, bu kurallar sözde seçiciler için geçerlidir. Diyelim ki örnek 3'te bir eleman seçiciyle uğraşıyoruz ( vücut). Mülkiyet renk ve bir değer olarak - kırmızı.

Toplamda 10 tür seçici vardır ve bunların dikkate alınması, bariz nedenlerden ötürü, bu incelemenin kapsamı dışındadır.

Genel prensibi anlamanız önemlidir.

Seçici, stil kurallarının uygulanacağı bir veya bir grup öğeyi belirtir.(bizim durumumuzda bu, etiketin tüm içeriğidir) vücut)

Bir özellik, bir öğeye uygulanacak dönüşüm türü olarak tanımlanabilir (bizim durumumuzda renk yani metin rengi).

Değer doğrudan belirli bir dönüşüm türünün değerini belirler (örneğimizde bu kırmızı yani Kırmızı renk).

Gelişim sürecinde, CSS dili zaten uzun bir yol kat etti ve şu anda bunun birkaç seviyesi var: CSS1, CSS2, CSS2.1, CSS3. 2011 yılı sonundan bu yana CSS4 geliştirildi.

Farklı seviyelerin anlamı, mevcut hataların düzeltilmesi, yeni özelliklerin eklenmesi, seçici mekanizmanın genişletilmesi vb.'dir.

Başka bir deyişle, her bir sonraki seviye izole edilmiş bir şey değil, önceki seviyenin mantıksal bir gelişimi ve devamıdır, web sayfalarının görünümünü daha incelikli ve esnek bir şekilde kontrol etmenize olanak tanır.

Bu, CSS incelememizi sonlandırıyor ve bir sonraki bağlantı olan PHP diline geçiyoruz.

Dosya uzantısı: .php

Zaten HTML ve CSS ile en azından biraz bilgi sahibi olduğunuzda, şu soru hemen ortaya çıkıyor: "Peki sırada ne var?". Harika web siteleri oluşturmak istediniz, ancak HTML kullanarak ve CSS bunu yapamaz ...

Burada tamamen farklı türde ve amaçta bir dile ihtiyacınız var.

PHP uzun yıllardır sürekli olarak en popüler programlama ve web geliştirme dilleri listesinde yer almaktadır.

PHP nedir?

PHP'nin anlamı Köprü Metni Ön İşlemcisi("HTML ön işlemcisi" gibi bir şey).

Bu ne anlama gelir? Biraz uzaktan başlayalım: İki tür dil vardır. Bir tür denir "müşteri", ve diğer - "sunucu".

Bu, istemci dillerinin her bir kişinin tarayıcısında çalıştığı anlamına gelir. İstemci tarafı dillerin tipik bir temsilcisi, muhtemelen duymuş olduğunuz JavaScript'tir.

Örneğin belirlediğimiz tüm eylemler ve komutlar JavaScript, tarayıcı tarafından yürütülür (basitlik açısından sunucu tarafı JavaScript'i dikkate almıyoruz).

Bu, bizim tarafımızdan yazılan aynı kodun tek bir durumda işlendiği anlamına gelir internet tarayıcısı Explorer, diğerinde - Firefox, üçüncüsünde - Opera, dördüncüsünde - Google Chrome yani her bireyin sayfamızı görüntülemek için kullandığı tarayıcı.

Bu nedenle tarayıcının alternatif bir adı vardır - müşteri.

Sunucu tarafı dilleri (PHP dahil) söz konusu olduğunda farklı bir tablo görüyoruz.

Sitemiz her zaman bir sunucuda bulunur; Birçok kişinin web sitesini barındırmak için özel olarak tasarlanmış güçlü bir bilgisayar.

PHP'de yazılan tüm komutlar ve betikler sunucuda yürütülür, başka hiçbir şey yapılmaz. PHP betiği sunucuda yürütüldükten sonra, sunucu çalışmasının sonucunu tarayıcıya "verir" ve bu sonuç bizim için uygun bir forma dönüştürür.

Burada şu noktanın anlaşılması önemlidir: " gibi bir seçenek aracılığıyla herhangi bir tarayıcıda görüntülenebilen web sayfasının kaynak koduna göre Kaynak"sayfasında" bu sayfayı oluşturmak için PHP'nin kullanılıp kullanılmadığını belirlemek imkansızdır.

Bunu tam olarak yapmak imkansızdır çünkü PHP betikleri sunucuda işlenir ve hazır, işlenmiş bir sürüm tarayıcıya iletilir.. Temelde sadece HTML kodu.

Normal statik HTML sayfalarıyla karşılaştırıldığında fark, ek bir kod işleme adımıdır.

Bir HTML sayfası söz konusu olduğunda yalnızca tek bir adım vardır: tarayıcı HTML kodunu işler; belirli kurallara uygun olarak sayfa işaretlemesi yapılır ve bunun sonucunda web sayfasını normal haliyle görürüz.

Bir PHP sayfası söz konusu olduğunda iki aşama vardır: İlk olarak, PHP yorumlayıcısı (işlemci) adı verilen kişi PHP kodunu yürütür (bunun sonucunda basit bir HTML kodu elde edilir) ve bundan sonra tarayıcı işlemleri gerçekleştirir. bu işlemenin sonucu, yani aslında aynı aşama gerçekleştirilir; bu, bir HTML sayfasındaki tek aşamadır.

Genel olarak PHP, HTML ile birlikte harika çalışır. Ayrıca, PHP kodunu HTML koduna ekleyebilirsiniz ve PHP'yi kullanmaçıktı HTML işaretlemesi.

Şu basit noktayı hatırlamak önemlidir: PHP kodunuz ne kadar karmaşık olursa olsun, sonunda düz HTML olarak sonuçlanacaktır.

Neden PHP kullanıyorsunuz?

HTML %100 statiktir. Sayfalarımıza PHP kodunu gömerek, aynı sayfanın içeriğinin belirli koşullara (dinamik sayfalar) bağlı olarak farklı olmasını sağlayabiliriz.

Var olduğu yıllar boyunca PHP dilinin dinamik web siteleri oluşturmak için mükemmel bir çözüm olduğu kanıtlanmıştır.

PHP'ye başlamak için neye ihtiyacınız var?

İçin tam teşekküllü çalışma Bilgisayarınızdaki PHP ile aşağıdaki şeylere ihtiyacınız vardır:

1. Apache web sunucusu(çoğu durumda kullanılır);
2. Veritabanı Yönetim Sistemi (DBMS) MySQL (sitenin içeriği veritabanında saklanır);
3. Kurulu PHP yorumlayıcısı;
4. Kod yazacağınız metin editörü;
5. Tarayıcı.

Şimdi ilk üç nokta hakkında biraz daha konuşalım.

1. Web sunucusu, bilgisayarınızda aynı sunucuyu taklit edecek şekilde tasarlanmıştır; bu sunucu, halihazırda İnternette barındırılan sitenizi barındıracaktır. Bu, bilgisayarınıza herhangi bir PHP betiği yazabilmeniz ve bunların nasıl çalıştıklarını görebilmeniz, üzerinde değişiklik ve düzenleme yapabilmeniz için gereklidir. Tek kelimeyle, sözde hata ayıklama için gereklidir.

2. Sitenizde yer alacak bilgilerin saklanması için MySQL DBMS'ye ihtiyaç vardır. HTML sayfaları söz konusu olduğunda, sitenin içeriğinin tümü doğrudan bunların içinde bulunur. Her sayfa belirli miktarda bilgi (içerik) içerir.

PHP kullanırken, genellikle bir sitenin yararlı içeriğini depolamak için bir veritabanı kullanılır. Çoğu durumda bu MySQL'dir.

3. PHP yorumlayıcısı, bir web sunucusunda PHP kodunu işleyen bir tür programdır. O olmadan PHP betiklerimizi çalıştıramayız ve çalışmalarının sonucunu göremeyiz.

Web sunucusuna PHP kodunun işlenmesi gerektiğini söylemek için, PHP'yi bir HTML belgesine eklerken aşağıdaki sözdiziminin kullanılması gerekir:

Bu durumda web sunucusu, açılış PHP etiketine ulaştıktan sonra ( ) PHP yorumlayıcısının çalışması durur.

Şimdi PHP'nin web sitesi geliştirmedeki rolüne dönelim.

Başlangıç ​​olarak HTML ile yazılmış basit bir statik web sitemizin olduğunu hayal edin. Birkaç sayfadan oluşur ve yalnızca bir dizi değişmez dosyadan oluşur.

Bu sitede form oluşturmanın bir yolu yok geri bildirim, yorumlar, kullanıcı kaydı, arama vb.

Ayrıca böyle bir sitenin yeni sayfalar ekleyebileceğimiz, mevcut sayfaları düzenleyip silebileceğimiz bir kontrol paneli olamaz.

Yalnızca HTML dilini kullanırken, her belirli sayfa için herhangi bir "kontrol koluna" sahip olmadığımızdan, gerçekten kullanışlı ve işlevsel siteler oluşturma konusunda ciddi şekilde sınırlıyız.

Yapabileceğimiz tek şey, bir kod düzenleyicide ayrı bir HTML sayfasını manuel olarak açmak ve onu bir şekilde değiştirmek.

PHP dilini kullanmak, sitemizin "davranışını" derinlemesine düşünüp uygulayabilmemiz nedeniyle gerçekten güçlü siteler oluşturmamıza olanak tanır..

Yani belirli koşulların yerine getirilip getirilmemesine bağlı olarak, tarafımızdan belirlenen algoritmalara göre hareket ederek, sitemizin farklı durumlarda farklı davranmasını sağlayabiliriz.

İhtiyacımız olan sitenin "davranış" mantığını belirleme yeteneği, PHP dilinde en önemli ve en değerli olanlardan biridir.

Bahsedilen avantajların yanı sıra, PHP'nin bize verilerle çalışmak için birçok araç sağladığını da belirtmek gerekir. çeşitli türler.

Çoğu zaman metin verileriyle ve diziler biçiminde sunulan verilerle uğraşmanız gerekir. Bu görevleri kolaylaştırmak için PHP, her türlü bilgiyi kolayca değiştirmenize olanak tanıyan çok sayıda işlev sağlar.

Ayrıca PHP dili dosya ve klasörlerle çalışmamıza olanak tanır. Dosya ve klasörleri oluşturmak, düzenlemek ve silmek için kullanabiliriz. Bunları taşıyabilir, yeniden adlandırabilir ve daha birçok işlemi gerçekleştirebiliriz.

Böyle bir durumu elbette görmezden gelemeyiz önemli nokta bir fırsat olarak PHP kullanımı siteyle daha uygun bir kullanıcı etkileşimi düzenlemek.

Bunlar şöyle şeyler:

Geri bildirim formu;
- yorum yapma imkanı;
- kullanıcıların kaydı;
- Site araması;
- kullanıcı tarafından girilen bilgilerin saklanması ("alışveriş sepeti" ilkesine göre); vesaire.

Ve elbette PHP, sitenizi kolay ve rahat bir şekilde yönetebileceğiniz çeşitli yönetici panelleri oluşturmak için aktif olarak kullanılır.

Yeni materyaller eklemek, kategorileri düzenlemek, yorumları yönetmek, site menü öğelerini değiştirmek, ayarları yönetmek - tüm bunlar ve çok daha fazlası PHP kullanılarak yapılabilir.

PHP dilinin incelemesini özetlemek gerekirse, HTML ve CSS'ye hakim olduktan sonraki adımın PHP dilini öğrenmek olması gerektiğini söyleyebiliriz çünkü. Web siteleri oluşturmada temelde farklı bir düzeye geçmenize izin verecek olan odur.

PHP ile işi bitirip başka bir dile geçiyoruz: JavaScript.

Dosya uzantısı: .js

JavaScript, web sayfalarını etkileşimli hale getirmek için tarayıcılarda en yaygın olarak kullanılan programlama dilidir.

Bunun JavaScript'in tek uygulama alanı olmadığını anlamak önemlidir, ancak konumuz çerçevesinde bu dil için bu özel kullanım durumunu dikkate almak en uygunudur.

JavaScript'in ele aldığımız bağlamdaki ana görevi, bir web sayfasının DOM modelinin öğelerini değiştirmektir.

DOM'un ne olduğunu anlayalım.

DOM, belge nesne modeli anlamına gelir. Belge Nesnesi Modeli).

DOM'a göre, bir belge (örneğin bir web sayfası), kendisiyle çeşitli manipülasyonlar yapmanıza olanak tanıyan bir dizi özelliğe sahip bir nesne ağacı olarak temsil edilebilir:

Düğüm alma;
- düğümleri değiştirin;
- düğümler arasındaki bağlantıların değiştirilmesi;
- düğümlerin kaldırılması.

JavaScript'in sayfa öğelerinde gerçekleştirmemize izin verdiği bu manipülasyonlardır.

Bir sayfaya JavaScript kodu eklemek için etiketini kullanabilirsiniz. senaryo. Etiketin içine yerleştirilmesi tavsiye edilir KAFA, ancak bu gerekli değildir.

konteynerler senaryo Bir belgede istediğiniz kadar olabilir. Nitelik ise "tür = "metin/javascript"" isteğe bağlı çünkü Anlam javascript varsayılan değerdir.

Aşağıda sözde çıktıyı veren bir komut dosyası örneği verilmiştir. kalıcı pencere klasik harflerle "Selam Dünya!" tarayıcının içinde:

alarm("Merhaba Dünya!");

Ayrıca bir etiketin içine JavaScript kodu da yerleştirebilirsiniz. HTML spesifikasyonu, olay işleyicilerini tanımlamak için kullanılan bir dizi özelliği açıklar. Bu örneği düşünün:

Silmek

Aynı zamanda cevap olumsuz ise (yani emin değilsek “hayır” demektir) bağlantı engellenecektir.

Lütfen bu uygulamanın JavaScript kullanımı iyi sayılmaz.

JavaScript'i kullanmanın doğru yolu bu yaklaşım olacaktır. İlk olarak bir tanımlayıcı sağlıyoruz ( kimlik = "uyarı bağlantısı") bağlantı:

Sil Bundan sonra ayrı bir JavaScript dosyasına aşağıdaki kodu yazıyoruz (belgeye nasıl bağlanacağı aşağıda gösterilecektir): window.onload = function() ( var linkWithAlert = document.getElementById("alertLink"); linkWithAlert. onclick = function() ( return onaylama("Emin misiniz?"); ); );

Bu örnekte, bir web sayfası yüklendiğinde devreye giren bir fonksiyon yaratıyoruz. Bu işlev kimliğe sahip öğeyi bulur uyarı Bağlantısı ve üzerindeki (yani "Sil" bağlantısındaki) tıklama olayını izler.

Click olayında, zaten aşina olduğumuz bir mesajın bulunduğu kalıcı bir pencere görüntülüyoruz.

JavaScript hakkında hiçbir şey bilmiyorsanız bu örneği biraz karmaşık bulabilirsiniz, ancak bu aşama o kadar önemli değil.

Prensipin kendisini ve JavaScript kullanırken çalışma yaklaşımını anlamanız önemlidir.

Ve son olarak, biraz önce söz verdiğim gibi, harici bir dosyadan JavaScript'i nasıl ekleyebileceğinize bakalım.

Burada durum CSS'deki duruma çok benziyor ancak CSS kodu yerine JavaScript kodunu bir dosyaya (.js uzantılı) yazıyoruz ve ardından onu ihtiyacımız olan dosyaya dahil ediyoruz. etiket KAFA yapıyı kullanarak:

Böyle bir manipülasyondan sonra JavaScript dosyasına yazdığımız tüm işlevler kullanımımıza sunulacaktır.

Yani JavaScript'in sayfanızın yapısını aktif olarak yönetmenize, öğelerini değiştirmenize olanak tanıyan bir dil olduğunu söyleyebiliriz.

Pratikte bu, çeşitli animasyon efektleri, nesnelerin hareket ettirilmesi, çözülmesi, arttırılması ve azaltılması efektleri oluşturulurken uygulamasını bulur.

JavaScript çeşitli oluşturmak için kullanılır fotoğraf galerileri, Lafta içerik kaydırıcıları veya döndürücüleri Bunun özü, belirli bir sınırlı alanda çeşitli nesnelerin (örneğin görüntüler) dönüşümlü olmasıdır.

Çoğunlukla JavaScript kullanılır ve ilk veri doğrulaması için Kullanıcının formlara girdiği.

JavaScript'ten bahsetmişken, özel JavaScript kitaplıklarından bahsetmek mümkün değil ( jQuery, Prototip, MooTools ve benzeri.)

JavaScript kitaplıklarının amacı, DOM yöntemlerine tarayıcılar arası arayüz.

Bu, belirli bir kitaplığın çerçevesinde önceden yazılmış belirli işlevleri kullanabileceğiniz ve ihtiyacınız olan sonucu alabileceğiniz anlamına gelir; bu, tüm tarayıcılarda eşit derecede iyi çalışır.

Ayrıca kütüphaneler, yönetimi kolaylaştıran bir dizi kullanımı kolay araç sağlayarak web geliştiricilerini JavaScript'in ayrıntılarını öğrenmek zorunda olmaktan kurtarır. nesne modeli belge.

Özetle JavaScript'in hem dekorasyonu hem de bu dil kullanılarak sağlanabilecek ek işlevsellik açısından sitenizin "öne çıkan" özelliği olabileceğini söyleyebiliriz.

JavaScript ile işimiz bitti ve devam ediyoruz son dil– SQL

Dosya uzantıları: .sql

SQL, ilişkisel veritabanlarında depolanan verileri tanımlamak, değiştirmek ve almak için kullanılan bilgi-mantıksal bir dildir.

Bu tanımı daha iyi anlamak için en temel kavramlarla başlayacağız; bunlar olmadan daha ileri gitmenin hiçbir anlamı yoktur.

Zaten bir veritabanı ne işe yarar?

Artık ciddi web uygulamaları geliştirirken neredeyse her zaman veritabanları kullanılıyor. Sitenin çalışması için gerekli bilgileri saklarlar - içeriğin kendisinden (içerik) başlayarak, kullanıcıların oturum açma bilgileri ve şifreleri ve çeşitli site ayarlarıyla sona erer.

Veritabanının yalnızca metinsel bilgileri değil aynı zamanda örneğin resimleri, bazı belgeleri vb. de saklayabilmesine rağmen, kural olarak hala özellikle metinsel bilgileri depolamak için kullanılıyor ve başka türdeki bilgiler formda saklanıyor Dosyalar.

Veritabanlarının, örneğin metinsel bilgilerin dosyalarda saklanmasına göre çok sayıda avantajı vardır:

1. Bilgi edinmenin yüksek hızı;

2. Verilere rastgele erişime izin verirler. (yani veritabanındaki herhangi bir spesifik kayda başvurmak kolaydır);

3. Veritabanından bizi ilgilendiren belirli kriterleri karşılayan verileri çıkarabilirsiniz;

4. Veritabanının kullanılması, verilere paralel erişim konusunda endişelenmememizi sağlar. Onlar. Bu durumda bizim için birkaç düzine kişinin aynı anda aynı girişi talep edebilmesi önemli değil.

Eğer dosyalarla uğraşsaydık işimiz çok daha zor olurdu.

Bu nedenle verilere paralel erişim, veritabanlarının en önemli avantajlarından biridir.

Veritabanı ve DBMS arasındaki fark

Terimler arasında ayrım yapmak önemlidir "veri tabanı" Ve "veritabanı yönetim sistemi" (DBMS).

Veritabanı sakladığımız bilgiler ve bu bilgilerin yapısıdır, DBMS ise bu bilgileri sağlayan programdır. harici uygulamalar veritabanı erişimi.

Veritabanı, her proje için bağımsız olarak tasarladığımız ve yapısını gelecekteki uygulamamızın işlevlerine göre belirlediğimiz bir şeydir.

DBMS, belirli sınırlı bir listeden (Oracle, MySQL, PostgreSQL, vb.) tarafımızdan seçilir.

Çoğu zaman bir grup PHP + MySQL bulabilirsiniz. Çoğu durumda onunla da çalışacaksınız.

Şimdi ilişkisel veritabanı kavramını düşünün.

Bugüne kadar, sözde ilişkisel veritabanları en popüler olanlardır.

İlişkisel veritabanları tablolardan oluşan veritabanlarıdır.

Aynı "ilişkisel" kelimesi İngilizce'den gelmektedir. ilişki- davranış.

"İlişki", bir veritabanındaki farklı tablolar arasındaki ilişkiyi ifade eder.

Bir veri tabanındaki tabloların gerçekte sıradan tablolar olduğu ve çarpım tablosundan çarpım tablosuna kadar hayatınızda karşılaştığınız tüm tablolarla esasen aynı olduğu anlaşılmaktadır. Microsoft Excel.

Tabloda sınırlı sayıda sütun (genellikle küçük) ve istediğiniz kadar satır bulunur.

Veritabanına yeni verileri nasıl ekleyebilir, değiştirebilir, silebilir ve diğer işlemleri nasıl gerçekleştirebilirsiniz?

Bunun için var özel dil SQL (İngilizce'den. Yapılandırılmış sorgu dili- Yapılandırılmış sorgu dili).

Onlar. SQL, özellikle yönetim için tasarlanmış evrensel bir bilgisayar dilidir. ilişkisel veritabanları veri.

Onun yardımıyla hemen hemen her işlemi gerçekleştirebiliriz: veritabanı oluşturmaktan veritabanından herhangi bir bilgi kümesini seçmeye kadar.

Kural olarak SQL sorguları harici bir program aracılığıyla DBMS'ye aktarılır. Bu durumda, DBMS belirtilen sorguyu yürütür ve yanıt olarak bazı sonuçlar döndürür.

Her SQL komutu ya bir veritabanındaki verilere yönelik bir sorgudur ya da veritabanındaki verileri değiştiren bir veritabanı çağrısıdır. Veritabanında meydana gelen değişikliklere göre, aşağıdaki türler istekler:

Veritabanındaki yeni veya mevcut nesneleri oluşturma veya değiştirme istekleri (bu durumda istek, oluşturulan veya değiştirilen nesnenin türünü ve yapısını açıklar);
- veri talepleri;
- yeni veri ekleme talepleri (kayıtlar)
- verileri silme talepleri;
- DBMS'ye erişim.

Bu nedenle SQL dili bağlantı Web uygulamasının veritabanıyla ve içinde saklanan bilgilerle etkileşime girmesini sağlar.

SQL dilinin basit olduğu söylenemez ve tam kullanımı, onu öğrenmek için oldukça fazla çaba harcamanızı gerektirecektir.

Bu nedenle birçok web geliştirme aracında (örneğin, CodeIgniter çerçevesinde), sitenin veritabanıyla etkileşimi, gerekli tüm eylemleri onunla gerçekleştirmenize olanak tanıyan bir tür "eklenti" kullanılarak gerçekleştirilir. SQL dilinin kendisini öğrenmek.

Ancak CodeIgniter gibi araçları kullanmıyorsanız, o zaman elbette eksiksiz bir veritabanı odaklı web uygulaması oluşturmak için SQL öğrenmeniz gerekecektir.

Peki, bu incelemeyi biraz özetleyelim.

Web geliştirmenin temeli HTML diliydi ve hala da öyle. O olmadan, diğer her şey pratikte anlamsızdır, çünkü tarayıcı tarafından monitör ekranında gördüğümüz son resme dönüştürülen HTML işaretlemesidir.

CSS, web uygulamamızın görünümünü esnek bir şekilde kontrol etmemizi sağlayan, bir web sayfasının çeşitli öğelerinin görünümünü ve konumunu ayarlamaya yönelik bir araçtır.

PHP, belirli bir davranış mantığına sahip güçlü dinamik web siteleri oluşturmamıza olanak tanır. PHP ayrıca bize pratik olarak sınırsız olanaklar Sitenin işlevselliğini genişletmek için.

JavaScript önemli ancak her zaman gerekli olmayan bir eklenti görevi görür. Sitenizin kullanılabilirliğini ve etkileşimini önemli ölçüde artırabilir, ona belirli bir "lezzet" katabilir.

Son olarak SQL, sitenin veritabanıyla etkileşimini düzenlememize olanak tanır; bu da bize şunu sağlar: PHP dili gerçekten güçlü, işlevsel siteler oluşturun.

Saygılarımla, Dmitry Naumenko.

Not: Bir şey açık ama bundan sonra nereye gitmeli? Web sitesi oluşturmanın çeşitli yönleriyle ilgili premium eğitimlere göz atın ve ayrıca ücretsiz kurs PHP'de sıfırdan kendi CMS sisteminizi oluşturmak için. Tüm bunlar, HTML ve CSS'den JavaScript, PHP ve SQL'e kadar web teknolojilerinde hızlı ve kolay bir şekilde uzmanlaşmanıza yardımcı olacaktır.

Malzemeyi beğendiniz ve teşekkür etmek mi istiyorsunuz?
Sadece arkadaşlarınız ve iş arkadaşlarınızla paylaşın!

Merhaba sevgili acemi web yöneticileri. Programlama dillerini öğrenmeye başlayalım.

Ve bunları html ile incelemeye başlayacağız.

Kursun sonunda bağımsız olarak saf html ile bir web sitesi yazıp internete koyabileceğinizi hemen söylemeliyim. Ancak yine de acele etmemenizi ve html'den sonra css ile tanışmanızı öneririm.

Daha sonra siteyi daha serin hale getirecek ve bitmiş CMS'de (içerik yönetim sistemi) oluşturulan sitenin görünümünü düzeltebileceksiniz.

Programlama dili öğrenmek ile yabancı dil öğrenmek aynı şey değildir ve çok daha kolaydır. Üstelik korkutucu değil ama çok heyecan verici.

Sadece anlaşılmaz olan her zaman korkutucudur, ama size söz veriyorum, ilk derslerden sonra tüm korkular geçecek.

Bilgisayarınıza yüklemeniz gereken düzenleyicinin yardımıyla öğreneceğiz.

Bu dosya düzenleyicide kod yazabilir ve ardından tarayıcının onu nasıl görüntülediğini görebilirsiniz. Çok rahat.

Öncelikle size biraz HTML'nin ne olduğundan bahsedelim, bu kursumuzun sıkıcı kısmı olacak, sonra da bazı ilginç uygulamalar yapacağız. Orada kesinlikle sıkıcı olmayacak.

NTML (Köprü Metni Biçimlendirme Dili) kelimenin tam anlamıyla - köprü metni biçimlendirme dili. Web sayfaları oluşturmak için kullanılır.

Ve eğer bizim anlayışımıza göre, yalnızca bir konuyla birleştirilmiş sayfalardan oluşan bir koleksiyon bir kitapsa, hatta daha doğrusu kalın bir dergiyse, o zaman tek bir konuyla birleştirilmiş web sayfalarından oluşan bir koleksiyon alan adı- bu web sitesi.

Her web sayfasının kendine ait benzersiz metin, sizin tarafınızdan yazılmış ve html koduna eklenmiştir.

Kod, tarayıcıya şu veya bu öğenin nasıl görüntüleneceğini gösteren bir komuttur. Diyelim ki bir kelime yazdınız, ancak ekranda hangi biçimde olacağı, onu hangi koda eklediğinize bağlıdır.

Html kodu aşağıdaki öğelerden oluşur:

2. Nitelikleri etiketleyin.

3. Nitelik değerleri.

Sırasıyla bunlara bakalım.

Html etiketi kodun ana öğesidir. Bu şekilde yazılmıştır:

Gördüğünüz gibi iki bölümden oluşuyor. İlk açılı ayraçlar açılış kısmıdır, ikincisi ise eğik çizgiyle kapanış kısmıdır.

Bu iki bölüm arasına ekranda görüntülenecek olan sayfa kodunun geri kalanı yazılır.

Etiketi, tarayıcıya bunun bir html belgesi olduğunu ve diğer tüm öğeler için ana (ana) etiket olduğunu söyler.

Diğer etiketlerde kod elemanları köşeli parantez içine etiketin adı olacak ve bu etiketin hangi elemanı göstereceğini belirleyen bir harf veya kelime yazılır.

Örneğin h1 harfini köşeli parantez içine koyarsanız metin ekranda başlık olarak görüntülenecektir.

Merhaba

Yani "Merhaba" kelimesinin yazı tipi metnin geri kalanından daha büyük ve daha kalın olacaktır.

P harfini köşeli parantez içine koyarsanız, etiketin içine alınan metin paragraf olarak görüntülenecektir.

Merhaba

Yani yazı tipi normal olacak ancak bu etiketten sonra yazılan her şey yeni bir satırda başlayacaktır.

Html'de bu tür birkaç düzine harf ve hatta komut türünü tanımlayan kelimeler vardır, ancak sık kullanımda 10-15'ten fazla etiket yoktur.

Daha ayrıntılı olarak, her birini yol boyunca ele alacağız.

Aşağıdakiler etiket nitelikleridir. Çoğunlukla kullanılır, ayrıca bir düzineden fazla değildir. Ve Son zamanlarda ve hatta daha da azı, çünkü tüm öznitelik işlevleri css'e aktarılır.

Ancak bunun hakkında daha sonra daha fazla bilgi vereceğiz, ancak şimdilik bir özelliğin ne olduğunu öğreneceğiz, çünkü bazıları alaka düzeyini kaybetmedi ve asla kaybetmeyecek.

özellik: ek komut. Etiketin açılış kısmında yazılır. Örneğin, başlık rengini yapmak istiyorsanız h1 etiketinin açılış kısmına color özelliğini eklemeniz gerekir.

Ve hemen niteliklerin değerlerine gidin. Önemli olan özelliğin bir değere sahip olması gerektiğidir. Yani başlığın renkli olması komutunu verdiniz, yani ne renk olacağını belirtmeniz gerekiyor.

Bu gösterge özelliğin değeri olacaktır. Şuna benziyor:

Bu kırmızı.

Aynı şekilde, ancak diğer niteliklerin yardımıyla metin boyutunu, girintileri, hizalamayı ve çok daha fazlasını ayarlayabilirsiniz.

Bununla birlikte, stillendirme giderek daha fazla CSS'ye doğru ilerliyor ve stillendirme nitelikleri yavaş yavaş geçerliliğini yitiriyor ve pratik dışı kalıyor.

Ve şimdi yukarıdakilerden şu sonuca varıyoruz:

HTML, tarayıcıların anladığı dildir. Tarayıcıyla iletişim kurmak veya onu kontrol etmek, yani ekrana yazdıklarımızı nasıl algılayacağına ve görüntüleyeceğine dair komutlar vermek için buna ihtiyacımız var.

Etiketlerin, niteliklerin ve değerlerinin kullanım sırasında hatırlanmasının kolay olduğunu eklemek istiyorum. pratik egzersizler, esasen sonraki tüm makaleler olacak.

Orada etiketi hemen görüyorsunuz, anlamını, hangi durumda ve yerde kullanıldığını, hangi işaretlerin eşlik ettiğini, nasıl yazıldığını öğrenin, o yüzden şimdi size tüm etiketleri ve nitelikleri göstermeyeceğim, biz her şeyi pratikte göreceğiz.

Etiketlerin tam listesi ve HTML nitelikleri, eğer birisi ilgilenirse, her zaman adresine bakabilirsiniz. .

Bununla birlikte, programlamayla profesyonel olarak ilgilenmeyecekseniz, birkaç (yaklaşık bir düzine) temel etiketi ve birkaç özelliği bilmek yeterli olacaktır.

Belki de hepsi bu. Bir kaç? Ve daha fazlasına gerek yok. Gerisi belirli örnekler kullanılarak öğrenme sürecinde öğrenilecektir.

Örneklerin anlaşılmasını kolaylaştıracağını düşünüyorum. Amacımız bir web sitesi oluşturmak ve her şeyin nasıl çalıştığını anlamaktır, o yüzden devam edin ve pratik yapın.

Dönüş

Çalışmak için oturduğunuzda, bir tür piç sizi kesinlikle uyandıracak !!!

Okulda öğretmen öğrencilere şöyle der:
"Hanginiz sonunda kendini aptal olarak görüyor?" Uyanmak.
Uzun bir aradan sonra bir öğrenci ayağa kalkar:
"Yani aptal olduğunu mu düşünüyorsun?"
“Aslında pek öyle değil ama tek başına ayakta durman biraz utanç verici.

giriiş

Programlama dili hakkında temel bilgiler

1 HTML dili hakkında

2 Web sitesi oluşturma

3 Anahtar nokta

4 Belge yapısı

5 Belge gövde etiketleri

Sitenin oluşturulmasının açıklaması

2 Belge içindeki grafikler

3 Belgeye stiller ekleme

4 Grafikleri web için optimize etme

Pratik çalışma algoritması

1 Hazırlık

2 "Dijital Bilgi İşleme Yüksek Lisansı" sitesinin oluşturulması

Çözüm

Kullanılmış literatür listesi

Başvuru

Dijital teknolojiler ve kitlesel bilgisayarlaşma çağında İnternet hayatımızın ayrılmaz bir parçası haline gelmiş, web programlama ve tasarım prestijli ve aranan bir meslek haline gelmiştir. Sonuçta, İnternet kendi başına var olamaz ve kullanıcının her zaman güncel ve doğrulanmış bilgilere anlayabileceği bir biçimde erişebilmesi için birisinin web sayfaları oluşturması, web sitelerini her gün ve hatta her saat güncellemesi gerekir. Bu nedenle web programlama ve tasarım konusu oldukça önemlidir. Bu nedenle çalışmamın konusu dilde bir web sitesi oluşturulmasıyla ilgilidir. HTML programlama ve web sayfaları yazabileceğiniz programlar. HTML programlama dilini bilerek neler yaratılabileceğine örnek olarak çalışmalarıma bir web sitesi ekliyorum.

Nesne bir web sitesidir. Konu HTML'de web sitesi programlamadır.

Çalışmanın amacı HTML programlama dilini incelemektir.

Dil hakkında temel bilgileri ortaya çıkarın;

Bir site oluşturma sürecini düşünün;

Geliştirilen algoritmaya dayalı bir web sitesi oluşturun.

Yapı: Çalışma bir giriş, üç bölüm, bir sonuç ve bir referans listesinden oluşmaktadır.

Metin İşaretleme Dili (HTML), WEB ortamında hiper metin belgeleri oluşturmaya yönelik standart bir dildir. HTML belgeleri çeşitli WEB tarayıcı türleri tarafından görüntülenebilir. Bir belge HTML kullanılarak oluşturulduğunda, bir WEB tarayıcısı belgenin çeşitli öğelerini çıkarmak ve önce bunları işlemek için HTML'yi yorumlayabilir. HTML kullanımı, belgelerin herhangi bir WEB tarama yazılımındaki yazı tipleri, çizgiler ve diğer grafik öğeleri kullanılarak sunum için biçimlendirilmesine olanak tanır.

Çoğu belgede başlıklar, paragraflar veya listeler gibi standart öğeler bulunur. HTML etiketlerini kullanarak bu öğeleri belirleyebilirsiniz, WEB tarayıcılarına bu öğeleri görüntülemek için minimum bilgiyi sağlayarak genel görünümü koruyabilirsiniz. Genel yapı ve belgelerin bilgisel bütünlüğü. Bir HTML belgesini okumak için gereken tek şey, HTML etiketlerini yorumlayan ve belgeyi ekranda yazarın verdiği biçimde görüntüleyen bir WEB tarayıcısıdır.

Çoğu durumda, belgenin yazarı belgenin görünümünü kesin olarak tanımlar. HTML durumunda, okuyucu, WEB tarayıcısının yeteneklerine bağlı olarak, belirli bir dereceye kadar belgenin görünümünü kontrol edebilir (ancak içeriğini kontrol edemez). HTML, bir belgede bir başlığın veya paragrafın nerede olması gerektiğini bir HTML etiketiyle işaretlemenize ve ardından WEB tarayıcısının bu etiketleri yorumlamasına izin vermenize olanak tanır. Örneğin bir WEB tarayıcısı paragraf başlangıç ​​etiketini tanıyıp belgeyi istenilen biçimde sunabilirken, diğeri bu yeteneğe sahip olmayıp belgeyi tek satırda sunabilir. Bazı WEB tarayıcılarının kullanıcıları ayrıca yazı tipinin boyutunu ve türünü, rengini ve belgenin görüntülenmesini etkileyen diğer parametreleri özelleştirme olanağına da sahiptir.Etiketler iki kategoriye ayrılabilir:

Belgenin gövdesinin bir bütün olarak WEB tarayıcısı tarafından nasıl görüntüleneceğini belirleyen etiketler.

Belgenin başlığı veya yazarı gibi belgenin genel özelliklerini açıklayan etiketler.

HTML'nin temel avantajı, belgenin çeşitli türdeki WEB tarayıcılarında ve çeşitli platformlarda görüntülenebilmesidir.

belgeler herhangi biri kullanılarak oluşturulabilir Metin düzeltici veya özel HTML editörleri ve dönüştürücüleri. HTML belgeleri oluşturmak için kullanılacak editörün seçimi yalnızca kolaylık kavramına ve her yazarın kişisel tercihlerine bağlıdır.

Örneğin, HTML editörleri Netscape'in "Netscape Navigator Gold"u gibi, WYSIWYG (Ne Görürsen Onu Alırsın) teknolojisini kullanarak grafiksel olarak belgeler oluşturmanıza olanak tanır. Öte yandan, geleneksel belge yazma araçlarının çoğunda, belgeleri HTML biçimine dönüştürmenize olanak tanıyan dönüştürücüler bulunur.

Tüm HTML etiketleri "" (sağ açılı ayraç) ile başlar. Tipik olarak bir başlangıç ​​etiketi ve bir bitiş etiketi bulunur. Örneğin başlangıç ​​ve bitiş etiketinin içindeki metni tanımlayan ve belgenin başlığını açıklayan başlık etiketleri şunlardır, metin girerken büyük/küçük harf önemli değildir:

Belge Başlığı veya Belge Başlığı.

Bitiş etiketi, başlangıç ​​etiketiyle aynı görünür ve içindeki metinden önce bir eğik çizgi ile ondan farklılık gösterir. köşeli ayraçlar. İÇİNDE bu örnek etiketi, WEB tarayıcısına başlık biçimini kullanmasını söyler ve etiket, web tarayıcısına başlık metnini tamamlamasını söyler.

Gibi bazı etiketler

(paragrafı tanımlayan etiket) bitiş etiketi gerektirmez, ancak bunun kullanımı belgenin kaynak metnine gelişmiş okunabilirlik ve yapı kazandırır.

Dikkat! Daha iyi okunabilirlik için bir HTML belgesinin kaynak metnine eklenen fazladan boşluklar, sekmeler ve satır başları, belge yorumlanırken WEB tarayıcısı tarafından göz ardı edilecektir. Bir HTML belgesi, yukarıdaki öğeleri yalnızca etiketlerin içine yerleştirildiklerinde içerebilir.

Bir web tarayıcısı bir belge aldığında belgenin nasıl yorumlanması gerektiğini belirler. Bir belgede görünen ilk etiket bir etiket olmalıdır. Bu etiket, web tarayıcısına belgenizin HTML kullanılarak yazıldığını bildirir. Minimal bir HTML belgesi şuna benzer:

Belge gövdesi...

Belgenin başlığı. Belge başlığı etiketi, etiketin hemen ardından kullanılmalı ve belgenin gövdesinde başka hiçbir yerde kullanılmamalıdır. Bu etiket Genel açıklama belge. Etiketin içine herhangi bir metin koymaktan kaçının. Başlangıç ​​etiketi, belgeyi tanımlayan etiket ve diğer etiketlerin hemen önüne, bitiş etiketi ise belge açıklamasının bitiminden hemen sonra yerleştirilir. Örneğin:

Çalışanların listesi

Belgenin başlığı. Çoğu WEB tarayıcısı, etiketin içeriğini belgeyi içeren pencerenin başlık çubuğunda ve WEB tarayıcısı tarafından destekleniyorsa yer imi dosyasında görüntüler. ve etiketleriyle sınırlandırılan başlık, yukarıdaki örnekte gösterildiği gibi -tags'in içine yerleştirilir. Belgenin kendisi pencerede görüntülendiğinde belgenin başlığı görünmüyor.

Belge gövdesi etiketleri, bir HTML belgesinin bir pencerede görüntülenen bileşenlerini tanımlar. Belge gövdesi diğer belgelere, metinlere ve diğer biçimlendirilmiş bilgilere bağlantılar içerebilir.

Belgenin gövdesi. Belgenin gövdesi ve etiketleri arasında olmalıdır. Belgenizin metin ve grafik (anlamsal) bilgileri olarak görüntülenen belge kısmıdır.

Başlık seviyeleri. Bir HTML belgesi yazıldığında, metin yapısal olarak düz metne, metin bölümlerinin başlıklarına, üst düzey başlıklara vb. bölünür. Başlıkların ilk seviyesi (en büyüğü) 1 ile, sonraki seviye 2 ile gösterilir ve bu şekilde devam eder. Çoğu tarayıcı, her başlığa kendi stilini veren altı düzeydeki başlığın yorumlanmasını destekler. Altıncı seviyenin üzerindeki başlıklar standart değildir ve tarayıcı tarafından desteklenmeyebilir. Başlığı Üst düzey"1" işareti vardır. Düzey 1 başlığının sözdizimi aşağıdaki gibidir:

Birinci düzey başlık

Başka bir düzeydeki başlıklar genel durumda aşağıdaki gibi temsil edilebilir:

X'inci seviyenin başlığı, x, başlığın seviyesini belirleyen 1'den 6'ya kadar bir sayıdır.

paragraf etiketi

çoğunun aksine kelime işlemcileri, bir HTML belgesinde satırbaşları genellikle göz ardı edilir. Fiziksel paragraf sonu, belgenin kaynak metninin herhangi bir yerinde olabilir (okunabilirlik kolaylığı için). Ancak tarayıcı paragrafları yalnızca bir etiket olduğunda böler

Paragrafları etiketle ayırmazsanız

Belgeniz büyük bir paragraf gibi görünecek.

Ek etiket seçenekleri

Paragrafı sırasıyla sola, ortaya ve sağa hizalamanıza olanak tanır.

Belge öğelerinin merkezlenmesi. Tüm belge öğelerini tarayıcı penceresinde ortalayabilirsiniz. Bunun için etiketini kullanabilirsiniz.

ve etiketleri arasındaki tüm öğeler pencerenin ortasında olacaktır. Yeniden biçimlendirme etiketi Yeniden biçimlendirme etiketi, Metni ekranda belirli biçimlendirmeyle sunmanızı sağlar. Önceden biçimlendirilmiş metin bir bitiş etiketiyle biter. Önceden biçimlendirilmiş metnin içinde şunları kullanabilirsiniz:

a) satır besleme

b) sekme karakterleri (8 karakteri sağa kaydırın)

c) tarayıcı tarafından ayarlanan orantısız yazı tipi.

veya gibi paragraf biçimlendirme etiketlerinin kullanımı, etiketler arasına yerleştirildiğinde tarayıcı tarafından göz ardı edilecektir.

Grup listesi

6-M-11 grubunun listesi

Bu liste soyadları, adları ve soyadlarını içerir.

Liste yalnızca resmi amaçlarla kullanılabilir.

Tarayıcı ekranında göreceğiniz şey:

Dikkat! "Grup Listesi" başlığı tarayıcı tarafından belgenin bir parçası olarak gösterilmiyor. Tarayıcı penceresinin başlık çubuğunda görünecektir.

Satır sonu
. Etiket
tarayıcıya satır sonunu bildirir. en iyi örnek Bu etiketin kullanımı, tarayıcının bunları alt alta görüntülemesi gereken biçimlendirilmiş bir adres veya başka herhangi bir satır dizisidir. Örneğin:

Alexey Yartsev
Dmitrov karayolu,
9B, ofis 326

Ek bir parametre, etiketin yeteneklerini genişletmenize olanak tanır
.

Bu parametre yalnızca satır besleme yapmanıza değil, aynı zamanda tarayıcı penceresinin temiz sol (sol), sağ (sağ) veya her iki (tümü) kenarlığından başlayarak bir sonraki satırı yerleştirmenize de olanak tanır. Örneğin soldaki metnin yanında resim varsa etiketini kullanabilirsiniz.
resmin altındaki metni dengelemek için:

Gördüğünüz gibi bu şema bağlantıyı gösteriyor

Belge içindeki noktalara bağlantılar. Aynı belgenin farklı bölümlerine veya bölümlerine, bu bölümler için özel bir gizli işaretleyici kullanarak bağlantı verebilirsiniz. Bu, ekranı kaydırmanıza gerek kalmadan bir belge içinde bölümden bölüme hızlı bir şekilde geçmenize olanak tanır. Bağlantıya tıkladığınız anda tarayıcı sizi belgenin belirtilen bölümüne taşıyacak ve bölüm işaretçisini içeren satır (genellikle bölümün ilk satırı veya bölüm başlığı) belgenin ilk satırına yerleştirilecektir. tarayıcı penceresi (bu satır zaten ekranda değilse). tarayıcı).

Bir bölüm işaretçisi oluşturun. Bu işaretleyicinin sözdizimi şöyledir:

İlk satırda görünecek metin

Metin

Örneğin:

Bölüm Listesi

• Bölüm 1
• Bölüm 2

Bölüm 1

Bölüm 1 metni

Bölüm 2

Bölüm 2 metni





"#ex1" karakterleri, tarayıcınıza verilen HTML belgesinde "ex1" adlı bir işaretçiyi aramasını söyler.

Kullanıcı "Bölüm 1" satırına tıkladığında tarayıcı doğrudan bölüm 1'e atlayacaktır.


2.2 Belge içindeki grafikler

Web'in en çekici özelliklerinden biri, bir HTML belgesine grafiklere ve diğer veri türlerine bağlantılar ekleme yeteneğidir. Bu, etiketi kullanılarak yapılır . Bu etiketi kullanmak belgelerin görünümünü ve işlevselliğini önemli ölçüde iyileştirebilir.

HTML belgelerinde grafik kullanmanın iki yolu vardır. Birincisi, kullanıcının görüntüleri doğrudan belgedeki diğer öğeler bağlamında görmesine olanak tanıyan grafiklerin belgeye yerleştirilmesidir. Bu, belge tasarımında en çok kullanılan tekniktir ve bazen "satır içi görüntü" olarak da anılır. Etiket söz dizimi:



Etiket sözdiziminin öğelerini açıklayalım:

Standart URL ile aynı sözdizimine sahip gerekli parametre. Bu URL, tarayıcıya görselin nerede bulunduğunu bildirir. Çizim, tarayıcının desteklediği bir grafik formatında saklanmalıdır. Bugün GIF ve JPG formatları çoğu tarayıcı tarafından desteklenmektedir. = "metin":

Bu isteğe bağlı öğe, grafikleri desteklemeyen bir tarayıcı tarafından veya görüntü sayfalama devre dışı bırakıldığında görüntülenecek metni belirtir. Genellikle bu, kullanıcının ekranda görebileceği veya görebileceği görüntünün kısa bir açıklamasıdır. Eğer verilen parametre eksikse, çoğu tarayıcı resmin yerine bir piktogram (simge) görüntüler ve bunu etkinleştirerek kullanıcının resmi görebilmesini sağlar. Kullanıcılarınız Lynx.=n1 gibi grafik modunu desteklemeyen bir tarayıcı kullanıyorsa ALT etiketi önerilir:

Bu isteğe bağlı parametre, resmin yüksekliğini piksel cinsinden belirtmek için kullanılır. Bu parametre belirtilmezse orijinal görüntü yüksekliği kullanılır. Bu seçenek, görüntüleri dikey olarak küçültmenize veya uzatmanıza olanak tanıyarak belgenizin görünümünü daha net bir şekilde tanımlamanıza olanak tanır. Ancak bazı tarayıcılar bu seçeneği desteklememektedir. Öte yandan, istemcinizin ekran çözünürlüğü sizinkinden farklı olabilir, bu nedenle grafiğin mutlak değerini ayarlarken dikkatli olun.=n2:

Parametre de önceki gibi isteğe bağlıdır. Resmin mutlak genişliğini piksel cinsinden ayarlamanıza olanak tanır.: Bu seçenek, tarayıcıya bir sonraki metin bloğunun nereye yerleştirileceğini söylemek için kullanılır. Bu, ekrandaki öğelerin konumunu daha kesin bir şekilde belirtmenize olanak tanır. Bu parametre kullanılmazsa, çoğu tarayıcı görüntüyü ekranın sol tarafına ve metni de sağına yerleştirir.:

Bu seçenek, tarayıcıya, bu görüntünün, kullanıcının görüntüdeki belirli bir konuma tıklayarak bazı eylemler gerçekleştirmesine olanak tanıdığını bildirir. Bu özellik HTML'nin bir uzantısıdır.

Bu etiketi kullanmanın bir örneğini burada bulabilirsiniz:



HTML 2.0'dan beri etiketin ek seçenekler eklendi:



Yeni seçenekler::

Metnin resmin üzerinden geçmemesi için resmin üstündeki ve altındaki beyaz alanın boyutunu piksel cinsinden ayarlamanıza olanak tanır. Bu, belgeyi önceden görmenin mümkün olmadığı dinamik olarak oluşturulan görüntüler için özellikle önemlidir.:

VSPACE ile aynıdır, ancak yalnızca yatay olarak.

Arka plan resimleri. Çoğu tarayıcı, belgenize matris haline getirilecek ve tüm belgenin önünde görüntülenecek bir arka plan resmi eklemenize izin verir. Bazı kullanıcılar arka plan grafiklerini sever, bazıları sevmez. Göze çarpmayan yarı saydam bir resim (duvar kağıdı) genellikle çoğu belge için arka plan olarak iyi görünür.

Arka plan resminin açıklaması BODY etiketinde bulunur ve şu şekilde görünür:

.

parametrelerin her biri bir öğenin rengini belirler. Bu parametreleri açıklayalım:

Belge arka plan rengi:

Belgenin düz metin rengi:

Bağlantı rengi. Renk, RGB şeması (Kırmızı, Yeşil, Mavi) kullanılarak onaltılık formatta altı basamaklı bir sayı olarak belirtilir. #000000 rengi siyah ve #FFFFFF rengi beyazdır. Örneğin:

Verilen satır tanımlar Beyaz renk belge arka planı, siyah metin ve gümüş bağlantılar.

Yatay çizgi. Etiketini kullanarak metni yatay çubukla ayırabilirsiniz.

Etiket formatı:

Etiket seçenekleri::

Piksel cinsinden çizgi kalınlığı:

Piksel cinsinden çizgi genişliği veya tarayıcı penceresi genişliğinin yüzdesi.: Ekrandaki konum (sol | orta | sağ).: Varsayılan olarak çizgi, 3B görünümde gölgeli olarak oluşturulur. NOSHADE, çizgiyi düz, koyu bir şerit olarak göstermenize olanak tanır.


2.3 Belgeye stil ekleme

belgelerinizdeki metin bilgilerini vurgulamak için farklı yazı tipi stilleri kullanmanıza olanak tanır. Burada kısa listeçoğu tarayıcı tarafından desteklenen stiller: (kalın) (italik) aralıklı (yazıcı - sabit yazı tipleri kullanarak)

birleştirebilirsiniz Farklı türde kalın ve italik gibi stiller.


Tablo #1: Temel Metin Stilleri




Stilleri birleştirmek, birden fazla öğeyi aynı satırda farklı stillerle görüntülemenize olanak tanır, örneğin:

Hayat - şarkı!

Hayat bir şarkıdır!

Dikkat! Büyük bir sayı stiller ve bunların kombinasyonları metni okumayı zorlaştırıyor!

Ek stiller:

büyük (büyük)

küçük küçük)

alt (abone)

destek (üst simge)


Tablo #2: Ek Metin Stilleri




Yazı Boyutu . Yazı tipi boyutunu şu etiketi kullanarak değiştirebilirsiniz:

Yazı tipinin boyutu 1'den 7'ye kadar olabilir. Yazı tipi boyutunu doğrudan sayı olarak belirtebilir veya temel değerden (varsayılan olarak 3) pozitif veya negatif yönde bir uzaklık belirleyebilirsiniz. Temel değer şu etiket kullanılarak değiştirilebilir:

Örneğin:

değiştirmek

Yazı tipi rengini değiştirme. Yazı tipi rengini şu etiketi kullanarak değiştirebilirsiniz: