HTML Hypertext Markup Language 2009 ANKARA

(1)

2009 ANKARA

HTML

Hypertext Markup Language

(2)

Dersin Amacı

İnternet, ilk ortaya çıktığı zamanlardan bugüne kadar çok hızlı bir gelişme kaydetmiş ve günümüz teknolojilerinin gelişmesine paralel olarak önemli bir iletişim aracı haline gelmiştir. Bu anlamda, internet ortamında yapılacak geliştirmeler de önem

kazanmıştır.

Internet kaynaklarına erişim için kullanıcılar tarayıcı (browser) adı verilen yazılımları kullanır. Günümüzde, en yaygın kullanılan tarayıcılar Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera ve Safari olarak sayılabilir.

Tarayıcılar, HTML, XML ve JavaScript gibi kodları yorumlayabilmektedir.

Web Programlama dersi istemci ve sunucu tarafı olmak üzere iki bölümde incelenir.

Tarayıcı ile ilgili kısımları içeren istemci tarafında HTML, XML ve JavaScript gibi programlama kavramları ele alınmaktadır.

Sunu tarafı için ise ASP.NET web programlama teknolojisi üzerinde durulacaktır.

(3)

HTML Nedir?

Hypertext Markup Language–Üst Metin İşaret Dili Internet üzerinde yayınlanan web sayfalarında kullanılan ortak bir dildir. Bu dil, dokümanların webde

gösterilmesinde kullanılan bir takım tanımları içerir.

HTML kodları kullanıcı tarafından çalıştırılan tarayıcılarca yorumlanarak görüntülenir.

HTML standart bir dil olduğu için, hazırlanan kodlar bu tarayıcılarda aynı sonuçları üretecek biçimde çalışır.

(4)

HTML Kod Yazma ve Çalıştırma

y Htm veya html uzantılı text yapısında dosyalardır.

y Notepad veya Notepad ++ kullanılarak html dosyalar oluşturulabilir.

y Görsel bir şekilde html tasarım editörleri kullanılabilir:

Microsoft Frontpage, Adobe Dreamweaver gibi…

y Start (Başlat) – Accessories (Uygulamalar) – Notepad (Not defteri) çalıştırılır.

y HTML kodları yazıldıktan sonra dosya .htm uzantısı ile kaydedilir.

y Bilgisayarda yüklü olan tarayıcı ile açıldığında görsel olarak istenilen şekilde görüntülenir.

(5)

HTML Kod Yazma Örnek

<html>

<head>

<title>örnek1</title>

</head>

<body>

PROGRAMLAR

<A HREF="bil_muh.htm">Bilgisayar Mühendisliği</A>

<A HREF="end_muh.htm">Endüstri Mühendisliği</A>

<A HREF="yon_bil.htm">Yönetim Bilişim Sistemleri </A>

<A HREF="bil_prog.htm">Bilgisayar Programcılığı</A>

</body>

</html>

(6)

HTML Elementleri

y HTML kodları < > işaretleri arasına yazılır. Bunlara html tag (etiket) denir. Etiket sonu ise </ > bildirilir. Bu bloklara html elementleri denir.

y <HTML>, , gibi.

y Bir HTML dokümanın yapısı

<HTML>

<HEAD>

<TITLE>doküman başlığı</TITLE>

...Program hakkındaki diğer tamamlayıcı bilgiler..

</HEAD>

<BODY>

... Ana HTML kodları buraya kaydedilir..

</BODY>

</HTML>

(7)

HTML İmleri

y HTML elementlerinde kullanılan imlerin yapısı şu şekildedir:

<HTML_Elementi Özellik1=“Değer1”

Özellik2=“Değer”>İçerik</HTML_Element_Sonu>

(8)

Element Nitelikleri

y HTML elementlerinin özellik imleri kullanılarak nitelik belirlemek mümkündür. Bir metin için yazı tipi, renk, yazı büyüklüğü olabileceği gibi bir tablo için satır sayısı, satır yüksekliği, sütun sayısı, sütun genişliği gibi nitelikler de olabilir.

(9)

<HTML> Elementi

y <HTML> elementi, bir html dokümanın başlangıcı belirtir. Bu html doküman içerisine yazılacak tüm kodlar <HTML> etiketi ile başlar, </HTML> etiketi ile sonlanır.

y <HTML> elementi içerisine genel olarak <HEAD>,

<BODY> elementleri dahil olur.

<HTML>

<HEAD>

…

</HEAD>

<BODY>

…

</BODY>

</HTML>

(10)

<HEAD> Elementi

y Doküman ile ilgili tanımlayıcı bilgileri içerir.

Kullanılması zorundu değildir. İsteğe bağlı olarak eklenen bilgiler yorumlanır.

y <HEAD> elementi içerisinde <BASE>, <LINK>,

<META>, <OBJECT>, <SCRIPT>, <STYLE> ve

<TITLE> gibi elementler kullanılır.

y <BASE>: Bu sayfa içerisinde kullanılacak linkler için taban adresi belirtir. Örnek:

<base href=“http://ceng.gazi.edu.tr/web/”/>

<a href=“bilmuh.htm”>Bilgisayar Mühendisliği</a>

(11)

<HEAD> Elementi

y <LINK>: Arama motoru için linkler vermek için kullanılır.

y <META>: Doküman ile ilgili içerik bilgilerinin tanımlanması için kullanılır. Örnek:

y <OBJECT>: Bir dokümandaki farklı framelerde kullanmak üzere eklenecek nesneleri gösterir.

y <SCRIPT>: Script yazmak için kullanılır.

y <STYLE>: Dokümanda kullanılacak stil tanımını içerir.

y <TITLE>: Tarayıcıda gösterilecek olan başlıktır.

(12)

<BODY> Elementi

y HTML dokümanın ana gövdesini oluşturur. Tarayıcı içerisinde gösterilecek bölüm bu element içerisinde tanımlanır.

<HTML>

<HEAD>

<TITLE>BÖLÜM BİLGİLERİ</TITLE>

</HEAD>

<BODY>

PROGRAMLAR

</BODY>

</HTML>

(13)

Başlıklar

y Sayfa içerisinde alt başlıklar belirtmek için <H1>,

<H2> … gibi etiketler kullanılabilir.

<HTML>

<HEAD>

<TITLE>BÖLÜM BİLGİLERİ</TITLE>

</HEAD>

<BODY>

<H1> PROGRAMLAR </H1>

</BODY>

</HTML>

(14)

Paragraflar -

y Paragraf başlatmak için ve sonlandırmak için

etiketleri kullanılır.

y Hizalama yapmak için ALIGN özelliği kullanılır.

Ortalı yazar

Sağa yanaşık yazar

Sola yanaşık yazar (varsayılan)

(15)

Paragraflar -

<HTML>

<HEAD>

<TITLE>ÜNİVERSİTE BİLGİLERİ</TITLE>

</HEAD>

<BODY> <H1>GAZI ÜNİVERSİTESİ</H1>

GAZI ÜNİVERSİTESİ Türk Dünyasının bilgi çağına açılan bir bilim

penceresidir. Üniversitemizde aşağıda sıralanan fakülteler yer almaktadır:

Mühendislik ve Fen Bilimleri Fakültesi

Tıp Fakültesi

Ekonomi Fakültesi

Hukuk Fakültesi

Türk Dili ve Edebiyatı Fakültesi

</BODY>

</HTML>

(16)

Yeni Satır -

y elementi kullanılarak bir alt satıra geçiş yapılır.

<HTML>

<HEAD>

<TITLE>Yeni Satır Örneği</TITLE>

</HEAD>

<BODY>

<H1>Deneme</H1>

Paragraf içerisinde yazılar yazıldıktan sonra

Bir alt satıra geçmek mümkündür İki alt satır için:

Sayfa sonu

</BODY>

</HTML>

(17)

Yazı Tipi Belirleme -

y Yazı tipleri elementi yardımıyla değiştirilir.

(18)

Karakter Biçimlendirme

… Koyu

… Eğik

… Altı çizili

<S>…</S> Üzeri çizili

<TT>…</TT> Eşit aralıklı karakterler

<BIG>…</BIG> Bir büyük font

… Bir küçük font

… Alt indis x₂

… Üst indis x²

(19)

Açıklama Satırları

y

y Yukarıda … ile belirtilen yere açıklamalar yazılabilir.

<!-- buraya açıklama yazılabilir.

alt satırdan devam edilerek

sonraki satırda açıklama bitirilebilir -->

y Açıklama satırları yorumlanmaz, çalıştırılmaz, dikkate alınmaz.

(20)

HTML Bağlantıları

y Bir HTML sayfadan başka bir sayfaya bağlantı kurmak için <a> elementi kullanılır. Buna aynı zamanda çapa (anchor) denir.

y <a href=“…” title=“…”>bağlantı içeriği</a> şeklinde kullanılarak title özelliğinde kullanıcıya açıklayıcı

bilgi görüntülenebilir.

(21)

HTML Bağlantıları

<HTML>

<HEAD>

<TITLE>Arama Motorları</TITLE>

</HEAD>

<BODY>

<H1>ARAMA MOTORLARI</H1>

<A HREF="http://www.yahoo.com">Yahoo </A>

<A HREF="http://www.lycos.com">Lycos </A>

<A HREF="http://www.altavista.com">Alta vista </A>

<A

HREF="http://www.infoseek">Infoseek </A>

<A

HREF="http://www.excite.com">Excite </A>

</BODY>

</HTML>

(22)

HTML Bağlantıları

y <A NAME=“bağlantı adı”></A> ile tanımlama yapılarak daha sonra

<A NAME=“#bağlantı adı”>İçerik</A>

kullanılarak tanımlanan yere gidilmesi sağlanabilir.

y TARGET özelliği kullanılarak hedef bağlantının nasıl açılacağı belirtilebilir.

TARGET=“_blank” Yeni bir pencerede TARGET=“_parent” Bir üst seviye çerçeve

TARGET=“_self” Kaynak bağlantı çerçevesi TARGET=“_top” Tüm tarayıcı penceresi

(23)

Görüntülerin Kullanılması

y <IMG> elementi yardımıyla sayfalara görüntüler eklenebilir.

<IMG SRC=“görüntü adı” ALT=“açıklama” ALIGN=“Hizalama”

HSPACE=“boşluk” VSPACE=“boşluk” HEIGHT=“yükseklik”

WIDTH=“genişlik”>

SRC Görüntünün adı, adresi

ALT Açıklama metni

ALIGN Hizalama (TOP, MIDDLE, BOTTOM, RIGHT, LEFT) HSPACE Metin ile resim arasında yatay boşluk.

VSPACE Metin ile resim arasında dikey boşluk HEIGHT Resmin yüksekliği

WIDTH Resmin genişliği

<A HREF=“…”><IMG SRC=“…”></A> ile resimlere link verilebilir.

(24)

Tablolar

y <TABLE>…</TABLE> elementi yardımıyla sayfaya tablo eklenebilir.

<TABLE> Tablo

<TR> Tablo içerisine eklenecek satır

<TD> Tablo satırına eklenecek sütun

<CAPTION>…</CAPTION> elementi yardımıyla tabloya başlık verilebilir.

<TH> Tabloda yer alan sütun başlıkları belirlenir.

ROWSPAN=“…” Belirtilen miktarda satırı birleştirir.

COLSPAN=“…” Belirtilen miktarda sütunu birleştirir.

(25)

Tablolar

<HTML>

<BODY>

<CAPTION>Tablo Örneği</CAPTION>

<TR>

<TH>Adı Soyadı</TH>

<TH>Öğrenci No</TH>

<TH>Sınav Notu</TH>

</TR>

<TR>

<TD>Hüseyin Karahan</TD>

</TR>

<TR>

<TD ROWSPAN=“2”>Deneme</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

(26)

Tablolar

<HTML>

<BODY>

<CAPTION>Tablo Örneği</CAPTION>

<TR>

<TH ROWSPAN=2>Adı Soyadı</TH>

<TH ROWSPAN=2>Öğrenci No</TH>

<TH COLSPAN=2>Sınav Notları</TH>

</TR>

<TR>

<TD>Final</TD>

</TR>

<TR>

<TD>Hüseyin KARAHAN</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

(27)

ÖRNEK UYGULAMALAR

<html>

<body>

<h1>My First Heading</h1>

My first paragraph.

</body>

</html>

(28)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y This is a paragraph.

y Paragraph elements are defined by the p tag.

y </body>

y </html>

(29)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y This paragraph

y contains a lot of lines

y in the source code,

y but the browser

y ignores it.

y

y

y This paragraph

y contains a lot of spaces

y in the source code,

y but the browser

y ignores it.

y

y

y The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

y

y </body>

y </html>

(30)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y This is a para graph with line breaks

y </body>

y </html>

(31)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y <h1>This is heading 1</h1>

y </body>

y </html>

(32)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y <h1 align="center">This is heading 1</h1>

y The heading above is aligned to the center of this page.

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.

y </body>

y </html>

(33)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y The hr tag defines a horizontal rule:

y <hr />

y This is a paragraph

y <hr />

y </body>

y </html>

(34)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y This is a regular paragraph

y </body>

y </html>

(35)

ÖRNEK UYGULAMALAR

y <html>

y <body bgcolor="yellow">

y <h2>Look: Colored Background!</h2>

y For future proof HTML, use HTML styles instead:

y style="background-color:yellow"

y </body>

y </html>

(36)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y This text is bold

y This text is strong

y <big>This text is big</big>

y This text is emphasized

y This text is italic

y This text is small

y This is subscript and superscript

y </body>

y </html>

(37)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y <pre>

y This is

y preformatted text.

y It preserves both spaces y and line breaks.

y </pre>

y The pre tag is good for displaying computer code:

y <pre>

y for i = 1 to 10

y print i

y next i y </pre>

y </body>

y </html>

(38)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y <a href="lastpage.htm">

y This text</a> is a link to a page on

y this Web site.

y

y

y <a href="http://www.microsoft.com/">

y This text</a> is a link to a page on

y the World Wide Web.

y

y </body>

y </html>

(39)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y You can also use an image as a link:

y <a href="lastpage.htm">

y <img border="0" src="buttonnext.gif" width="65"

height="38">

y </a>

y

y </body>

y </html>

(40)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y <a href="lastpage.htm" target="_blank">Last Page</a>

y

y If you set the target attribute of a link to "_blank",

y the link will open in a new window.

y

y </body>

y </html>

(41)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y <a href="#C4">See also Chapter 4.</a>

y

y <h2>Chapter 1</h2>

y This chapter explains ba bla bla

y <h2><a name="C4">Chapter 4</a></h2>

(42)

y <h2>Chapter 7</h2>

y This chapter explains ba bla bla

y </body>

y </html>

(43)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y Locked in a frame?

y <a href="http://www.w3schools.com/"

y target="_top">Click here!</a>

y </body>

y </html>

(44)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y This is a mail link:

y <a href="mailto:someone@microsoft.com?subject=Hello%20again">

y Send Mail</a>

y

y

y Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

y

y </body>

y </html>

(45)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y This is another mailto link:

y <ahref="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsom eoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%2 0to%20a%20big%20summer%20party!">Send mail!</a>

y

y

y Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

y

y </body>

y </html>

(46)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y This text is bold

y This text is strong

y <big>This text is big</big>

y This text is emphasized

y This text is italic

y This text is small

y This is subscript and superscript

y </body>

y </html>

(47)

ÖRNEK UYGULAMALAR

y <html>

y <body>

y

y a dozen is

y <del>twenty</del>

y <ins>twelve</ins>

y pieces y

y

y Most browsers will overstrike deleted text and underline inserted text.

y

y

y Some older browsers will display deleted or inserted text as plain text.

y

y </body>

y </html>

HTML Hypertext Markup Language 2009 ANKARA

HTML

Dersin Amacı

HTML Nedir?

HTML Kod Yazma ve Çalıştırma

HTML Kod Yazma Örnek

HTML Elementleri

HTML İmleri

Element Nitelikleri

<HTML> Elementi

<HEAD> Elementi

<HEAD> Elementi

<BODY> Elementi

Başlıklar

Paragraflar - <P>

Paragraflar - <P>

Yeni Satır - <BR>

Yazı Tipi Belirleme - <FONT>

Karakter Biçimlendirme

Açıklama Satırları

HTML Bağlantıları

HTML Bağlantıları

HTML Bağlantıları

Görüntülerin Kullanılması

Tablolar

Tablolar

Tablolar

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR

ÖRNEK UYGULAMALAR