HTML Nedir? HTML, “Hyper Text Markup Language” sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve web' in temel dilidir. “Büyük metin İşaretleme Dili” web sayfalarının oluşturulması için kullanılan bir dizi komutlar - kodlar bütünüdür. Diğer bir anlatımla; belgelerin içindeki metinlerin tarayıcıda (browser) nasıl görüneceğini ve işlevsel olacağını düzenleyen işaretlerdir. HTML kullanarak çalıştırılabilir bir dosya elde edemezsiniz. EXE ya da COM uzantılı bir dosyanız olmaz. Dosyanız bilgisayarın anlayacağı dile dönüşemez. Bir HTML belgesi düz metinlerden oluşan bir dosyadır. Yani bu dosyaları, Windows ortamında NotePad (Not Defteri) programı ile, Mac ortamında Simple Text programı ile oluşturabilirsiniz. Teorik olarak, web sayfası hazırlamak için, HTML biliyorsanız bu programlardan başka hiçbirşeye ihtiyacınız yoktur. Bir web sitesinin oluşturulması sırasında da HTML dışında; ASP,PHP, CSS, JavaScript, VBScript, Flash gibi programlarda kullanılır. HTML Etiketleri tag’leri arasına yazılır ve bittiğinde de mutalaka bu tag’ler kapatılmalıdır. (örnek: <html>……………..</html>) birçok tag aynı zamanda çeşitli attribute (yüklem)’larla da kullanılır. (örnek: <font color=”red”> ………………………….</font> font tag’Ieri arasında yazılan yazıya kırmızı rengi Verdi) Bilinmesi Gereken Terimler Internet Internet sözcüğü, İngilizce Inter Network of Networks (Ağlar Arası Ağ) sözcüklerinden türetilmiştir. Internet terimi ile, birbirine çeşitli bağlantı tipleri ile bağlı, yeraltı, yerüstü kablolar, uydular aracılığıyla, sürekli birbirleriyle bir şeyler konuşup duran binlerce bilgisayarın oluşturduğu dinamik bir ağdan söz etmiş oluyoruz. IP (Internet Protocol) Numarası IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara setidir. Örneğin: 192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile (daha kolay hatırlamanız için),diğer bilgisayarlarla iletişim kurduğunda IP adresini kullanır. Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com Internet Alanı (Domain) İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır. HTTP HyperText Transfer Protocol, Hipermetin Aktarım Protokolü. Sayfaların adreslerini yazarken, "http://" başlarız. Bu protokol, günümüzde "internet" dediğimiz ortam üzerinde web sayfalarının çeşitli istemcilere iletimi sırasında bir bütünlük sağlanması açısından oluşturulmuş bir standartlar dizisidir. İstemci: Web sayfasını kullananlar, sunumcu: Web sayfasını yayınlayan makine. FTP File Transfer Protocol, Dosya Aktarım Protokolü... Yukarıda sözü edilen çeşitli istemciler üzerinde onlarca programdan herhangi biriyle hazırlanan web belgeleri ya da çeşit sayısı yüzleri bulan diğer dosyaların web' de yayınlanması için sunumcu bilgisayarlara aktarılması gerekmektedir. WWW (World Wide Web) : Geniş alan ağı İnternet adreslerinde görülen kısaltmalar gov: Hükümet kurumları (government) edu: Eğitim kurumları (education) org: Ticari olmayan kuruluşlar (organization) com: Ticari kuruluşlar (company) mil: Askeri kurumlar (military) net: Servis sunucular (network) ac: Akademik kuruluşlar (academic) int: Uluslararası kuruluşlar (international) WEB Tarayıcıların Çalışması (örnek: İnternet explorer) Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com Her bilgisayar üzerinde WEB sayfası adı verilen elektronik dosyaları saklar ve siz kendi bilgisayarınızdan bu bilgilere erişebilirsiniz. WEB sizin zengin bir ortamda iletişim kurmamızı sağlar. WEB üzerinde bilgilere metin, renkli çizim, resim, ses ve hatta video ortamlarına erişebilirsiniz. WEB istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. Örneğin; Milli Eğitim Bakanlığının WEB sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan WEB sayfalarına erişmek istediği mesajını yollamıştır. Milli Eğitim Bakanlığının WEB sunucusu istediğiniz bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır. Sizin WEB tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızda anlaşılır bir şekilde gösterir. Teknik olarak tarayıcıların neler yaptığını iki madde de toplayabiliriz. Tarayıcınız sizin bağlandığınız WEB sunucudan yaptığınız dosya isteğini ağ (network) üzerinden size yani kullandığınız bilgisayara ulaştırır. Tarayıcının ikinci görevi ise yaptığınız isteği, yani WEB sunucudan gelen dosyayı size, yani monitörünüze nasıl yansıtacağını, formatlamasını bilmesidir. İlgili WEB sayfasının adresi yazıldıktan sonra, tarayıcı ilgili WEB sunucuyu bulur ve sayfayı ister. Sunucu ilgili sayfayı “tag” denilen komutlar topluluğu olarak istemci makineye gönderir. İstemci makinedeki tarayıcı bu sayfayı alır ve gelen komutları yorumlar ve anlaşılır bir şekilde gösterir. WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz. Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin vebu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır. WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız. Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister. Yeni Bir Web Sayfa oluşturmak HTML belgesi oluşturmak için not defterinden yararlanabilirsiniz. Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com Oluşturmuş olduğunuz HTML belgesini kaydediniz. Dosya menüsünden Kaydet seçilir. HTML belgesini kaydederken uzantısı “.html” veya “.htm” olacak şekilde yazmalısınız. Aksi halde text dosyası olarak kaydedecektir. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ HTML Komut Yapısı HTML diğer programlama dillerinden farklı olarak sadece tasarım için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Yazım kuralları - Komutlar büyük ya da küçük harfle yazılabilir. - Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez. - Komutlar < > işaretleri arasında yazılır ve “etiket (tag)” adını alır. HTML Dosyasının Bölümleri 1- <html>: bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur 2- <head>:Bu etiket sayfa başında yapılacak işleri içerir. </head>şeklinde sonlandırılır. 3- <title>: Bu tag ile sayfada başlık çubuğu üzerinde görüntülenmesi istenen 4- <body> : sayfa içeriğinizi taşıyan etikettir. Sayfa içeriğinizi oluşturan etiketler ifade bitince, </body> şeklinde BODY bölümü sonlandırılır ve HTML belgeniz biter (</html>) Not: html kodlarını kapatmak için (sayfada yayınlanmaması için) <!-- ……………. -- > işaretleri kullanılır. Bağlı Özellikleri background="URI" Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com Belgenin artalanında görüntülenecek grafik dosyasının yolu ve adı. bgcolor="color" Belgenin artalan rengini belirten renk kodu ya da renk adı. text="color" Belgenin içeriğindeki metnin renk kodu. link="color" Bildiğiniz gibi, eğer ayarlarla oynamadıysanız, bir web sayfasında verilen bağlantı metinleri mavi renkte gösteriliyor. Bu özellikle belgede verilen linklere ait metinlerin renklerini siz belirlersiniz. alink="color" Bu özellik, o anda aktif olan bağlantı içeren metnin rengini belirlemenizi sağlar. vlink="color" Daha önce ziyaret edilen linkleri belirten metinlerin rengi değişir. Bu özellikle bu rengi de siz belirleyebilirsiniz. onload="script" Belge yüklendiğinde çalıştırılmak istenen bir script varsa, bu özellikle belirtilir. onunload="script" Ziyaretçi aktif sayfadan başka sayfaya gitmek üzere hareketini gerçekleştirdiğinde çalışması istenen script bu özellikle belirtilir. - <body bgcolor=”…..”> …….</body> : sayfa zemin rengi yüklemi . - <body background=”…..”>: Sayfaya zemin resmi verir. - Html kodlarında alt klasörden bir sayfaya ya da bir dosyaya erişmek için klasörün adı ve “/” işareti kullanlılır.( Örnek: <body background="jpg/ACRICEPR.GIF">) sayfanın zemin resmini jpg alt klasöründen aldık. - Bir üst dizinden dosya alınacaksa format şu şekilde olmalıdır: (örnek: <body background="../ACRICEPR.GIF">) İki nokta bir üst dizini simgeler. 5- <br>: bir alt satıra geçmek için kullanılan tag dir. 6- <center>: İfadeleri sayfada ortalar. Örnek: <center> Gülcay KORKMAZ </center> 7- <H>: Yazıların puntosunu ayarlar. Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com <font>: Sayfadaki yazılara biçim veren tag’dir. Çeşitli parametreleri 8bulunmaktadır; - <font size=? > : yazının puntosunu ayarlar - <font color=”…”>: Yazının rengini ayarlar - <font face=”…..”>: Yazının stilini ayarlar. Örnek: <font size=5; color="blue"; face="Verdana"> 9- <img src>: Sayfaya resim ekleyen tag’dir (örnek: <img src="jpg/bayrak.gif"> ) 10- <hr>: Sayfaya yatay çizgi oluşturur. - <hr width=?>: Çiziginin uzunluğunu belirler. - <hr size=?>: çizgnin kalınlığını belirler. Örnek= <hr width=500; size=8; color="white"> 11- <ul> ve <ol>: Satırlara madde ve numara işareti veren tag’lerdir. - <ul>: madde imi verir; bu tag ile birlikte her satırın başına <li> tag’I eklenmelidir. - <ol>: numara imi verir. <ol type=”I”>: Romen rakamı ile madde verir. <ol start=”3”>: 3. maddeden itibaren numara verir. 12- <b> ve <u> : <b> tag’i yazıları koyu yapar, <u> tag’i yazıların altını çizer. 13- <a> tag’i : İfadelere ya da simgelere link vermek için kullanılan tag’dir. Kullanımı: <a href=”……………………” > ifade </a> 1- Aynı site içinde başka sayfalara: Örnek1: <a href=”iletisim.htm> iletişim için tıklayın </a> --- açıklaması: linkin verildiği htm sayfası ile aynı klasörede bulunan iletisim.htm adlı sayfayı çağırır. Sayfada “iletişim için tıklayın” ifadesine link verilmiştir. 2- Farklı Sitelere: Örnek2: <a href=”www.meb.gov.tr”> Milli Eğitim bakanlığı sitesi </a> NOT: Belirtilen adresteki sayfayı başka pencerede açmak için “target” parametresi kullanılır. (örn: <a href=”www.meb.gov.tr” target=”blank” > Milli Eğitim bakanlığı sitesi </a> 3- Mail göndermek için oluşturulan link: Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com Örnek3: İletişim için bize <a href="mailto:[email protected]"> m@il </a> Gönderin 4- Aynı Sayfa içinde farklı yerlere : Bunun için iki basamaklı işlem yapılmalı - Link verilen yere örnek: Bu sayfadaki resmi kurum linklerine gitmek için <a href="#resmi"> tıklayın </a> - Gidilecek yere örnek : Resmi Kurumlar <a name="resmi"></a> TABLO İŞLEMLERİ Tablo oluşturmak için <table> …….</table> tag’I kullanılır. Tablo içinde kullanılan Tag’lar ve parametreleri ise; 1- <tr> : Satır ekleme tag’idir. <tr width=”…” > satırın genişliği - <tr height=”…”> satırın yüksekliği - <tr valign=”top”> satır içindekileri en başa hizalar (yatay hizalama) - <tr valign=”center”> satır içindekileri ortaya hizalar - <tr valign=”bottom”> satır içindekileri en alta hizalar - <tr bgcolor=”…”> satıra zemin rengi verir. <td> : sütun ekleme tag’idir. 2- 3- - - <td width=”…” > sütunun genişliği - <td height=”…”> sütunun yüksekliği - <td align=”left”> sütun içindekileri sola hizalar (dikey hizalama) - <td align=”center”> sütun içindekileri ortaya hizalar - <td align=”right”> sütun içindekileri sağa hizalar - <td bgcolor=”…”> sütuna zemin rengi verir. <Table> parametreleri: - <table border=”…”>: tablonun çerçeve çizgisinin kalınlığını belirler. (0 ise çerçeve sayfada görüntülenmez) Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı - <table bordercolor=”…”> tablo çizgisine renk verir. - <table bgcolor=”…”> tabloya zemin rengi verir. - <table background=”…….”>: Tabloya zemin resmi ekler. e_post@: [email protected] web: http://www.egitimde-bilisim.com HTML ETİKETLERİ TABLOSU (Toplam 91 Adet) A ABBR AREA B ACRONY M COLGROU P DIV BASEFON T APPLET BDO BODY BR BUTTON CENTER CITE CODE COL DD DEL DFN DIR DL DT EM FIELDSET E CAPTION S BASE BLOCKQUOT BIG ADDRES FRAMES FONT FORM FRAME H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX KBD LABEL LEGEND LI LINK MAP MENU META NOFRAME NOSCRIP OL OPTGROUP OPTION P PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT U UL S ET T H1 OBJECT VAR Gülcay KORKMAZ Bilgisayar Öğretmeni Yazılım Uzmanı e_post@: [email protected] web: http://www.egitimde-bilisim.com
© Copyright 2024 Paperzz
