HTML - Karabük Üniversitesiweb.karabuk.edu.tr/ismail.karas/ASP/Sunumlar/Sunum-3.pdf · HTML Tanımlama Listeleri / DescriptionList • Liste elemanları tanımlaması için kullanılır

(Son Güncelleme: 18.02.2019)

HTML3. Bölüm

Prof. Dr. İsmail Rakıp Karaşwww.ismailkaras.com

[email protected]

Dersin Course Page: http://228.ismailkaras.com

Lütfen mobil cihazlarınızın sesini (titreşim de dahil) TAMAMEN KAPATINIZ.

Listeler / Lists

• HTML liste yapısında çoğunlukla sıralı (ordered) ve sırasız(unordered) listeler kullanılmaktadır.

• The mostcommon HTML lists are orderedand unorderedlists:

http://228.ismailkaras.com

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.

• An ordered liststarts with the<ol> tag. Each listitem starts withthe <li> tag.

• The list items aremarked withnumbers.

▫<ol><li>kahve</li><li>süt</li>

</ol>


Farklı Tipte Sıralı Listeler / Types of Ordered Lists

Numbered list:Default

Letters list:type="A“

Lowercase letterslist:type="a“

Roman numbers list:type="I“

Lowercase Roman numbers list:type="i"


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.

▫<ul><li>Coffee</li><li>Milk</li>

</ul>

• An unordered list startswith the <ul> tag. Each listitem starts with the <li> tag.

• The list items are markedwith bullets (typically smallblack circles).


Farklı Tipte Sırasız Listeler / Types of Unrdered Lists

<ul type="circle">

<ul type="square">

Disc bullets list:<ul type=“disc">

Circle bullets list:<ul type=“circle">

Square bullets list:<ul type="square">


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.

<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>

• 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 conjunctionwith <dt> (defines terms/names) and<dd> (describes each term/name):


İç içe listeler / Nested Lists

<html><body>

<h4>İç 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>


İç içe listeler 2 / Nested Lists 2<html><body>

<h4>İç 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>

</body></html>

Ordering of thetypes of nestedlists in default is:

•Disc

•Circle

•Square


Liste EtiketleriTag Tanımı

<ol> Sıralı liste

<ul> Sırasız liste

<li> Liste elemanları

<dl> Tanım listesi

<dt> Tanımlama listesindeki eleman

<dd> Tanımlama listesindeki elemanın tanımı

HTML List Tags

Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list


Tablolar / Tables

• Örnek HTML tablosu / An Example

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows with the <tr> 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.


Tablolar / Tables

<table border="1">

<tr>

<td>satır 1, hücre 1</td>


</tr>

<tr>



</tr>

</table>

tr: Table Rowtd: Table Data/Cell

The <tr> tag defines a row in an HTML table.

A <tr> element contains one ormore <th> or <td> elements.

The <td> tag defines a standard cellin an HTML table.


Tablolar ve Sınır özelliğiTables and the Border Attribute

• Eğer tablo için kenar özniteliği tanımlanmamışsa defaultolarak kenar çizgisi olmadan görünür.

• Kenarlık için border özniteliği kullanılır.

▫<table border="1"><tr>

<td>Row 1, cell 1</td><td>Row 1, cell 2</td>

</tr></table>

• If you do not specify a borderstyle, the table will be displayedwithout borders.

• A border can be adding usingthe border attribute:


Tables without borders

<table border="0">


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.


Tablo Başlıkları / HTML Table Headers

<table border="1"><tr>

<th>Header 1</th><th>Header 2</th>

</tr><tr>

<td>satır 1, hücre 1</td><td>satır 1, hücre 2</td>

</tr><tr>

<td>satır 2, hücre 1</td><td>satır 2, hücre 2</td>

</tr></table>


Tablo Başlıkları / Table Headers<h4>Tablo Başlıkları:</h4><table border="1">

<tr><th>İsim</th><th>Telefon</th><th>Telefon</th>

</tr><tr>..<h4>Dikey Başlıklar:</h4><table border="1">

<tr><th>İsim:</th><td>Ali</td>

</tr><tr>

<th>Telefon:</th><td>0370 444 33 22</td>

.

.


Tablo Açıklama SatırıTable with a caption

<table border="1"><caption>Aylık giderler</caption><tr>

<th>Ay</th><th>Giderler</th>

</tr><tr>

.

.

.


Satır hücrelerini BirleştirmeTable Colspan

<h4>İki sütunun birleşmesi:</h4><table border="1"><tr>

<th>İsim</th><th colspan="2">Telefon</th>

</tr><tr>

<td>Ali</td><td>0370 444 33 22</td><td>0370 444 33 23</td>

</tr></table>


Sütun hücrelerini Birleştirme Table Rowspan

<h4>İki satırın birleşmesi:</h4><table border="1"><tr>

<th>İsim:</th><td>Ali</td>

</tr><tr>

<th rowspan="2">Telefon:</th><td>0370 444 33 22</td>

</tr><tr>

<td>0370 444 33 23</td></tr></table>


Tablo içinde Tablo / Table in Table<table border="1">

<tr><td>

<p>Paragraf</p><p>Başka bir paragraf</p>

</td><td>Bu hücre de tablo içerir:

<table border="1"><tr>

<td>A</td><td>B</td>

</tr><tr>

<td>C</td><td>D</td>

</tr></table>

</td></tr>

.

.


Hücre içindeki yazı alanları kenarına boşluk oluşturmakTable cellpadding

.

.<h4>Tablo sınırı belirli:</h4><table border="1" cellpadding="15"><tr>

<td>Bir</td><td>İki</td>

</tr> <tr>

<td>Üç</td><td>Dört</td>

</tr></table>..


Bu boşlukları hücre iç çizgilerinden sonra başlatmak Table cellspacing

.

.<h4>Tablo sınırı belirli:</h4><table border="1" cellspacing="15"><tr>

<td>Bir</td><td>İki</td>

</tr> <tr>

<td>Üç</td><td>Dört</td>

</tr></table>..


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 wayPersentage and Exact.

If the percentage is used, the table takesthe position by thebrowser's width.

If the Exact Width is used, it is not effectedby the browser's width.


Temel Tablo Etiketleri / Table TagsTag Tanımı

<table> Tablo tanımlama

<th> Tablo başlığı

<tr> Tablo satırı

<td> Tablo hücresi

<caption> Tablo başlığı

<col /> Her bir kolona ortak özellik vermek için kullanılır

<colgroup> Kolonları gruplayarak ortak özellikler atamak için kullanılır. Col etiketinin daha da gelişmiş şeklidir.

<thead> Başlık (İlk) satırını belirlemek için kullanılır/ kullanılabilir

<tbody> İlk ve son satır arasındaki satırları belirlemek için kullanılır/ kullanılabilir

<tfoot> Son satırı belirlemek için kullanılır/ kullanılabilir

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table


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">

<tr>

<td align="right" bgcolor="#C0C0C0"><img src="dusani.gif" width="250" height="180"></td>

<td align="right" colspan="2" bgcolor="#CC9999"><img src="tab06tit.gif" width="346"

height="180"></td>

</tr>

<tr>

<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>

</tr>

</table>

</font>

</body>

</html>


Documents

HTML - Karabük Üniversitesiweb.karabuk.edu.tr/ismail.karas/ASP/Sunumlar/Sunum-3.pdf · HTML Tanımlama Listeleri / DescriptionList • Liste elemanları tanımlaması için kullanılır