- Katılım
- 18 Eki 2019
- Konular
- 103
- Mesajlar
- 1,662
- Çözümler
- 229
- Tepkime puanı
- 3,537
html,html nedir,html tag,html elemanlar, html basic,html site,html demo
Bu konuyu %100 kendi ellerimle hazırladım bu yüzden takıldığınız bir nokta olursa sormaktan çekinmeyin.
Temel html elemanları :
<b> Kalın yazı </b> = Kalın Metin
<strong> Önemli metin (bold ile aynı görünür) </strong> = <!-- Önemli Metin -->
<i>italik yazı</i> = <!-- İtalik Metin -->
<em> Vurgulanan Metin </em> = <!-- Vurgulanan Metin -->
<del> Üstü çizili metin </del> = <!-- Üstü Çizili Metin -->
<ins> Altı çizili metin </ins> = <!-- Alt Çizili Metin -->
<mark> <!-- İşaretlenmiş Metin --> </mark> = <!-- İşaretlenmiş Metin -->
<br> = bundan sonra gelen yazı alta geçiyor
<sup> Üste hizalama </sup> arasına yazılan yazı üstte görünüyor
<h1> Başlık atmak için kullanılır </h1> h6 ya kadar gidiyor diye biliyorum
<p> Paragraf açma </p>
<title> Site başlığı belirtmek için kullanılır </title>
<a href="gidilecek siteyi buraya yazıyosun" target="nerede açacağını belirtiyorsun">buraya da içinde ne yazacaksa onu yazıyosun</a>
<meta> bu eleman sadece head içinde bulunur sitenin anahtar kelimelerini belirtmek için kullanılabilir
Form ve tablolar :
<form> </form> = Form oluşturmak için kullanılır
<table> Tablo oluşturur içinde <tr>, <td>, kullanılır. </table>
<border="1"> = <table border="1"> şeklinde kullanılabilir. Çıktısı böyledir // https://prnt.sc/1xb7m0a
<table style="border: solid;"> Şeklinde kullanım mevcuttur. Çıktısı böyledir // https://prnt.sc/1xb7q5t
<td> etiketi <tr> etiketinin arasına yazılır <tr> <td>1</td> </tr> Çıktısı böyledir // https://prnt.sc/1xb7ykr
<input> içerisine yazı yazılabilen bir kutu ekler. kullanımı : <td> <input type="text" name="adi"> </td> //text yerine password yazarsanız yazılan yazı sansürlenecektir. Eğer text yerine email yazarsanız @mail.com şeklinde bir yazı girilmediği sürece hata verecektir. Çıktısı böyledir // https://prnt.sc/1xb867r
<input type="checkbox" name="film" value="film"> Eğer böyle kullanılırsa tıklanılabilir bir kutu oluşturacaktır. Çıktısı böyledir // https://prnt.sc/1xb8cnr
<input type="radio" name="cinsiyet" value="erkek"> Eğer böyle kullanılırsa seçilebilir bir yuvarlak kutu oluşturacaktır. Çıktısı böyledir // https://prnt.sc/1xb8gzm
<select> </select> bir liste kutusu oluşturur. Kullanımı <select id="programlama"> <option>Javascript</option> <option>Html</option> <option>Css</option> </select> Çıktısı böyledir // https://prnt.sc/1xb8ohc
<textarea> </textarea> İçine yazı yazılabilir büyük bir kutu oluşturur istenilirse alt köşesinde bulunanan ok ile büyütülebilir. Kullanımı bu şekildedir : <textarea name="adress" rows="10" cols="30"></textarea> Çıktısı böyledir // https://prnt.sc/1xb8wps
<img> Bu etiket sayfamıza resim eklememizi sağlar. Kullanımı bu şekildedir : <img src="resimler/javascript.jpg" alt="javascript" width="300px" height="200px"> Çıktısı Böyledir : // https://prnt.sc/1xb9r7u
<div> Block etiketimizdir, içine yazılanları diğer etiketlerden ayırır. Grup içine almak için kullanılıabilir. Kullanımı bu şekildedir : <div style="background-color: pink;"> <h4 style="background-color: blue;"> Örnek</h4> <br> <h4 style="background-color: red;"> Örnek</h1> Örnek </h4> </div> // https://prnt.sc/1xbaa6m
id ve class kavramları ;
id ve classlar <head> etiketinin içine yazılır. Kullanımı bu şekildedir : <head> <style> #ornek{ font-size: 20px; } veya .ornek{ font-size: 20px; } </style> </head> Kod içerisinde Böyle görünür : // https://prnt.sc/1xbb4nr
idler "#" işareti ile belirtilir. Tek 1 etiket için kullanılır.
classlar "." işareti ile belirtilir. Birden fazla etiket için kullanılabilir.
id kullanımı : <head> <style> #id{ font-size: 50px; background-color: red; } </style> </head> <body> <h1 id="id"> Örnek yazıdır. </h1></body> Kodda görünümü : https://prnt.sc/1xbbf8d || Kod çıktısı : https://prnt.sc/1xbbgud
class kullanımı : <head> <style> .class{ font-size: 50px; background-color: blue; } </style> </head> <body> <h1 class="class"> Örnek yazıdır. </h1></body> Kodda görünümü : https://prnt.sc/1xbbov3 || Kod çıktısı : https://prnt.sc/1xbbpe7
iframe
<iframe> Kendi sayfamıza başka bir sayfayı çağırmamızı sağlar. Kullanımı : <iframe src="https://realitycheats.com" width="100%" height="500px"></iframe>
Alıntı ve kısaltmalar
<q> etiketi => Kısa Alıntılar için kullanılır.
<blockquate> => Uzun Alıntılar için kullanılır.
<abbr> => Kısaltma için kullanılır.
<cite> etiketi => Bir işin başlığı tanımlanır
<q> etiketi kullanımı : <q> Bu bir alıntıdır. </q> // Sayfa çıktısı : https://prnt.sc/1xbc9v9 || Kod görünümü : https://prnt.sc/1xbcavg
<blockquate> etiketi kullanımı : <blockquote> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quaerat, molestias fugiat exercitationem est voluptatibus. </blockquote> // Sayfa çıktısı : https://prnt.sc/1xbcj1w || Kod görünümü : https://prnt.sc/1xbck21
<abbr> etiketinin kullanımı : <abbr title="Türk Dil Kurumu">TDK</abbr>1932 yılında kurulmuştur. // Sayfa Çıktısı : https://prnt.sc/1xbcly4 || Kod görünümü : https://prnt.sc/1xbcmip
<cite> etiketinin kullanımı : Mona Lisa <cite>Leonardo da Vinci</cite> tarafından resmedilmiştir. // Sayfa Çıktısı : https://prnt.sc/1xbcqrj || Kod görünümü : https://prnt.sc/1xbcrch
Bu konuyu hazırlarken kullandığım tüm örneklere buradan ulaşabilirsiniz : TIKLA
Bu konuyu %100 kendi ellerimle hazırladım bu yüzden takıldığınız bir nokta olursa sormaktan çekinmeyin.
Temel html elemanları :
<b> Kalın yazı </b> = Kalın Metin
<strong> Önemli metin (bold ile aynı görünür) </strong> = <!-- Önemli Metin -->
<i>italik yazı</i> = <!-- İtalik Metin -->
<em> Vurgulanan Metin </em> = <!-- Vurgulanan Metin -->
<del> Üstü çizili metin </del> = <!-- Üstü Çizili Metin -->
<ins> Altı çizili metin </ins> = <!-- Alt Çizili Metin -->
<mark> <!-- İşaretlenmiş Metin --> </mark> = <!-- İşaretlenmiş Metin -->
<br> = bundan sonra gelen yazı alta geçiyor
<sup> Üste hizalama </sup> arasına yazılan yazı üstte görünüyor
<h1> Başlık atmak için kullanılır </h1> h6 ya kadar gidiyor diye biliyorum
<p> Paragraf açma </p>
<title> Site başlığı belirtmek için kullanılır </title>
<a href="gidilecek siteyi buraya yazıyosun" target="nerede açacağını belirtiyorsun">buraya da içinde ne yazacaksa onu yazıyosun</a>
<meta> bu eleman sadece head içinde bulunur sitenin anahtar kelimelerini belirtmek için kullanılabilir
Form ve tablolar :
<form> </form> = Form oluşturmak için kullanılır
<table> Tablo oluşturur içinde <tr>, <td>, kullanılır. </table>
<border="1"> = <table border="1"> şeklinde kullanılabilir. Çıktısı böyledir // https://prnt.sc/1xb7m0a
<table style="border: solid;"> Şeklinde kullanım mevcuttur. Çıktısı böyledir // https://prnt.sc/1xb7q5t
<td> etiketi <tr> etiketinin arasına yazılır <tr> <td>1</td> </tr> Çıktısı böyledir // https://prnt.sc/1xb7ykr
<input> içerisine yazı yazılabilen bir kutu ekler. kullanımı : <td> <input type="text" name="adi"> </td> //text yerine password yazarsanız yazılan yazı sansürlenecektir. Eğer text yerine email yazarsanız @mail.com şeklinde bir yazı girilmediği sürece hata verecektir. Çıktısı böyledir // https://prnt.sc/1xb867r
<input type="checkbox" name="film" value="film"> Eğer böyle kullanılırsa tıklanılabilir bir kutu oluşturacaktır. Çıktısı böyledir // https://prnt.sc/1xb8cnr
<input type="radio" name="cinsiyet" value="erkek"> Eğer böyle kullanılırsa seçilebilir bir yuvarlak kutu oluşturacaktır. Çıktısı böyledir // https://prnt.sc/1xb8gzm
<select> </select> bir liste kutusu oluşturur. Kullanımı <select id="programlama"> <option>Javascript</option> <option>Html</option> <option>Css</option> </select> Çıktısı böyledir // https://prnt.sc/1xb8ohc
<textarea> </textarea> İçine yazı yazılabilir büyük bir kutu oluşturur istenilirse alt köşesinde bulunanan ok ile büyütülebilir. Kullanımı bu şekildedir : <textarea name="adress" rows="10" cols="30"></textarea> Çıktısı böyledir // https://prnt.sc/1xb8wps
<img> Bu etiket sayfamıza resim eklememizi sağlar. Kullanımı bu şekildedir : <img src="resimler/javascript.jpg" alt="javascript" width="300px" height="200px"> Çıktısı Böyledir : // https://prnt.sc/1xb9r7u
<div> Block etiketimizdir, içine yazılanları diğer etiketlerden ayırır. Grup içine almak için kullanılıabilir. Kullanımı bu şekildedir : <div style="background-color: pink;"> <h4 style="background-color: blue;"> Örnek</h4> <br> <h4 style="background-color: red;"> Örnek</h1> Örnek </h4> </div> // https://prnt.sc/1xbaa6m
id ve class kavramları ;
id ve classlar <head> etiketinin içine yazılır. Kullanımı bu şekildedir : <head> <style> #ornek{ font-size: 20px; } veya .ornek{ font-size: 20px; } </style> </head> Kod içerisinde Böyle görünür : // https://prnt.sc/1xbb4nr
idler "#" işareti ile belirtilir. Tek 1 etiket için kullanılır.
classlar "." işareti ile belirtilir. Birden fazla etiket için kullanılabilir.
id kullanımı : <head> <style> #id{ font-size: 50px; background-color: red; } </style> </head> <body> <h1 id="id"> Örnek yazıdır. </h1></body> Kodda görünümü : https://prnt.sc/1xbbf8d || Kod çıktısı : https://prnt.sc/1xbbgud
class kullanımı : <head> <style> .class{ font-size: 50px; background-color: blue; } </style> </head> <body> <h1 class="class"> Örnek yazıdır. </h1></body> Kodda görünümü : https://prnt.sc/1xbbov3 || Kod çıktısı : https://prnt.sc/1xbbpe7
iframe
<iframe> Kendi sayfamıza başka bir sayfayı çağırmamızı sağlar. Kullanımı : <iframe src="https://realitycheats.com" width="100%" height="500px"></iframe>
Alıntı ve kısaltmalar
<q> etiketi => Kısa Alıntılar için kullanılır.
<blockquate> => Uzun Alıntılar için kullanılır.
<abbr> => Kısaltma için kullanılır.
<cite> etiketi => Bir işin başlığı tanımlanır
<q> etiketi kullanımı : <q> Bu bir alıntıdır. </q> // Sayfa çıktısı : https://prnt.sc/1xbc9v9 || Kod görünümü : https://prnt.sc/1xbcavg
<blockquate> etiketi kullanımı : <blockquote> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quaerat, molestias fugiat exercitationem est voluptatibus. </blockquote> // Sayfa çıktısı : https://prnt.sc/1xbcj1w || Kod görünümü : https://prnt.sc/1xbck21
<abbr> etiketinin kullanımı : <abbr title="Türk Dil Kurumu">TDK</abbr>1932 yılında kurulmuştur. // Sayfa Çıktısı : https://prnt.sc/1xbcly4 || Kod görünümü : https://prnt.sc/1xbcmip
<cite> etiketinin kullanımı : Mona Lisa <cite>Leonardo da Vinci</cite> tarafından resmedilmiştir. // Sayfa Çıktısı : https://prnt.sc/1xbcqrj || Kod görünümü : https://prnt.sc/1xbcrch
Bu konuyu hazırlarken kullandığım tüm örneklere buradan ulaşabilirsiniz : TIKLA
Son düzenleme:
