HTML Web Sayfası Oluşturma - HTML CSS ve Javascript

Hiper Metin İşaretleme Dili’nin İngilizcesi olan Hypertext Markup Language’ın kısaltılmış hali yani HTML ile kendi web sayfanızı oluşturabilirsiniz.

Her web sayfasının kullanıcı tarafından görünen kısmını oluşturan HTML, öğrenmesi kolay ve eğlenceli bir metin işaretleme dilidir. Bu eğitim serisiyle HTML hakkındaki temel bilgileri edinmiş olacaksınız.

<h2>HTML Etiketleri</h2>

HTML'de her şey birer etiket içerisinde yer alır ve bu etiketlerin hepsi farklı görevlere sahiptir. Her etiket < ve > işaretleri içerisinde başlar ve </ ile > işaretleri içerisinde biter. Mesela aşağıdaki örnekte <b>5.</b> satırda <title> ve </title> etiketi arasında yer alan kısımdaki metinler tarayıcınızın sekmesinde görünecek yazıyı belirler.

<b>Basit Bir HTML Sayfa Örneği:</b>

<!DOCTYPE html>
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Sekme Başlığı</title>
</head>
<body>
      <h1>Sayfa İçindeki Başlık</h1>
      <p>Bu bir paragraf alanıdır. Buraya genellikle sayfadaki uzun yazılar gelir.</p>
</body>
</html>

<b>HTML Sayfa Örneğimizi İnceleyelim:</b>

Örneğimizin <b>1.</b> satırındaki <!DOCTYPE html> etiketi, dokümanın en başında yer alır ve tarayıcıya bu dokümanın bir HTML dokümanı olduğunu söyler.

<b>2.</b> satırda yer alan <html></html> etiketiyse içerisindeki metinlerin HTML olduğunu belirtir.

<b>3.</b> satırda HTML sayfamızın üst kısmını oluşturan ve İngilizce baş anlamına gelen <head></head> etiketi yer alıyor. Bu etiket <b>5.</b> satır için yukarıda açıkladığım <title><title> etiketleri gibi sayfanın baş kısmında yer alması gereken etiketleri içerir.

<b>7.</b> satırdan itibaren başlayan ve İngilizce gövde anlamını taşıyan <body></body> etiketi, HTML sayfanızdaki esas elementleri içerecek kısımdır. Body kısmı, <b>8.</b> satırda yer alan ve sayfalarda başlık oluşturmaya yarayan <h1></h1> etiketi ve <b>9.</b> satırdaki <p></p> paragraf etiketi gibi etiketleri içerisinde barındırır.

<h2>HTML Dosyası Oluşturma</h2>

Örneğimizi bilgisayarınızda denemeniz oldukça kolay çünkü HTML, her türlü tarayıcıda çalışır ve herhangi bir program yüklenmesi gerekmez.

HTML dosyası oluşturmak için Windows işletim sistemindeki Not Defteri veya benzeri bir metin editörüne örneğimizdeki kodları kopyalayın ve metin dosyasını “<b>metinadi.txt</b>” yerine “<b>metinadi.html</b>” olarak kaydedin. Kaydetmiş olduğunuz dokümanı herhangi bir tarayıcıda çalıştırdığınızda aşağıdaki gibi bir görüntüyle karşılaşacaksınız.

<h2>Sık Kullanılan Bazı HTML Etiketleri</h2>

En yaygın kullanılan ve sizin de sık sık kullanacağınız bazı HTML etiketlerini aşağıda listeledim. Bunlar HTML’deki etiketlerin tamamı değildir ve tüm HTML etiketlerini görmek için W3.org’un <a href="https://www.w3.org/wiki/HTML/Elements" target=”_blank">tüm HTML elementleri</a> sayfasını ziyaret edebilirsiniz.

Aşağıdaki örneklerimizin tamamı <body></body> etiketi içerisinde olacağından kodları daha sade bir şekilde sunuyorum. Örnekleri denemek isterseniz gövde içerisinde kullandığınızdan emin olun.

<h3>HTML’de Yorum Satırı Yapma</h3>

Yorum satırları, HTML dosyalarının içerisinde görünen ve tarayıcının kullanıcılara göstermediği kısımlardır. HTML’de yazdığımız kodlara yorum eklemek için  etiketlerinin arasında yorumlarımızı yazıyoruz.

<b>HTML Yorum Satırı Örneği:</b>

<h3>HTML’de Bağlantı Oluşturma</h3>

Bağlantı etiketi, HTML’de en çok kullanılan etiketlerden biridir. HTML’de bağlantı vermek için href="" içerisindeki çift tırnakların arasına bağlantıyı ve <a href=""> ve </a> etiketleri arasına görünecek metni yazmalıyız.

Hemen aşağıdaki örneğimizde HTML bağlantı etiketinin tamamı birlikte yer aldığı için daha anlaşılır olacaktır.

<b>HTML Bağlantı Verme Örneği:</b>

<a href="http://www.ozgurceyaz.com">Özgürce Yaz Sitesine Git</a>

<h3>HTML’de Kalın Yazı ve İtalik Yazı Etiketleri</h3>

HTML’de <b></b> etiketi arasında yer alan metnin tamamı kalın yazıyla yazılmış gibi görünür. İtalik yazı görünümü içinse <i></i> etiketi kullanılır.

<b>HTML Kalın Yazı ve İtalik Yazı Örneği:</b>

<p>Normal yazı kısmı ve <b>kalın yazı kısmı</b>.</p>
<p>Adam öyle iriydi ki herkes ona <i>Koca Hasan</i> diye hitap ediyordu.</p>

<h3>Span Etiketi ve Satır İçi Stil Verme</h3>

<span></span> etiketi genellikle paragraf içerisindeki metinlerin belirli bölümlerine çeşitli özellikler vermek için kullanılır.

Aşağıdaki örneğimizde Span etiketinin içindeki metni style="color:blue" koduyla maviye çevirdik. Buradaki Color, yazı rengini iki nokta üst üsteden sonraki renge çevirmeye yarıyor. Örneğimizde Blue dediğimiz için metin mavi görünecektir.

<b>Span Etiketi ve Style Örneği:</b>

<p>Onun çok güzel <span style="color:blue">mavi</span> gözleri vardı.</p>

<h3>Div Etiketi ve Renk Kodları</h3>

<div></div> etiketi hemen hemen her yerde görebileceğiniz bir kapsayıcıdır. HTML'de herhangi bir bölümü ifade eder. İçerisinde diğer birçok etiket yer alabilir.

Bu örneğimizde <div></div> etiketi içerisine metin etiketleri yerleştirdik ve yazı rengini stil vererek değiştirdik. HEX renk kodu dediğimiz style="color:#0000FF" bu kodla ekranda görünebilecek tüm renkleri elde etmemiz mümkün. HEX renk kodlarını kolayca belirleyebilmek için W3 Schools'un <a href="http://www.w3schools.com/colors/colors_picker.asp" target="_blank">HTML renk paletini</a> kullanabilirsiniz.

<b>Div Etiketi ve HTML Renk Kodu Örneği:</b>

<div style="color:#0000FF">
<h3>Bu Bir Başlıktır</h3>
<p>Bu bir paragraftır.</p>
</div>

<h3>HTML'de Resim Ekleme</h3>

<img src=""> etiketiyle yine bağlantı verme etiketinde olduğu gibi resmin adresini yazarak HTML'de resimleri görüntülemek mümkün. src="" kısmındaki çift tırnakların arasına gelen adrese sahip resim tarayıcılarda tam ekran olarak görünecektir. Eğer resmin belirli bir boyutta görünmesini isterseniz height="" parametresinin çift tırnakları arasına piksel cinsinden resmin boyunu veya width="" parametresini kullanarak yine aynı şekilde resmin enini belirtebilirsiniz.

Örneğimizde resmin 48 piksel eni ve boyu var ayrıca alt="" parametresiyle resmin neyi içerdiğiyle ilgili bir açıklama da ekledik.

<b>HTML Resim Ekleme Örneği:</b>

<h3>HTML'de Liste Oluşturma</h3>

Liste oluşturmak için en başta listenin dış elementini <ul></ul> etiketiyle oluşturmalıyız. Ardından bu etiketin içerisine <li></li> etiketiyle dilediğimiz kadar liste elemanı ekleyebiliriz.

<b>HTML Liste Örneği:</b>

<ul>
<li>Kahve</li>
<li>Limonata</li>
<li>Su</li>
</ul>

<h2>Basit Örnek HTML Sayfa</h2>

En basit haliyle mobil uyumlu bir HTML sayfasının yapısını görebilmeniz için <a href="http://www.ozgurceyaz.com/wp-con ... yfa/index.html" target="_blank">mobil uyumlu basit bir HTML sayfa</a> oluşturdum.

<b>Mobil Uyumlu HTML Sayfa Örneği:</b>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sekme Başlığı</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
      <header>
         <div class="kutu">
            <a href="#" class="logo">Site Adı</a>
            <ul class="menu">
                  <li class="mevcut">
                     <a href="#">Anasayfa</a>
                  </li>
                  <li>
                     <a href="#">Portfolyo</a>
                  </li>
                  <li>
                     <a href="#">Hakkımda</a>
                  </li>
                  <li>
                     <a href="#">İletişim</a>
                  </li>
            </ul>
         </div>
      </header>
      <main>
         <div class="kutu">
            <h1>Sayfa İçindeki Başlık</h1>
            <img src="resim.jpg" class="foto" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et sodales diam. Proin vehicula dui sed urna ullamcorper pretium. Nulla facilisi. Sed a fringilla ex. Donec vel rutrum nisi. Phasellus at viverra diam, quis scelerisque purus. Sed lobortis eros sed leo sagittis, quis pellentesque dui cursus. Cras pharetra sapien orci, at fringilla dolor ultrices a.</p>
            <p>Cras dignissim tempor neque, eu ullamcorper felis convallis ac. Maecenas nec ultricies felis, sit amet vulputate nibh. Aliquam urna diam, eleifend nec dictum non, vulputate in mi. Vestibulum vitae convallis tellus. Proin accumsan consequat orci vulputate hendrerit. Suspendisse sit amet ante ac nibh placerat faucibus ut a mauris.</p>
            <h2>Alt Başlık</h2>
            <p>Sed iaculis justo tortor, nec interdum odio cursus id. Suspendisse ex lacus, egestas et nisl congue, malesuada luctus nisl. Integer sed purus id nisi fermentum facilisis. Sed maximus dapibus magna, quis viverra lacus rutrum ut. Vivamus aliquam quam quis arcu interdum mollis.</p>
            <p>Duis convallis tellus vel felis molestie, maximus commodo metus fermentum. Proin nec purus non ex elementum ultrices in ac libero. Nunc nisi velit, rhoncus eu vehicula vel, faucibus quis lacus.</p>
         </div>
      </main>
      <footer>
         <div class="kutu">
            <ul class="menu">
                  <li class="mevcut">
                     <a href="#">Anasayfa</a>
                  </li>
                  <li>
                     <a href="#">Portfolyo</a>
                  </li>
                  <li>
                     <a href="#">Hakkımda</a>
                  </li>
                  <li>
                     <a href="#">İletişim</a>
                  </li>
            </ul>
            <p class="copyright">Tüm Hakları Saklıdır © Site Adı 2017</p>
         </div>
      </footer>
</body>
</html>

Yukarıdaki kodları kopyalayıp bir "<b>index.html</b>" içerisine kaydedin ve aşağıdaki kodları da aynı klasörün içerisindeki "<b>style.css</b>" dosyasına kaydedin. HTML dosyasını tarayıcınızda çalıştırdığınızda aşağıdaki gibi bir görüntü elde edeceksiniz.

<b>Mobil Uyumlu Sayfa CSS Örneği:</b>

* {
font-family: Arial;
margin: 0;
padding: 0;
}
html {
background-color: #1d4657;
}
a {
text-decoration: none;
color: black;
}
header {
background-color: #4384b1;
width: 100%;
display: inline-block;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li a {
color: white;
font-size: 16px;
font-weight: 300;
padding: 12px 18px;
display: inline-block;
}
.menu li a:hover {
background-color: #5fabe0;
}
.kutu {
width: 100%;
max-width: 1200px;
margin: auto;
}
.logo {
font-size: 24px;
font-weight: 600;
color: white;
padding: 7px 20px;
display: inline-block;
}
.logo:hover {
background-color: #5fabe0;
}
main {
padding: 30px 15px;
min-height: 770px;
background-color: white;
}
h1 {
text-align: center;
font-size: 36px;
margin-top: 15px;
margin-bottom: 30px;
}
h2 {
margin-top: 15px;
}
p {
margin-top: 15px;
}
.foto {
float: left;
margin: 0px 15px 15px 0;
padding: 5px;
background: #f7f5ed;
border: 1px solid #cccabc;
border-radius: 2px;
width: calc(100% - 15px);
max-width: 400px;
}
footer {
width: 100%;
display: inline-block;
}
footer .menu {
float: none;
text-align: center;
margin-top: 10px;
}
footer .menu li a {
padding: 6px;
margin: 6px;
}
footer .menu li a:hover {
background-color: #1d4657;
text-decoration: underline;
}
.copyright {
font-size: 14px;
color: #c5def4;
text-align: center;
margin: 5px 0;
}

Tavsiyem bu dosyaları kendiniz oluşturarak HTML ve CSS dosyalarına alışmanız olsa da dilerseniz dersteki örneği sıkıştırılmış haliyle <a href="http://www.ozgurceyaz.com/wp-con ... HTML-Sayfa.zip">burayı tıklayarak</a> indirebilirsiniz.

<b>Sonuç ve Bir Sonraki Ders</b>

Temel web tasarım dersimizin ilk bölümü olan HTML web sayfası oluşturma dersimizde önemli HTML etiketlerini ve kullanımlarını, HTML sayfa oluşturmayı ve çalıştırmayı öğrendik. Bir sonraki dersimizde sizlere CSS kullanımından bahsedeceğim ve birlikte sıfırdan birkaç sayfalık bir HTML web sitesi oluşturacağız.

Örnek kodları göremeyenler için kaynak: http://www.ozgurceyaz.com/web-ta ... -sayfasi-olusturma/