Html Dersleri / HTML ile İlk Sayfayı Oluşturmak

HTML ile İlk Sayfayı Oluşturmak

İlk HTML sayfamızı nasıl oluşturuyoruz?

Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;

Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir.
Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)
Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.
Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.

Önce not defterimizi açalım.

Aşağıdaki yazıyı açtığınız sayfaya yazın.

Yukardaki kodları yazdıktan sonra Farklı Kaydet Memüsü ile index.html adını verin ve önceden belirlediğiniz bir yere kaydedin.

ilk.html adındaki html dosyamız

Oluşturduğumuz html sayfası üzerinde sağ tıklarak Not Defteri ile dosyamızı açarsak html sayfamızın kaynağını yani html kodlarını görürüz.

Veya web sayfası üzerinde kaynağı göster diyerekte sayfa kaynağına yani html kodlarına erişiriz.

Yukardaki şekilde html sayfa ve sayfanın kaynağını görüyorsunuz.

Genel Yapı

<!DOCTYPE html>< HTML5 kullandığımızı belirtir >
<html lang="tr">< HTML belgesinin başlangıcı, sayfanın dili Türkçe >

    <head>< Sayfa hakkında bilgiler burada bulunur >

    <meta charset="UTF-8">  < Türkçe karakterlerin düzgün görünmesini sağlar >

    <meta name="description" content="Web Tasarımı ve Programlama">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="İKRA">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    < Telefonlarda sayfanın ekran genişliğine uyum sağlamasını sağlar >

    <title>Benim Web Sitem</title>    < Tarayıcı sekmesinde görünen başlık >

    <link rel="icon" href="favicon.ico" />    < Tarayıcı sekmesinde görünen küçük simge >

    <link rel="stylesheet" href="style.css">    < Harici CSS dosyasını sayfaya bağlar >

        <style>
            /* Sayfanın CSS kodları */

            body {
                font-family: Arial;
                /* Yazı tipini belirler */

                background: #f2f2f2;
                /* Sayfanın arka plan rengini belirler */
            }

            h1 {
                color: blue;
                /* H1 başlığının rengini belirler */
            }
        </style>

    </head>< HEAD bölümü burada bitti >

    <body>< Kullanıcının gördüğü bölüm burada başlar >


        <h1>Merhaba Dünya</h1>    < Büyük başlık >

        <p>Benim ilk web sitem.</p>    < Paragraf >


    </body>< BODY bölümü burada bitti >

</html> < HTML belgesinin sonu >

<script>< JavaScript kodlarının başlangıcı >

    setTimeout(mesajGoster, 3000);
    
    function mesajGoster() {  // Butona basıldığında çalışacak fonksiyon

        alert("Merhaba!");  // Ekrana mesaj kutusu çıkarır
    }

</script>< JavaScript kodlarının sonu >

54,404 Okunma 04/07/2007.07:33:43 21/09/2026.12:54:44

/ Yorumunuzu Ekleyin

İsminiz

Email Adresiniz

Avatar

jpg, gif, png türündeki resimleri seçmelisiniz

Yorumuzu Yazınız

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

81,769 okuma, 04.10.2024 14:56

Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

63,308 okuma, 11.10.2024 10:43

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

63,216 okuma, 26.10.2026 10:44

Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

60,571 okuma, 16.10.2025 10:45

HTML5 Form Yapısı ve Form Elemanları

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.Formlar .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

56,446 okuma, 12.11.2024 10:06

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

54,057 okuma, 02.07.2019 15:19

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeri?ini yerleştirmektir

48,948 okuma, 19.09.2014 15:14

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

43,010 okuma, 27.03.2019 00:51

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

42,854 okuma, 11.10.2024 12:24

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

42,327 okuma, 04.10.2024 14:57

HEAD Tagı Nasıl Kullanılır?

HTML <head>öğesi, aşağıdaki öğelerin bir kapsayıcısıdır: <title>, <style>, <meta>, <link>, <script>ve <base>.

38,175 okuma, 25.09.2025 15:34

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

37,542 okuma, 13.10.2026 10:18

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

37,250 okuma, 06.03.2015 17:21

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

36,170 okuma, 06.03.2015 17:21

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

35,862 okuma, 11.10.2024 10:47

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?

35,596 okuma, 09.10.2025 10:56

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Semantik (Anlamlı) Taglar

HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.

31,417 okuma, 20.10.2026 10:15

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Semantik (Anlamlı) Taglar

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

31,358 okuma, 04.10.2024 15:01

HTML nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.

31,014 okuma, 29.05.2014 21:38

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

30,580 okuma,

FORM Tagı

Form tagı ve parametreleri

29,919 okuma, 18.10.2024 09:39

Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir.Arama motorlarına site ve içeriği hakkında bilgi sunar.Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar.Arama motorlarının özellikleri için buraya bakabilirsiniz.Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var.Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

29,475 okuma, 11.10.2024 11:12

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

28,997 okuma, 08.10.2012 09:35

xml xhtml html hakkında

Xml Html arasındaki fark

28,528 okuma, 11.10.2024 10:43

HR Tag

etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

28,312 okuma, 03.12.2012 11:17

DIV Tagı Nedir?

Web sitelerinin iskeletleri DIV tagı kullanarak oluşturulur. Ayrıca web sitesindeki nesnelerin yerleri DIV tagı ile belirlenir.

27,819 okuma, 19.10.2026 13:45

Arama Motorlarına Kayıt

27,338 okuma, 11.03.2014 23:01

BR Tag

Bir alt satıra geçmek için kullanılır.

25,784 okuma, 03.12.2012 09:35

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

25,474 okuma, 05.12.2012 01:50

U Tag

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

24,374 okuma, 03.12.2012 09:38