html`e giriş - Pamukkale Üniversitesi

Transkript

BIM 337 - CENG 307
BİRİNCİ DÖNEM 2010 - 11
Web Tabanlı Teknolojiler ve Uygulamaları (3,0) 3
Temel kavramlar. İnternet. İstemci/sunucu teknolojisi.
Internet içerik sunucuları. HTML, Perl, CGI, JavaScript,
Ajax, jQuery, PHP, Asp, Java, takılabilir uygulama ekleri.
Eylül 2010
Tuğrul Yılmaz - Pamukkale Üniversitesi
1
Öğretim Üyesi
Tuğrul Yılmaz
Yer:
307
e-posta
[email protected]
DEĞERLENDİRME
Ara Sınav
Ödevler
Devam
Dönem sonu uygulama sınavı
Dönem sonu yazılı sınavı
Eylül 2010
% 35
% 20
%5
%20
% 20
2
Hafta #
1
Giriş.
2
HTML.
3
HTML, styles,CSS.
4
Javascript’e giriş.
5
Javascript’de nesneler (Objects in Javascripts).
6
Javascript ile dinamik HTML (Dynamic HTML with Javascripts)
7
Ajax, jQuery
8
Ara Sınav
9
Perl
10
CGI
11
Perl ve CGI uygulamaları.
12
PHP.
13
PHP ve MySQL
14
15
Eylül 2010
Başlıklar
PHP ve MySQL
Özet ve tartışma
3
HTML, XML, VE WORLD WIDE WEB
• HTML nedir ve ne için kullanılır?
• Kısa ad HTML “Bağlantılı işaretleme dili”
(“Hypertext Markup Language”) anlamına
gelir.
• HTML, dokümanların (yazı, resim, vs)
bilgisayar ekranına belli bir formatta
aktarılabilmesini sağlar. Bunun için
kullanıcı tarafından web tarayıcıları
(Internet Explorer, Firefox, Opera, vs)
kullanılır.
Eylül 2010
4
Tarihçe
• ~80, “hypercard” Apple’ın bilgi yönetim
sistemi (information management system).
• ~90 HTML’in geliştirilmesi: CERN’de Tim
Bernes-Lee Yüksek enerji fiziği veri
iletişimi için geliştirmeye başladı
• “National Center for Supercomputing
Applications” (NCSA) ilk bugün
kullandığımıza benzer tarayıcıyı Mosaic
adı ile kullanıma sundu. Mosaic 1992
kullanıma verildi, 7 Ocak 1997’de
geliştirilmesine son verildi.
Eylül 2010
5
Eylül 2010
6
HTML Standartları
• HTML standartları W3C denilen ilgili kuruluş ve
kişilerden oluşan bir grup tarafından belirlenir.
http://www.w3.org/Consortium/siteindex
• Şu an üç resmi standart bulunuyor. 2. sürüm
(1994) temel kabul edilmekte ve geriye dönük
uyumluluk açısından halen desteklenmektedir.
• Sürüm 3.2, 1996 yılında kullanıma alındı;
• Sürüm 4.0 1997 yılında kullanıma alındı ve 1999
yılında biraz değiştirildi.
Eylül 2010
7
W3C HTML 4.0 özellikler dokümanından bir not
…HTML değişik platformlarda ve
tarayıcılarda iyi çalışmalıdır. Birlikte
işlerliğin elde edilmesi bütün platformlar
için tek doküman hazırlanacağından içerik
sağlayıcıların giderlerini azaltır. Eğer bu
konuda gayret sarf edilmezse, birbirlerine
uyumsuz formatlardan oluşmuş firmalara
özel, açık olmayan bir web dünyası
oluşturulur ki, bu durum web’in potansiyel
ticari gücünü çok azaltacaktır.
Eylül 2010
8
XML: Örün tarayıcısının özelliği
HTML
XML
<h1>Car</h1>
<h2>Make</h2>
<p>Ford Mustang
<h2>Seats</h2>
<p>5
<h2>Top speeds</h2>
<p>70 mph
Eylül 2010
<h1>Car</h1>
<make>Ford
Mustang</make>
<seats>5</seats>
<speed units=“mph”>70
</speeds>
9
Ana Kurallar
• Eğer iyi kullanılırsa üst metin/bağlantılı metin
(hypertext) güçlü bir sunum, arama ve bilginin
kullanılması aracıdır. Eğer kötü kullanılırsa, anlamı
bulanıklaştırır, gizler ve dokümanı kullanılamaz yapar.
• Biçimlendirme en iyi stiller (styles) ile elde edilir.
Mutlak biçimlendirme kullanılacaksa (örneğin metin
içinde font seçilmesi gibi) yazarların okunabilirlik ve
estetik konusuna daha fazla dikkat etmeleri gerekir.
• Olabildiğince mutlak (absolute) adresleme yerine
görece (relative) adresleme yapılmalıdır. Tarayıcı bu
durumda sayfaları daha kolay bulur ve bu sitenizin
taşınabilirliğini artırır.
Eylül 2010
10
Doküman Etiketleri (Document Tags)
• Etiketler üçken parantezlerle sınırlanır: <h1>;
• Bunlar büyük, küçük harflere hassas değillerdir:
<HEAD>, <head>, veya <hEaD> aynıdır.
• Etiketlerin bir kısmı bitiş etiketi ile bitirilir: </h1>;
• Bazı karakterlerin kaçış karakteri (escape sequences) ile
değiştirilmeleri gerekir.
• Birden çok beyaz boşluk (white space) karakteri (boşluk,
tab ve yeni satır karakteri) tarayıcılar tarafından tek bir
boşluk karakteri olarak algılanır. Bu durum gösterilen
sayfayı değiştirmeden kaynak kodunu daha okunabilir
yapar.
• Genellikle tarayıcılar anlamadıkları etiketleri görmezden
gelirler.
Eylül 2010
11
Doküman Etiketleri (Document Tags)
• Her HTML dokümanında dört etiketin mutlaka bulunması
beklenir. Bunlar başlangıç, başlık, başlık adı ve gövde
etiketleridirler.
• Bunlar <HTML>, <HEAD>, <TITLE> ve <BODY ...>
etiketleridirler. Ek olarak en başta <!DOCTYPE ...>
tanımlaması da kullanılabilir.
• Temel kural: Her ne kadar şu an kullanılan web
tarayıcıları hatalara toleranslı iseler de, bundan sonraki
sürümlerin bu kadar toleranslı olup olmayacağı
bilinmemektedir. Eğer yaptığınız sayfaların ileride de bir
değişiklik yapılmadan görülebilmesini arzu ediyorsanız,
W3C’nin tavsiyelerine uygun dokümanlar hazırlamanız
gerekir.
Eylül 2010
12
En basit örnek sayfa
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE> Benim örnek sayfam</TITLE>
</HEAD>
<BODY>
<H1> Benim sayfam</H1>
Merhaba dünya!
</BODY>
</HTML>
Eylül 2010
13
Açıklama etiketi (Comment tag)
Eğer bir HTML dokümanı hazırlıyorsanız,
bunun içine gösterilen sayfada
görünmeyecek ancak dokümanın içinde
bulunacak açıklamalar koymak
isteyebilirsiniz. Açıklama aşağı örnekteki
etiketlerin arasına konur:

Eylül 2010
14
<body> içi etiketleri
•
•
•
•
<p [align = “left” | “center” | “right”] > paragraf metni </p>
<h1 [align = “left” | “center” | “right”] > başlık metni </h1>
<h6 [align = “left” | “center” | “right”] > başlık metni </h6>
Yatay çizgi: <hr [align = “left” | “center” | “right”]
[size=“n”][noshade][width=“nn%”]>
• Temel kural: Metin sola yanaştırılmışsa (left
alinged) en iyi görünür. Sayfanın ziyaretçilerini
olabildiğince memnun etmeye çalışın ki tekrar
tekrar gelsinler. Sayfanızın çok teknolojik olması
ziyaretçiyi çok etkilemez de, çok ilgilendirmez
de. Ziyaretçi aradığını en kolay şekilde bulmak
ister. Bunu sağlayın. Yeteneklerinizi sergilemek
için değil, sayfaları sergilemek için çalıştığınızı
unutmayın.
Eylül 2010
15
Örnek sayfa
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta http-equiv="Content-Language" content="tr">
<title>Pamukkale Üniversitesi</title>
</head>
<body basefont size="5">
<h1>Pamukkale Üniversitesi </h1>
<h2>Üniversitemiz hakkında...</h2>

<p>Bu site Üniversitemiz hakkında tüm bilgileri içermektedir .
<hr>
<h3>Eğitim</h3>
<p align="center">Denizli'de kurulu Üniversitemiz hakkında
herşey burada.....</p>
<hr noshade width="70%">
<a href="ex_html2.html">Sonraki sayfa</a>
</body>
</html>
Eylül 2010
16
Metin (Text)
Eğer sayfanızı format’la çeşitlendirmezseniz sıkıcı olur. Bu nedenle metin
formatlama etiketleri kullanırız. Bunlardan bazıları
• <b> ve </b> bold,
• <i> ve </i> italics,
• <u> ve </u> underlined,
• <tt> ve </tt> typewriter.
• <basefont size=“n”> n=1,…,7 sayfanın font büyüklüğünü belirler (artık
kullanılmıyor).
• <font size=“[+|-]n” [color=“#rrggbb”]> and </font> font karakteristiği.
• <sub>…..</sub> alt indeks.
• <sup>…..</sup> üst indeks.
• <br> yeni satır (line break).
• Yazdığınız formatı ekranda görmek istiyorsanız <pre> ve </pre> etiketlerini
kullanabilirsiniz.
Eylül 2010
17
Fontlar
•
•
•
•
•
<font size=+2 color="Blue“ face="Verdana">Verdana</font>
<font size=+2 color=“red“ face="Arial">Arial</font>
<font size=+2 color=“yellow“ face="Helvetica">Helvetica</font>
<font size=+2 color=“green“ face="Impact">Impact</font>
<font size=+2 face="Comic Sans MS">Comic Sans MS</font>
Eylül 2010
18
Kaçış karakteri (Escape) dizinleri
Özel karakterleri metin içinde kullanmayın. Bunun yerine kaçış
karakteri dizinleri kullanın... Birçok karakter doğrudan html
kaynak dokumanının içine yazılmaz... Örneğin "<", ">", "©", "&",
ve " . Bunun yerine, "&escape_code;" yazın. Bu 5 karakter için
escape kodları...
•
•
•
•
•
•
Eylül 2010
< = <
> = >
© = ©
& = &
" = "
Boşluk karakteri =  
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Font boyutunu değiştirme</title>
</head>
<body>
<h1>Font Boyutlarının değiştirilmesi </h1>
<basefont size=4>
<p>Bu metin 3 boyutlarında "base font" etiketi ile yazılmıştır...
<p><font size=3>Bu metin 3 boyutlarında "font" etiketi ile yazılmıştır...</font>
<p>Burada da daha büyük yazılmış bir metin <font
size=7>büyük</font>
<font size=+4>m</font>
<font size=+3>e</font>
<font size=+2>t</font>
<font size=+1>i</font>
<font size=-1>n</font>
<pre>
1234 567
abcd efg
</pre>
<a href="ex_html3.html">Sonraki sayfa</a>
</body>
</html>
Eylül 2010
20
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>Font özellikleri</title>
</head>
<body style="font-size: 16pt">
<h1>Font Farklılıkları (Font Variations)</h1>
<p>Bir web sayfasında <b>basit</b> <i>etiketler</i> kullanılarak
<strong>metnin</strong> <tt>Web sayfalarındaki </tt> görünümünü değiştirilebilir.
Alt ve üst simgeler (super<sup>script</sup> and
sub<sub>scripts</sub> ) bile <em>desteklenmektedir.</em></p>
<p><a href="ex_html4.html">Sonraki sayfa</a></p>
</body>
</html>
Eylül 2010
21
<html>
<head>
<title> Bilgisayar Mühendisliği Bölümü</title>
</head>
<body>
<h3> Web Teknolojileri </h3>
<p> Dersin ödevlerinin <strong>vaktinde</strong> hazırlanması
<font color="#121212"> gerekmektedir.</font> Ayrıca derse
<font size="+2">vaktinde</font> gelinmesi <i>şarttır</i>. Ödevlerden < 50
alınması başarısızlık nedeni olacaktır.<br>
<i>" Kurallara dikkat "</i>
<h3> Adresimiz</h3>
<pre>
Pamukkale Üniversitesi
Bilgisayar Mühendisliği Bölümü
Kınıklı Denizli
</pre>
</body>
</html>
Eylül 2010
22
Üstbağ (Hyperlink)
•
•
•
•
<a href=“address”> ….</a>
– <a href=“ex_html2.html”> next page </a>
– <a href=“http://www.pamukkale.edu.tr”> Pamukkale Üniversitesi </a>
Eğer yeni bir pencere açmak istiyorsanız, etiketin sonuna target="_blank"
ekleyin, örneğin <a href="http://www.neonlollipops.com/"
target="_blank">NeonLollipops.com</a>.
<a href=“#target”> ….</a> Dökümanın belli bir noktasına atlamak.
<a name=“#target">….</a> Atlama noktasının işareti.
<a href=“address#target”> ….</a> Başka bir dökümanın belli bir noktasına
atlamak.
<a name=“#target">….</a> hedef yine bir önceki gibi.
• Altın kural: Mümkünse bağıl adres kullanın. Tam adresten
kaçının.
• hyperlink kullanarak sayfalarınızı küçük, orta büyüklükte
sayfalar olarak organize edin; sayfa indirme zamanını minimize
etmeye çalışın.
Eylül 2010
23
Listeler
• <ul> etiketi sırasız listeleri belirler. Bu etiketin içine
listeleme elemanları konur. Bunların her biri <li> etiketi
ile başlar. (eğer isterseniz </li> ile kapatabilirsiniz.)
Listeleme elemanlarının sayısında bir limit yoktur. Her
listelenen elemanın önüne bir nokta konur..
• Sıralı liste de bir önceki gibidir. Sadece <ul> yerine
<ol> ile başlar ve kapatıcı etiketi </ol> dir. Listeleme
elemanları yine <li> ile başlar.
• Tanımlı liste biraz daha zordur. Bu liste <dl> ile başlar
ve </dl> biter. <dt> liste elemanı tanımını <dd> ise
bunun açıklamasını etiketler. Bunlar
kapatılmayabilirler.
Eylül 2010
24
<html>
<head>
<title> Bilgisayar Bölümü</title>
</head>
<body>
<h2> İki basit liste</h2>
<h3>Dersler</h3>
<ul>
<li> web teknolojileri</li>
<li> bilgisayar hukuku</li>
</ul>
<h3> Sınav günleri</h3>
<dl>
<dt>web</dt>
<dd> 2 Kasım
<i> Pazartesi </i>
günü. </dd>
<dt>hukuk</dt>
<dd> henüz belirlenmedi. </dd>
</dl>
</body>
</html>
<h3>Öğretim üyeleri</h3>
<ol>
<li> Tuğrul Yılmaz</li>
<li> Abdulkadir Yaldır</li>
</ol>
Eylül 2010
25
Tablolar
• Tablolar <table> etiketi ile başlar ve genellikle
border="n" niteliği ile devam eder. Eğer border="0“ ise
tablonun kenarları görünmez. Genellikle kullanılmazsa
kenarlar görünmezdir ama değişik tarayıcıların
özellikleri dikkate alınarak yazılsa iyi olur. border="1"
ince kenardır, border="2" daha kalındır, vs. Tablo
</table> etiketi ile bitmelidir. Aksi takdirde hiç
görünmeyebilir.
• Her bir tablo satırı <tr> ve </tr> etiketleri içine konur.
Her bir satırın içinde de <td> ve </td> etiketleri
arasında hücre elemanları konur. Eğer ilk satır farklı
isteniyorsa <th> ve </th> etiketleri kullanılabilir.
Tablonun özellikleri başta yapılan nitelik tanımlamaları
ile değiştirilebilir.
Eylül 2010
26
Tablolar
•
•
•
•
•
•
•
•
•
<table [align=“center” | “left” | “right” ] [border [=“n”]][cellpadding=“n”]
[width=“nn%”][cellspacing=“n”]> ….</table>
<tr [align=“center” | “left” | “right” ] [valign=“top”|”center”|”bottom”]>…</tr>
<th [align=“center” | “left” | “right” ] [valign=“top”|”center”|”bottom”] [nowrap]
[colspan=“n”] [rowspan=“n”]>…</th>
<td [align=“center” | “left” | “right” ] [valign=“top”|”center”|”bottom”] [nowrap]
[colspan=“n”] [rowspan=“n”]>…</td>
<caption> dizgi </caption> tabloyu açıklayan dizgi konur ve hemen tablo
tanımlamasını takip eder.
Tablonun satırları üç grupta toplanabilir. Bu tamamen isteğe bağlıdır ancak
eğer satırlar gruplandırılırsa ve tablo birden çok sayfaya bölünürse, bu
durumda thead grubundakiler her yeni sayfa başında, tfoot
grubundakiler ise her sayfa sonunda tekrarlanır.
<thead>….</thead>
<tfoot>…..</tfoot>
<tbody>….</tbody>
Eylül 2010
27
<html>
<head>
<title> Basit bir tablo</title>
</head>
<body>
<h2> Basit bir tablo </h2>
<table border="1" width="400px">
<tr>
<th width="35%">Sol sütun</th>
<th> Sağ sütun</th>
</tr>
<tr>
<td> Bir miktar veri </td>
<td> Daha çok ve uzun bir veri satırı buraya
konulmuş...</td>
</tr>
</table>
</body>
</html>
Eylül 2010
28
Resimler
• <body background=“URL”> … </body>
Sayfanın tabanına belirlenen resmi koyar.
• <img src=“URL”|”name” height=“n” width=“m”
[alt=“string”] [align=“top”|”center”|”bottom”]
[usemap=“URL”]> resmi gösterir.
• Resmi metin olmadan göstermek istiyorsanız
paragrafın içine koyun.
• <a href=“URL”> text message </a> metin
hyperlink.
• <a href=“URL”><img src=“filename”></a>
görüntü hyperlink.
Eylül 2010
29
Görüntü Eşleme (Image map)
<MAP NAME="map1">
<AREA HREF="contacts.html" ALT="Contacts" TITLE="Contacts"
SHAPE=RECT COORDS="6,116,97,184">
<AREA HREF="products.html" ALT="Products" TITLE="Products"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA HREF="new.html" ALT="New!" TITLE="New!" SHAPE=POLY
COORDS="150,217, 190,257, 150,297,110,257">
</MAP>
<IMG SRC="testmap.gif" ALT="map of GH site" BORDER=0 WIDTH=300
HEIGHT=300 USEMAP="#map1">
<BR>
Eylül 2010
30

html`e giriş - Pamukkale Üniversitesi

Transkript

Benzer belgeler

Bölüm 12 Nesneye Yönelik Programlama

Html Ders Notlari-1 - IbrahimCayiroglu.Com

Röportaj Soruları

BIM 202 - Bahar 2011 Programlama Dilleri

HTML Kullanarak Web Tasarimi

Fon...
Detaylı

HTML Nedir - egitimde

html`e giriş - Pamukkale Üniversitesi

Transkript

Benzer belgeler

Bölüm 12 Nesneye Yönelik Programlama

Html Ders Notlari-1 - IbrahimCayiroglu.Com

Röportaj Soruları

BIM 202 - Bahar 2011 Programlama Dilleri

HTML Kullanarak Web Tasarimi

Fon... Detaylı

HTML Nedir - egitimde

Fon...
Detaylı