Konuşmayı öğrenin "İnternet": xHTML Rehberiniz

İlan

İçindekiler

§1. Giriş

§2 – xHTML'ye Başlarken

§3 – CSS ile tasarım

§4 – Daha Fazla Bilgi

1. Giriş: xHTML nedir?

XHTML dünyasına hoş geldiniz - Genişletilebilir Köprü Metni Biçimlendirme Dili - herkesin birçok farklı işleve sahip web sayfaları oluşturmasına olanak tanıyan bir biçimlendirme dili (programlamaya benzer). Birçok yönden, İnternet'in birincil dili.

Peki, neden önemsiyoruz?

Hiç kendi web sitenize sahip olmak istemediniz mi? Yoksa kendi oyununu mu yapıyorsun? Bu kılavuzun rolü size bu güçlü dünyanın tadını çıkarmaktır. Daha önce herhangi bir programlama deneyiminiz varsa, bunu programlama macerasına yeni başladığınızdan daha kolay bulacaksınız. Her iki durumda da, bir aceminin bile anlayabilmesi için bunu açıklamayı umuyorum.

XHTML'yi önemsiyoruz, çünkü web'in temel yapı taşlarını öğrenmenin güçlü bir başlangıç ​​noktasıdır. Facebook, MySpace ve Twitter gibi sosyal ağ siteleri başka bir (sunucu tarafı) programlama dili kullanır PHP denir, ancak programlamaya dikkat etmeden önce temel bilgileri anlamak iyi bir fikirdir dünya. Bu kılavuz temel bilgilerle ilgilidir.

İnternet'in nasıl çalıştığı veya belki de bilgisayar ağlarının tüm bunlarla nasıl çalıştığı hakkında daha fazla bilgi edinmek istiyorsanız teknik şeyler ve hatta bilgisayarların nasıl inşa edilebileceğini daha sonra bu harika kılavuzları Faydalanmak:

//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kendi PC'nizi OluşturmaKendi PC'nizi kurmak çok sevindirici; hem de korkutucu. Ancak sürecin kendisi aslında oldukça basit. Bilmeniz gereken her şeyde size yol göstereceğiz. Daha fazla oku

//www.makeuseof.com/tag/everything-need-know-home-networking/ Ev Ağı Hakkında Bilmeniz Gereken Her ŞeyBir ev ağı kurmak düşündüğünüz kadar zor değil. Daha fazla oku

//www.makeuseof.com/tag/guide-file-sharing-networks/ Dosya Paylaşım Ağları için MakeUseOf KılavuzuHiç orada en büyük dosya paylaşım ağları neler olduğunu merak ettiniz mi? BitTorrent, Gnutella, eDonkey, Usenet vb. Arasındaki farklar nelerdir? Daha fazla oku

//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate KılavuzuAlıştığınızdan tamamen farklı olduğunu düşündüğünüz için Vista veya XP'den yükseltmekten korkuyorsanız, bu yeni kılavuzu okumalısınız. Daha fazla oku

//www.makeuseof.com/tag/download-how-the-internet-works/ İnternet Nasıl ÇalışırArtık internete ev bilgisayarlarımız, ofislerimiz, dizüstü bilgisayarlarımız ve telefonlarımızdan erişebiliyoruz. Ancak birçok insan hala İnternet'in ne olduğundan ve gerçekten nasıl çalıştığından tam olarak emin değil. Daha fazla oku

2. XHTML'ye Başlarken

Bu bölümde, web sitelerinin nasıl oluşturulacağını ve özelleştirileceğini, aşağıdakilerin nasıl yapılacağını öğrenmek de dahil olmak üzere birçok farklı şekilde öğreneceksiniz:

• Web sayfalarına resim ekleme.

• Web sayfalarında gezinmek için köprüler oluşturma ve kullanma.

• Nokta noktaları vb. Kullanarak bilgi listeleri oluşturun.

• Rasgele verilerin satır ve sütunlarını içeren tablolar oluşturun ve söz konusu tabloların biçimlendirmesini kontrol edebilirsiniz.

• Gerçekten etkileşime girebileceğiniz formlar oluşturun ve kullanın.

• Web sayfalarını arama motorları tarafından erişilebilir hale getirme.

Tüm bunlar xHTML programlama ile yapılacaktır. İnanmıyor musunuz? Okumaya devam etmek. Böyle kısa bir rehberden ne kadar öğrenebileceğinize şaşıracaksınız.

Bu kılavuzun “kodlama” kısmına girmeden önce, programlarınızı düzenleyebilmeniz, test edebilmeniz ve temelde her şeyi geliştirebilmeniz için kullanabileceğiniz bazı yazılımlara ihtiyacınız olacaktır. Bir öğrenci olduğunuzu varsayarak www.dreamspark.com adresine gidin ve aşağıdaki programlardan birini ÜCRETSİZ alın:

• Microsoft Visual Studio 2010

• İfade Stüdyosu 4

Öğrenci değilseniz, ayrıca Notepad ++hangi kolayca alabilirsiniz www.notepad-plus-plus.org

Programlardan birini alıp yükledikten sonra, xHTML deneyiminizi başlatabilirsiniz.

Windows yerine Mac veya Linux kullanıyor olabilirsiniz; bulmanız gerekecek Metin düzeltici bu durumda sizin için çalışır. Size satır sayınızı ve renk kodunuzu gösteren bir tane bulmaya çalışın.

• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Ultra Hafif Metin Editörü [Linux] Daha fazla oku

• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - Linux İçin Harika Bir Hafif Kod EditörüŞaşırtıcı bir şekilde, Linux pek çok iyi IDE (Entegre Geliştirme Ortamları) sunmuyor. Bunun nedeni, çoğu Linux programcısının eski iyi Not Defteri'ni (veya bu durumda gedit) çıkardığı ve başladığı için ... Daha fazla oku

Herhangi bir özel araç indirmek istemiyorsanız, yine de aşağıdaki gibi bir metin düzenleyici kullanabilirsiniz Not Defteri veya Wordpad. Bununla birlikte, yukarıdaki programlar test ve tasarım için daha iyi araçlardır. bir hata yaparsanız veya doğru sözcüğü hatırlamaya çalışıyorsanız, kullanın. Basit daha iyidir, değil mi? Ben şahsen Notepad ++ ve Microsoft Visual Studio kullanıyorum, ancak Expression Studio 4 hakkında birçok harika şey duydum. En çok neyi sevdiğinize karar vermeniz gerekir, ancak hepsi iyi çalışır.

NOT: Not Defteri veya Wordpad'den oluşturulan bir web sitesini test etmek için:

Dosya açıkken, Dosya >> Farklı Kaydet

Dosya adının sonuna yazın.html ve tıkla Kayıt etmek

Yeni kaydedilen dosyayı açın (varsayılan Internet Tarayıcınızda açılır)

2.1 “Dünya” yı tanıma

Pekala, işte yolculuğun başlangıcı. Bu web sayfasındaki ekrana bir şey koymakla başlayalım. İlk önce ne olduğunu bilmeniz gerekecek vardır. XHTML kodu, sayfanın her bir öğesinde neler olup bittiğini sıralamak için başlangıç ​​ve bitiş etiketlerini kullanır.

İşte bir başlangıç ​​etiketi örneği:

İşte bir bitiş etiketi örneği:

Farkı gör? Biri, sivri parantez içine alınmış öğe adına sahipken, diğeri aynı ancak öğe adından önce eğik çizgi var.

ÖNEMLİ: Bir etiketi kodun herhangi bir noktasında açtıktan sonra kapatmanız gerekir. Ayrıca etiketlerin iç içe yerleştirilmesi gerekir, yani aşağıdakileri yapamazsınız:; olmalı. Etiketlerin birbirinin içine nasıl oturduğunu görüyor musunuz? Bunları kutular gibi düşünün: Bir buçuk kutuya sağlam bir şey koyamazsınız.

Nasıl programlanacağını öğrenmenin en iyi yolu aslında bunu yapmaktır, bu yüzden yeterli teori. Sadece bir referans noktası olarak, neler olup bittiğini satır satır açıklayabilmem için her bir kod satırını bir sayı ile etiketleyeceğim.

1. satırda html kodunu belirttim ve 5. satırda sonlandırdım. İçinde etiketi

ve içinde bir paragraf var (satır 3,

). Bunu bir web tarayıcısında açarsanız, ekran boyunca aşağıdakilerin geldiğini göreceksiniz:

Sayfanın başlığını tarayıcının bakış açısından değiştirmek istiyorsanız (ör. firstpage.html) daha sonra aşağıdaki kod satırına kolayca ekleyebilirsiniz:

Bu, web sayfanızın daha profesyonel görünmesini sağlayacaktır.

2.2. ve aşağı

Çoğu durumda, etiket var

ve bir .
genellikle CSS'de (Bölüm 3) ve JavaScript'te (yaklaşan bir kılavuzda açıklanmaktadır) komut dosyası oluşturmak için kullanılır. genellikle sayfanın içeriğidir.

Bazı içerikler,

, fakat genellikle sayfada değiştirilemeyen içeriktir. Bir örnek, ziyaret ettiğiniz web sitesi hakkında kısa bir açıklama olabilir.

İçeriğin biçimlendirmesinde CSS'yi (Bölüm 3) kullanarak

. Ancak, biçimlendirmede .
Gövde içinde yaygın olarak kullanılan bir etiket kümesi başlık yazı tipleridir. Bu başlık yazı tipleri boyut ve güç / kalınlık olarak değişir. Aşağıda kendiniz görün:

2.3 Resminiz binlerce kelimeye değer mi? - Görüntüler

Şimdiye kadar yalnızca metin ve bir web sitesinde neler yapabileceği hakkında konuştuk, ancak daha fazlası var. Web sitenizi sadece süslü yazı tiplerinden daha cazip hale getirmek ister misiniz? Sitenize gerçekten seyirciye bakmak için bir şeyler vermek için bazı iyi görüntüler elde etmeye çalışın. Yine de telif hakkı yasalarına dikkat edin; web sitenizi internete koymak istiyorsanız kendi resimlerinizi çekmek için en iyisi.

Harika bir resim oluşturmak veya kendi görüntünüzü geliştirmek ve daha da harika görünmesini sağlamak için Photoshop veya bazı dijital görüntüleme becerilerini kullanmanız gerekebilir. Bazı harika ipuçları ve bilgiler için bu kılavuzları deneyin:

• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Photoshop'ta Fotoğraf Düzenlemeyi Öğrenin: Temel Bilgileri 1 Saatte İnceleyinPhotoshop göz korkutucu bir programdır - ancak sadece bir saatle tüm temel bilgileri öğrenebilirsiniz. Düzenlemek istediğiniz bir fotoğrafı alın ve başlayalım! Daha fazla oku

• //www.makeuseof.com/tag/guide-to-digital-photography/ Dijital Fotoğrafçılığa Yeni Başlayanlar KılavuzuDijital fotoğrafçılık harika bir hobidir, ancak korkutucu da olabilir. Bu başlangıç ​​kılavuzu size başlamak için bilmeniz gereken her şeyi anlatacak! Daha fazla oku

En popüler görüntü formatları şunlardır:

• GIF = Grafik Değişim Biçimi

• JPEG = Birleşik Fotoğraf Uzmanları Grubu

• PNG = Taşınabilir Ağ Grafikleri

Aşağıdaki koda bir göz atın ve bunun ne anlama geldiğini açıklayacağım; yani, web sayfanıza nasıl resim ekleyeceğiniz.


Önceki bölümlerde anlatıldığı gibi her zaman ve co etiketleri. Sıradaki

etiketi 5. satırda açılır. Sadece önemli şeylere geçelim ...

9. satırdaki paragraf açıldıktan sonra, resimler web sitesine eklenir. Bir resim / resim eklemek için kullanmalısınız ile başlamak. Sonra dosyanın nerede olduğunu önermelisiniz. Genellikle bu dosyayı web sitesi dosyalarıyla aynı klasörde bulundurmayı denersiniz, içinde bulunduğu klasör yolunu girmeniz gerekir. Yukarıdaki durumda kullandım . Bu, kaynağın (Src) resmi aynı klasörde bulunur ve bu resim dosyasının adı Picture.jpg. Kolay değil mi?

Şundan daha fazla bir şey eklemenize gerek yok ile görüntü oluşturmak için alt ancak bazı değişiklikler yapmak için özellikleri ekleyebilirsiniz.

Ayrıca şöyle bilinir alternatif metin, fareyi resmin üzerine getirdiğinizde bu özellik değeri görüntülenir.

10. satırda etiketi şu şekilde başlattığımı fark edebilirsiniz: ile bitirdi />. Bu, etiketleri açmanın ve kapatmanın başka bir yoludur. Yukarıdaki örnekte gösterildiği gibi, görüntünün genişlik ve yükseklik gibi farklı özelliklerini seçebileceğinizden, görüntü oluşturmanın genel yolu budur.

11 ve 12. satırlarda başka bir görüntü eklenir, ancak bu, etiketleri açmak ve kapatmak için diğer yöntemi kullanır. Çizgi 10, görüntüyü çok daha temiz bir şekilde yaratır; 11 ve 12. satırlardaki yöntem yerine bunu kullanın.

2.4 Köprüler nereye gidebilirler?

2.4.1 “Dünya” etrafında hareket etme

Arkadaşlarınıza web sitenizde harika siteler göstermek istiyor, ancak nasıl yapılacağını bilmiyor musunuz? Doğru yere geldiniz, okumaya devam edin…

Aşağıdaki koda bir göz atın ve açıklanmadan önce ne yaptığımı tahmin edip edemeyeceğinize bakın.

Bu doğru, bazı harika ve kullanışlı sitelere köprüler oluşturuyorum. Temel olarak, web adresi olan belirli bir web sayfasına köprü oluşturmak için aşağıdaki sözdizimini kullanmanız yeterlidir:

[köprü oluşturmak istediğiniz şey]

Çok zor görünmüyor mu? Yukarıdaki örnek kod gibi oraya kolayca metin koyabilirsiniz. Ancak, görüntü gibi başka bir şey kullanamamanız için hiçbir neden yoktur. Sadece biraz daha fazla bilgi için: URL, temelde web adresi olan Tekdüzen Kaynak Bulucu'dur.

2.4.2 Resimler nerede olduğunuzu hatırlatır ve tekrar oraya götürür

Aşağıda, görüntüyü köprü olarak kullanma örneği verilmiştir:

Eminim bu bölümün önceki bölümlerini okuduğunuzdan emin olun, bunun basitçe görüntü ve köprü oluşturmayı karıştırdığını. Sözdizimi, dışta köprü ve içeride görüntü olacak şekilde yerleştirilir ve böylece eklenen görüntünün köprüsünü yerleştirir.

2.4.3 Postanız var - Bir e-posta adresine köprü oluşturma

Bu sadece son bölümün tekrarıdır, ancak o kadar fazla dikkat etmediyseniz, aşağıdaki koda bir göz atın:

URL kullanmak yerine (ör. http://www.something.com) burada eşittir işaretinden sonra aşağıdaki sözdizimini eklemeyi içeren bir e-posta adresi kullanıyorum:

“Eposta: [youremailaddress]”

10. satır, bu kavramın temel örneğidir. O zaman kime e-posta göndereceksin? Hayalet Avcıları!

2.4.4 Dünyanızı dolaşmak - Dahili Köprü Oluşturma

Artık kendi web sitenizi nasıl dolaşacağınızı görebilirsiniz. Bu, URL olarak dosya adınızı kullanarak yapılır. Bu nedenle aşağıdaki şemada gösterildiği gibi bir web sitesi kurulumuna sahip olabilirsiniz. Kullanacağınız sözdizimi şu şekilde olur:

Sonraki Sayfa

2.5 Özel misiniz? Bu karakterler…

Web sitesinde içerik gibi görünecek bilgileri yazdığınızda, telif hakkı sembolü gibi bir sembol gibi bir şey koymak: © veya belki de daha küçük veya daha büyük sembolü. Ancak normal semboller kodlama sözdizimi tarafından kullanıldığından, bu küçükten geçmenin başka bir yolu olmalıydı ve çözüm bir ve işareti (&) ve ardından kısa bir kod kullanarak bilgisayara hangi simgeye koymak. Aşağıda kodlamadan birkaç özel karakter örneği içeren bir tablo bulunmaktadır:

Örneğin şöyle diyebilirsiniz:

Yukarıdaki tabloda 2 satır var

Yukarıdaki tabloda <6 satır var, ancak> 2 satır var

2.6 Listeler, listeler ve diğer listeler

Pekala şimdi bir alışveriş listesi gibi birkaç şey organize etmemiz gerekecek. İki tür liste vardır. Onlar:

• Sıralı Liste (sayılar, alfabe, romen rakamları)

• Sırasız Liste (madde işaretleri)

Sıralı bir liste için aşağıdaki etiketleri kullanırsınız =

Sırasız bir liste için aşağıdaki etiketleri kullanırsınız =

Örneğin:

Yukarıdaki örnekte hem sıralanmamış hem de sıralı liste türlerini dahil ettim. Ama başka ne yaptığımı fark ettin mi? Ben de denilen bir teknik dahil Yuvalanmış Listeler. Bu yuvalanmış listeler, içindeki içerik listesi gibi hiyerarşik ilişkileri temsil etmek için kullanılabilir Yukarıdaki tarifin Malzemeler adımını alın.

Tüm listeyi Satır 10'da sıralı bir liste olarak başlattığımı ve Satır 23'te bitirdiğimi görebilirsiniz. Arasında göreceksin ve Etiketler kullandım. Bunlar Liste Öğeleri. Liste öğeleri Satır 21'deki gibi görünen kelimelerdir:

Aşçı Sosu

. Sözler Aşçı Sosu sıralı listedeki beşinci liste öğesi olduğu için 5 sayısının yanında görünür.

Bir sonraki hiyerarşik nokta nokta veya sayı düzeyine gitmek istiyorsanız, kendi içlerinde şu şekilde yuva yapın:

2.7 Tablolar… hayır matematik değil

Bu çarpım tablolarınız kadar zor mu? Tabii ki hayır, eğer doğru yolda ilerlerseniz. Bu konsepte yeni başlıyorsanız ve olduğunuzu varsayalım, yapmak istediğiniz masayı aşağıda olduğu gibi bir kağıda çizmek genellikle en iyisidir:

Şimdi aşağıdaki kodda bakın:

Şimdi bunları bir araya getirin ve aşağıdaki ekran tablonun nasıl yapılandırıldığını anlamanıza yardımcı olacaktır:

bir

ya da birçok tablo web sayfalarında, biri menü için, biri içerik için ve diğeri de başlık için çerçeveler olarak yararlı olabilir.

ve

tablonun bu bölümlerine daha fazla dikkat çekmek için sırasıyla ilk ve son satırı kalın olarak kalın. Çoğu insan ilk önce tablonun altbilgisindeki toplama bakar mı?

tablonun satırlarındaki tablo verileridir.

düzgünlük için her kod satırında başlayan ve biten tablo satırlarıdır. tablonuzun varolan bir neden olmadan yalnızca bir bilgi paketi olmadığından emin olmak iyidir.

2.8 Dijital Formlar (Kalem uzakta)

Net sörf yaparken karşılaştığınız web sayfaları ile etkileşim gerekir. Örneğin, www.makeuseof.com adresinde e-posta adresinizi aşağıdaki gibi daire içine alınmış olarak girmeniz gerekir. haber bültenine ve MakeUseOf'un günlük güncellemelerine abone olun. E-posta adresinizi girdikten sonra basar Katılmak ve bu, düğmenin yanındaki metin kutusundaki bilgileri (e-postanız) bir veritabanına veya belki de başka bir e-posta adresine gönderir. Formlar bunu yapmak için kullanılır, bu bölümde öğreneceğiniz şey budur.

Aşağıda, yalnızca adınızı girip tıklamak için kullanılan bir form bulunmaktadır. Sunmak veya Açık:

İşte kısaca daha ayrıntılı olarak açıklayacağım perde arkasındaki kod:

İlk olarak yukarıdaki senaryoda en önemli şey Satır 10'dur. Bu formun başlangıcıdır. Yöntem genellikle ya İleti veya almak. Oldukça açıklayıcı, ama İleti e-posta adresi veya veritabanı gibi bir kaydı yapmak için bilgileri bir yere gönderiyor. Örneğin: MakeUseOf Cevapları üzerine soru gönderme. AlmakÖte yandan, sağladığınız bilgileri gönderir ve Arama Motoru gibi geri bildirim bilgileriyle, arama anahtar kelimelerini göndererek ve sonuçlarla birlikte geri döner.

Yukarıdaki kodlama bloğu, e-posta adresinizi gireceğiniz ve Gönder düğmesini tıkladıktan sonra bir e-posta adresiyle gizli mülke gönderileceği bir posta formu örneğidir. 19-21. satırlardaki etiket, sayfada metin kutusunu oluşturur ve bu alana o alanda kullanılabilecek maksimum karakter sayısını verir.

Satır 22 - 25 Gönder ve Sıfırla / Temizle düğmelerini metin kutusunun altındaki sayfaya yerleştirin. Sıfırla düğmesi, metin kutusuna veya bu formdaki kutulara girilen tüm metinleri siler. Sunmak düğmesi, 14-18 satırlarında oluşturulan formun gizli kısımlarındaki talimatları izler. Gizli tür genellikle otomatik olarak veya geçerli biçimde kullanılan başka bir şeyin parçası olarak kabul edilir. Bu durumda, sonuncusu İletied bilgi bir hedef, bu durumda konu kümesiyle birlikte abone olun abone [email protected] “E-posta Abone Ol” durumunda ve sizi başka bir sayfaya, bu durumda ana sayfaya veya “İndex.html”.

2.9 meta ne? Neden?

Arama Motorlarının web sitelerini nasıl bulduğunu hiç merak ettiniz mi? Temel olarak kullandıkları şey bu: meta öğeler. Arama motorları genellikle buldukları sitelerdeki sayfalara bağlantıları izleyerek siteleri kataloglar. Bu meta öğeler, üzerlerinde sayfa hakkında bilgi içerir. Bir örnek için bazı kodlardan aşağıdaki alıntıya bir göz atın:

Yukarıda gördüğünüz gibi, meta bilgiler

etiketi ve türleri vardır: anahtar kelimeler ve açıklama. İçerik, meta bilginin örnekte gösterildiği gibi anahtar kelimeler veya açıklama olan diğer kısmıdır.

3. CSS ile Tasarım

Çoğu zaman bunlar gibi rehberlere bakan insanlar video oyunları oynamaktan hoşlanırlar. Bununla birlikte CSS, Counter Strike Kaynağı değil ve Birinci Şahıs Nişancı (FPS) da değildir. CSS, xHTML ile çalışan ve Cascading Style Sheets. xHTML kendi başına oldukça sıkıcıdır, ancak CSS'ye adil bir sunum eklerseniz, oluşturma işleminizin biçimlendirmesi ve sunumu çok daha ilginçtir. Yazarlar, bir web sayfasındaki yazı tipleri, aralık, renkler; bu belge yapısından (kafa, gövde vb.) ayrı olarak yapılır; bu daha sonraki bölümlerde açıklanacaktır). xHTML aslında bir belgenin içeriğini ve yapısını belirtmek için tasarlanmıştır. XHTML'nin içeriğin biçimlendirmesinde değişiklik yapamaması gibi değil. Ancak, bu kurulum gerektiğinde tek bir yerden kontrol edilebileceği için çok daha faydalıdır. Örneğin, bir web sitesinin biçimi tamamen ekli bir stil sayfası tarafından belirlenirse, bir web tasarımcısı web sitesinin sunumunu büyük ölçüde değiştirmek için başka bir stil sayfası yerleştirebilir.

3.1 Sıralı Dans Stilleri

Yukarıda belirtildiği gibi, bu bölüm tamamen biçimlendirme ve stillerle ilgilidir. İçeriğinizin ve sayfanızın stilini değiştirmenin birçok yolu olduğundan, en basit ileri teknikle başlamanın iyi olacağını düşündüm. Satır İçi Stiller. Bu, kodu, içeriği kapsayan bir sekmenin özellik bölümüne yerleştirerek gerçekleştirilir. Bunun gibi:

Kulağa çok mu zor geliyor? Sana bir örnek vereyim:


Not: renk yazıldığından renk Avustralya veya Kanada kadar serin olmayan bir yerde oluşturulduğundan beri bu kodu kullanırken; Umarım seni fazla rahatsız etmez.

Yukarıdaki örnekte koyu harflerle verilen bilgiler, içerikte yer alan içerik üzerinde işlenen biçimlendirmedir.

etiket. Farklı renkler için onaltılık kodların bir listesi için Google'da arama yapmanız veya bu siteyi kullanmanız yeterlidir: http://html-color- codes.com/

3.2 Gömülü Stil Sayfaları (Hile Sayfaları kazanılır)

Çok büyük bir siteniz varsa, önceki bölümdeki satır içi stilleri kullanmak acı verici olabilir. Ancak aynı stilleri tekrar tekrar kullanmak istiyorsanız neden bir Gömülü Stil Sayfası? Bu alternatif, kendi stilinizi

ve ardından sayfanıza içerik eklerken bu koddan bahsedersiniz. Çok karışık? İşte bir örnek:


Üstteki stil sayfasına bağlı olarak metnin rengini, boyutunu veya biçimini nasıl değiştirdiğini gördünüz mü? Bunu anlamak çok zor değil mi?

7. satırda türünde etiket: text / css bu etikette / dosyada bulunan içeriği tanımlayan bir MIME (Çok Amaçlı İnternet Posta Uzantıları) türü olarak adlandırılır. CSS belgeleri her zaman MIME metnini kullanır text / css. Bu kılavuzun başka bir cildinde ele alınacak Javascript, text / javascript MIME türü. Birçok farklı MIME türü vardır, ancak ana olanlar Javascript ve CSS'dir.

Satır 16, .xtra daha önce yapılmış sınıf. Bunun çalışma şekli, xtra hangi stilin üzerine açıldıysa o sınıfın xtra sınıf kullanır. Örneğin: bir stilin boyutu 20pt yazı tipine sahipse ve yeşil renkteyse ve üzerine bir sınıf farklı yazı tipi boyutu, daha sonra yeni yazı tipi boyutu eskisinin yerini alacak, ancak eski yeşil renk devam edecek olduğu gibi.

3.3 Savaştaki stiller (çelişen stiller)

Üç stil seviyesi vardır ve bunlar:

• Kullanıcı (web sitesini görüntüleme)

• Yazar (web sitesinin)

• Kullanıcı Aracısı (tarayıcı)

Stiller, kullanıcının konumundan mümkün olan en iyi kurulumu oluşturacak şekilde birleşir. Aşağıdaki grafik üç seviyenin hiyerarşisini göstermektedir:

3.4 Arkadan Stil Sayfaları (harici)

Her yeni kodlama dosyasına her zaman aynı stil sayfasını yazmak zorunda olmanın can sıkıcı olacağını düşünmüyor musunuz? Bir çözüm var: Dış Stil Sayfaları. Biçimlendirme için kullanmak amacıyla başka bir dosya oluşturabilirsiniz; bu bir ".css" dosya. Başka bir dosyada kullanmak için aşağıdaki alıntıyı yazmanız yeterlidir:

değiştirmek dosya adı CSS dosyanızın adıyla ve işte başlıyoruz, bunlar birbirine bağlı. CSS dosyanızın bağlantılı dosyalarınızla aynı klasörde olduğundan emin olun.
Örnek CSS dosyası:

Devam etmeden önce em'in ne yaptığından bahsetmeyi ihmal ettim. Yukarıda, "ul ul {font-size: .8em; } "Anlamına gelir ve bu, yazı tipi boyutunun, kullanıcının tarayıcısına yüklenen kendi stil sayfasını kullanmasını istediği normal boyutun göreli .8 veya% 80'ine dönüştürüleceği anlamına gelir. Çoğu kişi kullanıcı tanımlı bir stil sayfası kullanmaz, bu yüzden endişelenmeyelim.

3.5 Konumlandırma Elemanları (bundan sonra nereye?)

Bir web sayfasına resim yerleştirdiğinizde, görüntünün hiçbir yere gitmesini istemezsiniz. İçinde söz söylemek istemez miydin? İşte böyle yapıyorsunuz, aslında bir örnek ve kısaca açıklayacağım:

9 ile 13 arasındaki satırlarda bunun şu kimliğe sahip bir sınıf olduğunu fark edeceksiniz: fgpic ve içinde kullanılan birkaç özelliğe sahiptir. durum özellik olarak ayarlandı kesin Bu, kullanıcı nasıl değiştirirse değiştirsin, resmin (yazarın) kodlarıyla yerleştirdiği yerde kalacağı anlamına gelir. üst ve ayrıldı özellikleri elemanın (örn. resim / metin) yerleştirilir. Z-endeksi özelliği, aşağıdaki ekran görüntüsünde gösterildiği gibi yığın düzeyini ayarladığından çok güçlü bir araçtır:

Arka plan görüntüsünün z-dizin değeri 1 ile arkada ve metnin ön tarafında z-dizin değeri 3 ile nasıl olduğunu, ön plan görüntüsü ise z-dizin değeri 2 ile ortada olduğunu görün. Kartlarınızı doğru oynarsanız aslında oldukça iyi görünüyor

3.6 Çevrenize dikkat edin (arkaplan)

Web siteleri arka planlar ile iyi görünüyor değil mi? Tüm web sitelerinin beyaz veya siyah bir arka plana sahip olması gerçekten sıkıcı olmaz mıydı? Neden oraya bir resim koyup rengi biraz değiştirmiyorsunuz? Sayfanızın arka planını biraz daha öne çıkarmak ve sayfaya biraz parlama sağlamak için kullanabileceğiniz birkaç özellik vardır. Aşağıdaki koda bir göz atın ve vurgulanan özelliklerin ne yaptığını çözüp çözemeyeceğinize bakın:

Ne yaptığını öğrendin mi? Temel olarak arka plan görüntüsü, arka planda kullanacağımız şeydir, görüntünün yolu parantez / parantez içinde şöyle olur> url (BURAYA). Bunu her zaman sayfanın en arkasında olduğu için z-endeksi 0 değerine sahip olarak düşünebilirsiniz. Görüntünün arka plan konumu sol altta, oldukça açıklayıcı değil mi? Daha sonra, arka plan görüntüsü sayfanın x ekseni boyunca tekrarlanır (yineleme-x) ve sadece bu değil, aynı zamanda pencerenin altına sabitlenir (arka plan eki). Sonunda renk rastgele kırmızı olarak ayarlandı. Sonuç için aşağıya bakın:

3.7 Sizce ne kadar büyük? (öğelerin boyutları / metin sınırları)

Bunun CSS'nin sunduğu tek şey olduğunu düşünüyorsanız, yanılıyorsunuz demektir. CSS kuralları, her sayfa öğesinin gerçek boyutlarını belirtebilir. Bir metin kutusu örneğini ele alalım. Ekran boyunca hiç ilerlemeyen bir metin yazmak mı, yoksa sayfayı hareket ettirmeden kaydırılabilecek bir metin kutusu yapmak mı istersiniz? O zaman burada olmalısın. Az önce açıkladığım şeyler için aşağıdaki ekran görüntüsüne bakın:

Şimdi perde arkasındaki koda bakalım:

Sadece küçük bir not: 6. satır, metin kutularının her birine alt kenar boşluğu ekler. Çok havalı, değil mi? Ancak daha sonraki bölümde sınırlar hakkında.

3.8 Çevrede ne var (sınırlar)

Bunun bir açıklamaya ihtiyacı olduğunu düşünmüyorum ama yine de vereceğim. Temel olarak hemen hemen her şeyin etrafına sınır koyabilirsiniz, bu yüzden nasıl yapılacağına bir göz atalım. İşte kod:

Kodun yaptığı şey, temel olarak kullanılan kenarlık türünün adlarını / adlarını çevreleyen bir dizi sınır. Oluğun karşıtı sırt ve iç içe ekin tersi olduğunu unutmayın.

3.9 Yüzen ve Akan Elemanlar

Genellikle başlığı, sonra metni, sonra başlığı ve metni görmek oldukça sıkıcıdır. Biraz daha hoş görünmüyor olsa da? Kullanılabilecek bir yöntem var yüzenve şimdi size bunu nasıl yapacağınızı göstereceğim. Kayan, bir öğeyi ekranın bir tarafına taşımanıza izin verirken, belgedeki diğer içerik kayan elemanın etrafından akar. Kayan öğe bir resim veya başlık veya hatta başka bir metin bloğu olabilir. Şimdi neye benzediğine bakalım:

Birkaç durum için oldukça iyi, şimdi bu tasarımı oluşturan kod:

Sadece doğru yöntemi bulursanız ne yapabileceğiniz şaşırtıcı değil mi?

3.10 Menüyü açmayın - örnek

Bir web sitesi oluşturmayı düşünüyorsanız, büyük olasılıkla bir menüye ihtiyacınız olacak değil mi? Sadece orada olmayan bir şey istiyorsanız, burası gitmek için doğru yer olabilir. Dinamik öğeler, web sayfalarının daha iyi görünmesini sağlar ve genel siteye daha iyi bir his verir.

En sevdiğim menü türlerinden biri Aşağıya doğru açılan menü Şimdi CSS kullanarak nasıl yapılacağına bakalım. Aşağıdaki kodu inceleyin:

Bunun başlangıçta biraz ürkütücü göründüğünü biliyorum, ama eğer sabırlı ve yeni okumaya devam ederseniz, yakında anlayacaksınız.

Satır 15 diyor ki: <div> class = “etiketliMenü”Ve fare duraksamaküzerinde ing Görüntüle blokiçinde.

16-21. Satırlar diyor ki: <div> class = “etiketliMenü”Ve bir <bir> etiketini seçin ve bu biçimleri ayarlayın. Bu satırların gizli menü düğmelerinin biçimini seçtiğini unutmayın. 9-14. Satırlar menünün geri kalanını göstermek için menü düğmesinin biçimlerini ayarlar.

22. satır: <div> class = “etiketliMenü”Ve bir <bir> etiket ve ben duraksamak bu öğelerden birinin üzerine arka plan rengi farklı bir yeşile.

Son ürün için aşağıya bakın:

3.11 Kullanıcı Stil Sayfaları (siz evrenin merkezisiniz)

Kullanıcılar kendi tanımlarını yapabilir kullanıcı tarzı sayfaları sayfaların istedikleri gibi görünmesini sağlamak için. Sadece ayırt etmek için Kullanıcı Stil Sayfaları ve Yazar Stili Sayfaları. Kullanıcı Stilleri, kullanıcıların kodlama yapmadan CSS dosyaları olarak kolayca oluşturdukları harici stil sayfalarıdır. İşte size bir tane göstereceğim:

Bu son derece basit değil miydi?

Bunu kendi tarayıcınızda nasıl ayarlayacağınızı bilmek istiyorsanız, Araçlar >> İnternet Seçenekleri >> Genel >> Erişilebilirlik >> Ardından kendi dosyanızı tanımlayın Yazar Stil Sayfası, arasındaki kodun içinde tanımlanır .

4. Daha fazla bilgi

4.1 Neden xHTML ve co. aşırı tasarım ve diğer uygulamalar?

Buna gerçek ya da buna benzer bir şey olarak bakmadan önce, nerede durduğunuza ve teknik olarak ne kadar fikirli olabileceğinize bağlı olarak bunun sadece bir bakış açısı olduğunu bilmelisiniz. Projelerimi tamamlamak için programlama dillerini kullanmaktan zevk alıyorum, çünkü tasarımların arkasında ne olduğunu anlayabiliyorsunuz; Adobe Dreamweaver ve Microsoft FrontPage web sitenizi yalnızca menülerde bulunan araçları kullanarak oluşturmanıza olanak tanır. Bu nedenle, tasarım uygulamaları size sunulan menü seçeneğiyle sınırlıdır. Sonuç olarak, programlama dillerini kullanmanın web sitesini veya tamamlanmış ürünü işlevselliği yalnızca programcının belirlenen dille becerisiyle sınırlı olduğundan daha çekici bir şey (Örneğin. JavaScript, CSS, xHTML). Muhtemelen önyargılı olduğumu düşündüğünü biliyorum, ama sadece ikisini de denemek ve nasıl karar vermen gerekecek işinize daha fazla çaba sarf etmek istediğinizde, hedef. Hem Dreamweaver hem de FrontPage'in bir “kodlama görünümü” ve bir “tasarım görünümü” olduğundan hem kullanmayı da seçebilirsiniz.

Joomla ve WordPress kullanmak gibi web siteleri oluşturmanın başka yolları da vardır.

4.2 Joomla

Joomla, çok fazla esnekliğe ve kullanımı kolay bir kullanıcıya sahip harika bir İçerik Yönetim Sistemidir (CMS) Bir çok insanın kaç seçenek ve yapılandırmanın olduğunu fark ettiklerinde korkutduğu bir arayüz mevcut. Joomla, PHP ve MySQL tabanlı bir platformdur. Bu yazılım, açık kaynak kodludur. http://www.joomla.org/download.html

Joomla hakkında derinlemesine bir rehber istiyorsanız, MakeUseOf'un bu kılavuzunu deneyin: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Yeni Başlayanlar İçin Joomla RehberiBu kılavuz, Joomla'yı neden seçmeniz ve web sunucunuza nasıl yükleyeceğinizden sitenizi nasıl tasarlayacağınıza ve beğeninize göre nasıl özelleştireceğinize kadar her şeyi size yönlendirecektir. Daha fazla oku

4.3 WordPress

WordPress, kullanıcıların bir yönetici aracılığıyla bir web sitesi oluşturmasına ve bakımını yapmasına izin veren bir İçerik Yönetim Sistemidir (CMS) otomatik olarak oluşturulan bir navigasyon yapısı da dahil olmak üzere, HTML bilmek veya başka bir araç öğrenmek zorunda kalmadan arayüz. WordPress, dünya çapında binlerce programcı tarafından oluşturulan ve kamu malı haline getirilen bir açık kaynaklı yazılım parçasıdır, bu yüzden bunu kullanmak için ödeme yapmanız gerekmez. WordPress, Linux ve MySQL ile yazılmış, Linux sunucularında çalışacak şekilde tasarlanmış web tabanlı bir uygulamadır: PHP, web için bir programlama dilidir uygulamaları, MySQL ilişkisel bir veritabanı (MS Access gibi) ve Linux web sunucuları için bir işletim sistemidir - bunların hepsi de açıktır kaynak. WordPress, 2009 sonu itibariyle dünya çapında 200 milyondan fazla siteye sahip en popüler CMS'dir.

Ek Okuma

• Her Blogger ve Web Sitesi Sahibi Bilmeli İlk 11 HTML Etiketi Her Blogger ve Web Sitesi Sahibi Bilmeli İlk 11 HTML EtiketiDünya çapında ağ birçok dili biliyor ve birkaç farklı dilde kodlanıyor. Bununla birlikte, her yerde bulunabilen ve web sayfalarının icadından beri var olan tek dil ... Daha fazla oku
• HTML5 ile Çevrimiçi Yapılacak 5 Eğlenceli Şey HTML5 ile Çevrimiçi Yapılacak 5 Eğlenceli ŞeyHTML5, Adobe Flash gibi eklentilere ihtiyaç duymadan multimedya içeriğini Web'e getiren yeni standarda geçiş yaparak daha da güçlenmeye devam ediyor. Patladı mı ... Daha fazla oku
• Tarayıcınızda Bu Araçlar ile Web Kodu Oluşturun: Web Geliştiricileri İçin 11 Harika Chrome UzantısıChrome, uzantı havuzu nedeniyle web geliştiricileri için mükemmeldir. Bir web sitesi tasarlamayı veya kodlamayı planlıyorsanız, hemen yüklemeniz gereken bazı temel araçlar şunlardır. Daha fazla oku

Yayınlanan Rehber: Haziran 2011