Html Hyper Text Markup Language
Download
Report
Transcript Html Hyper Text Markup Language
HTML
HYPER TEXT MARKUP LANGUAGE
Burcu Yılmaz – İbrahim Mert
Bilişim Teknolojileri Öğretmeni
Html Nedir?
Tarayıcılarda görünen internet dokümanlarını
yaratmaya yarayan işaretleme dillerinden biridir.
Bu diller Web sayfası oluştururken kullanılır.
NOT: En sık tercih edilen İnternet Tarayıcıları
Google Chrome
Tarayıcısı
İnternet Explorer
Tarayıcısı
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Mozilla Firefox
Tarayıcısı
Kaynağı Görüntülemek
Her hangi bir internet
sitesi açıkken,
sayfada boş bir yere
tıklayıp, açılan
menüden kaynağı
görüntüle
seçildiğinde sayfanın
kodlarına (sınırlı
ölçüde) ulaşılabilir.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
HTML belgeleri oluşturmak
HTML dokümanları bir yazı editörü ile (wordpad,
notdefteri, word gibi) düzenlenip *.htm, *.html,
*.shtml gibi uzantılarla kaydedilir.
Not Defteri
Wordpad
*.html uzantılı bir belge kaydetme
Önce kodlar “not defteri” programında yazılır.
Dosya menüsünden “Farklı Kaydet” seçilir.
“Kaydet” seçeneğiyle bir metin dosyası
kaydedilirken (uzantısı *.txt), “Farklı Kaydet” ile
bir web sayfası uzantısı (*.htm, *.html, *.shtml)
belirlenebilir.
Açılan pencereden belgenin kayıt türü, kayıt yeri
ve dosya adı belirlenir.
Resim
Müzik
Word
Video
Not Defteri
Web
Jpg, gif,
bmp
mp3
doc
Avi, mpeg
txt
Html, htm,
shtml
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Dosya---Farklı Kaydet
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Dosya adı ve kayıt türü
Kaydedilen Belgelerin Simgeleri
Temel HTML Etiketleri
Her etiket <> işaretleri arasına yazılır.
Her etiket <> işaretiyle başlar ve sonlanırken </>
işareti kullanılır.
Örnek:
<html>
…
…
</html>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Temel HTML Etiketleri
1.
2.
3.
4.
5.
6.
7.
<html>
<head>
<title>
<body>
<b>
<i>
<u>
8.
9.
10.
11.
12.
13.
14.
<font color>
15. <a href>
<font size>
16. <background>
<font face>
17. <h1>
<p align> ve <p>
<br>
<bgcolor>
<img src>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
1- <html> … </html>
a.
b.
Belgeye bu etiketle (kod) başlanır. Tüm
etiketler bu kodun içine yazılır.
Html belgeleri iki kısımdan oluşur.
•
<head>
Baş
•
<body>
Gövde
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
1- <html> … </html>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
2- <head> … </head>
a.
b.
c.
Html belgeleri iki kısımdan oluşur.
1.
<head>
Baş
2.
<body>
Gövde
Head kısmında <title> etiketi bulunur
Body kısmında sayfanın içeriğinde gözükecek
(yazı resim, tablo vb) ne varsa tümü bulunur.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
2- <head> … </head>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
3- <title> … </title>
•
<title> etiketi, head kısmında bulunur. Başlık
çubuğunda ne yazacağını belirler.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
3- <title> … </title>
3- <title> … </title>
Başlık
Çubuğu
<body>
kısmı boş
olduğu
için sayfa
da boştur.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
4- <body> … </body>
a.
b.
Html belgeleri iki kısımdan oluşur.
1.
<head>
Baş
2.
<body>
Gövde
Body kısmında sayfanın içeriğinde gözükecek
(yazı resim, tablo vb) ne varsa tümü bulunur.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
4- <body> … </body>
4- <body> … </body>
4- <body> … </body>
5- <b> … </b>
•
<b> etiketi, body kısmında bulunur. Yazının
kalın yazılmasını sağlar.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
5- <b> … </b>
5- <b> … </b>
6- <i> … </i>
•
<i> etiketi, body kısmında bulunur. Yazının
italik (sağa eğik)yazılmasını sağlar.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
6- <i> … </i>
6- <i> … </i>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
7- <u> … </u>
•
<u> etiketi, body kısmında bulunur. Yazının
altıçizili yazılmasını sağlar.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
7- <u> … </u>
7- <u> … </u>
Birlikte Kullanma
•
•
•
•
Etiketler bir arada kullanılabilir.
Örnek: Bir yazının hem kalın, hem italik, hem
altıçizili yazılması sağlanabilir.
Etiketleri kapatırken içten başlayan bir sıra
uygulanır.
<b> <i> <u> …………. </u> </i> </b>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Birlikte Kullanma
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
Birlikte Kullanma
8- <font color= “..” … </font>
•
•
•
•
Yazının rengini belirler.
Eğer kullanılan etikette bir değer belirtmek
gerekiyorsa kodun ardından = yazılır ve
verilecek değer çift tırnak “ ” işaretlerinin
arasına yazılır.
Değerler bir renk, bir sayı hatta bir internet
adresi olabilir.
Örnek:
<font color= “red”> ……….. </font>
•
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
8- <font color= “..” … </font>
8- <font color= “red” … </font>
9- <font size= “..” … </font>
•
•
•
•
•
Yazının boyutunu belirler.
Eğer kullanılan etikette bir değer belirtmek
gerekiyorsa, kodun ardından = yazılır ve
verilecek değer çift tırnak “ ” işaretlerinin
arasına yazılır.
Değerler bir renk, bir sayı hatta bir internet
adresi olabilir.
Örnek:
<font size= “16”> ……….. </font>
9- <font size= “..” … </font>
9- <font size= “16” … </font>
10- <font face= “..” … </font>
•
•
•
•
•
Yazının tipini belirler.
Eğer kullanılan etikette bir değer belirtmek
gerekiyorsa, kodun ardından = yazılır ve
verilecek değer çift tırnak “ ” işaretlerinin arasına
yazılır.
Değerler bir renk, bir sayı hatta bir internet
adresi olabilir.
Örnek:
<font face= “Comic Sans MS”> ….. </font>
10- <font face= “..” … </font>
10- <font face= “comic sans ms” …
</font>
11- <p> </p>
•
•
Paragraf belirler.
Paragrafları özellikle biçimsel değişikliklerin farklı
olmasını istediğimiz zamanlar kullanırız.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
11- <p align= “..”>
•
•
•
•
<p> paragraf etiketi align ile beraber
kullanılınca yazının hizalamasını belirler. Center
left right (sol-sağ-orta) değerleri bulunur
Eğer kullanılan etikette bir değer belirtmek
gerekiyorsa, kodun ardından = yazılır ve
verilecek değer çift tırnak “ ” işaretlerinin arasına
yazılır.
Örnek:
<p align= “center”>
11- <p align= “..”>
Font face
Font color
Font size
Kodlarının, tek bir <font>…… </font> etiketi arasına yazıldığına dikkat ediniz.
11- <p align= “..”>
12- <br> … </br>
•
<br> bir satır boşluk vermek için kullanılır.
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
12- <br> … </br>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
12- <br> … </br>
12- <br> … </br> kullanılmayan
13- <bgcolor= “..”>
•
•
•
•
<bgcolor> sayfanın arka plan rengini
belirlemek için kullanılır.
Eğer kullanılan etikette bir değer belirtmek
gerekiyorsa, kodun ardından = yazılır ve
verilecek değer çift tırnak “ ” işaretlerinin
arasına yazılır.
Örnek:
<bgcolor= “green”>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
13- <bgcolor= “..”>
13- <bgcolor= “..” >
14- <img src= “..”>
•
•
•
<img src> sayfaya resim ekler.
Resmin yolu tam olarak belirtilmelidir.
Örnek:
<img src= “D:\Documents and
Settings\esenordelarthe\Belgelerim\okul.jpg”>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
14- <img src= “……...”>
Resmin bulunduğu yerin tam adresi yazılmalıdır.
Resmin adının yanı-sıra uzantısı da belirtilmelidir.
Resim belgesini, html belgenizin bulunduğu yere kaydetmeyi alışkanlık edinin.
14- <img src= “………..” >
15- <a href= “…...”>
•
•
•
•
<a href> sayfaya köprü(link) ekler.
Bir yazıya ya da resme köprü ekleyebilirsiniz.
Eklenen yazı ya da resmin önüne bu etiket
eklenir.
Adresi yazarken http:// eklenmelidir.
Örnek:
<a href= “http://www.meb.gov.tr”>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
15- <a href= “…...”>
Bağlantının tam adresi yazılmalıdır. (http:// ile birlikte)
Resimden ya da bir metinden köprü kurulabilir
15- <a href= “…...”>
15- <a href= “…...”>
Bağlantının tam adresi yazılmalıdır. (http:// ile birlikte)
Resimden ya da bir metinden köprü kurulabilir
15- <a href= “…...”>
15- <a href= “…...”>
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni
15- <a href= “…...”>
<a href> hem
resimden hem de
resme köprü
ekledik
yazısından önce
olduğu için hem
resme hem de
yazıya bağlantı
eklenmiştir.
16- <body background= “…...”>
•
•
•
•
<body background> sayfanın arkaplanına
resim ekler.
Eklenen resim sayfa boyunca döşenir.
Resmin tam yolu yazılmalıdır.
Örnek:
<body background= ““D:\Documents and
Settings\esenordelarthe\Belgelerim\okul.jpg”>
16- <body background= “…...”>
Arkaplana eklenen resim döşenir. (yani tüm sayfa dolana
kadar tekrar tekrar kullanılır)
16- <body background= “…...”>
17- <h1> …… </h1>
•
Bu etiketi siz deneyin….
Burcu Yılmaz - İbrahim Mert: Bilişim Teknolojileri Öğretmeni