HTML & CSS Nedir,Nasıl kullanılır


Çeşitli (HTML & CSS)   

Yazar: RezT    0 Yorum    412 Görüntüleme
  • Derecelendirme: 0/5 - 0 oy

Paylaşım Tarihi: 17.06.2016, 05:18:15 #1
RezT Çömez
Kayıtlı Üye
Status: Çevrimdışı Yorumları:2 Konuları:2 Kayıt Tarihi:17.06.2016 Rep Puanı: 0

CSS NEDİR?
Cascading Style Sheets. Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.
HTML NEDİR?
HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur.

Resim data:image/jpeg;base64,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 r.

CSS'DE NELER YAPILIYOR?
CSS kullanarak HTML ile yapamayacağımız birçok şeyi yapabiliriz. Bir sayfadaki tüm ögeleri veya belli bir kısım ögeyi renk, boyut, arkaplan resmi, sayfadaki konumu, sağından solundan olan boşlukları ve daha birçok özelliği yönünden CSS ile tanımlayabiliriz

HTML'DE NELER YAPILIYOR?
Metin biçimlendirme işlemleri, (Renk, Boyut, Font vs.)
Resim kullanımları ve çalıştırılması,
Video kullanımları ve çalıştırılması,Ses dosyaları kullanımları ve çalıştırılması,
Tablo işlemleri,
Alan işlemleri,Çerçeve işlemleri,Form işlemleri,
Tuval alanları,Stil Dosyaları Kullanımı,
Dış bileşen kullanımları, ( Flash ( swf ) uzantılı vb. dosyalar )
Static ( Sabit ) Web sayfaları vb.


HTML'DE Bilinmesi Gereken Kodlar Nelerdir?
Bir html tagı “<” ile açılır ve “/>” ile kapatılır. HTML kullanacağımız bir sayfaya “<html>” tagıyla başlanır ve “</html>” tagıyla bitirilir.
<html> tagları içerisinde sayfamız iki bölümden oluşur;

Kod:
Head – Üst bilgiler kısmı
Body – Gövde,içerik kısmı

Head ( Üst bilgiler kısmı ) : Sitemiz ait anahtar kelimeler, açıklama, site başlığı gibi bilgileri kapsayan kısımdır. Bu kısımda sayfamızın özellikleri kodlanır, kullanıcıya hitap eden üye giriş forumları, yazılar vb. bu kısımda kodlanmazlar.
Body ( İçerik kısmı ) : Adından da anlaşılacağı üzere kullanıcıya hitap eden, formlar, yazılar, görseller, linkler vb. bu kısımda kodlanır ve sitemizin kullanıcıya yönelik tüm işlemlerini yapacağımız kısımdır.

Örnek bir html sayfası şu şekildedir;

Kod:
1
2
3
4
5
6
7
8
<html>
<head>
<title>Site Başlığı</title>
</head>
<body>
Site içerik kısmı.
</body>
</html>

Bir site programlanırken ilk başta bu html yapı oluşturulur ve içerikle ilgili kodlamalar body tagları arasında yapılır. Html bunun yanı sıra yazıları biçimlendirme ve tasarım alanlarında da kullanılır.

PHP Kod:
1
2
3
4
5
6
7
8
9
10
11
12
13
<b> </b> – bold tagı ( Arasına alınan yazıyı kalın yapar. )
<i> </i> – italic tagı ( Arasına alınan yazıyı italik yani yatay yapar. )
<u> </u> – underline tagı ( Arasına alınan yazıyı altı çizili yapar. )
<h> </h> – head tagı ( Arasına alınan yazının başlık olduğunu belirtir ve başlık boyutuna taşır. )
<h1> </h1> – head 1 tagı ( Arasına alınan yazının 1.başlık olduğunu belirtir ve başka başlıklarda kullanılacaksa bu tag ana başlık için kullanılabilir çünkü; yazı boyutu daha büyüktür. )
<h2> </h2> – head 2 tagı ( Arasınan alınan yazının 2.başlık olduğunu belirtir boyut biraz daha küçüktür. )
<h3> </h3> – head 3 tagı ( Arasınan alınan yazının 3.başlık olduğunu belirtir boyut biraz daha küçüktür. )
head tagları 1 den 6′ya kadar gidebilir ve sayı arttıkça font küçülür. Her sayı bir sonraki başlığı belirtir.
<p> </p> – paragraf tagı ( Arasına alınan yazının bir paragraf olduğunu belirtir. )
<br>break tagı ( Yazıdan sonra kullanılır ve kapatılma tagı gerektirmez, yazıdan sonra veya önce kaç kez <br> yazılırsa o kadar satır aşağı atlar. )
<img src=””/> – image tagı ( src kısmı source yani kaynak kelimesinden gelmektedir. Bu tag sayfamıza resim eklemek içindir. Eklemek istediğimiz resmin internet adresi src=” buraya” gelmelidir.İmage tagını kullanırken
<img src=”www.siteadi.com/resim.jpg”> </img> tarzı bir kullanım YANLIŞTIR.
<img src=”www.siteadi.com/resim.jpg”/> tarzı bir kullanım DOĞRUDUR.


CSS'DE Akılda kalması gereken kodlar
Köşeleri Yuvarlamak

PHP Kod:
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; 

Saydamlık Verme

PHP Kod:
opacity:0.85; -filter:alpha(opacity=85);  

Kenar Boşlukları Ayarlamak

PHP Kod:
margin: 10px;

Sağ Sol Ayarlamak

PHP Kod:
float:left;   /   float:right; 

Genişlik ve Yukseklik Ayarlamak

PHP Kod:
width: 250px;  /     height: 150px;  


Son Düzenleme: 17.06.2016, 05:25:22, Düzenleyen: RezT.










Aradığınızı Bulamadınız Mı ?

Konuyu Okuyanlar:
1 Ziyaretçi