İnternette görüntülemiş olduğumuz yazı, görsel, video, ses dosyası; hatta okumuş olduğunuz bu yazı bile temeli HTML (Hypertext Markup Language) kodlarından oluşmuştur. Bu makale Temel HTML Eğitimi serimizin ilk parçası olup, adından da anlaşılacağı gibi temel düzeyde html kodlamayı en basite indirgeyerek anlatmayı amaçlıyorum.
İçindekiler
HTML Nedir?
HTML(Hypertext Markup Language) açılımı Metin işaretleme dilidir. Bir programlama dili olan HTML yorumlayıcılar tarafından işlenerek son kullanıcılar tarafından görüntülenir.
Temel HTML Eğitimi
Bir programlama dili olan HTML text editörün uzantısı .htm ve ya .html olacak şekilde kaydedilir ve <html> </html> tagları arasına yazılır. Bu taglar arasında <head> </head>, <body> </body>, <title></title> gibi farklı işlev ve görevler üstlenmiş birazdan anlamlarını tek tek anlatacağımız kod blokları da bulunur.
HTML Etiketi ve İlk Örnek
Kodlamak için herhangi bir derleyiciye gerek yoktur. Temel HTML Eğitimi aldıktan sonra Herhangi bir not defterini açıp aşağıdaki kodu yada herhangi kurallara uygun kodunu yapıştırarak “.txt” olan uzantıyı “.html” olarak değiştirdiğinizde web browser üzerinden web sitenizi görüntüleyebilirsiniz.
<html>
<head> Bu Alan (head) sayfanın en üst kısmını ifade eder
<title>Sayfa Başlığıdır Bu alan web sitenizin browserda en üst sekmelerde görünen adıdır.</title>
</head>
<body>
<h1>İçerik Ana Başlığı</h1>
<h2>İçerik İkinci Başlık</h2>
<h3>İçerik Üçüncü Başlık</h3>
<p>Paragraf</p>
</body>
</html>
Bu örnekte de görüldüğü gibi HTML çok basit bir yapıya sahip olup, içerisine eklenecek birçok kod ile ve biraz da CSS yardımı ile web siteleri yapılabilir. Tabi ayrica Temel HTML Eğitimi.
Yardımcı Komutlar
- Yazınız içerisinden başla bir linke gidilmesini istediğinizde bunu HTML de aşağıdaki komut ile yapabilirsiniz.
Örnek : Bilişim Durağı ß Bu şekilde görünmesi ve tıkladığınızda yazdığınız adrese gidebilmesi için aşağıdaki komut kullanılır.
<a href=”https://bilisimduragi.com”>Bilişim Durağı</a>
- Tablo oluşturmak istediğinizde bu tablonun kaç sütun ve kaç satır olacağını, kenar kalınlıklarını, hizalama ayarlarını… vb. ayarları yapabilmek için aşağıdaki komut kullanılır.
<table border=”1″>
<body>
<tr>
<td> </td>
<td>Marka</td>
<td>Model<br />
</td>
</tr>
<tr>
<td>Ahmet</td>
<td>Ford</td>
<td>Fiesta</td>
</tr>
<tr>
<td>Mehmet</td>
<td>Honda</td>
<td>Civic</td>
</tr>
</body>
</table>
Çıktısı aşağıdaki gibidir.
| Marka | Model | |
| Ahmet | Ford | Fiesta |
| Mehmet | Honda | Civic |
<table> etiketinin içinde en sık kullanılan biçimlendirme komutları şunlardır:
border: Dış kenar çizgi kalınlığını ifade eder
width: Tablonun genişliğini piksel olarak ifade eder.
heigth: Tablonun yüksekliğini piksel olarak ifade eder.
bordercolor: Tablonun çizgi rengini ifade eder.
bgcolor: Tablonun arkaplan rengini ifade eder.
align: Veriyi yatay olarak left:sola , right: sağa , center:ortaya olacak şekilde hizalar
valign:Veriyi dikey olarak top:üste , bottom:alta , middle:ortaya olacak şekilde hizalar.
- Resim eklemek istendiğinde <img src=”resimler/a.jpg”/> şeklinde bir komut kullanılır. Bu komutta “ src=”resimler/a.jpg” “ kısmında ifade edilmek istenen web sitenizin kök dizininde resimler klasörünün içerisinde bulunan a.jpg isimli resim dosyasının açılacağını ifade eder.
- Sitenize kayan yazı eklemek için <marquee direction=right>BİLİŞİM DURAĞI</marquee> komutu kullanabilirsiniz. direction=right ifadesinin anlamı yazı sağdan sola doğru hareket etsin demektir. Right yerine left yazmanız durumunda soldan başlayıp sağa hareket edecektir.
Bunun gibi birçok ” Temel HTML Eğitimi ” kodu bulunmaktadır.
Bu kodlara https://www.w3schools.com/html/default.asp adresinden örnekleri ile birlikte ulaşabilişiniz.
Bilişim Durağında Tekrar Görüşmek Üzere.
