Merhaba, HTML derslerine hoş geldiniz!..
Adımın KÜBRA olduğunu biliyorsunuz, ben burada size dilimin döndüğünce en basit biçimde bir web sayfasını nasıl yapacağınızı anlatacağım. Bu derslerin orijinaline Webresource.com'u tıklayınca ulaşabilirsiniz.
Eğer HTML nin ne olduğunu bilmiyorsanız bayağı eğlenceli vakit geçireceğinize eminim, yok azıcık bir tecrübeniz varsa, sizi biraz esnetirim o kadar.
Eminim, bu HTML lisanının basit olduğunu öğrenmek epeyi hoşunuza gidecektir. Bu işin temel fikri, web sayfaları dosyalardan başka birşey değildir. Tam olarak HTML dosyalarıdır. HTML dosyası diye çağrılırlar, çünkü, dosya adı uzantıları .html veya .htm diye biter. HTML, Hyper Text Mark-up Language'ın kısaltmasıdır. Eğer bu dosya uzantısı işi kafanızı karıştırdıysa, gerçekten bu işte yenisiniz demektir. Hemen şu dosyalar hakkındaki minik yazıyı bir okuyun ki sizi işin en başında kaybetmeyelim. OK, hadi hala okumadıysanız hemen marş marş.
Şimdi başlayalım. Eğer sizde FRONTPAGE filan gibi herşeyi sizden daha iyi bildiğini iddia eden, sizin için herşeyi yapmaya hazır editör programınız varsa, bir müddet el vurmamaya söz verin. Bu işi öğrenmenin en kötü yolu, o programları kullanmaktır. O tür programlar işin esasını öğrendikten sonra size daha fazla yardımcı olabilir, şu anda kafanızı karıştırmaktan başka bir işe yaramazlar. HTML yi en güzel Not Defteri ile öğrenirsiniz. Not Defteri??? yapmayın canım, hani şu
Başlat menusundan >
Program Dosyaları >
Donatılar >
Not Defteri'ni seçiniz
orada durmuş size bakıyor. Hiç de böyle bir işe yarayacağını tahmin etmiyordunuz değil mi? Bir başka araçta, Internet Explorer tarayıcı programınız.
Bütün bunlarla ilk web sayfanızdan 5 dakika uzaktasınız, haydi başlayalım artık...
TAG (Element)'larla ilgili Genel Bilgi
Bu HTML belgemizin ana dilidir. Açılan ve Kapanan Anahtarlar yardımıyla belgemiz tamamlanır. Örneğin: <ELEMENT>içerik</ELEMENT> Şeklinde açarız bilgiyi gireriz ve mutlaka kapatırız. Eğer Elementin kendi özelliğinde kapatılması yoksa tek olarak elemente yer veririz. Bunun gibi durumlarda element sonuna / işareti ekleriz. Örneğin: <BR /> gibi...
* * *
Element Özelliklerini Belirtmek
Elementlere ait özellikleri ilk açtığımız element içinde ozellik="deger" şeklinde tarayıcıya bildiririz. Örneğin: <ELEMENT ozellik="deger">icerik</ELEMENT>
* * *
<HTML> Elementi
Bu HTML belgemizin ilk ekleyeceğimiz ve son kapatacağımız TAG'ıdır.
* * *
<HEAD> Elementi
HTML TAG'ından sonra gelir ve içerikten önce kapatılır. Bu element sitemiz ile ilgili dil, tanıtım, stil vb. konularda bilgilerin tutulacağı bölüm olacaktır.
* * *
<TITLE> Elementi
HEAD TAG'ından sonra getirilmelidir. Sayfamızın başlığını yazarız. Bu başlık tarayıcının en üst sağ köşesinde görünecektir.
* * *
<BODY> Elementi
HEAD TAG'ının bitişi ile açılır ve HTML TAG'ının kapanmasından önce kapatılır. BODY TAG'ı belge içeriğini sunduğumuz kısımdır. Sayfamızın arkaplanı, yazıtipi rengi, link renkleri, kenarlıkları vb. konularda bilgi vermemiz içindir.
* * *
Açıklama Eklenmesi
Açıklama hem işimizi kolaylaştırmak hemde kaynağı inceleyen birine yardım vermek için kullanılması gereken kodlardan biridir. Bu açıklamayı yazmak için <!-- ve --> elementlerini kullanmalıyız. Açıklama bu iki elementin ortasına gelir. Unutmayın bu açıklama tarayıcıda görünmez ama kaynakta görünecektir.
~ HTML Belgemiz ~
* * *
Yazıların Şekillendirilmesi
Yazı Şekillendirirken <B>, <EM>, <STRONG>, <I>, <SUP>, <SUB>, <DEL>, <CODE>, <U>... gibi TAG'ları kullanmaktayız... Aşağıdaki Örneği ve Sonuçlarını inceleyin...
NOT: <P> paragraf başlangıcı demektir. </P> ile kapatılır.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~
Bir örnek Kalın Yazıya
Bir örnek Vurgulu Yazıya
Bir örnek Güçlü Yazıya
Bir örnek Sağa Yatık Yazıya
Bir örnek Normalden Yukarıda Yazıya
Bir örnek Normalden Aşağıda Yazıya
Bir örnek Üzeri Çizilmiş Yazıya
Bir örnek Kod Yazısına
Bir örnek Altı Çizili Yazıya
|
* * *
<FONT>
Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...
NOT: <BR /> satır atlama isteğini belirtir. Orjinal kullanımı <BR /> olup kapatılmaz.
Özellikleri:
size="deger" Yazının boyutudur. 0 ile başlar ve yükselir.
color="deger" Yazının rengidir. Hex Renk Kodu ya da ingilizce rengin adı olabilir.
face="deger" Yazıtipidir. Arial, Tahoma, Verdana vs. bunlar birer yazıtipidir.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~
Times New Roman tarzında bir yazı...
4 boyutunda yazı...
3 boyutunda yazı...
2 boyutunda yazı...
1 boyutunda yazı...
Bu yazı #FF0000 rengindedir.
Bu yazı 'kırmızı' (red) rengindedir.
Bu yazı 2 boyutunda ve mavi renklidir
|
* * *
<A HREF=""> (Bağlantı-Link Oluşturmak)
Bu element, bir bağlantı oluşturmamızda bize yardımcı olmaktadır. Href="deger" linkimizin nereye varacağıdır. Tırnak işaretleri arasına 3 şekilde gideceği yeri yazarız. Eğer gideceği yer belgemizin içinde ise #gidecegiyer, yerel bir dizinde ise gidecegisayfa.htm ya da web sayfaları arasında ise http://www.siteniz.com şeklinde yazılabilir. Aşağıda örneklerle anlatılanları daha iyi anlayacaksınız.
Özellikleri:
name="deger" vereceğimiz iç link (# ile başlayan) için bir ad belirlemektir.
title="deger" fare ile yazının üstüne geldiğinizde görülecek başlıktır.
target="deger" sayfanın hangi sayfada açılacağını söylememize yarar. Eğer yeni bir sayfada açacaksak burayı farklı isimlerle anlatırız. Hiç kullanmazsak aynı pencerede açılır. Özellikle frame (çerçeve) kullanıyorsak çok işimize yarar.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~
* * *
<IMG SRC=""> (Resim Eklemek)
<IMG> elementi sayfamıza resim eklememiz için gereklidir. Ekleyeceğimiz resmin adresini SRC="" özelliğindeki tırnak işaretleri arasına yazacağız.
Özellikleri:
alt="deger" resmimizin üzerine geldiklerinde görünecek açıklama.
width="deger" pixel olarak resmin genişliğin sayısal değeri.
height="deger" pixel olarak resmin yüksekliğinin sayısal değeri.
border="deger" resmin çerçeve kalınlığı. Kullanılmazsa link durumu hariç görülmez.
~ HTML Belgemiz ~
~ Tarayıcıdaki Görüntüsü ~
Sonraki ders görüşmek üzere...
|
