HTML Stilleri  11 Nisan 2019, Saat 16:34
DurumuÇevrimiçi

♈[̲̅m̲̅][̲̅e̲̅][̲̅g̲̅][̲̅a̅ ♈

LeGoLaS - nickli üyeye ait kullanıcı resmi (Avatar)
UYARI:
Kullanıcıların Profil Bilgileri Ziyaretçilere Kapatılmıştır.

Görmek için Kayıt Olmalısınız

HTML Stilleri

 
Yorum #11

Her HTML etiketi önceden tanımlanmış stil renklerini barındırır. Bu yazılar için siyah, arka plan için beyaz şeklindedir. Style özelliğini kullanarak dilediğiniz gibi renklendirme yapabilirsiniz.

Arka plan renginin değiştirilmesi

Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız. Aşağıdaki örnekte ayrıntılı şekilde görebilirsiniz:


<html>
<head>
<title></title>
</head>
<body bgcolor="red" >
<h3 align="center">Megaforum Ailesiİ</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>




Kullanılan metin renklerinin değiştirilmesi

Kullanılan metin renklerinin değiştirilmesi için text sıfatını kullanmanız yeterlidir. Aşağıdaki örnekte kullanımını ayrıntılı şekilde görebilirsiniz:


<html>
<head>
<title></title>
</head>
<body text="red">
<h3 align="center">Megaforum Ailesi</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>


<html>
<head>
<title></title>
</head>
<body bgcolor="red" text="#000051">
<h3 align="center">Megaforum Ailesi</h3>
<h3 align="center">Sizleri Aramızda görmekten</h3>
<h3 align="center">Mutluluk Duyuyor</h3>
</body>
</html>


 Alıntı
HTML Tablolar  11 Nisan 2019, Saat 16:35
DurumuÇevrimiçi

♈[̲̅m̲̅][̲̅e̲̅][̲̅g̲̅][̲̅a̅ ♈

LeGoLaS - nickli üyeye ait kullanıcı resmi (Avatar)
UYARI:
Kullanıcıların Profil Bilgileri Ziyaretçilere Kapatılmıştır.

Görmek için Kayıt Olmalısınız

HTML Tablolar

 
Yorum #12

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.
Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.


Tablo etiketleri

table etiketi:



<table> </table>


HTML kodu içinde bir tablo tanımlar. Şayet border parametresi tanımlanmışsa tarayıcı tabloyu çevre sınırları ile görüntüler.caption etiketi:

<caption> </caption>


tablonun başlığı için bir ifade tanımlar. Tablo başlığının öntanımlı konumu, tablonun üstünde ve ortalanmış durumdadır.tr etiketi:


<tr> </tr>


Tablo içinde bir tablo satırını tanımlar.th etiketi:


<th> </th>


bir tablo başlık hücresi tanımlar. Öntanımlı olarak bu hücredeki metin ortalanmış ve koyu (bold) renklidir.td etiketi:

<td></td>


Bir tablo hücresi tanımlar. Öntanımlı olarak bu hücre içindeki metin sola yanaşık ve düşeyde ortalanmış vaziyettedir.


Tablo özellikleri

  • Align parametresi: Bir hücre verisinin yatay konumunu belirler. Left, Right, Center parametrelerini kullanarak belirtirsiniz.
  • Valign parametresi: Bir hücre verisinin düşey konumunu belirler. Top, Middle, Bottom parametrelerini kullanarak belirtirsiniz.
  • Colspan parametresi: Bir hücrenin kapsadığı sütun sayısıdır. Belirttiğiniz kadar sütun oluşmasını sağlar.
  • Rowspan parametresi: Hücrenin kapsadığı satır sayısıdır. Belirttiğiniz kadar satır oluşmasını sağlar.
  • Nowrap parametresi: Otomatik metin akışını iptal eder.
Şimdi ülkelerin nüfuslarını bir tabloda nasıl verdiğimize bakalım:


<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2">

<!-- tablo tanımı başlangıcı -->
<caption> ÜLKELER VE NÜFUSLARI </caption>

<!-- başlık tanımı -->
<tr>

<!-- başlık satırı tanımı -->
<th>ÜLKE ADI</th>
<th>NÜFUSU</th>
</tr>

<!-- başlık satırı tanımının sonu -->
<tr>

<!-- ilk satır tanımı -->
<td>AVUSTURYA </td>
<td>8,000,000</td>
</tr>

<!-- ilk satır tanımının sonu -->
<tr>
<td>ALMANYA</td>
<td>80,000,000</td>
</tr>
<tr>

<!-- son satır tanımının başlangıcı -->
<td>TÜRKİYE</td>
<td>73,000,000</td>
</tr>

<!-- son satır tanımının sonu -->
</table>

<!-- tablo tanımının sonu -->
</body>
</html>








<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5">
<tr>
<td>TEK HÜCRELİ BİR TABLO</td>
</tr>
</body>
</table>
</html>








Son olarak zemin rengi değiştirilmiş bir tablo örneğiyle eğitimi sonlandıralım:


<html>
<head>
<title>TABLO UYGULAMASI</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="5" align="left" bgcolor="ffcbf0">
<tr>
<td>PADOVA</td>
</tr>
</table>
Venedik'in bu kadar yakınında olması belki şanssızlığıdır.<br>
Gizemli bir Kuzey İtalya şehridir.<br>
Avrupa'nın en eski tıp fakültesi buradadır.
</body>
</html>



 Alıntı
HTML Formlar  11 Nisan 2019, Saat 16:36
DurumuÇevrimiçi

♈[̲̅m̲̅][̲̅e̲̅][̲̅g̲̅][̲̅a̅ ♈

LeGoLaS - nickli üyeye ait kullanıcı resmi (Avatar)
UYARI:
Kullanıcıların Profil Bilgileri Ziyaretçilere Kapatılmıştır.

Görmek için Kayıt Olmalısınız

HTML Formlar

 
Yorum #13

HTML formları kullanıcıdan veri almak için kullanılır.
<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur. Bu eğitimde bu elemanların bazılarını nasıl kullanacağınızı öğreneceğiz. İlerleyen 201 HTML5 & CSS derslerinde ise HTML5 ile gelen yeni form elemanlarını göreceğiz.
En basit haliyle bir form oluşturalım:


<form>
<!-- Form elemanları -->
</form>


Input etiketi

Input etiketi en önemli form elemanıdır. Tip belirteçlerini kullanarak aşağıda ayrıntısıyla anlattığımız elemanları kullanabilirsiniz:
Metin Alanı (Text Field): Kısa metin girişlerini yüklemek için kullanılabilecek olan alanlardır. İsimler, arama anahtarları adresleri girmek için kullanılır.
Seçme Listeleri (Select List): Seçme listesi, kullanıcının içinden bir ya da daha fazla elemanı seçebileceği veri listeleridir. Uzun fakat sonlu bir seçenekler listesi sunmak amacıyla kullanılabilir. Örneğin bir ülkeler listesinden ülke seçmek ya da bir yazıcılar listesinden yazıcı seçmek gibi eylemler bu elemanın kullanılmasını gerektirir.
Denetim Kutusu (Checkbox): Denetim kutusu, web sayfasını ziyaret eden İnternet kullanıcılarının bir veriler listesinden,
  • bir tek veri
  • birden çok veri seçmek ya da
  • hiçbir veri seçmemek olanağı sağlayan kontrol nesnesidir.
Genellikle birden çok veriyi seçmek için kullanılır.
Radyo düğmesi (Radio button): Kullanıcılara tek bir seçim yapma olanağı veren kontrol nesnesidir.
Metin bölgesi (TextArea): Normalden uzun olan metinler için kullanılabilecek olan kontrol nesnesidir. Serbest biçimli cevaplar için kullanılabilir.
Submit ve Reset düğmeleri: Submit (Gönder) düğmesiyle form üzerine girilen bilgi işlenmesi için URL'i verilen sunucu sayfasına gönderilir. Reset (Sıfırla ya da Temizle) düğmesiyle form içindeki bilgi silinerek başlangıç konumuna getirilir.

Bir formun genel yapısı

Şimdi gelin, bir formun genel yapısını detaylı inceleyelim.
Bir form oluşturmak için ilk adım, HTML kodu içine <form> etiketini eklemek ve Submit (gönder) ve Reset (Sil) düğmelerini yerleştirmektir.
Submit ve Reset düğmeleri gerçekten de bir form üzerindeki temel elemanlardır. Web sayfasına gelen kullanıcıların çoğu bu sayfadaki bir formu doldurarak Submit düğmesiyle bu formdaki bilgileri, sunucudaki bir dosyaya göndermek isteyecek. Bazı durumlarda o ana kadar form üzerindeki alanlara yerleştirilmiş bilgilerin silinmesi istenebilir. Bu durumda da Reset düğmesine ihtiyacımız olacak.
Şimdi basit bir form örneğiyle kullanımlarına bakalım:


<!DOCTYPE html>
<html>
<head>
<title>SALZBURG</title>
</head>
<body>

<div align="center">
<font face="courier" size="6" color="red">
BENZERSİZ ŞEHİR SALZBURG TURLARI İÇİN<br>
BİZİ ARAYINIZ
</font>
</div>
<hr width="90%" size="5" noshade>
<form method="post" action="form_gonder.php">
<input type="text" name="adiniz">ADINIZ<br>
<input type="text" name="soyadiniz">SOYADINIZ<br>
<input type="text" name="adresiniz">ADRESİNİZ<br>
<input type="text" name="tel-no">TEL.NO<br>
<input type="submit" value="GÖNDER" align="center">
<input type="reset" value="SİL" align="center">
</form>
<hr width="90%" size="5" noshade>
<div align="center">
<address align="left">
<font face="Arial">
<br>ÖRNEK TOUR<br>
<a href="mailto:ornek@ornektour.com.tr">ornek@ornektour.com.tr</a>
<br>
Mevcudiyet Cad.84-80767-Şişli<br>
İSTANBUL<br>
</font>
</address>
</div>
</body>
</html>


 Alıntı
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler Arama
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Yukarı Git