Web Tasarım Temelleri (HTML ve CSS)

HTML ve CSS öğreniyorum ve yakında da sertifika almaya başlayacağım ve HTML ve biraz CSS kullanarak kendi web sitenizi tasarlamaya nasıl başlayacağınıza dair bir öğretici vermenin iyi bir fikir olacağını düşündüm. ..

HTML, Köprü Metni Biçimlendirme Dili'nin kısaltmasıdır.

CSS, Basamaklı Stil Sayfalarının kısaltmasıdır.

HTML aslında web sayfasını ve resim ve yazı gibi içeriğini oluşturmak için kullanılır.

CSS, web sayfasını tasarlamak ve yazı ve resimlerin sayfanın üstündeki bir resim, ortadaki başka bir resim gibi belirli bir yerde olmasını söylemek için kullanılır ...

"İnternet üzerindeki her şey sadece HTML ve CSS kullanılarak değiştirilebilir, silinebilir veya eklenebilir! İnstructables.com adresinde bile!"

En iyi şey...

Tek ihtiyacınız olan bir bilgisayar!

Web tasarımına yolculuğumuza başlayalım ...

Adım 1: Bir Web Sitesi Nelerden Yapılır?

Web'de geziniyor ve ilginç ve havalı bir web sitesi buluyorsanız ve ne ve nasıl yapıldığını öğrenmek veya hangi HTML kodlamasını kullandıklarını öğrenmek istiyorsanız, yapmanız gereken tek şey,

  • Web sayfasındaki boş bir alanı sağ tıklayın.

  • Sayfa kaynağını görüntüle'yi tıklayın

  • Bu, web sitenizin üzerinde çalıştığı HTML kodunu gösteren ayarlarınıza göre yeni bir pencere veya sekme açar.


NOT: Eğitici, google, youtube vb. Gibi bazı web siteleri kodlamalarında çok fazla Javascript kullanır, bu yüzden korkmayın ... Bu talimatı okuduktan sonra, HTML ve CSS'nin ne olduğunu ve temel etiketleri kolayca anlayabileceksiniz. .

Adım 2: HTML, Nedir?

Daha önce söylediğim gibi HTML

Hiper Metin İşaretleme Dili ...


HTML'deki her şey 'Etiketler' kullanılarak çalışır, Etiketler bir HTML belgesinde yazıya veya resimlere veya ses veya video dosyalarına ne yapılacağı, bir web sitesine nereye yerleştirileceği vb.

HTML'de, etiketler her zaman etiketinden önce "<" ve etiketinden sonra ">" olur ...
ex- (Bu etiket metni kalın yapar)

Tüm HTML belgeleri ile başlar ve biter




Bu etiketler, tarayıcılara bu dosyanın yalnızca sıradan bir metin dosyası değil, bir web sayfası olduğunu söyler ...

Adım 3: Neye ihtiyacınız var?

Web sayfaları yapmaya başlamak için tek ihtiyacınız olan şey:

Bir kelime editörü. ... not defteri gibi.

Web sitelerini yapan birçok kişi, web sitelerini oluşturmayı ve kodlamaya yardımcı olmayı kolaylaştırdığı için 'Dreanweaver' ve 'Microsoft Frontpage' gibi programları kullanıyor.

Ancak HTML öğrenmenin en iyi yolu temel bilgileri kullanmaktır ... Not Defteri ve sonra temel bilgileri öğrendikten sonra düzenleme programlarına geçebilirsiniz ...


Adım 4: Bir HTML Belgesinin Temel Yapısı

Tüm HTML belgelerinde "Kafa" ve "Gövde" etiketi bulunur ...

Yani tüm HTML belgeleri buna benzer bir yapıya sahiptir ...

(Html ​​belgesini başlatma)
(Kafa etiketini başlatma)
(Kafa etiketini sonlandırma)
(Gövde etiketini başlatma)
(Gövde etiketini sonlandırma)
(Html ​​belgesini sonlandırma)

NOT: HTML etiketleri büyük / küçük harfe duyarlı değildir; bu, büyük veya küçük harflerle yazmanızın önemli olmadığı anlamına gelir ...

Her HTML etiketi, bir açılış ve kapanış etiketine ve bu etiketler arasındaki herhangi bir içeriğe, o içeriğe etiket komutlarını verir ... ex: ... (Bu, metni kalın harflerle yazmanızı sağlar)
Bazı HTML etiketlerinde aynı etikette açılış ve kapanış etiketi bulunur ... örn:
(Bu çizgiyi kırmak içindir)

Gövde etiketlerinde ne varsa, doğrudan web sayfasında gösterilir ve kafa etiketlerinde ne varsa, sayfayı bir web tarayıcısında görüntülediğinizde görünmeyen web sayfası hakkında bilgi verir ve bilgi verir.

5. Adım: HTML Başlık Etiketleri

HTML'de başlıklar için kullanılan 6 etiket grubu vardır ...
Bu etiketlerin hepsi gövde etiketlerine giriyor ...

Bu en büyük başlık






Bu en küçük başlık


NOT: Çoğu kişi, metni daha büyük veya daha küçük yapmak için bu etiketleri kullanmada hata yapar ve arama motorları sayfanın hangi bölümlerinin ne olduğunu bulmak için bu başlıklar tarafından sayfayı tanımladığı için bu yapılmamalıdır ... ve sadece yazı tipi boyutu için kullanmak, arama motorları tarafından sayfa için iyi bir tanım vermeyecektir ...

6. Adım: HTML'deki Metin Öğeleri (Etiketler)

HTML'de, web sayfasında metin tanımlayan yaklaşık 5 etiket vardır.
Bu etiketler HTML belgesinin gövde bölümüne gider.

Buradaki her şey yeni bir paragraf olarak belirlenecek



Bu satır sonu ekler (Yazarken klavyede "Enter" tuşuna basmak gibi)

Bu, belgeye herhangi bir yere bir satır ekler (Yatay Kural)
 Buradaki her şey yazıldığı gibi gösterilir ... yazdığımızda tüm boşluklar ve "Girer" web sayfasında gösterilir 


Bunların en yaygın etiketleri ve
etiketlerini hemen hemen her web sayfasında kullanıldıkları için ...
Tembelseniz ve sadece diğer metin öğelerini eklemek yerine boşluklar ve girişler olmasını istiyorsanız ön etiket harikadır, ancak tarayıcılar ve arama motorlarının sayfanızı analiz etmesi yine zor olacaktır ...

Adım 7: HTML'deki Metin için Mantıksal Stiller

Bu öğeler, web sayfasında gösterilen metni tanımladıkları için gövde etiketlerine tekrar girer ...
HTML'de metin için 3 ana mantıksal stil vardır ....

Text in here is emphasized
Text in here is strong
Computer code is put in here


Vurgu etiketi metni italik yapar, ancak normal italik yazı tipinden biraz daha bükülmüş ...
Güçlü etiket metni kalınlaştırır, ancak harf aralığı azaldıkça metni biraz daha yaklaştırır.
Kod etiketi, web sayfasında göstermek için gereken bilgisayar kodunu tanımlar, farklı bir yazı tipine sahiptir ve yazı tipinin aralığı ve boyutu küçüktür ...

Adım 8: HTML'deki Metin için Fiziksel Stiller

Günümüzde HTML'de metin için kullanılan sadece 2 yaygın fiziksel stil vardır.
Bu etiketler ayrıca belgenin gövde kısmına eklenir.

This text is bold

Bu metin italik

Bu etiketler, herkes bunları microsoft word gibi metin düzenleme programlarında bile kullandığından çok yaygındır ...
Kalın etiketi metni daha kalın, daha geniş ve biraz daha uzun yapar ...
İtalik etiketi, metni biraz sağa bükülmüş hale getirir .

9. Adım: HTML'ye Resim Ekleme

Bu HTML'de yapılacak en basit şeylerden biri ...
Bu etiket dokümanın gövde bölümüne de eklenir ...



Yukarıdaki etiket sayfanıza bir resim ekler ... ve hizalamak istiyorsanız yapmanız gereken tek şey eklemek:

align="right"
align="letf"
align="center" /


Tırnak işaretlerini kapattıktan hemen sonra ve büyüktür işaretinden önce bunlardan birini ekleyin

Not: Eklediğiniz resim, HTML belgenizin kaydedildiği klasörde olmalıdır, aksi takdirde görüntünün dosya yolunu belirtmeniz gerekir ...

10. Adım: HTML'deki listeler

HTML'de 2 tür liste vardır:
1) Madde işaretli veya sırasız
2) Numaralandırılmış veya sipariş edilmiş

Bunlar yine belgenin gövde kısmına gider.

Listedeki her öğe,

  • Liste Öğesi
  • etiket.


      First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    1. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    2. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    3. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    4. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    5. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    6. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    First list item
    Second list item
    Third list item



    First list item
    Second list item
    Third list item

      First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item


    Birincisi, listeyi 1, 2, 3 ve benzeri numaralarla gösteren sıralı bir listedir ...
    İkincisi, madde işaretli listeyi gösteren sıralanmamış bir listedir ...

    Adım 11: HTML'deki bağlantılar

    HTML'de 3 ana bağlantı türü vardır,
    1) Sıradan bağlantı, farklı bir çevrimiçi web sitesine bağlanmak veya bilgisayarınızdaki başka bir web sayfasına bağlanmak için.
    2) Resimler bağlantısı, bir resmin kendisini tıklanabilir bir bağlantı olarak kullanmak için.
    3) Mailto bağlantısı, bir e-posta istemcisi açan bir bağlantı oluşturmak için.

    Bu etiketler ayrıca belgenin gövde etiketine de girer

    Sıradan bir bağlantı:
    Jump to Google

    Bir resim bağlantısı:



    Bir mailto bağlantısı:
    Send email

    bir çapayı tanımlar, koda yerleştirildiği her yerde bir çapa yaptığı için tüm bağlantılarda ve satır içi bağlantılarda kullanılır.
    Etiketteki "href" / özelliği, bağlantıya, bazı durumlarda hangi web sitesine veya başka bir bağlantıya bağlantı vermesini söyler ...

    Adım 12: HTML'de Bağlantı Bağlama

    Sayfalarının farklı bölümlerine bağlanan bir dizine sahip harika web sitelerini gördünüz mü? Wikipedia gibi mi?

    //en.wikipedia.org/wiki/HTML (İçindekiler bölümüne bakın)

    Bunları yapmak için bağlantı etiketlerini kullanırız ve 2 bağlantı etiketini birbirine bağlarız,
    Bu etiketler ayrıca belgenin gövde kısmında da kullanılır ...

    Step 5
    Jump to step 5


    İlk etiket, 5. Adım metninin "5. Adım" adıyla belgeye bağlandığını bildirir
    İkinci etiket, "5. adıma atla" metnini, daha önce yaptığımız 5. Adım bağlantısına bağlayan bir bağlantı yapan bağlantı etiketidir ...

    Bu etiketi kullanmak, Wikipedia gibi birçok bilgiyi bildiren web siteleri için gerekli olan mutlak bir değerdir :)

    13. Adım: HTML'deki tablolar

    Web siteniz istatistiklere ve ayrıntılara dayanıyorsa tablolar ana bölümlerdir .... tablolar Microsoft Excel tablolarına benziyor, ancak daha sonra bu talimatta ele alacağımız CSS'de düzenleyerek onları daha ilginç görünmesini sağlayabilirsiniz ...

    Tablolar 3 şeyden oluşur ... veya 3 etiket gibi ...



    Tüm bu etiketler belgenin gövde bölümüne de girer ...

    Tablo etiketleri belgeye tablonun nerede başladığını ve bittiğini bildirir
    Tr etiketleri tabloya bir satır ekler (Tablo Satırı)
    Td etiketleri tabloya hücre ekler (Tablo Açıklaması)

    Tabloların nasıl çalıştığını daha iyi anlamak için resimlere bir göz atın ... tablolar HTML'deki en zor kısımlardan biri olduğu için ...

    14. Adım: HTML'deki çerçeveler ve IFrame'ler

    Çerçeveler ve IFrame'ler aynı şeydir, çünkü bir web sayfasını başka bir web sayfasındaki şey gibi bir kutuda göstermek için kullanılırlar.

    IFrame, küçük bir kutuda web sayfanızda göstermek istediğiniz yalnızca bir web sayfanız olduğunda kullanılır ...


    Bu, www.google.com'u web sitenizdeki küçük bir çerçevede gösterecektir ...












    Çerçeveler her zaman a'nın içindedir ve bu etiketler çerçeveleri gruplarken etiketler ... tam olarak aynı şeyi yapar ancak göstermek istediğiniz 1'den fazla çerçeveniz (web sayfası) olduğunda kullanılır ve etiketlere göre gruplandırılır ... Kaç tane çerçeve eklediğinizi, bunlar aynı tarayıcı penceresinde gösterilir ve eşit olarak bölünür ...

    Çerçeveleri kullanırken etiketleri kullanamazsınız, böylece tek yapabileceğiniz bir tarayıcı penceresinde 1'den fazla web sayfası görüntülemek ... Etiketleri eklemek etiketlerin çalışmasını durdurur

    "I Frame" gibi "iframe" gibi bağımsız çerçevelerin hangisi olduğunu hatırlamanın kolay bir yolu / Bağımsız Çerçeve "/
    Bu etiketler çoğu web sitesinde çok yaygın değildir, ancak bazı web siteleri hala bu etiketleri kullanır ...

    Adım 15: HTML Ortak Varlıkları

    HTML'de, © vb. Gibi bir metin eklemek istiyorsanız, sembolleri göstermek için genellikle HTML varlıklarını kullanırsınız, böylece bunlar belgedeki etiketlerle karışmazlar.

    Tüm varlıklar & işaretiyle başlar ...

    < = <(Sembolden daha az)
    > => (Sembolden büyük)
    © = © (Telif hakkı simgesi)
    = (Kırılmaz Boşluk) (HTML, yazınıza eklediğiniz fazladan boşlukları siler;

    10 alanınız varsa, geri kalanı silindikçe yalnızca 1 alan görünecektir ... Bunların hepsinin görünmesini istiyorsanız, varlığı

    etiketine eklenir ve bu,

    etiket...

    Bir varlığı yazmanın 2 yolu vardır, biri ilk 2 örnek gibi karakter koduyla, diğer yol üçüncü örnek gibi numara koduyla ... (Sayı varlıklarının önünde "#" vardır)

    HTML belgenizin her şeyi istediğiniz gibi görüntülemesini ve etiketlerle karıştırmamasını istiyorsanız bu varlıklar önemlidir ...

    Adım 16: Alıntı ve Blok Alıntı Etiketleri

    Bu iki etiket alıntıları göstermek için kullanılır ...

    Quotation etiketi kısa alıntıları göstermek için kullanılır.
    Teklif etiketi, uzun teklifleri göstermek için kullanılır

    Etiketi, içeriğinden önce ve sonra alıntı ekler ("İçerik")
    Quotation etiketi, metni farklı bir paragrafta uzun alıntıları engellemek için denemelerde yaptığımız gibi, bir blok haline getirip metni biraz girintili olarak çevreden ayırır.

    BU METİN BLOK ALTI (Bu bir blok alıntıdır)
    Etiket, içeriği girintili olarak oldukça yararlıdır, ancak etiket sadece kendimize tırnak ekleyebildiğimiz için yararlı değildir, ancak metni daha organize hale getirir ...

    Adım 17: Web sayfasını HTML olarak adlandırın

    Bir değişiklik için, bu etiket belgenin bölümüne eklenir, bu etiket belgenizin başlığının ne olduğunu, web sayfanızın sekmesinde veya sayfa başlığında görünecek olanı söyler .... resimlere bakın daha iyi anlamak için.


    THIS IS THE TITLE OF THE PAGE!


    Bu, bir web sayfasının isteğe bağlı bir öğesi değildir, her web sayfasının bir başlığı olmalıdır, aksi takdirde dosya adı kutucuk olarak gösterilir ...

    Adım 18: HTML'deki Meta Etiketler

    Bu başka bir kafa elementi ...
    Sitenizin internete ne olduğunu açıklar.




    İlk etiket bir açıklama meta etiketidir ve içerik web sitenizi açıklar ...
    İkinci etiket bir anahtar kelime meta etiketidir ve içerik web sitenizle ilgili anahtar kelimeler verir ...

    Orada "meta yazar" vb gibi farklı şeyler için kullanılan başka meta etiketleri var ama bunlar en yaygın olanları ...

    NOT: Arama motorları ve web sitesi sıralama yazılımları web sitesinin ne olduğunu ve hangi cateogary ait olduğunu anlamak için meta etiketi arar ...

    Adım 19: CSS, Nedir?

    Daha önce söylediğim gibi CSS Basamaklı Stil Sayfaları anlamına geliyor
    Uyguladığımız bu stiller HTML öğelerinin nasıl gösterileceğine ve yerleştirileceğine karar verir.

    HTML dokümanımıza stilleri uygulamanın 3 yolu vardır:
    1) Dış stil sayfası
    2) İç stil sayfası
    3) Satır içi stiller

    HTML yalnızca bilgileri aşağıdaki etiketlerle not etmek için oluşturulduğundan CSS tanıtıldı


    vb...
    CSS'nin HTML'ye gereken tüm stilleri vermesi gerekiyordu ...

    CSS'deki komutlara HTML belgelerinde "etiketler" gibi " kurallar" denir ...

    Adım 20: CSS'de Sözdizimi

    Her CSS kuralının içinde 2 bölüm vardır,

    1) Seçici (Her kuralın yalnızca 1 seçicisi olabilir)
    2) Beyan (Her kural 1'den fazla beyana sahip olabilir)

    Seçici, stil oluşturmak ve düzenlemek istediğiniz gerçek HTML etiketidir, bu nedenle bir

    sonra

    Seçici = h1
    Beyan = renk: mor yazı tipi ağırlığı: kalın
    (Bu beyanlar,

    etiketi mor renkte ve kalın olarak görünecek)

    Bildirimlerde, ilk bölüm "CSS özelliği" (renk, yazı tipi ağırlığı) özelliğidir ve ikinci bölüm "değer" dir (mor, kalın)

    Adım 21: CSS'ye Yorum Ekleme

    CSS dosyanız çok sayıda kural içeriyorsa, hangi kuralın daha net olduğunu belirlemek için yorumları istediğiniz herhangi bir şeye yazmak için kullanabilirsiniz ve gösterilmeyecek veya CSS kurallarını kesmeyecektir ...

    /*yorum Yap*/

    HTML'den çok daha basit bir yorum CSS'ye bu şekilde eklenir ( )

    Emin değilseniz bazı kuralların ne yaptığını yazabilir, ardından çevrimiçi olarak bakabilir ve ardından bu kuralın ne yaptığını söyleyen bir yorum ekleyebilirsiniz ...

    Adım 22: CSS Kimliği ve SINIF Kuralları

    Sayfanızın sağında metin ekleyebileceğiniz bir kutu yapmak istediğinizi varsayalım ... o zaman kendi etiketinizi oluşturmanız ve bunu yapmak için CSS aracılığıyla tanımlamanız gerekir ....

    Bizim için işi yapmak için ID ve CLASS seçicileri kullanıyoruz ...

    Bunları şu şekilde kullanıyoruz:

    HTML dosyası


    This content goes into the box on the right hand side of the page


    This content goes into the box on the right hand side of the page




    CSS dosyası

    # MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }
    MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }


    Yaptığınız div kimlikleri için, CSS dosyasındaki "#" işaretini kullanıyorsunuz ...
    Yaptığınız div sınıflarını biçimlendirmek için bir "." (nokta) CSS dosyasında

    Kimlikler, yukarıdaki örnekteki gibi tamamen farklı bir etiket gibi yapılırken kullanılır, ancak başka bir etiketin içindeki şeyleri,

    HTML Dosyası

    This text is styled by div class...

    This text is styled by div class...



    CSS dosyası

    .MYFIRSTDIVCLASS
    {
    font-style:italic;
    font-weight:bold;
    font-color:yellow;
    }


    Dolayısıyla sınıflar, başka bir HTML etiketi içinde belirli bir div sınıfınız olduğunda kullanılır (HTML, Gövde ve Başlık etiketleri hariç)
    (H2, p, h1, br, em, i, b vb ...) gibi önceden tanımlanmış öğeler, div sınıfı işlevi kullanılarak düzenlenir, çünkü bunlar belgede birçok kez tekrarlanır ve bu nedenle bir sınıf div ...
    Div kimlikleri, HTML belgesinde styles öğesini yalnızca bir kez kullanacağınız zaman kullanılır ...

    Adım 23: 3 Stil Sayfası Türleri ...

    CSS için harici bir stil sayfası kullanıyorsanız , stil sayfasını kullanarak baş etiketindeki HTML belgesine bağlamanız gerekir.







    "Href" özniteliği CSS dosyanızın dosya adına sahip olmalıdır .... ve tüm harici CSS dosyaları ".css" dosya türüyle bitmelidir.
    CSS dosyaları gibi HTML etiketleri içermemelidir

    vb...

    Dahili bir stil sayfası kullanıyorsanız, başlık etiketlerine aşağıdakileri yazın:



    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



    Xxxxxxxx, harici stil sayfanızın içerdiği her şeye sahip olmalı ... bu yüzden içindeki tüm kurallara sahip olmalı ...

    Satır içi bir stil kullanıyorsanız, aşağıdakileri yapmanız gerekir:

    Stil vermek istiyorsanız

    satır içi stille etiketleme,
    Sonra bir "stil" niteliği eklemeniz gerekir ve tüm kurallarınız oraya girer ...

    Bu bir başlık.



    NOT: HTML belgesinde stil olmaması için CSS oluşturulduğundan satır içi stiller mümkün olduğunca az kullanılmalıdır, bu nedenle belgenizin her yerinde satır içi stiller varsa, HTML belgenizde stiller olduğu için bu israf olur. ..

    Adım 24: CSS Metin Stilleri

    Herhangi bir etiketteki metinler için ayırabileceğiniz birkaç metin stili vardır ...

    Metnin rengi:

    örn:
    p {color:black;)
    p {color:#000000;)


    Yukarıdaki örnekler paragraf etiketlerindeki tüm metnin siyah renkte görünmesini sağlayacaktır.

    Metin dekorasyonu:

    örn:
    p {text-decoration:none;}
    p {text-decoration:underline;)


    İlk örnek, alt çizgileri, üst çizgileri vb. Kaldıracak ve metnin normal görünmesini sağlayacaktır ... Bağlantıların alt çizgisi olmasını istemiyorsanız bu yararlıdır ...
    İkinci örnek, metin içindeki herhangi bir metne bir alt çizgi ekler.

    Bu metnin altı çizilidir

    etiketleri.

    Metin girintisi:

    örn:
    p {text-indent:30px;)

    Bu, satırın ilk satırına

    30 piksel etiketle ...

    Metin Dönüşümü:

    örn:
    p {text-transform:uppercase;)

    Bu, içindeki tüm metni

    Bu metin büyük harfle yazılmıştır

    Etiketler büyük harf.

    Adım 25: CSS'deki Yazı Tipi Stilleri

    Bir etiketteki metnin yazı tipini değiştirmek istiyorsanız , yazı tipi ailesi seçicisini kullanırsınız ...

    örn:

    p {font-family:Arial;}
    p {font-family:Verdana;}


    İlk örnekte, etiketleri Arial'da olacak ...
    İkinci örnekte, etiketler Verdana'da olacak ...

    Yazı tipi stili:

    örn:

    p {font-style:italic;}
    p {font-style:oblique;}


    İlk örnekte, etiketler italik olacak ...
    İkinci örnekte, etiketler eğik olacak (eğik yazı tipi italik yazı tipine çok benzer)

    Yazı Boyutu :

    örn:

    p {font-size:16px;}
    p {font-size:1em;}


    Birinci ve ikinci örnekte, etiketler 16 pikseldir ...

    1em = 16 piksel
    Internet Explorer ile ilgili yeniden boyutlandırma sorunu nedeniyle "em" tanıtıldı.

    Adım 26: CSS Arka Plan Stili

    Arka planınız bir görüntüye veya arka plan olarak sadece bir renge sahip olabilir ...

    Arka planınıza bir renk verin:

    örn:

    body {background-color:#000000;}
    body {background-color:black;}


    Her iki örnek de arka planınıza siyah bir renk verir

    Görüntüyü arka plan olarak ayarlayın:

    örn:

    body {background-image:url( animals.jpg );}

    Yukarıdaki örnekte "animals.jpg" resmi arka plan olarak ayarlanacak ve arka plana sığması için gerektiği kadar tekrarlanacaktır ...

    Adım 27: İnceleme, Özet ve Tamamlama

    CSS ve HTML özetleri olan 2 not defteri dosyası ekleyeceğim, tüm bilgileri araştırdım ve topladım ve iyi bir özet oluşturmak için düzenledim ...

    Bu eğitici makalede, HTML 5.0 değil, HTML 5.0'ın konusunu ele aldım, çünkü hala geliştirilme aşamasında ve bir çok etiket hala değişiyor, kaldırılıyor vb ... bu yüzden size daha kararlı HTML 4.01'i öğretmeye karar verdim
    CSS 3.0'ı en son sürüm olduğu ve oldukça kararlı olduğu için kapladım ...

    Herhangi bir sorunuz varsa, bunları yorumlara gönderin, şüphelerinizi açıklığa kavuşturmaktan memnuniyet duyarız ...
    Eğer aslında bir web sitesi yapacaksanız, o zaman bir kez yapmak, kod ile bir yorum göndermek :) Ne tür serin web siteleri yapmak görmek istiyorum!

    HTML'yi birkaç web sitesinden ve okulda öğrendim ...

    //htmldog.com/
    //www.littlewebhut.com/
    //www.w3.org/
    //www.htmlgoodies.com/

    W3C, World Wide Web Konsorsiyumu'dur, HTML için tüm web standartlarını ve tüm etiketleri ve değerlerini belirlerler
    w3.org yukarıda belirtildiği gibi onların web sitesidir

    Sırada ne var?

    • Artık HTML ve CSS'nin temellerini bildiğinize göre, daha gelişmiş eğitimler için çevrimiçi araştırma yapabilirsiniz (YouTube'un çok iyi öğreticileri vardır) .Bu dillerde uzmanlaştığınızı düşünüyorsanız, devam edip bir sertifika için başvurabilirsiniz ... ve o zaman bir kez sertifikalı, kendi web siteleri yapmak ve kendinizi bir yaşam haline ... bir web sitesi tasarımcısı haline .... edelim "webmaster" ...
    • Web sitenizi daha etkileşimli hale getirmek için Javascript veya başka bir komut dosyası dili öğrenmeye başlayın
    • Oturum açma vb. Gibi kullanıcılardan bilgi toplamaya başlamak için AJAX, PHP vb. Öğrenmeye başlayın ...
    • Sadece bir web tasarımcısı değil, bir program tasarımcısı olmak için daha zor ve gelişmiş C, C ++, Java veya diğer güçlü programlama dillerini tercih edin.


    Ekler

    • CSS Özellikleri Reference.rtf İndir
    • HTML 4.01 Summary.rtf İndir

    İlgi̇li̇ Makaleler