Temel HTML görevleri, çalışmanızı aşağıdaki konulardan oluşan bir setle pekiştirmek için tasarlanmıştır: HTML yapısı, HTML yorumları, ana etiketler, ana HTML özellikleri. .

HTML'deki resimler için görevler: HTML'ye resim ekle(resmin HTML kodu), HTML resim boyutu, görüntü hizalama... HTML'de.

Gelişmiş HTML ve CSS atamaları

Emmet ile HTML atamaları. Hızlı düzen, Emmet komutları (sözde Emmet hile sayfası). Emmet eklentisi ile görevleri tamamladıktan sonra mizanpajınızın/geliştirmenizin hızı önemli ölçüde artacaktır. ...

CSS Seçici Görevleri. CSS seçicileri: css sınıf seçicileri, css öznitelik seçicileri, bitişik css seçiciler, bağlamsal css seçiciler, alt seçiciler + css'de, seçicilerin önceliği. .

Çalışmak CSS konumlandırma karmaşık düzeni anlamak için önemlidir. İşte anlamanız ve birlikte çalışmanız gereken görevler: mutlak konum, göreceli konum, pozisyon sabit ve konum statik, CSS özellikleri sol üst sağ alt. .

Form düzeni görevleri

1. Sitede, Twitter Bootstrap ile aynı şekilde (bu çerçeveyi kullanmadan) bir kimlik doğrulama formu düzenleyin. Örneğin, içinde olduğu gibi.
2. Web sitesinde gönderici formunu oluşturun
3. Alandan tarih / ay seçmek için jQuery eklentisini dahil edin
4. Sosyal ağa benzer bir onay kutusu oluşturun.
5. Bir web sitesi ziyaretçi kayıt formu oluşturun
6. Yandex.Market'te ürünleri sıralayana benzer bir form oluşturun

Bir düzen tasarımcısının görevlerinden biri, tarayıcılar arası kod yazmaktır. Sayfaların olabildiğince çok tarayıcıda mümkün olduğunca aynı veya benzer görünmesini sağlayan kod. ...

Modern CSS, harikalar yaratmanıza ve arka planı boyayarak çalışmanıza olanak tanır. degrade dolgu... Küçük set CSS animasyonu için görevler.

Medya sorguları için görevler (mobil siteler). Sitenin mobil versiyonunun oluşturulması Web geliştiricilerinin becerilerinin önemli bir parçasıdır. Ödevler şu konulara ayrılmıştır: mobil site oluşturma, sitenin mobil sürümünü kontrol etme. .

psd düzenini ve CSS çerçevelerini kodlama görevleri. Web sitesi düzeni temelli psd düzeni Bir web tasarımcısının işinin en önemli parçasıdır. HTML derslerinde temel adımları ele alıyoruz psd'den HTML'ye düzen. Görevler .

Pratik HTML çalışması

Görev numarası 1.

En basit HTML dosyasını oluşturma

1. Tüm site dosyalarınızı kaydedeceğiniz kişisel bir klasör oluşturun.

2. Sağ tıklayın ve Yeni - Boş Dosya'yı seçin.

3. rasp.html dosya adını girin.

4. "Birlikte Aç" - "Mousepad" üzerine sağ tıklayın

5. En basit html belgesini yazın:

Eğitim HTML dosyası

Çarşamba ders programı.

6. Belgeyi kaydedin, düzenleyiciyi kapatın.

7. rasp.html belgesini çift tıklayarak açın ve sonucu kontrol edin.

Görev numarası 2.

Ekrandaki metnin konumunu kontrol etme

1. rasp.html dosyası için önceki görevdeki 4. adımı izleyin

2. Kelimeleri düzenleyerek rasp.html dosyasında değişiklikler yapınÇarşamba günü için program, dersler farklı hatlarda.

Örnek:

Takvim

meslekler

Çarşamba günü.

Web sayfanızın görünümünün ve hissinin değişmediğine şaşırmayın.

Görev numarası 3.

2. ekrandaki metnin düzenini kontrol etme

1. rasp.html dosyası için ilk görevdeki 4. adımı izleyin

2. rasp.html dosyasında değişiklik yapın:

Örnek:

Takvim

meslekler

Çarşamba günü.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

Çizgilerin görünümü değişmelidir. Metin değişikliği neye bağlıdır?

Görev numarası 4.

Metin biçimlendirme

Satır besleme etiketi
bir satırı sonraki metin veya grafiklerden ayırır.

paragraf etiketi

ayrıca satırı ayırır, ancak görsel olarak boş bir satır ekler.

bir paragrafı vurgular.

Eğitim HTML dosyası

Takvim

meslekler

Çarşamba.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

Görev numarası 5.

Metin biçimlendirme

1... RASP.HTML dosyasını değiştirin

Eğitim HTML dosyası

Takvim

meslekler

Çarşamba günü.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

5. Soruyu yanıtlayın, altı çizili, italik, kalın ayarlamak için hangi etiketler kullanılır?

Görev numarası 6.

Web Sayfası Sembollerini Boyutlandırma

Tarayıcı tarafından görüntülenen metnin boyutunu kontrol etmenin iki yolu vardır:

başlık stillerini kullanma,

ana belgenin yazı tipi boyutunu veya mevcut yazı tipinin boyutunu ayarlama.

Kullanımda olan altı başlık etiketi vardır.

önce

(etiket çifttir, yani kapatılması gerekir).

Her etiket, tarayıcı ayarları tarafından belirtilen belirli bir stille ilişkilendirilir.

1... RASP.HTML dosyasını değiştirin

Eğitim HTML dosyası

Derslerin zaman çizelgesi

Çarşamba günü.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

5. h1 etiketini h2-h6 ile değiştirin ve başlığın nasıl yeniden boyutlandırıldığını görün.

Görev numarası 7.

Geçerli yazı tipinin boyutunu ayarlama

yazı tipi etiketi içindeki metnin belirli yerlerinde geçerli yazı tipinin boyutunu ayarlamanıza olanak tanır.

1 ile 7 arasında değişir.

Eğitim HTML dosyası

Derslerin zaman çizelgesi

Çarşamba günü.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

5. Yazı tipi boyutunu diğerleriyle değiştirin ve metin boyutunun nasıl değiştiğini görün.

Görev numarası 8.

Yazı tipi rengini ayarlama

Etiket yazı tipi, renk ve metin boyutu üzerinde kontrol sağlar.

Yazı tipi rengini değiştirmek için etikette kullanılabilir öznitelik RENK = "X". Onun yerine

“X ", rengin İngilizce adını tırnak işaretleri (" ") içinde veya onaltılı olarak değiştirmelisiniz

anlam. Bir rengi onaltılık sayı olarak belirtirken, o rengi temsil etmelisiniz.

üç bileşene ayrışır: kırmızı (R - Kırmızı), yeşil (G - Yeşil), mavi (B - mavi),

her biri 00 ile FF arasında bir değere sahiptir. Bu durumda, sözde ile uğraşıyoruz

RGB formatı.

RGB formatında metin yazma örnekleri Tablo 1'de gösterilmiştir:

1
... RASP.HTML dosyasını değiştirin

Eğitim HTML dosyası

Takvim

Çarşamba için dersler.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

5. Rengi başka bir renge değiştirin ve yazı tipi etiketinin sonucunu görün.

Görev numarası 9.

Metnin yatay hizalaması.

Metin hizalaması, paragraf kenarlarının görünümünü ve yönünü belirler ve sola hizalı, sağa hizalı, ortalanmış veya iki yana yaslanmış olabilir. Metin hizalamasını ayarlamak için genellikle bir paragraf etiketi kullanılır

hizalama yöntemini belirten hizalama özniteliği ile. align niteliği şu değerleri alabilir: sol, sağ, orta, iki yana yaslasırasıyla sola, sağa, ortaya ve genişliğe hizalayın.

1. RASP.HTML dosyasında değişiklik yapın

Eğitim HTML dosyası

Takvim

Çarşamba için dersler.

3. Değiştirilen metni rasp.html dosyasına kaydedin.

4. rasp.html belgesine çift tıklayın ve sonucu kontrol edin.

Aşağıdaki örnekteki gibi bir web sayfası yapın.

Metnin rengi parantez içinde belirtilmiştir. Metin hizalaması mevcut olmalıdır.

Dosyaya bir ad verinbisküvi.html

Reg.ru: alan adları ve barındırma

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

2 milyondan fazla alan adı hizmette.

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

Dünya çapında 700 binden fazla müşteri şimdiden seçimini yaptı.

* Kaydırmayı duraklatmak için fare imlecinizi hareket ettirin.

İleri geri

Yeni Başlayanlar için 30 İyi CSS Uygulaması

CSS, hemen hemen her geliştirici tarafından bir noktada kullanılan bir dildir. Bazen hafife alsak da, kaliteli tasarıma yardımcı olmak veya engellemek için yine de güçlü ve nüanslıdır. Aşağıda, birçok yaygın hatadan kaçınarak doğru ve yetkin kod yazmanıza yardımcı olacak 30 iyi öneri bulunmaktadır.

1. Okumayı kolaylaştırın

Birçok kişi bu noktayı hafife alsa da, CSS dosyanızın okunabilirliği çok önemlidir. İyi okunabilirlik, ihtiyacınız olan öğeleri birçok kez daha hızlı bulacağınız için, sitenin desteğiyle gelecekte onunla çalışmayı basitleştirmenize olanak tanır. Ayrıca dosyanızın başka biri tarafından incelenip düzeltilmesi gerekebileceğini de unutmayın.

Not
CSS dosyalarını yazarken, çoğu geliştirici iki uç, iki gruba ayrılır.

Grup 1: Hepsi bir satırda

SomeDiv (arka plan: kırmızı; dolgu: 2em; kenarlık: 1 piksel düz siyah;)

Grup 2: Her stilin ayrı bir çizgisi vardır

SomeDiv (arka plan: kırmızı; dolgu: 2em; kenarlık: 1 piksel düz siyah;)

Aslında, bu grupların temsilcileri arasında genellikle anlaşmazlıklar olsa da, her iki uygulama da oldukça iyidir! Sadece aklınızda bulundurun - bakmaktan zevk aldığınız seçeneği seçmeniz gerekiyor. Bu kadar.
Not

2. Tamamlayın

Kodunuzu daha okunabilir hale getirmenin yanı sıra daha tutarlı hale getirin. Belirli bir adlandırma stiline bağlı kalmanıza izin veren kendi CSS "alt dilinizi" geliştirmeye başlamalısınız. Neredeyse her zaman oluşturduğum belirli sayıda sınıf var ve onlara her seferinde aynı isimleri veriyorum. mesela ben kullanıyorum .caption-sağ Resimleri sağ tarafa hizalamak için

Sınıf adlarınızda ve kimliklerinizde tire ve alt çizgi kullanıp kullanmayacağınızı ve hangi durumlarda kullanacağınızı düşünün. CSS için kendi standartlarınızı oluşturmaya başladığınızda, profesyonel olmaya çok daha yakın olursunuz.

3. Bir çerçeve ile başlayın

Birçok kişi CSS çerçevelerini kullanmaya değmeyeceğini düşünüyor, ancak bence biri zaman ayırıp geliştirme sürecini hızlandırmak için bir program yaptıysa, tekerleği neden yeniden icat etti? Çerçevelerin evrensel olarak kullanılmaması gerektiğini biliyorum, ancak çoğu durumda kullanımları tamamen haklı.

Birçok tasarımcı yol boyunca kendi çerçevelerini oluşturur ve bu aynı zamanda kodu projeler arasında tutarlı ve tutarlı tutmak için harika bir fikirdir.

Not
Katılmıyorum. CSS çerçeveleri vazgeçilmez bir şeydir, ancak yalnızca birkaçı, onları kullanmakta iyi olanlar için.

"Bu, tekerleği yeniden icat etme meselesi değil, nasıl çalıştığını anlama meselesi."

Basamaklı stil sayfalarına yeni başlıyorsanız, çeşitli çerçevelerden en az bir yıl uzak durmanızı tavsiye ederim. Aksi takdirde, sadece kendinizi karıştırırsınız. Önce CSS öğrenin, sonra bu dil ile işinizi optimize edin.
Not

4. Sıfırlamayı kullanın

Çoğu CSS çerçevesinin yerleşik bir stil nullatörü vardır, ancak onu kullanmayacaksanız, diğer nuller'ları kullanabilirsiniz. Stilleri sıfırlamak, yazı tipi boyutları, başlıklar, kenar boşlukları, kenar boşlukları ve daha fazlası için net parametreler ayarlayarak farklı tarayıcılarda eşit olmayan görüntüyle ilgili sorunların çoğunu önler. Bu "sıfırlama", tüm tarayıcılarda aynı görüntüyü elde etmenizi sağlar.

İşte daha popüler sıfırlamalardan bazılarına bağlantılar: MeyerWeb, Yahoo'nun geliştirici sıfırlaması. Alternatif olarak, aşağıdakilere dayanarak kendi "boş bırakıcınızı" oluşturabilirsiniz.

5. Stil dosyalarınızı yukarıdan aşağıya doğru yapılandırın

İstediğiniz kodun bir kısmını hızlıca bulabilmeniz için CSS dosyanızı yapılandırmak her zaman mantıklıdır. Stil sayfasını bu stillerin sayfada uygulandığı sırayla oluşturmak olan yukarıdan aşağıya yaklaşımını kullanmanızı öneririm. Örneğin:

1. Genel sınıflar (body, a, p, h1, vb.) 2. #header 3. # nav-menü 4. # ana içerik

Her bölüme yorum eklemeyi unutmayın!

/ ****** ana içerik ********* / stiller buraya gidin ... / ****** altbilgi ********* / stiller buraya gidin ...

6. Öğeleri gruplandırın

Öğeler genellikle örtüşen, ortak stillere sahip olabilir. Zaten sahip olduğunuz kodu yeniden yazmak yerine, öğeleri gruplandırmak daha iyidir. Örneğin, başlıklarınız h1, h2 ve h3 aynı yazı tipine ve renge sahip olabilir:

H1, h2, h3 (yazı tipi ailesi: tahoma, renk: # 333)

7. Önce HTML işaretlemesi oluşturun

Birçok geliştirici, CSS dosyasını HTML işaretlemesine paralel olarak oluşturur. Kulağa mantıklı geliyor, ancak önce HTML ve ardından stiller ile uğraşarak yine de çok zaman kazanabilirsiniz. Bu yaklaşım, sayfayı bir bütün olarak düşünmenize, hangi stilleri nereye uygulayacağınızı düşünmenize ve sonuçta daha tutarlı bir yukarıdan aşağıya stil dosyası oluşturmanıza olanak tanır.

8. Bir öğeye gerektiği gibi birden çok sınıf uygulayın

Bazen bir öğeye aynı anda birden çok sınıf uygulamak daha iyidir. Diyelim ki bir konteyneriniz var div sormak istiyorsun Sağa çık ve zaten bir sınıfın var .sağ her şeyi sağa hizalayan stil sayfanızda. Kapsayıcınıza başka bir sınıf ekleyebilirsiniz. div:

Boşluklarla ayırarak istediğiniz kadar sınıf ekleyebilirsiniz.

Not
gibi isimleri kullanırken çok dikkatli olun. sol ve sağ... Konteyneri aniden sola hizalamanız gerektiğini hayal edin. Bu durumda, sayfadaki görsel görüntüyü değiştirmek için HTML koduna geri dönmeniz ve sınıf adını değiştirmeniz gerekir. Anlamsal değil. Unutmayın: HTML işaretleme içindir, CSS görsel sunum içindir.

Sayfa düzenini değiştirmek için HTML düzenlemelerine ihtiyacınız varsa, yanlış bir şey yapıyorsunuz!

9. Doğru Doctype etiketini kullanın

Her iki türün öğeleri şunları içerir:

Span, a, güçlü, em, img, br, input, abbr, kısaltma

Blok öğeleri şunları içerir:

Div, h1 ... h6, p, ul, li, tablo, blok alıntı, ön, form

13. Özellikleri alfabetik olarak düzenleyin

Bu emlak düzenleme sistemini kullanmak, istediğiniz mülkü ararken size çok zaman kazandıracak.

# pamuk şeker (renk: #fff; kayan nokta: sol; yazı tipi ağırlığı: yükseklik: 200 piksel; kenar boşluğu: 0; dolgu: 0; genişlik: 150 piksel;)

Not
Eh .., biraz daha iyi okunabilirlik için hızı feda edin .. Kendiniz görün ..
Not

14. CSS Kompresörleri Kullanın

CSS sıkıştırıcılar, gereksiz satır sonlarını kaldırarak ve öğeleri birleştirerek stil sayfanızın boyutunu önemli ölçüde azaltabilir. Bütün bunlar sitenizin daha hızlı yüklenmesini sağlar. CSS Optimizer ve CSS Compressor, bunu yapmak için iki harika çevrimiçi hizmettir.

Dosyanın boyutunu küçültmenin yanı sıra, doğal olarak okunabilirliğinde önemli bir azalma elde edersiniz, bu nedenle artık stillerde düzenleme yapmanız beklenmediğinde bu tür hizmetleri kullanın.

15. Genel sınıfları kullanın

Yakında tekrar tekrar uyguladığınız stiller olduğunu fark edeceksiniz. Bu stili her bir kimliğe eklemek yerine, genel sınıflar oluşturabilir ve bunları diğer CSS sınıflarının kimliklerine ekleyebilirsiniz (bu makaledeki ipucu # 8'e bakın).

Örneğin, kullandığımı fark ettim Sağa çık ve yüzer: sol tasarımlarında defalarca sadece sınıfları ekliyorum .sol ve .sağ stil sayfama ve onu öğelere uygula.

Sol (kayan: sol) .sağ (kayan: sağ)

Bu sayede sürekli yazmak zorunda kalmazsınız. yüzer: sol Bu özelliği uygulamak istediğiniz tüm öğeler için.

16. Tasarımı ortalamak için "Margin: 0 auto" kullanın

CSS'de yeni olan birçok kişi neden sadece kullanamadıklarını anlamıyor yüzer: merkez blok elemanları için merkezleme etkisini elde etmek için. Keşke bu kadar basit olsaydı! Ne yazık ki, bunu şu şekilde yapmanız gerekiyor:

Marj: 0 otomatik; / * 0 - üst ve alt için; otomatik - sol ve sağ için * /

17. Her şeyi bir DIV'ye dahil etmeyin

Genellikle şöyle bir şey yapmak cazip gelir:

Bu yeterince iyi bir çözüm gibi görünebilir, ancak stil sayfanızı karıştırmaya başlayacaktır. Bunun yerine daha basit hale getirin:

Başlık metni

Ve zaten etiket için h1 ihtiyacınız olan herhangi bir tasarımı ayarlayabilirsiniz.

18. Firebug'u kullanın

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