HTML ve CSS Konumuzun 2. Dersine Gelmiş Bulunmaktayız.

Adım 1: Haydi Başlık ve Paragraf Etiketlerinin Kullanımına Bakalım!

HTML içinde metinleri tanımlamak için başlık (<h1>,<h2>,<h3> vb.) ve paragraf (<p>) etiketlerini kullanabilirsiniz.

Örneğin:

<!DOCTYPE html>
<html>
<head>
<title>HTML ve CSS Dersi</title>
</head>
<body>
<h1>Hoş Geldiniz!</h1>
<p>Merhaba, HTML ve CSS dersine hoş geldiniz!</p>
</body>
</html>

İşte Çıktısı:

Adım 2: Haydi Liste Etiketlerinin Kullanımına Bakalım!

Sıralı (<ol>) veya sırasız (<ul>) liste oluşturmak için <li> (list item) etiketlerini kullanabilirsiniz.

Örneğin:

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTML ve CSS Dersi</title> 
</head>
<body> 

<h1>Hoş Geldiniz!</h1> 

<p>Merhaba, HTML ve CSS dersine hoş geldiniz!</p> 

<h2>Konular</h2> 

 <ul> 
  <li>HTML</li> 
  <li>CSS</li>
  <li>JavaScript</li> 
</ul> 

</body>
 </html>

İşte Çıktısı:

Adım 5: Haydi Basit Bir Resim Eklemenin Kullanımına Göz Atalım!

Bir resim eklemek için <img> etiketini kullanabilirsiniz. src özelliği ile resmin dosya yolunu belirtmelisiniz.

Öncelikle koyacağımız resmi klasörümüzün içine eklememiz lazım

İşte Yapmamız Gereken:

İndirdiğimiz resmi daha önceden oluşturduğumuz klasörümüzün içine atıyoruz sadece.

(Resmi İndirin)

Çok Basit Değilmi?

Haydi Dersimize Devam Edelim!

Şimdi İse Yapmamız Gerek Tek Şey Kodları Yazmak, Yani İndirdiğimiz Resmi Adıyla Yani Src Biçiminde Ekliyoruz.

Örneğin:

<!DOCTYPE html> 
<html> 
<head> 

<title>HTML ve CSS Dersi</title> 

</head>
 <body> 
 
 <h1>Hoş Geldiniz!</h1>  
 <p>Merhaba, HTML ve CSS dersine hoş geldiniz!</p> 
 <h2>Konular</h2>  

 <ul>      
 <li>HTML</li>  
     <li>CSS</li> 
      <li>JavaScript</li>  
 </ul>  

 <img src="example.png" alt="Resim Açıklaması"> 

</body>
</html>

İşte Çıktısı: