HTML. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page: 3. Bölüm

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "HTML. Doç. Dr. İsmail Rakıp Karaş Dersin Course Page: 3. Bölüm"

Can Okyay
7 yıl önce
İzleme sayısı:

1 HTML 3 Bölüm Doç Dr İsmail Rakıp Karaş wwwismailkarascom irkaras@gmailcom (Son Güncelleme: ) Dersin Course Page: wwwismailkarascom/228

2 Listeler / Lists HTML liste yapısında çoğunlukla sıralı (ordered) ve sırasız(unordered) listeler kullanılmaktadır The most common HTML lists are ordered and unordered lists:

3 Sıralı Listeler / Ordered List Sıralı liste yapısı <ol> tag ı ile başlar Her liste elemanı için <li> tag ı kullanılır Liste elemanları için rakamlar kullanılır <ol> <li>kahve</li> <li>süt</li> </ol> An ordered list starts with the <ol> tag Each list item starts with the <li> tag The list items are marked with numbers

4 Farklı Tipte Sıralı Listeler / Types of Ordered Lists Numbered list: Default Letters list: type="a Lowercase letters list: type="a Roman numbers list: type="i Lowercase Roman numbers list: type="i"

5 Sırasız Listeler / Unordered Lists Sırasız liste yapısı <ul> tag ı ile başlar Listedeki her bir eleman <li> tag ı ile ifade edilir Sırasız liste yapısında temel olarak yuvarlak şekil kullanılır An unordered list starts with the <ul> tag Each list item starts with the <li> tag The list items are marked with bullets (typically small black circles) <ul> <li>coffee</li> <li>milk</li> </ul>

6 Farklı Tipte Sırasız Listeler / Types of Unrdered Lists wwwismailkarascom/228 <ul type="circle"> Disc bullets list: <ul type= disc"> Circle bullets list: <ul type= circle"> Square bullets list: <ul type="square"> <ul type="square">

7 HTML Tanımlama Listeleri / Description List Liste elemanları tanımlaması için kullanılır <DL></DL>: Tanımlama (definition) listesi etiketinin içinde, <DD>, tanımlamalara <DT> tanımlama terimlerine veya her ikisine birden yer verilir A description list is a list of terms/names, with a description of each term/name The <dl> tag defines a description list The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>kahve</dt> <dd>- siyah ve sıcak içecek</dd> <dt>süt</dt> <dd>- beyza ve soğuk içecek</dd> </dl>

8 İç içe listeler / Nested Lists <html> <body> <h4>iç içe liste:</h4> <ul> <li>kahve</li> <li>çay </li> <ul> <li>siyah çay</li> <li>yeşil çay</li> </ul> <li>süt</li> </ul> </body> </html>

9 İç içe listeler 2 / Nested Lists 2 wwwismailkarascom/228 <html> <body> <h4>iç içe liste:</h4> <ul> <li>kahve</li> <li>çay <ul> <li>siyah çay</li> <li>yeşil çay</li> <ul> <li>çin</li> <li>afrika</li> </ul> </ul> <li>süt</li> </ul> Ordering of the types of nested lists in default is: Disc Circle Square </body> </html>

10 Liste Etiketleri HTML List Tags Tag <ol> <ul> <li> <dl> <dt> <dd> Tag <ol> <ul> <li> <dl> <dt> <dd> Tanımı Sıralı liste Sırasız liste Liste elemanları Tanım listesi Tanımlama listesindeki eleman Tanımlama listesindeki elemanın tanımı Description Defines an ordered list Defines an unordered list Defines a list item Defines a description list Defines a term/name in a description list Defines a description of a term/name in a description list

11 Tablolar / Tables Örnek HTML tablosu / An Example HTML Tables Tables are defined with the <table> tag A table is divided into rows with the tag (tr stands for table row) A row is divided into data cells with the <td> tag (td stands for table data) A row can also be divided into headings with the <th> tag (th stands for table heading) The <td> elements are the data containers in the table The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc

12 Tablolar / Tables <table border="1"> <td>satır 1, hücre 1</td> <td>satır 1, hücre 2</td> <td>satır 2, hücre 1</td> <td>satır 2, hücre 2</td> </table> The tag defines a row in an HTML table A element contains one or more <th> or <td> elements The <td> tag defines a standard cell in an HTML table tr: Table Row td: Table Data/Cell

13 Tablolar ve Sınır özelliği Tables and the Border Attribute wwwismailkarascom/228 Eğer tablo için kenar özniteliği tanımlanmamışsa default olarak kenar çizgisi olmadan görünür Kenarlık için border özniteliği kullanılır If you do not specify a border style, the table will be displayed without borders A border can be adding using the border attribute: <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </table>

14 Tables without borders <table border="0">

15 HTML Table Headers Header information in a table are defined with the <th> tag An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Standard cells - contains data (created with the <td> element) The text in <th> elements are bold and centered by default The text in <td> elements are regular and left-aligned by default

16 Tablo Başlıkları / HTML Table Headers <table border="1"> <th>header 1</th> <th>header 2</th> <td>satır 1, hücre 1</td> <td>satır 1, hücre 2</td> <td>satır 2, hücre 1</td> <td>satır 2, hücre 2</td> </table>

17 Tablo Başlıkları / Table Headers <h4>tablo Başlıkları:</h4> <table border="1"> <th>isim</th> <th>telefon</th> <th>telefon</th> <h4>dikey Başlıklar:</h4> <table border="1"> <th>isim:</th> <td>ali</td> <th>telefon:</th> <td> </td>

18 Tablo Açıklama Satırı Table with a caption <table border="1"> <caption>aylık giderler</caption> <th>ay</th> <th>giderler</th>

19 Satır hücrelerini Birleştirme Table Colspan <h4>iki sütunun birleşmesi:</h4> <table border="1"> <th>isim</th> <th colspan="2">telefon</th> <td>ali</td> <td> </td> <td> </td> </table>

20 Sütun hücrelerini Birleştirme Table Rowspan <h4>iki satırın birleşmesi:</h4> <table border="1"> <th>isim:</th> <td>ali</td> <th rowspan="2">telefon:</th> <td> </td> <td> </td> </table>

21 Tablo içinde Tablo / Table in Table <table border="1"> <td> <p>paragraf</p> <p>başka bir paragraf</p> </td> <td>bu hücre de tablo içerir: <table border="1"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </table> </td>

22 Hücre içindeki yazı alanları kenarına boşluk oluşturmak Table cellpadding <h4>tablo sınırı belirli:</h4> <table border="1" cellpadding="15"> <td>bir</td> <td>iki</td> <td>üç</td> <td>dört</td> </table>

23 Bu boşlukları hücre iç çizgilerinden sonra başlatmak Table cellspacing <h4>tablo sınırı belirli:</h4> <table border="1" cellspacing="15"> <td>bir</td> <td>iki</td> <td>üç</td> <td>dört</td> </table>

24 Tablonun genişliği / Table Width Bir tablo, tarayıcının tüm sayfasına yayılabileceği gibi, tasarımcının arzu ettiği bir yüzdesinde veya belirli ölçülerde de oluşturulabilir Bunun için tabloyu başlattığınız yerde TABLE etiketine ölçü birimi ve miktarını eklemeniz gerekir Örneğin, <TABLE WIDTH=70%> etiketi, tablonun eninin kullanıcının tarayıcı penceresinin yüzde 70 i kadar olmasını sağlar Yüzde yerine pixel olarak mutlak ölçü de verebilirsiniz: WIDTH=200px gibi Table width can be define in both way Persentage and Exact If the percentage is used, the table takes the position by the browser's width If the Exact Width is used, it is not effected by the browser's width

25 Temel Tablo Etiketleri / Table Tags Tag <table> <th> <td> <caption> <col /> <colgroup> <thead> <tbody> <tfoot> Tanımı Tablo tanımlama Tablo başlığı Tablo satırı Tablo hücresi Tablo başlığı Her bir kolona ortak özellik vermek için kullanılır Kolonları gruplayarak ortak özellikler atamak için kullanılır Col etiketinin daha da gelişmiş şeklidir Başlık (İlk) satırını belirlemek için kullanılır/ kullanılabilir İlk ve son satır arasındaki satırları belirlemek için kullanılır/ kullanılabilir Son satırı belirlemek için kullanılır/ kullanılabilir Tag <table> <th> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Description Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a <colgroup> element Groups the header content in a table Groups the body content in a table Groups the footer content in a table

26 Tasarım için Tablo Kullanımı / Page Design with a Table ÖRNEK/ EX: <html> <body topmargin="0" leftmargin="0"> <font face="arial"> <table border="0" cellspacing="5" cellpadding="10" width="600"> </table> </font> </body> </html> <td align="right" bgcolor="#c0c0c0"><img src="dusanigif" width="250" height="180"></td> <td align="right" colspan="2" bgcolor="#cc9999"><img src="tab06titgif" width="346" height="180"></td> wwwismailkarascom/228 <td align= left bgcolor= #FFCC99 colspan="2"><p><b><font size= +3 >Web Tasarımında Gözetilecek İlkeler: </font></b></p>grafikle İlgili İlkeler,<br>İçerikle İlgili İlkeler<br>Davranış Kuralları</td> <td align="center" bgcolor=" #FFFFCC "><b><font size="+2" color="navy">güzel Web Örnekleri</font></b><p><font size="+1">web Tasarımcıları Derneği,<br>Tasarımcı Gençler Birliği<br>Gönüllü Web UstalarıGönüllü<br>Web Ustaları</font></td>

Benzer belgeler

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.

HTML Tablolar Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz. Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği