Html temelleri. Ders 4

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Html temelleri. Ders 4"

Emel Armağan
8 yıl önce
İzleme sayısı:

1 Html temelleri Ders 4 1

2 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en yaygın olan TCP/IP haberleşme protokolünü kullanır. Kullanıcı bir yerden başlar ve diğer yerlerle ve kaynaklara bağlantı kurar. Bu işlemlerin yerine getirilmesi için üç farklı yazılıma ihtiyaç vardır: Server (hizmet sağlayıcı) Web sayfası (Bizim dersin konusu) Kullanıcı yazılımı, tarayıcı (browser) 2

Kullanıcı bir yerden başlar ve diğer yerlerle ve kaynaklara bağlantı kurar.

3 Giriş -devam Çoğu büyük şirketler kendi web serverlarına sahiptir, küçük şirketler ve bireysel kullanıcılar Internet Service Providers (ISPs, internet servis sağlayıcılar) tarafından sunulan hizmetten yararlanarak web sayfalarını internette sergilerler. Web tarayıcıları GUI (Graphical User Interface) veya CUI (Character User Interface) olmak üzere iki ana grupta toplanır. Web sayfaları programlama sayesinde web ortamını etkileşim kazandırır. 3

4 URL nedir? Universal Resource Locator olarak bilinir. Web sayfalarındaki link bağlantıları için kullanılır. URL, protokol, kullanıcı ismi ve şifresi (genellikle ihmal edilir), sistem ismi, yeri, istenilen dosyanın ismi gibi bilgileri sağlar. 4

URL, protokol, kullanıcı ismi ve şifresi (genellikle ihmal edilir),

5 www protokolleri Protokol file ftp gopher http mailto news telnet Tanımlama Get file on current system (client) File Transfer Protocol Information Service protocol superseded by http HyperText Transport Protocol Send Net News Transport Protocol (NNTP) Terminal session communications 5

Information Service protocol superseded by http HyperText Transport

6 Hypertext nedir? Dokümanın herhangi bir bölgesine veya diğer dokümanlara linkler sağlayan herhangi bir dokümana uygulanan tanımlamadır. Dokümanı baştan sonra incelemek yerine, dokümanın belirli bölgelerine linkler yardımıyla geçme imkanı sağlar. Referans ile aralarındaki en önemli fark, kullanıcının referansı kendisinin içindekiler veya indeks yardımıyla kendisinin arayıp bulmasıdır. Hypertext de bu ise bir tıklama mesafesi uzaklıktadır. 6

7 Web Sayfası Bir web sitesindeki ilk sayfaya erişilmesi için standart dosya isimleri verilir. Bu kurulu olan sunucu yöneticisi tarafından ayarlanır. Bunun için kullanılan genel isimler index.html veya welcome.html Buradaki uzantı windows yüklü makinelerde bazen.htm olur. Tarayıcınızda yazıldığında otomatik olarak bağlantısı kurulur. Sonuç olarak sunucumuza yerleştireceğimiz web sayfamızın giriş sayfası index.html ismine sahip olmalıdır. 7

html Buradaki uzantı windows yüklü makinelerde bazen.htm olur. Tarayıcınızda http://193.255.97.

8 HTML tanıtımı -1 Bireysel Web sayfalarının programlaması HTML (Hypertext Markup Language) yardımıyla yapılır. HTML sayfaya erişildiğinde tarayıcıdan elde edilecek görüntü ve diğer sayfalara yapılacak linkleri tanımlar. Bu dil, web tarayıcısı tarafından text (yazı), resim ve linklerin nasıl görüntüleneceğini belirleyen kod ve takıları (tag) tanımlar. HTML dilinde takılar < ve > sembolleri arasına yerleştirilirler. Takılar için büyük veya küçük harf duyarlılığı yok olmasına karşılık değişkenlere veya özelliklere atanan değerler de büyük veya küçük harf duyarlılığı olabilmektedir. Takıların büyük çoğunluğu kapatılmalıdır. <title> Başlık </title> 8

Bu dil, web tarayıcısı tarafından text (yazı), resim ve linklerin nasıl görüntüleneceğini belirleyen kod ve takıları (tag) tanımlar.

9 HTML - 2 <title> Title text goes here </title> <H1> İlk başlık buraya gelir </h1> <! Yorumlar buraya yazılır --> <hr> <! yatay çizgi çizer --> Dikkat edilirse <hr> için kapatma takısı gerekli değildir. Bir çok HTML versiyonu bulunmaktadır. Hatta artık XHTML olarak adlandırılmaktadır ve temel olarak HTML 4.1 üzerinden geliştirilmiştir. Daha geniş bilgi için Web tarayıcıları tanımadıkları takıları görmezden gelirler. Çoğu web sayfası aşağıdaki açıklamayı kullanır: This page optimized for the XYZ browser. Bu sayfa XYZ tarayıcısı için optimize edilmiştir. 9

Hatta artık XHTML olarak adlandırılmaktadır ve temel olarak HTML 4.1 üzerinden geliştirilmiştir. Daha geniş bilgi için http://www.w3.

10 HTML - 3 Makul minimumdaki bir HTML dokümanı dört eleman içerir: 1. <html> </html> Dokümanın tamamını içerir 2. <head> </head> Baş kısım bilgisini içerir 3. <title> </title> Başlığı içerir. 4. <body> </body> Dokümanın vücut kısmını içerir. <html> <head> <title> Başlık Buraya Yazılır </title> </head> <body> Web Sayfasının Ana Kısmı Burasıdır </body> </html> html örnekler\örnek1.html 10

<title> </title> Başlığı içerir. 4. <body> </body> Dokümanın vücut kısmını içerir.

11 HTML - 4 Font büyüklüklerini kontrol etmek için altı seviyeli başlık takısı bulunmaktadır. <h1>, <h2>,,<h6> html örnekler\örnek2.html Fontların kalınlık, italik, vurgulu vb. özellikleri için <ADDRESS>, <CITE>, <CODE>, <EM>, <KBD>, <SAMP>, <STRONG>, <VAR> takıları kullanılır. html örnekler\örnek3.html <br> satır başına geçilmesi gerektiğini ifade eder. <i> italik yazı için, <b> ise kalın yazı için kullanılır. <S> üzeri çizgili, <U> altı çizili, <TT> Typewriter, <BLINK> yanıp sönen yazı için kullanılır. <sup> ve <sub> sırasıyla üst simge ve alt simge şeklinde yazdırmak için kulanılır. html örnekler\örnek4.html 11

$html örnekler\örnek3.html <br> satır başına geçilmesi gerektiğini ifade eder. <i> italik yazı için, <b> ise kalın yazı için kullanılır.$

12 HTML - 5 Yeni paragraf <P> takısıyla yapılır. Kapanış istemez. Bir kimsenin eserinden alıntı yapacaksanız bunu <blockquote> ve </blockquote> ile yapabilirsiniz. Eğer özel bir format kullanmak isterseniz bunu <pre> ve </pre> ile yapabilirsiniz. html örnekler\örnek5.html Ortalı yazı yazmak için <center> ve </center> takıları kullanılır. Hizalama yapılırken <h5 align=left> veya <p align=right> takılarından da yaralanılabilir. html örnekler\örnek6.html 12

$Eğer özel bir format kullanmak isterseniz bunu <pre> ve </pre> ile yapabilirsiniz. html örnekler\örnek5.$

13 HTML - 6 HTML içerisinde beş değişik liste tipi vardır: 1. Sıralanmamış 2. Sıralanmış 3. Klasör 4. Menü 5. Sözlüksel Listeye eleman eklemek için <li> ve </li> list item takısı kullanılır. Sıralanmamış liste için <ul> ve </ul>, sıralanmış liste için <ol> ve </ol> takıları kullanılır. html örnekler\örnek7.html 13

Sözlüksel Listeye eleman eklemek için <li> ve </li> list item takısı

14 HTML - 7 Klasör türü liste için <dir> ve </dir> takıları kullanılır. Menü türü liste için <menu> ve </menu> takıları kullanılır. html örnekler\örnek8.html Sözlük veya tanımlama türü listeleme <dl> ve </dl> ile yapılır. Liste içerisindeki tanımlanacak her bir eleman <dt> ve tanımlama <dd> ile yapılır. html örnekler\örnek9.html Sıralı ve sırasız listeler için type (tip) belirtmek mümkündür. html örnekler\örnek10.html 14

$Liste içerisindeki tanımlanacak her bir eleman <dt> ve tanımlama <dd> ile yapılır. html örnekler\örnek9.$

Benzer belgeler

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

HTML 5 ve CSS 3. 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