Hakkı Cengiz

Temel HTML #1 - Sayfa Yapısı

Web tasarım, proje geliştirme denince ilk akla işin HTML kısmı gelir. Bu alanda öğrenmeniz gereken en temel dildir. Mantığı kolay, üzerinde çok

0

48

Web tasarım, proje geliştirme denince ilk akla işin HTML kısmı gelir. Bu alanda öğrenmeniz gereken en temel dildir. Mantığı kolay, üzerinde çok takılmayacağınız bir alandır.

HTML veya yeni bir dil öğrenirken önemli olan ezberlemek değildir. Asıl olay nerde neyin en iyi şekilde (basit ve hızlı) kodlayabilmeyi tecrübelerle kazanmaktır.

Bu tecrübeye erişmeniz için bu yazımda sizlere hep örneklerle kodlar üzerinden giderek anlatacağım.

Ama öncelikle;

HTML, XHTML, HTML5 nedir? Farkları?

Asıl vermek istediğim ders bu olmasa da temelden başlayalım. HTML; Hiper Metin İşaretleme Dili (ing; Hypertext Markup Language), ilk web tabanlı yazılım dilidir. XHTML; -diğer bi deyişle HTML4- .xml ile zenginleştirilmiş versiyonudur. HTML5; HTML'in en zengin ve harika versiyonudur. Bu üç tür kodun (HTML, CSS ve JavaScript) bir melezidir ve bu üç bileşenin birleşimiyle, HTML5 geliştiricilerin daha hızlı ve daha verimli çalışmasını sağlar.


Html'e giriş yaptığınızda İngilizce'ye de giriş yaptınız demektir. Bir derdiniz ya da karıştırdığınız bir kısım olduğunda ilk hareket Türkçe Google'da aratmakla güzel yanıtlar bulabilirsiniz belki ama İngilizce aratıp kaynağa gitmek bazen size daha fazlasını katacaktır. Kanımca HTML'de size en çok yardımcı olacak kaynak w3'tür.

Gelelim örneklere;

Basit Bir HTML Sayfası

Sizlere ilk kod olarak; kodlar arası kendinize notlar bırakabileceğiniz html açıklama kodunu vereceğim. (html comments diye geçer) 

<!-- Açıklamanız buraya -->

<!DOCTYPE html> <!-- DocType > Document Type > Belge Türü -->
<html>

<head> <!-- Belgenin Üst Kısmı Başlangıç -->
<title>Page Title</title> <!-- Belgenin Tarayıcı Sekmesindeki Adı -->
</head> <!-- Belgenin Üst Kısmı Bitiş -->
<body> <!-- Belgenin Gövde Kısmı Başlangıç -->

<h1>My First Heading</h1> <!-- Başlık elementimiz bkz. h1-h6 büyükten küçüğe  -->
<p>My first paragraph.</p> <!-- p: paragraf -->

</body> <!-- Belgenin Gövde Kısmı Bitiş -->

</html>


HTML5 Temel Sayfa Yapısı

Dediğim gibi html5 ile kod yazmak daha da kolaylaştı. Altta paylaşacağım html5 sayfa yapısını inceleyiniz. Projelerinize başlarken, yeni tema kodlarken kullanmanız açısından önemli noktalara değineceğiz.

<!DOCTYPE HTML>
<html>
<head>
   <meta charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Yazılım Dersleri">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="HAKKI CENGIZ">

   <title>Proje Adı + Sayfa adı</title>

<link rel="stylesheet" href="mystyle.css">

   <script async src="myscripts.js"></script>
</head>
<body>
  <header>
    <nav>
       <ul>
          <li><a href="#">Anasayfa</a></li>
<li><a href="#">İletişim</a></li>

      </ul>
    </nav>
  </header>

  <section>
     <article>
       <header>
         <h2>Gönderi Başlığı</h2>
         <p>Tarih: <time datetime="DD-MM-YYYYThh:mm">10 Nisan 2018 / 20:00</time> Yazar: <a href="#">Yazar adı</a> - <a href="#yorumlar">6 yorum</a></p>
       </header>
       <p>Birkaç satır lorem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
     </article>
   </section>

   <aside>
      <h2>Yankenar Başlığı</h2>
      <p>Birkaç satır lorem ipsum. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </aside>


   <footer>
      <p>Copyright 2018 Proje Adı/Adınız. </p>
   </footer>

</body>
</html>


Sayfa Üst Kısmı HEAD & Etiketler

meta:

title:

link:

script:


Sayfa Gövde Kısmı BODY & Etiketler

body:

header:

section:

aside:

--Sayfa Alt Kısmı FOOTER & Etiketler

footer:


Etiketler: , ,

Tarih: 10 Nisan 2018

Paylaş:

48

Henüz yorum eklenmemiş bi yorum atmaya ne dersin?

(There isn't a comment yet. Would you like add ?)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir