11
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 14.285 Defa

Web Sayfalarınızda Kullanacağınız Yatay Çizgiler İçin HR Parametresinden Faydalanacağız Yatay Çizgilerin Boyutları ve Renklendirilmesinide Bu dersimizde Ele Alacağız Arkadaşlar.

Öncelikle Bir Önceki Dersimizi İncelemeyen Arkadaşlar Orayada Bakarsa Takılmazlar.

Bir Önceki Dersimiz: Web Tasarım Dersleri Sağa Sola Ortalama Komutları Ders3

<hr>

Parametresi Arkadaşlar Web sayfamızda yatay çizgi çizmemize yarar dedik ve bu parametrenin ek özellikler katmamızı sağlayacak etiketleri bulunmaktadır nedir bunlar.

  • Yatay Çigilere Boy Vermek
  • Yatay Çizgilere Renk Vermek

Şeklinde Özellikleri Kullanabiliriz değerli arkadaşlar.

Yatay Çizgilere Boy Vermek Width

Width Parametresi ile arkadaşlar hr etiketi ile kullandığımızda yatay çizgimizin boyutunu yani genişliğini belirlemeye yardımcı olur .

Width parametresinin değeri ölçüm olarak piksel yada % oranı ile belirtebiliriz .

Yatay Çizgi Etiketi Kullanımı

<hr width=”200″> yada <hr width=”40%”> şeklinde ister piksel istersek % oranı ile boyut verilebilir

Yatay Çizgilerde Size Parametresi

Size Parametresi hr etiketi ile kullandığımızda çizginin dikeyde boyutunu belirlememizi sağlar

Yatay Çizgilere Renk Vermek Color

Color parametresi hr etiketi ile kullandığımızda yatay çigimizin rengini belirlememizi sağlar arkadaşlar. Renk değeri vermek için gerek RGB renk kodları olabileceği gibi gerekse gerekse rengimizin ingilizce karşılığı olan renk adı ilede değer atayabiliriz.

Yatay Çizgi Renk Uygulaması

<hr color=”red”> yada <hr color=”FF0000″> şeklinde belirleyebiliriz örnekte red biliyorsunuz ingilizce kırmızı demek FF0000 ise renk kodlamasında kırmızı demektir. RGB renk kodlarını inceleyerek çok kullanılan renk kodlarını az çok ezberleyin.

Yatay Çizgileri Hizalamak

Align parametresi daha önceki derslerimizdede değinmiştik hatırlarsanız align hr etiketi ile kullanıldığında yatay çizgimizin hizalanmasını sağlar arkadaşlar değer olarak left, right, center yani sağa sola ve ortala şeklinde hizalama yapabiliriz arkadaşalar.

Yatay Çizgi Uygulaması

Boş bir not defteri açıyoruz arkadaşlar benim yaığım kodları aynen sizde kopyala yapıştır yapmadan yazın ve farklı kaydet diyerek dosya adına cizgiler.html adını vererek masaüstüne kaydedin

<html>
<head>
<title> Webmasteryolcu İle Web Tasarım Dersleri 4 </title>

</head>

<body>
Webmasteryolcu Sitesinden Öğrenecekleriniz
<hr size=”5″ align=”left” color=”red”>
Html Kodlamalar<br>
Ftp Kullanımı<br>

<p align=”right”>
Derslerin Devamında Öğrenecekleriniz
</p>

<hr width=”200″ size=”5″ align=”right” color=”green”>
<p align=”right”>
Php Mysql<br>
Cms Hazır Sistemler<br>
Wordpress<br>
Joomla<br>
</p>

<p align=”center”>
Derslerin Sonunda Kazancınız
</p>

<hr width=”50%” size=”5″ align=”center” color=”blue”>
<p align=”center”>
Web Tasarlayabilecek<br>
Php Siteler Yapabileceksiniz<br>
Kazanç sağlayacaksınız<br>
</p>

</body
</html>

Html Yatay Çizgiler

Html Yatay Çizgiler

Şimdi ne yap ığımı özetliyim akadaşlar ilk uygulamada çizgi yüksekliği 5 olan sola yaslı kırmızı renkte çizgi çiz dedim ve yazılar

2. uygulama ise piksel cinsinden 200 boyutunu vererek sağa yaslı dikey boyutu 5 olan yeşil renkte çizgi çizdim ve yazılar ekledim.

3. uygulama ise boyutu piksel olarak değilde % oranıyla belirledim ve ortalı olmasını dikey boyutunun 5 renginin mavi olmasını istedim.

Bugünki dersimiz bu kadar arkadaşlar bir sonraki dersimizde Allah kısmet ederse renkler ve arkaplanlara geçeceğiz.

Derslerimi istediğiniz sayfa yada sitede yayınlayabilir www.webmasteryolcu.com kaynak olarak belirmek suretiyle.



   Paylaş

6 Yorum yapılmış

  • ali
    11 Ekim 2010 | Cevapla

    hocam head di kapatmamışsın sorun olmazmı o?

    • 12 Ekim 2010 | Cevapla

      Kapatmak gerekir ali mutlaka dalgınlığıma gelmiştir kapatmak gerekir

  • onder
    11 Ekim 2010 | Cevapla

    Paylaşım İçin Ve Anlatım İçin Tşklr.

  • talha
    12 Ekim 2010 | Cevapla

    yok kardeşim sorun olmaz headi kapatmaman.

  • ali
    12 Ekim 2010 | Cevapla

    hocam bu siteyi çok sevdim ben yazıları hep takip ediyorum. ödevleride yapıyorum.şöle ufaktan bi takılayım dedim 😀 kusura bakma.

  • Özgün
    08 Mart 2011 | Cevapla

    Ben yapamadım 2 saat uğraştım kodları yazdım ama hizalar yok yazı var.

Yorum yapın