HTML - HTML 0’Dan Temel Anlatım

NameLeSS® · 03-26-2007

HTML :

<Html>……</Html>

Evet Başladık. Hade Bismillah Web Sayfamız İle İlgili Bütün Komutlar Ve Deyimler Bu İki Kod Arasına Yazılır.Yani her şeycikleri bu deyimlerin arasına yazcaz….

HEAD:

<Head>….</Head>

Sayfa Başlığı , link özelikleri ve web sayfası ile ilgili bütün temel özellikler burada yer alır.

Sitedeki Bir çok şeyi yazıların ve linklerin biçimini,rengini,büyüklüğünü Ayarlaya bildiğimiz CSS Kodlar (Ki Daha Bunun anlatımınıda CW de Görceksiniz) buraya konur.

TİTLE :

<Title>….</Title>

Her Sitede bir isim vardır.mesela Bizim Sitemizde

www.forumti.com
İşte Bunu Yapmamız İçin Yani Yaptıgımız Sayfanın Başına İsim yazmamız İçin

Bu komut kullanılır.

BODY

<bOdy>….</bOdy>

İşte Web Sayfasını Yapmaya Daha Yeni Başlıyoruz : =)

Sitedeki bütün komutların hepicigi buraya yazılır.Sitedeki resimler….

Her şey buradadır…

<!- - ……………… - ->

Burada da bütün programlama dillerinde açıklama bölümleri vardır.işte htmlde bunu kullancagız. Yani kısacası bir not bıraktıgımızda tekrar dönüp baktıgımzda daha kolay bulup anlayabiliriz.

Hemen Basit Bir Örnek Yapalım….

<Html>

<Head>

<Title>Hele Bu İlk Deneme Sayfamız</Title>

</Head>

<bOdy>

<!—Bütün Programlama Derslerinde Gelecek Olan Bişiyi Yapalım - ->

Merhaba Dünya

</bOdy>

</Html>

BR [ Etiketi ]

<Br> …..</Br>

Etiketimiz Yazdığımız Metinlerde Bir alt satıra geçmemizi sağlar. Yani html de yazdığımız metinlerde biz bir alt satıra geçsek te aslında “<br>” komutunu kullanamadan bir alt satıra gaçemeyiz…

CENTER

“ <Center>…</Center>”

Center Adından da Anlaşılacagı Gibi nesneleri ortalamaya yarar. Yani yazdıgımız yazıyı koydugumuz resmi sayfada ortalamamıza yarar.

H?

“<H?>…</H?>

Bu kod ise punto dediğimiz yazı büyüklüğünü ayarlar.sayfada kullanılan yazıların boyutlarını ayarlarız. “ ? “ yazdıgım yere

Ama burada ters bi durum vardır ki.

“ ? ” Yazdıgımız Sayı degeri büyüdükçe punto da küçülüyor.

FONT

<Font>…..</Font>

Font yazı tipi ni ayarladığımız bir koddur.

Bunun için farklı bölümler vardır yalnız ;

SIZE :Yazımızın Büyüklüğü

COLOR : Yazımızın rengi.

FACE : Yazdığımız Yanın Yazı Tipi

B [ BOLD] ( Kalın Yazı)

<B>… </B>

Yazıdıgımız Yazılarımızı Kalınlaştır.

U [ UNDERLİNE ] ( Altı Çizili Yazı)

<U>….</U>

Yazdıgımız Yazılarımın Altı çizili olmasını saglar.

I [ ITALIC ] ( İtalik Yazı )

<i>…….</i>

Hepimiz biliyoruz bunu fazla söze ne hacet yazıyı italik stilinde yazar.

SUP

<Sup></Sup>

İki deyim arasına yazılan metin üstindis olarak işlem görür.

SUB

<SUB></SUB>

Bu iki deyim arasına yazılan metin altindis olarak işlem görür.

Şimdi de 2. Örneğimiz...

<Html>

<Head>

<Title> Deneme Sayfamız 2 </Title>

</Head>

<bOdy>

<Font Size=”5” Color=”Red” Face=”Verdana”>

<Center>

<b>Burada Kalın Yazdık </b><br>

<i>Aha da Burada İtalik </i><br>

<u>Altınada Bi Cızık attık mı </u><br>

</Center>

</bOdy>

</Html>

PRE

<Pre>…</Pre>

Web sayfası yazarken daha önce de bahsettiğim gibi <br> komutu ile alt satıra geçeriz ..

İşte bu komutla yada şöyle dim bu komutların arasına yazdıklarımız yazılarımızı aynen not defterinde yazdıgımız gibi ekranda çıkar.

ALIGN

<P Align=”Left /Center/Right ”></P>

Eger uzun bir metin paragrafla belirtilmek istenirse ;

<p align=”Right”> Saga Dayalı..

<p align=”Left”> Sola Dayalı..

<p align=”Center”> Ortalı : )

Sayfaya Art Alan Ekleme

Bu İşlem <bOdy> komutu ile yapılır. Bundan daha önce bahsetmedim demi : )

Evet <bOdy> komutu ile kullanılır.

Şimdi yavaş yavaş işimize başlayalım….

Art Alan Rengini Belirleme

<BOdy Bgcolor=” R e n k “></BOdy>

Renk = İşte buraya istediğimiz rengi koyarız

Bunlar ing isimleride olabilir (Red,Green,White,Blue,black)

Yada kodları bunları ayrı yeten veririm.

Örnek :

<Html>

<Head>

<Title>Arka Plana Renk Koyma</Title>

<BOdy BgColor=”Red”>

<br><b>

Şimdilik Bu Kadar</b>

</BOdy>

</Html>

Art Alana Resim Ekleme

Art alanımıza resim eklemek için aynı keza yine bOdy komutunu kullancagız.

<BOdy Background=”File………”></BOdy>

File=Buraya koymak istegimiz resmin adresini verdiğimiz takdirde olay bitmiştir.

Örnek :

<Html>

<Head>

<Title>Arka Plana resim Ekleme</Title>

</Head>

<BOdy Background=”c:\\testere\\cw.jpg”>

<b> “ Tek Kral Var Cyber Warrior “

</BOdy>

</Html>

Sayfaya Yatay Çizgi Ekleme ;

HR

<Hr>….</Hr>

“Hr” komutu ile sayfamıza yatay çizgi ekleriz.

Parametreleri
WIDTH : eklediğimiz yatay çizginin uzunlugunu ayarlarız ister piksel olarak ister yüzde olarak ayarlaya biliriz.

SIZE : eklediğimiz çizgini kalınlıgını aha buradan ayarlarızç

COLOR : İşte malum çizgimizin renginide buradan belirleriz.

NOSHADE :bununlada eklediğimiz çizginin gölgesini kaldırır.

Örnek =

<Html>

<Head>

<Title>Yatay Çizgi Ekleme</Title>

</Head>

<BOdy Bgcolor=”black”>

<Center>

<Font Color=”red” size=”5” Face=”Verdana”>

<Hr Width=”150” color=”black” Size=”2”>

<Hr Width=”150” color=”green” Size=”2”>

</Center>

</BOdy>

</Html>

Sayfaya Resim Ekleme

IMG

Yaptıgımız sayfalarımıza resim eklemek için kullanılır.

<img src=”Resmin Adresi” height=”Yükseklik” width=”Genişlik” Alt=”Açıklama”></img>

Şimdi bunu bir örnekle açıklayalım……

<Html>

<Head>

<Title>Resim Ekleme</Title>

</Head>

<BOdy>

<b>

<img src=”c:\\f3arless\\index\\hacked.jpg” height=”800” width=”600” Alt=”Bu site hacklenmiştir.”</img>

</BOdy>

</Html>

Parametreler…

Src = Kullanacağımız resmin adresi…..

Height = Resmin yüksekliği…

Width= Kullandıgımız resmin genişliği

Alt=Resme açıklama yazmamıza yarar. yani resmin üzerine geldiğinde bir açıklama çıkıyor ya aha işte bunu buradan yaparız.

NameLeSS® · 03-26-2007

Sırasız Liste Oluşturma..

UL

Şimdi de belirli bir sıraya göre değilde şekille gösterelim.

Bu sırasız listeyi oluşturmak için de <UL> etiketini kullanacagız…

Sıralı listedeki gibi <li> etiketinide kullanacagız….

Diller

<Ul>

<li> Active Server Page

<li> Personel Homa Page

<li>

</Ul>

İçi Dolu , İçi Boş , Kare Noktacıklar…

<UL> etiketin yanına "type" değeri olarak "DISC" yazarsak içi dolu dairemiz, "CIRCLE" yazarsak, içi boş dairemiz ve "SQUARE" yazarsak köşeli bir noktamız olur. Şimdi de bunu bir örnekle açıklayalım…

<ol type="disc">
<li> Hacking
</ol>
<ol type="circle">
<li> Security
</ol>
<ol type="square">
<li> Programlama
</ol>

En sevdiğim Müzik türleri:

Hacking
Security
Programlama

Hem Sayılı Hem de şekilli liste oluşturalım mı şimdi de….

Evet Evet böyle daha iyi olur…..

Programlama Dilleri ;

<ol>
<li>WEB Programlama Dilleri:
<u>
<li>Active Server Page [ASP] (Acele Yok Bunun Dersinin Temelleri Atılıyor J)
<li>Personel Home Page [PHP]
<li>Hyper Text Markup Language [HTML]
</ul>
<br>
<li>Local Programlama Dilleri:
<ul>
<li>Delphi
<li>V.Basic
<li>Pascal
<li>C/C++
</ul>
</ol>

Sonuç ;

Web Programlama Dilleri
Active Server Page [ASP]
Personel Home Page [PHP]
Hyper Text Markup Language [HTML]

Local Programlama Dilleri
Delphi
V.Basic
Pascal
C/C++

Yazıya Link Eklemek

Bir sayfaya link eklememiz in amacı kendi sayfamızda veya başka sayfalar arasından geçişleri saglar.hepimizin bildigine inandıgım için sözü fazla uzatmaya gerek yok….

<a href=”xxxxxxxxxx.html”>Link için Açıklama</a>

Örnek ;

<a href=”http:\\\\www.forumti.com/Forum”>forumların kıralına Giriş İçin Tıklayınız…</a>

Mesela Linkimizin İçine açıklama ekleyerek link in üzerine geldiğimiz de bir açıklama satırının çıkmasını istiyorsak ;

<a href=”http:\\\\www.forumti.com/Forum” title=”forumların kıralına Gidiş İçin Tıklayınız…</a>

E-Posta Adreslerimize Linki Ayarlamak (Mailto) ;

Sayfamızda E-Mail adremizi link olarak veririz. Sayfaya gelen ziyaretçiler ise herhangi bir problemden dolayı bizlere o linke tıklayarak bilgi verebilirler…

<a href=”mailto:yö[email protected]”> Yöneticiye Mail Atmak İçin Tıklayınız</a>

İşte ziyaretçi bu linke tıkladıgı an pc deki yüklü olan mail programı deyreye girerek baglantı kurulur…

NameLeSS® · 03-26-2007

TABLOLAR

TABLE , TR Ve TD

Evet Sonunda Tablo yapcaz…şimdi tablo yapmak için Table,Tr Ve Td bunlar bizim için çok degerli.aman bunları sakın unutmayalım……

Tablo Oluşturmak İçin

<Table>….</Table>

Yatay Bir Hücre Oluşturmak İçin..

<Tr>…….</Tr>

Dikey Hücre Oluşturmak İçin…

<Td>……</Td>

<Table Border=”Kalınlık Sınırı” Width=”En” Height=”Yükseklik” >…</Table>

Evet buradaki parametreler önemli oldugu için sizlere tek tek açıklamak istiyorum..

O Meşhur Parametreler ;

Border : oluşturdugumuz tablonun kenar kalınlıgını ayarlar….

Width : Tablonun genişliğini ayarlarız…

Height : Tablonun yüksekliğini ayarlarız….

<TR>….</TR>

Tablonun satırlarını bu deyimle yaparız…Her satırda farklı bir işlem yürütüle bilir…

<TD>….</TD>

Tablo hücrelerini düzenlemek için kullanılır.....Bu Deyimi <Tr>..</Tr> Deyimleri Arasına yazarız…

<TD Bgcolor=”Renk” Align=”left,right,center”>……</TD>

Align = Tablo içine yazdıgımız metnin biçimi ni belirler.

Bgcolor= Yazdıgımız metnin arka alanındaki rengi ayarlar…Hücrenin içindeki rengi belirler…

Çerçeve [ Frame ]

Bazı sayfalarda görmüşsünüzdür. Linkler bi yanda yazılar bi yanda durur.Sayfa 2 parçadan oluşur ama aslında tek sayfa gibi görükür..pek kullanılmaz ama lazım oldugu yerlerde mevcuttur.biz ögrenecegiz…

Frameset çerçeveyi oluşurmamızı saglar. Frame etiketi ile de her framenin yani her çerçevenin özelliklerini ayarlarız.

<Frameset Rows | Cols=” ? “ Border=” ? “></Frameset>

Rows = Web sayfalarını yukarıdan aşagıya dogru yatay olarak bölmek için kullanılır.

Rows=”50” olarak seçilirse yukarıdan aşagıya dogru 50 piksel ayrılır ve yatay bi çizgi ile ikiye ayrılır…

Cols = Rows a benzetebiliriz. O yatay bu da Dikey olarak bölmek için ayrılır.

Border = Sayfayı böldügümüzde ortaya çıkan çizginin kalınlıgını ayarlar…

<Frame Scr=”Dosya Adi” Name=”Çerçeve Adı” Scrolling=”Yes | No | Auto” Noresize>

SRC = Bağlantının Açılacağı yolu buradan ayarlarız.Yani frame ye ekleyeceğimiz sitenin adresini buradan gösteririz.

Name = Ekledğimiz Çerçevenin İsmini buradan verecegiz.

Scrolling = Scrolu hepimiz biliyoruz demi hani şu kaydırma çubugu : = ) varya sagda aha işte biz ona scrolling diyoruz..

Noresize = Sayfaya eklediğimiz framelerin üzerine geldiğimizde fare ile boyutunu değiştirmemizi saglar ama bu deyim sayesinde onu ortadan kaldırırız.

Bir Örnekle Bunu Açıklayalım ;

sol.html

<Html>
<Head>
<Title>Sol çerçeve</Title>
</Head>
<BOdy Bgcolor="Black">
<Font size=”7”><B>

Sol Çerçeve

</Font>
</BOdy>
</Html>

Sag.html

<Html>
<Head>
<Title>Sağ Çerçeve</Title>
</Head>
<BOdy Bgcolor="Green">
<Font Size=”7”>Sağ Çerçeve

</Font>
</BOdy>
</Html>

Şimdide Ana Çerçeveyi Oluşturalım ;

<Html>
<Head>
<Title>Çerçeveli bir sayfa</Title>
</Head>
<Frameset Cols="40%, 60%">
<Frame Name="sol" src= "><Frame Name="sag" src= "></Frameset>
</Html>

NameLeSS® · 03-26-2007

Form

Evet arkdaşlar baya bi yol katettikten sonra şimdi de form yapılımına bakcaz.

Yani html ile form nasıl hazırlanır onları görecegiz..

Yani en azından bi ziyaretçi defteri gibi bişi değilde onu oluşturan elmanları görecegiz.

Çünkü ziyaretçi defteri veya o na benzer sayfayı ziyaret edenlerle etkileşimli sayfalar hazırlamak için daha sonra sizlerle ASP dersi yapcaz ama acıcık beklmeniz lazım ; )

Evet fazla uzatmayalım.

Arkdaşlar şimdi form elemanlarını tek tek inceleyerek örnek vercegiz.inş.

O yüzden dersleri dikkatli takip edip bol bol örnek yaparsanız çok daha ii olcaktır..

Birinci Elamanızmız.

Text Area (metin alanı):

Text area isminden de anlaşılacagı gibi içine yazı yazmamıza yarayan metin alanlarıdır.Bunu bir çok yerde gördünüz şimdi bir örnek yapalım eminim hatırlarsınız.

<form><textarea rows="5" cols="20">Yazınızı buraya yazın!</textarea></form>

Evet burada da gördügünüz gibi form elamanları <Form>..</Form> Arasından olmak zorunda.şimdi isterseniz örnekte adı geçenleri bi açıklayalım..

<Textarea>…</Textarea> = Metin alanı oluşturma etiketidir.

Rows = Oluşturduğumuz Metin Alanın Yüksekliğini belirlememize yarar..

Cols = Oluşturduğumuz Metin Alanın genişliğini belirlememize yarar..

Bunlarla oluşturdugumuz metin alanımızın boyutunu ayarlarız.

Şimdide bunu bi deneyelim..

<Form><Textarea Rows="5" Cols="20" Style="Background:Black" Style="Color:White">Buraya yazınızı yazın!</Textarea></Form>

Evet Arkdaşlar gördüğünüz gibi şimdi de oluşturdugumuz metin kutusunun içinin rengini değiştirdik.

Style="Background:Black" = Background dan daha önce de bahsetmiştik.bu defa da metin alanımızın rengini değiştidik yalnız başına Style getirdik şimdi kafanız fazla karışmasın ona daha sonra değinecegiz.

INPUT = Minicik Metin Alanı

Evet Arkdaşlar şimdide daha önce bahsettiğimiz metin alanının küççügü olan input tan bahsedegiz.isterseniz uzatmdan bir örnek yapalım ver eminim sizde kimden bahsettiğimi anlayacaksınız.

<Form> <input Type="Text" Size="10" Maxlenght="21"> </Form>

Evet Şimdi isterseniz daha düzgün bir tane oluşturalım : )

<Form>

Adınız : <input Type="Text" Size="10" Maxlenght="21"><br>

Soyadınız : <input Type="Text" Size="10" Maxlenght="21">

</Form>

Evet şimdi de en son yaptıgımız örnegi inceleyelim..

Buradaki parametreleride açıklayalım isterseniz…

Size = Burada oluşturdugumuz metin alanının boyutunu ayarlarız.

Maxlenght= Burada da oluşturdugumuz alana girilecek karakter sayısını belirliyoruz.eger bi deger belirtmezsek bunu otomatik olarak 21 karakter olarak algılacaktır.

NameLeSS® · 03-26-2007

Checkbox = İşaret Konan Kutucuklar : )

Şimdi bu checkbox u anlatmak isterim ama nasıl anlatam ki şimi diger elemanlardan bi farkı yok J yalnız bunu her yerde görmüşsünüzdür.

Bunları seçenek sunmak için kullanırız sayfamızı ziyeret eden ziyeretçiler için.

<Form><input Type="Checkbox" Name="Anket"> </Form>

Aha da burada yabancı bir parametre var hemen onu açıklayalım…

Type = Burada bize kullanacağımız elemanın tipini buradan ayarlarız ;

Hemencecik bi örnek yapalım ;

<Form>

<input Type="checkbox" name="Sec">GaziantepSpor <br>

<input Type="checkbox" name="Sec">Galatasaray <br>

<input Type="checkbox" name="Sec">Gaziantep B.Belediye <br>

</Form>

Radio = Radyo Düğmesi

Radio da bilmemiz gereken en önemli şey bunu gerçek radyolarla karıştırmamak J

İşin gırgırı bi yana radio dügmesini anketlerde çok ça görmüşsünüzdür.zaten bizde şimdi bi anket yapcaz önce genel kullanımını yazam bi hele ;

<Form><input Type="Radio" Name="anket"> </Form>

Evet genel kullanımı bu şekilde.

Şimdi bi örnek yapalım..

<Form>

<input Type="Radio" name="anket">GaziantepSpor <br>

<input Type="Radio" name="anket">Galatasaray <br>

<input Type="Radio" name="anket">Gaziantep B.Belediye <br>

</Form>

Select = Aşağı Doğru Açılan Seçme Kutucuğu

Select dedin mi aklımıza ilk aşagıya dogru açılan menu geliyor demi

Aha bu defa dogru işte

Şimdi bunu isterseniz bi örnekle açıklayalım artık biraz seviyemiz var

Seviyeyi fazla düşürmüyelim demi

<Form>

<Select name="Timler="1"><Option Selected>OYS Timler
<Option value="tesbit">Tesbit i Cevher
<Option value="irsad">İrşad ı Ekber
<Option value="cevap">El Cevap
<Option value="bela">Kalü Bela</select>

</Form>

Gönder ve Sil Düğmeleri

Şimdi burada yaptığımız sayfada gönder ve reset düğmesi nasıl oluşur onu anlatcagız.

Evet arkdaşlar şimdi bazı html yazma programları vardır ne bilim dreamwevar(ben bunu kullanıyom) , front page falan bunlarda direk buton ekle deriz o da bizim yerimize ekler bu kadar ugraşmamıza gerek kalmaz.

Ama unutmayalım ki bunları ögrenmemiz şart şimdilik en azından

Evet bu kdar nutuktan sonra şimdi hemen bi tane buton yapalım.

<input Type="Submit" Name="Gonder" value="Gönder">

<input Type="Reset" Name="Sil" value="Sil">