- 24 Eyl 2009
- 457
- 0
<HTML> </HTML>
Bir web sayfası <html> ile başlar, </html> ile biter. <html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body>
</html>
<HEAD> </HEAD>
Sitemizin adının yer aldığı Title'lın, **** Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim.
<TITLE> </TITLE>
Her sitenin bir adı olması gerekir.
<title> DayDay </title>
Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar... <BODY> ... </BODY>
Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm.
Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
Ama önce, sayfamızı şöyle bir görelim değil mi?
Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! "
Haydi bakalım deneyelim:
Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var.
Programların içinde Donatılar... Onun içinde de not defteri...
Aslında bunun yerini bildiğinize eminim
Aşağıdaki yazıyı açtığınız sayfaya yazın.
<html>
<head>
<title> DayDay </title>
</head>
<body> DayDay seni çok seviyoruz </body>
</html>
İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek)
Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz.
O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim:
Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett) Oldu işte ! Yazdığımız diğer yazılar artık görünmüyor.
Görünen sadece söylemek istediğiniz şey olacak...
Sonraki derste bu yazıya daha neler yapabileceğimizi göreceğiz.
Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz.
<font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font>Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.
<html>
<head>
<title> DayDay </title>
</head>
<body>
<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>
</body>
</html>
YAZI BÜYÜKLÜĞÜ
Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine, farklı renk isimleri yazın.
Kodlarla yazmak istiyorsanız,
color="#FF0000" renk adı yerine kod yazmanız gerekir.
YAZI TİPİ
face="Arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.
Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın)) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik.
<center>....</center>
Yazınızı <center>....</center> arasına yazarsanız. Sayfanın ortasında görünür.
<p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar.
<br> Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür.
<img src="cicek.jpg" align="right">
Resmimizin boyutlarını da belirleyebiliriz.
Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
En sevdiğim Hayvanlar:
En sevdiğim Hayvanlar:
En sevdiğim Hayvanlar:
Bir web sayfası <html> ile başlar, </html> ile biter. <html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<body>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</body>
</html>
<HEAD> </HEAD>
Sitemizin adının yer aldığı Title'lın, **** Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim.
<TITLE> </TITLE>
Her sitenin bir adı olması gerekir.
<title> DayDay </title>
Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar... <BODY> ... </BODY>
Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm.
Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
Ama önce, sayfamızı şöyle bir görelim değil mi?
Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! "
Haydi bakalım deneyelim:
İlk Sayfamızı yapıyoruz
Programların içinde Donatılar... Onun içinde de not defteri...
Aslında bunun yerini bildiğinize eminim
Aşağıdaki yazıyı açtığınız sayfaya yazın.
<html>
<head>
<title> DayDay </title>
</head>
<body> DayDay seni çok seviyoruz </body>
</html>
İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek)
Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz.
Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett
) Oldu işte ! Yazdığımız diğer yazılar artık görünmüyor. Görünen sadece söylemek istediğiniz şey olacak...
Sonraki derste bu yazıya daha neler yapabileceğimizi göreceğiz.
Yazı (Tip, Renk, Büyüklük)
Yazılar aşağıdaki komutlar içine yazılır.
<font> ............... </font>
Yazının büyüklüğü için "size"
yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.
Aşağıdaki örneği yazın:yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.
<font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font>Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.
<html>
<head>
<title> DayDay </title>
</head>
<body>
<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>
</body>
</html>
İsterseniz yaptığımızın neye benzediğine bakalım.
Şimdi tek tek tekrar edelim.
YAZI BÜYÜKLÜĞÜ
font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz.
Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.
<h1> DayDay </h1>
<h2> DayDay </h2>
<h3> DayDay </h3>
<h4> DayDay </h4>
<h5> DayDay </h5>
<h6> DayDay </h6>
YAZI RENGİAyrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.
<h1> DayDay </h1>
<h2> DayDay </h2>
<h3> DayDay </h3>
<h4> DayDay </h4>
<h5> DayDay </h5>
<h6> DayDay </h6>
Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine, farklı renk isimleri yazın.
red - kırmızı
blue - mavi
yellow - sarı
white - beyaz
black - siyah
Diğer renklerin İngilizce yazılışları ve kodları için bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de buraya bir ara göz atın.blue - mavi
yellow - sarı
white - beyaz
black - siyah
Kodlarla yazmak istiyorsanız,
color="#FF0000" renk adı yerine kod yazmanız gerekir.
red - #ff0000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000
Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.
YAZI TİPİ
face="Arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.
Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın
)) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik. Yazıyı istediğimiz yere yerleştirmek
Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar.<center>....</center>
Yazınızı <center>....</center> arasına yazarsanız. Sayfanın ortasında görünür.
<p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar.
Sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>
Ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>
Sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>
Satırbaşı ve paragraf yapmak
Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir.
<p>
Bu iki komutun diğerlerinden bir farkı var.
Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez.
<p>
Bu iki komutun diğerlerinden bir farkı var.
Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez.
Kalın, eğik ve altı çizgili yazmak
Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak.
Kalın (Bold) yazı <b>Yazınızı buraya yazacaksınız</b>
Yazıyı eğik yazmak için kullanacağınız kod ise böyle...
Eğik (İtalik) yazı <i>Yazınızı buraya yazacaksınız</i>Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız.
Yazıyı eğik yazmak için kullanacağınız kod ise böyle...
Eğik (İtalik) yazı <i>Yazınızı buraya yazacaksınız</i>Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız.
Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız...
Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...
Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...
Altı çizgili (underline) yazı <u>Yazınızı buraya yazacaksınız</u>Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peşpeşe kullanacağız.
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.
O zaman her iki kodu da peşpeşe kullanacağız.
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.
Web sayfanıza Resim eklemek
Merhaba arkadaşlar,
Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz.
Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Size bir sır vereyim mi? Bu dersleri çalışırken winamp'ı açalım ve öyle çalışmaya başlayalım Böylece hem eğlenir hem öğreniriz ...
Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim...
Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:
Resim ekliyoruz <html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="cicek.jpg">
</body>
</html>
Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz.
Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Size bir sır vereyim mi? Bu dersleri çalışırken winamp'ı açalım ve öyle çalışmaya başlayalım
Böylece hem eğlenir hem öğreniriz ... Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim
Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim... Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:
Resim ekliyoruz <html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="cicek.jpg">
</body>
</html>
Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor.
Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti.
Resmin ortaya hizalanması
<img src="cicek.jpg align="center">
<img src="cicek.jpg align="center">
Resmin sağa hizalanması
<img src="cicek.jpg" align="right">
Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.
<img src="cicek.jpg" width=230 height=252 alt="DayDay web sitene hoşgeldin">
<img src="cicek.jpg" width=230 height=252>
Resmin üzerine gelince görünen yazı
Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.
Resmin üzerine gelince görünen yazı
Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.
<img src="cicek.jpg" width=230 height=252 alt="DayDay web sitene hoşgeldin
">Yazıya link vermek
Yazılara nasıl link verilir?
Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir.
Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar.
Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir.
Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar.
Bir yazıya nasıl link veriririz?
Bir yazıya link vermek istediğimizde şu kodları yazarız:
(Kalın olarak yazılan yere kendi linkinizi yazacaksınız):
<a href="http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa)</a>
Linkimizin yazısını nasıl renklendiririz?Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız:
(kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..)
<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Linkimizin altında açıklama çıkmasını istiyorsak (title)
Bir yazıya link vermek istediğimizde şu kodları yazarız:
(Kalın olarak yazılan yere kendi linkinizi yazacaksınız):
<a href="http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa)</a>
Linkimizin yazısını nasıl renklendiririz?Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız:
(kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..)
<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Linkimizin altında açıklama çıkmasını istiyorsak (title)
Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır:
<a href="http://adresiniz" title="açıklaması">(örnek için aşadağıdaki linkin üzerine farenizi getirin ve biraz bekleyin)
adrese-postamıza link verelim(mailto)Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız:
<a href="mailto:msn adres"> ıstedıgını yaz</a>
Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım. Siz sayfanızda kendi e-postanızı yazacaksınız..) Genelde en çok kullanılan mail programı Microsoft'un Outlook Express isimli programıdır. Eğer bilgisayarınızda Windows işletim sistemi yüklü ise bu program da otomatik olarak kurulu olacaktır.
Sıralı Liste Nasıl Yapılır?
Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim:
Numaralı (ya da) başka tür listeler yapalım:Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekliyerek yapılır.
Numaralı (ya da) başka tür listeler yapalım:Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekliyerek yapılır.
En sevdiğim hayvanlar:
<ol>
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
En sevdiğim Hayvanlar:
- Kediler
- Köpekler
- Balıklar
- Kuşlar
(Mesela I ): En sevdiğim hayvanlar:
<ol type="I">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
<ol type="I">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
En sevdiğim Hayvanlar:
- Kediler
- Köpekler
- Balıklar
- Kuşlar
<ol type="a">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> En sevdiğim Hayvanlar:
<ol type="a" start="3">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> En sevdiğim Hayvanlar:
<ol type="a" start="3">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:
En sevdiğim Hayvanlar:
- Kediler
- Köpekler
- Balıklar
- Kuşlar
- Kediler
- Köpekler
- Balıklar
- Kuşlar
Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın..
Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz.
Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz.
alıntıdır ( calıntıdır)
Son düzenleme:
