User Tag List

2 sonuçtan 1 ile 2 arası
Şu an Web Dizayn kategorisindeki Webmaster doğulmaz, webmaster olunur.(5. DERS 6.DERS) isimli konuyu okuyorsunuz.
  1. #1
    DOLUNAY - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    Feb 2007
    Yaş
    45
    Mesajlar
    497
    Konular
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Webmaster doğulmaz, webmaster olunur.(5. DERS 6.DERS)

    web tasarımı (4. ders)


    Yeni bir derste daha sizinle buluşmak güzel.
    Şu ana kadar hangi HTML etiketlerini gördük bir gözden geçirelim;

    <h1> </h1> <h2> </h2> <h3> </h3> ...
    Başlık yazmak için kullanılır.
    Koyu ve büyük yazı elde edilir.
    Başlık yazısının öncesinde ve sonrasında otomatik boşluk olur (paragraf olur).
    Bazı arama motorları başlık özelliği olan cümledeki kelimeler aratıldığında sayfanızı öne çıkartır.

    <br>
    Yazının içinde bu etiket olduğunda etiketten sonraki yazı satır başından başlar.
    Aynı anda iki tane kullandığınızda satır başı yapılmadan önce boş bir paragraf oluşur.

    <font size="" color=""> </font>
    Yazılar üzerinde çeşitli işlemler yapabilirsiniz.
    size özelliği ile yazının büyüklüğünü ayarlayabilirsiniz.
    color özelliği ile yazıya renk verebilirsiniz.
    Rengin ingilizce adını yazmanın yanında RGB koduyla da renk belirtebilirsiniz

    <body bgcolor=""> </body>
    HTML sayfanızın tamamı bu etiket arasında olmalıdır.
    bgColor özelliği ile HTML sayfanıza tümden renk verebilirsiniz.
    body etiketinin özellikleri tüm sayfayı etkileyecektir.

    <html> </html>
    Bütün web sayfamız bu etiketin arasında olmalıdır.

    <b> </b>
    Yazı içerisinde koyu (bold) yazmak istediğimiz kısımları bu etiket ile belirtiyoruz.

    <title> </title>
    web sayfanızı adını bu html etiketiyle verebilirsiniz.
    internet tarayıcısı (Web Browser) sayfanızı açtığında title daki isim ilgili pencerenin ismi olur.
    Arama motorlarında sayfanızın ne ile ilgili olduğuna karar verirlirken title etiketi önemli bir kriterdir.

    <head> </head>
    HTML sayfanızın genelini ilgilendiren özellikler bu etiketin arasında olmalıdır.
    title etiketi bunlardan birisidir.
    ileride META etiketileri diye öğreneceğimiz bazı etiketler vardır. Bu etiketler de head (baş/kafa) dediğimiz etiketin kapsamında olmalıdır.


    --------------------------------------------------------------------------------
    Bu dersimizde kullanacağımız HTML etiketleri ve özellikleri şunlardır:

    <U> </U> Altı çizili yazı yazmamızı sağlar
    <I> </I> italik yazı yazmamızı sağlar.

    align özelliği, bir etiket değil etiketlerin birçoğunda kullanılan bir özelliktir.
    align özelliğini aşağıda center değeriyle kullanacağız bundan başka align özelliği left ve right değerlerini de alabilir.
    align 'ni <H2 align="center"></H2> şeklinde kullanacağız.

    <IMG SRC="...."> Resim dosyalarını HTML web sayfamızda göstermemizi sağlar. SRC ile gösterilecek resmin adını belirtiriz.
    .................................................. ................................
    Haydi derse başlayalım; aşağıdaki görünümde yukarıda bahsettiğimiz etiketler ve özellikler kullanılmıştır.
    .................................................. ...............................
    Arılar Çiçeklere Yardım Eder


    Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim.
    Yazmıştı küçük arı hislerini yaşam öyküsünde:
    Her günkü gibi sabahın erken vaktinde çıkmıştım yollara.
    Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk.
    Güneşin doğuşu biz arılara yeni bir fırsattı.
    O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim.

    Güzel olan renkleri görecek güzel kokular duyacaktım.
    Çiçeklere yardım edecektim bugün yine;
    İnsanlara anlatacaktım çiçeklerin hem göz hem burun hem kalp hem de dil için olduklarını
    Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım.
    İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım.
    Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım.
    Ama o gün ....

    Yukarıdaki görüntüyü oluşturan HTML kodu aşağıdaki gibidir.

    <html>
    <head>
    <title> Arıların Çiçeklere Yardımı </title>
    </head>
    <body bgcolor="#A0C0E0">
    <h2 align=center> Arılar Çiçeklere Yardım Eder </h2>
    <img src="balarisi.jpg"><img src="sariikicicek.jpg"> <br>
    Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim.
    <br>
    <b> Yazmıştı <u>küçük arı</u> hislerini yaşam öyküsünde: </b>
    <br>

    <font color="#A000E0" size="4">
    <i>
    Her günkü gibi sabahın erken vaktinde çıkmıştım yollara. <br> Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk. <br> Güneşin doğuşu biz arılara yeni bir fırsattı. <br> O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim. <br> <br> Güzel olan renkleri görecek güzel kokular duyacaktım. <br> Çiçeklere yardım edecektim bugün yine; <br> İnsanlara anlatacaktım <b> çiçeklerin hem göz hem burun hem kalp hem de <u>dil için</u></b> olduklarını <br> Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım. <br> İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım. <br> Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım. <br> Ama o gün ....
    </i>
    </font>

    </body>
    </html>

    .................................................. ....

    Yukarıdaki kodlar hakkında birşeyler söylemek istiyorum. (Çalışmayı tarayıcıda görmek için BURAYAtıklayınız)

    Daha önceki dersimizde şunu söylediğimizi hatırlayın;
    <HTML> <Head> </Head> <Body> Bütün html kodları buraya yazılır. </Body></HTML>
    Bu bir kalıptır ve bu kalıba uymak zorundayız.

    center kelimesinin anlamı merkezdir; Burada başlığımızı web sayfasının ortasına getirmiştir.

    <h2 align=center> </h2> Bazı html etiketleri align özelliğini almaktadır burada header etiketi bu özelliği aldı.

    balarisi.jpg dosyası ve sariikicicek.jpg dosyaları html dosyanızla aynı yerde olmalıdır.
    HTML etiketleri bir birlerini kesemezler:
    Açtığımız herhangi bir etiketin içindeyken (o kapanmadan) başka etiket açabiliriz.
    Birden fazla etiketi açtığımızda kapatırken dikkat etmeniz gereken şey
    en son açılan etiket ilkin kapanmalıdır.
    Bu dediğimi şu şekilde örneklemek istiyorum:
    <font> etiketini açtık henüz font etiketi kapanmadan (</font>) bir başka etiket açtık <i> (italik yazma).
    Bu iki etikette henüz kapanmadı ve biz 3. etiket olan <U> (altı çizilmiş yazı) açtık.

    Lütfen Etiketlerin kapatılma sırasına dikkat edin.
    en son açılan <u> kapatılıyor </u>
    daha sonra <i> kapatılıyor </i>
    en son da <font> kapatılıyor </font>


    Bu yukarıdaki resimle sizlere HTML etiketlerini kapatırken son açılan etiketi önce kapatmanız gerektiğini anlatmaya çalıştık.

    ................................
    .................................
    web tasarımı (6. ders)


    ..........
    Şu ana kadar hangi HTML etiketlerini gördük?

    <h1> </h1> <h2> </h2> <h3> </h3> ...
    <br>
    <font size="" color=""> </font>
    <body bgcolor=""> </body>
    <html> </html>
    <b> </b>
    <title> </title>
    <head> </head>
    <U> </U>
    <I> </I>
    <IMG SRC="....">

    Web tasarımı öğrenme isteğiniz sizi bu derse kadar getirdi; Tebrik ederim
    Haydin devam edelim.
    Bu dersimizde sizlerle resimlere (<img> html etiketi) yükseklik (height) ve genişlik (width) vermesini göreceğiz.
    Resimlere çerçeve (border) vereceğiz.
    HTML dosyasında nesneler (kelime/resim vs..) arasına boşluğu &nbsp; ile vermemiz gerektiğini öğreneceğiz.
    Ayrıca web sitelerine link vermeyi öğrenmiş olacağız.
    ..............................
    şimdi aşagıdakigibi görünen bir wep sayfası uzerinde çalışalım



    yukarıdaki gördügüöüz görüntünün kodu aşagıdaki gibidir.
    ...............
    <html>
    <head>
    <title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
    </head>
    <body>

    <h1> Gazeteler'e linkler<br> şu anda yapım aşamasında...</h1>

    </body>
    </head>

    ..............................
    Şimdi kodlamaya başlayabiliriz:
    </h1> tagı kapandıktan hemen sonra bu site için hazırlanmış logomuzu img html etiketiyle yerleştirelim.
    logoyu kendi makinanıza almak için; logonun üzerine sağ tıklayıp farklı kaydeti seçiniz.
    Logoyu aldıktan sonra html dosyasıyla aynı dizinde olmasını sağlayınız.


    <img src="gazetelere-link-logo.jpg">
    Çerveve vermek için border özelliğini kullanıp çerçeve kalınlığına da 1 değerini atıyoruz.
    <img border=1 src="gazetelere-link-logo.jpg">
    ikisi arasında farkı görebilmek için bu iki img tagını da aynı sayfada kaydedelim.
    Görüntü için buraya tıklayınız.

    ikinci img etiketinden sonra bir <br> ekleyip 3. ve 4. resmin aşağıdaki satırda çıkmasını sağlayacağız.
    &nbsp; yi 3. ve 4. resim arasında kullanalım.
    <img src="gazetelere-link-logo.jpg"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img border=1 src="gazetelere-link-logo.jpg">
    Ben 5 tane &nbsp; kullandım herbiri bir karakter kadar boşluk verir. Ben iki resim arasında 5 karakter kadar boşluk elde etmek istiyorum.
    Sonuç aşağıdaki gibi olması lazım.



    web sayfalarındaki kelime yada harfler arasında birden çok boşluk varsa bunlar web tarayıcıları tarafından tek bir boşlu olarak gösterilir.
    HTML de yazılar arasında boşluk vermek için &nbsp; kullanılır;
    yukarıda resimler arasında boşluk vermek için kullandığımız gibi.

    ............................

    Şimdi width ve height ile çalışalım. aynı sayfada logomuzu 5. kez çıkartalım.
    ekleyeceğimiz resmin yeni bir satırda gelmesi için br tagını bir kez kullanalım.
    html etiketleri çeşitli özellikler alabilirler bu özelliklerin değerleri vardır.
    img etiketinin width özelliğine biz 300 değerini atayalım
    <img src="gazetelere-link-logo.jpg" width=300>
    sonucu görmek için buraya tıklayınız.

    6. resmi ilave etmeden önce çalışmamıza tekrar bir br etiketi ekleyelim
    Bu sefer de img etiketinin height özelliğine değer atayacağız.

    <img src="gazetelere-link-logo.jpg" height=235>
    sonucu görmek için buraya tıklayınız.

    Yeni bir resim eklemeden önce br etiketini kullanmassanız 7. resmimiz 6. nın hemen yanında olacaktır.
    Bu son resimde width=100 olsun height=45
    <img src="gazetelere-link-logo.jpg" width=100 height=45>

    Son bir ekleme daha yapıp bugünkü HTML dersimizi bitirmiş olalım.
    <a href="http://www.gazeteler-e.gen.tr"> Gazetelere linkler </a>
    Bugünkü çalışmamızın tamamına ait HTML kodları aşağıdaki gibidir
    .............................................

    <html>
    <head>
    <title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
    </head>
    <body>

    <h1> Gazeteler'e linkler<br> ?u anda yapym a?amasynda...</h1>

    <img src="gazetelere-link-logo.jpg">
    <img border=1 src="gazetelere-link-logo.jpg">

    <br>
    <img src="gazetelere-link-logo.jpg"> <img border=1 src="gazetelere-link-logo.jpg">

    <br>
    <img src="gazetelere-link-logo.jpg" width=300>
    <br>
    <img src="gazetelere-link-logo.jpg" height=235>
    <img src="gazetelere-link-logo.jpg" width=100 height=45>

    <a href="http://www.gazeteler-e.gen.tr"> Gazetelere linkler </a>

    </body>
    </head>
    .................................................. .....
    Çalışmamızın son halini görmek için buraya tıklayınız


  2. #2
    Forum Yöneticisi hunca - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    Feb 2006
    Yaş
    48
    Mesajlar
    1.417
    Konular
    722
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    teşekkürler dolunay...

Konu Bilgileri

Users Browsing this Thread

Şu an 1 kullanıcı var. (0 üye ve 1 konuk)

Bu Konudaki Etiketler

Yetkileriniz

  • Konu Acma Yetkiniz Yok
  • Cevap Yazma Yetkiniz Yok
  • Eklenti Yükleme Yetkiniz Yok
  • Mesajınızı Değiştirme Yetkiniz Yok
  •  

SEO by vBSEO 3.6.0