Dr. Erkan TANYILDIZI Ders Notları

Dr. Erkan TANYILDIZI Ders Notları
Web TASARIMI-HTML Dr. Erkan TANYILDIZI Ders Notları

İNTERNET NEDİR ?

Internet Nedir? Internet, birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır. Internet, insanların her geçen gün gittikçe artan "üretilen bilgiyi saklama/paylaşma ve ona kolayca ulaşma" istekleri sonrasında ortaya çıkmış bir teknolojidir.

Internet Nedir? İnsanların kendi arasında etkileştiği, bilgi değiş-tokuşu yapabildiği ve kendi yazısız kuralları olan büyük bir topluluktur. Pek çok yararlı bilginin bir tuşa basmak kadar yakın olduğu dev bir kütüphanedir.

Internet Nedir? Kişilerin değişik konularda fikirlerini serbestçe söyleyebilecekleri ortamlar barındıran bir demokrasi platformudur. Evden alış-veriş, bankacılık hizmetleri, radyo-televizyon yayınları, günlük gazete servisleri vb gibi uygulamaları ile aslında internet aynı zamanda bir hayat kolaylaştırıcıdır.

İnternet adreslerindeki uzantılar
.com : ticari kurumlar .gov : devlet kurumları .net : internet servis sağlayıcıları .org : kar amacı gütmeyen kuruluşlar, dernekler .mil : askeri kurumlar .edu : üniversiteler, eğitim kurumları .k12 : ilkokul, lise vb eğitim kurumları .ac : akademik kurumlar .int : uluslararası kurumlar .arts : sanat ve kültür kurumları .firm : ticari firmalar .info: bilgi servisi sunan siteler .nom : kişisel .name : kişisel .rec : eğlence siteleri .stor : alışveriş siteleri

İnternet adreslerindeki uzantılar
Bazı ülke kısaltmaları: tr:Türkiye, jp:Japonya, uk:Ingiltere, it:İtalya, ch:Isviçre, ca:Kanada, ru:Rusya, id:Endonezya, nl:Hollanda, de:Almanya, fr:Fransa, il:İsrail, no:Norveç, se:İsveç, br:Brezilya,

Bazı Internet Terimleri
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.

Intranet 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 kontrol edilen oldukça basit bir işaretleme dilidir.

URL (Uniform Resource Locator) Internet üzerideki adreslerin genel adıdır. ü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. HTTP (Hyper Text Transfer Protocol) HTML sayfalarının Web tarayıcınıza aktarılmasında kullanılan protokoldür.

E-Posta Elektronik mektup ( ), kişilerin ve kuruluşların internet üzerinden hızlı bir biçimde haberleşmesi için kullanılan bir sistemdir. E-posta almak için POP3 ya da IMAP protokolü kullanılır. POP3 (Post Office Protokol) Elektronik posta almakta kullanılan bir protokoldür. Oldukça geniş kullanımı olan POP tek bilgisayar kullanımında en iyisidir çünkü offline mesaj erişimini desteklemektedir, mesajlar önce istemciye çekilmekte sonra sunucudan silinmektedir.

IMAP(Internet Mail Access Protocol) e-posta sunucunuzdaki e-postalarınıza erişebilmeniz için kullanılan bir metottur. Başka bir deyimle istemcide çalışan bir e-posta programının uzaktaki e-postaları sanki istemcideymiş gibi erişimine izin verir. Örneğin, IMAP sunucuda saklanan e-postalarınıza evinizdeki kişisel bilgisayarınızdan, işyerinizdeki iş istasyonundan ya da seyahatte diz üstü bilgisayarınızdan mesajlarınızı bu bilgisayarlar arasında transfer etmeden ulaşabilirsiniz.

SMTP( Server Mail Transfer Protocol) E-posta gönderme protokolü (SMTP), bir e-posta göndermek için sunucu ile istemci arasındaki iletişim şeklini belirleyen protokoldür Outlook, Eudora, Kmail, Thunderbird, Evolution, Sylpheed gibi e-posta istemcileri, e-postalarınızı gönderilmek üzere sunucunuza iletirken SMTP servisinden faydalanırlar.

FTP (File Transfer Protocol) Internet üzerinden dosya aktarımını sağlayan protokoldür. Örneğin ftp://arsiv.firat.edu.tr Üniversitemizin arşiv FTP sinin URL sidir. Telnet Internet ağı üzerindeki çok kullanıcılı bir makineye uzaktaki başka bir makineden bağlanmak için geliştirilen bir TCP/IP protokolü ve bu işi yapan programlara verilen genel isimdir. Örnek olarak Telnet ile bir pop3 sunucuya bağlanıp mailleri okuyabilir veya bir ftp sunucuya bağlanıp ftp klasörlerini araştırabilirsiniz.

ISP (Internet Service Provider) Internet Servis Sağlayıcı Kişiler öncelikle bir ISP'den aldıkları kullanıcı adı ve şifresiyle Internet'e bağlanırlar. Bu bağlantı ISP firmaları (Örneğin Superonline,TTNET gibi) tarafından belli bir ücret karşılığında satılır. 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; Web Browser (Client: İstemci) Web Server (Server: Sunucu)

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

Web Nasıl Çalışır

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: <B>HTML</B> bir metin işaretleme dilidir. Yukarıdaki örnekte HTML koyu olarak yazılacaktır.

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)

HTML Versiyonları Cascading Style Sheets (CSS) Dynamic HTML (DHTML)
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 (Uzantıları)
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 Genişletilebilir İşaretleme Dili
XML Internet’teki en yeni dillerdendir. XML “Verilerde yapı belirtmek için ortak bir yazım şekli” olarak ifade edilebilir. 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 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 gibi yardımcı programlar da vardır. Metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörlerdir. 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 görsel, kodlamayla uğraştırmayı gerektirmeyen editörler dir. Bunlar; Fusion Visual Page Dreamweaver, Flash FrontPage

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

HTML’E GİRİŞ

HTML (HyperText Markup Language) Nedir?
HTML(Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi diyebiliriz.

Bir Web Sayfasının Genel Yapısı
<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 sayfaya ekler. Yani yazmasak ta olur. Case-Insensitive: HTML büyük küçük harfe 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; İLK ETİKET SON ETİKET AÇIKLAMA <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 eklemede kullanılır.

İlk sayfam Notepad'i açın ve şunları yazın:
Dosyayı “sayfa1.htm” olarak kaydedin.

İlk sayfam Sayfa1.htm dosyasını açtığınızda varsayılan browserınız (Internet Explorer, Netscape Navigator gibi) tarafından görüntülenecektir.

Etiket Özellikleri (Tag Attributes)
Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin davranışını düzenlemek için değerler atarız. Kullanımı; <ETİKET özellik1=”value” özellik2=”value”> Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P> etiketi yeni bir paragraf başlatır ve varsayılan olarak metni sola yazlar. <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>

İlk sayfam Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim: Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.

İlk sayfam Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor. İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.

<HTML> Etiketi Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. <HEAD> Etiketi Bu etiket içerisinde yazılan sayfada gözükmezler. Web sayfası ile ilgili temel özellikler, Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi, burada tanımlanır. Kısaca head kısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu etiket genellikle sadece <TITLE> ve </TITLE> etiketlerini <META> etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini içerir.

<TITLE></TITLE> <TITLE> satırında Internet Explorer (=IE) programına sayfaya başlık verilmek istendiği işaret edilmektedir. IE <TITLE> ve </TITLE> arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler <HEAD></HEAD> deyimleri arasına yeralır.

<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

<BODY> Etiketi 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.

<BODY BACKGROUND= “resim.gif” ></BODY> Örnek: <HTML> <HEAD> <TITLE> Ornek08.html</TITLE></HEAD> <BODY BACKGROUND=”File:///a:/resimler/artalan.gif”>  <B> Erkan TANYILDIZI</B> </BODY> </HTML>

<BODY> Etiketi 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.

<BODY BGCOLOR =”renk”>…..</BODY> Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

<BODY BGCOLOR =”renk”>…..</BODY> 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.

<BODY BGCOLOR =”renk”>…..</BODY> Örnek: Daha önce hazırladığımız bir html sayfasının <BODY> etiketini <BODY bgcolor=”yellow”> ya da <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.

Diğer <BODY> Özelikleri Örnek: <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="red" bgproperties="fixed"> <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1> <HR> <H2>Web Sayfası</H2> <HR> Fırat Üniversitesinin Sayfasına Gitmek İçin <A href=" <BR> Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin <A href=" <BR> Arama motoru <A href=" <BR> </BODY> </HTML>

Diğer <BODY> Özelikleri Örnek:

<HR> Etiketi <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE> Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır. WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder. SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır. COLOR : Çizginin rengi. NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay çizginin gölgesi ortadan kalkar.

<HR> Etiketi Örnek <HTML> <HEAD><TITLE>Ornek09.html</TITLE></HEAD> <BODY BGCOLOR=#66CCFF> <HR> <HR WIDTH=75% NOSHADE> <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE> <HR COLOR=Red WIDTH=100 SIZE=3> <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE> </CENTER> </BODY> </HTML>

Metin Biçimleme

Belge Biçim Etiketleri (Document Formatting Tags)

Belge Biçim Etiketleri
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.

İLK ETİKET SON ETİKET AÇIKLAMA <H1>...<H2> </H1>...</H2> Header Tags: Başlık etiketleridir. 1 numaralısı en geniş olanıdır. Varsayılan hizalama (align) sol (left) olup istersek değiştirebiliriz. <STRONG> </STRONG> Strong Emphasis: Güçlü Vurgu Ediketidir. Genellikle Bold kalın metin olarak gözükür. <EM> </EM> Emphasis: Vurgu Etiketi. Genellikle italik gözükür. <B> </B> Bold: Kalın yazı <I> </I> Italic: İtalik yazı <U> </U> Underline: Altçizgili yazı <SUP> </SUP> Bu iki deyim arasına yazılan metin üst indis olarak işlem görür. <SUB> </SUB> Bu iki deyim arasına yazılan metin alt indis olarak işlem görür.

İLK ETİKET SON ETİKET AÇIKLAMA <PRE> </PRE> Preformatted: Metni Courier fontu gibi her bir karakteri aynı genişlikte gösterir. Bu tip fontlara font-pitch denir. Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken <BR> deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır. <P> </P> Paragraph: Paragraf etiketi. Kapatma etiketi kullanılmaya bilir. Align değeri varsayılan olarak left olup bu etiket bloğundan önce ve sonra bir satır boş bırakılır. <DIV> </DIV> Division: Bölüm Etiketi. Sayfada yeni bir bölüm açmada kullanılır. Align özelliğinin varsayılan değeri left olup P etiketinde olduğu gibi bloktan önce ve sonra boş satır yoktur.

İLK ETİKET SON ETİKET AÇIKLAMA <CENTER> </CENTER> Arada yazılan metni ortalamada kullanılır. Bunun yerine <DIV align=”center”> </DIV> de kullanılabilir. <BR> yok Line Break: Satır kırma etiketi. <HR> Horizontal Rule: Yatay çizgi etiketi <BASEFONT> Sayfanın genel metin büyüklüğünü ve rengini değiştirmede kullanılır. size, color özellikleri vardır. <FONT> </FONT> Bir metin bloğunun büyüklüğünü, rengini ve biçimini ayarlamada kullanılır. <BIG> </BIG> Kullanıldığı alanda geçerli olan fontun büyüklüğünün 1 derece büyüğünü yazmada kullanılır <SMALL> </SMALL>

Metin Biçimleme Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz :

Metin Biçimleme Dosyayı “sayfa2.htm” olarak kaydedin.
Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

Metin Biçimleme Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:

Metin Biçimleme Dosyayı “sayfa3.htm” olarak kaydedin.
Kaydettiğimiz dosyayı açtığımızda :

Metin Biçimleme Başladığınız etiketi sonlandırmayı sakın unutmayın !
Bir html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp , kaynağı görüntüle / view source 'u seçtiğimizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.

Metin Biçimleme

Metin Biçimlendirme Etiketlerinin Kullanımı
Örnek: <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> </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>  <HR> <EM>Vurgu EM (Emphasis) Metni</EM> <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>

<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. </BODY> </HTML>

Fontlar

Fontlar <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: <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)

Fontlar <FONT> Etiketi
Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı : <font face="..." size="..." color="...">...</font> face= yazıtipinin adı (arial, tahoma, verdana, ...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri) Bunlara font etiketinin parametreleri diyoruz.

Fontlar Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.

Fontlar Şimdi font etiketinin kullanımını bir örnekle inceleyelim :

Fontlar Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık.

Fontlar Aslında renkli yazmanın bir yolu daha var o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi). Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green

Fontlar <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 de 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.

Fontlar <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar
Örnek: <HTML> <HEAD><TITLE>Bağlı Fontlar (Relative Fonts)</TITLE></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 SMALL 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 SMALL etiketi ile yazılmıştır.</SMALL></SMALL></P> </BODY> </HTML>

Fontlar Örnek:

Listeler

Listeler HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar :
Sıralı listeler (ordered list)-Otomatik Numaralı (<OL> Sırasız listeler (unordered list)-Madde imli (<UL>) Tanımlama listeleri (definition list) Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret ederiz. Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sağlar. Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.

Sıralı Listeler Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini getiriyoruz. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz.

Sıralı Listeler <OL TYPE=” A|a|I|i|1” START=”sayı”></OL>
Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) <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.

Sıralı Listeler

Sıralı Listeler Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. Dikkat edeceğimiz nokta, işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz.

Sırasız Listeler <UL TYPE=”DISC|CIRCLE|SQUARE”></UL>
Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare).

Sırasız Listeler

Tanımlama Listeler Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd> , <dt> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dt> ve <dd> etiketleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz.

Tanımlama Listeler

Tanımlama Listeler Yazdığımız kodu browser’dan açtığımızda :

Renkler

Dr. Erkan TANYILDIZI Ders Notları

Benzer bir sunumlar

... konulu sunumlar: "Dr. Erkan TANYILDIZI Ders Notları"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

Dr. Erkan TANYILDIZI Ders Notları

Benzer bir sunumlar

... konulu sunumlar: "Dr. Erkan TANYILDIZI Ders Notları"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim