Html5 Örnekleri – Html 5 Dersleri 2. Gün

Html derslerimizin 2. gününde sayfamıza resim ekleyerek devam ediyoruz. Html5 Örnekleri ve açıklamalarla konuları daha kolay anlamanızı sağlayacağız.

Sayfamıza Resim ekleme

resim ekleme videomuz

img etiketinin alması gereken zorunlu 2 özellik vardır.

src :  Resmimizin yolunu ve ismini belirtiriz.

alt: Resme ait açıklama bilgisi.

html5 örnekleri - resim ekleme

resmimizi boyutlandırmak istersek nasıl yapacağız?

width : Resmimizin genişliğini değitirmemizi sağlar.

height: Resmimizin yüksekliğini değiştirmemizi sağlar.

html5 örnekleri - resim ekleme

Html5 Listeler

html etiketlerini kullanarak sayfamıza sırasız ve sıralı listeler ekleyebiliriz.

liste ekleme videosu

 

Sırasız liste oluşturma

kullanımı:

<ul> 

    <li>………………..</li>

</ul>

html5 örnekleri

Burda listemizdeki şekli değiştirmek istersek:

Disk şekli için:

Daire şekli için:

Kare şekli için:

Sıralı liste oluşturma:

kullanımı:

<ol type=”1″>

<li>…….</li>

</ol>

Burda listemizin türünü belirtirken type=”1″ dersek 1,2,3,4,5…. şeklinde listemiz oluşur. type=”A” dersek A,B,C,D….. şeklinde listemiz oluşur. type=”a” dersek a,b,c,d,e şeklinde listemiz oluşur. type=”I” roma rakamı büyük harfler. type=”i” roma rakamı küçük harfleri temsil eder.

html5 örnekleri

Tablo Oluşturma

tablo oluşturma videosu

Tablolar verilerimizi düzenli bir şekilde listelemek için kullanılır. Aşağıda örnek bir tablo yapısı veriyorum. Burada;

<table>………………….</table>     Tablomuzu oluşturmaya ve tablomuzu sonlandırmaya yarar.

<tr>……………………….</tr>         Tablomuzdaki sütünlarımızı oluşturmaya ve sütunları kapamaya yarar.

<td>……………………….</td>         Tablomuzdaki satırlarımızı oluşturmamızı ve kapamamızı sağlar.

*****Satırlar sütunların içinde olmak zorundadır. Sütunlarda tablonun içinde olmak zorundadır.

html örnekleri

Biraz daha detaylı tablolar oluşturmak istersek eğer aşağıdaki özellikleride tablomuza ekleyebiliriz.

<thead>…………….</thead>   Tablomuzun başlık kısmının belirtildiği bölümdür.

<th>…………………….</th>  Başlıktaki her bir alanı tanımlarken bu etiket kullanılır.

<tbody>……………..</tbody>  Tablomuzun içerik  bölümünü ayırmak istersek bu etiketi kullanırız.

<tfoot>……………</tfoot> Tablomuzun alt bölümünü ayırmak istersek bu etiketi kullanırız.

Gelin bir örnekle pekiştirelim.

html5 örnekleri

Burda sarı bölüm tablomuzun başlık kısmı, kırmızı bölüm tablomuzun içerik kısmı, gri bölüm ise tablomuzun alt kısmı olacaktır. Tablomuzun html kodlarını yazalım.

Tablomuzu renklendirme ve çerçeve ekleme gibi işlemleri CSS ile yapacağız. Html sayfamızın <head>………………</head> bölümü içerisinde aşağıdaki kodları ekliyoruz.

Html5 Dersleri 3. Gün

Leave a Reply

%d blogcu bunu beğendi: