(Son Güncelleme: 18.02.2019) HTML 3. 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.
(Son Güncelleme: 18.02.2019)
HTML3. Bölüm
Prof. Dr. İsmail Rakıp Karaşwww.ismailkaras.com
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>
http://228.ismailkaras.com
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"
http://228.ismailkaras.com
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).
http://228.ismailkaras.com
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">
http://228.ismailkaras.com
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):
http://228.ismailkaras.com
İç 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>
http://228.ismailkaras.com
İç 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
http://228.ismailkaras.com
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
http://228.ismailkaras.com
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.
http://228.ismailkaras.com
Tablolar / Tables
<table border="1">
<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>
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.
http://228.ismailkaras.com
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:
http://228.ismailkaras.com
Tables without borders
<table border="0">
http://228.ismailkaras.com
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.
http://228.ismailkaras.com
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>
http://228.ismailkaras.com
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>
.
.
http://228.ismailkaras.com
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>
.
.
.
http://228.ismailkaras.com
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>
http://228.ismailkaras.com
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>
http://228.ismailkaras.com
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>
.
.
http://228.ismailkaras.com
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>..
http://228.ismailkaras.com
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>..
http://228.ismailkaras.com
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.
http://228.ismailkaras.com
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
http://228.ismailkaras.com
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>
http://228.ismailkaras.com