Merhaba arkadaşlar! Blogumu birçok kez okuyanlar, defalarca söylediğimi biliyorlar: İnternette gezinmek için özel programlama becerilerine sahip olmanıza gerek yok.

Evet, bu böyledir ve sözlerimi reddetmiyorum, ancak sadece özel hizmetler olduğu için ve. Bunları kullanmıyorsanız, bir web kaynağı oluşturmak ve doldurmak için programlama dillerini bilmeniz gerekir.

Bir web sitesi oluşturmak için hangi dillerin gerekli olduğunu bilmek ister misiniz? O halde okumaya devam edin!

Bazı temel hükümler

Bir web sitesi geliştirmeye başlamak için aynı anda birkaç dil kullanmanız gerekir. Aynı zamanda bunlardan birinin diğerlerinden daha iyi veya daha kötü olduğu söylenemez. Başkalarına göre avantaj, ancak belirli bir sorunu çözerken ortaya çıkabilir.

Birinin veya diğerinin seçimi tamamen programcının beceri düzeyine bağlıdır, çünkü aynı anda tüm dilleri bilen bir uzman bulmak nadiren mümkündür.

Öncelikle, bir programlama dilinin bir web kaynağı oluşturmanıza izin veren temel bir sözdizimi olduğunu söylemek istiyorum.

Kesinlikle herhangi bir sitenin temeli. Bu sözdizimi, köprü metni işaretlemesinden sorumludur. Tüm web geliştiricileri, çarpım tablosunun yanı sıra bunu da bilmelidir.

Kullanılsa bile hazır çözümlertemel bilgi önemlidir. Bir İnternet kaynağı ve içeriği oluşturma sürecinin tamamı html kodu kullanılarak gerçekleştirilir. Ancak yalnızca onu kullanarak, kullanıcı geri bildirimi olmadan yalnızca bilgi için bilgi sağlayan basit bir İnternet sitesi oluşturabilirsiniz. İyi bir dinamik kaynak için bu yeterli değildir!

Ana programlama dilleri

Her şeyden önce, JavaScript'i vurgulamaya değer, çünkü bir web kaynağı oluştururken bilmeniz gereken tüm programlamanın temelidir. Temel yazılım platformları Silver Light ve Adobe Flash programı. Dahası, ikincisi oldukça yaygındır ve web geliştiricileri tarafından nispeten uzun bir süredir kullanılmaktadır.

Bu diller etkileşimli siteler oluşturmak için kullanılır. Silver Light'ın yakında Adobe Flash'ın yerini alacağı tahmin ediliyor. Nadir durumlarda, bu ikisi yazılım ürünleri bir web sitesi oluşturmak için oldukça yeterli, ancak yalnızca bunları kullanmak son derece istenmeyen bir durumdur.

Uygun söz diziminin seçimi, geliştiricinin kullandığı işletim sistemine de bağlıdır. Windows'ta bir web kaynağı oluşturmak için, Microsoft tarafından geliştirilen bir teknoloji - ASP.NET sıklıkla kullanılır. Hem en basit hem de önemli sayıda isteği işleyebilen, kesinlikle herhangi bir web kaynağı oluşturmanıza olanak tanır. ASP.NET'i kullanmak için kullanıcı düzeyinde bilgiye sahip olmamanız, ancak biraz daha derin bilgiye sahip olmanız gerekir.

Programcılar arasında en popüler sözdizimi PHP'dir. Yüksek hızlı performans ve basit sözdizimi gibi birçok avantajı vardır. Bugün motorların aslan payı PHP ile yazılmıştır.

Web programlamayı anlamaya başlarken, çoğu kişi Java'yı seçer, bu en anlaşılır ve öğrenmesi kolay olanıdır. Java Sunucusu Sayfaları içerik oluşturmak için kullanılır.

İÇİNDE son zamanlar Ruby çok sık kullanılır. Üstelik popülaritesi her geçen gün artıyor. Ben kendim henüz kullanmadım, ancak konuyu incelerken onun hakkında birçok coşkulu yorum buldum. Deneyimli geliştiriciler, Ruby'yi hızlı bir şekilde web siteleri oluşturmak için en uygun sözdizimi olarak vurgularken, aynı zamanda kaynağın gerekli işlevselliğine de izin verir.

Sonuç

Uygun sözdizimini seçmek için birkaç parametre vardır:

  • Kullanılan işletim sistemi türü;
  • Oluşturulan sitenin karmaşıklığı ve dinamizmi;
  • Kendi bilgisinin mevcut cephaneliği.

Bir web kaynağı oluştururken hangi programlama dillerine ihtiyaç duyabileceğinizi ve hepsini aynı anda kullanmak veya herhangi birini tercih etmek sizin işinizdir dedim.

Umarım bu materyal sizin için yararlı olmuştur ve bu makaleyi arkadaşlarınızla paylaşmaktan mutluluk duyarsınız. sosyal ağlar... Blog güncellemelerine abone olmayı unutmayın. Yakında görüşürüz!

Saygılarımla! Abdullin Ruslan

Çeşitli yönelimlerin işlevselliğini uygulamak için, web programcıları uygun olanı kullanarak siteleri "yazar" web biçimlendirme dilleri, web kaynağının etkileşimli yeteneklerini en üst düzeye çıkarmak için. Web terminolojisinin ormanına derinlemesine dalmayacağız, ancak sadece proje tartışması sırasında ve daha sonraki uygulama sırasında ortaya çıkabilecek site kodunu yazmanın ana noktalarını anlamanıza yardımcı olacağız.

HTML

HTML İnternetin gelişiminin başlangıcında ortaya çıkan en eski web programlama dillerinden biridir ve web programlamanın en basit ve en güvenilir yöntemlerinden biri olarak kendini kanıtlamıştır. HTML, Köprü Metni Biçimlendirme Dili - Köprü Metni Biçimlendirme Dili anlamına gelir. Çoğunlukla HTML teknolojisi kullanılarak oluşturulan siteler, bir veritabanı gerektirmeyen bir dizi statik sayfadır.

HTML teknolojisi, işlevselliği etkileşim ve dinamik gerektirmeyen birkaç sayfalı küçük, hafif siteler oluşturmak için uygun olabilir.

Herhangi bir teknoloji gibi, HTML standardı da durmuyor ve bugün HTML5 adlı yeni bir standart web geliştirme ortamına giriyor. Bu teknoloji çok genç, ancak site oluşturma açısından harika fırsatlar sunuyor ve daha önce imkansız olan yeni işlevselliği uygulamanıza izin veriyor. HTML5 teknolojisi henüz web geliştirme alanına tam olarak girmemiş olsa ve henüz tüm İnternet tarayıcıları bunu desteklemese de, stüdyo sitesinin programcıları HTML5'in daha fazla gelişme İnternet teknolojileri gelecekte ve en gelişmiş web programlama teknolojilerini kullanarak siteler yaratıyorlar.

PHP

PHP sunucu tarafı bir programlama dilidir ve siteyi sunucu ve veritabanıyla iletişim kurar. PHP'nin kendisi bir site oluşturmaktan sorumlu değildir ve böyle bir kaynağın sayfa koduna bakarsanız, aynı HTML'yi yalnızca PHP kodu ile serpiştirilmiş olarak göreceğiz.

PHP sitelerinde, HTML ile yazılmış kodun bir kısmı bilginin görünümünden ve görüntülenmesinden, PHP ise işlevselliğin dinamiklerinden ve etkileşiminden sorumludur. Basitliği, esnekliği ve işlemlerin gerçekleştirilme hızı nedeniyle, PHP dili web geliştirmede en popüler standartlardan biridir.

Stüdyo sitesi tarafından oluşturulan sitelerin çoğunun geliştirilmesinde PHP teknolojisi kullanıldı, çünkü siteyi veri tabanına PHP kodu aracılığıyla bağlamak dinamik, çok işlevli İnternet kaynakları oluşturmak için vazgeçilmez bir koşuldur.

FLAŞ

Esasen teknolojinin kendisi kızarma bir web programlama dili değildir, ancak XML'de yazılmış öğeleri oluşturmak için kullanılır.

Flash teknolojisi kullanarak bir web sitesi oluşturmak karmaşık ve zaman alıcı bir süreçtir, ancak sonuç, harcanan çabaya ve paraya değer. Flash öğeleri, sitenizi parlak ve etkileşimli yapmanıza olanak tanır. Canlı, dinamik sayfalar ziyaretçileriniz üzerinde kalıcı bir izlenim bırakacak ve sitenizin olumlu bir imajı uzun süre büyülenen kullanıcıların zihninde kalacaktır. Şirketin kaynağında flaş teknolojisinin kullanımından kaynaklanan imajı, yalnızca flaş üzerinde yapılan unsurlar ucuz olmadığı ve lüks olarak kabul edildiği için fayda sağlayacaktır.

Ancak her şeyde, dedikleri gibi, ne zaman duracağınızı bilmeniz gerekir ve flash sitelerin oluşturulması bir istisna değildir. Flash bloklar standart ağ elemanlarından çok daha ağırdır ve bu nedenle yüklenmesi daha uzun sürer. Ve netizenler, kural olarak beklemeyi sevmezler. Bu nedenle, flash sitenizin oluşturulmasını, maksimum üretken çalışma için optimize edecek profesyonellere emanet edin.

WAP

WAP (Kablosuz Uygulama Protokolü) İnternet kaynaklarına doğrudan mobil cihazınızdan erişmenizi sağlayan bir teknolojidir.

Bir WAP sitesi ile normal bir İnternet kaynağı arasındaki temel fark, WAP sitesinin, telefonların ve iletişim cihazlarının küçük ekranlarında görüntülenmek üzere "keskinleştirilmesi" ve bununla bağlantılı olarak, bir WAP sitesi, WAP portalının sayfa ağırlığını hafifletmeyi ve site içeriğinin özellikle telefonun WAP tarayıcısında görüntülenmek üzere optimize edilmesini amaçladı.

WAP için yazılmış sitelerin, bir WAP tarayıcısı ile bilgi alışverişi için özel olarak uyarlanmış kendi biçimlendirme dilleri vardır. Ve bilgisayardan görüntülenmek üzere tasarlanmış sıradan siteler çoğunlukla dillerde yazılmışsa html, php, Perlveya xml, WML standardı WAP siteleri oluşturmak için kullanılır ( Kablosuz Biçimlendirme Dili). Diğer şeylerin yanı sıra, WAP kaynaklarının geliştirilmesi kendi görüntü formatını kullanır - WBMP, bu da WAP sayfasını en üst düzeyde basitleştirmeyi mümkün kılar.

Mobil cihazlar için pazarın sürekli büyümesi nedeniyle, veri aktarım standartları da dünya çapındaki ağ ve mobil cihazlarBu nedenle, web stüdyosu sitesinin uzmanları, bu site oluşturma endüstrisindeki yenilikleri izlemeyi bırakmazlar ve WAP sitelerinin geliştirilmesinde her zaman en ilerici yöntemleri ve ileri teknolojileri kullanırlar.

ASP

ASP (Aktif Sunucu Sayfaları), işletmeniz için dinamik ve güçlü web çözümleri oluşturmak için HTML, komut dosyası oluşturma ve ActiveX sunucu bileşenlerini birleştirmenize olanak tanıyan açık kaynaklı bir web geliştirme ortamıdır. ASP sayfaları, sunucu tarafında yürütülen komut dosyalarını içeren sayfalardır.

Perl

Perl (Pratik Çıkarma ve Raporlama Dili) sunucu tarafında çalışan ve sitenin işini otomatikleştirmenize izin veren cgi betikleri ve cgi programları yazmak için kullanılan evrensel, yorumlanmış bir web programlama dilidir. Perl, dinamik web sayfaları oluşturmak için en uygun ve en yaygın ortamlardan biridir, ancak son zamanlarda yerini daha yeni İnternet teknolojileri almıştır. Perl formatı, CGI aracılığıyla web sunucularıyla etkileşim kurmak için mükemmel bir araçtır ( ortak etkileşim arayüzü). Şu anda Perl dili, işlevsel analoğu PHP ile ilgili olarak zayıflamaktadır.

C +

C, C ++ - cgi betikleri yazmak için kullanılan yaygın web programlama dilleri. Şu anda çoğu sunucu tarafından desteklenmektedir. C + ile yazılan betikler sunucu tarafında derlenmelidir.

SGK

SGK (Sunucu Tarafı Dahil Et), bir web sayfasını birkaç komut dosyasından veya dosyadan tek, işlevsel bir bütün halinde birleştirmenize olanak tanıyan bir teknolojidir. SSI, HTML kullanılarak kullanılamayan bir web sayfasına sunucu hakkında bilgi eklemenize izin verir. Aslında, SSI, PHP kapanımlarının bir tür analogudur. Site koduna her bir veya bir grup sayfa için ortak olan öğeleri yerleştirmenize olanak tanır ve her sayfayı yalnızca bir dosya üzerinden düzenlemenize olanak tanır. SSI direktifleri desteklenmektedir .shtml, .htm ve .html ve .htaccess dosyasına yazılır.

Web sitesi geliştirme, birkaç aşamaya ayrılmış karmaşık bir süreçtir. İlk aşamada, web sitesi tasarımı bir grafik biçiminde yapılır: sözde eskizler veya site prototipleri. Aslında, müşteriye onay için sağlanan gelecekteki sitenin birkaç renkli görüntüsü gibi görünüyor.

Bir web sitesinin çizimleri veya prototipleri genellikle grafik tasarım programlarında oluşturulur. Profesyonel programlardan en yaygın üçünü seçeceğiz - bunlar, Adobe illustratorve Corel çizgisi... Elbette, daha az profesyonel ama daha az ilginç olmayan birçok program var, ancak şimdilik bunlara odaklanmayacağız.

Sıradaki aşama - bu, müşteri tarafından bu eskizlerin sayısız düzeltme ve onayından oluşan sıkıcı bir dizi.

Peki, sitenin tasarımı müşteri tarafından oluşturuldu, revize edildi ve onaylandı, şimdi düzenlenmesi gerekiyor, peki ama düzen nedir?

Bir aşama daha bir site oluştururken: düzen.
Yerleşim bir sitenin taslağına veya prototipine dayalı bir Web sayfasının oluşturulmasıdır. Ve bu, tasarımcının yukarıdaki programlardan birinde "oluşturduğu" her şeyin yanı sıra metin yazarının metin dosyaları biçiminde yazdığı her şeyin, düzen programcısının dikkatli ve anlamlı bir şekilde kesmesi, her sayfanın kodunu yazması gerektiği anlamına gelir. dilimlenmiş resimleri ve metni yerleştirin, sayfaları uçtan uca bağlantılar ve geçişler ile birleştirin, formlar vb. ekleyin, vb ... Monoton, rutin çalışma. Web sitesi oluşturma aşamaları hakkında daha fazla bilgi edinebilirsiniz.

Ve son olarak, son aşama - bitmiş siteyi kalıcı dağıtım sunucusuna "yüklemek", kurulum ve hata ayıklama, böylece her şey ihtiyaç duyduğumuz gibi sorunsuz çalışır.

Bu nedenle, bir web sitesi yazmak için aşağıdaki gibi programlama dillerini bilmeniz gerekir: HTML, CSS, JavaScript, PHP, MYSQL... Başka diller de var ama bunlar günümüzün en popüler dilleri. Ve size her dili daha ayrıntılı olarak anlatacağım.

HTML (Köprü Metni Biçimlendirme Dili), bilgilerin nasıl görüntülendiğini açıklayan bir biçimlendirme dilidir. Bu dil sitenin temelini, diğer bir deyişle sitenin iskeletini oluşturmak için kullanılır.

CSS (Basamaklı Stil Sayfaları), bir Web sayfasının görünümünü kontrol edebileceğiniz bir dildir. CSS ile, bir Web sayfasının hemen hemen tüm öğelerinin tam özelliklerini tanımlayabilirsiniz.

JavaScript tabiri caizse, bir Web sayfasını "canlandırmak" için kullanılan bir dildir, bu dilin yardımıyla bir Web sayfasını etkileşimli hale getirebilir veya başka bir deyişle kullanıcıyla etkileşime girebilirsiniz. Pop-up'lar veya araç ipuçları ve çok daha fazlasını yapmak için kullanılabilir. Bu dil sadece Web geliştirmede kullanılmak için değildir.

PHP sunucu betikleri yazmak için kullanılan bir dildir. Şu anda en popüler olanı ve öğrenmesi zor değil. FROM pHP kullanarak Sunucudaki verileri işleyebilir, dosyalarla çalışabilir, mektuplar gönderebilir, sohbet, forum yayınlayabilir ve çok daha fazlasını yapabilirsiniz.

MYSQL bir veritabanıdır. Bu dili kullanarak veri ekleyebilir, değiştirebilir veya silebilir, talep üzerine bilgi alabilirsiniz. MYSQL'i biliyorsanız, diğer veritabanı dillerini de kolayca öğrenebilirsiniz.

HTML ve CSS'de web siteleri oluşturma derslerine başlamadan önce, iki dil arasındaki farkları, her dilin sözdizimini ve bazı temel terminolojiyi anlamak önemlidir.

Html-ve-css-nedir?

HTML (HyperText Markup Language), başlıklar, paragraflar veya resimler gibi içeriği tanımlayarak içeriğin yapısını ve anlamını tanımlar. CSS (Basamaklı Stil Sayfaları) veya Basamaklı Stil Sayfaları, sunum için tasarlanmış bir sunum dilidir görünüm örneğin yazı tipleri veya renkler kullanan içerik.

Bu iki dil - HTML ve CSS - birbirinden bağımsızdır ve öyle kalmalıdır. CSS bir HTML belgesinin içine yazılmamalıdır ve bunun tersi de geçerlidir. Tipik olarak, HTML her zaman içeriği temsil eder ve CSS her zaman görünümünü belirler.

HTML ve CSS arasındaki farkın bu şekilde anlaşılmasıyla, HTML'ye daha ayrıntılı olarak bakalım.

Temel HTML terimleri

HTML kullanmaya başlamadan önce, yeni ve genellikle garip terimlerle karşılaşmanız olasıdır. Zamanla hepsine daha aşina olacaksınız, ancak şimdilik HTML'nin üç temel terimiyle başlamalısınız - öğeler, etiketler ve öznitelikler.

Elementler

Öğeler, bir sayfadaki nesnelerin yapısının ve içeriğinin nasıl tanımlanacağını gösterir. Yaygın olarak kullanılan öğelerden bazıları, birden çok düzeyde başlık içerir (

önce

) ve paragraflar (olarak tanımlanır

); listeye öğeler ekleyebilirsiniz ,

, , ve Ve bircok digerleri.

Öğeler, açılı parantez kullanılarak tanımlanır<>öğe adını çevreleyen. Böylece öğe şöyle görünecek:

Etiketler

Açılı parantez ekleme< и > öğenin etrafında etiket olarak bilinen şeyi oluşturur. Etiketler en yaygın olarak başlangıç \u200b\u200bve bitiş etiketi çiftlerinde bulunur.

Açılış etiketi, bir öğenin başlangıcını belirtir. Sembolden oluşur<, затем идёт имя элемента и завершается символом >; Örneğin,

.

Bitiş etiketi, bir öğenin sonunu gösterir. Sembolden oluşur< с последующей косой чертой и именем элемента и завершается символом >; Örneğin,

.

Başlangıç \u200b\u200bve bitiş etiketleri arasına düşen içerik, bu öğenin içeriğidir. Örneğin bir bağlantı, bir açılış etiketine sahip olacaktır ve kapanış etiketi ... Bu iki etiketin arasında ne varsa, bağlantının içeriği olacaktır.

Dolayısıyla, bağlantı etiketleri şuna benzer:

...

Öznitellikler

Öznitelikler sağlamak için kullanılan özelliklerdir ek bilgi öğe hakkında. En yaygın özellikler, öğeyi tanımlayan id niteliğini içerir; elemanı sınıflandıran sınıf özelliği; gömülü içeriğin kaynağını tanımlayan src özelliği; ve bağlantılı kaynağa bir bağlantıyı gösteren bir href niteliği.

Öznitelikler, öğe adından sonra başlangıç \u200b\u200betiketinde tanımlanır. Genel olarak, nitelikler ad ve değeri içerir. Bu özniteliklerin biçimi öznitelik adının ardından bir eşittir işaretinden ve ardından özniteliğin tırnak içindeki değerinden oluşur. Örneğin, element href özelliği şu şekilde görünür:

Shay howe

Temel HTML terimlerinin gösterimi

Bu kod web sayfasında "Shay Howe" metnini gösterecek ve tıklandığında kullanıcıyı http://shayhowe.com adresine götürür. Bağlantı öğesi, bir açılış etiketiyle bildirilir ve kapanış etiketi açılış etiketinde href \u003d "http://shayhowe.com" aracılığıyla bildirilen bağlantının URL'sinin özniteliği ve değerinin yanı sıra metni de kapsar.

Şekil: 1.01. Şema HTML sözdizimi öğe, nitelik ve etiketi içerir

Artık HTML öğelerinin, etiketlerinin ve özniteliklerinin ne olduğunu bildiğinize göre, ilk web sayfamıza bir göz atalım. Burada bir şey yeni görünüyorsa endişelenmeyin - yol boyunca her şeyi deşifre edeceğiz.

HTML belge yapısını kurma

HTML belgeleri basittir metin belgeleri.txt yerine .html uzantısıyla kaydedilir. HTML yazmaya başlamak için önce rahatça kullanabileceğiniz bir metin düzenleyiciye ihtiyacınız var. Ne yazık ki bu, karmaşık düzenleyiciler oldukları için Microsoft Word veya Pages'ı içermez. Dreamweaver ve Sublime Text, HTML ve CSS yazmak için en popüler iki metin düzenleyicidir. Ücretsiz alternatifler ayrıca Windows için Notepad ++ ve Mac için TextWrangler'dır.

Tüm HTML belgeleri, aşağıdaki bildirimleri ve öğeleri içeren zorunlu bir yapı içerir: , , ve .

Belge türü beyanı veya HTML belgesinin en başında yer alır ve tarayıcılara hangi HTML sürümünün uygulandığını bildirir. Kullanacağımızdan beri en son sürüm HTML, bizim belge türümüz sadece ... Bunu öğesi takip eder belgenin başlangıcını belirtir.

İçeride element tanımlar üst parça çeşitli meta verileri içeren belge (sayfayla ilgili bilgiler). Öğe içindeki içerik web sayfasının kendisinde görünmüyor. Bunun yerine, belgenin başlığını (tarayıcı penceresinin başlık çubuğunda görünen), herhangi bir harici dosyaya bağlantıları veya diğer yararlı meta verileri içerebilir.

Web sayfasının tüm görünür içeriği öğesinde olacaktır ... Tipik bir HTML belgesinin yapısı şu şekildedir:

Selam Dünya!

Selam Dünya!

Bu bir web sayfasıdır.

Bir HTML belgesinin yapısının gösterilmesi

Bu kod, belge türü bildirimiyle başlayan belgeyi gösterir, , sonra hemen element gelir ... İçeride öğeler gider ve ... Eleman etiket aracılığıyla sayfa kodlaması içerir ve eleman aracılığıyla belgenin başlığı ... Eleman <body> bir öğe aracılığıyla bir başlık içerir <h1> ve bir paragraf metin<р> ... Hem başlık hem de paragraf öğenin içinde iç içe olduğundan <body> , web sayfasında görülebilirler.</p><p>Bir öğe, iç içe geçmiş öğe olarak da bilinen başka bir öğenin içinde olduğunda, belge yapısını iyi organize edilmiş ve okunabilir tutmak için ona girinti eklemek iyi bir fikirdir. Önceki kodda, her iki öğe <head> ve <body> bir öğe içinde yuvalanmış ve kaydırılmış <html> ... Öğeler için dolgu yapısı, içindeki yeni eklenen öğelerle devam ediyor <head> ve <body> .</p><h3>Kendiliğinden kapanan elemanlar</h3><p>Önceki örnekte, eleman <meta> bitiş etiketi içermeyen tek etiketti. Merak etmeyin, bu kasıtlıydı. Tüm öğeler başlangıç \u200b\u200bve bitiş etiketlerinden oluşmaz. Bazı öğeler, içeriği veya davranışı aynı etiket içindeki öznitelikler aracılığıyla alır. <meta> böyle bir unsurdur. Öğe içeriği <meta> örnekte karakter kümesi özniteliği ve değeri kullanılarak atanmıştır. Diğer tipik kendiliğinden kapanan unsurlar şunları içerir:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Belge türü bildirimi ile yapılan azaltılmış yapı<!DOCTYPE html> ve elementler <html> , <head> ve <body> , oldukça yaygındır. Yeni HTML belgeleri oluştururken sıkça kullanacağımız için bu belge yapısını kullanışlı tutmak istiyoruz.</p><h3>Kod doğrulama</h3><p>Kodumuzu ne kadar dikkatli yazarsak yazalım hatalar kaçınılmazdır. Neyse ki, HTML ve CSS yazarken, çalışmamızı doğrulamak için doğrulayıcılarımız var. W3C, kodu hatalara karşı tarayan HTML ve CSS doğrulayıcıları sunar. Kodumuzu doğrulamak, yalnızca tüm tarayıcılarda doğru şekilde görüntülenmesine yardımcı olmakla kalmaz, aynı zamanda kodlama için en iyi uygulamaları öğretmeye de yardımcı olur.</p><h2>Pratikte</h2><p>Web tasarımcıları ve ön uç geliştiricileri olarak, zanaatımıza adanmış bir dizi harika konferansa katılma lüksüne sahibiz. Sonraki derslerde kendi Tarzlar Konferansımızı düzenleyeceğiz ve bunun için bir web sitesi oluşturacağız. Böyle!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>HTML'den biraz uzaklaşalım ve CSS'ye bir göz atalım. Unutmayın, HTML web sayfalarımızın içeriğini ve yapısını, CSS ise görsel stillerini ve görünümlerini tanımlar.</p><h2>Temel CSS terimleri</h2><p>HTML terimlerine ek olarak, aşina olmanız gereken birkaç temel CSS terimi vardır. Bu terimler seçicileri, özellikleri ve değerleri içerir. HTML terminolojisinde olduğu gibi, CSS ile ne kadar çok çalışırsanız, bu terimler sizin için o kadar çok doğal hale gelir.</p><h3>Seçiciler</h3><p>Öğeler bir web sayfasına eklendiğinde CSS kullanılarak stilize edilebilir. Seçici, HTML'deki hangi öğe veya öğeleri hedefleyeceğini ve bunlara stilleri (renk, boyut ve konum gibi) uygulayacağını belirler. Seçiciler, ne kadar spesifik olmak istediğimize bağlı olarak benzersiz öğeleri seçmek için farklı metriklerin bir kombinasyonunu içerebilir. Örneğin, bir sayfadaki her paragrafı veya yalnızca belirli bir paragrafı seçmek istiyoruz.</p><p>Seçiciler genellikle id veya sınıf değeri gibi bir öznitelik değeri veya aşağıdaki gibi bir öğe adı ile ilişkilendirilir: <h1> veya<р> .</p><p>CSS'de seçiciler, seçili öğeye uygulanan stilleri kapsayacak şekilde süslü parantezlerle () birleştirilir. Bu seçici tüm öğeleri hedefler <span><p>P (...)</p><h3>Özellikleri</h3><p>Bir öğe seçildiğinde, özellik kendisine uygulanacak stilleri belirler. Özellik adları seçiciyi takip eder, kaşlı ayraçlar () içinde ve iki nokta üst üste işaretinin hemen öncesine gelir. Arka plan, renk, yazı tipi boyutu, yükseklik ve genişlik ve diğer yaygın olarak eklenen özellikler gibi kullanabileceğimiz birçok özellik vardır. Aşağıdaki kodda, tüm elemanlar için geçerli olan renk ve yazı tipi boyutu özelliklerini tanımlıyoruz. <span><p>P (renk: ...; yazı tipi boyutu: ...;)</p><h3>Değerler</h3><p>Şimdiye kadar, bir seçici aracılığıyla yalnızca bir öğe seçtik ve özellikler aracılığıyla ona hangi stili uygulamak istediğimizi belirledik. Şimdi bu özelliğin davranışını değer aracılığıyla ayarlayabiliriz. Değerler, iki nokta üst üste ve noktalı virgül arasında metin olarak belirtilebilir. Aşağıda tüm unsurları seçiyoruz <p >Ve color özelliğinin değerini turuncu ve font-size özelliğinin değerini 16 piksel olarak ayarlayın.</p><p>P (renk: turuncu; yazı tipi boyutu: 16 piksel;)</p><p>CSS'de test etmek için kural setimiz bir seçici ile başlar ve hemen ardından kaşlı ayraçlar gelir. Bu küme parantezleri, özellik ve değer çiftlerinin bildirimlerini içerir. Her bildirim bir özellik ile başlar, ardından iki nokta üst üste, özellik değeri ve son olarak noktalı virgül gelir.</p><p>Küme ayraçları içinde bir çift özellik ve değerin kaydırılması yaygın bir uygulamadır. HTML'de olduğu gibi, girinti, kodumuzun düzenli ve anlaşılır olmasına yardımcı olur.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Şekil: 1.03. CSS söz diziminin yapısı, seçici, özellikler ve değerleri içerir</p><p>Birkaç temel terimi ve genel CSS sözdizimini bilmek harika bir başlangıçtır, ancak derinlemesine atlamadan önce öğrenmemiz gereken birkaç nokta daha var. Özellikle seçicilerin CSS'de nasıl çalıştığına daha yakından bakmamız gerekiyor.</p><h2>Seçicilerle çalışma</h2><p>Seçiciler, daha önce bahsedildiği gibi, hangi HTML öğelerinin stil uygulanacağını belirtir. Seçicilerin nasıl kullanılacağını ve nasıl çalıştıklarını tam olarak anlamak önemlidir. İlk adım, farklı seçicilere aşina olmaktır. En temel seçicilerle başlayacağız: tür seçiciler, sınıflar ve tanımlayıcılar.</p><h3>Tür seçiciler</h3><p>Tür seçiciler, türlerine göre öğeleri hedefler. Örneğin, tüm öğeleri hedeflemek istiyorsak <div> bir div seçici kullanmalıyız. Aşağıdaki kod, öğeler için bir tür seçiciyi gösterir. <div> yanı sıra karşılık gelen HTML.</p><p>Div (...)</p><p> <div>...</div> <div>...</div> </p><h3>Sınıflar</h3><p>Sınıflar, sınıf özniteliğinin değerine göre bir öğe seçmenize izin verir. Sınıf seçiciler, aynı türdeki tüm öğeler yerine belirli bir öğe grubunu seçtiklerinden, tür seçicilerden biraz daha spesifiktir.</p><p>Sınıflar, birden çok öğe için aynı sınıf öznitelik değerini kullanarak aynı stilleri farklı öğelere aynı anda uygulamanıza olanak tanır.</p><p>CSS'de, sınıflar önlerinde bir nokta ve ardından class özniteliğinin değeri ile belirtilir. Sınıf seçicinin altında, öğeler dahil harika sınıf özellik değerini içeren tüm öğeleri seçer. <div> ve <span><p>Müthiş (...)</p><p> <div class="awesome">...</div> </p><h3>Tanımlayıcılar</h3><p>Tanımlayıcılar, bir seferde yalnızca bir benzersiz öğeyi hedefledikleri için sınıflardan bile daha doğrudur. Sınıf seçicilerinin sınıf özniteliğinin değerini kullanması gibi, tanımlayıcılar da seçici olarak id özniteliğinin değerini kullanır.</p><p>Görüntülenen öğenin türüne bakılmaksızın, id özniteliğinin değeri her sayfada yalnızca bir kez kullanılabilir. Kimlikler varsa, önemli öğeler için ayrılmalıdırlar.</p><p>CSS'de, tanımlayıcılar önünde bir karma sembolü ve ardından id niteliğinin değeri ile belirtilir. Burada id yalnızca shayhowe değerine sahip id niteliğini içeren öğeyi seçecektir.</p><p> #hayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Ek seçiciler</h3><p>Seçiciler son derece güçlüdür ve yukarıda açıklananlar karşılaştığımız en yaygın seçiciler arasındadır. Bu seçiciler sadece başlangıç. Kullanılabilen ve kolayca ulaşılabilen birçok gelişmiş seçici vardır. Onlarla rahat olduğunuzda, daha ilerici olanlardan bazılarına bakmaktan korkmayın.</p><p>Tamam, her şeyi bir araya getirmeye başlayalım. HTML'mizin içindeki sayfaya öğeler ekliyoruz, ardından bu öğeleri seçip CSS ile biçimlendirebiliyoruz. Şimdi iki dilin birlikte çalışması için HTML ve CSS arasındaki noktaları birleştirelim.</p><h2>CSS'yi bağlama</h2><p>CSS'mizi HTML'mizle konuşturmak için, HTML'den CSS dosyasına işaret etmemiz gerekir. Tüm stillerimizi bir araya getirmek iyi bir uygulamadır <a href="https://crashbox.ru/tr/installation-and-configuration/ne-kopiruetsya-bolshoi-fail-na-vneshnii-disk-reshenie-problemy-s-nevozmozhnostyu/">harici dosya</a>, elemanın içinde bir işaretçi olduğu <head> HTML belgemiz. Aynı harici CSS'yi kullanmak, aynı stilleri site genelinde uygulamamıza ve hızlıca değişiklik yapmamıza olanak tanır.</p><h3>CSS eklemek için diğer seçenekler</h3><p>CSS'yi bağlamak için diğer seçenekler arasında satır içi ve satır içi stillerin kullanılması yer alır. Gerçekte bu seçeneklerle karşılaşabilirsiniz, ancak sitelerin güncellenmesini hantal ve hantal hale getirdikleri için genellikle önerilmez.</p><p>Harici stil sayfamızı oluşturmak için, seçili metin düzenleyiciyi kullanarak .css uzantılı yeni bir metin dosyası oluşturmak istiyoruz. CSS dosyamız, HTML dosyamızla aynı klasöre veya alt klasöre kaydedilmelidir.</p><p>İç eleman <head> öğe uygulandı <link> HTML ve CSS dosyaları arasındaki ilişkiyi tanımlar. CSS'ye bağladığımız için, ilişkilerini belirtmek için rel özelliğini bir stil sayfası değeriyle birlikte kullanırız. Ek olarak, href niteliği CSS dosyasının konumunu veya yolunu belirtmek için kullanılır.</p><p>Aşağıdaki örnek HTML belgesinde, öğe <head> harici bir stil dosyasına işaret ediyor.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS'nin doğru şekilde oluşturulması için href niteliğinin yol değeri, CSS dosyasının kaydedildiği yerle doğrudan eşleşmelidir. Önceki örnekte main.css dosyası, kök klasör olarak da bilinen HTML dosyasıyla aynı konumda depolanır.</p><p>CSS dosyası bir alt klasörde bulunuyorsa, href niteliğinin değeri buna göre bu yola karşılık gelmelidir. Örneğin, main.css dosyamız stil sayfaları adlı bir alt klasöre kaydedilmişse, href niteliğinin değeri, stil sayfaları / main.css olacaktır. Bir alt klasöre geçişi belirtmek için eğik çizgi (veya eğik çizgi) kullanır.</p><p>Bu noktada sayfalarımız yavaş ama emin adımlarla canlanmaya başlıyor. Henüz CSS'yi çok derinlemesine araştırmadık, ancak bazı öğelerin CSS'mizde belirtmediğimiz stilleri olduğunu fark etmiş olabilirsiniz. Bu tarayıcı, bu öğeler üzerinde kendi tercih edilen stillerini uygular. Neyse ki, bu stilleri oldukça kolay bir şekilde yeniden yazabiliriz, bundan sonra bir CSS sıfırlamasıyla yapacağız.</p><h2>CSS'yi sıfırlama kullanma</h2><p>Her tarayıcının farklı öğeler için kendi varsayılan stilleri vardır. Nasıl <a href="https://crashbox.ru/tr/protection/google-chrome-can-not-start-the-installer-the-windows-installer-service-is-not-available-we-solve-the-problem/">Google Chrome</a> başlıkları, paragrafları, listeleri vb. görüntüler, Internet Explorer'ın yaptığından farklı olabilir. Farklı tarayıcılarla uyumluluğu sağlamak için CSS sıfırlama yaygın olarak kullanılmaktadır.</p><p>CSS'yi sıfırlamak, belirli bir stile sahip tüm temel HTML öğelerini alır ve tüm tarayıcılarda tutarlı bir stil sağlar. Bu sıfırlamalar genellikle bu değerleri düşürmek için boyutları, dolguyu, kenar boşluklarını veya ek stilleri kaldırmayı içerir. CSS basamaklama yukarıdan aşağıya doğru çalıştığından (yakında öğreneceksiniz), sıfırlamamız tarzımızın en üstünde olmalıdır. Bu, önce bu stillerin okunmasını sağlayacaktır ve hepsi bu kadar. <a href="https://crashbox.ru/tr/solving-problems/chto-znachit-ochistit-kesh-brauzera-ochistka-kesha-raznyh/">farklı tarayıcılar</a> ortak bir referans noktasından çalışacaktır.</p><p>Uygulanabilecek tonlarca farklı CSS sıfırlaması vardır ve bunların hepsinin kendi güçlü yanları vardır. Eric Meyer'in en popülerlerinden biri olan CSS sıfırlaması, yeni HTML5 öğelerini içerecek şekilde uyarlandı.</p><p>Biraz maceraperest hissediyorsanız, Nicholas Gallagher tarafından oluşturulan Normalize.css de vardır. Normalize.css, tüm temel öğeler için bir donanım sıfırlaması kullanmaya değil, bunun yerine bu öğeler için ortak stiller belirlemeye odaklanır. Bu, CSS hakkında daha derin bir anlayış ve stillerden ne elde etmek istediğinize dair bilgi gerektirir.</p><h3>Tarayıcılar arası uyumluluk ve test</h3><p>Daha önce belirtildiği gibi, farklı tarayıcılar öğeleri farklı şekilde işler. Tarayıcılar arası uyumluluğun ve testin önemini anlamak önemlidir. Web sitelerinin tüm tarayıcılarda tam olarak aynı görünmesi gerekmez, ancak yakın olmaları gerekir. Hangi tarayıcıları desteklemek istediğiniz ve ne dereceye kadar siteniz için neyin en iyisi olduğuna bağlı olarak vermeniz gereken bir karar.</p><p>CSS yazarken dikkat etmeniz gereken birkaç nokta vardır. İyi haber şu ki, bu yapılabilir ve ustalaşmak biraz sabır gerektirir.</p><h2>Pratikte</h2><p>Konferans sitemizde en son kaldığımız yere geri dönelim ve nasıl CSS ekleyebileceğimize bakalım.</p><ol><li>Stil-konferans klasörümüzün içinde, oluşturalım <a href="https://crashbox.ru/tr/useful-tips/delete-the-old-windows-to-install-a-new-one-extra-folder-windows-old-how-to-remove/">yeni dosya</a> adlandırılmış varlıklar. Stiller, resimler, videolar vb. Gibi web sitemiz için tüm kaynakları burada saklayacağız. Stillerimiz için devam edip varlıklar klasörünün içine başka bir stil sayfaları klasörü ekleyelim.</li><li>Bir metin düzenleyici kullanarak main.css adında yeni bir dosya oluşturun ve onu az önce oluşturduğumuz stil sayfaları klasörüne kaydedin.</li><p>Bir tarayıcıdaki index.html dosyasına baktığımızda, elemanların <h1> ve <p>Zaten varsayılan stili içeriyor. Özellikle, benzersiz bir yazı tipi boyutu ve etraflarında boşluk var. Eric Meyer'in sıfırlamasını kullanarak bu stilleri yumuşatabiliriz, böylece her biri aynı temelden başlar. Bunu yapmak için, web sitesine bir göz atın, kodu kopyalayın ve main.css dosyamızın en üstüne yapıştırın.</p><p> / * http://meyerweb.com/eric/tools/css/reset/ 2.v2.0 | 20110126 Lisans: yok (genel etki alanı) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, büyük, alıntı, kod, del, dfn, em, img, ins, kbd, q, s, örnekleme, küçük, grev, güçlü, alt, sup, tt, var, b, u, i, merkez, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menü, nav, çıktı, yakut, bölüm, özet, zaman, işaret, ses, video (kenar boşluğu: 0; dolgu: 0; kenarlık: 0; yazı tipi boyutu:% 100; yazı tipi: devralma; dikey hizalama: taban çizgisi ;) / * Eski tarayıcılar için HTML5 görüntüleme rolü sıfırlama * / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section (display: block;) body (line-height: 1;) ol, ul (liste stili: yok;) blok alıntı, q (tırnak: yok;) blok alıntı: önce, blok alıntı: sonra, q: önce, q: sonra (içerik: ""; içerik: yok;) tablo (kenarlık- daralt: c ollapse; sınır aralığı: 0; )</p><li>Main.css dosyamız şekillenmeye başlıyor, hadi bunu index.html dosyamıza ekleyelim. İndex.html dosyasını şurada açın: <a href="https://crashbox.ru/tr/the-choice-of-operating-system/standartnye-prilozheniya-windows-7-perechen-standartnyh-programm-windows-bloknot-i/">metin düzeltici</a> ve öğeyi ekleyin <link> içinde <head> öğeden hemen sonra <title> .</li><li>Öğeler aracılığıyla stilleri gösterdiğimizden beri <link> rel özelliğini değer stil sayfasıyla ekleyin.</li><p>Ayrıca href özelliğini kullanarak main.css dosyamıza bir bağlantı da ekleyeceğiz. Main.css dosyamızın varlıklar klasörünün içindeki stil sayfaları klasörüne kaydedildiğini unutmayın. Dolayısıyla, main.css dosyamızın yolu olan href özniteliğinin değeri, assets / stylesheets / main.css olmalıdır.</p><p> <head> <meta charset="utf-8"> <title>Stiller konferansı

İşimizi test etme ve HTML ile CSS'mizin nasıl bir araya geldiğini görme zamanı. Bir tarayıcıda index.html dosyasını açmak (veya zaten açıksa sayfayı yenilemek) öncekinden biraz farklı bir sonuç göstermelidir.

Şekil: 1.04. CSS Sıfırlamalı Stil Konferansı Web Sitemiz

Demo ve kaynak kodu

Aşağıda Stiller Konferansı web sitesini şu anki haliyle görüntüleyebilir ve indirebilirsin kaynak şu anda site.

Özet

Yani sorun değil! Bu eğitimde birkaç büyük adım attık.

Bir düşünün, artık HTML ve CSS'nin temellerini biliyorsunuz. Devam ettikçe ve siz HTML ve CSS yazmaya daha fazla zaman harcadıkça, bu iki dille çalışırken çok daha rahat olacaksınız.

Aşağıdakileri ele aldığımızı hatırlayın:

  • HTML ve CSS arasındaki fark.
  • HTML öğeleri, etiketleri ve nitelikleriyle aşinalık.
  • İlk web sayfanızın yapısını oluşturmak.
  • CSS seçicilerine, özelliklerine ve değerlerine aşinalık.
  • CSS seçicilerle çalışma.
  • HTML'den CSS'ye bir işaretçi.
  • CSS sıfırlamanın önemi.

Şimdi HTML'ye daha yakından bakalım ve semantiğe biraz aşina olalım.

Kaynaklar ve bağlantılar

  • Scripting Master aracılığıyla genel HTML terimleri
  • Etkileyici Webler aracılığıyla CSS Terimleri ve Tanımları
  • CSS Araçları: Eric Meyer ile CSS'yi sıfırlayın

Web sayfaları herhangi bir formatta bulunabilir, ancak standart olarak benimsenen Hyper Text Markup Language, Web'de dağınık halde, zengin görüntüler, ses, animasyon, video klipler ve diğer belgelere hipermetin bağlantıları açısından zengin metin oluşturmak için tasarlanmış bir köprü metni biçimlendirme dilidir. ve aynı sunucuda bulunur veya aynı Web projesinin ayrılmaz bir parçası olur.

HTML bilmeden Web'de çalışabilirsiniz çünkü hTML metinleri çeşitli özel editörler ve dönüştürücüler tarafından oluşturulabilir. Ancak doğrudan HTML'ye yazmak zor değildir. Hatta çoğu zaman yetenekleriyle sınırlı olan, hatalar içeren veya platformlar arasında çalışmayan kötü HTML kodunu geçiren bir HTML düzenleyicisi veya dönüştürücüsünü öğrenmekten daha kolay olabilir.

HTML, çeşitli tatlarda mevcuttur ve gelişmeye devam etmektedir, ancak HTML yapılarının gelecekte kullanılması muhtemeldir. HTML'yi öğrenip anlayarak, HTML öğrenirken erken bir belge oluşturarak ve bunu mümkün olduğunca genişleterek, hem şimdi hem de gelecekte birçok Web tarayıcısı tarafından görüntülenebilecek Web sayfaları oluşturabiliyoruz. Bu, Netscape Navigator, Internet Explorer veya başka bir program tarafından sağlanan gelişmiş özellikler yöntemi gibi diğer yöntemleri kullanma olasılığını ortadan kaldırmaz.

HTML'de çalışmak, yalnızca gerçekten ihtiyaç duyulduğunda uzantıları kullanarak, standartlaştırılmış bir dilde belge oluşturmanın özelliklerini öğrenmenin bir yoludur.

HTML, World Wide Web Konsorsiyumu tarafından onaylanmıştır. Birkaç genel tarayıcı tarafından desteklenir ve neredeyse tüm Web ile ilgili yazılımların temelini oluşturması muhtemeldir.