Forum'da ara:
Ara


Yazar Mesaj
Mesaj03.09.2012, 05:58 (UTC)    
Mesaj konusu: HTML Dersleri | Sıfırdan Html'e Giriş

Herkese merhabalar.. Konu başlığından anlaşıldığı üzere bu başlık üzerinden HTML Dersleri hazırlayıp sizlere yazılı ve detaylı olarak sunacağım.. Dersleri hazırlarken aynı zamanda bazı web sitelerden de yararlanılacaktır.. Bunun nedeni derslerin sırası ile işlenip doğru bir şekilde kullanıcılara aktarılmasıdır..

Not : Ders içindeki anlatımlar bana ait olacaktır ve bedava-sitem.com dışında (kendi özel sitem hariç) hiçbir yerde kullanılamaz..!

HTML'e Giriş
HTML'in açılımı Hyper Text Markup Language'dir.. Bu kelimenin tam bir karşılığı Türkçe'mizde yoktur... Birçok yerde "Çok Yere Açılan Metin" olarak geçmektedir.. HTML Dosyalarının uzantıları .htm veya .html olmak zorundadır.. HTML Kodlarını en ufak araçlarla bile oluşturabilirsiniz.. Siz Bedava-Sitem Paneli ile bile yapabilirsiniz... Tabi bu işlemler not defteri ile bile gerçekleştirilir...

Ben anlatımlarımı NOT DEFTERİ kullanarak yapacağım... Öncelikle bir tane not defteri açalım ve ismini istediğimiz bir şekilde yazalım... Fakat uzantısı ".html" olsun.. Örneğin => grafikdizayn.html

Dosyanın görüntüsü kullandığınız varsayılan tarayıcıya göre değişecektir.. İşte .html olarak atadığımız dosyanın görüntüsü..

Benim varsayılan tarayıcım Google Chrome olduğu için onun iconu gözükmektedir...

Şimdi gelelim yapacağımız işlemlere...
Kayıt ettiğiniz (grafikdizayn.html) dosyaya sağ tıklayın ve not defteri ile açın... (Birlikte Aç>Not Defteri)
Not defterinin içerisine aşağıdaki kodları yazıp kaydedin... Son olarakta kaydettiğiniz yerden "grafikdizayn.html" dosyasına çift tıklayın ve açın...

Kod:
<html>
<head>
<title>Sayfa Başlığı Buraya Gelecek</title>
</head>
<body>
Buraya istediğiniz yazıyı yazabilirsiniz...
</body>
</html>

İşte yukarıda bulunan kodun önizlemesi aşağıdaki gibi olacaktır...


Bu durumda "<body>" ve "</body>" tagları arasına yazılan kodlar bizim ekranımızda gözükecek olan kodlardır.. Dikkat ettiyseniz tarayıcınızda sayfa ismi bölümünde "Sayfa Başlığı Buraya Gelecek" yazmaktadır... Kodlarda bulunan "<title>" ve "</title>" tagları arasına yazacağınız yazı tarayıcınızda o bölümü düzenlemektedir.. Bedava-Sitem Ayarlar bölümünde dikkat ederseniz

Gelelim kodların detaylı açıklamalarına...

HTML Dökümanımızın ilk etiketi <html>'dir.. Bu etiket tarayıcımıza bir html dökümanı oluşturulacağını göstermektedir... HTML dökümanlarında açılan her etiket kapatılmalıdır.. Kapatma etiketi ise "/" işaretidir.. O halde "<html>" ile dökümanı açıyor isek "</html>" ile dökümanı kapatmalıyız...

Gelelim <head> bölümüne.. Head tagları ise başlık bilgilerini içerisine alır.. Aynı zamanda dökümanınızda CSS kullanmak isterseniz de bilgisayarınızda bulunan CSS dosyası <head> </head> tagları arasına yazılarak çağrılır...

Body tagları ise içeriğe ekleyeceğiniz her şeydir.. İçerikte bulunan her şey body tagları arasında yer alır...

HTML Editörleri
Anlatımımız boyunca kolaylık olması için Not Defterini tercih edeceğiz fakat daha profesyonel programlarda çalışmak isterseniz Notepad++ veya Dreamweaver programlarını tercih edebilirsiniz... Özellikle Not Defteri basit geliyor fakat tüm kodları elinizle yazmak istiyorsanız Notepad++ programını öneririm...
Mesaj03.09.2012, 19:52 (UTC)    
Mesaj konusu:

HTML Etiketleri
HTML Etiketleri, HTML ögelerini belirtmek için kullanılmaktadır.. 2 karakter ile sınırlıdır.. Bu karakterler küçüktür (<) ve büyüktür (>) işaretleridir... Bu karakterlere "GRUP PARANTEZLERİ" denilmektedir... HTML Etiketleri çift olarak kullanılır.. Yani açılan her etiket kapatılmalıdır.. Bu duruma göre yazının eğik yazılmasını sağlayan <i> etiketini kullanırken aşağıdaki örnekle kullanmalıyız...
Kod:
<i> Bu yazı eğik(italik) yazıdır... </i>
Bu çiftlerin isimleri vardır... <i> olan birincisi Başlama Etiketi, </i> olan ikincisi Bitiş Etiketi'dir... Başlama ve bitiş etiketleri arasında kalan her şeye Öge İçeriği denilmektedir... Son olarak HTML Etiketlerinde küçük, büyük harf önemli değildir.. Yani HTML Etiketleri küçük, büyük harf duyarlı değildir... Örneğin yazının kalın olmasını sağlayan <b> ile <B> etiketleri aynı işlevi görür fakat içerisinde Türkçe karakter içerenler bunun dışındadır.. Örneğin yazıyı eğik hale getiren <i> etiketini <İ> olarak yazamazsınız..!

HTML Ögeleri
Yukarıda detaylıca anlattığımız konuyu kod haline getirirsek şöyle bir sonuca varabiliriz...
Kod:
<b> Bu Kalın Yazıdır..! </b>
İşte bu kodu önceki sayfamızda anlattığımız kodda aşağıdaki gibi yerleştirip kaydettiğimizde ekranımızdaki yazının kalın olduğunu göreceksiniz...
Kod:
<html>
<head>
<title>Sayfa Başlığı Buraya Gelecek</title>
</head>
<body>
<b> Bu Kalın Yazıdır..! </b>
</body>
</html>
İşte tüm kod bu kadar.. Bunu eklediğimizde ekranımızdaki yazı aşağıdaki gibi olacaktır...

Peki bu kodu tanırsak;

<b> HTML Ögesinin Başlangıç Etiketidir...
Bu Kalın Yazıdır..! HTML Ögesinin İçeriğidir...
</b> HTML Ögesinin Bitiş Etiketidir...

<b> etiketinin amacı yazının kalın yazılmasını sağlamaktır...

Etiketleri Neden Küçük Harfle Belirtiriz?
Çünkü HTML 4 Versiyonu ile küçük harf kullanmamız önerilir.. Ek olarak XHTML (yeni nesil HTML) dili de bunu kullanmamızı önermektedir... Bu durumda <B> yerine <b> kullanmak bize pek bir şey kaybettirmez ve önerilere de uymuş oluruz Smile


En son grafikdizayn tarafından 04.09.2012 14:08:36 tarihinde değiştirildi, toplam 2 kere değiştirildi
Mesaj03.09.2012, 19:56 (UTC)    
Mesaj konusu: Html Listeleme

Sırasız Liste

Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir.

Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

Kod:
<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>


Sıralı Listeler

Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

Kod:
<ol>
<li>Kahve</li>
<li>Süt</li>


Tanımlama Listeleri

Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir.

Bir tanımlama listesi <dl> etiketi ile başlar. Her terim <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar.

Kod:
<dl>
<dt>Kahve</dt>
<dd>Koyu sıcak içecek</dd>
<dt>Süt</dt>
<dd>Beyaz soğuk içecek</dd>
</dl>

______________
-Kul der ki; "İşlerimi halledip, Rabbime yöneleyim."
Rabbi der ki; "Bana yönelin, işlerinizi halledeyim."
Mesaj03.09.2012, 20:15 (UTC)    
Mesaj konusu:

Teşekkürler informess... Smile

HTML'de Paragraflar
HTML'de paragraf etiketi <p>'dir... P etiketleri ile paragraflar oluşturulabilir.. Örneğin aşağıdaki kodu ilk dersimizdeki kodun üzerine ekleyebiliriz...
Kod:
<html>
<head>
<title>Sayfa Başlığı Buraya Gelecek</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit dolor, nec vulputate magna. Sed sit amet erat tortor, sit amet auctor nisi. Phasellus elementum posuere rhoncus. Ut aliquet libero sed velit rhoncus id bibendum metus tristique. Quisque sagittis sodales luctus. Integer ullamcorper sem eget neque euismod sed varius elit cursus. Phasellus ullamcorper porta pharetra. Pellentesque a erat elit, quis pellentesque neque. Ut viverra fringilla justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis interdum rhoncus. Etiam ultricies magna quis turpis sagittis in convallis neque tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam metus mi. Praesent sed ipsum eu arcu semper rutrum. Maecenas mattis orci vel ante rutrum posuere.</p>

<p>Integer quis odio augue, nec tempor neque. Phasellus bibendum, lorem laoreet luctus facilisis, neque mi blandit justo, a cursus est risus id lorem. Pellentesque eget vulputate tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque magna. Aliquam erat volutpat. Phasellus eget metus mi, ut semper arcu. Cras sit amet lacus sit amet odio sodales vulputate ut vel metus. Proin pharetra luctus nulla, sit amet volutpat magna faucibus eget. Pellentesque magna turpis, fermentum non sodales nec, ornare eu dui. Quisque purus nunc, fermentum iaculis volutpat ut, ultricies vel mauris. In est ante, dictum ut dignissim sed, venenatis sit amet velit. Sed vehicula, sem in pulvinar suscipit, augue justo ullamcorper nisl, quis bibendum justo libero eget tellus.</p>
</body>
</html>
Bu kodu ekledikten sonra 2 paragraf oluşacaktır.. O halde paragraf kodları <p> başlangıç etiketi ile başlar ve </p> bitiş etiketi ile biter...
Mesaj04.09.2012, 14:21 (UTC)    
Mesaj konusu:

HTML'de Başlıklar
Html'de başlıklar 6 adettir.. <h1>'den başlar ve <h6>'da biter.. Bu durumda başlıklar h ile gösterilir... <h1> en büyüğü, <h6> en küçüğüdür..
Kod:
<h1>Başlığı buraya yazınız...</h1>
<h2>Başlığı buraya yazınız...</h2>
<h3>Başlığı buraya yazınız...</h3>
<h4>Başlığı buraya yazınız...</h4>
<h5>Başlığı buraya yazınız...</h5>
<h6>Başlığı buraya yazınız...</h6>
HTML otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar..

Etiketleri Kapatmayı Unutmayın..!
Yukarıda da birçok anlatımda bulunduk ve bu anlatımlarda açılan her etiketin kapatıldığını gördük.. Unutmamamız gereken bir şey vardır.. Açılan her etiket kapatılmalıdır.. Yani aşağıdaki gibi bırakılmamalıdır..!
Kod:
<p>Burası bir paragraftır...
<b>Burada bulunan yazı kalın yazıdır..
Gördüğünüz gibi etiketleri kapatmadınız.. Bu durumda o etiketler normal bir yazı olarak ekranda gözükecektir..

HTML'de Satır Atlamak
Satır atlamak için <br> etiketi kullanılır.. Yalnız <br> etiketi boş bir etikettir.. Yani bitiş etiketine gerek duymaz.. </br> yazmanıza gerek yoktur.. Yalnızca <br> ile satır atlayabilirsiniz...
Kod:
Bu bir satırdır.. <br>Bu ikinci satırdır.. <br>Bu üçüncü satırdır.. <br>Bu dördüncü satırdır.. <br>Bu beşinci satırdır...


<br> mi <br/> mi?
İnternette bulduğunuz birçok kodda (ki bende böyle kullanıyorum) <br> yerine <br/> kullanılmaktadır.. Çünkü <br> etiketi bir bitiş etiketi bulundurmaz... Bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır... Bu yüzden <br/> etiketini kullanmamız gerekmektedir...

HTML İçinde Açıklama Yapmak
HTML kodlarınızı oluştururken birbirine karışmış birçok kod birden oluşabilir.. Bunu önlemek elbetteki elimizdedir.. Aşağıda bulunan kodu ayırmak istediğiniz kodların arasına ekleyip arasına istediğiniz başlığı eklediğinizde kodlarınızı daha rahat bir şekilde kullanabileceksinizdir..
Kod:
<!-- BURAYA KOD İLE İLGİLİ AÇIKLAMA GİREBİLİRSİNİZ... -->
Mesaj04.09.2012, 18:24 (UTC)    
Mesaj konusu:

Temel HTML Etiketleri
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu