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

Baslik Etiketleri

Baslik Etiketleri

Baslik Etiketleri

Baslik Etiketleri
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.

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

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.


HTML Egitimi Serdar Ile Devam Ediyor


HTML Egitimi


HTML Egitimi


HTML Egitimi

<

Ben alt indis yaratirim 35

Ben ust indis yaratirim 32

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.

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.

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 Ortadayim

Ben Ortadyim

  • PHP Kursu
  • Bootstrap Kursu
  • Pyhton Kursu
  • Java Kursu
  1. PHP Kursu
  2. Bootstrap Kursu
  3. Pyhton Kursu
  4. Java Kursu
Udemy Kurslari
Udemy Kurslari Turkiyede en kaliteli icerigi bulabileceginiz platformdur


Vmware Logosu


Resmin Aciklamasi

Resmin Aciklamasi


Text Type

Max

Min

Step

Value

Placeholder

Required

ReadOnly

Disabled

Mail Type

Number Type

Password Type

Radio Type

Checkbox Type

File Type

Textarea

Textarea

Selectbox

Submit Type


Serdar Kurt Blog


Resmin Aciklamasi


Resmin Aciklamasi

 

Kategoriler: HTML

0 yorum

Bir cevap yazın

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