Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML’YE GİRİŞ. HTML'YE GİRİŞ HTML, HyperText Markup Language, tarayıcı (browser)'lardan görülebilecek (Internet Explorer, Mozilla Firefox, Netscape gibi)

Benzer bir sunumlar


... konulu sunumlar: "HTML’YE GİRİŞ. HTML'YE GİRİŞ HTML, HyperText Markup Language, tarayıcı (browser)'lardan görülebilecek (Internet Explorer, Mozilla Firefox, Netscape gibi)"— Sunum transkripti:

1 HTML’YE GİRİŞ

2 HTML'YE GİRİŞ HTML, HyperText Markup Language, tarayıcı (browser)'lardan görülebilecek (Internet Explorer, Mozilla Firefox, Netscape gibi) internet dokümanlarını oluşturmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları hiçbir şey ifade etmez. HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir. Bunun için notepad veya wordpad gibi yazı editörleri yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi web sitesi geliştirmek için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.

3 HTML'YE GİRİŞ Her HTML dokümanı ile başlar ve ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır: Başlık bölümü... etiketleri arasında yer alır. Gövde Bölümü... etiketleri arasında yer alır.

4 HTML'YE GİRİŞ Başlık bölümü içine... etiketi konulur. title, tarayının en üstünde görünen ve oluşturulan sayfanın başlığıdır. title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız. Türkçe içerikli sayfaların düzgün görünmesi ise Türkçe karakterler (ç, ğ, ı,, ş, ö, ü, İ) için Başlık kısmı içerisine aşağıdaki meta etiketileri eklenir.

5 HTML'YE GİRİŞ Herhangi bir web sayfasının HTML kodu görülmek istendiğinde, farenin sağ tuşuna tıklayıp Kaynağı Görüntüle seçeneği tıklanır. Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.

6 HTML'YE GİRİŞ Çift taraflı etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir. Bu bir yanlış örnektir. Doğrusu budur. ve gibi tek taraflı etiketler, ve şeklinde yazılmalıdır.

7 BASİT HTML ETİKETLERİ Başlıklar: 6 çeşit başlık vardır:,,.... Bunlardan en büyüğü, en küçüğü ise 'dır. H1 ile yapılan başlık H2 ile yapılan başlık H3 ile yapılan başlık H4 ile yapılan başlık H5 ile yapılan başlık H6 ile yapılan başlık

8 BASİT HTML ETİKETLERİ Paragraflar, Satır boşlukları ve Yatay Çizgiler: Paragraflar etiketiyle oluşturulur. Paragraf metni ile arasında yer alır. Örneğin: Bu bir paragraftır. Paragraf başlatmadan bir satır boşluğu yaratmak için etiketi kullanılır. Örneğin: Paragrafın ilk satırı. Paragrafın ikinci satırı. Sayfaya yatay çizgi eklemek için etiketi kullanılır.

9 BASİT HTML ETİKETLERİ HTML etiketiEtiketin Web Sayfasındaki görüntüsü Birinci paragraf İkinci paragraf Üçüncü paragraf Alt satır Birinci paragraf İkinci paragraf Üçüncü paragraf Alt Satır

10 METİNLER (YAZILAR).. color yazının rengini, face yazıtipini (arial, verdana, tahoma gibi), size da yazı boyutunu belirler. size değişkeninde kullanılan rakam 1'den 7'ye kadardır.

11 METİNLER (YAZILAR) EtiketAçıklamaUygulama.. Kalın biçimlendirmeMetin.. İtalik biçimlendirmeMetin.. Altı çizgili biçimlendirmeMetin.. Üst simgeX2X2.. Alt simgeH2H2.. Bilgisayar kodu biçimi Metin.. Alıntı biçimiMetin Font etiketi ile birlikte aşağıdaki tabloda verilen etiketler kullanılarak sayfadaki metinler biçimlendirilebilir. Not: Metin biçimlerken başlanılan etiketin kapatılması unutulmamalıdır.

12 METİNLER (YAZILAR) Renkler : HTML dokümanlarında renkler ya İngilizce isimleriyle ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir. En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk yandadır.

13 METİNLER (YAZILAR) Renkler : Örnek : Bu örnekte sayfanın arkaplan rengi yeşil olur. aynı sonucu verir. Örnek : Font rengi "indigo" oldu. Etiketi kapatıldığı için tekrar normale döndü.

14 METİNLER (YAZILAR) LİNKLER: Linkler... etiketi içinde, href="" komutuyla belirtilir. Örnek: Uludağ Üniversitesi Ana Sayfası Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılması istenirse target="_blank" komutunun eklenmesi gerekir. Aynı pencerede açılması istenirse target değişkeni target="_top" şeklinde yazılabilir. target değişkeni yazılmazsa da sayfa aynı pencerede açılır.

15 METİNLER (YAZILAR) LİNKLER: title değişkenini kullanarak da fare linkin üzerine geldiğinde görünecek link açıklaması eklenebilir. Aşağıdaki örnekte fare ile linkin üzerine gelip beklendiğinde Uludağ Üniversitesi yazısını görülecektir. Uludağ Ünversitesi Eğer hazırlanan dokümanlar arasında bir bağlantı kurulmak isteniyorsa, etiketi aşağıdaki gibi kullanılmalıdır. Önceki sayfa Bir e-posta adresine link verilmek isteniyorsa: E-posta atmak için tıklayın. Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.

16 METİNLER (YAZILAR) LİNKLER: Aynı doküman içindeki bir başka noktaya bağlantı kurulmak istenirse tutturucu noktaları (anchor points) kullanılır. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verilebilir. Tutturucuların kullanımı aşağıdaki gibidir. Linkler başlığına aşağıdaki gibi bir tutturucu belirlenir. Linkler Sayfanın herhangi bir bölümünde yukarıda belirlenen tutturucuya aşağıdaki gibi link verilir. Linklere git Aynı sayfanın başına veya sonuna gitmek için aşağıdaki örnekler kullanılabilir. Sayfa Başı Sayfa Sonu

17 RESİMLER RESİM EKLEME: şeklinde yapılır. Dikkat edilmesi gereken durum kullanılan resmin klasörün yapısıdır. Bağımsız Değişkenler : src : Resim dosyasının kaynağını belirtmek için kulanılır. alt: Resme açıklama verilmesini sağlar. Fare resmin üstüne getirildiğinde, alt değişkeninde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür. width: Resmin genişliğini belirtmek için kullanılır. height: Resmin yüksekliğini belirtmek için kullanılır. border: Resme çerçeve eklemek için kullanılır. Çerçeve kalınlığı (piksel olarak) sayı olarak verilir. Örnek:

18 RESİMLER RESİM EKLEME: Eğer web sayfasının arka planında bir resmin çıkması istenirse: şeklinde yazılır. Resimleri linke dönüştürmek için etiketi ile etiketi iç içe kullanılır. Not: Resimlerin width ve height değişkenlerinin belirtilmesi sayfanın yüklenirken şeklinin bozulmasını önler.

19 HTML'YE GİRİŞ LİSTELER: Üç çeşit liste vardır: 1. Sıralı Liste (ol-Ordered List): Yanda görüldüğü gibi type değişkeni sıralı listenin türünü belirler. type değişkeni için aşağıdaki değerlerden biri kullanılabilir: type: {1, a, A, I, i} HTML EtiketiEtiketin Web Sayfasındaki görüntüsü Programlama Dilleri: Assembler C, C++ Delphi Visual Basic Office Yazılımları: Word Excel Powerpoint Access Outlook Programlama Dilleri: 1. Assembler 2. C, C++ 3. Delphi 4. Visual Basic Office Yazılımları: a. Word b. Excel c. Powerpoint d. Access e. Outlook

20 HTML'YE GİRİŞ LİSTELER: 1. Sıralı Liste (ol-Ordered List): Liste start değişkeni ile istenilen sayıdan başlatılabilir: HTML etiketiEtiketin Web Sayfasındaki görüntüsü Office Yazılımları: Word Excel Powerpoint Access Outlook Office Yazılımları: 199. Word 200. Excel 201. Powerpoint 202. Access 203. Outlook

21 HTML'YE GİRİŞ LİSTELER: 2. Sırasız Liste (ul-Unordered List): HTML etiketiEtiketin Web Sayfasındaki görüntüsü Programlama Dilleri: Assembler C, C++ Delphi Visual Basic Office Yazılımları: Word Excel Powerpoint Access Outlook Programlama Dilleri: oAssembler oC, C++ oDelphi oVisual Basic Office Yazılımları: Word Excel Powerpoint Access Outlook Sırasız listelerde type değişkeni sırasız listenin işaretini belirler. type değişkeni için aşağıdaki değerlerden biri kullanılabilir: type:{square, disc, circle}

22 HTML'YE GİRİŞ LİSTELER: 3. Tanımlama Listeleri (dl-Definition List): HTML etiketiEtiketin Web Sayfasındaki görüntüsü Karbonhidrat ve ben En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. Sebze ve ben Sebzeyle aram pek iyi değildir ama taze fasulye oldukça leziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. Et ve ben Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Karbonhidrat ve ben En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. Sebze ve ben Sebzeyle aram pek iyi değildir ama taze fasulye oldukça leziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. Et ve ben Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. dl-definition list dt-definition term dd-definition description

23 HTML'YE GİRİŞ TABLOLAR Tablolar.... etiketleri arasında oluşturulur. etiketinden sonra daima gelir. Her satır tanımlandığında, her hücre tanımlandığında da etiketi kullanılır. Örnek : 1. hücre 2. hücre 3. hücre 4. hücre 5. hücre 6. hücre

24 HTML'YE GİRİŞ TABLOLAR Bağımsız Değişkenler: border : Çerçevenin kalınlığını belirler. border="0" yapılırsa tabloda çerçeve bulunmaz, bu miktar arttırıldıkça çerçevenin kalınlığı da artar. cellpadding, cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların arasındaki boşluk ise cellspacing değişkeni ile belirtilir. bgcolor: şeklinde kullanılarak bütün tablo ya da şeklinde sadece tek bir hücre renklendirilir. align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" seçenekleri ile kullanılır. valign : Hücre elemanının düşey konumunu belirler, seçenekleri "top, bottom, middle"dır. colspan, rowspan : Aynı satırdaki hücrelerin birleştirilmesi için colspan, aynı sütundaki hücrelerin birleştirilmesi için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait.. etiketi silinir.

25 HTML'YE GİRİŞ TABLOLAR Örnek : 1. hücre 2. hücre 3. hücre 4. hücre 5. hücre 6. hücre 7. hücre

26 HTML'YE GİRİŞ FORMLAR Formlar... etiketleri arasında oluşturulur. Form bilgileri action değişkeninin içine yazılan dosyaya veri olarak gönderilebilir. Formlar sayesinde anket ve geribildirim uygulamaları hazırlanabilir.

27 HTML'YE GİRİŞ FORMLAR Örnek: Adı Soyadı : Doğum yeri : Doğum tarihi : Cinsiyet : Erkek Kiz Hobiler: Müzik dinlemek Jiu-Jitsu Sinemaya gitmek Diğer : Şifrenizi giriniz:

28 FORMLAR action: Formun gönderileceği adres (dosya adı) belirtilir. method="get": Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır. method="post": Formdaki bilgiler bir adrese postalanacaksa kullanılır. type="text" : Tek satırlık bir metin alanı açar. size="" : Bu metin alanının boyutunu belirler. type="checkbox" : Çok seçenekli bir sorunun birden fazla cevabının alınmasını sağlar. type="radio" : Tek seçenekli bir sorunun tek cevabı alınır. type="submit" : Formu action'la belirtilen dosyaya yönlendiren bir buton oluşturur. type="reset" : Bu butona tıklanınca form boşaltılır. type="password" : Bir password alanı oluşturur. Buraya girilen her karakter * şeklinde görünür. : type="text" gibi tek satırlı değil de çok satırlı bir metin alanı isteniyorsa bu etiket kullanılır. cols metin alanının uzunluğunu, rows ise yüksekliğini piksel cinsinden verir. HTML'YE GİRİŞ

29 Listeleme: Select ve option etiketlerini kullanılarak seçimlik liste (menü) oluşturabilir. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir. Örnek: Toyota BMW Peugeot Renault Seat Lada HTML'YE GİRİŞ

30


"HTML’YE GİRİŞ. HTML'YE GİRİŞ HTML, HyperText Markup Language, tarayıcı (browser)'lardan görülebilecek (Internet Explorer, Mozilla Firefox, Netscape gibi)" indir ppt

Benzer bir sunumlar


Google Reklamları