Html dili kişisel web sayfası hazırlarken ne işimize yarayacak?
Biz dreamweaver programını kullanacağımız için bu program html kodlarını kendisi oluşturacak. Ama css yada java script kodlarını sayfamızın içerisine gömmemiz gerektiğinde yada dreamweaver programının olmadığı bir bilgisayarda sayfamızı güncellemek istediğimizde html çok fazla işimize yarayacaktır. O zaman içinizden bana bir teşekkür etseniz yeter : )
Bir html sayfası oluşturmak için dreamweaver, frontpage gibi gelişmiş özellikleri olan tasarım programlarını kullanabileceğimiz gibi windows’ un not defterinide kullanabilirsiniz. Biz bu dersimizde küçük bir uygulama ile not defterinde temel bazı bilgileri vereceğiz. Zaten tek bir sayfadaki bu kısa yazı ile html uzmanı olmanız söz konusu olamaz. Eğer html konusunda detaylı bilgi almak isterseniz yada html komutlarının kullanımını ve örneklerini ayrıntılı olarak görmek isterseniz buraya tıklayarak daha önce hazırlamış olduğum html eğitim cd’ sini bilgisayarınıza indirerek görüntülü olarak oradan çalışabilirsiniz.
Basit bir html sayfası oluşturmak için masaüstünde sağ tıklayın, açılan menüden Yeni > Metin Belgesi diyerek not defterini masaüstüne getiriyoruz. Şimdi not defterini açarak sayfamızı kodlamaya başlayabiliriz.
İlk olarak not defterine aşağıdaki kodları yazalım.
<strong>İlk web sayfam - www.nuriavci.com</strong>
Kişisel Web Sayfama Hoşgeldiniz...
Sonrasında Dosya > Farlı kaydet menüsünden dosyamıza index.html ismini verelim. ( Buradaki html uzantısı çok önemli.) Şimdide html uzantılı dosyayı nereye kaydettiysek çift tıklayarak açalım ve ilk web sayfamızı görüntüleyelim.
Son olarak sayfamızdaki temel html kodlarını açıklayalım. Buradaki < ve > işaretleri arasına yazılan her bir komuta etiket dediğimizi bir kez daha hatırlatalım.
– Bütün html sayfaları bu etiket ile başlar. web sayfasının başladığını işaret eder.
– Head etiketi sayfanın baş bölümünü işaret eden etiketdir. Sayfa ile ilgili açıklayıcı bilgiler burada yer alır.
– <em>Başlık etiketidir. Buraya yazdığınız yazılar tarayıcının en üstünde görüntülenecektir.</em></p> <p> – Başlık etiketi kapatmak için kullanırız. Üstteki başlık etiketinden farkı önündeki / işaretidir. Açılış ve kapanış başlık etiketleri arasına yazılan yazı tarayıcının en üstünde görüntülenir. Google tarafından title etiketi çok büyük öneme sahiptir.
– Baş etiketini kapatır.
– Sayfa içerisinde görüntülenecek olan yazılar ve resimler bu etiketten sonra eklenir. Sayfanın gövde bölümünü oluşturur.
– Sayfadaki gövde bölümünün bittiğine işaret eder.
– Web sayfasının bittiğini işaret eder. Bütün sayfalar bu etiket ile sonlanır.
Yukarıdaki açıklamalar ilk seferde kısa ve karışık gelebilir. Ama genel hatlarıyla web sayfalarının etiketiyle başlayıp etiketiyle bittiğini bilmeliyiz. Ayrıca sayfamızı baş ve gövde olmak üzere iki bölüme ayırıyoruz. Baş bölümünü ve etiketleri arasına yazdıklarımız oluşturur. Sayfanın başlığıda
ve etiketleri arasında baş bölümünde yer alır. Sayfaların görünen yüzü ise ve etiketleri arasında yer alan kısmıdır.
Bu açıklama soru işaretlerini biraz azalttı ise sayfamızdaki kodları tekrar görebilmek için html uzantılı dosya üzerinde sağ tıklayıp birlikte aç diyerek not defterini seçelim. Böylece kodlarımıza tekrar ulaşmış olduk. İstediğiniz düzenlemeyi yapıp dosyadan kaydet dedikten sonra sayfayı yeniden açtığınızda değişikliklerin sayfaya yansıdığını göreceksiniz.
Ziyaret ettiğiniz bir sayfanın html kodlarını görmek isterseniz sayfa üzerinde sağ tıklayarak kaynağı görüntüle diyebilirsiniz. Not defteri ile birlikte sayfa kodları karşınıza çıkacaktır. Ziyaret ettiğiniz sayfaya göre bu kodların çokluğu sizi şaşırtabilir hatta bazılarınızı korkutabilir : )
Eğer bu satıra kadar geldiyseniz, izninizle size küçük bir ödev vermek istiyorum : ) Aşağıdaki etiketleri ve etiketleri arasına yazdığınız bir paragraf yazının aralarına ekleyin. Bakalım ne gibi değişiklikler göreceksiniz. Etiketlerin hepsinde kapanış bölümü olmak zorunda değil, eğer varsada doğru şekilde kullanmaya özen gösterin.
……..
…….
……..
…….
…….
…….
…….
……
bu etiketi h6 ya kadar kullanabilirsiniz. Ama açılış ve kapanış bölümlerinin aynı olmasına dikkat edin.
Şu ana kadar işin sıkıcı kısmını geride bıraktığımızı bilmenizi isterim. Ödevde bittiğine göre artık bir sonraki derste görüşmek üzere.
