Yeni Başlayanlar İçin Web Tasarım: Kasım 2011

25 Kasım 2011 Cuma

HTML DE TABLOLAR

        Tablolar web sitelerinin en çok kullanılan özelliklerindendir. Web sayfalarına eklenecek öğelerin istenildiği gibi konumlandırılmasını ve aynı zamanda sayfamızın daha düzenli bir görünüme sahip olmasını sağlarız.
        Tablolar satır ve sütunlardan oluşur. Satır ve sütunun kesiştiği her noktaya hücre adı verilir.Her hücreye farklı özellikleri verilebilir.
        Tablo oluşturulurken  hiyerarşi söz konusudur.

<table> </table> Tablo oluşturur.
<tr> </tr> Satır oluşturur.

<td></td> Sütun oluşturur.

PARAMETRELER	GÖREVLERİ
bgcolor (İstediğiniz renk adı kullanılabilir.)	Zemin rengi.Hem tablo için hemde hücreler için kullanılabilir.
background (İstediğiniz renk adı ve reim kullanılabilir.)	Zeminde resim göstermek için.Hrmde tablo hemde hücrelerin herbiri için kulanılabilir.
border (pixel cinsinden değer kullanılabilir.)	Tablonun etrafına çerçeve yapmak için kullanılır.
width (pixel cinsinden değer kullanılabilir.)	Tablo veya hücrenin genişliğini belirtmek için kullanılır.
height (pixel cinsinden değer kullanılabilir.)	Tablo veya hücrenin yüksekliğini belirtmek için kullanılır.
align (left (sol) , center (orta) , rigth(sağ))	Tablo yada hücreyi belirli bir tarafa yaslamak için kullanılır.Tablonun kendisi için kullanıldığında tablonun, hücreler için kullanıldığında hücre içindeki nesnelerin hangi tarafa yaslanacağını belirtir.
valign (top(üst), middle(orta) , bottom(alt))	Hücreler için kullanılır.Hücre içindeki nesnelerin yukarı, aşağı yada ortada durmasını sağlar.
colspan (Birleştirmek istediğiniz sütun sayısı yazılır.)	Sütunları birleştirmek için kullanılır.
rowspan (Birleştirmek istediğiniz satır sayısı yazılır.)	Satırları birleştirmek için kullanılır.
cellspacing	Hücreler arasındaki boşlukları belirtir.
cellpading	Hücrelerdeki nesnelerin kenarlara ne kadar uzaklıkta olacağını belirtir.

TEK HÜCRELİ TABLO OLUŞTURMA

<html><title>tablolar</title>

<body>

<table>

<tr>

<td> tek hücreli tablomuz</td>

</tr>

</table>

</body>

</html>

İKİ SATIR TEK SÜTUNLU TABLO OLUŞTURMA

<html><title>tablolar</title>

<body>

<table>

<tr>

<td> 1. SATIR </td>

</tr>
<tr>
<td> 2. SATIR </td>
</tr>

</table>

</body>

</html>

İKİ SÜTUN İKİ SATIRLI TABLO

<html><title>tablolar</title>

<body>

<table>

<tr>

<td> 1. SATIR 1. SÜTUN </td>
<td> 1. SATIR 2. SÜTUN </td>

</tr>
<tr>
</tr>

<td> 2. SATIR 1. SÜTUN </td>
<td> 2. SATIR 2. SÜTUN </td>

</table>

</body>

</html>

Umarım faydalı oluyordur.Tablo örnekleri yazımızda görüşmek üzere.

24 Kasım 2011 Perşembe

HTML DE LİNKLER

HTML DE LİNKLER

Sıra geldi Html in en önemli unsuru olan linklere… <a href="....">...</a> etiketi bir tıklama ile sizi istediğiniz yere götürecektir.

Bu komut ile farklı bir sayfa açılabilir, bir web sitesine ulaşılabilir , mail adresine ulaşılabilir , bağlantı kurulan herhangi bir dosyaya ulaşılabilir.Yani istediğiniz her öğeye link verebilirsiniz.

<a href=”urun.jpg”> Sayfada gözüküp tıklanacak yazı </a>

METİNLERE LİNK VERMEK

<a href=http://bilgisayar-ogren.blogspot.com> bu siteye ulaşmak için tıklayınız.</a>

Bir web sitesine link verilirken http unutulmamalıdır.

RESİMLERE LİNK VERMEK

MAİL ADRESİNE LİNK VERMEK

<a href=”mailto:xxxxxxx@hotmail.com”>mail göndermek için tıklayınız.</a>

DOSYALARA LİNK VERMEK

<a href=”word.docx”> bu belgeyi buradan indirebilirsiniz.</a>

Link verilen yazılar altında , resimlerin ise kenarlarında çerçeve oluşur.bu çizgiyi kaldırmak için style parametresi kullanılır. Style=”text-decoration:none” şeklinde kullanılır.

<a href=”word.docx” style=”text-decoration:none” > bu belgeyi buradan indirebilirsiniz.</a>

Link verilen konumun açılacağı pencereyi target parametresi ile kullanırız. Target parametresi 4 değer alır.

“_blank”: link verilen öğe farklı pencerede açılsın.

“_self” : link verilen aynı pencerede açılsın.

“_top”: link verilen öğe aynı pencerede üstten başlayarak açılsın.

“_parent “: Anasayfa olarak tanımlanmış sayfada açılsın.

<a href=”word.docx” style=”text-decoration:none” target=”_blank”> bu belgeyi buradan indirebilirsiniz.</a>

10 Kasım 2011 Perşembe

HTML DE RESİMLER

RESİMLER

Resimler web sitelerinde içeriğin zenginleştirilmesi ve görsel açıdan ifadenin netleştirilebilmesi için kullanılmaktadır.

Web sitelerinde kullanılan resimlerin uzantılarının .jpg , .png veya .gif olması gerekmektedir.Aynı zamanda gösterilecek resmin konumu da önemlidir.

Web sitelerine resim eklemek için <img src=”…….”> etiketi kullanılır. Src resmin adının,uzantısının ve bulunduğu yerin belirtildiği parametredir.

Eğer resim ile sayfamız aynı klasörde ise bu yöntem kullanılmalıdır.

Resimleri düzenlemek için width(genişlik) , height(yükseklik) , alt(alternatif metin) ve align(hizalama) parametreleri kullanılır.Width ve height parametreleri pixel cinsinden değer alır.

<img src=”deniz.jpg” width=”100” height=”100” align=”right” alt=”resmin üzerine gidince mouse altında gözükecek yazı”>

Border resimlere çerçeve eklemek için kullanılan parametredir.Pixel cinsinden değer atanır.

<img src=”deniz.jpg” border=”5”>

Dashed: Kesik çizgiler

Solid : Sürekli çizgiler

Double : Çift çizgili

Dotted: Noktalı kenarlık

Çerçeve stilleri ile beraber rengi ve kalınlığı da belirlenebilir.

<img src=”deniz.jpg” style=”border:solid 3 red”>

4 Kasım 2011 Cuma

HTML ÖĞRENİYORUM 6

LİSTELEME İŞLEMLERİ
Listeleme 3 başlıkta toplanır.
1. Sıralı listeler
2. Sırazsız listeler
3. Tanımlama Listeleri

1. SIRALI LİSETELER(Ordered List)

<ol > sıralı liste etkitedir. type parametresi bu listenin türünü belirleyen parametredir. <li> etiketi ise listede yer alacak öğeleri belirleyen etikettir.

<ol type="1">
<li> gs </li>
<li> fb </li>
<li> bjk </li>
</ol>

1 ifadesi yerine a , i de yazılabilir.

2.SIRASIZ LİSTELER( Unordered List)

Kullanım olarak sıralı listelerle aynı yapıya sahiptirler. Fakat type içerisinde kullanılacak değerler farklıdır.

disc : İçi dolu daire
circle : İçi boş daire
square : İçi dolu kare

<ul type="disc">
<li> gs </li>
<li> fb </li>
<li> bjk </li>
</ul>

HTML ÖĞRENİYORUM 5

METİN ETİKETİ

<font> etiketi sayfa içerisinde bulunan metne renk ,boyut,yazı tipi özellikleri kazandırmak için kullanılır.3 tane parametresi vardır.

color: Yazının rengi tanımlanır.
size: Yazının boyutu tanımlanır.1 ile 7 arasında değer alır.
face: Yazının tipi belirlenir.

<font face="algerian" size="5" color="pink"> Html Öğreniyorum </font> şeklinde kullanılır.

HTML ÖĞRENİYORUM 4

PARAGRAF OLUŞTURMA VE DÜZENLEME

<p> etiketi paragraf oluşturan etikettir. </p> etiketide paragraf oluşturma işlemini bitirir.Bu etiketler arasına yazılan metinler paragraf şeklinde görüntülenir.

<p> etiketi ile align parametresi kullanılabilir.Align parametresi paragrafın hizalanmasını belirler. 3 değer alır. Left (sol) , Center (orta) , right (sağ) . Parametreler etiketlerin içerinde yazılır ve o etikete özellik atanmasını sağlar.

<p align="left">Solda gözükecek paragraf </p>
<p align="center>Ortada gözükecek paragraf </p>
<p align="right">Sağda gözükecek paragraf </p>

HTML ÖĞRENİYORUM 3

Metin Düzenleme Etiketleri

1. Başlıklar

Başlık etiketimizin kullanım şekli <hx> başlık </hx> biçimindedir.X değerine 1 den 6 ya kadar farklı değerler alır. Bu değerler başlığın boyutunu belirler.

Örnek:

Gördüğünüz gibi 1 den 6 ya doğru gidildikçe başlık boyutumuz küçülür.

2. YAZIYA BİÇİM ÖZELLİKLERİ VERME

<b> kalın yazar </b>
<i> italik yazar </i>
<u> altı çizgili yazar </u>
<s> üzeri çizgili yazar</s>

Dikkat ederseniz ben etiketleri kod sayfasında alt alta yazmama rağmen tarayıcımız yanyana gösterdi.Tarayıcı da herhangi bir öğenin alt satırda konumlanması için <br> etiketini kullanıyoruz.<br> etiketinin kapatılmasına gerek yoktur.

3 Kasım 2011 Perşembe

HTML ÖĞRENİYORUM 2

Etiketler internet tarayıcılarının işaretlemeri okuyabilmesi için < > işaretleri içerisine yazılırlar.

Örnek:

<Etiket > İşlev atanması istenen , sayfada gözükecek öğe </etiket>

<etiket> : İşlev atamaya başladığımızı tarayıcıya bildirir.
</etiket> : İşlev atamayı bitirdiğimizi tarayıcıya bildirir.

Her html dosyası <html > etiketi ile başlar ve </html> etiketi ile biter.

Bir web sitesi iki kısımdan oluşur. Ziyaretçiler tarafından görünen ve görünmeyen kısımlar...

Head : Tanımlama kısmıdır . Html sayfası ile ilgili bilgiler yer alır.Ziyaretçiler tarafından doğrudan görüntülenmez.
Body : Ziyaretçiler tarafından görüntülenen kısımdır.

<title> başlık etiketidir </title>

<body> sayfada görüntülnecek öğeler ve işlevlerinin belirlendiği alandır. </body>

İlk sayfamız

Kusurlarımız varsa affola :)) Bir sonraki dersimizde görüşmek üzere...

HTML ÖĞRENİYORUM 1

Web sayfası hazırlamak çok zor değil...
Kolları sıvıyor ve HTML işaretleme dili kullanmaya başlıyoruzzz...

İlk önce not defterini açmamız gerekiyor.

Bilgisayarı yeni kullanmaya başlayanlar için not defterine ulaşmak için 2 yöntem var.Bunlar
1. Başlat -- Programlar -- Donatılar -- Not Defteri
2. Başlat -- Çalıştır 'a notepad yazılmasıdır.

Açılan not defterlerini kaydederken mutlaka .html veya .htm uzantısı ile kaydetmeliyiz.

Bu sayede kaydettiğimiz belge explorer da görüntülenebilir.

DOSYA İSİMLENDİRME KURALLARI

1. Türkçe karakter kullanılmamalıdır. (ş , ç , ö , ı , ğ , ü , İ)

2. Kaydedilen dosyalar .html yada .htm uzantısında olmalıdır.

3. İsim verilirken boşluk kullanılmamalıdır.

Etiket (tag) : Tüm html dosyaları etiketlerden oluşur. Etiketler kullanılan öğelere (yazı, ses , video...) biçim ve işlev kazandırılar.

Hangi Programlar Kullanılır?

WEB TASARIMDA KULLANILAN PROGRAMLAR

HTML

Web tasarımın temeli olan html kelime işaretleme dilidir.

FRONTPAGE

Basit ve kullanışlı Görsel html editörüdür.Html etiketlerini program otomatik oluşturur.

DREAMWEAVER

Görsel olarak web siteleri hazırlayabilmemiz ve geliştirebilmemize olanak sağlayan profesyonel bir programdır.Alanında en çok tercih edilen programdır diyebiliriz.

FLASH

Çizim yaparak ya da resim dosyaları kullanarak animasyonlar hazırlayabileceğimiz arayüz programıdır.
Flash programında hazırlanan görseller göze çok hoş gelse de sitenin açılmasını yavaşlatmaktadır.

PHOTOSHOP

Sektörde en yaygın kullanımı olan resim düzenleme programıdır.Web tasarım alanında da resim düzenleme yanı sıra site araçlarını oluşturma ve düzenleme işleminde de kullanılır.

SWİSH

Yazı ve hareketli animasyonlar hazırlama amacıyla kullanılır. Flash kadar profesyonel olmasa da basit ve birçok animasyonu hazır olarak bünyesinde bulundurması nedeniyle tercih edilir.

Web tasarım yapılırken en çok tercih edilen programlar belirttiklerimizdir. Tabi ki bunların dışında tercih edilen birçok program bulunmaktadır.En çok tercih edilenlerden bahsettik. Program öğrenmeye başlamadan önce fikrimiz olmalı….

Bu programları lisanslı olarak satın alabileceğiniz gibi internetten de olarak indirebilirsiniz..

HTML NEDİR? başlıklı yazımızda görüşmek üzere...

2 Kasım 2011 Çarşamba

Web Tasarım Nedir?

HTML NEDİR?

(HyperText Markup Language) Web sitelerinin hazırlanmasında kullanılan kelime işaretleme dilidir.

WEB SAYFASI NEDİR?

Tarayıcı(browser) ile internette görüntülenen, HTML ile oluşturulmuş içerisinde metin,ses,video gibi öğelerin bulunduğu tanıtım yada bilgi paylaşma amacıyla oluşturulmuş dosyalar topluluğudur.

WEB TASARIM NEDİR?

Web sitelerinin arayüzlerinin oluşturulmasıdır.

NEDEN WEB SİTEMİZ OLMALIDIR?

21. yy ın en büyük yeniliklerinden birisi internettir.

Günümüzde kurumlar ya da şahıslar hızlı ve maliyeti düşük olan tanıtım yöntemi web sitelerini tercih etmektedir.

Kurumların ve bireylerin istedikleri anda kesintisiz,en hızlı,en kolay bilgiye ulaşım yöntemi internettir.Reklamı yapılan öğelerin teknik özelliklerinin yanısıra resim ve videoları ile de kullanıcılara net bilgiler verilir.

Kurumlar farklı bölgelerde de tanıtımlarını yapabilmektedir.

WEB SİTESİ OLUŞTURULURKEN DİKKAT EDİLMESİ GEREKENLER NELERDİR?

1. Kurumun amacına ve tarzına uygun olmalıdır.

2. Menü ve istenilen öğeye erişim kolay,hızlı ve anlaşılır olmalıdır.

3. Gereksiz öğeler siteye eklenmemelidir.

4. Arama motorları tarafından görüntülebilir olmalıdır.

5. Web sitelerinde kullanılan renkler,yazı ayarları uyum içerisinde olmalıdır.

WEB TASARIM NASIL YAPILIR?

Web tasarım programlarının bilinmesi gereklidir.

Web tasarım programlarını öğrenmeyi sonraya bırakmak isterseniz blog sayfalarını başlangıç için önerebiliriz.Fakat web sitelerinde farklılaşma ve ileri işlemler blog sayfalarıyla mümkün değildir.

Web tasarıma başlamadan önce sitenin konusu belirlenmeli, site yapımında kullanılacak resimler,yazılar,videolar belirlenmelidir.

Kullanılacak programlar seçilmelidir.

HANGİ PROGRAMLAR KULLANILABİLİR?

Html,Frontpage,Dreamweaver,Photoshop,Flash,Swish gibi programlar tercih edilebilir.

Yarın web sitesi tasarımında kullanılacak programların tanıtımları,içerikleri ve temin edilmeleri ile ilgili yazımızda görüşmek üzere...

MERHABALAR...

     Bugün nette dolaşırken blog açma fikri aklıma geldi.
     Ne derece başarılı olabilirim bilmiyorum...Ama Web Tasarım dersleriyle bu akşamdan itibaren blogumda yazmaya başlayacağım...

Yeni Başlayanlar İçin Web Tasarım

25 Kasım 2011 Cuma

HTML DE TABLOLAR

24 Kasım 2011 Perşembe

HTML DE LİNKLER

10 Kasım 2011 Perşembe

HTML DE RESİMLER

4 Kasım 2011 Cuma

HTML ÖĞRENİYORUM 6

HTML ÖĞRENİYORUM 5

HTML ÖĞRENİYORUM 4

HTML ÖĞRENİYORUM 3

3 Kasım 2011 Perşembe

HTML ÖĞRENİYORUM 2

HTML ÖĞRENİYORUM 1

Hangi Programlar Kullanılır?

DREAMWEAVER

PHOTOSHOP

SWİSH

2 Kasım 2011 Çarşamba

Web Tasarım Nedir?

MERHABALAR...

Blog Arşivi

İzleyiciler

Blog Listem