HTML - Ismail Rakip Karas

HTML
2. Bölüm
Doç. Dr. İsmail Rakıp Karaş
www.ismailkaras.com
[email protected]
HTML ile Metin Biçimlendirme / Styles - Formatting
 HTML etiketlerinin yarısından fazlası metin biçimlendirme
komutlarıdır.
 HTML sayfada metin biçimlendirmesi dediğimiz zaman,
metnin Internet alanımızı ziyaret eden kişinin bilgisayar
ekranında hangi tür harfle (Arial, Times, Verdana,
Helvetica, vd.), bu harfin normal türüyle mi, ya da siyah
(bold) veya italik tarzıyla mı, hangi büyüklükte (12 punto,
18 punto, 24 punto), ve ne renk gösterileceğini, sayfanın
ya da içinde bulunduğu tablo hücresinin sağına mı, soluna
mı, ortasına mı bloklanacağını kasdediyoruz.
 More than half
of the all
HTML tags
are formatting
tags.
 Formatting
tags means
the font name,
font size,
normal/bold/it
alic etc, or
allignment and
others.
Paragraf Başı Yapmak / Bir Alt Satıra Geçmek
Pharagraph / Indent
 Paragrafları belirten etiket
<p> dir. Bitiş etiketi de
vardır. Paragraf bittiğinde
</p> ile kapatılmalıdır. Bu
etiket kullanıldığında
paragraf başı yapılır ve
paragraflar arasında
boşluk oluşur.
 Sadece bir alt satıra
geçmeyi sağlayan etiketi
ise <br> dir. Bu etiketin
bitiş etiketi yoktur. Tek
başına kullanılır.
 Pharagraph tag is <p>.
Has beginning and ending
tag: </p>. This tag
provides a paragraph
indentation. A pharagraph
is an object. Every
objects, also pharagraphs
has own attributes. To
understand, apply in a
word processor program.
 To shift to next line, <br>
tag should be used. This
tag has no ending tag. It is
used stand alone.
<p> </p> Örnek/Exp:
(Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.)
<html>
<head>
<title>Ali Yıldız’ın SayfasıAntenler</title>
<meta name="description" content="Ali Yıldız, Ali Yildiz, Ali, Yildiz">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<p>Web Sayfama Hoşgeldiniz</p>
<p>Bu sayfada benimle ilgili bilgiler bulacaksınız.</p>
</body>
</html>
<br> Örnek/Exp:
(Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.)
<html>
<head>
<title>Ali Yıldız’ın SayfasıAntenler</title>
<meta name="description" content=“Ali Yıldız, Ali Yildiz, Ali, Yildiz">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
Web Sayfama Hoşgeldiniz <br>
Bu sayfada benimle ilgili bilgiler bulacaksınız.
</body>
</html>
Bold / Italik / Üstü çizgili / Altı çizgili
Bold / Italik / Strikeout/ Underline
 Metinleri bold (kalın) yapmak için
kullanılan etiket <b> dir. Bitiş etiketi
de vardır. Metin bittiğinde </b> ile
kapatılmalıdır.
 Benzer şekilde italik (eğik) yapmak
için kullanılan etiket ise <i> dir.
Metin bittiğinde </i> ile
kapatılmalıdır.
 Aynı şekilde üstü çizgili metin için
<s>
 Altı çizgili metin için <u> kullanılır.
 <b> Defines bold text
 <i> Defines italic text
 <s> Defines strikeout text
 <u> Defines underline text
<b>, <i>, <s>, <u> Örnek / Exp:
(Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.)
<html>
<head>
<title>Ali Yıldız’ın SayfasıAntenler</title>
<meta name="description" content=“Ali Yıldız, Ali Yildiz, Ali, Yildiz">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
Web <b>Sayfama</b> Hoşgeldiniz
Bu sayfada <i>benimle</i> ilgili <s>bilgiler</s> <u>bulacaksınız</u>.
</body>
</html>
Font
 Metinlerin font özellikleri için kullanılır.
Etiketi <font> dur. </font> ile
kapatılmalıdır.
 <font face="Arial"> Web Sayfama
Hoşgeldiniz </font>
 Burada bir farklılık dikkatinizi çekmeli.
Başlangıç etiketinden sonra bir takım
özellikler/öznitelikler belirttik. Bu
özellikler (attributes) çok sayıda
olabilir:
 <font face="Arial" size="16"
color="#00FF00"> Web Sayfama
Hoşgeldiniz </font>
The <font> tag specifies the font
face, font size, and font color of
text.
•<font face="Arial">
Web Sayfama
Hoşgeldiniz </font>
•Font tag has attributes
<font face="Arial"
size="16"
color="#00FF00">
Web Sayfama
Hoşgeldiniz </font>
<font> Örnek:
(Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.)
<html>
<head>
<title>Ali Yıldız’ın Sayfası</title>
<meta name="description" content=“Ali Yıldız, Ali Yildiz, Ali, Yildiz">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<font face="Arial"> Web Sayfama Hoşgeldiniz </font>
<font face="Times New Roman"> Bu sayfada benimle ilgili bilgiler
bulacaksınız. </font>
</body>
</html>
Öznitelik Değerlerinin İfadesi / Usage of Attributes
 Öznitelik değerleri her zaman alıntı
sembolü çif tırnak ya da tek tırnak
işareti ile kapatılmalıdır. Örn:
 "değer"
'değer'
…img src= "resim/ilk.jpg" …
 Çift tırnak işaretinin (") daha yaygın
bir kullanımı vardır, fakat tek tırnak
(') işareti de kullanılabilir.
Not: Bazen, öznitelik değeri kendi
içinde tırnak kullanmayı
gerektirebilir, bu durumda tek
tırnak işareti kullanılır:
name='John "ShotGun" Nelson'
Attributes provide additional
information about HTML elements.
HTML Attributes
•HTML elements can have
attributes
•Attributes provide additional
information about an element
•Attributes are always specified
in the start tag
•Attributes come in name/value
pairs like: name="value"
•If there is an attribute in an
attribute single quotation mark
should be used.
Başlıklar / Headings
 Metinlerin boyutlarını <font> etiketinin
“size” özelliği ile detaylı belirlemek
mümkün olmakla birlikte, HTML bize
başlık boyutları için daha pratik bir
yöntem sunar.
 Bu yöntemle H1 birinci, yani en büyük,
H6 sonuncu, yani en küçük olmak
üzere altı ayrı büyüklükte başlık
kullanma imkanımız vardır.
 Ana başlık ve alt başlıklar için yazı
boyutu derecelendirmesi yapmak
açısından bu etiketler tercih edilebilir.
 Dikkat: Bu altı derecenin yazı boyutları
tarayıcıdan tarayıcıya farklılık
gösterebilir.
•Headings are defined with the <h1> to <h6>
tags.
•<h1> defines the most important heading.
<h6> defines the least important heading.
•Headings Are Important. Use HTML headings
for headings only. Don't use headings to make
text BIG or bold.
•Search engines use your headings to index
the structure and content of your web pages.
•Since users may skim your pages by its
headings, it is important to use headings to
show the document structure.
•H1 headings should be used as main
headings, followed by H2 headings, then the
less important H3 headings, and so on.
<H..> Örnek / Exp:
(Aşağıdaki kodları bir HTM dosya oluşturarak tarayıcınızda çalıştırınız ve deneyiniz.)
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Comments
 Kod içi notlar şu şekilde yazılır:
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
Not: Not ekleyebilmek için açılış parantezinden hemen sonra ünlem işareti
konulur.
HTML Text Formatting
Subscript / Superscript
<html>
<body>
This is<sub> subscript</sub>
and
<sup>superscript</sup>
</body>
</html>
Diğer bazı etiketler / Some other Formatting Tags
 <small> ve <big> etiketleri yazı boyutunda bir miktar küçültme
yada büyüme yapar (Yaklaşık yarım punto)
 Defines smaller or bigger text
Örn:
<font size="4" > This is some text! <big> This is some text! </big> </font>
<font size="4" > This is some text! <small> This is some text! </small> </font>
 <HR> Sayfaya yatay bir çizgi ekler / Defines a horizontal line
 <TT>..</TT>: Teleks Metni etiketi, işaretlediği metnin eşit
genişlikte fontlarla (Courier gibi) gösterilmesini sağlar.
 The <tt> tag defines teletype text.

Download Report