24 Ekim 2019 Perşembe

.onemli {
  color:brown;
  font-weight:bold;
 }















<!DOCTYPE html>
<html lang="tr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
      <link href="stil.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <p class="onemli">Turgay</p>
    <h1 class="onemli">Turgay </h1>
  
  </body>
</html>



zaman: Hiç yorum yok:
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>turgay</title>
    <style type="text/css">
    h1
    {
      font-size:30px;
      font-weight: bold;
      color:red;
    }
    h2
    {
      font-size:20px;
      font-weight: bold;
      color:blue;
    }
    </style>
  </head>
  <body>
    <h1>CSS Yapısı </h1>
    <h2>CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil ġablonları olarak yerleĢen basit ve kullanıĢlı bir iĢaretleme dilidir. Stil Ģablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır.
             Diğer bir deyiĢle sayfamızın içeriğinin biçimlendirilme iĢleminin yapıldığı kısımdır.</h2>
<h1>STIL SABLONU</h1>
<h2>CSS‟nin söz dizimi aĢağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden olusur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.</h2>

<h1 style="color:green;"> Etiket (Tag ) Seçicisi </h1>
<h2>Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir baĢka deyiĢle etiketleri kendi isteğimize göre uyarlarız.
   Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;</h2>

       </body>
</html>

zaman: Hiç yorum yok:
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>turgay</title>
    <style type="text/css">
    h1
    {
      font-size:30px;
      font-weight: bold;
      color:red;
    }
    h2
    {
      font-size:20px;
      font-weight: bold;
      color:blue;
    }
    </style>
  </head>
  <body>
    <h1>CSS Yapısı </h1>
    <h2>CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil ġablonları olarak yerleĢen basit ve kullanıĢlı bir iĢaretleme dilidir. Stil Ģablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır.
             Diğer bir deyiĢle sayfamızın içeriğinin biçimlendirilme iĢleminin yapıldığı kısımdır.</h2>
<h1>STIL SABLONU</h1>
<h2>CSS‟nin söz dizimi aĢağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden olusur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.</h2>

<h1 style="color:green;"> Etiket (Tag ) Seçicisi </h1>
<h2>Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir baĢka deyiĢle etiketleri kendi isteğimize göre uyarlarız.
   Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;</h2>

       </body>
</html>

zaman: Hiç yorum yok:

9 Ekim 2019 Çarşamba

tablo

<head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border="1" >
      <tr>
      <thead>
        <th>Şehirler</th>
<th>İlçeler</th>
      </thead>
      </tr>
        <tr bgcolor="Red">
       <td >Aydın</td>
        <td >
<ol>
  <li>Efeler</li>
  <li>Didim</li>
  <li>Kuşadası</li>
  <li>Çine</li>
</ol>
<tr>
  <td >İzmir</td>
<td>
<ol>
<li>Buca</li>
<li>Bornova</li>
<li>Bayraklı</li>
<li>Aliağa</li>
</ol>
<tr bgcolor="Red">
  <td >İstanbul</td>
<td >
<ol>
<li>Şişli</li>
<li>Kadıköy</li>
<li>Esenyurt</li>
<li>Beşiktaş</li>
</ol>
        </td>
        </tr>
  </body>
</html>
zaman: Hiç yorum yok:

30 Eylül 2019 Pazartesi

4. BAĞLANTI (KÖPRÜ) OLUŞTURMA

4.1. Sayfa İçi Bağlantı Oluşturma

Html kodları kullanarak, sayfa içi bağlantılar oluşturabilirsiniz. Bir sayfadaki metne tıklayarak, aynı sayfanın başka bir bölümüne gidebilirsiniz. Bu işlem çapa olarak da adlandırılır.

Çapa oluşturma işlemi;

<a href="#...">...</a>, <a name="....">...</a>  komutları kullanılarak yapılmaktadır. <a href=”#...”> ile tıklanmasını istediğimiz metin; <a name=”...”> ile de karşımıza gelmesini istediğimiz bölüm belirlenir.

<a href="#ornek">Html Nedir?</a> 
<a name="ornek">Hyper Text Markup Language</a> 
Html Nedir?
Hyper Text Markup Language 
ÖĞRENME FAALİYETİ-4
AMAÇ
ARAŞTIRMA


33


Yukarıdaki kodları yazıp çalıştırdığımız zaman karşımıza aşağıdaki görüntü gelecektir.



34

4.2. Sayfa Dışı Bağlantı Oluşturma

Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar, dokümanlar, resimler  arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link, köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.

 Herhangi bir web sayfasına bağlantı oluşturmak;

<a href=”http://www.meb.gov.tr”> Milli Eğitim Bakanlığı</a>

“Milli Eğitim Bakanlığı”, yazısına tıkladığınız zaman “www.meb.gov.tr “ internet sitesi açılacaktır.

 Hazırlamış olduğumuz site içerisinde link vermek;

<a href=”index.html”>Ana Sayfa</a>

“Ana Sayfa” yazısına tıkladığımız zaman hazırlamış olduğumuz ve bilgisayarımızda kayıtlı olan “index.html” sayfasına bağlantı oluşturulacaktır.

 Herhangi bir yazıya tıkladığınız zaman resim açılması için; <a href=”okul.jpg”>Okulumuzun Resmini Görmek İçin Tıklayınız</a>

 Herhangi bir dosyaya link vermek için; <a href=”portlar.pdf”>Portlar modülünü indirmek için tıklayınız…</a>

<a href=”resimler.zip”>Bilgisayarınıza indirmek için tıklayınız</a>

Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz.

<a href="..." target="..." > </a>

target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar. target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar. target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar. target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.

target="çerçeve(frame)  adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır.

<a href=http://www.meb.gov.tr target=”_blank”> Milli Eğitim Bakanlığı</a>


35

4.3. E-Posta Adresine Bağlantı Oluşturma

Hazırlamakta olduğunuz web sitesi aracılığıyla istenilen herhangi bir e-posta adresine bağlantı oluşturabilirsiniz.

E-posta adresine bağlantı oluşturmak için; <a href=”mailto:e-posta adresi”>….</a> komutu kullanılır.

Örnek:

<a href=”mailto: etogm@meb.gov.tr”> E-posta göndermek için tıklayınız.</a> 

Yukarıdaki html komut satırını yazıp kaydettiğinizde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

E-posta göndermek için tıklayınız yazısına, tıklandığı zaman  konu, bilgi ve e-posta adresi gibi bilgilerin girilebileceği Şekil 4.1’de görünen e-posta gönderme programı açılacaktır. İstenilen bilgiler yazıldıktan sonra “Gönder” düğmesine tıklandığında,  e-postamız gönderilmiş olur.
zaman: Hiç yorum yok:
 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ
 3.1. Metin Düzenleme Etiketleri

Html etiketleri kullanılarak metinler üzerinde görsel düzenlemeler yapılabilir. Bir metnin rengi, şekli, boyutu vs. üzerindeki değişiklik ve düzenlemelerin html etiketlerini kullanarak nasıl yapılacağına bakalım.

3.1.1. <HX>

<HX> etiketleri, dokümana başlık eklemek için kullanılan etiketlerdir. <hx> etiketindeki “x” ifadesi, 1’den 6’ya kadar değer almaktadır. Sayı azaldıkça yazı büyüklüğünde artış olmaktadır. Buradaki <h1>…</h1> en büyük başlığı, <h6>…</h6> ise en küçük başlığı gösterir.

  <B>

İstenilen metni kalın (bold) olarak yazmak için kullanılır.

Kullanımı: <B>…</B> şeklindedir

<I>

İstenilen metni eğik(italik) olarak yazmak için kullanılır. Kullanımı: <I>…</I> şeklindedir.



Boş zaman yoktur boşa geçen zaman vardır. Tagore

3.1.5. <BR>

Enter tuşu görevini görür. Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz.


Ey Türk Gençliği! Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini,  ilelebet, muhafaza ve müdafaa etmektir.






3.1.6. <P>

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.



 


3.1.7. <FONT>

<FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir.

Size: Yazının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.).

Örnek: <FONT SIZE ="1"> Merhaba</FONT> <FONT SIZE ="4"> Merhaba</FONT> <FONT SIZE ="7"> Merhaba</FONT>

Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

Size parametresine -1, +2 gibi değerler verilerek de metnin büyüklüğü verilen değer kadar arttırılıp eksiltilebilir (Burada font büyüklüğü 1 eksiltilip, 2 arttırılmıştır.).

Color: Yazı tipi etiketi içerisinde metnin rengini değiştirmek için kullanılır. Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği yapabilirsiniz.

Örnek: <FONT size="5" COLOR="aqua"> Merhaba</FONT> <FONT size="5" COLOR="#FF0000"> Merhaba</FONT>

Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

Face: Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır. Örneğin Face=" Times New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.

<font face="Algerian" size="7" color="purple">Merhaba</font>

Burada yazı tipi olarak “Algerian” yazı tipi kullanılmıştır. Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.



28

3.2. Görünüm Düzenleme Etiketleri

3.2.1. <HR>

<HR> etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

Size, çizilen çizginin kalınlığını belirlemek için kullanılır. Width, çizginin sayfadaki uzunluğunu belirlemek için kullanılır. Align, çizginin sayfada yer alacağı konumunu (sağa hizalı, sola hizalı, ortalanmış) belirlemek için kullanılır. 

Örnek: <hr size=“6” width=”200” align=“center”>
zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)

.onemli {   color:brown;   font-weight:bold;  } <!DOCTYPE html> <html lang="tr" dir...

  • (başlık yok)
     METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ  3.1. Metin Düzenleme Etiketleri Html etiketleri kullanılarak metinler üzerinde görsel düzenlemele...
  • (başlık yok)
    <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title>turgay<...
  • tablo
    <head>     <meta charset="utf-8">     <title></title>   </head>   <body>     <table border=...