Masonlar.org - Harici Forumu

 
« önceki sonraki »
Sayfa: [1]   Aşağı git

Gönderen Konu: HTML ve başlangıç  (Okunma sayısı 4184 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Şubat 18, 2009, 03:43:30 öö

  • TRca

  • Ziyaretçi

HTML ve başlangıç
HTML Nedir?
HTML bir etiketleme dilidir.
Etiketler tarayıcıya sayfa içeriğinin nasıl görüntülenmesi gerektiğini söyler.
--------------------------------------------------------------------------------
HTML bir dildir ve bir dil en iyi pratik yapılarak öğrenilir.
Öyleyse hemen işe başlayalım.
İhtiyacımız olan tek şey bir metin düzenleyicidir.
Eğer Windows kullanıyorsanız, hemen Not Defterini açın. (Linux kullanıyorsanız Kate'i açabilirsiniz)
Not defterine aşağıdaki metni yazın:
Merhaba, ben Sarı Çizmeli Mehmet Ağa. Diyorlar ki, w3egitim sitesindeki dersleri takip ederek herkes web sayfası hazırlamayı öğrenebilirmiş. Dedim: "Benim ne eksiğim var!" Artık bu sitenin devamlı ziyaretçisiyim.



Amaçlarımız:
"Sarı Çizmeli Mehmet Ağa" metnini kalın yapmak
"herkes" metnini italik yapmak
Tüm metnin bir web sayfası olduğunu belirtmek.
--------------------------------------------------------------------------------
Bu üç amacımızıma ulaşmak için yapmamız gereken tek şey metnimizi etiketlemek.
Peki, nasıl etiketleyeceğiz???
Çok basit!

--------------------------------------------------------------------------------
1. amaç neydi?
"Sarı Çizmeli Mehmet Ağa" metnini kalın yapmak? O halde "Sarı Çizmeli Mehmet Ağa" metninin başına ve sonuna kalın yazı etiketi olan <b> ve </b> yazıyoruz.
Merhaba, ben <b>Sarı Çizmeli Mehmet Ağa</b>. Diyorlar ki, w3egitim sitesindeki dersleri takip ederek herkes web sayfası hazırlamayı öğrenebilirmiş. Dedim: "Benim ne eksiğim var!" Artık bu sitenin devamlı ziyaretçisiyim.
Birinci amacımıza ulaştık bile!
Sırada 2.amaç, yani "herkes" metnini italik yapmak.
Bu amacımıza ulaşmak için "herkes" metninin başına ve sonuna italik yazı etiketi olan <i> ve </i> yazıyoruz.
Merhaba, ben <b>Sarı Çizmeli Mehmet Ağa</b>. Diyorlar ki, w3egitim sitesindeki dersleri takip ederek <i>herkes</i> web sayfası hazırlamayı öğrenebilirmiş. Dedim: "Benim ne eksiğim var!" Artık bu sitenin devamlı ziyaretçisiyim.
Veee... son olarak
Tüm metnin bir web sayfası olduğunu belirtmek istiyoruz.
Bunun için de metnimizin tamamını web sayfası (html) etiketi olan <html> ve </html> ile etiketliyoruz.

HTML-Kodu:
<html>Merhaba, ben <b>Sarı Çizmeli Mehmet Ağa</b>. Diyorlar ki, w3egitim sitesindeki dersleri takip ederek <i>herkes</i> web sayfası hazırlamayı öğrenebilirmiş. Dedim: "Benim ne eksiğim var!" Artık bu sitenin devamlı ziyaretçisiyim.</html>

Şimdi bu metni "websayfasi.html" olarak masaüstüne kaydediyoruz.
İlk web sayfanızı yaptınız bile.
Sonucu görmek için masaüstüne kaydettiğiniz dosyayı fareyle tıklayarak açın.
« Son Düzenleme: Şubat 18, 2009, 03:47:45 öö Gönderen: TRca »
Kayıtlı

Şubat 18, 2009, 03:50:36 öö
Yanıtla #1

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Temel Etiketler

Bu bölümde bir web sitesi yapımında kullanılan temel etiketleri öğreneceğiz.
Hazırsanız hemen başlayalım!
Bir web sitesi yapmak istersek temelde içine ne koyarız?
Metin
Resim
Bağlantı (hani şu üzerine tıklandığında başka sayfa açılan şeyler)
--------------------------------------------------------------------------------
Metinlerle ilgili öğrenilmesi gereken en temel etiketler başlık, paragraf ve satır sonu etiketleridir.

--------------------------------------------------------------------------------
Başlık
HTML'de başlık yapımında kullanılan 6 tane etiket vardır:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Örnek kullanım:
<h1>Kişisel Bilgilerim</h1>
Bu örneğin nasıl sonuç verdiğini görmek için tıklayın.

--------------------------------------------------------------------------------
Paragraf
Paragraf oluşturmak için <p> </p> etiketlerini kullanıyoruz.
Örnek kullanım:
<p>Haziran 15'te memleketime gitmek üzere Ankara'dan ayrılmaya karar verdim. Yalnız, henüz bitirmem gereken bir kaç işim vardı. Fakat çok az zamanım kalmıştı ve acele etmeliydim.</p>
<p>Annemler beni aradı ve gün boyunca neler yapmam gerektiğini söylediler. "Yani anne" dedim içimden, ben şurda web sitesi yapmayı öğreniyorum, sen üstüme başka işler yığıyorsun. Neyseki sitenin öğretim tarzı çok kolay. Yoksa hem bu iş, hem senin dediklerin...</p>
Satır sonu
HTML'de bir satırın sonunun neresi olduğunu satır sonu etiketini kullanarak belirtmek zorundayız. Aksi takdirde, Not Defterinde Enter tuşuyla oluşturduğumuz satır sonlarının HTML açısından hiçbir geçerliliği yoktur. Biz ne kadar Enter'e basıp yeni satırlar oluştursak da web sayfamızda bu satırların hepsi yan yana görünür.
Örneğin Not Defterinde:
Merhaba
Selam
Ne var ne yok?
N'ossun hoca iyidir
şeklinde yazdığımız kod, web sayfamızda
Merhaba Selam Ne var ne yok? N'ossun hoca iyidir
şeklinde görünür.
Öyleyse, satır sonlarını satır sonu etiketi olan <br> ile belirliyoruz.
Merhaba<br>
Selam<br>
Ne var ne yok?<br>
N'eolsun hoca iyidir

--------------------------------------------------------------------------------
Not: <br> etiketinin kapanışı yoktur. Yani, </br> diye bir şey yok. Bir yere <br> yazmışsak, tarayıcılara diyoruz ki, "bak burda satırımızın sonu geldi, sıradaki içeriği yeni satıra yazacaksın."

--------------------------------------------------------------------------------
Kayıtlı

Şubat 18, 2009, 03:51:51 öö
Yanıtla #2

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Resim
"Bir resim bin kelimeden daha güçlüdür" derler. Resimler web sayfalarımızın da vazgeçilmez elemanlarıdır. Eğer şimdiye kadar "bir web sayfası yapıp resimlerimi oraya yüklemek istiyorum ama nasıl yapılacağını bilmiyorum" dediyseniz, bu dersin sonuna geldiğinizde bunu nasıl yapacağınızı öğrenmiş olacaksınız.

--------------------------------------------------------------------------------
Web sayfalarımıza resim ekleyebilmek için de bir etiket kullanıyoruz. Bu etiket, resim etiketi olan <img> dir.
Resim etiketi, kapanışı olmayan bir etikettir.
Resim etiketinin src özelliğine sayfada görüntülenmesini istediğimiz resim dosyasının konumu ve ismini yazarız.
Örnek kullanım:
Diyelim ki elimizde adı "balik_tutan_cocuk.jpg" olan bir resim dosyası var ve bu resmi sayfamızda görüntülemek istiyoruz. Bunun için aşağıdaki kodu yazmak ve resim dosyasını, hazırladığımız html sayfası ile aynı klasöre koymak yeterli olacaktır.

HTML-Kodu:
<img src="balik_tutan_cocuk.jpg">
Bu kod parçası, html sayfamızla aynı klasörde bulunan "balik_tutan_cocuk.jpg" resminin sayfada görüntülenmesini sağlar
Kayıtlı

Şubat 18, 2009, 03:53:35 öö
Yanıtla #3

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Bağlantı Nedir?
İnternette gezinirken, fareyi üzerine sürüklediğimizde fare okunun şeklini aldığı bazı öğeler vardır. Bu öğelere fareyle tıkladığımızda da bazen başka bir web sayfası açılır ya da siteden bir dosya indirmeye başlarız. İşte bu öğelere bağlantı diyoruz.
Önce örnek bir bağlantı kodunu ve bu kodun web sayfasında nasıl görüntüleneceğini görüp sonra ayrıntılara geçelim.
Bağlantı etiketi <a> ve </a> dır.
Örnek bir bağlantı kodu:
HTML derslerinin başlangıç sayfasına dönmek için <a href="HTML-baslangic.html">burayı</a> tıklayın.
Sonuç:
HTML derslerinin başlangıç sayfasına dönmek için burayı tıklayın.
Yukarıdaki örnekte <a> ve </a> etiketleri arasındaki "burayı" metni, üzerine tıklanacak şey, bağlantının href özelliğinin değeri olan "HTML-baslangic.html" ise bu bağlantıya tıklandığında açılacak olan sayfadır.
Öyleyse bir bağlantıyı oluştururken 2 şeyi belirlemeliyiz:
Neyin üzerine tıklanacak?
Neresi açılacak?
--------------------------------------------------------------------------------
Neyin üzerine tıklanacak?
Bir bağlantıda üzerine tıklanacak şey çoğunlukla bir metin olurken, bazen bu amaçla bir resim de seçilmektedir.
Üzerine tıklanmasını istediğimiz resim ya da metni <a> ve </a> etiketlerinin arasına yerleştirmeliyiz.
Örnek:

Alıntı:
HTML derslerinin başlangıç sayfasına dönmek için <a href="HTML-baslangic.html">burayı</a> tıklayın.
HTML derslerinin başlangıç sayfasına dönmek için yandaki resmi tıklayın: <a href="HTML-baslangic.html"> <img src="html_logo.jpg"> </a> 


Sonuç:
HTML derslerinin başlangıç sayfasına dönmek için burayı tıklayın. HTML derslerinin başlangıç sayfasına dönmek için yandaki resmi tıklayın:
Neresi açılacak?
Bağlantıya tıklandığında açılmasını istediğimiz sayfayı da bağlantı etiketi olan <a> 'nın href özelliğine değer olarak atıyoruz. Bunun için yapmamız gereken şey <a> etikende a'dan sonra "href=" yazıp = işaretinin sağ tarafına da açılmasını istediğimiz sayfayı yazmak. Bu yazdığımız metin href özelliğinin değeri olmuş oluyor. Tabii, iyi bir html kodlayıcı olarak bu değeri "" (tırnak) içerisinde yazıyoruz.
Kayıtlı

Şubat 18, 2009, 03:58:32 öö
Yanıtla #4

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Bir HTML Sayfasının Yapısı
Az çok hepimiz ortaokulda kompozisyon yazmışızdır. Bu kompozisyonlar üç bölümden oluşurdu: giriş - gelişme - sonuç. Aynı şekilde bir html sayfası da bölümlerden oluşur. Fakat, 3 değil, sadece 2 bölüm:
Baş
Gövde
İyi bir programcı hazırladığı html sayfasını baş ve gövde bölümlerine ayırmalıdır.
Bu, bölümlere ayırma işini de her zaman olduğu gibi etiketler aracılığıyla yapıyoruz.
Baş bölümü etiketi: <head> </head>
Gövde bölümü etiketi: <body> </body>

--------------------------------------------------------------------------------
İyi bir web programcısı, hazırladığı her sayfayı baş ve gövde bölümlerine ayırmalıdır.
Öyleyse sayfa yapımız şu şekilde olmalıdır:
<html>
<head>
</head>
<body>
</body>
</html>
Şimdi baş ve gövde bölümleriyle ilgili bazı ayrıntıları görelim:

--------------------------------------------------------------------------------
Baş Bölümü
<head> ve </head> etiketleri arasına yazılan kısımdır.
Bu kısımda yazılanlar sayfa içeriğinde görünmezler!
Baş bölümü içerisine genellikle şu öğeler yerleştirilir:
Dokümanın başlığı
JavaScript kodları
Doküman Başlığı
Tarayıcı penceresinin üstündeki yatay (genellikle mavi olan) barda görünen yazıdır.

Resimde kırmızı elips içindeki "w3 eğitim" metni dokümanımızın başlığıdır
Doküman başlığı etiketi: <title></title>
Örnek kod:

HTML-Kodu:
<html>
<head>
<title>w3 eğitim</title>
</head>
<body>
</body>
</html>

CSS kodları <style type="text/css"> ve </style> etiketleri arasına yazılmalıdır.
JavaScript kodları <script type="text/javascript"> ve </script> etiketleri arasına yazılmalıdır.
.

--------------------------------------------------------------------------------
Gövde Bölümü
<body> </body> etiketleri arasına yazılan kısımdır.
Bu bölümde yazılanlar sayfa içeriğinde görünürler.
Bundan önceki derslerde öğrendiğimiz tüm metin, resim ve bağlantı kodlarını gövde bölümüne yazmalıyız.
Kayıtlı

Şubat 18, 2009, 04:00:03 öö
Yanıtla #5

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Tablo

Örnek bir tablo kodu:
<table border="1">
<tr><td>Bayram</td><td>Bay</td></tr>
<tr><td>Kemal</td><td>Bay</td></tr>
<tr><td>Deniz</td><td>Bayan</td></tr>
</table>
Sonuç:
Bayram Bay
Kemal Bay
Deniz Bayan

--------------------------------------------------------------------------------
HTML'de bir tablo 2 öğeden oluşur:
Satır
Hücre
--------------------------------------------------------------------------------
Satır
Yukarıdaki örnek tabloda 3 satır bulunmaktadır.
Satır etiketi: <tr> </tr>

--------------------------------------------------------------------------------
Hücre
Yukarıdaki örnek tabloda 3 satır ve her satırda 2 hücre bulunmaktadır. Tablonun tamamında ise 3x2 = 6 hücre vardır.
Hücre etiketi: <td> </td>
Öyleyse bir tablo, satırlardan; satırlarsa, hücrelerden oluşur.

--------------------------------------------------------------------------------
Hücreleri birleştirme
Aşağıdaki tablo kodunu ve sonucunu inceleyin:

HTML-Kodu:
<table border="1">HTML-Kodu:
<tr>
<td>h1</td><td>h2</td><td>h3</td>
</tr>
<tr>
<td>h4</td><td>h5</td><td>h6</td>
</tr>
<tr>
<td>h7</td><td>h8</td><td>h9</td>
</tr>
</table> tabloda, içeriği "h1" ve "h2" olan hücreleri birleştirip yatay uzun bir hücre elde etmek istiyoruz.
Bu durumda şu iki adımı uyguluyoruz:
"h1" hücresinin genişliğini iki sütun kaplayacak şekilde büyüt.
"h2" hücresini oluşturan kod parçasını sil.
Bir hücrenin genişliğini 1'den fazla sütun kaplayacak şekilde artırmak için o hücrenin colspan özelliğini değiştiriyoruz.
Örnek:

HTML-Kodu:
<table border="1">HTML-Kodu:
<tr>
<td colspan="2">h1</td><td>h3</td>
</tr>
<tr>
<td>h4</td><td>h5</td><td>h6</td>
</tr>
<tr>
<td>h7</td><td>h8</td><td>h9</td>
</tr>
</table>
--------------------------------------------------------------------------------
Şimdi de içerikleri, sırasıyla "h1" ile "h4" olan hücreleri birleştirip dikey olarak uzun bir hücre elde edelim.
Bu durumda da şu iki adımı uyguluyoruz:
"h1" hücresinin boyunu iki satır kaplayacak şekilde büyüt.
"h4" hücresini oluşturan kod parçasını sil.
Bir hücrenin boyunu 1'den fazla satır kaplayacak şekilde artırmak için o hücrenin rowspan özelliğini değiştiriyoruz.
Örnek:

HTML-Kodu:
<table border="1">HTML-Kodu:
<tr>
<td rowspan="2">h1</td><td>h2</td><td>h3</td>
</tr>
<tr>
<td>h5</td><td>h6</td>
</tr>
<tr>
<td>h7</td><td>h8</td><td>h9</td>
</tr>
</table>
Kayıtlı

Şubat 18, 2009, 04:01:01 öö
Yanıtla #6

  • TRca

  • Ziyaretçi

Ynt: HTML ve başlangıç
Liste
İki çeşit liste vardır:
Sıralı Liste
Sırasız Liste
--------------------------------------------------------------------------------
Sıralı Liste
Her bir liste elemanının yanında sıra numarası görünen listedir.
Örnek:

HTML-Kodu:
<p>Bilgisarı oluşturan 3 birim vardır:</p>
<ol>
<li>Girdi-Çıktı Birimi</li>
<li>Hafıza</li>
<li>İşlemci</li>
</ol>

Girdi-Çıktı Birimi
Hafıza
İşlemci
Sırasız Liste
Her bir liste elemanının yanında daire, kare vs. gibi şekiller olan listedir.
Örnek:

HTML-Kodu:
<p>Sevdiğim meyveler:</p>
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Karpuz</li>
</ul>
Sonuç:
Sevdiğim meyveler:
Elma
Armut
Karpuz
[/b
Kayıtlı

Sayfa: [1]   Yukarı git
« önceki sonraki »
 

Benzer Konular

  Konu / Başlatan Yanıt Son Gönderilen:
0 Yanıt
2356 Gösterim 		Son Gönderilen: Mart 12, 2008, 09:32:07 ös
Gönderen: shemuel
HTML-Kodlari

Başlatan TRca Webmaster

5 Yanıt
3876 Gösterim 		Son Gönderilen: Şubat 18, 2009, 04:14:03 öö
Gönderen: TRca
1 Yanıt
10921 Gösterim 		Son Gönderilen: Ocak 14, 2010, 08:47:24 öö
Gönderen: murat tanhu