Yrd. Doç. Dr. Murat Olcay ÖZCAN

Slides:



Advertisements
Benzer bir sunumlar
HTML e GİRİŞ Temel HTML etiketleri.
Advertisements

DREAMWEAVER TABLO OLUŞTURMA VE TABLO ÖZELLİKLERİ
HTML’e Devam Uygulama.
Sık Kullanılan Kontroller
HTML’ ye Giriş Uzm. Murat YAZICI.
Power Point’a Resim Nesneleri Ekleme ve Kullanma
WORD ÖZET WORD’ü başlatmak için; Görev Çubuğu’ndan Başlat + Programlar + Word Yeni paragrafa başlarken ENTER tuşu kullanılır.
Tablolar Tablolar etiketi ile belirtilir. Bir tablo etiketi satırlara bölünür ve her satır da etiketi ile sütunlara bölünür. etiketinin anlamı "table.
Temel Bilgisayar Bilimleri Dersi
İSİM UZAYLARI.
Kelime İşlemci Programı
STİL SAYFALARI GELİŞTİRMEK
Stil Sayfaları HTML dosyaları oluştururken her satır ve paragraf için gerekli biçimleri ilgili yerlerde her seferinde belirtmemiz gerekir. Bazı durumlarda.
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
Tablosuz Tasarım Div ler.
Php Form İşlemleri.
Kutu Modeli Özellikleri
Temel HTML Eğitimi Erman Yükseltürk.
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6. Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler:  Color: Metnin rengini belirler.
CSS Birimleri.
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir.  Formlar, web sayfası tasarlayan kişi veya şirketlerle internet.
TABLOLAR.
Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır.
BAĞLANTI (KÖPRÜ) OLUŞTURMA
Temel Bilgisayar Bilimleri Dersi (Microsoft Powerpoint)
Temel Bilgisayar Bilimleri Dersi
SOSYAL BİLGİLER ÖĞRETMENLİĞİ BİLGİSAYAR 2 NOT 2
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
Bilgisayarda Ofis Programları
İNTERNET PROGRAMCILIĞI I
1 İNTERNET PROGRAMLAMA - 1 Bağlantılar Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.
STiL ŞABLONU (CSS) TEMELLERİ
POWER POİNT SUNU HAZIRLAMAK
HESAP TABLOSU PROGRAMLARI
BİÇİMLENDİRME İŞLEMLERİ
İLERİ HTML.
Temel Bilgi Teknolojileri
Temel Bilgi Teknolojileri
İNTERNET PROGRAMCILIĞI I
Tablo Özellikleri Tablo oluştururken kullandığımız , , ve etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.
HTML (Hyper Text Markup Language) İnternet dökümanları oluşturmaya yarayan işaretleme dilidir.
WEB TASARIMININ TEMELLERİ
Microsoft Office Access
WEB TASARIMININ TEMELLERİ
HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.
WEB SİTESİ YAPIYORUM HTML
Yrd. Doç. Dr. Doğan AYDOĞAN
Yrd. Doç. Dr. Doğan AYDOĞAN
Bilgisayar Entegre Ofis Programları-I Öğr.Gör. Türkan ÖZBAY.
CSS NEDİR.
Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+’da.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
Yrd. Doç. Dr. Murat Olcay Özcan
İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ.
Yrd. Doç. Dr. Murat Olcay Özcan
Temel Bilgisayar Bilimleri Dersi
KIRKLARELİ ÜNİVERSİTESİ
POWERPOINT 2010 KULLANIMI TEMEL SUNUM İŞLEMLERİ
ITEC115 - BİLGİSAYARA GİRİŞ ITEC190 - HUKUK İÇİN BİLGİSAYAR
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz.
Web Tasarımı 2.Hafta. HTML Nedir  Hyper Text Markup Language (Hiper Metin İşaretleme Dili) web sayfalarını oluşturmak için kullanılan standart metin.
KURTKÖY TİCARET MESLEK LİSESİ EĞİTİM ÖĞRETİM YILI
BİLİŞİM TEKNOLOJİLERİ
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
İNTERNET PROGRAMCILIĞI 1
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
KELİME İŞLEMCİLER (Bölüm 2)
Sunum transkripti:

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

HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri ile tanımlanır. Her HTML etiketi farklı bir dosya içeriğini tanımlar.

HTML Etiketleri Yapı şu şekildedir. <etiket_ismi>içerik</etiket_ismi> Genel olarak çift olarak kullanılırlar. Bir açılış etiketi ve bir kapanış etiketi bulunur. <p>Paragraf</p> gibi Kapanış etiketi / ile kapatılır.

HTML Sayfa Yapısı

Bir HTML Örneği doctype tanımlaması sayfanın bir html belgesi olduğunu gösterir. <html> ve </html> arasındaki metin html belgesini tanımlar. <head> ve </head> arasındaki metin belge hakkında bilgi verir. <meta> etiketi ile karakter seti tanımlanır. <title> ve </title> arasındaki metin belgenin başlığını tanımlar. <body> ve </body> arasındaki metin görülebilir sayfa içeriğini tanımlar. <h1> ve </h1> arasındaki metin bir başlığı ifade eder. <p> ve </p> arasındaki metin bir paragrafı ifade eder.

Farklı Sürümlerde Tanımlamalar

HTML Versiyonları

Brackets Açık kaynak kodlu, ücretsiz ve modern bir editör. http://brackets.io *Renklendirme ve canlı önizlemenin çalışması için öncelikle sayfanın html uzantılı olarak kaydedilmesi gerekir.

HTML Başlıkları HTML başlıkları <h1> den <h6> ya kadar olan etiketler ile tanımlanır. Başlıklar her zaman koyudur ve kendi başına bir paragraftır. <h1>Bu bir başlıktır</h1> <h2>Bu bir başlıktır</h2> … <h6>Bu bir başlıktır</h6>

HTML Başlıkları

Paragraf Etiketi <p> Paragraf açmak için <p> etiketi kullanılır. Oluşturulan her paragraf arasında bir miktar uzaklık bulunur. <p>Bu bir paragraftır</p> <p>Bu da başka bir paragraf</p>

Yeni Satır <br> ve Yatay Çizgi <hr> Etiketleri Yeni bir paragraf açmak yerine, aynı paragraf içinde aralıksız yeni bir satır açmak için <br> etiketi kullanılır. Sayfa üzerinde yatay düz bir çizgi çizmek için <hr> etiketi kullanılır. <p>Bu bir paragraftır<br/>hemen altında olsun bu da</p> <p>Bu da başka bir paragraf</p> <hr/> Bu iki etiket kapatma etiketleri olmayan iki etikettir. HTML 5 için <br> ya da <hr> şeklinde kullanılabilirler. Ancak XHTML uyumluluğu açısından <br/> ve <hr/> olarak kullanılması tavsiye edilmektedir.

HTML Metin Biçimlendirme Metni önemli yapmak (koyu) için <strong> etiketi Metni vurgulamak (italik) için <em> etiketi Metni farklılaştırmak (altıçizili) için <u> etiketi Hatalı ve silinmiş metin (üstü çizili) için <del> etiketi

HTML Metin Biçimlendirme II Metni arkası renkli vurgulamak için <mark> etiketi Metni alt simge yapmak için <sub> etiketi Metni üst simge yapmak için <sup> etiketi

HTML Listeleri (Sıralı Listeler) Sıralı bir liste için <ol> etiketi kullanılır. Listedeki her eleman için ise <li> etiketi kullanılmalıdır. <ol> <li>Kahve</li> <li>Çay</li> <li>Süt</li> </ol>

HTML Listeleri (Sıralı Listeler) II Sıralama işaretini değiştirmek için <ol> etiketinin type özelliği, başlangıç değerini belirlemek için start özelliği kullanılabilir. type özelliğinin alabileceği değerler şunlardır: 1 A a I i

HTML Listeleri (Sırasız Listeler) Sırasız bir liste için <ul> etiketi kullanılır. Listedeki her eleman için ise <li> etiketi kullanılmalıdır. <ul> <li>Kahve</li> <li>Çay</li> <li>Süt</li> </ul>

HTML Listeleri (Sırasız Listeler) II Sıralama işaretini değiştirmek için <ul> etiketinin style özelliği kullanılabilir. Alabileceği değerler şunlardır: list-style-type:disc list-style-type:circle list-style-type:square list-style-type:none

HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. <!– Buraya yorumunu yaz --> Hatırlatıcı notlar eklemek için de kullanılabilir.

HTML Etiketleri Genel Özellikler (Global Attributes) Tüm html etiketleri için kullanılabilecek genel özelliklerden bazıları şunlardır. title : bir etiket ile ilgili ekstra bilgi vermek için kullanılır. <p title="Üniversite tarihçesi bu paragrafta">Üniversitemiz 2007 yılında…. </p> lang : bir etiketin içeriğinin hangi dilde olduğunu tanımlar <html lang="tr">…….</html> style: satır içi CSS tanımlaması yapılır. Class: stil sayfasındaki bir sınıf tanımlanır.

HTML Stilleri Her HTML elementi için varsayılan stil beyaz arkaplan ve siyah yazı rengidir. style özelliği kullanılarak bu varsayılan stil değiştirilebilir. Kullanımı: <etiket style="özellik:değer"> Özellik bir CSS özelliği, değer de bir CSS değeri olmalıdır.

Yazı Rengini Değiştirmek color isimli CSS özelliği ile metnin rengi değiştirilebilir.

HTML’de Renkler HTML’de renkler 3 farklı yöntemle tanımlanabilir. Renk isimleri: 140 tane tanımlı renk ismi vardır. yellow, green, pink, aqua, cyan, darkgray, lightblue vs… Onaltılık(hexadecimal) renk kodu: #RRGGBB şeklinde bir rengin RR(kırmızı), GG(yeşil) ve BB(mavi) değerlerinin 16lık sayı sistemine göre girilmesi ile oluşturulur. #FFFF00, #008000, #FFC0CB, #00FFFF vs… RGB renk kodu: rgb(red, green, blue) şeklinde bir rengin kırmızı, yeşil ve mavi değerinin 0-255 arasında tanımlandığı yöntemdir. rgb(255, 255, 0), rgb(0, 128, 0), rgb(255, 192, 203) 140 renk ve hex kodları: http://www.w3schools.com/html/html_colornames.asp

Brackets’da Renk Kullanımı Brackets’da bir renk tanımlamasının üzerine gelerek, fare sağ tuşuna basıldığında gelen menüde Hızlı Düzenle seçildiğinde; Gelen araç yardımıyla istenilen renk seçilebilir/değiştirebilir yada renk kodları görülebilir.

Yazıtipini (Font) Değiştirmek font-family isimli CSS özelliği ile metnin yazıtipi değiştirilebilir.

Yazı Boyutunu Değiştirmek font-size isimli CSS özelliği ile metnin boyutu değiştirilebilir. 3 farklı tipte değer belirlenebilir. px: piksel büyüklüğü ile tanımlama yapılabilir. Mutlak tanımlamadır. HTML sayalarında varsayılan değer 16px’dir. em: sayfada kullanılan yazı büyüklüğü 1em olarak kabul edilir ve bu büyüklüğe göre tanımlama yapılabilir. 0.8em yada 2.7em gibi. Yüzdesel tanımlama (%): Bir üst düzeydeki büyüklüğe göre yüzdesel olarak tanımlama yapılabilir. %150 yada %300 gibi.

Yazı Stil ve Kalınlık Değiştirme font-style isimli CSS özelliği ile yazı stili değiştirilebilir. Şu değerleri alabilir. normal italic oblique font-weight isimli CSS özelliği ile metin kalın yapılabilir. Şu değerleri alabilir. bold bolder Lighter 100, 200, …., 900 e kadar değerler initial

Metin hizalama text-align isimli CSS özelliği ile metnin boyutu değiştirilebilir. 4 farklı tipte değer belirlenebilir. center left right justify initial

HTML’de Resim Eklemek Bir sayfaya resim eklemek için <img> etiketi kullanılır. Bu etiketin kapanış etiketi yoktur. Eklenecek resim kaynağı etiketin src özelliği kullanılarak tanımlanır. Eklenecek resmin yeri eklendiği sayfanın yerine göre tanımlanır. Eğer aynı dizinde bulunuyorsa resmin sadece ismini yazmak yeterlidir. <img src="urun.jpg"> Bir alt dizininde ise; <img src="resimler/urun.jpg"> Bir üst dizininde ise; <img src="../urun.jpg"> İnternette bir adreste bulunan resim de kullanılabilir. <img src="https://tr.wikipedia.org/wiki/Apple#/media/File:AppleTV_top2.png">

HTML’de Resim Eklemek II <img> etiketi ile kullanılabilecek diğer özellikler şunlardır: alt: resim gösterilmediği durumda resmin olduğu yerde görünecek yazı height: resmin yüksekliği piksel olarak belirtilebilir. width: resmin genişliği piksel olarak belirtilebilir. style özelliği ile yükseklik/genişlik değerleri ve fazlası değiştirilebilir.

HTML’de Linkler Bir web sayfasından diğerine geçmek için linkler kullanılır. Bir metin ya da resmin üzerine tıklanarak geçiş yapılabilir. Tıklanabilecek içerik <a> etiketi ile tanımlanır. Tıklama sonucu geçilecek sayfa ise href özelliği ile belirlenir. <a href="http://www.klu.edu.tr">Kırklareli Üniversitesi Web Sayfası</a> Yerelde (aynı sunucu üzerinde) bir link verilecekse dosya ismi vermek yeterlidir. Resimlerde olduğu gibi linkin verildiği sayfaya göre yönlendirme yapılır. <a href="index.html">Anasayfaya Git</a> target özelliği kullanılarak açılacak sayfanın yeni bir tarayıcı penceresi/sekmesinde açılması sağlanabilir. <a href="index.html" target="_blank" >Yeni sekmede aç</a>

HTML Sayfa İçi Linkler Aynı sayfa içindeki bölümlere de link verilebilir. Bunun için ilk olarak sayfa içindeki bir etiket id özelliği ile işaretlenmelidir. <h2 id="sss">Sıkça Sorulan Sorular (SSS)</h2> Sayfanın başka bir kısmında ise şu şekilde link verilebilir. <a href="#sss">Sıkça Sorulan Sorulara GİT</a> Başka bir web sayfasından link verirken ise şu şekilde bu bölüme link verilebilir. <a href="yardim.html#sss">Sıkça Sorulan Sorulara GİT</a>

HTML Entities

HTML’de Tablolar Tablolar <table> etiketi ile tanımlanır. Tablo içinde bir satır oluşturmak için <tr> etiketi; Satırların içinde içeriğin bulunacağı hücreleri oluşturmak için <td> etiketi kullanılır. Tablo başlıkları için ise <th> etiketi de kullanılabilir.

Tabloları Biçimlendirmek Çerçeve için CSS border özelliği kullanılabilir. <th> ve <td> etiketleri için hücrenin kaç sütun kaplayacağı colspan; kaç satır kaplayacağı ise rowspan özelliği ile tanımlanır.

Iframe Etiketi <iframe> etiketi bir websayfasının içine başka bir web sayfası eklemek için kullanılır. Youtube sitesinden bir videoyu sitemize eklemek için de kullanabiliriz. Bu etiket http üzerinden çalışmaktadır.

HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün olan tüm genişliği kullanır. Örnek bazı etiketler: <div> <h1> - <h6> <p> Satıriçi etiketler ise yeni satırda başlamaz ve sadece gerekli genişlik kullanır. Örnek bazı etiketler: <span> <a> <img>

<div> Etiketi <div> etiketi html dökümanındaki division (bölüm) ı temsil eder. Diğer html elemanlarını ihtiva eden bir blok yapı olarak genelde stil vermede kullanılır. Kendi başına sayfa içeriğine hiçbir etkisi yoktur, ancak CSS ile beraber kullanıldığında içerik bloğunu biçimlendirilmesinde kullanılır.

<span> Etiketi <span> etiketi genel olarak bir metni ihtiva eder ve bu metne stil vermede kullanılır. Kendi başına sayfa içeriğine hiçbir etkisi yoktur, ancak CSS ile beraber kullanıldığında içerik metninin biçimlendirilmesinde kullanılır.

CSS (Cascading Style Sheets) HTML elemanlarının nasıl gözükeceğini tanımlar. Bir çok sayfadan oluşan bir web sitesinin aynı düzende gözükmesini sağlar. Bir sitenin CSS kodları tek bir dosyada toplandığında, sadece o dosya değiştirilerek tüm sitenin görünüşü, düzeni değiştirilebilir. head etiketi içinde açılan style etiketinden sonra o sayfaya ait CSS tanımlamaları yapılabilir. Genel tanımlama yapısı bir seçici ve bir tanımlayıcı kısımdan oluşur. Seçici bir HTML elemanını işaret eder. Tanımlanan farklı CSS özellikleri ; ile ayrılır ve { } parantezleri arasına yazılır. h1 {color:blue;font-size:12px;}

Diğer Seçiciler (class ve id) Bir HTML etiketine CSS özellikleri tanımladığımızda sayfa içindeki bu etiketin tüm kullanımları etkilenir. CSS tanımlanan etiketin tüm kullanımlarının etkilenmemesi için yada istenen CSS özelliğinin istenen etikete uygulanabilmesi için iki farklı CSS seçici tanımlaması daha bulunmaktadır. class seçicisi Her etiket için genel bir özellik olan class özelliği ile tanımlanır. id seçicisi Her etiket için genel bir özellik olan id özelliği ile tanımlanır.

Class Seçicisi CSS tanımlama kısmında oluşturulan sınıfın başına . konarak tanımlanır. Etiketi bu sınıfla ilişkilendirmek için, etiketin class özelliği kullanılır. Sadece belli bir etikete ait bir sınıf da oluşturulabilir.

Id Seçicisi CSS tanımlama kısmında oluşturulan sınıfın başına # konarak tanımlanır. Etiketi bu sınıfla ilişkilendirmek için, etiketin id özelliği kullanılır.

CSS de Yorumlar CSS kodları içinde yorumlar /* ve */ arasında belirtilir. Birden fazla satır da kaplayabilirler.

CSS Linkler (Bağlantılar) Linkler ile herhangi bir CSS özelliği kullanılabilir. (color, font-family, background, … gibi) Bunun dışında linklerin bulunabileceği dört durum varolup, bu durumlar için de tanımlama yapılabilir. Bu dört durum şunlardır: a:link – normal, ziyaret edilmemiş link a:visited – ziyaret edilmiş link a:hover – fare imleci linkin üzerinde olduğu durum a:active – linke tıklandığı andaki durum

CSS Linkler (Bağlantılar) II

CSS Öncelik Sırası Bir etiket için aynı CSS özelliğine ait birden fazla tanımlama yapıldığında en son yapılan tanımlama geçerlidir. Örneğin bir CSS dosyası içinde yapılan tanımlama, sayfanın head kısmında değiştirilirse son değişiklik geçerlidir. CSS dosyası iç tanımlama Bu durumda başlık turuncu renkte olacaktır. Eğer h1 etiketi içine satıriçi bir stil tanımlaması yapılırsa, bu yeni tanımlama geçerli olur. Başlık sarı hale gelir. <h1 style="color:yellow">Başlık</h1>

HTML 5 Yeni Etiketler Yeni etiketlerden en çok dikkat çekenleri: Yeni anlamsal etiketler: <header>, <footer>, <article>, <section> … gibi. Yeni multimedya etiketleri: <audio> ve <video> Yeni form özellikleri: number, date, time, calendar, range. Yeni grafik etiketleri: <svg> ve <canvas>

Yeni Anlamsal (Semantic) HTML5 Anlamsal etiketler kelime anlamıyla tarayıcı ve geliştiriciye bilgi veren etiketlerdir. HTML5 ile gelen yeni anlamsal etiketler tek başlarına sayfa içeriğine etki etmemektedir. Genelde CSS ile birlikte kullanılırlar. Sayfa şablonu oluşturmada <div> kullanımını azaltarak, tarayıcı ve programlama dostu bir yapı sağlamak amacıyla kullanılırlar. Bu etiketlerden bazıları ve anlamları: <header> - başlık kısmını tanımlar <nav> - sayfalar arası geçiş ve menü <section> - bir bölümü ifade eder <article> - bir bölüm içindeki ilgili haber/yazı/makale <aside> - sayfa içeriği dışında bir içerik (reklam, linkler gibi) <footer> - sayfa ya da bölüm sonu

HTML Video <video> etiketi ile web sayfalarına video eklenebilir. Eklenecek video için width ve height özellikleri belirtilmesi yararlı olur. controls özelliği ile video oynatma-durdurma, ses, tam ekran gibi kontroller eklenebilir. autoplay özelliği kullanıldığında videe otomatik olarak sayfa yüklendiğinde oynatılır. Etiket içindeki yazılar etiketin desteklenmediği durumlarda gösterilir.

Video etiketi dosya formatları Desteklenen formatlar: Tarayıcıların destekleme durumu:

Track etiketi ile altyazi <track> etiketi ve WEBVTT dosya formatı kullanılarak videoya altyazı eklenebilir. WEBVTT dosya içeriği örneği:

HTML Audio <audio> etiketi ile web sayfalarına ses dosyaları eklenebilir. controls özelliği ile oynatma-durdurma, ses yüksekliği gibi kontroller eklenebilir. autoplay özelliği kullanıldığında videe otomatik olarak sayfa yüklendiğinde oynatılır. Etiket içindeki yazılar etiketin desteklenmediği durumlarda gösterilir.

Audio etiketi dosya formatları Desteklenen formatlar: Tarayıcıların destekleme durumu:

HTML Object ve Embed Web sayfasının içine Flash, pdf, Java Applet, HTML dosyaları eklemek için kullanılır. Flash dosyası eklemek

HTML Form Etiketi <form> etiketi kullanıcı girişi için kullanılan bir etikettir. Kullanıcı girişi bu etiket içinde tanımlanan diğer form elemanları aracılığıyla meydana gelir. Bu etikete ait action özelliği ile formdan toplanan verilerin hangi sayfaya gönderileceği, method özelliği ile ise gönderme yöntemi belirlenir. Post ve Get olmak üzere iki farklı gönderme yöntemi vardır. Get metodunda gönderilen veriler adres satırına eklenerek gönderilir ve tarayıcılar da adres satırında görüntülenebilir. Post metodunda ise gönderiler veriler gözükmez. Kısa ve gözükmesi önemli olmayan veriler için get metodu tercih edilebilir.

Form Elemanları <input> en önemli ve en çeşitli form elemanıdır. type özelliği ile farklı görevlerdeki elemanlar tanımlanabilir. Tip Açıklama text Yazı yazılabilecek bir alan ekler password Şifre girişi alanı ekler (değerler *** şeklinde görünür) radio Radyo düğmeleri ekler (çoklu seçenekten seçim) checkbox Onay kutuları ekler submit Formu kabul edip onaylayan düğme(button) ekler reset Formu temizleyen düğme ekler button Bir işlem atanabilecek bir düğme ekler (genellikle Javascript ile) hidden Sayfa içeriğinde görünmeyen gizli veri göndermek için kullanılır

HTML5 Yeni Input Tipleri HTML5 ile gelen yeni input çeşitlerinden bazıları tabloda verilmiştir. Bu yeni özelliklerin tamamı henüz tüm tarayıcılar tarafından desteklenmemektedir. Tip Açıklama color Renk seçim alanı ekler date Tarih seçim alanı ekler email Email adresi alanı ekler number Sayı girme alanı ekler url Web adresi girme alanı ekler

Bazı Input Özellikleri Açıklama maxlength Girilebilecek maksimum karakteri belirler checked Önceden seçili hale getirir (radio ve checkbox için) min Girilebilecek en küçük değeri belirler max Girilebilecek en büyük değeri belirler placeholder Yazmaya başlayınca kaybolan ipucu eklemeyi sağlar required Formun gönderilmesi için mutlaka gereken veriyi belirler size Elemanın genişliğini belirtir name Adını belirtir value Gönderilecek değeri belirler

Select ve Datalist Form Elemanları <select> etiketi ile forma açılır menü eklenir. Açılır menüye elemanların eklenmesinde <option> etiketi kullanılır. <datalist> etiketi ile ise hem bilgi girişi yapılabilecek, hem açılır menüye sahip bir alan oluşturulur.

CSS Padding Bir HTML elemanına ait içerik ile çerçevesi arasındaki boşluğu tanımlar. Elemana ait her bir yön için CSS tanımlaması yapılabilir. Kısa tanımlama da kullanılabilir.

CSS Margin Bir HTML elemanının çerçevesi dışındaki boşluğu tanımlar. Elemana ait her bir yön için CSS tanımlaması yapılabilir. Kısa tanımlama da kullanılabilir. (top-right-bottom-left)

CSS Position Bir HTML elemanının sayfa içindeki konumlandırılmasına yönelik bir tanımlamadır. 4 farklı değer alabilir. static : varsayılan değer olup top,left,right ve bottom özelliklerinden etkilenmez. relative : normal konuma göre konumlandırma sağlar. top,left,right ve bottom özellikleri kullanılarak konum değiştirilir. fixed: sayfa görünümüne göre sabit bir şekilde tanımlanır. Sayfa aşağı kaydırılsa da sabit kalır. top,left,right ve bottom özellikleri kullanılarak konum belirlenir. absolute: Bir üstte bulunan (elemanı içeren) elemana göre konumlandırma yapılır. * Örnek kullanımlar için Lab Uygulamaları slaytına bakınız.

CSS 3 CSS’in çıkmış en son sürümüdür. Bir çok modülden oluşmakta olup, sahip olduğu özelliklerin büyük kısmı tarayıcılar tarafından desteklenir hale gelmiştir.

CSS3 – Yuvarlatılmış Köşeler CSS3 ile gelen border-radious özelliği ile herhangi bir elemana yuvarlatılmış köşeler tanımlanabilir. Verilen değer sayısına göre her köşe ayrı olarak tanımlanabilir. Örnekteki sıralama sol-üst, sağ-üst, sağ-alt, sol-alt border-radius: 15px 50px 30px 5px

CSS3 Gradients Gradient özellikleri kullanılarak iki yada daha fazla renkten geçişe dayalı renkler oluşturulabilir. İki farklı gradient modeli tanımlanabilir. Linear: Sol, sağ, aşağı ve yukarıdan başlayan renk değişimleri Radial: Merkezden tanımlanan renk değişimleri

CSS Dropdowns (Açılır Menüler) Herhangi bir HTML elemanının üzerine fare ile gelindiğinde bir menü, resim ya da yazı açılmasını sağlayabiliriz. Bunun için Dropdown eklemek istediğimiz elemanı bir <div> bloğunun içine alarak bu bloğa hemen yanında(altında,üstünde vs) menü açılması için position:relative özelliği vermeliyiz. Açılıcak menü için ise position:absolute özelliği verilmelidir. Bunun dışında başlangıçta gözükmemesi için display:none özelliği de kullanılmalıdır. Yandaki örneği ve Lab Uygulamaları Sunusundaki örnekleri inceleyebilirsiniz.

CSS3 Gölgelendirme (Text-Shadow) CSS3 text-shadow özelliği ile metne gölge efekti verilebilir. Özellik kullanılarak sırasıyla yatay ve dikey gölge büyüklüğü, bulanıklık (blur) değeri ve renk değeri belirtilebilir.

CSS3 Gölgelendirme (Box-Shadow) CSS3 box-shadow özelliği ile bir HTML elemanına gölge efekti verilebilir. Özellik kullanılarak sırasıyla yatay ve dikey gölge büyüklüğü, bulanıklık (blur) değeri ve renk değeri belirtilebilir.