logo logo

HacktorX sitesi kar amacı gütmeyen bir siber güvenlik platformudur.

Elazığ, Türkiye

Fırat Üniversitesi Rektörlük Kampüsü, 23100
[email protected]
Yazılım

Web Sayfasının Temel Taşı: HTML-1

Giriş

HyberText Markup Language Türkçe’de Hiper Metin İşaretleme Dili olan HTML, web sayfaları oluşturmak için kullanılan standart bir işaretleme dilidir. HTML tag ve etiket diye isimlendirilen kodlardan oluşur. Bu kodlar < ile başlar ve > ile biter ancak bazı kodların kapatma etiketi yoktur. Kapatma etiketi olan kodlarla başlangıçtaki değerle birlikte / işareti kullanılmalıdır. İşaretleme dili olan HTML bir binanın iskeleti olarak tanımlayabiliriz.

Genel Kodlar

<!DOCTYPE html> ifadesi kodu HTML5 standartlarına göre yazıldığını gösterir.

<html> </html> etiketi, yazılacak tüm HTML kodları bu etiket arasında tanımlanır.

<head> </head> Sayfa hakkında meta etiketleri, dili, anahtar kelimeleri, sayfanın yazarı, stil tanımlamaları ve bunlar gibi birçok önemli bilginin yazıldığı kısımdır. Bu etiket arasına yazılanlar web sayfasında görünmez.

<body> </body> Web sayfasının içeriği ile ilgili tüm bilgiler burada yer alır. Metinler, resimler, bağlantılar gibi bilgiler tanımlanır. Burada belirtilen her şey sitede görünür.

<title> </title> Web sayfasının başlığının yazıldığı kısımdır, head etiketi arasına tanımlanır ve sadece bir kere tanımlanır.

<!DOCTYPE html>
<html>

<head>
    <title>Genel kod kullanımı</title>
</head>

<body bgcolor="#f7f7f7">
    genel kodlar
</body>

</html>

Metin Düzenleme Kodları

Başlık Etiketleri<h1> Web sayfasının içeriğinin daha kullanıcılar tarafından daha kolay okunabilmesini sağlar. Başlıklar metnin önemli olmasına göre düzenlenmelidir. Bu etiketler arama motorlarının web sayfasının yapısını anlamasına da yardımcı olurlar. Başlığın önemli olmasına göre h1, h2, h3, h4, h5, h6 etiketleri vardır. Başlık etiketi kullanıldığında kod bir satır atlamaktadır.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7">
    <h1>Başlık 1</h1>
    <h2>Başlık 2</h2>
    <h3>Başlık 3</h3>
    <h4>Başlık 4</h4>
    <h5>Başlık 5</h5>
    <h6>Başlık 6</h6>
</body>

</html>

<p> </p> Paragraf etiketidir. Her bir paragrafı ayrı ayrı tanımlamak yerine, tek bir paragraf etiket içinde yazabiliriz. Tek sorun paragraf sona erdiğinde otomatik olarak yeni bir satıra geçmez. Satır atlamak için <br> etiketi kullanılmalıdır. Paragrafın sayfanın sağında, ortasında ve solunda gibi yer belirlemek istersek  <p align=left> kodunu kullanırız.

<br> Metni yazarken bir alt satıra geçmek için kullanırız. Kapatma etiketi yoktur.

<strong> </strong> Vurgu etiketidir. Metnin kalın yazılmasını sağlar.

<em> </em> Vurgu etiketidir. Cümlenin italik yada koyu yazılmasını sağlar.

<b> </b> Metnin kalın yazılmasını sağlar.

<i> </i> Metnin italik yazılmasını sağlar.

<u> </u> Metni altı çizgili yapar.

<sup> </sup> Metin üst indis olarak yazar.

<sub> </sub> Metin alt indis olarak yazar.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7>

  <p>Paragraf Etiketi</p>
  <strong> Kalın Yazar</strong>
  <br><br>
  <em>İtalik Yazar</em>
  <br><br>
  <b>Kalın Cümle</b>
  <br><br>
  <i>İtalik Cümle</i>
  <br><br>
  <u>Altıçizgili Yazar</u>
  <br><br>
  <p> Normal paragraf<sub>alt_indis</sub><sup>üst_indis</sup></p>

</body>

</html>

<pre> </pre> Metindeki her bir karakteri aynı genişlikte gösterir. Bu etiketi kullanırken bir alt satıra geçmek için <br> etiketini kullanmanız gerekmez.

<div> </div> Bölüm etiketidir. Sayfada yeni bir bölüm açmak için kullanırız.

<blockquote> </blockquote> Yazılan metnin her iki yanında boşluk bırakmayı sağlar.

<hr> Sayfanın genişliği kadar yatay çizgi çeker. Kapatma etiketi yoktur.

<font size=?> </font> Yazılacak olan metin harflerinin büyüklüğü belirlenir.

<font color=?> </font> Yazılacak olan metin harflerinin rengini belirlenir. 

<!DOCTYPE html>
<html>

<body bgcolor="f7f7f7">

    <pre>HACKTORX</pre>
    <div>Bölüm Etiketi</div>
    <br>
    <cite>Aıntı cümleleri italik yapar</cite>
    <br><br>
    <tt>Aralıkları belirgin yapar</tt>
    <br><br>
    <blockquote>Metnin sağında ve solunda boşluk bırakır</blockquote>
    <hr>  <!-- sayfa boyunca çizgi çeker -->
    <font size=5>Büyüklüğünü belirler</font>
    <br><br>
    <font color=brown>Rengini belirler</font>
    <br><br>

</body>

</html>

Liste Kodları    

Sıralı, sırasız ve tanımlama olmak üzere üç çeşit liste HTML ile hazırlayabiliriz.

Sıralı listeler, rakamlar, harfler gibi karakterler kullanılarak yapılan listelerdir.

<ol> </ol> Liste bu etiket ile başlar.

<li> </li> Bu etiket ile listenin maddelerini tanımlarız.

<ol>
    <li>Madde1</li>
    <li>Madde2</li>
    <li>Madde3</li>
</ol>

Sırasız listeler, rakamlar, harfler gibi karakterler yerine madde işaretleri kullanılarak yapılan listelerdir.

<ul> </ul> Sırasız listeler için kullanılır. Madde işaretleri disc, içi dolu daire; circle, içi boş daire; square, içi dolu kare, Kullanmak için <ul type=”?”> özelliğini kullanırız.

<li> </li> maddeler sıralı listedeki gibi bu etiketle yapılır.

<ul type="circle">
    <li>Madde4</li>
    <li>Madde5</li>
    <li>Madde6</li>
</ul>

Tanımlama listeleri, uzun metinlerde okumayı kolaylaştırmak için kullanırız. Bu listeleme ile maddelerin altına açıklama yapabiliriz.

<dl> </dl> bu etiket ile başlar ve biter.

<dt> </dt> madde tanımlanır.

<dd> </dd> maddenin açıklaması yazılır.

<dl>
    <dt>Hactorx :</dt>
    <dd>siber güvenlik, yazılım ve teknoloji dünyasına dair içerikler sunan bir platformdur.</dd>
</dl>

Resim Etiketi

Web sayfasına resim eklemek için resmin gif, jpg ve png formatlarından biri olmalıdır.

<img> resim eklemek için kullanırız. kapatma etiketi yoktur. Bazı özellikleri şunlardır;

  • src, resmin konumu eklediğimiz yerdir.
  • alt, eklenen resim tarayıcı tarafından desteklenmez, resim geç yüklenirse resmin yerine gösterilecek metni yazmak için kullanılır.
  • aling, resmin sayfada hangi hizada olacağı belirlemek için kullanırız. Bu özellik paragraf, başlık, tablo gibi yerlerde de kullanabiliriz.
  • height, resmin yüksekliğini pixel olarak belirlemek için kullanırız.
  • widht, resmin genişliği pixel olarak belirlemek için kullanırız.
  • border, resmin etrafında çerçeve olmasını sağlar. Bu etiketle çerçevenin kalınlığını da belirleyebiliriz .
<img src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">

Bağlantı Etiketi

Bağlantı etiketiyle yaptığınız web sitesine farklı bir sayfanın http bağlantısı, bir resim, gif, zip gibi bir dosyanın linkini eklemek, dosya indirmek için ftp bağlantısı gibi işlemleri gerçekleştirebilirsiniz.

<a> </a> etiketi bağlantılar için kullanırız. Linkleri http:// ile başlatmalısınız eğer www.hacktorx.com şeklinde yazarsanız tarayıcı bu bağlantıyı arar.

  • href, özelliği bağlantı eklemenizi sağlar. Web sayfasının ilk kısmına gitmek istersek <a href=#top> </a> kullanırız.
  • title, özelliği ile bağlantıya açıklama ekleriz.
  • target=”_blank”, bağlantıyı farklı bir tarayıcıda açmak kullanırız.
  • name, web sayfasındaki belirli bir alana gitmek istersek bu özelliği kullanırız. <a href=”#etiket”>(metin)</a> şeklinde bir yer belirlenir.
  • <a href=”#top”>Sayfa Başı</a> bulunduğunuz sayfada sayfanın başına gitmek için kullanırız.
   <a href="https://hacktorx.com" target="_blank" title="Ana Sayfa" >Hacktorx</a>

Hacktorx

Resim etiketini bağlantı etiketinin içine yazarak resimlere de link ekleyebilirsiniz.          

Resim üzerinde bağlantıların resmin tümünde değil de belli bir bölgeye gelince tıklanabilir hala getirilebilir. Bu bölgeleri rect (dikdörtgensel), circle (dairesel), poly (çokgensel) olmak üzere üç farklı şekilde şekillendirebilirsiniz.

Bu işlem <map> </map> etiketi kullanılarak yapılabilir. İlk önce <img> etiketi içinde “usemap” özelliğini kullanarak bir isim belirleriz. Daha sonra belirlediğimiz ismi <map> etiketinin name özelliği ile kullanırız.

<area>, etiketini <map> etiketinin içinde kullanırız ve bağlantının tıklanabileceği alan ve bu alanın boyutunu burada belirleriz. Özellikler;

  • coords, belirlenen şekle göre alanın koordinatlarını belirlemek için kullanırız.
  • shape, tıklanacak yerin şeklinin belirtilmesinde kullanırız.
  • href, ile bağlantı ekleriz.
<img usemap="#harita" src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">
<map name="harita"  >
    <area shape=rect coords="55, 59, 135, 165" href="https://hacktorx.com" target="_blank" >
</map>
. . .
avatar

Edanur Erdoğan

HacktorX Yazarı
Yazılarını Gör

Merhaba ben Edanur Adli Bilişim Mühendisliği yanında Görsel İletişim Tasarımı bölümünde de eğitim görmekteyim. Kendimi Python dilinde geliştirmekteyim.

500+
Takipçi
500+
Takipçi
100+
Abone

Popüler Kategoriler

Siber Güvenlik
22
Writeup
13
Network
12
Yazılım
6
Adli Bilişim
4

Son Yazılar

KERBEROS
22/03/2024
OSI MODELİ NEDİR?
11/03/2024
Mimikatz
04/03/2024
DoS & DDoS SALDIRILARI
01/03/2024
ads via HacktorX
Sonraki Yazı
Mimikatz
Image
KERBEROS - HacktorX
Yazılım

Web Sayfasının Temel Taşı: HTML-1

Giriş

HyberText Markup Language Türkçe’de Hiper Metin İşaretleme Dili olan HTML, web sayfaları oluşturmak için kullanılan standart bir işaretleme dilidir. HTML tag ve etiket diye isimlendirilen kodlardan oluşur. Bu kodlar < ile başlar ve > ile biter ancak bazı kodların kapatma etiketi yoktur. Kapatma etiketi olan kodlarla başlangıçtaki değerle birlikte / işareti kullanılmalıdır. İşaretleme dili olan HTML bir binanın iskeleti olarak tanımlayabiliriz.

Genel Kodlar

<!DOCTYPE html> ifadesi kodu HTML5 standartlarına göre yazıldığını gösterir.

<html> </html> etiketi, yazılacak tüm HTML kodları bu etiket arasında tanımlanır.

<head> </head> Sayfa hakkında meta etiketleri, dili, anahtar kelimeleri, sayfanın yazarı, stil tanımlamaları ve bunlar gibi birçok önemli bilginin yazıldığı kısımdır. Bu etiket arasına yazılanlar web sayfasında görünmez.

<body> </body> Web sayfasının içeriği ile ilgili tüm bilgiler burada yer alır. Metinler, resimler, bağlantılar gibi bilgiler tanımlanır. Burada belirtilen her şey sitede görünür.

<title> </title> Web sayfasının başlığının yazıldığı kısımdır, head etiketi arasına tanımlanır ve sadece bir kere tanımlanır.

<!DOCTYPE html>
<html>

<head>
    <title>Genel kod kullanımı</title>
</head>

<body bgcolor="#f7f7f7">
    genel kodlar
</body>

</html>

Metin Düzenleme Kodları

Başlık Etiketleri<h1> Web sayfasının içeriğinin daha kullanıcılar tarafından daha kolay okunabilmesini sağlar. Başlıklar metnin önemli olmasına göre düzenlenmelidir. Bu etiketler arama motorlarının web sayfasının yapısını anlamasına da yardımcı olurlar. Başlığın önemli olmasına göre h1, h2, h3, h4, h5, h6 etiketleri vardır. Başlık etiketi kullanıldığında kod bir satır atlamaktadır.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7">
    <h1>Başlık 1</h1>
    <h2>Başlık 2</h2>
    <h3>Başlık 3</h3>
    <h4>Başlık 4</h4>
    <h5>Başlık 5</h5>
    <h6>Başlık 6</h6>
</body>

</html>

<p> </p> Paragraf etiketidir. Her bir paragrafı ayrı ayrı tanımlamak yerine, tek bir paragraf etiket içinde yazabiliriz. Tek sorun paragraf sona erdiğinde otomatik olarak yeni bir satıra geçmez. Satır atlamak için <br> etiketi kullanılmalıdır. Paragrafın sayfanın sağında, ortasında ve solunda gibi yer belirlemek istersek  <p align=left> kodunu kullanırız.

<br> Metni yazarken bir alt satıra geçmek için kullanırız. Kapatma etiketi yoktur.

<strong> </strong> Vurgu etiketidir. Metnin kalın yazılmasını sağlar.

<em> </em> Vurgu etiketidir. Cümlenin italik yada koyu yazılmasını sağlar.

<b> </b> Metnin kalın yazılmasını sağlar.

<i> </i> Metnin italik yazılmasını sağlar.

<u> </u> Metni altı çizgili yapar.

<sup> </sup> Metin üst indis olarak yazar.

<sub> </sub> Metin alt indis olarak yazar.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7>

  <p>Paragraf Etiketi</p>
  <strong> Kalın Yazar</strong>
  <br><br>
  <em>İtalik Yazar</em>
  <br><br>
  <b>Kalın Cümle</b>
  <br><br>
  <i>İtalik Cümle</i>
  <br><br>
  <u>Altıçizgili Yazar</u>
  <br><br>
  <p> Normal paragraf<sub>alt_indis</sub><sup>üst_indis</sup></p>

</body>

</html>

<pre> </pre> Metindeki her bir karakteri aynı genişlikte gösterir. Bu etiketi kullanırken bir alt satıra geçmek için <br> etiketini kullanmanız gerekmez.

<div> </div> Bölüm etiketidir. Sayfada yeni bir bölüm açmak için kullanırız.

<blockquote> </blockquote> Yazılan metnin her iki yanında boşluk bırakmayı sağlar.

<hr> Sayfanın genişliği kadar yatay çizgi çeker. Kapatma etiketi yoktur.

<font size=?> </font> Yazılacak olan metin harflerinin büyüklüğü belirlenir.

<font color=?> </font> Yazılacak olan metin harflerinin rengini belirlenir. 

<!DOCTYPE html>
<html>

<body bgcolor="f7f7f7">

    <pre>HACKTORX</pre>
    <div>Bölüm Etiketi</div>
    <br>
    <cite>Aıntı cümleleri italik yapar</cite>
    <br><br>
    <tt>Aralıkları belirgin yapar</tt>
    <br><br>
    <blockquote>Metnin sağında ve solunda boşluk bırakır</blockquote>
    <hr>  <!-- sayfa boyunca çizgi çeker -->
    <font size=5>Büyüklüğünü belirler</font>
    <br><br>
    <font color=brown>Rengini belirler</font>
    <br><br>

</body>

</html>

Liste Kodları    

Sıralı, sırasız ve tanımlama olmak üzere üç çeşit liste HTML ile hazırlayabiliriz.

Sıralı listeler, rakamlar, harfler gibi karakterler kullanılarak yapılan listelerdir.

<ol> </ol> Liste bu etiket ile başlar.

<li> </li> Bu etiket ile listenin maddelerini tanımlarız.

<ol>
    <li>Madde1</li>
    <li>Madde2</li>
    <li>Madde3</li>
</ol>

Sırasız listeler, rakamlar, harfler gibi karakterler yerine madde işaretleri kullanılarak yapılan listelerdir.

<ul> </ul> Sırasız listeler için kullanılır. Madde işaretleri disc, içi dolu daire; circle, içi boş daire; square, içi dolu kare, Kullanmak için <ul type=”?”> özelliğini kullanırız.

<li> </li> maddeler sıralı listedeki gibi bu etiketle yapılır.

<ul type="circle">
    <li>Madde4</li>
    <li>Madde5</li>
    <li>Madde6</li>
</ul>

Tanımlama listeleri, uzun metinlerde okumayı kolaylaştırmak için kullanırız. Bu listeleme ile maddelerin altına açıklama yapabiliriz.

<dl> </dl> bu etiket ile başlar ve biter.

<dt> </dt> madde tanımlanır.

<dd> </dd> maddenin açıklaması yazılır.

<dl>
    <dt>Hactorx :</dt>
    <dd>siber güvenlik, yazılım ve teknoloji dünyasına dair içerikler sunan bir platformdur.</dd>
</dl>

Resim Etiketi

Web sayfasına resim eklemek için resmin gif, jpg ve png formatlarından biri olmalıdır.

<img> resim eklemek için kullanırız. kapatma etiketi yoktur. Bazı özellikleri şunlardır;

  • src, resmin konumu eklediğimiz yerdir.
  • alt, eklenen resim tarayıcı tarafından desteklenmez, resim geç yüklenirse resmin yerine gösterilecek metni yazmak için kullanılır.
  • aling, resmin sayfada hangi hizada olacağı belirlemek için kullanırız. Bu özellik paragraf, başlık, tablo gibi yerlerde de kullanabiliriz.
  • height, resmin yüksekliğini pixel olarak belirlemek için kullanırız.
  • widht, resmin genişliği pixel olarak belirlemek için kullanırız.
  • border, resmin etrafında çerçeve olmasını sağlar. Bu etiketle çerçevenin kalınlığını da belirleyebiliriz .
<img src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">

Bağlantı Etiketi

Bağlantı etiketiyle yaptığınız web sitesine farklı bir sayfanın http bağlantısı, bir resim, gif, zip gibi bir dosyanın linkini eklemek, dosya indirmek için ftp bağlantısı gibi işlemleri gerçekleştirebilirsiniz.

<a> </a> etiketi bağlantılar için kullanırız. Linkleri http:// ile başlatmalısınız eğer www.hacktorx.com şeklinde yazarsanız tarayıcı bu bağlantıyı arar.

  • href, özelliği bağlantı eklemenizi sağlar. Web sayfasının ilk kısmına gitmek istersek <a href=#top> </a> kullanırız.
  • title, özelliği ile bağlantıya açıklama ekleriz.
  • target=”_blank”, bağlantıyı farklı bir tarayıcıda açmak kullanırız.
  • name, web sayfasındaki belirli bir alana gitmek istersek bu özelliği kullanırız. <a href=”#etiket”>(metin)</a> şeklinde bir yer belirlenir.
  • <a href=”#top”>Sayfa Başı</a> bulunduğunuz sayfada sayfanın başına gitmek için kullanırız.
   <a href="https://hacktorx.com" target="_blank" title="Ana Sayfa" >Hacktorx</a>

Hacktorx

Resim etiketini bağlantı etiketinin içine yazarak resimlere de link ekleyebilirsiniz.          

Resim üzerinde bağlantıların resmin tümünde değil de belli bir bölgeye gelince tıklanabilir hala getirilebilir. Bu bölgeleri rect (dikdörtgensel), circle (dairesel), poly (çokgensel) olmak üzere üç farklı şekilde şekillendirebilirsiniz.

Bu işlem <map> </map> etiketi kullanılarak yapılabilir. İlk önce <img> etiketi içinde “usemap” özelliğini kullanarak bir isim belirleriz. Daha sonra belirlediğimiz ismi <map> etiketinin name özelliği ile kullanırız.

<area>, etiketini <map> etiketinin içinde kullanırız ve bağlantının tıklanabileceği alan ve bu alanın boyutunu burada belirleriz. Özellikler;

  • coords, belirlenen şekle göre alanın koordinatlarını belirlemek için kullanırız.
  • shape, tıklanacak yerin şeklinin belirtilmesinde kullanırız.
  • href, ile bağlantı ekleriz.
<img usemap="#harita" src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">
<map name="harita"  >
    <area shape=rect coords="55, 59, 135, 165" href="https://hacktorx.com" target="_blank" >
</map>
. . .
avatar

Edanur Erdoğan

HacktorX Yazarı
Yazılarını Gör

Merhaba ben Edanur Adli Bilişim Mühendisliği yanında Görsel İletişim Tasarımı bölümünde de eğitim görmekteyim. Kendimi Python dilinde geliştirmekteyim.

Sonraki Yazı
Atbash Şifreleme
Image
OSI MODELİ NEDİR? - HacktorX
Yazılım

Web Sayfasının Temel Taşı: HTML-1

Giriş

HyberText Markup Language Türkçe’de Hiper Metin İşaretleme Dili olan HTML, web sayfaları oluşturmak için kullanılan standart bir işaretleme dilidir. HTML tag ve etiket diye isimlendirilen kodlardan oluşur. Bu kodlar < ile başlar ve > ile biter ancak bazı kodların kapatma etiketi yoktur. Kapatma etiketi olan kodlarla başlangıçtaki değerle birlikte / işareti kullanılmalıdır. İşaretleme dili olan HTML bir binanın iskeleti olarak tanımlayabiliriz.

Genel Kodlar

<!DOCTYPE html> ifadesi kodu HTML5 standartlarına göre yazıldığını gösterir.

<html> </html> etiketi, yazılacak tüm HTML kodları bu etiket arasında tanımlanır.

<head> </head> Sayfa hakkında meta etiketleri, dili, anahtar kelimeleri, sayfanın yazarı, stil tanımlamaları ve bunlar gibi birçok önemli bilginin yazıldığı kısımdır. Bu etiket arasına yazılanlar web sayfasında görünmez.

<body> </body> Web sayfasının içeriği ile ilgili tüm bilgiler burada yer alır. Metinler, resimler, bağlantılar gibi bilgiler tanımlanır. Burada belirtilen her şey sitede görünür.

<title> </title> Web sayfasının başlığının yazıldığı kısımdır, head etiketi arasına tanımlanır ve sadece bir kere tanımlanır.

<!DOCTYPE html>
<html>

<head>
    <title>Genel kod kullanımı</title>
</head>

<body bgcolor="#f7f7f7">
    genel kodlar
</body>

</html>

Metin Düzenleme Kodları

Başlık Etiketleri<h1> Web sayfasının içeriğinin daha kullanıcılar tarafından daha kolay okunabilmesini sağlar. Başlıklar metnin önemli olmasına göre düzenlenmelidir. Bu etiketler arama motorlarının web sayfasının yapısını anlamasına da yardımcı olurlar. Başlığın önemli olmasına göre h1, h2, h3, h4, h5, h6 etiketleri vardır. Başlık etiketi kullanıldığında kod bir satır atlamaktadır.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7">
    <h1>Başlık 1</h1>
    <h2>Başlık 2</h2>
    <h3>Başlık 3</h3>
    <h4>Başlık 4</h4>
    <h5>Başlık 5</h5>
    <h6>Başlık 6</h6>
</body>

</html>

<p> </p> Paragraf etiketidir. Her bir paragrafı ayrı ayrı tanımlamak yerine, tek bir paragraf etiket içinde yazabiliriz. Tek sorun paragraf sona erdiğinde otomatik olarak yeni bir satıra geçmez. Satır atlamak için <br> etiketi kullanılmalıdır. Paragrafın sayfanın sağında, ortasında ve solunda gibi yer belirlemek istersek  <p align=left> kodunu kullanırız.

<br> Metni yazarken bir alt satıra geçmek için kullanırız. Kapatma etiketi yoktur.

<strong> </strong> Vurgu etiketidir. Metnin kalın yazılmasını sağlar.

<em> </em> Vurgu etiketidir. Cümlenin italik yada koyu yazılmasını sağlar.

<b> </b> Metnin kalın yazılmasını sağlar.

<i> </i> Metnin italik yazılmasını sağlar.

<u> </u> Metni altı çizgili yapar.

<sup> </sup> Metin üst indis olarak yazar.

<sub> </sub> Metin alt indis olarak yazar.

<!DOCTYPE html>
<html>

<body bgcolor="#f7f7f7>

  <p>Paragraf Etiketi</p>
  <strong> Kalın Yazar</strong>
  <br><br>
  <em>İtalik Yazar</em>
  <br><br>
  <b>Kalın Cümle</b>
  <br><br>
  <i>İtalik Cümle</i>
  <br><br>
  <u>Altıçizgili Yazar</u>
  <br><br>
  <p> Normal paragraf<sub>alt_indis</sub><sup>üst_indis</sup></p>

</body>

</html>

<pre> </pre> Metindeki her bir karakteri aynı genişlikte gösterir. Bu etiketi kullanırken bir alt satıra geçmek için <br> etiketini kullanmanız gerekmez.

<div> </div> Bölüm etiketidir. Sayfada yeni bir bölüm açmak için kullanırız.

<blockquote> </blockquote> Yazılan metnin her iki yanında boşluk bırakmayı sağlar.

<hr> Sayfanın genişliği kadar yatay çizgi çeker. Kapatma etiketi yoktur.

<font size=?> </font> Yazılacak olan metin harflerinin büyüklüğü belirlenir.

<font color=?> </font> Yazılacak olan metin harflerinin rengini belirlenir. 

<!DOCTYPE html>
<html>

<body bgcolor="f7f7f7">

    <pre>HACKTORX</pre>
    <div>Bölüm Etiketi</div>
    <br>
    <cite>Aıntı cümleleri italik yapar</cite>
    <br><br>
    <tt>Aralıkları belirgin yapar</tt>
    <br><br>
    <blockquote>Metnin sağında ve solunda boşluk bırakır</blockquote>
    <hr>  <!-- sayfa boyunca çizgi çeker -->
    <font size=5>Büyüklüğünü belirler</font>
    <br><br>
    <font color=brown>Rengini belirler</font>
    <br><br>

</body>

</html>

Liste Kodları    

Sıralı, sırasız ve tanımlama olmak üzere üç çeşit liste HTML ile hazırlayabiliriz.

Sıralı listeler, rakamlar, harfler gibi karakterler kullanılarak yapılan listelerdir.

<ol> </ol> Liste bu etiket ile başlar.

<li> </li> Bu etiket ile listenin maddelerini tanımlarız.

<ol>
    <li>Madde1</li>
    <li>Madde2</li>
    <li>Madde3</li>
</ol>

Sırasız listeler, rakamlar, harfler gibi karakterler yerine madde işaretleri kullanılarak yapılan listelerdir.

<ul> </ul> Sırasız listeler için kullanılır. Madde işaretleri disc, içi dolu daire; circle, içi boş daire; square, içi dolu kare, Kullanmak için <ul type=”?”> özelliğini kullanırız.

<li> </li> maddeler sıralı listedeki gibi bu etiketle yapılır.

<ul type="circle">
    <li>Madde4</li>
    <li>Madde5</li>
    <li>Madde6</li>
</ul>

Tanımlama listeleri, uzun metinlerde okumayı kolaylaştırmak için kullanırız. Bu listeleme ile maddelerin altına açıklama yapabiliriz.

<dl> </dl> bu etiket ile başlar ve biter.

<dt> </dt> madde tanımlanır.

<dd> </dd> maddenin açıklaması yazılır.

<dl>
    <dt>Hactorx :</dt>
    <dd>siber güvenlik, yazılım ve teknoloji dünyasına dair içerikler sunan bir platformdur.</dd>
</dl>

Resim Etiketi

Web sayfasına resim eklemek için resmin gif, jpg ve png formatlarından biri olmalıdır.

<img> resim eklemek için kullanırız. kapatma etiketi yoktur. Bazı özellikleri şunlardır;

  • src, resmin konumu eklediğimiz yerdir.
  • alt, eklenen resim tarayıcı tarafından desteklenmez, resim geç yüklenirse resmin yerine gösterilecek metni yazmak için kullanılır.
  • aling, resmin sayfada hangi hizada olacağı belirlemek için kullanırız. Bu özellik paragraf, başlık, tablo gibi yerlerde de kullanabiliriz.
  • height, resmin yüksekliğini pixel olarak belirlemek için kullanırız.
  • widht, resmin genişliği pixel olarak belirlemek için kullanırız.
  • border, resmin etrafında çerçeve olmasını sağlar. Bu etiketle çerçevenin kalınlığını da belirleyebiliriz .
<img src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">

Bağlantı Etiketi

Bağlantı etiketiyle yaptığınız web sitesine farklı bir sayfanın http bağlantısı, bir resim, gif, zip gibi bir dosyanın linkini eklemek, dosya indirmek için ftp bağlantısı gibi işlemleri gerçekleştirebilirsiniz.

<a> </a> etiketi bağlantılar için kullanırız. Linkleri http:// ile başlatmalısınız eğer www.hacktorx.com şeklinde yazarsanız tarayıcı bu bağlantıyı arar.

  • href, özelliği bağlantı eklemenizi sağlar. Web sayfasının ilk kısmına gitmek istersek <a href=#top> </a> kullanırız.
  • title, özelliği ile bağlantıya açıklama ekleriz.
  • target=”_blank”, bağlantıyı farklı bir tarayıcıda açmak kullanırız.
  • name, web sayfasındaki belirli bir alana gitmek istersek bu özelliği kullanırız. <a href=”#etiket”>(metin)</a> şeklinde bir yer belirlenir.
  • <a href=”#top”>Sayfa Başı</a> bulunduğunuz sayfada sayfanın başına gitmek için kullanırız.
   <a href="https://hacktorx.com" target="_blank" title="Ana Sayfa" >Hacktorx</a>

Hacktorx

Resim etiketini bağlantı etiketinin içine yazarak resimlere de link ekleyebilirsiniz.          

Resim üzerinde bağlantıların resmin tümünde değil de belli bir bölgeye gelince tıklanabilir hala getirilebilir. Bu bölgeleri rect (dikdörtgensel), circle (dairesel), poly (çokgensel) olmak üzere üç farklı şekilde şekillendirebilirsiniz.

Bu işlem <map> </map> etiketi kullanılarak yapılabilir. İlk önce <img> etiketi içinde “usemap” özelliğini kullanarak bir isim belirleriz. Daha sonra belirlediğimiz ismi <map> etiketinin name özelliği ile kullanırız.

<area>, etiketini <map> etiketinin içinde kullanırız ve bağlantının tıklanabileceği alan ve bu alanın boyutunu burada belirleriz. Özellikler;

  • coords, belirlenen şekle göre alanın koordinatlarını belirlemek için kullanırız.
  • shape, tıklanacak yerin şeklinin belirtilmesinde kullanırız.
  • href, ile bağlantı ekleriz.
<img usemap="#harita" src="resim.jpg" alt="resim" aling="left" height="200" width="300" border="5">
<map name="harita"  >
    <area shape=rect coords="55, 59, 135, 165" href="https://hacktorx.com" target="_blank" >
</map>
. . .
avatar

Edanur Erdoğan

HacktorX Yazarı
Yazılarını Gör

Merhaba ben Edanur Adli Bilişim Mühendisliği yanında Görsel İletişim Tasarımı bölümünde de eğitim görmekteyim. Kendimi Python dilinde geliştirmekteyim.

Sonraki Yazı
Atbash Şifreleme
Image