WEB TASARIMI VE PROGRAMLAMA: 2017

29 Nisan 2017 Cumartesi

CSS Birimleri

Uzunluk Birimleri

Göreceli ve kesin olmak üzere ikiye ayrılır.

1-Göreceli(Bağıl) Uzunluk Birimleri: "em", "px", "ex" ve "%" birimleridir.

em: "M" harfinin genişliğini baz almasıdır. 16px, 1em'e eşittir.
ex: Küçük x harfinin yüksekliğindedir.
px: Monitörümüz piksellerden meydana gelir. Ekran çözünürlüğüne göre değişir.

2-Kesin Uzunluk Birimleri: "in", "cm", "mm", "pt" ve "pc" birimleridir.

in: İnç'i ifade etmektedir. 1inç=2,54 cm'dir.
cm: Santimetreyi ifade etmektedir.
mm: Milimetreyi ifade etmektedir.
pt: Point(punto) standart baskı birimidir. 1pt=1/72 inç
pc: Pika baskı ölçü birimidir. 1pc=12pt

Renk Birimleri

Renk İsimleri: Tüm tarayıcıda geçerli 16 adet renk isimleri belirlenmiştir.

Rengimiz Kırmızı Olsun

color:red; /*Renk adı ile belirlenmesi*/

color:#f00; /*Kısa RGB kodu ile*/

color:#ff0000; /*Uzun RGB kodu ile*/

color:rgb(255,0,0); /*Tam sayı değeri ile*/

color:rgb(100%, 0%, 0%); /*Yüzde değer ile*/

Stil Şablonları

Stil Şablonlarının Komut Yapısı

<html>

<head>

</head>

<body>

</body>

</html>

Stil Şablonların Çeşitleri

Yerel CSS: Html belgesinin <body> bölümüne yazılır. Sadece yazıldığı yerde etkilidir.

Genel CSS:Html belgesinin <head> bölümüne yazılır. Html dosyasının tamamında etkili olur.

Harici CSS:Uzantısı .css <head>.....</head> etiketleri arasına yazılır.

Seçiciler

id Seçicileri(ID Selectors): # işaretiyle tanırız.

sınıf Seçicileri (Class Selectors)

Çerçeveler

<frameset>
Çerçeve oluşturmak için kullanılan etikettir.

Cols:<frameset> etiketi ile kullanılan parametrelerden biridir. Sütunlara böler.

Rows:<frameset> etiketi ile kullanılan bir diğer parametre ise rows parametresidir.Satırlara böler.

<frame> etiketi sayfaların belirlenmesi için kullanılır.

İç İçe Çerçeve Oluşturma:Yatay ve dikey çerçeveler birlikte kullanılır.

15 Mart 2017 Çarşamba

Formlar

<Form>

Target: Yeni pencere açar.

<input>
Tek başına kullanılmaz.
<input type="text"> Girilecek olan elemanın türünü belirtmek için kullanılır.
Type: text, password, checkbox, radio, submit, reset gibi değerler alır.
Align: Hizalamak için kullanılır. left, right, center değerlerini alır.
Checked: Radio ve checkbox da kullanılır.
Disabled: Veri girişini engellemek için kullanılır.

FORM NESNELERİ

Checkbox: Forma onay kutusu eklemek için kullanılır.

Radio: Tek seçimlerde kullanılır.

Text: Forma tek satır yazabilmek için kullanılır.
hgtffgjhh

Password: Forma şifreli alanlar eklemek için kullanılır.

Textarea: Forma birden fazla satır eklemek için kullanılır.

Açılır menüler: Forma <select> etiketi kullanarak yapılır.
Listbox:Liste kutusu
Drop-down: Aşağı açılır menü
Liste de yer alacak elemanları <option> etiketi ile belirlenir.

Reset: Formun içeriğini temizler.
<input type="reset">

Submit: Formun içeriğini sunucuya gönderir.
<input type="submit">

14 Mart 2017 Salı

Çoklu Ortam Araçları

Resim ekleme

Src: Resmin bulunduğu dizini bu parametre ile bildiririz.
Width: Eklencek resmin genişliği.
Height: Eklencek resmin yüksekliği
Alt: Alternatif kelimesinden gelir. Mouse resmin üzerindeyken yazacağınız metni gösterir. <img
Align: Eklenen resmin hizasını belirler. Left, right ve center değerleri alır.
Border: Resmin etrafındaki çizginin kalınlığını belirler. <img src="resim.gif" border="6">

Ses araçları ekleme

Ses dosyaları 3 şekilde eklenir.

1. Sesi arka plan olarak ekleme. <bgsound src="müzik.wav" loop="infinite">

Loop: Tekrar sayısı

İnfinite: Sürekli çalması için kullanılır.

2.Ses dosyasına link vererek. <a href="müzik.mid">Dinlemek için tıklayınız.</a>

3.Ses dosyasını sayfaya ekleyerek. <embed src="müzik.mp3" autostart="false">

Sayfa açıldığında müzik açılması için true açılmaması için false.

Video ekleme

11 Mart 2017 Cumartesi

Tablolar

Table: Web sayfalarına tablo eklemek için kullanılır. Tablolar satır ve sütundan oluşur.

TR: Satır oluşturmak için kullanılır.

TD: Sütun oluşturmak için kullanılır.

Border: Çerçeve'nin kalınlığı.

Bordercolor: Çerçeve'nin rengi.

Bgcolor: Arka plan rengi.

Background: Arka plana resim ekleme.

Width: Tablo'nun yada hücre'nin pixel cinsinden genisliği.

Height:Tablo'nun pixel cinsinden yüksekliği.

Colspan: Aynı satırdaki hücreleri birleştirir.

Rowspan: Aynı sütundaki hücreleri birleştirir.

Cellspacing: Tablonun içerisindeki hücrelerin, birbirinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.

Cellpadding: Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.

Bağlantı (Köprü) Oluşturma

Bağlantı oluştururlen "<a>" etiketi kullanılır.

"a" etiketi "href" parametresi ile kullanılır.

Bağlantı=Köprü=Link

4 Tane bağlantı türü vardır;

1- Sayfalar arası bağlantı

2- Dış sayfaya bağlantı

3- Sayfa içi bağlantı

4- E-postaya bağlantı

1-Sayfalar Arası Bağlantı: <a href="resim.jpg">RESİM</a>

<a href="iletişim.html">İLETİŞİM</a>

2-Dış Sayfaya Bağlantı: <a href="http://www.google.com">GOOGLE</a>

3-Sayfa İçi Bağlantı: <a href="#bas">BAS</a>

<a name="bas">BAS BURASI </a>

4- E-Postaya Bağlantı: <a href="mailto:adresiniz@uzantısı.com">E-POSTA</a>

Target: Açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtiriz.

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.

Metin Düzenleme Etiketleri

<HX> Başlık için kullanılır. X 1'den 6'ya kadar değer alabilir.</HX>

<h1>En büyük yazı</h1>
<h6>En küçük yazı </h6>

<hx> parametresi: Align

Align parametresi hizalama için kullanılır. left, right, center, justify değerleri alır.

<h3 align="center"> MEGEP</h3> Yazıyı ortalar ve h3 boyutun da yazar.

<B>Yazıyı kalın yazar</B> (BOLD)

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

<U> Yazının altını çizer</U>(UNDERLİNE)

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

<I> Yazıyı eğik yazar</I>(İTALİK)

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

<BR>Bir alt satıra geçmek için kullanılır.

<P>Yeni paragraf</P>

<FONT>

Etiketinin kullanıldığı metinlerin renk, boyut, yazı tipi özelliklerini değiştirmek için kullanılır.

Yazının büyüklüğünü ayarlamak için kullanırız. 1-7 arası değerler alır.

<FONT SIZE ="1"> Merhaba</FONT>

<FONT SIZE ="4"> Merhaba</FONT>

<FONT SIZE ="7"> Merhaba</FONT>

Color: Yazının rengini ayarlamak için kullanırız.

<FONT SIZE ="5" COLOR=" aqua ">Merhaba</font>

<FONT SIZE ="5" COLOR=" #FF0000 ">Merhaba</font>

Face: Yazının tipini ayarlamak için kullanırız.

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