▌HTML 5 Öğreniyorum > Ders 1 | HTML Giriş

Devam Edilsinmi ?

  • Evet.

    Kullanılan: 3 75.0%
  • Hayır.

    Kullanılan: 1 25.0%

  • Kullanılan toplam oy
    4

Kronik2143

Elmas Madencisi
Mesajlar
835
En iyi cevaplar
0
Beğeniler
447
Puanları
1,090

Merhaba arkadaşlar bu konumda website , tasarım yapmak gibi hayali olan ama
yapamayan arkadaşlar için ufak toplama bir html kursu vericem yazılı anlatım olarak
anlatabildiğim kadarıyla konu ilgi çekerse haftada 2 - 3 ders (istisnalar olabilir) koyabilirim.



Kısaca HTML5 i özetlersek ;
* Sadeleştirilmiş, düzeltilmiş HTML4 ve XHTML dillerinin son sürümüdür.
* Daha fazla yapısal elemana, form elemanlarına ve yeni özelliklere sahiptir.
* Gelişmiş multimedia desteği sunmaktadır.
* JavaScript ve CSS3 teknolojilerini daha etkili bir şekilde kullanmamıza imkan tanır.

Temel HTML5 Yapısı aşşğıdaki gibidir ;​
Kod:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sayfa Başlığı</title>
</head>
  <body>
</body>
</html>

Bu bizim ana dosyamızdır ve Bir HTML5 belgesi her zaman DOCTYPE etiketi ile başlar ve ardından <html>, <head>, <body> etiketleri eklenir.



<html></html> > Ana eleman olarak kullanılır.
<head></head> > Bu etiketler arasında title, css, script, meta, link, base, object etiketleri kullanılır kısaca sayfa yüzünde
görünmeyen kod parçacıkları head etiketlerinin arasına konulur.

<body></body> > Bu etiketler arasında pencerede gösterilecek içerikler yazılır.



HTML dillerinde sayfaya içerik eklemek, içeriğin konumunu misal sağa yatkın sayfanın en üstü sayfanın en altı gibi, içeriğe
kısıtlı görsel özellikler vermek için etiketler yani tag kullanılır. Etiketler dil tarafından önceden tanımlanmıştır.
Etiketler ve içeriğin oluşturduğu yapı eleman olarak adlandırılır.

Örneğin bir yazıyı kalın yazmak istiyor iseniz html de şöyle bir eleman kullanmalısınız ;

<b>Minecraft Turk</b>

Kullandığımız etiket "<b> , </b>" etiketidir. Bu etiket ile belirleyeceğiniz cümleler kelimeler kalın olarak sayfada gözükecektir.
Fark ettiyseniz Yazının başlangıcında <b> olarak açılmış yazı bittikten sonra aynı şekilde fakat b den önce / işareti konulmuştur,
bunun anlamı etiketi sonlandırmaktır eğer etiketi kapatmaz iseniz sayfada ya hatalar meydana gelicektir.



Character Set Bildirimi ( Türkçe karakter, Semboller ) ;
<meta charset="utf-8">
Meta etiketi head etiketleri arasında kullanılır.
Bu özellik sayfada kullanılan karakter kümesini tanımlamak için kullanılır.HTML5 ile yeni tanımlanan bir özelliktir. Aslında UTF-8
kullanmak çoğu zaman yeterlidir bu UTF-8 sayfada türkçe karakterleti sorunsuz bir şekilde gözükmesini sağlar.
Plugin düzenlerken vs vs çoğu arkadaş bilir bunu.



Bir kaç örnek verip konuyu burada bitirmek istiyorum ;


<a>Link //Yanlış, kapanış etiketi konulmamış.
<p>Açıklama<p> //Yanlış, kapanış etiketi yok.
<div>Div eleman içeriği</div> //Doğru
<span></span> //Doğru
<meta charset="utf-8> ve <meta charset="utf-8"/> //Doğru



Bir sonraki ders.


Ders Listesi

HTML Ders 1
HTML Ders 2


 


Son düzenleme:

UmmetEmin

İnsanlar unutulduklarında ölürler.
Mesajlar
52
En iyi cevaplar
0
Beğeniler
60
Puanları
540
Devamını bekliyoruz :D Forumda böyle faydalı şeyler zor paylaşılıyor. Rehber şekline getir. Millet faydalansın.
 

Admicos

Nether Yerlisi
Mesajlar
2,362
En iyi cevaplar
1
Beğeniler
1,580
Puanları
4,890
Ruh hali
küçük bir not:

eğer çok fazla html kullanacaksanız notepad veya notepad++yı bırakıp Atom, sublime text gibi editörleri kullanın bence daha iyiler. Ve emmet var ki emmet candır HTML kullanırken.
 

UmmetEmin

İnsanlar unutulduklarında ölürler.
Mesajlar
52
En iyi cevaplar
0
Beğeniler
60
Puanları
540
küçük bir not:

eğer çok fazla html kullanacaksanız notepad veya notepad++yı bırakıp Atom, sublime text gibi editörleri kullanın bence daha iyiler. Ve emmet var ki emmet candır HTML kullanırken.
notepad++ için de emmet var. Ama zen coding eklentisi olması lazım adı. Kurulumu biraz gıcık ama ondan sonra sublime text den daha iyi bir editör oluyor.
 

Gavatos

Demir Madencisi
Mesajlar
296
En iyi cevaplar
3
Beğeniler
168
Puanları
690
Ruh hali
Web siteden anlamam ama bu şablonu nasıl türkçeleştirdim anlıyamadım ufak bir ingilizce bilgim sayesinde türkçeleştirdim aslında kolay gibi görünüyor
Kod:
<html>
<head>
<style rel="stylesheet" type="text/css">
body {
background:url(http://hdwallpapersfit.com/wp-content/uploads/2015/04/city-street-hd-wallpaper.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #e7e7e7;
  font-family: sans-serif;
}

h2 {
  color: #e7e7e7;
  font-size: 24px;
  font-weight: 640;
  text-align: center;
  margin-bottom: 10px;
}

a {
  color: #e7e7e7;
  text-decoration: none;
}

.login {
  width: 250px;
  position: absolute;
  top: 40%;
  left: 50%;
  margin: -184px 0px 0px -155px;
  background: rgba(0,0,0,0.2);
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.3),inset 0px 1px 0px rgba(255,255,255,0.07)
}

input[type="text"], input[type="password"] {
  width: 255px;
  padding: 25px 0px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  outline: none;
  color: #e7e7e7;
}
input[type=checkbox] {
  display: none;
}

label {color:white;
  margin-top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #46485c;
  content: "";
  display: block;
  position: absolute;
  transition: all 0.5s linear;
  cursor: pointer;
  border: 3px solid #252730;
  box-shadow: 0px 0px 0px 2px #46485c;
}

#remember:checked - label[for=remember] {
  background: #b5cd60;
  border: 3px solid #252730;
  box-shadow: 0px 0px 0px 2px #b5cd60;
}


input[type="submit"] {
    background: #16aa56;
  border: 0;
  width: 250px;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.4s linear;
}
input[type="submit"]:hover {

  background: #16bb59;
}

.forgot {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
}
.forgot:hover {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  color: #6d7781;
}

.remember {
  padding: 30px 0px;
  font-size: 12px;
  text-indent: 25px;
  line-height: 15px;
}

::-webkit-input-placeholder {
  color: #e7e7e7;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: all 0.3s linear;
  transform: translate(12px, 0);
  opacity: 0;
}

</style>
</head>
<body>
<div class='login'>
  <h2>Giris</h2>
<form action="#" method="post">
  <input name='username' placeholder='Kullanici adi/Email' type='text'/>
  <input name='password' placeholder='Sifre' type='password'/>
  <div class='remember'>
    <input checked='' id='remember' name='remember' type='checkbox'/>
    <label for='remember'></label>Beni hatirla
  </div>
  <input type='submit' value='Giris Yap'/>
  <a class='forgot' href='#'>Sifrenimi unuttun ?</a>
</form>
</div>
</body>
</html>
Edit:
Birşeyi daha keşfettim
<input name='password' placeholder='Sifre' type='password'/> password yazan kutucuğa yazdığımız şifreyi "*" işareti ile gizliyor password yerine text yazarsam şifreniz kutucukta görünüyor
 
Son düzenleme:

Üst