HTML

Transkript

HTML

HTML
2. Bölüm
Doç. Dr. İsmail Rakıp Karaş
www.ismailkaras.com
[email protected]
(Son Güncelleme: 18.02.2015)
Dersin
Course Page: www.ismailkaras.com/228
www.ismailkaras.com/228
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
 dir. Bitiş etiketi de
vardır. Paragraf bittiğinde
 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 dir. Bu etiketin
bitiş etiketi yoktur. Tek
başına kullanılır.
 Pharagraph tag is .
Has beginning and ending
tag: . 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, 
tag should be used. This
tag has no ending tag. It is
used stand alone.
 Ö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
Bu sayfada benimle ilgili bilgiler bulacaksınız.
</body>
</html>
 Örnek/Exp:
<html>
<head>
<meta name="description" content=“Ali Yıldız, Ali Yildiz, Ali, Yildiz">
</head>
<body>
Web Sayfama Hoşgeldiniz 
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 dir. Bitiş etiketi
de vardır. Metin bittiğinde ile
kapatılmalıdır.
 Benzer şekilde italik (eğik) yapmak
için kullanılan etiket ise dir.
Metin bittiğinde ile
kapatılmalıdır.
 Aynı şekilde üstü çizgili metin için
<s>
 Altı çizgili metin için kullanılır.
 Defines bold text
 Defines italic text
 <s> Defines strikeout text
 Defines underline text
, , <s>, Örnek / Exp:
<html>
<head>
</head>
<body>
Web Sayfama Hoşgeldiniz
Bu sayfada benimle ilgili <s>bilgiler</s> bulacaksınız.
</body>
</html>
Font
 Metinlerin font özellikleri için kullanılır.
Etiketi dur. ile
kapatılmalıdır.
 Web Sayfama
Hoşgeldiniz 
 Burada bir farklılık dikkatinizi çekmeli.
Başlangıç etiketinden sonra bir takım
özellikler/öznitelikler belirttik. Bu
özellikler (attributes) çok sayıda
olabilir:
 Web Sayfama
The tag specifies the font
face, font size, and font color of
text.
•
Web Sayfama
•Font tag has attributes

Web Sayfama
 Örnek:
<html>
<head>
<title>Ali Yıldız’ın Sayfası</title>
</head>
<body>
 Web Sayfama Hoşgeldiniz 
 Bu sayfada benimle ilgili bilgiler
bulacaksınız. 
</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ı 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.
•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.
 Ana başlık ve alt başlıklar için yazı
boyutu derecelendirmesi yapmak
açısından bu etiketler tercih edilebilir.
•Since users may skim your pages by its
headings, it is important to use headings to
show the document structure.
 Dikkat: Bu altı derecenin yazı boyutları
tarayıcıdan tarayıcıya farklılık
gösterebilir.
•H1 headings should be used as main
headings, followed by H2 headings, then the
less important H3 headings, and so on.
<H..> Örnek / Exp:
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML Comments
 Kod içi notlar şu şekilde yazılır:
<html>
<body>

This is a regular paragraph
</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 subscript
and
superscript
</body>
</html>
Diğer bazı etiketler / Some other Formatting Tags
 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:
 This is some text! <big> This is some text! </big> 
 This is some text! This is some text! 
 <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.

HTML

Transkript

Benzer belgeler

Forum: YENI FORUM

4 İnternet Programcılığı Dökümanı

SAYI 12 Nisan - Haziran 2013

Gtalk zawgyi font

HTML Ders Slaytları - Bilgisayar Kursu, NETSİS Muhasebe, Web