Embed Size (px)
Citation preview
HTML DERS NOTLARI
Hazırlayan: Selman ÇORAKCIOĞLU
Merhaba Sevgili Öğrencilerim;
Derste anlatmış olduğum HTML ile ilgili ders notlarına ve örnek uygulamalara buradan ulaşabileceksiniz. Sormak istediğiniz sorular ve
anlamadığınız yerler için okul mail adresimiz olan ([email protected]) adresine mesaj atmanız yeterli olacaktır. Gayret
bizden Tevfik (başarıya ulaştırma) Allah’tandır.
DERS 1: HTML NEDİR?
Html web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. Halihazırda kullandığımız web tarayıcıları (Internet Explorer, Firefox,
Chrome v.b) bu kodları anlayarak görsel web sayfalarına dönüştürürler. Html bir programlama dili değildir. Yani Web Tarayıcıları bizlerin
anlamadığı kodları bizlerin anlayabileceği görsel web sayfalarına çevirirler.
<html> <head> <title> Merhaba bu benim ilk web sitem</title> </head> <body bgcolor="white" text="red"> <h1>H1 Başlık</h1> <h2>H2 Başlık</h2> <h3>H3 Başlık</h3> <h4>H4 Başlık</h4> <h5>H5 Başlık</h5> <h6>H6 Başlık</h6> <a href="http://fatihiho.meb.k12.tr"> Okul Sitesine girmek için tıklayın </a> <br> <img src="https://fatihiho.meb.k12.tr/bayrak.jpg" width="200" height="100"> <body> </html>
Yukarıda sol tarafta bizim elimizle yazdığımız kodlar bulunurken sağ taraftaki resimde web tarayıcımız bizlere bu kodları farklı şekilde yani görsel bir şekilde göstermektedir. Web tarayıcıları yani (Google Chrome, İnternet Explorer, Mozilla Firefox) Kodları insanların görüp anlayabileceği şekilde göstermektedirler. Web tasarımcılar işte bu kodları kullanarak bizlerin her gün girdiği,ziyaret ettiği siteleri tasarlarlar. Öğrendikten sonra oldukça zevkli bir iş olan web tasarımı popülerliğini hergün artırmaktadır.
HTML SAYFASI NEDİR?
Html “hyper text markup language” kelimelerinin baş harfleridir.
Metin, resim, ses, görüntü ve diğer nesnelerin bir sayfada kullanılmasını sağlayan komutlar topluluğudur.
HTML KODU (TAG’I-ETİKETİ)NEDİR?
Html sayfaları oluşturmak için kullanılan komutlara TAG(etiket) denir.
Örneğin <b>...</b> komutu araya yazılan metinleri kalınlaştırır. (<b> …</b> komutu bir tagdır)
Bir html (web) sayfası düzenli bir şekilde bir araya gelen html kodlarından oluşur.
URL NEDİR?
Web adreslerinin resmi ismi URL'dir. Her Web sayfası sadece kendine ait bir URL'ye sahiptir.
Örnek:
http://fatihiho.meb.k12.tr
http://www.hepsiburada.com
(Url, “uniform resource locators” kelimelerinin baş harfleridir.)
ÖRNEK HTML SAYFASI
<html>…</html> Bütün web sayfaları <html> ile başlar ve </html> ile biter. Yani web sayfasında
bulunacak olan diğer bütün kodlarımız bu iki kodun arasına yazılır.
<head>…</head> Head (Türkçesi baş kısım demektir)
HTML belgesinin yani web sayfasının ilk bölümüdür. Bu bölüme yazılanlar metin olarak
ekranda görünmez.
<title>…</title> Head bölümü içine yazlan Title kodu sayfanın başlığının yazıldığı bölümdür. Herhangi
bir web sayfasını açtığımızda sitenin en üstünde görünen başlık kısmıdır.
<body>…</body> Body (Türkçesi gövde demektir) Aslında web sitesinde görünen kısmı burasıdır.
<body>…</body> komutları arasına yazılır. Girdiğimiz bütün web sayfalarında
karşımıza çıkan herşey body tagı arasına yazılan kodlardan oluşmaktadır.
HTML belgesinin bütün içeriği bu kodlar arasına yazılır.
1- Temel Kodlarımız
<html> <head> <title>Deneme Sayfası</title> </head> <body> Bu bir deneme sayfasıdır </body> </html>
En basit şekliyle yapılmış bir web sayfası örneği.
2- BODY TAG Özellikleri
A-) ZEMİN RENGİ EKLEME
Tag’ların özellikleri de olabilir. Örneğin sayfanın arkaplan rengini belirlemek için <body> tag’ının “bgcolor” özelliği kullanılır.
(bgcolor - backgroundcolour kelimesinin kısaltılmış şeklidir. Türkçesi arkaplan rengi demektir.)
<body bgcolor=“red”> | veya <body bgcolor=“#ff0000”> Web sayfamızın arkaplan rengini kırmızı yapar.
</body> #ff0000 (kırmızı renk kodudur)
Not: Bilgisayarda bulunan bütün renklerin bir renk kodu vardır.
B-) ZEMİN RESMİ EKLEME
Web Sayfanızın zeminine bir resim de koyabilirsiniz. “background” özelliği bu işlem için kullanılır.
Bunun için;
1- <body background="kelebek.gif">
2- <body background=“C:\Windows\desktop\dosyalar\kelebek.gif"> | Bilgisayarımızda bulunan resmi web sayfasına ekler.
3- <body background="http://www.fatihiho.meb.k12.tr/kelebek.gif"> | Farklı bir web sitesindeki resmi web sayfamıza ekler.
Yukarıda sayfamıza resim ekleme kodlarını görüyorsunuz. Hepsi de aynı işi yapar aralarında fark yoktur. Tek fark resmin konumu yani
resmin nereden alacağının belirlenmesidir.
<html> <head> <title>fatih imam hatip ortaokulu </title> </head> <body background="c:\resimlerim\hayvanlar\kelebek.gif" > </body> </html>
B-) YAZI RENGİNİ BELİRLEME
Body içinde “text” deyimi kullanılarak sayfada bulunan yazıların renkleri ayarlanabilir. Sayfamızda bulunan yazıların renklerini bu şekilde
belirleyebiliriz.
<body text=“renk_adı”> şeklindedir.
Örnek:
<html> <head> <title>fatih imam hatip ortaokulu </title> </head> <body text="blue"> Merhaba <br> </body> </html>
Resimde de görüldüğü gibi Merhaba yazımız mavi olarak ekranda basılacaktır.
BASEFONT VE FONT SEÇİMİ
Font bildiğiniz gibi yazı tiplerine verilen isimdir. Bizlerde web sayfamızda bulunan yazılarımızı istenilen fontta gösterebiliriz.
Basefont deyimi ile biz bu fontu değiştirebiliriz.
<basefont face=“arial”>
Aşağıda farklı yazı tipi fontları örnek olarak verilmiştir. Her fontun bir ismi vardır. Yazı tipi fontunu bu isimlerle belirleriz.
Yazı tipini
belirle
Yazı tipini belirle Yazı tipini belirle Yazı tipini belirle
<basefont face=“Ravie”>
<basefont face=“ Brush Script Std”> <basefont face=“Showcard Gothic”>
<basefont face=“Chiller”>
<basefont face=“Old English Text MT”>
WEB SAYFAMIZA AÇIKLAYICI EKLEME
Sayfamızda istediğimiz yere açıklama bilgileri ekleyebiliriz. Eklediğimiz açıklamalar tarayıcıda (internet Explorer,chrome v.b) görünmez.
Açıklama yazısı “<!--” ile başlar ve “-->” ile biter.
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <!--aşağıda verilen satırda web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="blue"> Kodlama öğreniyorum<br> Çok mutluyum... </body> </html> Örnektede görüldüğü üzere <!--aşağıda verilen satırda web sayfasındaki metinlerin rengi değiştiriliyor. --> yazısı web sayfamızda görüntülenmemektedir.
YAZI BOYUTU/BAŞLIKLAR (H1,H2,...,H6)
Web sayfamızda bulunan yazılarımızın boyut ve özelliklerini <h1> den başlayıp <h6> ya kadar olan tagları kullanarak değiştirebiliriz.
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <!--aşağıda verilen satırda web sayfasındaki metinlerin boyutları belirlenmektedir--> <body text="blue">
<h1>Bu bir başlıktır</h1> <h2>Bu bir başlıktır</h2> <h3>Bu bir başlıktır</h3> <h4>Bu bir başlıktır</h4> <h5>Bu bir başlıktır</h5> <h6>Bu bir başlıktır</h6>
</body> </html>
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.
A. kalın için <b>..yazı</b>
B. italik için <ı>..yazı..<ı>
C. alt çizgi için <u>..yazı.. <u>
D. üzeri çizili için <del> ..yazı..</del>
E. Ekranda kayan yazı yazmak için <marquee> ..yazı..</ marquee>
F. Yazımızı altta yazmak için <sub>..yazı..</sub>
G. Yazımızı üstte yazmak için <sup>.. yazı.. </sup> kullanılır.
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <!--aşağıda verilen satırda web sayfasındaki metinlerin sitilleri ayarlanmaktadır.--> <body text="red">
<b> Ben kalın yazıyım </b> <br> <i> Ben Eğik yazıyım</i> <br> <u> Benim altım çizili</u> <br> <del> Benim üzerim çizili</del> <br> <marquee> Ben kayan yazıyım </marquee> <br> H<sub>2</sub>O <br> 2<sup>3</sup>=? <br>
</body> </html>
Sol tarafta bulunan komutlarımız çalıştırıldığında sağ tarafta bulunan web görüntüsünü elde ederiz.
YAZI BÜYÜKLÜĞÜ
Web sayfamızda kullandığımız yazılarımızın farklı büyüklükte olması gerekebilir. Büyüklük ayarı için <font> deyimi içinde kullanılan “size”
parametresi kullanılır. (İngilizce bir kelime olan “size” kelimesinin Türkçe karşılığı “boyut,ebat” demektir.
<font size=x>..yazımız..</font>
burada “x” harfi yazımızın büyüklüğüdür.
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <!--aşağıda verilen satırda web sayfasındaki metinlerin boyutları ayarlanmaktadır.--> <body text="black"> <font size=2 > Fatih İmam Hatip Ortaokulu </font> <br> <font size=3 > Fatih İmam Hatip Ortaokulu </font> <br> <font size=4 > Fatih İmam Hatip Ortaokulu </font> <br> </body> </html>
Yazılarımızın boyutlarını font size tagını kullanarak değiştirebiliriz.
YAZI RENGİ 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. (body color kullanarak
web sayfamızda bulunan bütün renkleri değiştiriyoruz. Ama burada istediğimiz yerlerin yazı tipi rengini ayarlıyoruz.)
Bazı metinlerin farklı renkte olmasını istiyorsam “<font>” deyiminin “color” parametresini kullanırım.
<font color= “ yazı rengi”>yazı</font>
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <!--aşağıda verilen satırda web sayfasındaki metinlerin boyutları ve renkleri ayarlanmaktadır.--> <body > <font size=2 color="red" > Fatih İmam Hatip Ortaokulu </font> <br> <font size=3 color="purple"> Fatih İmam Hatip Ortaokulu </font> <br> <font size=4 color="blue" > Fatih İmam Hatip Ortaokulu </font> <br> </body> </html>
Yazılarımızın fontunu ve rengini ayarlamış olduk.
HTML RESİMLERİ
Bir resmi web sayfamıza yerleştirmek istiyorsak ilk olarak resim dosyamız hard diskimiz (sabit diskimiz) üzerinde olmalıdır.
Aynı şekilde internet üzerinden yayınlayacağımız resme ait dosya da İnternet’te olmalıdır.
RESİM TİPLERİ
İnternet üzerinden yayınlayacağımız resimlerin formatı:
–JPEG, JPG, BMP, GIF, XBM, PNG
WEB SAYFASINA RESİM EKLEME – (<IMG> VE “SRC” ÖZELLİĞİ)
<Img> tagının bitiş tagı yoktur, sadece özellikleri vardır. Bir sayfada resim görüntüleyebilmek için <ımg> tagının “src” özelliği kullanılır.
YANİ;
Doğru yazım: <img src=””>
Yanlış yazım: <img src=””> </img>
<img src=“url”>
<img src=“C:\kelebek.jpg”>
Not: URL web sayfası adresi demektir. ( www.google.com, www.n11.com, www.gittigidiyor.com gibi)
İki farklı şekilde web sayfamıza resim ekleyebiliriz.
A. <img src=”C:\resimlerim\cicekresimleri\papatya.bmp”>
B. <img src=”http://fatihiho.meb.k12.tr/resimler/papatya.bmp”>
Not: Web sayfamızın kayıtlı olduğu klasör ile resimlerimiz aynı klasörde ise şu şekilde de yazılabilir.
A. <img src=”papatya.bmp”>
SAYFALARDA YATAY ÇİZGİ
Sayfalarımıza yatay bir çizgi eklemek istiyorsak “<hr>”tagını kullanmamız gerekir.
Sayfanızın istediğiniz bir yerine <hr> deyimini ekleriz. Kapanış tagı yoktur.
<hr align="center" width="250" size="5" noshade color="#0000cc">
(noshade: gölge olmasın çizgide demektir.)
( color ilede çizginin rengini belirleriz.)
Not: align komutu hizalamak anlamına gelir. Align komutu birçok yerde daha kullanılacağından açıklamakta fayda görmekteyim.
Align komutu ile birlikte yazılarımızı ve çizgilerimizi sağa sola ortaya hizalamak mümkündür.
align=”left” (Sola hizala) | align=”right” (Sağa hizala) | align=”center” (Ortaya hizala) | align=”justify” (İki yana birden hizala)
<P> …….</P>
Paragrafları belirtmek için kullanılır.
<p>Burası bir paragraftır.</p>
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <body text="black"> <p align="left">BURASI İLK PARAGRAF. </p> <p align="center">BURASI DA İKİNCİ PARAGRAF </p> <p align="right">BURASI ÜÇÜNCÜ VE SAĞA DAYALI</p> <p align="justify">BURAYA YAZILAN YAZIMIZ SAYFANIN HEM SAĞINA HEMDE SOLUNA YASLANIR.</p> </body> </html>
Sol tarafta bulunan komutlar çalıştırıldığında sağ tarafta bulunan web sayfası ve paragraflarda bulunan yazıların hizalanması oluşturulmuş olur.
HTML LİNKLERİ (BAĞLANTILARI)
Html sayfalarındaki bir sayfadan başka bir sayfaya gitmek için “hyperlink”leri kullanmalısınız.
Bunun için <a> tagı kullanılır.
<a>...</a> (anchor)
Kullanımı aşağıdaki gibidir.
<a href=“url”> Buraya tıklayınız </a>
<a href=“http://www.fatihiho.meb.k12.tr”> Okul sitesine bağlanmak için tıklayınız...</a>
Hemen hemen tüm nesneleri kullanarak linkler oluşturabilirsiniz. (resimler, ses dosyaları, görüntü dosyaları, metinler v.b.)
Not: URL dediğimiz kısaltma web sitelerinin isimlerine verilen genel addır. Yani ziyaret ettiğimiz milyonlarca site ismine URL diyoruz.
Örnek: http://fatihiho.meb.k12.tr , http://www.hepsiburada.com , https://www.facebook.com , https://twitter.com gibi
Yani bütün bu site isimlerine URL diyoruz.
Yada;
https://www.facebook.com/resimler/okul.jpg (Yan tarafta bulunan resim adresi de bir URL’dir. Yani facebookta bulunan bir resmin
adresini vermektedir bize.)
Örnek 1:
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <body text="black"> <a href="anasayfa.html"> Ana Sayfa</a> <br> <a href="mesaj.html"> Mesaj Gönderin</a> <br> <a href="resim.html"> Fotoğraflarım</a> <br> <a href="video.html"> Videolarım</a> <br> </body> </html>
Örnek html linkleri eklenmiştir. Tıklandığı zaman bu bağlantı verdiğimiz adreslere gidecektir.
Örnek 2:
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <body text="black"> <a href="http://www.tccb.gov.tr/"> <img src="bayrak.png"> </a> </body> </html>
Yukarıdaki örnekte ise daha farklı bir HTML linki oluşturmuş olduk. Tıklayınız yazısı yerine bayrak resmi koyarak, resme tıklandığında linkini verdiğimiz siteye yani Cumhurbaşkanlığı sitesine (http://www.tccb.gov.tr) bağlan demiş olduk. Buna benzer örnekleri alışveriş sitelerinde daha çok görmekteyiz. Örnek buzdolabı resmine tıklandığında birçok buzdolabı, çamaşır makinası resmine tıkladığımızda ise sitede bulunan bütün çamaşır makinalarını listelemiş oluruz. Sitelerin daha güzel görünmesi için buna benzer uygulamalar her web sitesinde büyük ölçüde kullanılır.
<MAİLTO> KULLANIMI
Örnek 3:
<html> <head> <title>Web sayfası yapıyorum...</title> </head> <body text="black"> <a href="mailto:[email protected]">Bana Mail Yolla </a> </body> </html>
Buradaki örneğimizde ise bağlantıya tıklandığında karşıdaki kişiye mesaj göndereceğimiz bir ekran açılmaktadır. Genellikle iletişim sayfalarında kullanılır bu özellik.
