İnternet Programcılığı

Transkript

00 50 115
İNTERNET PROGRAMCILIĞI
1
Öğr.Gör. Fırat YÜCEL
Akdeniz Üniversitesi
Enformatik Bölümü
00 50 115
Kaynak
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web: How to Program, Prentice
Hall, 2002
2
00 50 115
Web sitesi tasarlama

3
Web site tasarımı için üç adım vardır:
1. Gerekli ekipmanları sağlama
 Web Sunucusu (Server) – donanım ve
yazılım
2. Web sunucusunu Internet Servis Sağlayıcı
(ISP) ya kaydetme
 IP adresi ve DNS adresi alma
3. İçerik geliştirme
 Internet Programcılığı
00 50 115



Web hizmeti, bir çeşit sunucu/istemci işlemidir.
İstemci ve sunucu arasında bağlantıya ihtiyaç
vardır.
Web hizmeti sağlamak için programlama iki
çeşittir:
–
–
4
İstemci-taraflı (client-side) programlama: İşlemlerin
istemci tarafında gerçekleştirilmesi olarak tanımlanır.
Sunucu-taraflı (server-side) programlama: İşlemlerin
sunucu tarafında gerçekleştirilmesi olarak tanımlanır.
00 50 115
İnternet
Veritabanı Web Sunucusu
Sunucu-taraflı Programlama
Sıklıkla gereken beceriler:
• CGI
• PHP
• ASP
• Perl
• Java Servlet, …
5
Web İstemcisi
İstemci-taraflı Programlama
Sıklıkla gereken beceriler:
• XHTML
• Javascript
• Java
• Dreamweaver
• Flash
• SMIL, XML …
00 50 115
HTML – HyperText MarkUp Language
(Zengin Metin İşaretleme Dili)
6
00 50 115
HTML Kullanarak Web Programlama

Günümüzde web sayfası geliştirmek için birkaç
araç vardır:
–



Bu araçlar grafik düzeyde web sayfası
geliştirmeyi sağlar.
Sonuçta yapılan tasarım HTML kodlarına
dönüştürülür.
HTML’yi bilmek şunları sağlar:
–
7
Dreamweaver, Visual studio
–
Bu araçlar yardımıyla üretilen kodlar üzerinde
iyileştirme
Web sayfasının kaynağını anlama
00 50 115
HTML nedir?



8
C, C++ gibi programlama dillerinden farklı olarak,
HTML, sayfanın ayarlanan şekilde tarayıcıda
gösterilmesini sağlayan bir işaretleme dilidir.
World Wide Web Consortium (W3C) tarafından
tanımlanmıştır.
–
W3C, bir endüstri konsorsiyumudur.
–
Web ile ilgili standartları belirleyen kuruluştur.
XHTML, HTML’nin daha iyileştirilmiş, geliştirilmiş ve
özellikleri genişletilmiş halidir.
00 50 115
HTML’nin Özellikleri

Platform bağımsızdır.
–

Metin-tabanlı
–
–


Program, ASCII karakterleriyle yazılır.
Not defteri gibi bir metin editöründe yazılabilir.
HTML dosyası .html veya .htm uzantılarını alır.
Bilgi, etiketler (tags) içinde bulunur.
–
–
9
Aynı kodlar Mac, Linux ve Windows sistemlerde yaklaşık aynı
şekilde görünür.
Örneğin <html> … </html>
HTML’de birçok etiket bulunur. Bu etiketler, bilgilerin web
sayfasında yayınlanmasıyla ilgili değişik tanımlamalar yaparlar.
Başlama etiketi
Bitiş etiketi (/ ile)
00 50 115
HTML’nin Temel Yapısı
<html>

<head>
<title>
Bu, içeriği tanımlayan başlıktır.
</title>
</head>
<body>
Bu gövdedir, sayfanın ana kısmıdır.
</body>
</html>
10
00 50 115
Kod tanımlama için gerekli satırlar
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!– İlk web sayfamız
Bilgi mesajı
-->
HTML’nin isim uzayını tanımlama
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>İnternet Programcılığı
</title>
</head>
Sayfa başlığını tanımlama
<body>
<p>HTML’ye merhaba!</p>
</body>
</html>
11
<p> - yeni paragraf
Örnek
00 50 115
Başlık tanımı
12
Body (gövde) tanımı
00 50 115


Bir HTML dokümanı iki kısımdan oluşur:
head kısmı
–
–

body kısmı
–
–
13
Sayfa düzeni ile ilgili ayarları içerir.
Örneğin <title> … </title> etiketleri, sayfanın web
tarayıcındaki başlığını tanımlar ve head kısmında
tanımlanır.
Sayfa içeriği burada bulunur.
Örneğin <p>HTML’ye merhaba!</p> etiketleri, yeni
bir paragraf oluşturarak yeni bir yazı görüntüler.
00 50 115
Etiketler (Tags)

Etiketler: büyük/küçük harf duyarlıdır.
–
–




14
XHTML için, <center> tanımı, <CENTER>’dan farklıdır.
HTML için büyük/küçük harf duyarlılığı yoktur.
Tarayıcı, anlamadığı etiketler arasındaki bilgiyi
görüntülemez ya da istenenden farklı şekilde görüntüler.
Etiketler: Konum ayarlı değildir.
Birçok başlangıç etiketinde özellikler (attributes)
tanımlanır.
E.g. <html xmlns = "http://www.w3.org/1999/xhtml">
Başlangıç Özellik adı
etiketi
Özellik değeri
TEMEL ETİKETLER
Alt Satıra Geçme ve
Paragraf Ekleme

Alt satıra geçmek için kullanılan etiket: <br>
<body>
Enformatik<br>Bölümü<br>
</body>

15
Not: <br> etiketinin kapanış etiketi (</br>)
yoktur.
Paragraf eklemek için kullanılan etiket:
<p> …Paragraf metni... </p>
00 50 115
Renklendirme

İki yolla yapılır:
Onaltılı sayı tabanında numaralar kullanılarak,
RGB formatı: FF: koyu, 00 açık
 #FF0000
 #00FF00
 #0000FF
– İngilizce renk isimlerini kullanarak,
 Black, White, Red, Cyan, Green, Purple,
Magenta, Blue, Yellow, Orange, Red, Spring,
Green, BlueViolet, Gold, DarkGoldenrod,
Burlywood, …
–
16
00 50 115
Renklendirme

Arkaplan rengi:
–
–

Sayfadaki tüm yazı renkleri, linkler, ziyaret
edilen linkler ve etkinleştirilmiş linkler:
–

<body bgcolor =“white” text=“black” link=“purple”
vlink=“blue” alink=“yellow”>
Yazı rengi:
–
17
<body bgcolor=“#00FF00”> … </body>
<body bgcolor =“green”> … </body>
<font color=“green”> … </font>
00 50 115
Yazıların Biçimlendirilmesi


18
Yazı biçimlendirmek için <font> … </font> etiketleri
kullanılır.
Özellikler:
– Renk:
– Boyut:
 Göreceli: +1, +2, -3, …
 Sabit değerli: 10, 12, …
– Yazı tipi:
 Arial, Verdana, Helvetica, Times, …
00 50 115
Arkaplan rengi sarı
<body bgcolor = “#ffff00”>
<p><font face="courier" color="green" size=“24”>
Bu bir denemedir.</font>
Yatay çizgi
<hr />
<font face="times" color="red" >
Ters bölü, okunaklılığı
</p>
artırmak için kullanılır.
<p>
<font face="arial" color="red" size=“+1”>
<p> ve
<br />
<br>
arasındaki <font face="times" color="#ff00ff" size=“+2”>
farkı
</p>
görünüz. <p align = center><font face="courier" size=“+3”>
</p>
Ortaya hizalar.
19 </body>
00 50 115
boyut = 24
Varsayılan boyut
boyut = +1, +2, +3
20
00 50 115
Resim Ekleme

Sayfada bir resmi görüntülemek için:
<img src=“image.gif” border=“0” height=“256”
width=“256” alt=“resmin açıklaması”/>

Arkaplan resmi <body> etiketine eklenen bir
özellikle tanımlanabilir:
<body background=“image.gif”>
21
00 50 115
Resmin boyutlarını ayarlama
<body>
<p><img src = "xmlhtp.jpg"
height = "238“ width = "183"
alt = "XML How to Program kitap kapağı"/>
<img src = "jhtp.jpg"
height = "238" width = "183"
alt = "Java How to Program kitap kapağı"/>
</p>
</body>
22
Boş eleman:
Böyle bir resim
aslında bulunmuyor.
jhtp.jpg bulunamadı. alt özelliğiyle,
resim görüntülenemezse buraya
yazılan metin görüntülenir.
00 50 115
“alt” tanımlaması
(Netscape için aynı
görüntülenmeyebilir.)
Resim belirlenen boyutta
görüntülenir.
23
00 50 115
Başlıklar


Bazı metinler diğerlerinden daha önemli olabilir.
HTML, başlık türleri olarak adlandırılan, 6 seviye başlık
tanımlamaya izin verir.
–


24
<h1> … </h1>, <h2> … </h2> ’den <h6> … </h6> ’ya kadar
Örneğin <h1> etiketleri arasındaki metin, <h2>’dekinden
daha üst düzeylidir.
Varsayılan olarak, önem derecesi yüksek olan yazının
boyutu daha büyüktür.
00 50 115
<html>
<head>
<title>İnternet Programcılığı</title>
</head>
<body>
<h1>Düzey
<h2>Düzey
<h3>Düzey
<h4>Düzey
<h5>Düzey
<h6>Düzey
</body>
</html>
25
1
2
3
4
5
6
Başlık</h1>
Başlık</h2>
Başlık</h3>
Başlık</h4>
Başlık</h5>
Başlık</h6>
Başlık seviyesini
göstermek üzere 6 tür
etiket kullanılır.
00 50 115
<h1>’deki yazı en büyük boyuttadır.
26
00 50 115
Web Sayfalarında Köprü Oluşturma

Önemli bir HTML özelliği, köprü (hyperlink)’tir.
–

Web sayfası, resim vb. gibi diğer kaynaklara
bağlantı oluşturma
Köprü oluşturmak için <a> etiketi kullanılır.
–
Bir web sayfasına köprü oluşturmak için:
<a href=“http://enformatik.akdeniz.edu.tr”>
Enformatik Bölümü</a>
<a> etiketinin href özelliği
27
Özelliğe atanan değer:
Web sayfasının adresi
Bu bağlantının gideceği
web sayfasının adı
00 50 115
<body>
<h1>Başlık 1</h1>
<strong> ya da <b> etiketi metni
koyu yazmak için kullanılır.
Diğer benzer etiketler;
<u> altıçizili
<em> ya da <i> eğik
<p><strong>İlgili sayfaya gitmek için tıklayın:
</strong></p>
Üç link oluşturuldu.
<!– Üç test linki -->
<p><a href = "http://www.akdeniz.edu.tr">A.Ü.</a></p>
<p><a href = "http://enformatik.akdeniz.edu.tr">
Enformatik Bölümü </a></p>
<p><a href = "http://www.google.com">Google</a></p>
</body>
28
URL adresini yazarken boşluk
bırakmayınız!
00 50 115
Bu satır koyu yazıyla görüntülenir.
Üç link oluşturuldu.
29
00 50 115
E-posta Adreslerine Köprü Oluşturma

Resme köprü oluşturmak için:
<a href=“page1.html”>
<img src=“image.gif” …/>
</a>

Bir e-posta adresine:
<a href=“mailto:[email protected]”>
e-posta gönderin
</a>
30
00 50 115
Meta Etiketi

HTML, arama motorlarıyla bağlantı
kurmak için <meta> etiketini kullanır.
Bu kelimeler, aranan
kelimelerle karşılaştırılır.
<head>
<meta name=“keywords” content=“ders notları, html,
form, geri dönüt”>
<meta name=“description” content = “Bu web sitesi
internet programcılığı dersi ile ilgilidir.”>
</head>
31
Aramada, sayfa hakkında görünen bilgidir.
00 50 115
Listeler

Sırasız liste
Herhangi bir harf ya da sayıyla numaralandırılmayan
listelerdir.
– <ul> … </ul> etiketleri bir sırasız liste oluşturur.
– Liste elemanları
list items: <li> … </li>
– Örneğin;
<ul>
<li>Elma</li>
<li>Portakal</li>
<li>Muz</li>
</ul>
–
32
00 50 115
Listeler

Sıralı liste
–
–
Elemanları sayı veya harflerle
numaralandırılmış listelerdir.
<ol type=“tip”> … </ol>
tip aşağıdakilerden birisi olabilir:





–
33
1: onlu sayılar, 1, 2, 3, …
I: Büyük harf Roma rakamı, I, II, III, …
i: Küçük harf Roma rakamı, i, ii, iii, …
A: Büyük Latin harfi, A, B, C, …
a: Küçük Latin harfi, a, b, c, …
Liste elemanları: <li> … </li>
00 50 115
Tablolar

Satır ve sütunlarla verileri organize eder.
Tablo üst başlığı
Tablo üst satırı
Tablo gövdesi
Tablo alt satırı
34
Tablo kenarlığı (border)
00 50 115


<table özellik=“değer”> … </table>
Özellik örnekleri:
–
–
–



35
border=“1”  bu sayı arttıkça kenarlık kalınlığı artar. border=“0”
olduğunda tablo kenarlığı gözükmez.
align=“center”  tabloyu, tarayıcının ortasına hizalar.
width=“60%”  tablonun genişliğini, tarayıcı genişliğinin % 60’ı
olarak ayarlar.
Tablo Etiketi : <caption> … </caption>
Tabloya satır ekleme: <tr> … </tr>
Başlık satırı, gövde ve son satır aşağıdaki gibi
tanımlanır:
<thead> … </thead>
<tbody> … </tbody>
<tfoot> … </tfoot>
00 50 115
Çizgi
kalınlığı
Genişlik
Hizalama
<table border = "1" width = "40%" align = left>
<tr>

<td>Elma</td> <!– bir hücre ekler -->
<td>0.25 TL</td>
tr etiketi, yeni bir
</tr>
satır ekler.
<tr>
<td>Portakal</td>
<td>0.30 TL</td>
</tr>
td etiketi, yeni
</table>
36
bir hücre ekler.
00 50 115
37
00 50 115
Satır ve Sütun Birleştirme

colspan ve rowspan sütunları ve satırları
birleştirmek için kullanılır.
–
<colspan=“sayı”>

–
<rowspan=“sayı”>

38
Birkaç sütundaki veri hücreleri yatayda birleştirilir.
Birkaç satırdaki veri hücreleri düşeyde birleştirilir.
00 50 115
39
<table border=“1” width=“60%”>
<caption> Average Grades </caption>
<tr>
İlk satır
<th colspan=“4”> Report </th>
</tr>
<tr>
<th> </th> <th> 2000 </th> <th> 2001 </th>
<th> 2002 </th>
2. satır
</tr>
<tr>
<td> Maths </td> <td> A </td> <td rowspan=“2”
valign=“center”> B </td> <td> C </td>
</tr>
3. satır
Yatay hizalama
<tr>
<td> English </td> <td> C </td> <td> A </td>
</tr>
4. satır
</table>
00 50 115
40
00 50 115
Forms


41
When browsing
web sites, users
often need to
provide information
such as email
address, search
keywords, etc
Forms allows user
to input information
00 50 115
App
CGI
Internet
Web Server
www.abc.com/form.htm
Web Client
1
2
www.abc.com
method = post or get
action = program name
(script) in server to
receive the data
Name = ???
42 and others
3
00 50 115



43
A form element is inserted into a web page by the
<form> tag
<form method = “value1” action = “value2”> … </form>
Attributes:
– method = “post” or “get”
 Indicates the way the Web server will organize and
send you the form output
 post: causes changes to server data, e.g., update
a database
 get: does not cause any changes in server-side
data, e.g., make a database request
– action = “”
 Path to script, e.g., CGI
00 50 115
use post method
script that will be called to
execute in the server
<form method = “post” action = “/cgi-bin/formmail”>
<input type=“radio” name=“size” value=“large”
checked=“checked”/> large
<input type=“radio” name=“size” value=“medium”/>
medium
<input type=“radio” name=“size” value=“small”/>
small
</form>
44
Only the radio
button of large is
checked
00 50 115
Forms


Elements inside a form are introduced by the
<input> tag
<input>
–
–
–
–
–
45
type=“hidden” name=“variable name”
value=“value that sends to the server”
type =“text” name=“” value =“” size=“25”
type =“submit” value =“”
type =“reset” value =“”
type =“checkbox” value =“” name=“”
00 50 115
Form example I
Thing that sends back to server
<input type=“checkbox” name=“things”
value=“ham”/> Ham
value=“sweetcorn”/> Sweet Corn
value=“mushroom”/> Mushroom
value=“chicken”/> Chicken
value=“peas”/> Peas
The words show on screen
46
Indicate all 5
checkboxes
belong to the
same group
00 50 115
Form example II
Data that would send to
server but do not display on
screen
<input type="hidden" name=“title" value="Feedback" />
<p><label>Name:
<input type= "text" name= "name" size="25"
maxlength="30"/>
</label>
send the input the textbox to server
</p>
<input type= "submit" value="Submit your entries"/>
<input type= "reset" value="Clear Your Entries"/>
47
clear the content of textbox
00 50 115
Form example III
Masked by asterisk
Space is counted here
<p><label>Comments:<br />
<textarea name= "comments" rows="4" cols="36">
Enter your comments here.
</textarea> </label></p>
<p><label>Please input your password:
<input name= "secret" type="password" size="25"/>
</label></p>
<input type= "submit" value="Submit Your Entries"/>
48
00 50 115
Form example IV
The “selected” value here
mean Amazing is selected
default value
<p><label>Rate our site:
<select name= "rating">
<option value=“Amazing”
selected="selected">Amazing</option>
<option value=“3”>3</option>
Change to default
value when reset
</select></p>
<input type= "submit" value="Submit Your Entries"/>
49

İnternet Programcılığı

Transkript

Benzer belgeler

HTML Kullanarak Web Tasarimi

bölüm 6 - WordPress.com

ÖZGEÇMİŞ 1. Adı Soyadı : Emrah DİKBIYIK 2. Doğum tarihi : 03.03

Html Ders Notlari-1 - IbrahimCayiroglu.Com

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