HTML Ders Notları PDF

HTML  İnternet Terimleri İnternet: 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...

HTML  İnternet Terimleri İnternet: 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.  İnternet Terimleri İ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.  İnternet Terimleri 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.  İnternet Terimleri 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.  İnternet Terimleri 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.  İnternet Terimleri URL: (Uniform Resource Locator) Internet üzerideki adreslerin genel adıdır. Mesela http://www.kirlareli.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.  İnternet Terimleri HTTP: (Hyper Text Transfer Protocol) HTML sayfalarının Web tarayıcınıza aktarılmasında kullanılan protokoldür.  İnternet Terimleri FTP: (File Transfer Protocol) Internet üzerinden dosya aktarımını sağlayan protokoldür. Örneğin ftp://ftp.tubitak.gov.tr/ tübitak FTP sinin URL sidir. ISP: (Internet Service Provider) Internet Servis Sağlayıcı DNS: (Domain Name Server=Alan Adı Sunucusu): Web sitelerinin alan adlarının  WEB NEDİR? WORLD WIDE WEB’E KISACA WEB DENİR. WEB, INTERNET'E BAĞLANAN TÜM BİLGİSAYARLARIN OLUŞTURDUĞU BİR AĞDIR. BU AĞDAKİ TÜM BİLGİSAYARLAR BİRBİRİYLE “HTTP İLETİŞİM STANDARDI”NI KULLANARAK İLETİŞİM KURAR.  WWW NASIL ÇALIŞIR? WEB’DEKİ BİLGİLER “WEB SAYFASI” DENİLEN DOSYALARDA SAKLANIR. WEB SAYFALARI “WEB SERVER” DENİLEN MAKİNELERDE BULUNUR. SAYFALARI OKUMAK İSTEYEN “CLIENT” MAKİNELER, “BROWSER” DENİLEN PROGRAMLARI KULLANARAK BU SAYFALARI OKUYABİLİRLER.  BROWSER NEDİR? CLIENT MAKİNELERİN, WEB SAYFALARINI OKUMASI İÇİN KULLANDIKLARI PROGRAMDIR. INTERNET EXPLORER VEYA NETSCAPE EN ÇOK KULLANILANLARIDIR. BROWSER’LAR “WEB SERVER”DA BULUNAN SAYFALARI ALIRLAR VE GÖSTERİRLER.  BROWSER NASIL ÇALIŞIR? İLGİLİ WEB SAYFASININ ADRESİ YAZILDIKTAN SONRA, BROWSER İLGİLİ WEB SERVERİ BULUR VE SAYFAYI İSTER. SERVER İLGİLİ SAYFAYI “TAG” DENİLEN KOMUTLAR TOPLULUĞU OLARAK CLIENT MAKİNEYE GÖNDERİR. CLIENT MAKİNEDEKİ BROWSER BU SAYFAYI ALIR, GELEN TAGLARI (KOMUTLARI) YORUMLAR VE ANLAŞILIR  TAG NEDİR? WEB SAYFASI OLUŞTURMAK İÇİN KULLANILAN KOMUTLARA TAG DENİR...... ŞEKLİNDE KULLANILIRLAR.  WEB STANDARTLARINI KİM DÜZENLER? WEB STANDARTLARINI MICROSOFT VEYA NETSCAPE BELİRLEMEZ. WEB STANDARTLARI “W3C” DENİLEN BİR KURUM TARAFINDAN SAPTANIR. W3C “WORLD WIDE WEB CONSORTIUM”UN KISALTILMIŞIDIR.  WEB STANDARTLARINI KİM DÜZENLER? HTML, CSS VE XML GİBİ STANDARTLAR BU KURUM TARAFINDAN BELİRLENMİŞTİR.  HTML NEDİR? HTML, “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN KISALTILMIŞIDIR. BİR HTML DOSYASI, TAGLARDAN OLUŞAN BİR METİN DOSYASIDIR. TAG’LAR, BROWSER’A WEB SAYFASININ NASIL GÖRÜNMESİ GEREKTİĞİNİ ANLATIRLAR.  HTML NEDİR? STANDART BİR WEB SAYFASININ UZANTISI.HTM VEYA.HTML OLMALIDIR. HTML DOSYALARI “NOT DEFTERİ” GİBİ BASİT BİR METİN EDİTÖRÜ VEYA “DREAMWEAVER” VE DAHA ÜST SEVİYEDEKİ EDİTÖRLERLE OLUŞTURULABİLİRLER.  HTML TAGLARI (ETİKET) HTML TAGLARI, HTML SAYFALARINI OLUŞTURMAK VE DÜZENLEMEK İÇİN KULLANILIRLAR...... ŞEKLİNDE KULLANILIRLAR. TAGLARIN ARASINDA KALAN METNE “TAG İÇERİĞİ” DENİR. TAG’LER BÜYÜK HARFLE VEYA KÜÇÜK HARFLE YAZILABİLİRLER. GENELDE KÜÇÜK HARF TERCİH EDİLİR. ÖRNEK HTML SAYFASI HER HTML BELGESİ BELİRLİ SAYIDA STANDART HTML TAGLARI İÇERMELİDİR. BİR HTML BELGESİNDE OLMASI GEREKEN KISIMLAR ŞUNLARDIR; TEMEL METNİ BAŞ METNİ GÖVDE METNİ İYİ BİR HTML BELGESİNDE BU ÜÇ KISIMDA OLMALIDIR.  ÖRNEK HTML SAYFASI SAYFA BAŞLIĞI BU BENİM İLK SAYFAM. BU METİNLER KALINDIR.  TAG ÖZELLİKLERİ Tagların özellikleri de olabilir. Örneğin sayfanın ardalan rengini belirlemek için tag’ının “bgcolor” özelliği kullanılır...............  TAG ÖZELLİKLERİ Tag özellikleri daima “isim/değer” şeklinde bulunurlar; Name=“value” Bgcolor=“red” Şeklinde olurlar.  TEMEL HTML TAGLARI – – – ,..., – – – ” ile biter...  ÖRNEK 5 (AÇIKLAMA) Bilgisayar Programlama... Bu yazı mavi renkli bir yazıdır..  SAYFALARA YAZI VEYA METİN GİRMEK İki “body” deyimi arasına yazılarımızı yazarız. Bir web sayfasının içeriğini internet explorer programıyla görebiliriz. Yazılarımızı biçimleme deyimleri kullanarak düzenleriz.  ÖRNEK 6 (YAZI GİRME) Bilgisayar Programlama... LMYO Bilgisayar Programlama...  DEYİMİ Bir önceki örneğimizde “lmyo” yazısında sonra yazıya bir alt satırdan başlamak internet explorer programında hiçbir değişikliğe yol açmadı… Bir alt satırdan yazıya devam etmek için deyimi kullanılır.  ÖRNEK 7 (BR DEYİMİ) Bilgisayar Programlama... lmyo Bilgisayar Programlama... YAZILARIN ORTALANMASI Sayfa içinde ortalanmasını istediğim yazılar için... deyimini kullanabilirim. Ortalamak istediğim metnin başına “” başlatma deyimini, sonuna ise “ deyimini yerleştireceğim. Bu iki deyim arasında kalan yazı ortalanır.  ÖRNEK 7 () Bilgisayar Programlama... lmyo Bilgisayar Programlama...  YAZI BÜYÜKLÜĞÜ Web sayfamızda kullandığımız yazıların farklı büyüklükte olması gerekebilir. Büyüklük ayarı için deyimi içinde kullanılan “sıze” parametresi kullanılır...Yazımız.. Burada “x” harfi yazımızın büyüklüğüdür.  ÖRNEK 8 (YAZI BÜYÜKLÜĞÜ) Bilgisayar Programlama... LMYO Bilgisayar Programlama... ÖRNEK 9 (H1,H2,...,H6) This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading  KALIN, İTALİK VE ALTI ÇİZGİLİ YAZI Bir önceki örneğimizde yazımızın istediğimiz büyüklükte olmasını sağlayabiliyorduk. Benzer şekilde metinlerin kalın, italik ve alt çizgili olmasını da sağlayabiliriz. – Kalın için..Yazı – İtalik için..Yazı.. – Alt çizgi için..Yazı.. Kullanılır.  ÖRNEK 10 (K, İ,ALT) Bilgisayar Programlama... LMYO  ÖRNEK 10 (DEVAM) Lüleburgaz Meslek Yüksekokulu Bilgisayar Programlama Bölümü...  , DEYİMLERİ Yazımızı kalın yapmak için “” deyimi yerine “” deyimini kullanabiliriz. Aynı şekilde yazımızı italik yapmak için “” deyimi yerine “” deyimini kullanabiliriz.  ÖRNEK 11 (STRONG, EM) Bilgisayar Programlama... ONUR Kırklareli Üniversitesi...  ÖRNEK 11 (DEVAM) Lüleburgaz Meslek Yüksekokulu Bilgisayar Programlama  YAZI RENGİNİ AYARLAMAK Yazı rengi ayarı için daha önce bir yol tanımlamıştık. Fakat sadece tüm sayfamızın yazı rengini değiştirebiliyorduk. Belli yazılarımızın renginin farklı renkte olmasını istiyorsak “” deyiminin “color” parametresini kullanırız. yazı Kullanılır.  ÖRNEK 12 (YAZI RENGİ) Bilgisayar Programlama... LMYO Lüleburgaz Meslek Yüksekokulu Bilgisayar Programlama  FONT DEĞİŞİKLİĞİ Yazılarımızı word programında olduğu gibi bir font belirterekte biçimlendirebiliriz. Örneğin “arial”,”times new roman”,”technical” vs.. hep font çeşitleridir. Windows işletim sistemi bu fontlardan bir çoğunu destekler.  FONT DEĞİŞTİRME Windows işletim sisteminin desteklediği fontları rahatlıkla web sayfalarımızda kullanabiliriz. Bu fontları kullanmak için “” deyiminin “face” parametresini kullanırız. lmyo  ÖRNEK 13 (FACE PARAMETRESİ) Bilgisayar Programlama... LMYO Lüleburgaz Meslek Yüksekokulu... Bilgisayar Programlama  ÖRNEK 14 (FACE PARAMETRESİ) Bilgisayar Programlama... LMYO Lüleburgaz Meslek Yüksekokulu... Bilgisayar Programlama  HTML RESİMLERİ Özellikle bant genişliğinin artmasıyla web sayfalarında çok fazla resimler kullanılmaya başlandı. Bunun sonucu olarak tagının iyi bilinmesi gerekmektedir.  VE “SRC” ÖZELLİĞİ tagının bitiş tagı yoktur, sadece özellikleri vardır. Bir sayfada resim görüntüleyebilmek için tagının “src” özelliği kullanılır. Yani; < img src=“c:\bulut.gif>  HTML RESİMLERİ Bir resmi web sayfamıza yerleştirmek istiyorsak ilk olarak resim dosyamız hard diskimiz üzerinde olmalıdır. Aynı şekilde internet üzerinden yayınlayacağımız resme ait dosya da internet’te olmalıdır.  RESİM TİPLERİ İnternet üzerinden yayınlayacağımız resimlerin formatı: – Jpeg, jpg – Bmp – Gif – Xbm – Png Örnek 13(Resim ekleme) Bilgisayar Programlama... LMYO Lüleburgaz Meslek Yüksekokulu... Bilgisayar Programlama  Resim Biçimleme Web sayfasına eklediğimiz resimleri – “Border” özelliği ile resim çerçeve kalınlığı belirtilebilir. – “Align” özeliği ile resmin konumu belirtilebilir Left,rıght,center,top,bottom – “Height” ile resim yüksekliğini ve – “Width” ile de resim genişliğini belirtebiliriz.  ÖRNEK14 (Resim özellikleri ) bilgisayar programlama... LMYO Lüleburgaz Meslek Yüksekokulu... Bilgisayar Programlama  Resim özellikleri “ALT” Resim görüntülenemediği zaman veya belirtilen tipteki resmi görüntüleme imkanı olmayan tarayıcılar için resmimiz yerine bir metinde hazırlanabilir Bunun için kullanılır. ÖRNEK 15 (ALT ÖZELLİĞİ) bilgisayar programlama... LMYO Lüleburgaz Meslek Yüksek Okulu... Bilgisayar Programlama SAYFALARDA YATAY ÇİZGİ Sayfalarımıza yatay bir çizgi eklemek istiyorsak “” tagını kullanmamız gerekir. Sayfanızın istediğiniz bir yerine deyimini ekleriz. Kapanış tagı yoktur.... Paragrafları belirtmek için kullanılır. burası bir paragraftır.  ÖRNEK 16 () Bilgisayar Programlama... BURASI İLK PARAGRAF BURASI DA İKİNCİ PARAGRAF BURASI ÜÇÜNCÜ VE SAĞA DAYALI VE DE İKİ KENARA DAYALI  KENAR BOŞLUKLARI İnternet explorer sayfalarımızı görüntülerken kenarlarda bir miktar boşluk bırakmaktadır. Eğer boşluk miktarını kendimiz belirtmek istersek “body” deyimi ile kullanılan – Topmargın – Leftmargın Özelliklerini kullanırız...  ÖRNEK17 (TOPMARGIN,LEFTMARGI N) Bilgisayar Programlama... BURASI İLK PARAGRAF BURASI DA İKİNCİ PARAGRAF BURASI ÜÇÜNCÜ VE SAĞA DAYALI VE DE İKİ KENARA DAYALI  BASEFONT VE FONT SEÇİMİ Bir web sayfasında bir yazının fontu belirtilmemişse önceden tanımlı olan bir font kullanılır. – Basefont deyimi ile biz bu fontu değiştirebiliriz. – Kullanımı =  BASE ETİKETİ Etiketi = Html dokümanlarının temel adresini tanımlar. Örneğin; belgenize resim eklerken aşağıdaki yolları izleyebilirsiniz. etiketi tanımlandıktan sonra aynı klasördeki daha fazla resim daha hızlı ve kolay adreslenebilir.  BASE ETİKETİ Resim bu klasörde olduğu için sadece resmin adı yeterli olmaktadır.  BASE ETİKETİ etiketi özellikle sayfanın adresini değiştirirken, sayfadaki bağlantılar komple kaldırılmak istendiğinde büyük kolaylık sağlar. Href: Bağlantılara temel URL olacak adresi belirlemek için kullanılır.  META ETİKETİ Web sayfasına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri… gibi bilgiler yer alır. Sayfanın HEAD alanında kullanılır. Expires(Geçerli): Sayfanın son aktif tarihini GMT formatında arama motorlarına bildirmemizi sağlar. Sayfayı daimi olarak geçersiz kılmak için “0”değerini vermemiz gerekir  META ETİKETİ Refresh: Sayfanın belirli süre(saniye) içerisinde istenilen sayfaya yönlendirilmesini sağlar. Aşağıdaki kod sayfa yüklendikten 20 saniye sonra http://www.klu.edu.tr adresinin yüklenmesini gösterir.  META ETİKETİ Content-language: Sayfanın düzenlendiği dili belirlemek için kullanılır. Aşağıdaki kod sayfanın içeriğinin türkçe olduğunu göstermektedir.  META ETİKETİ Kullanıcı değişkenleri Name özelliği ile tanımlanır ve Content ile değeri verilir. Author: Sayfayı hazırlayan kişiyi belirtmek için kullanılır. Description: Güncel sayfanın açıklamasının belirtilmesini sağlar  VE TAGLARI Yazılarımızdaki bazı bölümleri daha büyük yapmak istiyorsak “” deyimini; daha küçük yapmak istiyor isek “” deyimini kullanırız. yazımız artık daha büyük yazımız şimdi küçüldü  ÖRNEK 18(BIG SMALL) Bilgisayar Programlama... EĞER EKRANIMIZDA BAZI YAZILARIN DAHA BÜYÜK OLMASINI İSTİYORSAK BİG DEYİMİNİ KULLANIRIM BÖYLECE YAZILAR DAHA BÜYÜK OLUR. AYNI ŞEKİLDE BAZI YAZILARIMIZDA DAHA DA KÜÇÜK YAPABİLİRİZ. BUNUDA SMALL DEYİMİ İLE HALLEDİYORUZ  TT DEYİMİ Yazılarımız kullandığımız yazı fontuna göre karakter arası boşluklar ayarlanır. Fakat “ı” ile “t” aynı miktarda boşluğa sahip değillerdir. Bütün karakterler arası boşluğu eşit yapmak için “” tagı kullanılır.  STRIKE DEYİMİ eğer yazılarımızın ortasına bir çizgi çekmek istersek bunun için strıke deyimini kullanırız yazı strike deyiminin yerine “” deyimini de kullanabiliriz.  PRE DEYİMİ Eğer not defterinde yazıldığı gibi yazılarımızın görünmesini istersek “” deyimini kullanabiliriz. Bunun için yazımızı “” tagı arasında yazmamız gerekir  ÖRNEK 19(PRE DEYİMİ) Bilgisayar Programlama... ADI SOYADI ADRESİ TELEFON ---------------------------------------------------------------------------- - SEZAİ GÜDEN BORNOVA 4640917 ŞAMİL GÜNER BAYRAKLI 4586254 PARAGRAF BAŞLADI. BU KISIM ALT TARAFTA. PARAGRAF NORMAL DEVAM EDİYOR. EĞER EKRANIMIZDA BAZI YAZILARIN DAHA BÜYÜK OLMASINI İSTİYORSAK BİG DEYİMİNİ KULLANIRIM BÖYLECE YAZILAR DAHA BÜYÜK OLUR. AYNI ŞEKİLDE BAZI YAZILARIMIZDA DAHA DA KÜÇÜK YAPABİLİRİZ. BUNUDA SMALL DEYİMİ İLE... ve … Etiketi: Metni alt simge olarak gösterir. H 20  Etiketi: Metni üst simge olarak gösterir. 34  3⁴  LÜLEBURGAZ kelimesini kırmızı arka plan üzerine sarı olarak 3 büyüklüğünde biçimli şekilde yazdırınız. ONUR ismini bir harfi kırmızı diğeri yeşil olarak mavi zemin üzerine yazınız.(N ve R harfleri kalın(bold) olacak) ifadesini web sayfasında oluşturunuz. Burada sigara içmek yasaktır. Cümlesini sigara kelimesi kırmızı ve bold olarak oluşturunuz.  ÖZEL HTML KARAKTERLERİ ,&, “, ‘ Gibi karakterler html komutları içinde kullanılan özel karakterlerdir. Bu karakterler browser’dan gösterilmezler. Eğer bu tür karakterleri metin içinde kullanmak ve browser’dan göstermek istiyorsanız, bunlara verilen özel kodları yazmalısınız.  ÖZEL HTML KARAKTERLERİ < için &lt; > için &gt; & için &amp; “ için &quot; © için &copy;  HTML LİNKLERİ... etiketi içinde, href="" komutuyla kullanılır. Target parametresi ile de sayfanın nerede açılacağı belirtilebilir. Target parametresi kullanılırken; "_blank" değeri yeni bir sayfa olarak açılacaksa, "_self" değeri aynı pencere içinde açılacaksa, "_top" değeri de aynı pencere içerisinde üstten itibaren açılacaksa verilir. Eğer özel kodlama kullanılmıyor ise (örneğin CSS... (ANCHOR) kullanımı aşağıdaki gibidir. görüntülenecek metin tıklayınız... Hemen hemen tüm nesneleri kullanarak linkler oluşturabilirsiniz. Resimler, ses dosyaları, görüntü dosyaları, metinler v.B.  Örnek 20 Linkler Lüleburgaz Meslek Yüksekokulu web sayfası için tıklayın Benim Sayfam  Örnek 21 LMYO Bilgisayar Programlama.... Lüleburgaz Meslek Yüksekokulu web sayfası için tık layın Benim Sayfam  Örnek 22 LMYO Bilgisayar Programlama.... Lüleburgaz Meslek Yüksekokulu web sayfası için tıklayın Benim Sayfam