En basit haliyle html kodları kullanarak iletişim bilgilerinden oluşan kartvizit niteliğinde basit bir web sitesi sayfasını kendiniz kolayca hazırlayabilirsiniz.
Profesyonel bir web sitesi yaptırıncaya kadar kartvizitinizden yada her hangi bir şekilde alan adınıza ulaşan kişilerin web sitenize girdiğinde boş bir sayfa yerine iletişim bilgilerinizden oluşan, “çok yakında yeni web sitemiz yayına başlayacaktır” gibi bir açıklamayla karşılanmasını istiyorsanız bu yazı tam size göre.
Tabi öncelikle domain tescilini yaptığınızı ve hosting hesabınızın olduğunu varsayalım.
HTML kodları kullanarak basit web sitesi hazırlamak
Eğer bir kod editörünüz yok ise boş bir notpad (Not Defteri) belgesi açın,
açtığınız boş sayfayı “farklı kaydet” seçeneğini seçerek, dosya ismi “index.html” olacak şekilde kaydedin.
Şimdi oluşturduğunuz index.html sayfasına aşağıdaki kodları ekleyin.
[dm_code_snippet background=”no” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Site Başlığı</title>
</head>
<body>
</body>
</html>
[/dm_code_snippet]
Bu kodları eklediğinizde sayfanızda her hangi bir yazı görünmeyecektir, henüz sadece bu belgenin bir web sayfası olduğunu tarayıcalara tanıtmış olduk.
Şimdi gelelim yayınlamak istediğiniz bilgileri nasıl ekleyeceğinize.
Yukarıdaki eklediğiniz kod parçasında bulunan <body> etiketinin altına eklemek istediğiniz yazıyı yazabilirsiniz. Buraya yazacağınız yazılar sayfada görünecektir. Ancak ne kadar yazarsanız yazın yazdığınız yazılar hep yan yana ve sayfanın en solunda ve en üstünde görünecektir. Eğer biraz düzenli ve göze hoş gelecek şekilde görünmesini isterseniz işi biraz daha derinleştirelim.
Kullanabileceğiniz basit düzen elementleri;
<p></p> paragraf etiketidir. <p>buraya yazınızı yazın ve etiketi kapatmak için </p> şeklinde kullanabilirsiniz.
<h1></h1> başlık etiketidir. Ayrıca h2, h3, h4, h5 ve h6’da başlık etiketleridir. Ancak basit bir web sayfası hazırladığımızı düşünürsek h1 ve h2 etiketleri yeterli olacaktır.
<br> satır atlamak için kullanılır. Biralt satıra geçmek istediğiniz yere <br> etiketini eklemeniz yeterlidir.
<a></a> link vermek için kullanılır. Farklı bir web sitesine bağlantı vermek için bu etiketi kullanabilirsiniz.
Kullanım örneği; <a href=”https://www.retrovint.com” title=”buraya bağlantıyı açıklayan bir kaç kelime”>retrovint</a>
<img> resim eklemek için kullanılır.
Kullanım örneği; <img src=”logo.jpg” alt=”resmi açıklayan bir kaç kelime” width=”300″ />
Etiket içerisinde yer alan “src” kısmına resim yolunu girmelisiniz, eğer eklemek istediğiniz resim index.html dosyası ile aynı yerde ise logo.jpg şeklinde, eğer klasöt içinde ise images/logo.jpg şeklinde klasör yolunuda belirterek eklemelisiniz. Yine etiketin içerisinde yer alan “width” kısmı ise resmin pixel cinsinden genişlik değerini ifade eder, boş bırakabilirsiniz, ancak resmin düzgün görüntülenmesi için doldurmanızı tavsiye ederim.
Yukarıdaki bilgilere dayanarak basit bilgilerden oluşan bir sayfa hazırlayalım;
[dm_code_snippet background=”no” background-mobile=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Site Başlığı</title>
</head>
<body>
<h1>Retrovint</h1>
<p>KOZA İnteraktif Web Ajansı Blog’u</p>
<p>Profesyonel web sitesi tasarımı için <a href=”http://www.kozainteraktif.com” title=”KOZA İnteraktif Web Sitesi”>buradan</a> web sitemizi ziyaret edebilirsiniz.</p>
<h2>Özellikler</h2>
<p>Yazımıza biraz daha özellik katalım, <br>mesela biraz <b>kalın</b>, biraz <u>altı çizili</u>, birazda <i>yatık yazı</i> olsun.</p>
<img src=”logo.jpg” alt=”Logo” width=”220″ />
<p>Teşekkürler</p>
</body>
</html>
[/dm_code_snippet]
Yukarıdaki kodları oluşturduğumuz web sayfasına eklediğinizde artık daha düzgün görünen bir sayfaya sahip olacaksınız. Ama hala eklediğimiz yazılar sayfada ortalı değil.
İşe biraz daha estetik boyut kazandırmak istersek, css dosyası ile sayfamıza stil kodlarını eklememiz gerekir.
Bunun için en basit yöntem bootstrap kütüphanesini kullanmak olabilir. Bootstrap stil dosyasını sayfamıza dahil etmek için;
Buraya tıklayın, açılan sayfadaki css başlığı altında bulunan (<link ..) kısmını kopyalayın ve </head> etiketinden önce ekleyin.
Ardından bootstrap hazır kodlarını sayfamıza dahil edebiliriz.
Basit web sitesi sayfamıza en basit haliyle bir kaç kod parçası ekleyelim ve görünümünü daha düzgün bir hale getirelim.
[dm_code_snippet background=”no” background-mobile=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]
<div class="container"> <div class="row"> <div class="col-md-6"> <h1>Retrovint</h1> <p>KOZA İnteraktif Web Ajansı Blog’u</p> <p>Profesyonel web sitesi tasarımı için <a href=”http://www.kozainteraktif.com” title=”KOZA İnteraktif Web Sitesi”>buradan</a> web sitemizi ziyaret edebilirsiniz.</p> <h2>Özellikler</h2> <p>Yazımıza biraz daha özellik katalım, <br>mesela biraz <b>kalın</b>, biraz <u>altı çizili</u>, birazda <i>yatık yazı</i> olsun.</p> </div> <div class="col-md-6"> <img src=”logo.jpg” alt=”Logo” width=”220″ /> </div> </div> </div>
[/dm_code_snippet]
Yukarıdaki kodları <body> etiketinden sonra eklediğimizde web sayfamız artık ortalı ve iki sütün halinde görünecektir.
Şimdi tüm kodları bir araya toplayıp index.html sayfamıza ekleyelim
[dm_code_snippet background=”no” background-mobile=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Site Başlığı</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <h1>Retrovint</h1> <p>KOZA İnteraktif Web Ajansı Blog’u</p> <p>Profesyonel web sitesi tasarımı için <a href=”http://www.kozainteraktif.com” title=”KOZA İnteraktif Web Sitesi”>buradan</a> web sitemizi ziyaret edebilirsiniz.</p> <h2>Özellikler</h2> <p>Yazımıza biraz daha özellik katalım, <br>mesela biraz <b>kalın</b>, biraz <u>altı çizili</u>, birazda <i>yatık yazı</i> olsun.</p> </div> <div class="col-md-6"> <img src=”logo.jpg” alt=”Logo” width=”220″ /> </div> </div> </div> </body> </html>
[/dm_code_snippet]
BONUS
Yazının en altında bulunan indirme bağlantısından basit web sitesi dosyalarını hazır şekilde bilgisayarınıza indirebilirsiniz.
İndirme klasörü içerisinde 4 adet farklı html sayfa mevcut, bu sayfayı düzenlemek için not defteri kullanabilirsiniz.
html sayfaları düzenlerken problemle karşılaşmamak için notepad++ programını indirip bu program üzerinde düzenleme yapmanızı tavsiye ederim.
Notepad++ programını indirmek için tıklayın >>
Örnek html dosyaları indirmek için tıklayın >>
Örnek dosyalar içerisinde değişiklik yaparak kolayca web sayfanızı oluşturabilirsiniz.
Hazırladığınız dosyayı web hosting paneliniz üzerinden yada FTP programı aracılığı ile sunucuda ana dizine yüklemeniz gerekmektedir.
Ardından web sitenizi açtığınızda oluşturduğunuz sayfayı görebilirsiniz.
