h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama



Benzer belgeler
ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

Web Tasarımının Temelleri

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017

7. Çerçeveler. Bu bölümü bitirdiğinizde,

Web Tasarımının Temelleri

Web Tasarımının Temelleri

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BİLİŞİM TEKNOLOJİLERİ

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Teknolojileri ve Programla

İNTERNET PROGRAMCILIĞI I

HTML & CSS. Öğr.Gör. M.Ersin AKAY

Web Programlama Kursu

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

WEB TASARIMI VE PROGRAMLAMA DERSİ

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Karabük Üniversitesi, Mühendislik Fakültesi...

WEB TASARIMININ TEMELLERİ

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

Site Temizlik Projesi Kodları

HTML Etiketleri Genel Özellikler (Global Attributes)

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Site Tasarım Çalışması -3

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>


Doç. Dr. İsmail Rakıp Karaş Hazırlayan: İdris Kahraman

BİLİŞİM TEKNOLOJİLERİ

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

HTML Sayfaları. Bütün html sayfaları

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

WEB TASARIMI VE PROGRAMLAMA

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA

2. HTML Temel Etiketleri

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

4 Front Page Sayfası Özellikleri

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

HTML (Hyper Text Markum Language)

HTML Bloklar. CSS Display özelliği

3. Metin ve Görünüm Etiketleri

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

1.1 Web Kavramlar URL terimini tanımlayınız ve anlayınız.

İNTERNET PROGRAMCILIĞI

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

Metin İşlemleri, Semboller

HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

Metin Tabanlı İçerik Oluşturma Araçları

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

2. Belgeye Metin Ekleme

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği

İNTERNET PROGRAMCILIĞI I

2-Hafta Temel İşlemler

İNTERNET PROGRAMCILIĞI I

BĠLĠġĠM TEKNOLOJĠLERĠ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi

ÖĞRENME-ÖĞRETME YÖNTEM VE TEKNİKLERİ. Anlatım, göstererek yaptırma, uygulamalı çalışma. Anlatım, göstererek yaptırma, uygulamalı çalışma.

Silmek istediğiniz satır/sütun/hücre yi seçin ve aşağıdaki adımlardan birini takip edin:

İNTERNET PROGRAMCILIĞI HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

8.Sayfa ve 9.Yazım 10.Belge Görünüm 11.Ekran Yakınlaştırma Sözcük Sayısı Denetimi Düğmeleri ve Uzaklaştırma

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd

EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

KONULAR VE UYGULAMA LİSTESİ

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir?

Html temelleri. Ders 4

WEB TASARIMIN TEMELLERİ

İnternet Programcılığı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

Daha önce kayıt olduğunuz e-posta adresinizi girin. Parolanızı bu alana giriniz ve giriş tuşuna basınız

WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)

Temel HTML Eğitimi. Erman Yükseltürk

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

Web Teknolojileri ve Programla

Web Tasarımının Temelleri

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır.

DIV KAVRAMI <style> position: absolute

İnternet Tarayıcı programlar ile internet sitelerini açabiliriz. Açık olan sitelerin sekmeleri

Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method

Aaraçlar Menüsünden Seçeneklerden Görünüm

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

BÖLÜM 8 B- SUNU PROGRAMI 1. MICROSOFT POWERPOINT NEDİR? 2. POWERPOINT PROGRAMININ BAŞLATILMASI

Arayüz Geliştirme Dokümantasyonu

CSS(CASCADING STYLE SHEETS)

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri

Transkript:

HTML Web Tasarımı ve Programlama

İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma Çoklu Ortam Araçları Çerçeveler Stil Şablonları (CSS) Formlar 2

INTERNET ORTAMI VE WEB TASARIMI Alan Adı (Domain) IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen halidir. www.alanismi.alanturu.ulkekodu gov : Hükümet kurumları / government edu : Eğitim kurumları / education org : Ticari olmayan kuruluşlar / organization com : Ticari kuruluşlar / company mil : Askeri kurumlar / military net : Servis sunucular / network ac : Akademik kuruluşlar / academic int : Uluslararası kuruluşlar / international 3

INTERNET ORTAMI VE WEB TASARIMI Web Alanı / Barındırma (Hosting) Hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür. Bu hizmet, hosting firmaları tarafından belirli süreliğine sağlanır. Server (sunucu) bilgisayarlar, hosting amacıyla kullanılan gelişmiş donanımsal özelliklere sahip olan ve birçok kullanıcıya aynı anda hizmet veren bilgisayarlardır. 4

HTML TEMEL ETİKETLERİ HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. HTML komutları; herhangi bir metin düzenleme editöründe yazılabileceği gibi, çeşitli web tasarım editörleriyle de oluşturulabilir. HTML komutları etiketlerden (tag) oluşur. 5

HTML TEMEL ETİKETLERİ HTML komutları < ve > işaretleri arasına yazılır. <etiketadi> </etiketadi>, <tag>..</tag> HTML etiketleri yazılırken Türkçe karakterler kullanılmamalıdır. (ş, ç, ö, ü, ı, ğ) BÜYÜK-küçük harf duyarlı değildir. <body>.</body> veya <Html>.</> Açılan bir etiket mutlaka kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında / işareti unutulmamalıdır!!! 6

HTML TEMEL ETİKETLERİ HTML dosyaları sunucu bilgisayarın sabit diskinde. ya da.htm uzantısı ile saklanır. Her web sayfası; <> <head> <body> etiketi içermelidir. Bu dizilim kuralına uymadığınız takdirde bile sayfanız görüntülenebilir ancak biçimlendirme sorunları yaşayacağınızı ve ziyaretçilerinizin sayfa içerisinde gezinirken sorun yaşayabileceğini unutmayın!!! 7

HTML TEMEL ETİKETLERİ <> HTML kodlarının yazımına başladığımızı gösteren etikettir. Tüm HTML kodları <> </> arasında yer alır. </> ile HTML kodlarının yazımının bittiği anlaşılır. Bu etiketin hiçbir parametresi yoktur. 8

HTML TEMEL ETİKETLERİ <head> Sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan meta etiketleri bölümüdür. Kullanılacak Parametreler name http-equiv Size Author, description ve keywords özellikleri tanımlanır. Refresh, expires, content ve content-style-type özellikleri Yazının boyu belirlenir. 9

HTML TEMEL ETİKETLERİ <head> NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. <meta name="author" content=«aosbilisim"> <meta name="description«content="sayfanın tanımını yazınız"> <meta name ="description" content ="Bu sayfa, Web Tasarımı ve Programlama dersi modülleri için hazırlanmıştır. "> <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız."> 10

HTML TEMEL ETİKETLERİ <head> HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir. <meta http-equiv=content-type content="text/htm; charset=windows-1254"> <meta http-equiv=content-type content="text/htm; charset=iso-8859-9"> <meta http-equiv=content-type content="text/htm; charset=utf-8"> 11

HTML TEMEL ETİKETLERİ <head> <meta name="robots" content="all veya none"> Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin all, Engelleme none kullanılır. Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. 12

HTML TEMEL ETİKETLERİ <head> <title>: Sayfanın tarayıcıda görünecek başlığının ne olacağını belirlemek için kullanılır. 13

HTML TEMEL ETİKETLERİ <body> HTML belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. bgcolor background link alink vlink Sayfanın arkaplân rengini belirlemek için kullanılır. Arkaplanda kullanılmak istenilen resmi belirlemek için kullanılır. Sayfada kullanılacak linklerin rengini belirlemek için kullanılır. Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi belirlemek için kullanılır. Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek için kullanılır. 14

LİSTELEME ETİKETLERİ <ol> Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. 1. Elma 2. Armut 3. Kavun 15

LİSTELEME ETİKETLERİ <ol> type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz. a a. b. c. A. Elma B. Armut C. Kavun i i. I. Elma ii. II. Armut iii. III. Kavun 16

LİSTELEME ETİKETLERİ <ol> Sıralamanın her zaman 1 den veya A dan başlamasının istenmediği durumlarda start parametresi kullanılır. C. Elma D. Armut E. Kavun 17

LİSTELEME ETİKETLERİ <ul> Madde imli liste oluşturmak için kullanılır. <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır. Elma Armut Kavun 18

LİSTELEME ETİKETLERİ <ul> type parametresi kullanarak madde iminin şeklini belirleyebiliriz. o Elma Armut Kavun 19

LİSTELEME ETİKETLERİ <li> Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi şekilde olacağını <ol> ve <ul> etiketleri belirler. 20

METİN DÜZENLEME ETİKETLERİ <hx> Başlık eklemek için kullanılan etiketlerdir. x ifadesi, 1 den 6 ya kadar değer almaktadır. x değeri azaldıkça yazı büyür. 21

METİN DÜZENLEME ETİKETLERİ <hx> align Metin / Nesne hizalama için kullanılan parametredir. left sola right sağa center ortaya justify iki yana yasla 22

METİN DÜZENLEME ETİKETLERİ <b> İstenilen metni kalın (bold) olarak yazmak için kullanılır. <b> </b> etiketleri arasında yazılı olan metni kalın yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 23

METİN DÜZENLEME ETİKETLERİ <u> İstenilen metni altı çizili (underline) olarak yazmak için kullanılır. <u> </u> etiketleri arasında yazılı olan metnin altını çizili yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 24

METİN DÜZENLEME ETİKETLERİ <i>, <I> İstenilen metni eğik (italik) olarak yazmak için kullanılır. <i> </i> etiketleri arasında yazılı olan metni eğik yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore 25

METİN DÜZENLEME ETİKETLERİ <br> 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. 26

METİN DÜZENLEME ETİKETLERİ <p> Paragraf oluşturmak için kullanılır. <p> </p> etiketleri arasında yazılı olan metni ayrı bir paragraf içinde gösterir. 27

METİN DÜZENLEME ETİKETLERİ <font> 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ı büyüklüğü color yazı rengi face yazı tipi <font face="algerian" size="7" color="purple">merhaba</font> 28

GÖRÜNÜM DÜZENLEME ETİKETLERİ <hr> Sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket kapatılmaz!!! size, width ve align parametreleri ile kullanılabilir. size çizgi kalınlığı width çizgi uzunluğu align çizgi konumu (hizalama) <hr size= 6 width= 200 align= center > 29

BAĞLANTI (KÖPRÜ) OLUŞTURMA <a href>..</a> Sayfa içi/dışı tüm bağlantılar <a href> </a> etiketleri kullanılarak tanımlanır. <a href= baglanti_adresi >metin_nesne</a> Sayfa Dışı Bağlantı <a href= http://www.aosbilisim.net >AOSBilişim</a> AOSBilişim <a href= index. >Ana Sayfa</a> Ana Sayfa 30

BAĞLANTI (KÖPRÜ) OLUŞTURMA Sayfa İçi Bağlantı Öncelikli olarak sayfa içi bağlantı verilecek kısım adlandırılmalıdır (çapa işlemi). Adlandırma, <a name="...">...</a> etiketi kullanılarak yapılır. <a name="ornek">hyper Text Markup Language</a> Ardından bağlantı verilecek alana gelinip <a href =#...">...</a> etiketi köprü tanımlanır. <a href="#ornek">html Nedir?</a> Html Nedir? Hyper Text Markup Language 31

BAĞLANTI (KÖPRÜ) OLUŞTURMA E-Posta Adresine Bağlantı <a href= mailto:e-posta adresi >.</a> komutu kullanılarak <a href="mailto: iletisim@aosbilisim.net">e-posta göndermek için tıklayın.</a> e-posta göndermek için tıklayın. 32

TABLOLARLA ÇALIŞMA <table> Sayfaya tablo eklemek için kullanılır. </table> etiketiyle sonlandırılır. Satır ve sütun tanımlamaları için; <table> içinde <tr> ve <td> etiketleri de kullanılmalıdır. 33

TABLOLARLA ÇALIŞMA <tr> Tabloda satır oluşturmak için kullanılır. 34

TABLOLARLA ÇALIŞMA <td> Tabloda sütun oluşturmak için kullanılır. 35

TABLOLARLA ÇALIŞMA <table> border Hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. 0 36

TABLOLARLA ÇALIŞMA <table> bordercolor Çerçevenin renginin ayarlamak için kullanılır. 37

TABLOLARLA ÇALIŞMA <table> bgcolor Hücre/hücrelerin arkaplan renginin ayarlamak için kullanılır. 38

TABLOLARLA ÇALIŞMA <table> background Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır. 39

TABLOLARLA ÇALIŞMA <table> width Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. height Tablonun veya hücrenin pixel cinsinden yüksekliğini belirlemek için kullanılır. 40

TABLOLARLA ÇALIŞMA <table> colspan Aynı satırdaki hücreleri birleştirmek için kullanılır. 41

TABLOLARLA ÇALIŞMA <table> rowspan Aynı sütundaki hücreleri birleştirmek için kullanılır. 42

TABLOLARLA ÇALIŞMA <table> cellspacing Hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır. 10 43

TABLOLARLA ÇALIŞMA <table> cellpadding Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığını belirlemek için kullanılır. 0!!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa (boşluk) kullanılmalıdır. Aksi takdirde çizgiler gözükmez!!! 44

ÇOKLU ORTAM ARAÇLARI Resim Ekleme Resim eklemek için kullanılan etiketi <img src> dir. src, ekleyeceğimiz resmin bulunduğu dizini gösterir. Bu etiket kapatılmaz!!! <img src= resim1.jpg >Gökyüzü Sayfa içine eklenecek resmin kaynak adresi 45

ÇOKLU ORTAM ARAÇLARI Resim Ekleme PARAMETRE GÖREVİ width height border alt align Eklenilecek resmin pixel cinsinden genişliğini gösterir. Eklenilecek resmin pixel cinsinden yüksekliğini gösterir. Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Border= 0 olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar. Fare ile resmin üzerine gelindiğinde ekranda görüntülenmesi istenen metni belirlemek için kullanılır. Resim hizalamasını belirtmek için kullanılır. 46

ÇOKLU ORTAM ARAÇLARI Resim Ekleme 47

ÇOKLU ORTAM ARAÇLARI Ses Ekleme 3 farklı yolla ses eklenebilir: Sesi arkaplan olarak ekleyebiliriz. Böylelikle sayfa tarayıcı tarafından yüklendiği anda ses dosyası arkaplanda çalışmaya başlayacaktır. <bgsound src= muzik.wav loop= infinite > Müziğin tekrar sayısı Sayfa içine eklenecek sesin kaynak adresi infinite sayfa kapanana kadar tekrar etmesini salar 48

ÇOKLU ORTAM ARAÇLARI Ses Ekleme Ses dosyasına link vererek de ses ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan ses dosyası yürütücü programı çalışacak ve istenen ses dosyasının çalması sağlanacaktır 49

ÇOKLU ORTAM ARAÇLARI Ses Ekleme Ses dosyasını sayfa içine gömerek de ses ekleyebiliriz. Ses dosyasının çalışma zamanını belirler. true Ses dosyası, sayfa yüklendiği anda çalışacaktır.!!! mp3, wav, aif, ra, mid yaygın olarak kullanılan ses dosyası türlerindendir.!!! 50

ÇOKLU ORTAM ARAÇLARI Video Ekleme Video dosyasına link vererek video ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan video oynatıcı çalışacak ve istenen video dosyasının görüntülenmesi sağlanacaktır. 51

ÇOKLU ORTAM ARAÇLARI Video Ekleme Video dosyasını sayfa içine gömerek de video ekleyebiliriz. Videonun çalışma zamanını belirler. true Video, sayfa yüklendiği anda çalışacaktır.!!! mpeg, avi, mov, wmv, asf yaygın olarak kullanılan video türlerindendir.!!! 52

ÇERÇEVELER Çerçeveler; bir tarayıcı penceresini birden fazla pencereye bölüp her bir pencere içerisinde farklı içerikler gösterilmesini; sağlar. Her çerçevenin kendine ait bir URL adresi vardır. Her çerçeveye bir isim verilebilir. Çerçeveler kullanıcı tarafından verilecek ölçülerle boyutlandırılabileceği gibi otomatik olarak da boyutlanabilme özelliğine sahiptir. 53

ÇERÇEVELER <frameset> Çerçeve oluşturmak için kullanılan etikettir. Tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutları belirlenir. Çerçevelerden oluşan bir sayfanın normal bir HTML belgesinden farkı; içeriğinde <body> etiketi yerine, <frameset> etiketini kullanmasıdır. 54

ÇERÇEVELER <frameset> cols Ekranı dikey olarak (sütunlar halinde) tanımlanan parçalara bölmek için kullanılır. Sütun genişlikleri pixel veya % lik olarak belirlenir. Sütun sayısı, çerçeve sayısını belirleyici niteliktedir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. 55

ÇERÇEVELER <frameset> rows Ekranı yatay olarak (satırlar halinde) tanımlanan parçalara bölmek için kullanılır. Satır yükseklikleri pixel veya % lik olarak belirlenir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. 56

ÇERÇEVELER <frame> <frameset> etiketi ile oluşturulan çerçevelerin içinde gösterilecek sayfaların belirlenmesi için kullanılır. PARAMETRE name resize / noresize scrolling marginheight marginwidth src Çerçevenin adını gösterir. GÖREVİ Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir. Çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) Sayfadaki ilk nesnenin üst kısımdan uzaklığını gösterir. Sayfadaki ilk nesnenin sol kısımdan uzaklığını gösterir. Çerçeve içinde gösterilecek nesnenin URL adresini gösterir. 57

ÇERÇEVELER İç İçe Çerçeve Oluşturma İç içe kullanılan <frameset> etiketleri ile aynı pencere içinde yatay ve dikey çerçevelerin birlikte kullanımı sağlanır. 58

ÇERÇEVELER <iframe> Hazırlamakta olduğunuz sayfanın herhangi bir yerinde başka bir sayfa görüntülemek istediğiniz zaman kullanılabilen, bir iç çerçeve oluşturmaya yarayan etikettir. PARAMETRE name frameborder scrolling height width src İç çerçevenin adını gösterir. GÖREVİ İç çerçeve kenarlığının olup olmayacağını gösterir. İç çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) İç çerçevenin yüksekliğini gösterir. İç çerçevenin genişliğini gösterir. İç çerçeve içinde gösterilecek nesnenin URL adresini gösterir. 59

ÇERÇEVELER <iframe> 60

STİL ŞABLONLARI (CSS) Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta olduğumuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar oluşturmaya yarar. CSS kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilmesidir. İsteğe göre tek bir öğeye, tüm sayfaya veya site içerisinde kullanılan tüm dosyalarına etki edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır. 61

STİL ŞABLONLARI (CSS) Yerel CSS 62

STİL ŞABLONLARI (CSS) Genel CSS 63

STİL ŞABLONLARI (CSS) Harici CSS stil.css 64

STİL ŞABLONLARI (CSS) Stil Şablonları ile Çalışma (CSS), bir sonraki modülde ayrıntılı olarak anlatılacaktır. 65

FORMLAR Etkileşimli Web sayfaları hazırlamanın yolu FORM kullanmaktan geçer. (e-bankacılık, e-ticaret, e-eğitim ) Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. HTML, yalnızca kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez!!! 66

FORMLAR <form> Form oluşturmayı sağlayan tüm form elemanları, <form>.</form> etiketleri arasında yer alır. <form ACTION= url METHOD= get / post TARGET= pencere > </form> Formdan girilecek olan bilgilerin değerlendirileceği dosyanın URL adresi Formdan girilecek olan bilgilerin değerlendirici dosyaya gönderim metodu Hedef adresin tarayıcıda gösterileceği pencere GET : Gönderilen veriler adres çubuğunda gösterilir. POST : Gönderilen veriler gizli kalır. <form ACTION= mailto:iletisim@aosbilisim.net METHOD= post TARGET= _blank > 67

FORMLAR <form> method GET POST Ayrıntılı bilgi için tıklayın http://www.yazilimdevi.com/makaleler-742-http-get-ve-post-yontemleri.aspx 68

FORMLAR <form> method GET POST Ayrıntılı bilgi için tıklayın http://www.yazilimdevi.com/makaleler-742-http-get-ve-post-yontemleri.aspx 69

FORMLAR <input> Form içinde bilgi almak için kullanılır. Girişi yapılacak veri türü type parametresi ile belirlenir. Varsayılan veri türü text(metin) tir. Bu etiket kapatılmaz!!! <INPUT ALIGN= hizalama MAXLENGTH=uzunluk NAME= isim SIZE=boyut SRC= adres TYPE= tip VALUE= değer > 70

FORMLAR <input> PARAMETRE GÖREVİ type src align name maxlength Size checked disabled Girilecek olan elemanın türünü belirtmek için kullanılır. Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen resim dosyasının adresini belirtmek için kullanılır. Elemanın sayfada konumlanacağı yeri belirlemek için kullanılır. (left / right / center) Girilecek olan verinin değişken ismini belirlemek için kullanılır. Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır. Varsayılan değeri 20 dir. Bir seçim kutusu kullanıldığı durumlarda bu kutuların işaretlenmiş olarak görüntülenmesini sağlamak için kullanılır. Sadece radio ve checkbox elemanları için kullanılır. Veri girişlerini engellemek için kullanılır. 71

FORMLAR <input> 72

FORM NESNELERİ (INPUT TÜRLERİ) Checkbox Forma onay kutuları eklemek için kullanılır. 73

FORM NESNELERİ (INPUT TÜRLERİ) Radio Kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir. 74

FORM NESNELERİ (INPUT TÜRLERİ) Radio 75

FORM NESNELERİ (INPUT TÜRLERİ) Text Forma, tek satırlık metin alanı eklemek için kullanılır. 76

FORM NESNELERİ (INPUT TÜRLERİ) Password Forma, şifreli alanlar eklemek için kullanılır. 77

FORM NESNELERİ (INPUT TÜRLERİ) Textarea Forma birden fazla satırdan oluşan alanlar eklemek için kullanılır. Rows (satır) ve cols (sütun) tanımlamaları ile, metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir. 78

FORM NESNELERİ (INPUT TÜRLERİ) Select (Açılır Menü) Forma açılır menü eklemek için kullanılır. Listbox(liste kutusu) drop-down list(aşağı açılır liste) şeklinde iki farklı türde seçim kutusu oluşturulabilir. Liste elemanları, <option> etiketi ile belirlenir. drop-down list listbox 79

FORM NESNELERİ (INPUT TÜRLERİ) Select (Açılır Menü) 80

FORM NESNELERİ (INPUT TÜRLERİ) Reset Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar. <input type= reset value= Temizle > 81

FORM NESNELERİ (INPUT TÜRLERİ) Submit Form içine girilen bilgilerin sunucuya gönderilmesini sağlamak için kullanılır. <input type= submit value= Gönder > 82

Şimdilik bu kadar web tasarımı ve programlamayla ilgili bir sonraki yayın C S S 83

İ L E T İ Ş İ M hakanbabac.net iletisim@hakanbabac.net 84