6-7 satırlık bir kod verilmiş birinci ödevde:
Bölüm 1: Belgedeki metni biçimlendirme
<span> özelliği olan metni <style> etiketi içerisinde şu şekilde biçimlendirin:
- yazı tipi ailesini (“font-family”) Cambria,
- yazı tipi boyutunu (“font-size”) 22 punto,
- rengi (“color”) green (yeşil)
- span’ı id=”odev1” olarak belirleyin.
Paragrafın (ikinci cümle) yönünü, parametre dir kullanarak sağdan sola (rtl) doğru değiştirin.
Bölüm 3: Metnin konumunu ayarlama
<span> özelliği olan metnin konumunu sabit olarak belirleyin (left: 100 px, top: 200 px).
ikinci ödevde:
Bölüm 1: Odev2.html dosyasını açma
Notepad++ programını kullanarak Odev2.html dosyasını açın.
Bölüm 2: yeni bir CSS dosyası oluşturma
main ve main:hover elementleri için stil ekleyeceğiniz yeni bir CSS dosyası oluşturun.
main – width:200px, height:160px, arka plan resmi için kobi.jpg görselini kullanın
main:hover – width:200px, height:160px, arka plan resmi için kobi2.jpg görselini kullanın
Odev2.css adıyla kaydedin.
Bölüm 3: HTML belgesine resim ekleme
Odev2.html belgesine, <main> etiketini kullanarak resim ekleyin (etiketi body etiketinin içinde ilk satır olarak ekleyin).
Dikkat: bir önceki adımda, CSS kullanarak <main> elementine arka plan resmi eklemiştiniz. Bu aşamada artık HTML’ye resim eklemenize gerek yok; bunun yerine sadece boş <main> elementini ekleyin. Böylece HTML resim arka planını CSS üzerinden görecektir.
Bölüm 4: <link rel> etiketini ekleme
Odev2.css belgesi için Odev2.html belgesine <link rel> etiketini ekleyin.
üçüncü ödevde:
Bölüm 1: Yeni bir CSS dosyası oluşturma
Önceden hazırlanan Odev3 dosyasını açın ve adımları izleyin.
Bölüm 2: ul ve li elementleri için gerekli CSS stillerini ekleme
ul elementi için: list-style-type: none; margin: 10px; padding: 0; width: 200px; background-color: aliceblue; border: 1px solid black ve float: left;
li elementi için: border-bottom: 1px solid black; text-align: center li a için: display: block; color: black; padding: 8px 16px; text-decoration: none;
li a:hover için: background-color: black; color: white;
Bölüm 3: body etiketleri içine liste ekleme
Elementlerle liste ekleyin:
- Ana Sayfa
- Haberler
- Neredeyiz?
- İletişim
- Hakkımızda
