Aşağıdaki kod blogunda temel HTML yapısına örnekler verdim. Devamında ise önizleme mevcuttur. Siz de kendi html’inizi oluşturabilir. Aşağıdaki HTML etiketlerini deneyebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Temel Yapisi</title>
    <meta charset="UTF-8">
    <meta name="description" content="HTML Egitimi">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Serdar Kurt">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Yorum Satiri -->
<!-- 


Yorum Satiri 2


-->
<p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<!-- Baslik etiketleri -->
<h1>Baslik Etiketleri</h1>
<h2>Baslik Etiketleri</h2>
<h3>Baslik Etiketleri</h3>
<h4>Baslik Etiketleri</h4>
<h5>Baslik Etiketleri</h5>
<h6>Baslik Etiketleri</h6>


<!-- Paragraf Etiketi -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- br Etiketi -->

Serdar<br>
Kurt<br>
HML<br>

<!-- hr Etiketi -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr>

<!-- b etiketi ile kalin yazmak -->

<p>HTML Egitimi <b>Serdar</b> Ile Devam Ediyor</p>


<!-- big etiketi ile Buyuk yazmak -->
<big>HTML Egitimi</big>
<br>

<!-- small etiketi ile Kucuk yazmak -->
<small>HTML Egitimi</small>
<br>

<!-- i egik yazi, italik yazi etiketi -->
<i>HTML Egitimi</i>

<<!-- alt indis <sub></sub> etiketi -->
<p>Ben alt indis yaratirim 3<sub>5</sub></p>

<!-- ust indis <sup></sup> etiketi -->
<p>Ben ust indis yaratirim 3<sup>2</sup></p>

<!-- ins metnin altini cizme etiketi -->

<p><ins>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</ins></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation <ins>ullamco</ins>  laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- del metnin ustunu cizme etiketi -->
<p><del>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</del></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation <del>ullamco</del> laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- Ya da s etiketi de ayni islemi gorur-->
<p><s>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</s></p>

Fiyat <s>345 TL</s>  200 TL

<!-- code etiketi -->
<p><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code></p>

<!-- pre etiketi -->
<p><pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre></p>

<hr>

<!-- Tablo olusturma islemleri
Asagidaki gibi sadece table etiketi kullanildiginda html tarafinda herhangi bir degisiklik gormeyiz, tabloyu gorebilmemiz icin satir ve sutun tanimlamalarinin da yapilmasi gerekmektedir. <tr></tr> Satir, <td></td> ise sutun anlamina gelmektedir. Tablonun daha belirgin olmasi icin table'in borderi ozelligi set edilmeli, width ile sutunlarin genisligini degistirebiliriz. <th></th> lar ile baslik olusturabiliyoruz, sutunun basligi anlamina da gelmektedir. Kactane baslik hazirlanmissa (<th></th>) asagida da baslik sayisi kadar sutun olmalidir.
-->
<table border="1">
    <tr>
        <th>Kurs Adi</th>
        <th>Kurs Tipi</th>
        <th>Kurs Fiyati</th>
        <th>Kurs Sitesi</th>
    </tr>
    <tr>
        <td width="150">PHP Kursu</td>
        <td width="150">Java kursu</td>
        <td width="150">Python Kursu</td>
        <td width="150">C# Kursu</td>
    </tr>  
    <tr>
        <td width="150">PHP Kursu</td>
        <td width="150">Java kursu</td>
        <td width="150">Python Kursu</td>
        <td width="150">C# Kursu</td>
    </tr>  
    <tr>
        <td width="150">PHP Kursu</td>
        <td width="150">Java kursu</td>
        <td width="150">Python Kursu</td>
        <td width="150">C# Kursu</td>
    </tr>  
    <tr>
        <td width="150">PHP Kursu</td>
        <td width="150">Java kursu</td>
        <td width="150">Python Kursu</td>
        <td width="150">C# Kursu</td>
    </tr>  
</table>

<!-- Center ve Div Align Ozellikleri
Div yapilari bloklardir, tek basina birsey ifade etmez bu divler ek class alarak cok sik karsimiza geleceklerdir.
-->
<p>Ben Ortadayim</p>
<center>Ben Ortadayim</center>


<div align="center">Ben Ortadyim</div>

<!-- Listeleme etiketleri -->
<ul>
    <li>PHP Kursu</li>
    <li>Bootstrap Kursu</li>
    <li>Pyhton Kursu</li>
    <li>Java Kursu</li>
</ul>

<ol>
    <li>PHP Kursu</li>
    <li>Bootstrap Kursu</li>
    <li>Pyhton Kursu</li>
    <li>Java Kursu</li>
</ol>

<dl>
    <dt>Udemy Kurslari</dt>
    <dd>Udemy Kurslari Turkiyede en kaliteli icerigi bulabileceginiz platformdur</dd>
</dl>

<!-- img resim ekleme etiketi -->
<img src="http://www.serdarkurt.com.tr/wp-content/uploads/2018/10/vmware-logosu-gorsel1.png" alt="Vmware Logosu">
<br>

<!--Tasarimlarda placeholder kullanimi-->
<img src="http://via.placeholder.com/350x150" alt="Resmin Aciklamasi">
<br>
<img src="http://via.placeholder.com/250x250" alt="Resmin Aciklamasi">
<br>
<!-- iframe kullanimi 
Baska bir siteyi projemize dahil etmeye yarar
-->
<iframe width="100%" height="600" src="http://www.serdarkurt.com.tr"></iframe>
<br>
<br>
<br>
<!-- Form Islemleri 
Kullanici islemleri yapilacaksa form ile database'e bilgi gonderilecekse form ile yapilir.
action = formun gonderilecegi alani isaret eder. Asagidaki ornege gore formda bulunan veriler islenmek uzere islem.php sayfasina post edilecek. action alanini bos birakabiliriz bu sefer post islemini html-temel-yapisi.html olan bu sayfaya (kendi icine) yapacaktir. Bu islem sadece lokal sayfalar icin degil external baglanti kullanarak baska bir alana da gonderme islemi yapabiliriz.
method = POST ve GET 
name benzersiz olmali inputu cagristirmali






-->

<form action="" method="GET" target="_blank">

    Text Type <input style="width: 500px" type="text" name="texttype"><br><br>
    Max<input type="number" name="texttype" max="5"><br><br>
    Min<input type="number" name="texttype" min="5"><br><br>
    Step<input type="number" name="texttype" step="5"><br><br>
    Value <input type="text" name="texttype" value="Serdar Kurt" ><br><br>
    Placeholder <input type="text" name="texttype" placeholder="Adinizi Giriniz."><br><br>
    Required <input type="text" name="texttype" placeholder="Adinizi Giriniz." required="" autofocus=""><br><br>
    ReadOnly <input type="text" name="texttype" placeholder="Adinizi Giriniz." readonly=""><br><br>
    Disabled <input type="text" name="texttype" placeholder="Adinizi Giriniz." disabled=""><br><br>
    Mail Type <input type="email" name="" autocomplete="off"><br><br>
    Number Type <input type="number" name=""><br><br>
    Password Type <input type="password" name=""><br><br>
    Radio Type <input type="radio" name=""><br><br>
    Checkbox Type <input type="checkbox" name=""><br><br>
    File Type <input type="file" multiple="" name=""><br><br>

    Textarea <textarea rows="10" cols="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br><br>

    Textarea <textarea rows="10" cols="100" placeholder="Yorumunuzu Buraya Yaziniz"></textarea><br><br>

    Selectbox <select>
            <option>Secim Yapiniz.</option>
            <option>PHP Kursu</option>
            <option>Bootstrap 4 Kursu</option>
            <option selected="">Java Kursu</option>
    </select><br><br>

    Submit Type <input type="submit" value="Formu Gonder" name="">
    
</form>


<!-- Link verme etiketi -->
<a href="http://www.serdarkurt.com.tr" target="_blank">Serdar Kurt Blog</a> <br><br>

<!-- image'a link vermek-->
<a href="http://www.serdarkurt.com.tr" target="_blank"><img src="http://via.placeholder.com/350x150" alt="Resmin Aciklamasi"></a><br><br>

<!-- Herhangi bir hareket olmasin isteniyorsa asagidaki gibi href kismi degistirilir -->
<a href="javascript:void(0)" target="_blank"><img src="http://via.placeholder.com/350x150" alt="Resmin Aciklamasi"></a><br><br>







</body>
</html>

Ön İzleme:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Baslik Etiketleri

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Serdar
Kurt
HML

HTML Egitimi Serdar Ile Devam Ediyor

HTML Egitimi

HTML Egitimi

Ben alt indis yaratirim 3₅

Ben ust indis yaratirim 3²

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ~~ullamco~~ laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fiyat ~~345 TL~~ 200 TL

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kurs Adi	Kurs Tipi	Kurs Fiyati	Kurs Sitesi
PHP Kursu	Java kursu	Python Kursu	C# Kursu
PHP Kursu	Java kursu	Python Kursu	C# Kursu
PHP Kursu	Java kursu	Python Kursu	C# Kursu
PHP Kursu	Java kursu	Python Kursu	C# Kursu

Ben Ortadayim

Ben Ortadyim

PHP Kursu
Bootstrap Kursu
Pyhton Kursu
Java Kursu

PHP Kursu
Bootstrap Kursu
Pyhton Kursu
Java Kursu

Udemy Kurslari: Udemy Kurslari Turkiyede en kaliteli icerigi bulabileceginiz platformdur

Text Type

Max

Min

Step

Value

Placeholder

Required

ReadOnly

Disabled

Mail Type

Number Type

Password Type

Radio Type

Checkbox Type

File Type

Textarea Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Textarea

Selectbox

Submit Type

Serdar Kurt Blog

Etiketler

Serdar Kurt08/11/2018Son güncelleme: 11/05/2020

0 7 11 dakika okuma süresi

Ön İzleme:

Baslik Etiketleri