1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Web Programlama 1: Html

'Html - CSS - XML - JavaScript - Ajax' forumunda megalanya tarafından 30 Kasım 2019 tarihinde açılan konu

  1. megalanya Guest

    • Guest
    Katılım:
    19 Şubat 2016
    Mesaj:
    347
    Alınan Beğeniler:
    219
    Meslek:
    Öğrenci

    Özel Mesaj
    Selamün Aleyküm merhabalar devrelerim. Bugün HTML´e (ve biraz da CSS´e) giriş yapacağız. Ancak eğer internetin nasıl çalıştığı hakkında hiçbir fikriniz yoksa başlamadan önce:


    konusuna bakmanızı şiddetle tavsiye ederim. Bu sayede bazı kavramları daha kolay bir şekilde öğrenebilirsiniz.

    Eğer programlama öğrenmek istiyorsanız daha önce açtığım bu:


    konuları inceleyebilirsiniz. Ancak HTML´e başlamak için herhangi bir programlama dilini bilmek zorunda değilsiniz. Daha önce hiç kod yazmamış kişiler de kolay bir şekilde HTML, HTML5, CSS, JavaScript ve PHP öğrenebilirler. Yakında Web Programlama için Türkçe Kaynak Arşivi´ni paylaşacağım İnşâallah. Bu sayede web programlama da kendinizi ileri seviyelere getirebilirsiniz. HTML ise web programlamaya giriş yapacak olan herkesin bilmesi gereken en temel dildir.

    <HTML>

    Hiper Metin İşaretleme Dili (İngilizce´si: Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5´dir.

    HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler. Dolayısıyla aynı HTML kodunun farklı tarayıcılar da farklı sonuç vermesi olasıdır. CSS ve JavaScript ile beraber kullanıldığında HTML vasıtasıyla görsel ve dinamik web siteleri oluşturulabilir.

    Küçüktür (<) ve büyüktür (>) işaretleri arasında HTML komutları kullanılır. Örnek:

    HTML:
    <html></html>
    İşaretlenen metnin başını ve sonunu belirtmek için çoğunlukla çift olarak kullanılır. Örnek:

    HTML:
    <h1>Hello world!</h1>
    Ancak işaretlemek yerine metnin bir yerine bir işaret konacaksa tek olarak da kullanılabilirler. Örnek:

    HTML:
    <img>
    Örnek Bir HTML Sayfası

    HTML standartları W3C yani Dünya Çapında Ağ Konsorsiyumu (İngilizce´si: World Wide Web Consortium) tarafından belirlenmektedir. Ekim 1994´te Ağ´ın (Network´ün) mucidi Tim Berners-Lee tarafından MIT ve CERN bünyesinde kurulmuş olan uluslararası Dünya Çapında Ağ (WWW) standartlarını belirleyen örgüttür.

    HTML, “etiket” (İngilizce´si: tag) ismi verilen çeşitli elemanlar kullanılarak oluşturulur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.

    HTML:
    <html>
        <head>
            <title>Deneme</title>
        </head>
        <body>
            <p style="font-size:10px"><a href="https://www.google.com.tr/">Google</a></p>
        </body>
    </html>
    
    Bazı Internet Terimleri

    Internet: TCP/IP tabanlı herkese açık ağdır. Özel bir ağ olmayıp, kimseye ait değil ve kimse tarafından kontrol edilemez.

    TCP/IP: (Transmission Control Protocol / Internet Protocol) Ağ ortamında bilgisayarların iletişimini sağlayan protokoldür. İlk olarak Amerikan Savunma Bakanlığı tarafından hazırlanmış ve 1970 in sonlarında genel kullanım için geliştirilmiştir.

    İntranet: Bir firmanın kendi iletişim alanı içerisindeki ağ ortamında bilgisayarlar arası iletişime verilen addır. Internet’in özel bir versiyonudur.

    World Wide Web: Bir web browser kullanılarak görüntülenebilen Internet’in grafiksel yüzüdür.

    Web Page (Web Sayfası): Internet üzerinde görüntülenebilen her dosya web sayfasıdır. Web sayfası ASCII karakterleri kullanılarak yazılan HTML denen bir işaretleme dili ile yazılır.

    Web Browser (Web Tarayıcısı): World Wide Web üzerinde bulunan sayfaları yükleyip görüntülemeyi sağlayan program.

    Web Server: HTML sayfalarını Web Tarayıcınıza gönderen Internet üzerindeki sunucu makinelerde çalışan programdır. Web Serverlar günümüzde HTML nin daha gelişmişi olan CGI (Common Gateway Interface), ASP (Active Server Page) vs gibi sayfaları da istemcilere gönderebilmektedir.

    HTML: (Hyper Text Markup Language) Web Sayfası hazırlama dilidir. Metinlerin görünümünü, konumunu vs. şekillendirmek için metin ve etiketlerle (yani etiketlerle) kontrol edilen oldukça basit bir işaretleme dilidir.

    URL: (Uniform Resource Locator) Internet üzerideki adreslerin genel adıdır. Mesela http://www.sakarya.edu.tr üniversitemizin Web Sayfasının URL’sidir.

    Hyperlink: Tıklandığında bağlı olduğu diğer bir sayfanın açılmasını sağlayan bir bağlantıdır.

    Hotspot Area: Tıklanabilir alandır.

    HTTP: (Hyper Text Transfer Protocol) HTML sayfalarının Web tarayıcınıza aktarılmasında kullanılan protokoldür.

    FTP: (File Transfer Protocol) Internet üzerinden dosya aktarımını sağlayan protokoldür. Örneğin ftp://ftp.sakarya.edu.tr Üniversitemizin FTP sinin URL sidir.

    ISP: (Internet Service Provider) Internet Servis Sağlayıcıları demektir. Örneğin; Türk Telekom, D-Smart, TurkNet, Turkcell Superonline, Vodafone gibi internet hizmeti sunan firmalar.

    DNS: (Domain Name Server=Alan Adı Sunucusu): Web sitelerinin alan adlarının hangi IP’ye yönlendirileceğinin saklandığı sunucudur.

    World Wide Web

    World Wide Web (ya da kısaca Web) birbirleri ile iletişim kuran iki bileşenden meydana gelir. Bunlar;

    1. Web Browser (Client: İstemci)
    2. Web Server (Server: Sunucu)

    Web Nasıl Çalışır

    1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink ’e tıklar.
    2. Browser DNS (Domain Name Server) a bağlanıp istemde bulunduğu sayfanın server IP sini alır.
    3. Ardından Aldığı IP ye bir çağrı gönderir ve sayfayı ister.
    4. Web Server da bu isteğe cevap verir ve http üzerinden sayfayı Web Browser a gönderir.

    [​IMG]

    HTTP ve HTML

    HTTP, Web Server ile Web Browser ’ın birbirleri ile haberleştiği bir protokoldür.

    HTML dokümanları metin ve etiketlerden meydana gelir. HTML etiketleri açılı parantez içerisinde yazılır. HTML etiketlerinin çoğu slash karakteri ile biten etiket ile kapatılarak bloklar halinde kullanılır.

    Örnek:

    HTML:
    <B>HTML</B> bir metin işaretleme dilidir.
    Yukarıdaki örnekte HTML koyu olarak yazılacaktır.

    Örnek: 001_first.htm

    HTML:
    <HTML>
        <HEAD>
            <!—Bu açıklama sayfada gözükmeyecektir.-->
            <TITLE>Asla yapmamamız Gereken Davranışlar. (first.htm)</TITLE>
        </HEAD>
        <BODY>
            <H1>Asla yapmamamız Gereken Davranışlar.</H1>
            <BR>
            <H3>Hocalarımızın
            Asla
            Yapmamamız
            Gerektiğini
            Söylediği
            Şeyler.</H3>
            <UL>
            <LI>Koridorda sigara içmek
            <LI>Kopya çekmek
            <LI>Sınıfta konuşmak
            <LI>Ders çalışmamak
            </UL>
            <P>
            Daha fazlası için aşağıdaki linke tıklayınız.
            <A href=”http://www.kmyo.sakarya.edu.tr/”>KMYO</A>
        </BODY>
    </HTML>
    
    HTML Versiyonları

    HTML nin birkaç versiyonu vardır. Günümüzde çoğu Web Tarayıcısının desteklediği 3.2 versiyonudur. HTML’nin standardı Word Wide Web Consortium (W3C) tarafından kontrol edilmektedir. HTML nin 4. versiyonunda iki yeni eklenti vardır.Bu eklentilerin en önemlileri;

    • Cascading Style Sheets (CSS)
    • Dynamic HTML (DHTML)

    Cascading Style Sheets (CSS)

    CSS nin her yerde kullanılması nedeni ile W3C, CSS nin Internet Explorer ve Netscape Navigator tarafından desteklenen standardını belirledi.

    CSS Microsoft Word ün stili gibi çalışır. Stili önceden tanımlarız. Daha sonrada sayfadaki elemanlarda stile başvuru yaparsınız. CSS ile madde imlerini, metin fontlarını, kullanılan başlık fontunu vs. değiştirebiliriz.

    Dynamic HTML (DHTML)

    Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde hareket etmesini ya da görünümünün değişmesini sağlayabilen Web Sayfaları yapabilme imkanı sağlayan dildir.

    HTML Extensions

    Son birkaç yılda bazı satıcılar web modelini dinamik (mekanik) ve interaktif (etkileşimli) içerikli olarak geliştirdiler.

    Bunlar;

    • Client-Side Extensions (İstemci Tarafı)
    • Server-Side Extensions (Server Tarafı)

    Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dynamic HTML Client-Side a birer örnektirler.

    CGI programları ve scriptler, Active Server Page ve FrontPage WebBots lar da birer Server-Side Extension a örnektirler.

    XML: eXtensible Markup Language

    XML Internet’teki en yeni dillerdendir. W3C, XML’i “Verilerde yapı belirtmek için ortak bir yazım şekli” olarak ifade eder. Bu bağlamda XML pek de dil sayılmaz.

    HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized Markup Language (SGML) den türerler. XML in HTML’den farkı HTML sabit etiketlere sahiptir fakat XML, SGML gibi kendi etiketlerinizi tanımlamanıza izin verir.

    Web Hazırlama Yazılımları

    Web hazırlamak için birçok araca sahibiz. Bunları üç sınıfta toplayabiliriz.

    • HTML editörleri
    • Web Sitesi geliştirme araçları
    • Web Uygulaması geliştirme araçları

    HTML Editörleri

    HTML yazmak için NotePad ‘i kullanabileceğimiz gibiyardımcı programlar ad vardır. Bunlardan bir kısmı;

    • Hot Dog
    • HotMetal Pro
    • HomeSite
    • 1st Page 2000
    • Basit bir metin editörü.

    Web Sitesi Geliştirme Araçları

    Bu tür ürünler tek başına bir web sayfası yapmak yerine Web Sitesi hazırlamada kullanılır. Bu grup programlar HTML editörü ile birlikte linkler kontrol edebilen araçlar ve Web Sitesini Web Server a yayınlayabilecek araçlar içerir. Bu kategorideki programlar;

    • Fusion
    • Visual Page
    • Dreamweaver
    • FrontPage6

    Web Uygulamaları Geliştirme Araçları

    Web Sitesi yapma araçları sabit içerikli statik Web Sitesi yapmada kullanılır. Web Uygulamaları Geliştirme Araçları bir veritabanı ile bağlantılı içeriğe sahip web sitesi hazırlamada kullanılır.

    Bu araçları kendi kendini bir veri tabanından güncelleyen dinamik Web Siteleri oluşturmakta kullanırız. Bu araçlardan bazıları;

    • ColdFusion
    • NetDynamics
    • Dreamweaver UtraDev
    • Visual InterDev

    Sorular

    Internet hangi protokol üzerine kutulmuştur.
    D/Y: HTML, Web Sayfası hazırlamak için bir programlama dilidir.
    World Wide Web’den bir Web sayfası talep ettiğinizde hangi
    programlar birlikte çalışarak size Web Sayfasını getirir.
    HTML ve http asındaki fark nedir?

    Cevaplar

    TCP/IP
    Yanlış: HTML bir formatlama ya da işaretleme dilidir. Bir programlama dili değil.
    Web Browser (Client) ve Web Server
    HTML Web Sayfası hazırlamak için bir dildir. http ise Web Server ile Web Browser ın birbirleri ile haberleşmek için kullandıkları protokoldür.

    HTML

    Bir Web Sayfasının Genel Yapısı

    HTML:
    <HTML>
        <HEAD>
            Başlık Metni
        </HEAD>
        <BODY>
            Body Metni
        </BODY>
    </HTML>
    
    Not: Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayaya ekler. Yani yazmasak ta olur.

    HTML:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transdional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    Case-Insensitive: HTML büyük küçük darfe duyarsızdır. <BODY> ile <body> etiketleri arasında bir fark yoktur.

    Yapısal Etiketler (Structural Tags)

    Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır.

    Bunlar;

    <HTML></HTML> HTML dokümanının başlangıç ve bitini tanımlar.
    <HEAD></HEAD> Başlık bölümünün başlangıç ve bitimini tanımlar.
    <TITLE></TITLE> Web Sayfasının başlığını tanımlar. Browser’ın isim çubuğunda görünecek olan metindir.
    <BODY></BODY> Web Sayfasında gösterilecek olan içeriğin yazıldığı bölümü tanımlamada kullanılır.
    <!-- --> Bu etiketler Web Sayfamıza açıklamalar ekleme de kullanılır.

    Örnek: 002_myfirst.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>İlk Web Sayfam (myfirst.htm)</TITLE>
        </HEAD>
        <BODY>
            <!—Bu örnek bir açıklama-->
            Buraya Sayfada görünecek metinler gelecek
        </BODY>
    </HTML>
    
    Etiket Özellikleri (Tag Attributes)

    Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin davranışını düzenlemek için değerler atarız. Kullanımı;

    HTML:
    <ETİKET özellik1="value" ö2="value">
    Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P> etiketi yeni bir paragraf başlatır ve varsayılan olarak metni sola yazlar.

    HTML:
    <P>Bu Metin Sola Yaslıdır.</P>
    <P align=”left”>Bu Metin Sola Yaslıdır.</P>
    <P align=”right”>Bu Metin Sağa Yaslıdır.</P>
    <P align=”center”>Bu Metin Ortalanmıştır.</P>
    
    <HEAD> Etiketi

    Bu etiket içerisinde yazılan sayfada gözükmezler. Bu etiket genellikle sadece <TITLE> ve </TITLE> etiketlerini içerir.

    Not: HEAD bölümü <META> etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini da içerir.

    <BODY> Etiketi

    <BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık kullanılanları;

    • BACKGROUND
    • BGCOLOR
    • TEXT
    • LINK
    • VLINK
    • ALINK

    BACKGROUND

    Sayfamızın arka planında gözükmesini istediğimiz resmi belirtmede kullanırız. Arka plan resmi kaynak dosyası olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan resmi web sayfasını doldurmaz, döşenir.

    BGCOLOR

    Sayfamızın arka plan rengini belirtmede kullanırız. Bu özelliğe vereceğimiz değerler renk adı olabileceği gibi rengin hexadecimal RGB renk kodu da olabilir.

    Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

    [​IMG]

    Not: Bazı Web Browser lar yukarıdakilerin haricinde renk adlarını da destekler. Mesela Internet Explorer lightgreen, darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı Browser dan sayfa isteminde bulunmayacağını göz önüne alarak yukarıdaki renk isimlerini ya da hexadecimal renk kodunu kullanmak daha sorunsuz olacaktır.

    Örnek: Daha önce hazırladığımız bir html sayfasının <BODY> etiketini

    HTML:
    <BODY bgcolor="yellow">
    ya da

    HTML:
    <BODY bgcolor="#FFFF00">
    olarak değiştirelim. Arka plan renginin sarı olduğunu görürüz.

    Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR özelliklerinin her ikisine de değer atandığında BACKGROUND resmi gösterilecektir.

    Diğer <BODY> Özelikleri

    TEXT: Metin rengi
    LINK: Ziyaret edilmemiş link rengi
    VLINK: Ziyaret edilen link rengi (vizited link)
    ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükecek olan renktir.
    BGPROPERTIES: Bu özelliğe Fixed değeri atandığında arka plan resmi sabit olup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.

    Örnek: 003_link.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE>
        </HEAD>
        <BODY background="bg.jpg" bgcolor="gray" text="white" link="yellow" vlink="aqua" alink="olive" bgproperties="fixed">
            <H1 align="center">WEB SAYFAMA HOŞGELDİNİZ</H1><HR>
            <H2>KMYO Web Sayfası</H2><HR>
            Sakarya Üniversitesinin Sayfasına Gitmak İçin
            <A href="http://www.sakarya.edu.tr/">Tıklayınız</A><BR>
            Karadeniz eknik Üniversitesinin Sayfasına Gitmek İçin
            <A href="www.ktu.edu.tr/">Tıklayınız</A>
        </BODY>
    </HTML>
    
    Çalışma: Bir sayfayı Browser da gözüktüğü gibi yazarak HTML kodlarını yazmalarını iste.

    Belge Biçim Etiketleri (Document Formatting Tags)

    HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede başlık oluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.

    [​IMG]

    Başlık Etiketlerinin (Header Tags) Kullanımı

    Bu etiketin başında ve sonunda Web Browser (Ağ Tarayıcısı) otomatik olarak satır kırma karakteri kullanır.

    Örnek: 004_header.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Header Etiketleri (004_header.htm)</TITLE>
        </HEAD>
        <BODY>
            <H1>Header 1</H1>
            <H2>Header 2</H2>
            <H3>Header 3</H3>
            <H4>Header 4</H4>
            <H5>Header 5</H5>
            <H6>Header 6</H6>
        </BODY>
    </HTML>
    
    Metin Biçimlendirme Etiketlerinin Kullanımı

    Farklı metin biçimleri kullanmak için bu etiketleri kullanırız.

    HTML satır kırmalarını, sekme karakterlerini, sıralı duran boşluk karakterlerini tek bir boşluk karakteri olarak algılar. Bu yüzden satır kırma için <P> ve <BR> etiketlerini kullanırız.

    Örnek: 005_text.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Metin Biçimleri (005_text.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY>
            <H1>Metin Biçimleri (005_text.htm)</H1>
            <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG>
            <BR>
            <B>Kalın B (Bolt) Gibi Gözüküyor.</B>
            <!--Bir sonraki etiket yatay çizgi oluşturur.-->
            <HR>
            <EM>Vurgu EM (Emphasis) Metni</EM>
            <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>
            <HR>
            <PRE>
            Bu
            Metin
            PRE
            (Preformatted)
            Etiketi
            Kullanılarak
            Yazılan
            Metindir.
            Başka Bir Satır
            ve biraz boşluk<BR>
            </PRE>
            <HR>
            Birkaç Metin Yazalım.
            <BR>Bu Satırdan Önce Bir BR etiketi Var.
            <P>Bu Satırdan Önce P Etiketi Var.</P>
            Birkaç Metin Daha
            <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV>
            Bu Kadar Metin Yeter.
            <HR>
        </BODY>
    </HTML>
    
    <BASEFONT> Etiketi

    Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> un varsayılan font büyüklüğü 3 tür.

    Örnek:

    HTML:
    <BASEFONT size="5" color="red">
    yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı
    olacaktır (aksi belirtilmedikçe).

    <FONT> Etiketi

    Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etiketdir. Bu etiketin bazı özellikleri;

    • Size: Yazı boyutunu temsil eder
    • Color: Yazı rengi

    Örnek: 006_font1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Kaptanın Seyir Defteri</TITLE>
            <META
            http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY bgcolor="#000000" text="#FFFFFF">
            <BASEFONT size="5">
            <H1><IMG src="kaptan.gif" alt="Kaptan" align="absmiddle">Kaptanın
            Seyir Defteri</H1>
            <BR clear="all">
            Sayfamıza
            yukarıdaki
            gibi
            *.gif
            animasyonlar
            da
            yerleştirebiliriz.
            <P>
            <FONT size="3" color="#FF0000">
            Buradaki metin özellikleri size="3" ve color="#FF0000" dir.
            </FONT>
            </P>
        </BODY>
    </HTML>
    
    Not: Microsoft ve Netscape’in Web Tarayıcıları <BASEFONT> ve <FONT> etiketlerinin FACE niteliğini de destekler. FACE özelliğine virgül ile ayrılmış yazı tipleri belirtilir. Bu bildirim HTML 3.2 vaya 4.0 da yoktur.

    <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar

    Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü ayarlamıştık font un size özelliğine +n veya –n değerlerini atayarak mevcut fontun n fazlası veya n eksiği olarak ayarlayabiliriz. <BIG> ve <SMALL> etiketleri da bağlı etiketlerdir. Bu etiketlerle da sırası ile mevcut fontun bir derece büyüğünü ve bir derece küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT size="+1"> ve <SMALL> ile <FONT size="-1"> aynı kullanıma sahiptir.

    Örnek: 007_font2.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Bağlı Fontlar (Relative Fonts)(007_font2.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY>
            <P>Bu normal BODY metnidir.</P>
            <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P>
            <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P>
            <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p>
            <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P>
            <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P>
            <P><SMALL>Bu metin BIG etiketi ile yazılmıştır.</SMALL></P>
            <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p>
            <P><SMALL><SMALL>Bu metin iki tane BIG etiketi ile yazılmıştır.</SMALL></SMALL></P>
        </BODY>
    </HTML>
    
    Listeler Oluşturmak

    Listeler oluşturmak için aşağıdaki iki seçenekten birini kullanabilirsiniz.

    • <UL> :Unordered (Madde İmli) Listeler
    • <OL> :Ordered (Otomatik Numaralı) Listeler

    Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret ederiz. Aşağıdaki örnekte olduğu gibi bir liste içinde alt listeler de oluşturabiliriz.

    Örnek: 008_liste.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Liste Etiketi (008_list.htm)</TITLE>
            <META http-equiv="Content-Type" charset=windows-1254">
        </HEAD>
        <BODY bgcolor="aqua">
            <H2>Karadeniz Bölgesi</H2>
            <H3>
            <UL>
            <LI>Rize</LI>
            <LI>
            Trabzon
            <UL>
            <LI>Sürmene</LI>
            <LI>Araklı</LI>
            <LI>Of</LI>
            </UL>
            </LI>
            <LI>Samsun</LI>
            <LI>Sinop</LI>
            <LI>Artvin</LI>
            </UL>
            </H3>
            <H2>Karadeniz Bölgesi</H2>
            <H3>
            <OL>
            <LI>Gaziantep</LI>
            <LI>Şanlıurfa</LI>
            <LI>Diyarbakır</LI>
            <LI>Mardin</LI>
            </OL>
            </H3>
        </BODY>
    </HTML>
    
    Madde İmli (Unordered) Listenin Type Özelliği

    <UL> etiketinin TYPE özelliğine aşağıdaki değerleri atayarak madde iminin stilini değiştirebilirsiniz.

    • Disc (içi dolu daire, varsayılan değer)
    • Square (İçi dolu kare)
    • Circle (İçi boş çember)

    Buradaki TYPE özelliğini <LI> etiketinde da kullanabilirsiniz.

    Numaralı Liste Özellikleri

    <OL> etiketinin TYPE özelliğine 1, a, A, I ya da i değerlerini atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri “1” dir. Numaralı listenin başlangıç değerini <OL> nin START etiketinden ayarlayabileceğimiz gibi <LI> etiketinin VALUE özelliğinden de ayarlayabiliriz.

    Not: Bunların haricinde <DL></DL> etiketleri ile tanımlanan Definition List adında bir listeleme çeşidi daha vardır. Bu listenin içerisindeki her bir madde <DD></DD> etiketleri arasına yazılır. Maddelerin başında herhangi bir belirteç yoktur.

    Hyperlinks

    Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi kullanılır. <A> etiketini kullanarak;

    • Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki,
    • Başka bir Web Sitesinin bir sayfasına http hyperlinki,
    • Dosya download etmek için bir ftp linki,
    • Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz.

    Basit bir Anchor etiketinin (<A>) yazılışı:

    HTML:
    <A href="protokol:address">Görünecek Olan Metin</A>
    [​IMG]

    Eğer burada protokol adını yazmazsanız http://” (ya da bir web server da kullanmıyorsanız “file:”) olarak alınır.

    Örnek: 009_links.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>KMYO Lİnk Sayfası (009_links.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY bgcolor="yellow" text="blue" link="green" vlink="red" alink="fuchsia">
            <H1>Bazı Sık Kullanılan Linkler</H1>
            <H3>
            <A href="001_first.htm">001_first.htm</A><BR>
            <A href="002_myfirst.htm">002_myfirst.htm</A><BR>
            <A href="003_link.htm">003_link.htm</A><BR>
            <A href="004_header.htm">003_header.htm</A><BR>
            <A href="005_text.htm">005_text.htm</A><BR>
            <A href="006_font1.htm">006_font1.htm</A><BR>
            <A href="http://www.w3.org/TR/REC-html32.html">W3C HTML 3.2 Spec</A>
            </H3>
        </BODY>
    </HTML>
    
    Not: <A> etiketinin TARGET özelliğine “_blank” değerini atayarak linkin yeni bir Web Browser (Ağ Tarayıcısı) penceresin de açılmasını sağlayabiliriz.

    Çalışma: İç içe birkaç klasör açıp dosyaları bu klasörlere koyarak ta bu dosyalara link veriniz. Linklerden bir kısmını yeni pencerede açınız. Yer imi (İngilizce´si: Named Anchor) Kullanımı Yer imi uzun bir dokümanın içerisinde dokümanın belli kısımlarına linkler vermek için kullanılır. Yerimi oluşturmak için;

    • NAME özelliğine bir yer adı yazarak <A name> etiketi oluşturunuz.
    • Başka bir <A> etiketi ile # işareti kullanarak önceki verdiğiniz isme bağlantı oluşturunuz.

    Örnek: 010_anchor.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>KMYO Lİnk Sayfası (009_links.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY bgcolor="yellow" text="blue" link="green" vlink="red" alink="fuchsia">
            <H1><A name="ust">Mevcut Kitaplarımız</A></H1>
            <H3>
            <A href="#sozluk">Bilgisayar Terimleri Sözlüğü</A><BR>
            <A href="#builder">Borland C++ Builder 6</A><BR>
            <A href="#flashmx">Makromedia Flsah MX</A><BR>
            </H3>
            <BR><BR>
            <H2>
            <A name="sozluk">Bilgisayar Terimleri Sözlüğü</A><A href="#ust">Yukarı</A></H2>
            <BR><BR><BR><BR><BR><BR><BR><BR>
            <H2>
            <A name="builder">Borland C++Buiilder 6</A><A href="#ust">Yukarı</A></H2>
            <BR><BR><BR><BR><BR><BR><BR><BR>
            <H2>
            <A name="flashmx">Makromedia Flash MX</A><A href="#ust">Yukarı</A></H2>
            <BR><BR><BR><BR><BR><BR><BR><BR>
        </BODY>
    </HTML>
    
    Web Sayfanızda Grafik Kullanımı

    Web sayfamıza resim eklemek için <IMG> etiketi kullanılır.

    <IMG> Etiketinin Kullanımı

    Sayfaya ekleyeceğimiz resmin kaynağını <IMG src> özelliği ile, resim göstermeyi desteklemeyen tarayıcılarda resim yerine gösterilecek olan metin de <IMG alt> özelliği ile belirtilir.

    Örnek: 011_image1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO (011_image1.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY text="#0000CC">
            <DIV align="center"><IMG src="/amblem.gif" alt="Sakarya Üniversitesi Logosu"></DIV>
            <H1 align="center">Sakarya Üniversitesi
            <BR>
            Karasu Meslek Yüksekokulu</H1>
        </BODY>
    </HTML>
    
    Resim Formatları

    Web de kullanılan iki resim formatı vardır. Bunlar;

    • GIF
    • JPEG

    1. GIF (Graphics Interchange Format) genellikle küçük resimler ya da hareketli animasyonlar için kullanılır. GIF sıkıştırıldığında resmin kalitesinde bozulma olmaz.
    2. JPEG Genellikle büyük ebatlardaki resim formatıdır. JPEG resimlerini sıkıştırdığımız ölçüde kalitesinde azalma olur. Yalnız bu bozulmalar insan gözü ile pek belli olmaz.

    Not: Yeni browserların desteklediği yeni bir üçüncü tip resim formatı da PNG (Portable Network Graphics).

    1. PNG formatı, GIF’in yerine geçebilir. Bu format hakkında daha detaylı bilgi almak için http://www.cdrom.com/pub/png adresine bakabilirsiniz.

    <IMG> Etiketinin Özellikleri

    HTML´in çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri şunlardır;

    1. src: resmin bulunduğu dosya ve yol ismi
    2. alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek olan metindir.
    3. align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir.
    4. hspace: Resmin etrafındaki yatay boşluk
    5. vspace: Resmin etrafındaki dikey boşluk
    6. height: pixel olarak resmin yüksekliği
    7. width: pixel olarak resmin genişliği
    8. border: Resmin etrafındaki çerçeve kalınlığıdır. “0” değeri verilerek çerçeve kaldırılabilir. (Bir resme hyperlink verildiğinde bu iyi bir yoldur. Neden?)

    Align Özelliği

    Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu özelliği kullanırız. Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerleşir.

    1. Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır.
    2. Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır.
    3. Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır.
    4. Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin sağına yerleşir.
    5. Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü üstten itibaren resmin soluna yerleşir.

    Örnek: 012_image2.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO (012_image2.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY text="#0000CC">
            <IMG src="kosk.gif" align="left">
            <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.-->
            <H1>Resmin Align Özelliği</H1>
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
        </BODY>
    </HTML>
    
    <BR clear="all"> Etiketinin Kullanımı

    Bazen align özelliğine verdiğimiz değere göre metin resmin etrafını çevreler. Align özelliğini kaybetmesini istediğimiz yerde <br clear="all"> etiketini kullanırız.

    Örnek: 013_image3.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO (013_image3.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY text="#0000CC">
            <IMG src="kosk.gif" align="left">
            <!--Burada Align özelliğine farklı değerler atayarak durumu görelim.-->
            <H1>Resmin Align Özelliği</H1>
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            <br clear="all">
            <!--Burada clear'a farklı değerler atayarak durumu gözleyelim-->
            Bakalım resimden sonra yazmış olduğumuz metinler nereye yerleştiriliyor.
            Bakalım resimden yerleştiriliyor. Bakalım resimden yerleştiriliyor.
        </BODY>
    </HTML>
    
    Height ve Width Özellikleri

    Resmin boyutlarını pixel olarak bildirmede kullanılır.

    Örnek: 014_image4.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO (014_image4.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY>
            <H2>Orantılı Olark Küçültülürse</H2>
            <IMG src="dikkat.gif" width="200" height="180">
            <IMG src="dikkat.gif" width="100" height="90">
            <IMG src="dikkat.gif" width="50" height="45">
            <H2>Orantısız Olark Küçültülürse</H2>
            <IMG src="dikkat.gif" width="200" height="180">
            <IMG src="dikkat.gif" width="200" height="90">
            <IMG src="dikkat.gif" width="200" height="45">
        </BODY>
    </HTML>
    
    Resim ve Hyperlink’ler

    Bir resme hyperlink eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız.

    Örnek: 015_images.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO (015_images.htm)</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY>
            <A href="011_image1.htm"><IMG src="b1.gif" align="middle" border="0"></A>
            011_image1.htm -- Resim Örneği <br clear="left"><BR>
            <A href="012_image2.htm"><IMG src="b2.gif" align="middle" border="0"></A>
            012_image2.htm -- Resmin Align Özelliği <br clear="left"><BR>
            <A href="013_image3.htm"><IMG src="b3.gif" align="middle" border="0"></A>
            013_image3.htm <BR> etiketinin clear özelliği
            <br clear="left"><BR> <A href="014_image4.htm"><IMG src="b4.gif" align="middle" border="0"></A>
            014_image4.htm -- Width ve Height Özelliği <br clear="left"><BR>
            <A href="015_images.htm"><IMG src="b5.gif" align="middle" border="0"></A>
            015_images.htm -- Sayfanın Kendisi
        </BODY>
    </HTML>
    
    Not: Link ve Vlink rengini gösteren çerçevenin resmimizin etrafında gözükmesini istemiyorsanız <IMG border> özelliğine “0” değerini atarız.

    Image Map

    <IMG usemap> ve <IMG> etiketlerini kullanarak bir resmin belli bölgelerine hyperlink verebiliriz. Çoğu Web Site Geliştirme programları Image Map araçlarına sahiptir.

    Bir resim üzerine harita üç farklı şekilde tanımlanabilir;

    • Rect (Dikdörtgensel)
    • Circle (Dairesel)
    • Poly (Çokgensel)

    <MAP> Etiketi

    Etiketi resmin üzerinde tıklanabilir alanlar ve tıklandığında gideceği hedef tanımlanır. Bu etiketin NAME özelliğine bir isim verilir ki bu isim daha sonra haritaya başvuru yapmada kullanılır.

    <AREA> Etiketi

    <AREA> etiketi ile <MAP> etiket bloğunun arasında tıklanabilir alanlar ve hedef linkler tanımlanır. <AREA> etiketinin özellikleri;

    1. SHAPE: Tıklanabilir alanın şeklini belirttiğimiz özellik. Recti Circ, Poly değerlerini alabilir.
    2. COORDS: Bu özelliğe de şeklin koordinatlarını atarız.
    3. HREF: Bu özelliğine de hedef Web Sayfasını belirtiriz.

    COORDS Özelliği

    Şekil rect ise; dikdörtkenin sol üzt köşesi ve sağ alt köşesinin koordinatları sıra ile yazılır.
    Şekil circ ise; çemberin merkesinin koordinatı ve daha sonra pixel olarak yarıçapı yazılır.
    Şekil poly ise; herhangi bir noktadan başlanıp teker teker koordinatlar sıra ile yazılır.

    [​IMG]

    Son olarak <IMG> etiketinin usemap özelliğine haritanın adı yazılarak haritaya çağrı yapılır.

    Örnek: 016_map.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Untitled Document</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <MAP name="harita">
        <AREA shape="rect" coords="62,93,96,128" href="011_image1.htm" alt="011_image1.htm">
        <AREA shape="poly" coords="52,187,60,166,81,159,110,189,77,188,89,201,65,203" href="012_image2.htm" alt="012_image2.htm">
        <AREA shape="circle" coords="119,153,22" href="013_image3.htm" alt="013_image3.htm">
        </MAP>
        <BODY>
            <IMG src="map.jpg" width="232" height="308" usemap="#harita" border="0">
        </BODY>
    </HTML>
    
    Sorular

    1. HTML sayfası hangi tagla başlayıp hangi tagla biter?
    2. <BODY> etiketinin B-bgcolor ile background özellikleri arasında ne fark vardır?
    3. D/Y: <EM> etiketini metni kalın yapmada kullanırız.
    4. D/Y: <LI> etiketi madde imli ya da numaralandırılmış etiketler oluşturmada kullanılır.
    5. Anchor etiketini kullanarak “Linkler sayfamıza gitmek için tıklayınız.” metnini hyperlink ile links.htm dosyasına bağlayınız.
    6. Image etiketini kullanarak “book.jpg” resmini “Bir Kitap Resmi” alternatif metni ile sayfaya yerleştiriniz.

    Cevaplar

    1. <HTML> ile başlar </HTML> ile biter.
    2. BGCOLOR arkaplan rengini belirtmede, BACKGROUND da arkaplan resmini belirtmede kullanırız.
    3. Yanlış. <EM> etiketi metni italik yazmada kullanılır.
    4. Doğru.
    5. <A href=links.htm>Linkler Sayfamıza Gitmek İçin Tklayınız</A>
    6. <IMG src="boks.jpg" alt="Bir Kitap Resmi">

    Uygulama

    Bu uygulama çalışmasında 4 çalışma yapılacak Bunlar:

    • Basit bir Web Sayfası yapımı,
    • HTML biçimlendirme etiketlerinin kullanımı,
    • Hyperlinkler oluşturma,
    • Web Sayfasına grafik ekleme.

    Bu işlemleri yapmak için şimdiye kadar tüm öğrendiklerinizi kullanarak kendinizi tanıtan ve en az 3 sayfadan oluşan bir Web Sitesi hazırlayınız.

    İleri HTML

    Özel Karakterler

    HTML metin içerisine özel karakterleri yazmak için aşağıdaki format kullanılır.

    xxx ISO karakter kodu olmak üzere;

    &#xxx;

    şeklindedir. Örneğin copyright sembolü için “&#169;” yazılır.

    Buna ilaveten HTML çok sık kullanılan bazı özel karakterler için aşağıdaki gibi kısa yola sahiptir.

    HTML:
    &nbsp; <!-- non-breaking space ( ) -->
    &quot; <!-- quote character (“) -->
    &lt; <!-- less-then charakter (<) -->
    &gt; <!-- greater-then charakter (>) -->
    &amp; <!-- ampersand charakter (&) -->
    &copy; <!-- copyright symbold charakter (©) -->
    
    Tablo Oluşturma

    Tablooluşturmak için HTML de beş etiket vardır. Bu etiketler;

    [​IMG]

    Örnek: 017_table1.htm

    Aşağıdaki HTML etiketleri 6 satır ve 3 sütundan oluşan tablo oluşturur.

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Ürünler Sayfası</TITLE>
            <META http-equiv="Content-Type" charset=windows-1254">
        </HEAD>
        <BODY background="bg.jpg" text="#FFFFFF">
            <TABLE border="2">
                <CAPTION><B>Kampanya Ürünlerimiz</B></CAPTION>
                <TR><TH>Ürünler</TH>
                <TH>Açıklama</TH>
                content="text/html;24
                <TH>Fiyatı</TH></TR>
                <TR><TD>17&#8220; LG (Goldstar) Monitör</TD>
                <TD>Peşin Fiyatına 5 taksit</TD>
                <TD>$300</TD></TR>
                <TR><TD>HP Dijital Fotoğraf Makineleri</TD>
                <TD>Dijital sözlük hediyeli</TD>
                <TD>$200</TD></TR>
                <TR><TD>Sony Hi8 Kamera</TD>
                <TD>Kampanyada son 10 gün</TD>
                <TD>$700</TD></TR>
            </TABLE>
        </BODY>
    </HTML>
    
    Not: Tablo içerisinde istediğiniz formatlama etiketlerini kullanabilirsiniz.

    <TABLE> Etiketi

    <TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir.

    [​IMG]

    Örnek: 018_table2.htm

    Yukarıdaki örnekteki <TABLE> etiketini aşağıdaki gibi değiştirelim.

    HTML:
    <TABLE border="2" width="80%" cellspacing="10">
    Yukarıdaki gibi CELLSPACING değeri BORDER dan daha büyükse. Browser BORDER’ı CELLSPACING’e uydurur.

    <TR> Etiketi

    <TR> etiketi iki tane özelliğe sahiptir. Bunlar;

    [​IMG]

    <TH> ve <TD> Etiketleri

    Tablo Başlığı (Table Header=TH) ve Tablo Verisi (Table Data=TD) etiketlerinin özellikleri;

    [​IMG]

    Örnek: 019_table3.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Ürünler Sayfası</TITLE>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1254">
        </HEAD>
        <BODY background="bg.jpg" text="#FFFFFF">
            <TABLE align="center" border="2" width="80%">
                <CAPTION><B>Fiyat Listesi</B></CAPTION>
                <TR>
                <TH rowspan="2" width="50%">Ürünler</TH>
                <TH colspan="2">Fiyat</TH>
                </TR>
                <TR>
                <TH width="15%">Toptan</TH>
                <TH width="15%">Perakende</TH>
                </TR>
                <TR>
                <TD>HP Dijital Fotoğraf Makineleri</TD>
                <TD align="center"><I>$500</I></TD>
                <TD align="center">$600</TD>
                </TR>
                <TR>
                <TD>Goldstar (LG) 17&quot; Monitör</TD>
                <TD align="center"><I>$250</I></TD>
                <TD><CENTER>$300</CENTER></TD>
            </TR>
        </TABLE>
        </BODY>
    </HTML>
    
    Sayfa Biçimlendirmede Tablo Kullanımı

    HTML´in en büyük avantajlarından biri de ekstra boşlukları ve carriage return (satır kırma, paragraf, sekme vs.) karakterleri kaldırarak sayfayı otomatik olarak biçimlendirmesidir. Maalesef bu durum aynı zamanda en büyük problemdir. Sayfanın şeklini ayarlarken metinleri istediğimiz yerlere konumlandıramayız. Neyse ki bunun için tabloları kullanabiliriz.

    Örnek: 020_home.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karasu MYO Ana Sayfa</TITLE>
        </HEAD>
        <BODY background="bg2.gif">
            <TABLE border="0">
                <TR>
                <TD width="10"><IMG src="amblem.gif" alt="SAU Logo"></TD>
                <TD>
                <H1>Sakarya Üniversitesi Karasu Meslek Yüksekokulu</H1>
                </TD>
                <TD><FONT size="2"><A href="hakkinda.htm">
                Web Sitemiz Hakkında</A></FONT>
                </TD>
                </TR>
                <TR>
                <TD width="10"><A href="ogrenciler.htm">Öğrenciler</A></TD>
                <TD colspan="2">Yükesek okulumuzda Bilgisayar Teknolojisi ve Programlama, Turizm ve Otel İşletmeciliği ve Muhasebe Programları bulunmaktadır.
                </TD>
                </TR>
                <TR>
                <TD><A href="okulumuz.htm">Okulumuz</A></TD>
                <TD colspan="2"> <FONT size="5" color="#FF0000"> Karasu
                </FONT> </TD>
                </TR>
                <TR>
                <TD><A href="personel.htm">Personel</A></TD>
                <TD colspan="2">
                <UL>
                <LI>Oteller ve Pansiyonlar</LI>
                <LI>Tarihi Yerler</LI>
                <LI>Deniz ve Kum</LI>
                </UL>
                </TD>
                </TR>
                <TR>
                <TD><A href="mailto:kmyo@sakarya.edu.tr"> E-Mail Göner </A>
                </TD>
                </TR>
                <TR>
                <TD></TD>
                <TD><FONT size="2">Bu WEB sayfası Karasu MYO öğrencileri tarafından yapılmıştır.</FONT>
                </TD>
                </TR>
            </TABLE>
        </BODY>
    </HTML>
    
    Yukarıdaki gibi bir sayfayı oluşturmanın bir başka yöntemi ise frame (yani çerçeve) kullanmaktır.

    Frame (Çerçeve) Kullanımı

    HTML çerçevelerini (frame) kullanarak çok pencereli sayfalar oluşturabiliriz. Çerçeveler HTML 3.2 nin bir standardı değildir. Fakat web tarayıcılarının hemen hemen hepsi destekler.

    Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz.

    [​IMG]

    <FRAMESET> Etiketi

    Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET> ve <FRAME> etiketlerini kullanırız. <FRAMESET> etiketini kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz.

    <FRAMESET> etiketi iki tane özelliğe sahiptir;

    • COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler
    • ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler.

    Aşağıdaki üç metottan birini kullanarak satır ve sütunları tanımlayabiliriz.

    • Sayfa yüksekliği ve genişliğinin bir yüzdesi olarak (“50%” gibi)
    • Piksel cinsinden sabit bir sayı ile (“100” gibi)
    • Kullanılabilir boşluğun kalanını kullanarak (“*” ile)

    Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır.

    HTML:
    <FRAMESET COLS="100,100,*">
    Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde.

    HTML:
    <FRAMESET COLS="100,30%,*">
    Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü de kalan boşluğun tamamı büyüklüğünde.

    HTML:
    <FRAMESET ROWS="20%,*,30%">
    Dört satırlı çerçeve; birincisi web tarayıcısının %20´si yüksekliğinde, ikincisi kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30´u yüksekliğindedir.

    Not: <FRAMESET> etiketi <BODY> ve <HEAD> kullanılması nedeni ile diğer çoğu etiketlerden farklıdır.

    <FRAME> Etiketi

    <FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da <FRAME> etiketi ile yaparız. Özellikleri;

    [​IMG]

    <FRAMESET> etiketinin içerisinde her bir satır ya da sütun çerçeve için <FRAME> etiketini kullanmak gerekir.

    Örnek: 021_frame1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Frameset Örneği</TITLE>
        </HEAD>
        <!--Sütunları Tanımıyoruz...-->
        <FRAMESET cols="33.33%,33.33%,*">
        <!--Tanımladığımız Sütunları Sayfalarla dolduruyoruz...-->
        <FRAME src="021_left.htm" name="leftFrame" >
        <FRAME src="021_main.htm" name="mainFrame">
        <FRAME src="021_right.htm" name="rightFrame">
        </FRAMESET>
        <NOFRAMES>
        <BODY>
            <p>Web Tarayıcınız Frame i Desteklemiyor...</p>
        </BODY>
        </NOFRAMES>
    </HTML>
    
    Örnek: 021_page1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Sol Çerçeve</TITLE>
        </HEAD>
        <BODY bgcolor="#FFFF00">
            <DIV align="center">
                <H1>Sarı Çerçeve</H1>
            </DIV>
        </BODY>
    </HTML>
    
    Örnek: 021_page2.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Kırmızı Çerçeve</TITLE>
        </HEAD>
        <BODY bgcolor="#FF0000">
            <DIV align="center">
                <H1>Kırmızı Çerçeve</H1>
            </DIV>
        </BODY>
    </HTML>
    
    Örnek: 021_page3.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Untitled Çerçeve</TITLE>
        </HEAD>
        <BODY bgcolor="#0000FF">
            <DIV align="center">
                <H1>Mavi Çerçeve</H1>
            </DIV>
        </BODY>
    </HTML>
    
    Biraz daha karmaşık bir örnek verelim. Bir sayfada hem satır hem de sütun çerçeve bulunabilir.

    Örnek: 022_frame2.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Karışık Çerçeve</TITLE>
        </HEAD>
        <!--Sütunları Tanımlıyoruz...-->
        <FRAMESET cols="137,*" framespacing="0" frameborder="NO" border="0">
        <!--1. Sütunu Sayfa ile dolduruyoruz...-->
        <FRAME src="022_left.htm" name="leftFrame" >
        <!--2. Sütuna Satırlar Tanımlıyoruz...-->
        <FRAMESET rows="102,*" cols="*" framespacing="0" frameborder="NO" border="0">
        <!--2. Sütundaki Satırları Sayfalarla Dolduruyoruz...-->
        <FRAME src="022_top.htm" name="topFrame" scrolling="NO" noresize >
        <FRAME src="022_main.htm" name="mainFrame"></FRAMESET>
        </FRAMESET>
        <NOFRAMES>
        <BODY>
        </BODY>
        </NOFRAMES>
    </HTML>
    
    Yukarıda ki örnekteki sayfaları çerçevelere yerleştirirsiniz...

    <A> Anchor Etiketinin Target Özelliği

    Normalde bir linke tıkladığınızda hedef belge önceki ile yer değiştirilerek mevcut tarayıcıda gösterilir. Fakat çerçevelerle çalışırken hedef dosyanın hangi çerçevede gösterileceğini belirtmeliyiz. Bunun için de <A> etiketinin TARGET özelliği kullanılır. Kullanımı:

    HTML:
    <A href= "sayfa.htm" target="çerçeve_adı">Gözükecek Nesne</A>
    TARGET özelliğinin alacağı değerler;

    _blank : Sayfayı yeni bir pencerede açar.
    _top : Sayfayı çerçeveleri kullanmadan mevcut pencereyi kaplayarak açar.
    _self : Sayfayı aynı çerçeve içinde açar. Varsayılan budur.
    _parent : _top ile aynı işleve sahiptir.

    Çalışma: Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol çerçevede linkler olacak ve target özelliğinin farklı değerleri bu örnek üzerinde denenecek...

    <NOFRAME> Etiketi

    Eğer Web Tarayıcısı FRAME´i desteklemiyorsa alternatif gösterilecek sayfa bu etiket arasında oluşturulacak olan <BODY> etiket bloğuna yazılır.

    <IFRAME> Etiketi

    Bu tag ile HTML kodları arasına bir çerçeve açılıp bu çerçeve de başka bir sayfa gösterilebilir.

    Özellikleri:

    [​IMG]

    Örnek:

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Örnek</TITLE>
        </HEAD>
        <BODY>
            <IFRAME src="021_frame1.htm" align="center" width="500" frameborder="1" scrolling="yes">
            </IFRAME>
        </BODY>
    </HTML>
    
    HTML Formları

    HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir. Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de kullanabiliriz.

    <FORM> Etiketi

    HTML belgemizde formlar <FORM> ve </FORM> etiketleri arasında oluşturulur. Özellikleri:

    [​IMG]

    Kontrol Tipleri

    HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur.

    [​IMG]

    <INPUT> Etiketi

    Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi özelliklere sahip olduğu be bu özelliklerinin anlamları:

    [​IMG]

    <TEXTAREA> Etiketi

    Çok satırlı metin kutusu oluşturmada kullanılır.

    HTML:
    <TEXTAREA name="adi" rows="m" cols="n">
        Sayfa yüklendiğinde kontrolde gözükecek olan metin
    </TEXTAREA>
    
    Özellikleri:

    [​IMG]

    <SELECT> ve <OPTION> Etiketleri

    Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur.

    Kullanımı:

    HTML:
    <SELECT name="adı" size="n">
        <OPTION value="değer1"> Gözüken Metin1</OPTION>
        <OPTION value="değer2"> Gözüken Metin2</OPTION>
    </SELECT>
    
    Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan budur) ComboBox (Drop-Down Menu) stilinde gözükecektir.

    <SELECT> Özellikleri:

    [​IMG]

    <OPTION> Özellikleri:

    [​IMG]

    Örnek: 023_form1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Müşteri Kayıt Formu</TITLE>
        </HEAD>
        <BODY background="bg.jpg" text="#FFFF00">
            <H2><FONT color="#FF0001">Müşteri Kayıt Formu</FONT></H2>
            <H3>
            <FORM action="hedefdosya.htm" method="post" name="frmMusteri">
            <TABLE>
                <TR>
                <TD> <B>Adı : </B></TD>
                <TD><INPUT type="text" name="txtAdi" size="30"></TD>
                </TR>
                <TR>
                <TD><B>Soyadı : </B></TD>
                <TD><INPUT type="text" name="txtSoyadi" size="30"></TD>
                </TR>
                <TR>
                <TD><B>E-Mail : </B></TD>
                <TD><INPUT type="text" name="txtEmail" size="30"></TD>
                </TR>
                <TR>
                <TD><B>Adres : </B></TD>
                <TD><INPUT type="text" name="txtAdres" size="43"></TD>
                </TR>
                <TR>
                <TD><B>Şehir, Ülke, Posta Kodu : </B></TD>
                <TD><INPUT type="text" name="txtSehir" size="20"> &nbsp;
                <INPUT type="text" name="txtUlke" size="20">
                &nbsp;
                <INPUT type="text" name="txtPostaKodu" size="10"> </TD>
                </TR>
                <TR>
                <TD><B>Açıklama : </B></TD>
                <TD><TEXTAREA name="textareaAciklama" rows="2" cols="30">Buraya Herhangi Bir Açıklama Yazınız.</TEXTAREA></TD>
                </TR>
                <TR>
                <TD><B>Yaş : </B></TD>
                <TD><SELECT name="cboxYas" size="1">
                <OPTION value="0"> 0 - 11</OPTION>
                <OPTION value="1">12 - 19</OPTION>
                <OPTION value="2">20 - 29</OPTION>
                <OPTION value="3">30 - 39</OPTION>
                <OPTION value="4">40 + </OPTION>
                </SELECT></TD>
                </TR>
                <TR>
                <TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz? : </B></TD>
                <TD><INPUT type="radio" name="radMailListesi" checked value="evet"> Evet
                <INPUT type="radio" name="radMailListesi" value="hayir"> Hayır </TD>
                </TR>
                <TR>
                <TD><INPUT type="submit" name="kaydet" value="Kaydet"></TD>
                <TD><INPUT type="reset" name="temizle" value="Temizle"></TD>
                </TR>
            </TABLE>
            </FORM></H3>
        </BODY>
    </HTML>
    
    Uyarı: Formlar, server-side (sunucu-tarafı) CGI veya ASP programlarına teslim edilirler. Dolayısıyla bu formları ileride ASP programlarında test edeceğiz.

    CSS (Cascading Style Sheets) Kullanımı

    <SPAN> Etiketi

    Bu etiket stilsiz kullanılırsa hiçbir etkisi yoktur. CSS kullanılarak metinler üzerinde biçimlendirme yapabiliriz. Örneğin bu etiket ile bir resmi hareket ettirebiliriz.

    Örnek: 024_span1.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Untitled Document</TITLE>
            <SCRIPT language="JavaScript">
                function renk()
                {
                metin.style.color='red';
                }
            </SCRIPT>
        </HEAD>
        <BODY>
            <SPAN id="metin" onClick="renk()">Tıklayınız.</SPAN><BR>
            <!-- position:static,relative,absolute -->
            <SPAN style="position:absolute;width:200px;height:150px;left:50px;top:5 0px;z-index:1">
            <IMG src="bg.jpg"></SPAN>
        </BODY>
    </HTML>
    
    Yukarıdaki position özelliğinin değerleri: Katmanı,

    • absolute: Sayfa elemanları dikkate alınmadan belirtilen konuma yerleştirir.
    • static: Kendinden önce kelen sayfa elemanından hemen sonra yerleştirir.
    • relative: Kendinden önce gelen sayfa elemanını orjin olarak alıp yerleştirir.

    Örnek: 025_span2.htm

    HTML:
    <HTML>
        <HEAD>
            <TITLE>Katmanlar</TITLE>
        </HEAD>
        <BODY>
            <SPAN id="katman1" position:absolute; width:200px; top:50px; z-index:1">
                <H1>Bu Metin 1. Katmanda</H1>
            </SPAN>
            <SPAN id="katman2" position:abslolute; width:200px; top:150px; z-index:2">
                <H1>Bu Metin 2. Katmanda</H1>
            </SPAN>
        </BODY>
    </HTML>
    
    Sorular

    1. <TR>, <TH> ve <TD> etiketlerini karşılaştırınız.
    2. <TABLE> etiketinin bir özelliğini yazıp ne işe yaradığını açıklayınız.
    3. Çerçeveyi desteklemeyen tarayıcıların alternatif bir sayfa göstermesi için ne yapılır.
    4. Kullanıcı tarafından şirket ismi girilen ve adı sirket olan maksimum 30 karakter uzunluğunda ve gösterilen karakter uzunluğu 20 olan bir form kontrolü yazınız.
    5. Adı color olan sırası ile 1, 2 ve 3 değerler ile kırmızı, yeşil ve mavi renklerini içeren çoklu seçime izin veren üç satırlı form kontrolünü tanımlayınız. (ListBox)

    1.​

    a. <TR> :Satır oluşturur. (Table Row)
    b. <TH> :Satırda başlık hücreleri oluşturur. (Table Header)
    c. <TD> :Satırda veri hücresi oluşturur. (Table Data)​

    2. align, width, border,cellpadding, cellspacing
    3. <NOFRAME> </NOFRAME> etiketleri arasına alternatif sayfa hazırlanır
    4. <INPUT type="text" name="sirket" maxlength=30 size=20>
    5.​

    HTML:
    <SELECT name="color" size="3" multiple>
        <OPTION value="1">Kırmızı</OPTION>
        <OPTION value="2">Yeşil</OPTION>
        <OPTION value="3">Mavi</OPTION>
    </SELECT>
    
    Uygulama

    1) Aşağıdaki tablonun HTML kodlarını yazınız:

    [​IMG]

    2) Aşağıdaki çerçeveli sayfayı oluşturunuz:

    [​IMG]
     
  2. AHMED CEMÂL Guest

    • Guest
    Katılım:
    10 Haziran 2019
    Mesaj:
    101
    Alınan Beğeniler:
    234
    Meslek:
    Elektronik İletişim & Haberleşme

    Özel Mesaj
    Eline sağlık. Güzel paylaşım, umarım yararlı olur. Fakat konuyu yanlış bölüme açmışsınız. yesevi Binbaşım uygun bölüme taşıyabilir miyiz?
     
    1Kara-Melek1, Orion-Pax ve megalanya bunu beğendi.
  3. ZYN3V4N Guest

    • Guest
    Katılım:
    25 Kasım 2019
    Mesaj:
    40
    Alınan Beğeniler:
    38

    Özel Mesaj
    Devrem elinize kolunuza sağlık çok güzel ve yararlı bir paylaşım olmuş. Başarılarınızın devamını dilerim. :)
     
    megalanya bunu beğendi.
    • Guest
    Katılım:
    14 Kasım 2018
    Mesaj:
    767
    Alınan Beğeniler:
    1,054

    Özel Mesaj
    Eline emeğine sağlık.
    Çok güzel ve yararlı bir konu.
    HTML web programlama için çok önemli.
    Ayrıntılar gayet.
    Anlatacak çok şey var.
    Shtml'i unutmamak lazım.
     
    Orion-Pax ve megalanya bunu beğendi.
  4. megalanya Guest

    • Guest
    Katılım:
    19 Şubat 2016
    Mesaj:
    347
    Alınan Beğeniler:
    219
    Meslek:
    Öğrenci

    Özel Mesaj
    Komutanım diğer bölümlere konu açamıyorum. “(Buraya mesaj gönderme yetkiniz yok.)” şeklinde bir hata alıyorum.
     
  5. Transferci Guest

    • Guest
    Katılım:
    27 Kasım 2019
    Mesaj:
    6
    Alınan Beğeniler:
    1

    Özel Mesaj
    Vallahi elinize saglik. HTML5 artik daha fazla kunlaniliyor ama baslangic icin cok iyi. hacklemeyi ogrenmek icin HTML-CSS-PHP-Java-C en onemmli diler. Keske herkez bizim gibi bunlari ogrense. Tekrardan elinize saglik bunu ogrencilerime gondermem serbestmi ? ben 4 kisiyi egitiyorumda o yuzden sordum(forum disinda). tabiki yayinlama dersen burada kalir.
     
    megalanya bunu beğendi.

Bu Sayfayı Paylaş