Sıfırdan İleri Seviye HTML Eğitimi | Özet - SiberMega - Basit Yazılım ve Tasarım Eğitimleri

Post Top Ad

Responsive Ads Here

Post Top Ad

25/07/2022

Sıfırdan İleri Seviye HTML Eğitimi | Özet

Responsive Ads Here

html-kodlama-nasil-ogrenilir


Merhaba arkadaşlar. Bu yazımda yazılıma yeni başlayacak arkadaşların genellikle ilk tercihi olan HTML konusunda temel kavramları anlayarak sıfırdan ileri seviyelere kadar projeler çıkarmayı sağlayacak bir doküman olarak paylaşmak istedim. Hızlı bir HTML turuna çıkıyoruz.

HTML Nedir?

HTML Yazmak İçin Kullanılan IDE’ler

Temel HTML Yapısı

Screenshot_1
Buradaki yapıdaki temel elemanların görevleri aşağıdaki gibi listelenebilir.

Screenshot_2

Meta Etiketleri

Screenshot_4

Yorum Satırları

HTML Etiketleri

Screenshot_5

Yukarıdaki kodun çıktısı aşağıdaki gibidir.

HX-Ba%C5%9Fl%C4%B1k-Etiketleri

Paragraf Etiketi


Screenshot_6

Paragraf-Etiketleri

Yazı Biçimlendirme Etiketleri



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Biçimlendirme Etiketleri</title>
</head>
<body>
<h2>Yazı Kalınlaştırma</h2>
<p>
<b>Lorem</b> ipsum dolor sit amet <strong>consectetur</strong>, adipisicing elit. Ipsa, ducimus.
</p>
<h2>Yazı İtalikleştirme</h2>
<p>
<i>Lorem</i> ipsum dolor sit amet <em>consectetur</em>, adipisicing elit. Ipsa, ducimus.
</p>
<h2>Yazı Altını çizme</h2>
<p>
<u>Lorem</u> ipsum dolor sit amet <ins>consectetur</ins>, adipisicing elit. Ipsa, ducimus.
</p>
<h2> Üs alma</h2>
<p>
x <sup>2</sup>
</p>
<h2>Alt indis</h2>
<p>
x <sub>2</sub>
</p>
<h2>yazının üstünü çizme</h2>
<p>
x <del>2</del>
</p>
<h2>yazının işaretleme</h2>
<p>
Lorem ipsum <mark>dolor sit </mark> amet.
</p>
</body>
</html>
1*ziWCunF_8hrcGdpDZHVcZA

Listeler

<h2>Alışveriş Listesi</h2>
<ul>
<li>Yumurta</li>
<li>Ekmek
<ul>
<li><p>Kepek Ekmek </p></li>
<li><p>Çavdar Ekmek</p></li>
<li><p>Normal Ekmek</p></li>
</ul>
</li>
<li>
Sebze
<ul>
<li>Biber
<ul>
<li>Yeşil Biber</li>
<li>Kırmızı Biber</li>
</ul>
</li>
</ul>
</li>
</ul>
1*Ef_Qb5z-jAasgpGR-Mag4w
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sıralı Listeler</title>
</head>
<body>
<h2>Alışveriş Listesi</h2>
<ol>
<li>Yumurta</li>
<li>Ekmek
<ol>
<li><p>Kepek Ekmek </p></li>
<li><p>Çavdar Ekmek</p></li>
<li><p>Normal Ekmek</p></li>
</ol>
</li>
<li>
Sebze
<ol>
<li>Biber
<ul>
<li>Yeşil Biber</li>
<li>Kırmızı Biber</li>
</ul>
</li>
</ol>
</li>
</ol>
<p>Büyük Harf</p>
<ol type="A">
<li>1. Satır</li>
<li>2. Satır</li>
</ol>
<p>Küçük Harf</p>
<ol type="a">
<li>1. Satır</li>
<li>2. Satır</li>
</ol>
<p>Büyük Roma Rakamı</p>
<ol type="I">
<li>1. Satır</li>
<li>2. Satır</li>
</ol>
<p>Küçük Roma Rakamı</p>
<ol type="i">
<li>1. Satır</li>
<li>2. Satır</li>
</ol>
</body>
</html>
1*D4mBwIx5uOcxuHNF6oNYAg

Resim İşlemleri

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resim İşlemleri</title>
</head>
<body>
<img src="fred.png" width="300" height="300">
<img src="vilma.jpg" width="300" height="300">
<img src="vilma.jp" width="300" height="300" alt ="vilma">
<br>
</body>
</html>
1*0mQaejc3xTfq8pkncCnceA

Link İşlemleri

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link İşlemleri</title>
</head>
<body>
<a id="images" href="02-images.html"> Resimler</a>
<br/>
<a href="https://www.google.com/">Google</a>
<br>
<a href="fred.png">Fred</a>
<br>
<a href="Link.rar">İndir</a>
<br>
<a href="02-images.html" target="_blank">
<img src="fred.png">
</a>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet explicabo repellendus officiis harum. Blanditiis veritatis impedit odit repellendus libero sapiente molestiae autem possimus aut, architecto ipsa quis assumenda laboriosam corrupti!
</p>
<a href="#images">Başa Dön</a>
</body>
</html>
1*Rh8oWLbEZJ7QLvTVTH00ig

Tablo İşlemleri

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tablolar</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th> Kurs Adı</th>
<th> Ders Saati</th>
<th> Ders Adedi</th>
</tr>
</thead>
<tbody>
<tr>
<td> Komple Web Geliştirme</td>
<td> 45</td>
<td> 300</td>
</tr>
<tr>
<td> Core 2 MVC Eğitimi: Sıfırdan İleri Seviyeye</td>
<td>20</td>
<td rowspan="2">300</td>
</tr>
<tr>
<td colspan="2" > Core 2 MVC Eğitimi: Sıfırdan İleri Seviyeye</td>
</tr>
</tbody>
</table>
</body>
</html>
0*6GQt8jPfQUpnN9zw

Div ve Span Kullanımı

Semantic Elementler

0*eatetVFoJpZxIKZh
Etiket       Açıklama<article>  İçeriğin makale, deneme olduğunu belirtir.<aside>      İçeriğin ana içerik haricinde yan menü, yan içerik olduğunu belirtir.<details>  Özet için detay bilgisi tanımlar.<figcaption> <figure> etiketi için başlık belirtir.<figure>   İçeriğin şekil, fotoğraf, şema olduğunu belirtir.<footer>   İçeriğin sayfa veya bölüm altı bilgisi olduğunu belirtir.<header>   İçeriğin sayfa veya bölüm başlığı olduğunu belirtir.<main>       Sayfa içeriğinin ana kökünü belirtir.<mark>       İçeriğin vurgulanmış, işaretlenmiş olduğunu belirtir.<nav>      İçeriğin menü olduğunu belirtir.<section>  İçeriğin sayfanın bir bölümü olduğunu belirtir.<summary>  <details> etiketi için özet/başlık tanımlar.<time>       İçeriğin tarih/saat olduğunu belirtir.

HTML Form Etiketleri

1*HVJ6p0ROJV1BFunRw8SFGQ

Iframe

<!DOCTYPE html><html lang="en"> <head>   <meta charset="UTF-8">   <title>Iframe</title>  </head>  <body>  <iframe src="forms.html" name="myframe" frameborder="1" width="400" height="400" title="Üyelik Formu"></iframe>  <p>   <a href="https://sadikturan.com" target="myframe">Linke git</a>  </p>   <iframe width="560" height="315" src="https://www.youtube.com/embed/MU_YQtgdkKA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  </body></html>
1*RVgRdQClJBLB73klF-HMlA

Kısa Bir Kapanış

Hiç yorum yok:

Yorum Gönder

Görüş ve Düşüncelerinizi Bizimle Paylaşmayı Unutmayın.

Post Top Ad