srbrine
Kömür Madencisi
- Mesajlar
- 121
- En iyi cevaplar
- 0
- Beğeniler
- 24
- Puanları
- 0
html temel bilgiye sahip herkes artık html kodlamasından anlıyor umarım konu yerim yanlış değildir
kodunu yazıyoruz (kopyalamak yok!) daha sonrasında bunu dosyadı.html olarak kaydediyoruz.
şimdide manasını vereyim
"<>" bir tagı açmak anlamına gelir "</>" ise bir tagı kapatmakdır html,head,body ise htmlde bu şekilde bu kodlar olmazsa olmazıdır(olmazsa htmlde olmaz çünki)
onun dışında ingilizceniz iyiyse zaten işi kaparsınız
"<p>" elementi ise metin yazmak için kullanılır onun dışında sayfanızın türkçe karakter desteklemesi için head tagı arasına
<meta charset='utf-8'> komutu kullanılır ama "</meta>" gibi şeylerle kapatılmaya ihtiyacı yoktur
burada yaptığımız tek şey head tagı arasına yukarıda verdiğim kodu ekledik ve sayfa türkçe karakter destekler duruma geldi
şimdi birkaç sorunuz olucak
-tamam makale yazarım ama alt satıra nasıl geçeceğim
-çok basit </br> elemntini kullanıcaksınız (açmaya veya kapatmaya gerek yok "<br>" de olur)
-çizgi çekmsem olmazmı
-<hr> elementi ni kullan
bunun dışında birçok kod mevcuttur güzel bir site yapsanız bile css olmadan o site hiçtir
gelin şimdi siteyi daha renkli ve başlıklı bir hale getirelim ve burada basit bir css dersi görelim
css yi html belgenize yazabilirsiniz veya ayrı .css uzantılı olarakda yapabilirsiniz tercihim html dosyanıza yazmanızdır
bunu yazmanında 2 yolu var
1)head tagı arasına <style> elementi kullanmak (<style type="text/css">)
2)elementin içinde style belirtmek bu her element için çalışmaz tercihim 1. adımdaki gibidir ama aşşağıdakinde element içindekini görüceksiniz
çıktısı ise şöyledir bgcolor komutu ile body tagına yazarak body rengini açık yeşil yaptık <p> elementinin içinde belirttiğimiz style ise "color=" olmaz css de color: olucak bir kural daha css de javascript gibidir yani cümlenin sonuna ";"(noktalı virgül) koymaz iseniz o cümle çalışmaz
şunuda belirtmek isterimki <h1> yani başlık elementi "1" sayısı 6 ya kadar gider ve başlık boyutunu belirler
css yede biraz değinelim css nedir css bir yazılım dilidir kullanım alanı ise çok fazladır birkaçını söyleyeim cümlenin ekrana geliş süresi,yazı boyutu,yazı renki,yazı stili vs.vs. diye gider css ye çok fazla hakim olamadığımdan dolayı sizlere renk verme boyut gibi şeyleri anlatacağım ingilizcesi iyi olan işi kapar zaten
şeklinde siz daha iyisini yapabilirsiniz hemen şundan bahsedeyim
<p> elementinin içinde kullandığımız "class" anlamı sınıf demektir ve istediğiniz isimi verebilirsiniz cssde kullanacağınız zaman diyelimki class ı araba olarak
belirttim css de kullanacağımız zaman .araba olarak yazmam gerekiyor yani class komutunu tüm css kullanacağınız elementlerde kullanabilirsiniz (") tırnak içinde olması şartıyla.
Butonlar
butonlarada kısaca değinecek olursak mesela tıkladığımızda uyarı mesajı verecek gibi şeyler yapmakta basittir onun için
<form> elementinin içine <input> elementi açmalıyız bu sadece <button> elementi ilede olur ama input tercihimdir
çıktısı ise bir düğme var ve bana bas yazıyor buna bastığınızda bana bastınız diye bir uyarı veriyor
"value" ne işeyarar düğmenin üstünde yazan şeydir zaten
onclick ise basıldığında yapılacak aktivite
dersin başında belirttiğim gibi ingilizcesi iyi olan işi kapar örneğin type kısmını "sumbit","radio" onclikc kısmınıda editleyebilir işi böylece kapar bu kodları el ile yazarsanız ezberlersiniz zaten
Not: yeterli beğeni gelirse 2. ders gelicektir orada bahsedeceğim javascript,değişkenler,fonksyonlar ve düğmeye özellik bağlama
Gerekli Materyaller:
Notepad++
Öncelikle Notepad++ ı açıp şunları yazıyoruzNotepad++
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Burasi basliktir</title>
</head>
<body>
<p>Buraya Metin Yazildi.</p>
</body>
</html>şimdide manasını vereyim
"<>" bir tagı açmak anlamına gelir "</>" ise bir tagı kapatmakdır html,head,body ise htmlde bu şekilde bu kodlar olmazsa olmazıdır(olmazsa htmlde olmaz çünki)
onun dışında ingilizceniz iyiyse zaten işi kaparsınız
"<p>" elementi ise metin yazmak için kullanılır onun dışında sayfanızın türkçe karakter desteklemesi için head tagı arasına
<meta charset='utf-8'> komutu kullanılır ama "</meta>" gibi şeylerle kapatılmaya ihtiyacı yoktur
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Burasi başlıktır</title>
</head>
<body>
<p>Buraya Metin Yazıldı.</p>
</body>
</html>şimdi birkaç sorunuz olucak
-tamam makale yazarım ama alt satıra nasıl geçeceğim
-çok basit </br> elemntini kullanıcaksınız (açmaya veya kapatmaya gerek yok "<br>" de olur)
-çizgi çekmsem olmazmı
-<hr> elementi ni kullan
bunun dışında birçok kod mevcuttur güzel bir site yapsanız bile css olmadan o site hiçtir
gelin şimdi siteyi daha renkli ve başlıklı bir hale getirelim ve burada basit bir css dersi görelim
css yi html belgenize yazabilirsiniz veya ayrı .css uzantılı olarakda yapabilirsiniz tercihim html dosyanıza yazmanızdır
bunu yazmanında 2 yolu var
1)head tagı arasına <style> elementi kullanmak (<style type="text/css">)
2)elementin içinde style belirtmek bu her element için çalışmaz tercihim 1. adımdaki gibidir ama aşşağıdakinde element içindekini görüceksiniz
HTML:
<!DOCTYPE html>
<html>
<head>
[I]<meta charset='utf-8'>[/I]
<title>Burasi başlıktır</title>
</head>
<body bgcolor="lime">
<h1>Burası Metinin Başlığı</h1>
<p style="color:red;">Buraya Metin Yazıldı.</p>
</body>
</html>şunuda belirtmek isterimki <h1> yani başlık elementi "1" sayısı 6 ya kadar gider ve başlık boyutunu belirler
css yede biraz değinelim css nedir css bir yazılım dilidir kullanım alanı ise çok fazladır birkaçını söyleyeim cümlenin ekrana geliş süresi,yazı boyutu,yazı renki,yazı stili vs.vs. diye gider css ye çok fazla hakim olamadığımdan dolayı sizlere renk verme boyut gibi şeyleri anlatacağım ingilizcesi iyi olan işi kapar zaten
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
.metin
{
color:red;
border:1px;
}
</style>
</head>
<body>
<p class="metin">Burası css ile Daha iyi hale getirildi</p>
</body>
</html><p> elementinin içinde kullandığımız "class" anlamı sınıf demektir ve istediğiniz isimi verebilirsiniz cssde kullanacağınız zaman diyelimki class ı araba olarak
belirttim css de kullanacağımız zaman .araba olarak yazmam gerekiyor yani class komutunu tüm css kullanacağınız elementlerde kullanabilirsiniz (") tırnak içinde olması şartıyla.
Butonlar
butonlarada kısaca değinecek olursak mesela tıkladığımızda uyarı mesajı verecek gibi şeyler yapmakta basittir onun için
<form> elementinin içine <input> elementi açmalıyız bu sadece <button> elementi ilede olur ama input tercihimdir
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<form>
<input type="button" value="Bana Bas" onclick="alert('Bana Bastiniz')">
</form>
</body>
</html>"value" ne işeyarar düğmenin üstünde yazan şeydir zaten
onclick ise basıldığında yapılacak aktivite
dersin başında belirttiğim gibi ingilizcesi iyi olan işi kapar örneğin type kısmını "sumbit","radio" onclikc kısmınıda editleyebilir işi böylece kapar bu kodları el ile yazarsanız ezberlersiniz zaten
Not: yeterli beğeni gelirse 2. ders gelicektir orada bahsedeceğim javascript,değişkenler,fonksyonlar ve düğmeye özellik bağlama
Son düzenleme:
