Temel Seviye HTML BilgisiHTML (Hyper Text Markup Language) dosyası epub oluşturma işleminin başlangıç noktasıdır. HTML, web sayfalarında bulunan bir dosya türüdür. HTML dosyaları, etiketler içeren metin dosyalarıdır. Etiketleri, normal metinden nasıl ayırt ederiz? Etiketler ilişikteki gibi tırnak içerisinde bulunan küçüktür ve büyüktür sembolleri yani “<” ve “>” arasında belirtilir. Örneğin, “<p>” etiketi, yeni bir paragrafın başladığını belirtir ve “</p>” etiketi, paragrafın bittiğini belirtir. <h1>Birinci seviye başlık</h1> Kalın olarak belirtilmiş olanlar bizim etiketlerimizdir. Geri kalan kısım ise metnimizdir. “/” (slaş) işaretini içeren etiketler kapanış etiketleridir. Metnin her parçası, başlangıç etiketi ve bitiş etiketi içerisinde bulunur. Örneğin, <p>METİN PARÇASI</p> ya da <h1>BAŞLIK</h1> şeklindedir. <h1></h1> ve <h2></h2>, seviye 1 ve seviye 2 başlık ve altbaşlığı ifade eder. 1’den 6’ya kadar 6 seviye başlık etiketi mevcuttur. Şimdi, kendi html dosyamızı birlikte yazıp etiketleri öğrenelim. İlk önce not defteri programını açıp aşağıdaki satırları yazınız. Metin belgesini “deneme.html” adıyla farklı kaydet’e tıklayıp kaydedin (Dosya adının “deneme.html.txt” olmadığından emin olunuz.) ve deneme.html dosyasını İnternet Explorer ya da diğer tarayıcılardan birisi ile açın. Karşınıza aşağıdaki gibi bir ekran gelecektir. Yukarıda gördüğünüz gibi etiketler tarayıcılarda, kitap okuyucularda, ekitap okuma programlarında görünmez. NOT:Başlıkların ve paragrafların görünümü kullandığınız tarayıcınızın varsayılan ayarlarından dolayıdır. Bu görünümü değiştirmeyi daha sonra öğreneceğiz. Şimdi, “deneme.html” dosyasında biraz biçimlendirme yapalım. “deneme.html”nin bir kopyasını oluşturup “deneme2.html” adıyla metin belgesi programında açınız. <h1>Birinci seviye başlık</h1> Yukarıdaki gibi yazıp dosyayı kaydedin. (dosya adında .txt olmadığından emin olunuz.) NOT: Yukarıda kalın ve mavi ile belirtilmiş etiketler içerisinde bulunan metnin tarayıcıdaki değişikliğine dikkat ediniz. <i></i> etiketi içindeki metin her zaman eğik yani italik olarak görünür. <b></b> etiketi içerisindeki metin kalın yani bold, <u></u> etiketi içerisinde olan metnin ise altında çizgi oluşur. Şimdi ise tekrar "deneme2.html" dosyasını metin belgesi programında açıyoruz ve kalın olarak belirtilen satırları ekliyoruz. <html> Şimdi dosyayı tekrar “deneme3.html” olarak kaydediyoruz ve tarayıcıda açıyoruz. Yukarıda gördüğünüz gibi görüntüde herhangi bir değişiklik olmadı. Bunun sebebi tarayıcıda gösterilecek metin mutlaka <body></body> etiketi içerisinde bulunur. İlk dosyamızdaki “deneme.html” etiketler, şu anda <body> etiketi içerisinde bulunuyor. <body> etiketinden önce ise <head> etiketi gelmektedir. Bu etiketin içerisinde tarayıcıda görünmesini istemediğiniz bilgiler bulunur. Ve en son tüm etiketleri kapsayan <html></html> etiketi bulunur. Daha fazla html bilgisi için aşağıdaki bağlantıya tıklayınız. https://www.w3schools.com/html/default.asp NOT: İngilizce bilmeyenler siteyi sağ üstteki dünya simgesinden türkçeye çevirebilirler. Temel Seviye CSS BilgisiCSS (Cascading Style Sheets) html etiketlerinin (<p>,<h1>,<h2>) nasıl görüneceğini tarayıcıya bildiren dosyadır. CSS sayesinde her elemente tek tek görsellik atama zorunluluğundan kurtulabiliyoruz. Şimdi not defterini(metin belgesi) açalım ve css uygulamasına geçelim. Aşağıda gördüklerinizi metin belgesine yazın ya da yapıştırın. p { Yukarıdaki komutların anlamları: text-align: Yazıların sayfa üzerindeki konumlarını belirleyen komuttur. Bu komut ile yazıları sol, orta, sağ ve her iki tarafa yaslayabilirsiniz. text-indent: Paragraflara bu komut ile girinti verebilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir font-size: Yazıların büyüklüğünü bu komut ile belirleyebilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir font-weight: komutu ile yazılara kalınlık verebilirsiniz. Aldığı değerler: bold, normal font-style: komutu ile yazılara eğiklik verebilirsiniz. Aldığı değerler: italic, normal margin-top: komutu ile üstten boşluk bırakabilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir margin-bottom: komutu ile alttan boşluk bırakabilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir margin-left: komutu ile soldan boşluk bırakabilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir margin-right: komutu ile sağdan boşluk bırakabilirsiniz. Aldığı değer, sayısal değerlerdir ve birimi "em"dir * * * Daha sonra dosyayı style.css olarak kaydedin. (Dosya türü olarak Tüm dosyaları seçiniz ve daha sonra dosya ismini yazınız. İsminin style.css.txt olmadığından emin olunuz.) Şimdi sıra deneme3.html dosyasını not defterinde açıp aşağıda bold olarak belirtilen kısmı ekliyoruz. <html> Dosyayı “deneme4.html” adıyla kaydediniz. (deneme4.html dosyası ile style.css dosyasının aynı klasörde olması gerekmektedir.) “deneme4.html”ye eklediğimiz o satır html dosyasındaki etiketlerin “style.css” dosyasındaki değerlere göre nasıl görünmesi gerektiğini belirtir. Bu değişiklerle;
Şimdi “style.css” dosyasına bakınız ve her satırdaki komutun hangi görüntü değişimine sebep olduğunu kavrayınız. Her komutun bir değeri olmak zorundadır. Bazen etiketler için tanımladığımız komutlar bazı yazılar için uygun olmayabiliyor bu yüzden o yazıyı yeni bir etiket(p, div, h1, h2,..) yaratamadığımızdan ve etiketsiz bırakamayacağımızdan dolayı mevcut etiket için farklı görsellik yaratacak bir sınıf oluşturuyoruz. Oluşturulan sınıfı ise etikete tanımlamayı unutmamak gerekir. Sınıf Oluşturmak İlk adım css dosyasının içine sınıf tanımlamasını yapmak olacak. Daha önce oluşturduğumuz “style.css” dosyasını not defterinde tekrar açınız ve aşağıdaki satırları ekleyip kaydediniz. .center {text-align: center; text-indent: 0;} Gördüğünüz gibi sınıfları oluştururken tek yapmamız gereken sınıf adının başına .(nokta) koyup görsel komutları süslü parantezin içerisine yazıyoruz. Sınıf oluştururken dikkat edilmesi gereken iki kural vardır;
<html> Yukarıda görüldüğü gibi paragraf başlangıç etiketine <p> class eklemesi yapılmıştır. İlk önce boşluk bırakıp class yazıyoruz daha sonra ise sırasıyla boşluk olmadan eşittir, tırnak işareti, sınıf adı ve tekrar tırnak işareti yazılır. (class=“sınıfadı”) şeklinde. Şimdi deneme4.html dosyasını açıp paragraflardaki değişikliklere bakalım. İşlem hakkında notlar,
Sıradaki konuya geçiniz.
0 Yorumlar
Yanıt Ver. |
|