Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? Ders 2

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. Ders 2"

Transkript

1 Giriş Html temelleri Ders 2 World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en yaygın olan TCP/IP haberleşme protokolünü kullanır. Kullanıcı bir yerden başlar ve diğer yerlerle ve kaynaklara bağlantı kurar. Bu işlemlerin ş yerine getirilmesi için üç farklı yazılıma ihtiyaç vardır: Server (hizmet sağlayıcı) Web sayfası (Bizim dersin konusu) Kullanıcı yazılımı, tarayıcı (browser) 1 2 Giriş -devam Çoğu büyük şirketler kendi web serverlarına sahiptir, küçük şirketler ve bireysel kullanıcılar Internet Service Providers (ISPs, internet servis sağlayıcılar) tarafından sunulan hizmetten yararlanarak web sayfalarını internette sergilerler. Web tarayıcıları GUI (Graphical User Interface) veya CUI (Character User Interface) olmak üzere iki ana grupta toplanır. Web sayfaları programlama sayesinde web ortamını etkileşim kazandırır. URL nedir? Universal Resource Locator olarak bilinir. Web sayfalarındaki link bağlantıları için kullanılır. URL, protokol, kullanıcı ismi ve şifresi (genellikle ihmal edilir), sistem ismi, yeri, istenilen dosyanın ismi gibi bilgileri sağlar www protokolleri Hypertext nedir? Protokol file ftp gopher http mailto news telnet Tanımlama Get file on current system (client) File Transfer Protocol Information Service protocol superseded by http HyperText Transport Protocol Send Net News Transport Protocol (NNTP) Terminal session communications Dokümanın herhangi bir bölgesine veya diğer dokümanlara linkler sağlayan herhangi bir dokümana uygulanan tanımlamadır. Dokümanı baştan sonra incelemek yerine, dokümanın belirli bölgelerine linkler yardımıyla geçme imkanı sağlar. Referans ile aralarındaki en önemli fark, kullanıcının referansı kendisinin içindekiler veya indeks yardımıyla arayıp bulmasıdır. Hypertext de bu ise bir tıklama mesafesi uzaklıktadır

2 Web Sayfası HTML tanıtımı -1 Bir web sitesindeki ilk sayfaya erişilmesi için standart dosya isimleri verilir. Bu kurulu olan sunucu yöneticisi tarafından ayarlanır. Bunun için kullanılan genel isimler index.html veya welcome.html Buradaki uzantı windows yüklü makinelerde bazen.htm olur. Tarayıcınızda yazıldığında otomatik olarak bağlantısı kurulur. Sonuç olarak sunucumuza yerleştireceğimiz web sayfamızın giriş sayfası index.html ismine sahip olmalıdır. Bireysel Web sayfalarının programlaması HTML (Hypertext Markup Language) yardımıyla yapılır. HTML sayfaya erişildiğinde tarayıcıdan elde edilecek görüntü ve diğer sayfalara yapılacak linkleri tanımlar. Bu dil, web tarayıcısı tarafından text (yazı), resim ve linklerin nasıl görüntüleneceğini ğ belirleyen kod ve takıları (tag) tanımlar. HTML dilinde takılar < ve > sembolleri arasına yerleştirilirler. Takılar için büyük veya küçük harf duyarlılığı yok olmasına karşılık değişkenlere veya özelliklere atanan değerler de büyük veya küçük harf duyarlılığı olabilmektedir. Takıların büyük çoğunluğu kapatılmalıdır. <title> Başlık </title> 7 8 HTML - 2 <title> Title text goes here </title> <H1> İlk başlık buraya gelir </h1> <! Yorumlar buraya yazılır --> <hr> <! yatay çizgi çizer --> Dikkat edilirse <hr> için kapatma takısı gerekli değildir. Bir çok HTML versiyonu bulunmaktadır. Hatta artık XHTML olarak adlandırılmaktadır ve temel olarak HTML 4.1 üzerinden geliştirilmiştir. Daha geniş bilgi için Web tarayıcıları tanımadıkları takıları görmezden gelirler. Çoğu web sayfası aşağıdaki açıklamayı kullanır: This page optimized for the XYZ browser. Bu sayfa XYZ tarayıcısı için optimize edilmiştir. 9 HTML - 3 Makul minimumdaki bir HTML dokümanı dört eleman içerir: <html> </html> Dokümanın tamamını içerir <head> </head> Baş kısım bilgisini içerir <title> </title> Başlığı içerir. <body> </body> Dokümanın vücut kısmını içerir. <html> <head> <title> Başlık Buraya Yazılır </title> </head> <body> Web Sayfasının Ana Kısmı Burasıdır </body> </html> html örnekler\örnek1.html 10 HTML - 4 Font büyüklüklerini kontrol etmek için altı seviyeli başlık takısı bulunmaktadır. <h1>, <h2>,,<h6> html örnekler\örnek2.html Fontların kalınlık, italik, vurgulu vb. özellikleri için <ADDRESS>, <CITE>, <CODE>, <EM>, <KBD>, <SAMP>, <STRONG>, <VAR> takıları kullanılır. html örnekler\örnek3.html <br> satır başına geçilmesi gerektiğini ifade eder. <i> italik yazı için, <b> ise kalın yazı için kullanılır. <S> üzeri çizgili, <U> altı çizili, <TT> Typewriter, <BLINK> yanıp sönen yazı için kullanılır. <sup> ve <sub> sırasıyla üst simge ve alt simge şeklinde yazdırmak için kullanılır. html örnekler\örnek4.html 11 HTML - 5 Yeni paragraf <P> takısıyla yapılır. Kapanış istemez. Bir kimsenin eserinden alıntı yapacaksanız bunu <blockquote> ve </blockquote> ile yapabilirsiniz. <abbr title="world Health Organization">WHO</abbr> was founded in Kısaltma yapmak için kullanılır. Eğer özel bir format kullanmak isterseniz bunu <pre> ve </pre> ile yapabilirsiniz. i html örnekler\örnek5.html Ortalı yazı yazmak için <center> ve </center> takıları kullanılır. Hizalama yapılırken <h5 align=left> veya <p align=right> takılarından da yaralanılabilir. html örnekler\örnek6.html 12 2

3 HTML - 6 HTML içerisinde üç farklı liste tipi vardır: Sıralanmamış Sıralanmış Sözlüksel Listeye eleman eklemek için <li> ve </li> list item takısı kullanılır. Sıralanmamış liste için <ul> ve </ul>, sıralanmış liste için <ol> ve </ol> takıları kullanılır. html örnekler\örnek7.html 13 Milk - white cold drink HTML - 7 Sözlük veya tanımlama türü listeleme <dl> ve </dl> ile yapılır. Liste içerisindeki tanımlanacak her bir eleman <dt> ve tanımlama <dd> ile yapılır. html örnekler\örnek9.html Sıralı ve sırasız listeler için type özelliği ile tip belirtmek mümkündür. html örnekler\örnek10.html <dl> < dt>coffee</dt> < dd>- black hot drink</dd> < dt>milk</dt> < dd>- white cold drink</dd> </dl> Coffee - black hot drink Milk - white cold drink 14 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine tıkladığında URL linke doğru yapılacak gezintiyi çalıştırır. Anchor kullanımı ile ilgili 10 değişik durum söz konusudur: 1. Yeni bir html dokümanına geçiş <A HREF="http://www net/"> Link yazısı</a> 2. Html doküman içerisindeki bir işaret pozisyonu oluşturmak <A NAME="Section1"> Aktarılacak Pozisyon yeri</a> 3. Html doküman içerisindeki bir işaret pozisyonuna aktarmak <A HREF="#Section1">Bölüm 1 e Git</a> HTML Başka bir html dokümanı içerisindeki pozisyona aktarmak <A HREF="http://www.host.domain/page.html#Section1">Go to Section 1</a> 5. Bir resmi veya başka bir ses, video veya çalıştırılabilir kodu çalıştırmak. <A HREF="http://www.host.domain/file.gif">Display the picture</a> 6. Ftp Bağlantısı açmak <A HREF="ftp://ftp.host.domain domain">use FTP to get files</a> 7. mesajı oluşturmak <A mail to the webmaster</a> 8. Kullanıcının diskinde bir dosyayı yüklemek için <A HREF="file:///c:/directory/file.ext">Look at file.ext on this machine</a> html örnekler\örnek11.html HTML - 10 Html dokümanı yüklendiğinde bir resim göstermek için image takısı kullanılır: <IMG SRC="URL" ALIGN=TOP WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right ALT="[Text in place of image]"> Resim formatlarının çoğu desteklenmektedir, gif, jpg vs. html örnekler\örnek12.html Image ile anchors birleştirilerek resim üzerine tıklama yapıldığında istenilen link çalıştırılabilir. html örnekler\örnek13.html HTML - 11 <A HREF takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek. <A HREF="http:// " STYLE="textdecoration: none"> Çanakkale Onsekiz Mart Üniversitesi </a> Üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli. <A HREF="http:// onmouseover="this.style.color='#cc0000' onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a>

4 HTML - 12 Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız. <A HREF="http://www.comu.edu.tr" STYLE="text-decoration: t ti none onmouseover="this.style.color='#cc0000'" onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a> html örnekler\örnek14a.html HTML - 13 LINK parametresi ile belli bir süredir ya da hiç ziyaret etmediğiniz bağlantıların renklerini belirleyebilirsiniz, varsayım olarak saf mavi renge ayarlıdır. VLINK parametresi ziyaret edilmiş bağlantıların rengidir, genellikle LINK'e göre daha koyu bir tona ayarlanır, varsayım olarak koyu mavi renge ayarlıdır. Bir bağlantıya tıkladığınızda bağlantının rengi kısa bir süre için değişir. Eğer farenin düğmesini yeterince uzun basılı tutarsanız bu rengin ne olduğunu ğ görebilirsiniz. ALINK ile bu rengin ne olacağını ğ belirleriz. l i Pek çok web tarayıcısında varsayım olarak kırmızı renge ayarlıdır. <BODY BGCOLOR="#0000A0" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="# ALINK="#FF0000 > html örnekler\örnek14b.html Buradaki özellikler html 5 de kullanılmamaktadır. Bunların yerine CSS kullanılmalıdır HTML - 14 <BODY BGCOLOR=x> ile web sayfanızın arkaplan rengini değiştirebilirsiniz. Hatta bir de varsayılan metin rengini değiştirmek istiyorsanız bu işaretin arkasına TEXT=x parametresini eklemeniz yeterli. Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki i yoğunluğunu ğ ğ gösteren hexadecimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white veya yellow. HTML - 15 <FONT> takısını kullanarak fontu değiştirebiliriz. Örneğin fontu Arial yapmak için <FONT FACE="Arial"> yazmak yeterlidir. Bir fontun hem kendisini, hem büyüklüğünü hem de rengini tek bir işaretle değiştirebilirsiniz. <FONT FACE="Arial" SIZE=3 COLOR="#C00000"> html örnekler\örnek14c.html HTML - 17 HTML - 18 <table>...</table> takısı kullanılır. etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz

5 HTML - 19 Tabloda başlık ve gövde Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına ş gelince, her bir başlık ş <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi... arasına yazılır. Tabloda satır ve sütunları belirten ve <td> etiketleri <tbody>...</tbody> arasına alınır <!DOCTYPE html> <html> <head> <style type="text/css"> thead {color:green;} tbody {color:blue;} tfoot {color:red;} </style> </head> <body> <table border="1"> <thead> <th>month</th> <th>savings</th> </thead> <tfoot> <td>sum</td> <td>$180</td> </tfoot> <tbody> <td>january</td> <td>$100</td> <td>february</td> <td>$80</td> </tbody> </table> HTML - 20 <table border="1"> <thead>tablo Başlığı (table head)</thead> <caption align="bottom"> alt-yazı (caption) <caption> <th>1.sütun</th> <th>2.sütun</th> <th>3.sütun</th> html örnekler\örnek15a.html <tbody> <td>hücre1</td> <td>hücre2</td> <td>hücre3</td> <td>hücre4</td> <td>hücre5</td> <td>hücre6</td> <td>hücre7</td> <td>hücre8</td> <td>hücre9</td> </tbody> </table> 28 <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar

6 cellspacing parametresi hücreler arası marjı belirler. width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablo için normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz <td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır. background parametresi ile hücreye grafik-artalan yerleştirebiliriz width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır. align parametresi hücre içinde yatay hizalama yapar. valign parametresi hücre içinde düşey hizalama yapar. <table border=1 cellpadding=7> <td width = 80 align= left > hücre1 </td> <td width = 80 align= center > hücre2 </td> <td width = 80 align= right > hücre3 </td> </table> <table border=1 cellpadding=7> <td height= 80 valign= top > hücre1 </td> <td height= 80 valign= middle > hücre2 </td> <td height= 80 valign= bottom > hücre3 </td> </table>

7 Hücreleri Birleştirme <td colspan=".." <td rowspan=".."> Aynı satırdaki hücreleri birleştirmek için colspan, Aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz. Hücreleri Birleştirme A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>b</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>f</td>, <td>g</td> etiketlerini siliyoruz Hücreleri Birleştirme E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>i</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>g</td>, <td>k</td> etiketlerini siliyoruz. Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm2.html <frameset>...</frameset> Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin ç yan yana sütunlar şeklinde olacağını belirtiyor, buraya rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır. <frameset rows="*,*"> <frameset>...</frameset> cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilirğ * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor

8 frame name="..." src="..." FRAMESET parametreleri frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor. resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli. Açılacak çerçeve sayısı kadar frame name="..." " src="... etiketi kullanıyoruz. Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor. <body> kısmını bu eski browserlar görüntüleyebiliyor. frameborder="..." (yes, no,0,1) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler. html örnekler\örnek17b.html a Daha karmaşık çerçeveler Daha karmaşık çerçeveler Daha karmaşık çerçeveler FRAME parametreleri marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize="noresize" Pencere boyutlarının sabit olmasını sağlar

9 Resim Haritalarına Giriş & Dikdörtgensel Alanlar Resim haritaları, resimleri tıklanabilir bölgelere ayırabilmemize olanak sağlıyor. Klasik örnekler olarak Türkiye haritasının veya insan anatomisinin resimlerini düşünebilirsiniz. Ankara'ya veya karaciğere tıklamak sizi ilgili sayfalara götürecektir. Resim üzerinde bir harita tanımlarken dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabiliriz. Resim Haritaları <MAP NAME="harita1"> <AREA SHAPE=RECT COORDS="7,11,89,37" HREF="servis.html" ALT="Servis"> </MAP> İlk yaptığımız <MAP> işareti ile bir harita tanımlamak. NAME="harita_ismi" parametresi ile haritamıza mutlaka bir isim vermelidir. Çünkü aynı sayfada birden çok harita kullanabiliriz. Tanımladığımız haritayı hangi resimde kullanacaksak o resmin <IMG SRC=""> işaretinin arkasına USEMAP="#harita_ismi" parametresini eklemeliyiz. <IMG SRC="menu_ust.gif" WIDTH=287 HEIGHT=49 USEMAP="#harita1" BORDER=0> Resim Haritaları ve Alanları Harita tanımlarken <MAP> ve </MAP> işaretleri arasında kalan bölüme, kaç tıklanabilir alana ihtiyaç varsa o kadar <AREA> takısı eklememiz gerekiyor. SHAPE parametresi tanımlanan alanın tipini belirlemek için kullanılıyor ki şimdilik sadece dikdörtgensel (RECT, CIRCLE, POLY) alanlar tanımlıyoruz. COORDS parametresi de tanımladığımız ğ m alanın n koordinatlarını n belirlemek için kullanılıyor. RECT için sırasıyla sol üst köşenin x, y koordinatları ile yine sırasıyla sağ alt köşenin x, y koordinatları verilir COORDS ="7,11,89,37". html örnekler\örnek18.html CIRCLE için merkezinin koordinatları x:140, y:40 iken yarıçapı da 40 olan dairesel düğme için COORDS ="140,40,40. html örnekler\örnek18a.html Resim Haritaları ve Alanları POLY için ilgili çokgenin köşe noktalarının koordinatları sırasıyla yazılır. Bu liste çoğu zaman oldukça uzun olmaktadır. html örnekler\örnek18b.html Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için <IFRAME NAME="content_frame" width="400" height="244" SRC="fframe.htm">Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! </IFRAME> kullanılır. Bu özelliği desteklemeyen tarayıcılar Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! yazısını görüntüleyeceklerdir. html örnekler\örnek19.html Marquee Yazı Kaydırma Web sayfasının sağ kısmından sol kısmına doğru kayan yazı göstermek için kullanılır. <MARQUEE>Bu yazı sağdan sola doğru yavaşça hareket etmektedir. </MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50" SCROLLDELAY="8">Bu yazı sağdan sola gidip gelmektedir.</marquee> <MARQUEE BEHAVIOR="SLIDE">Bu yazı sağdan sola doğru kayacak ve sağ tarafa dayalı kalacaktır.</marquee> Bu özelliği desteklemeyen tarayıcılar sadece yazıyı görüntüleyecektir. BU ARADA <BLINK> ve <MARQUEE> kullanımı tavsiye edilmemektedir. örnekler\örnek19b.html

10 Meta HTML dosyasındaki <head> bölümü içinde tanımlanan bu takı tarayıcıya ve arama motorlarına sayfamız hakkında bilgi verir. <meta name= " content= "> name= veri_tipi : Veri_tipi olarak bu bölümde author, description ve keywords özellikleri tanımlanır. content=. içerik bilgisi buraya yazılır. <meta name="description" content="free Web tutorials"> <meta name="keywords ontent="html,css,xml,javascript"> <meta name="author" author content="stale Refsnes"> <meta charset="utf-8"> (html 5) <meta name= author content= Linux.org.tr web Grubu > <meta name= description content= Türkiye Linux Kullanıcıları Grubu Web Sayfası > <meta name= keywords content= linux, unix, bsd, openbsd, freebsd, programlama, serbestyazılım, sunucu, internet > Meta - 2 http-equiv= veri_tipi Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır. Sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <meta http-equiv= refresh content= 5; URL=http://www.linux.org.tr/ > GMT saat sistemine göre belirtilen saat ve tarihte geçerliliğini yitirecektir. <meta http-equiv= expires content= Wed, 25 Feb :00:00 GMT > Belgemizde kullanılan CSS (Cascading Style Sheet) dosyamızın text dosyası olduğunu belirtir. <meta http-equiv= content-style-type content= text/css > Türkçe Karakterler <meta http-equiv= Content-Type content= text/html; charset=utf-8 > <meta http-equiv= Content-Type content= text/html; charset= > <meta http-equiv= Content-Type content= text/html; charset=windows-1254 > Kod parçası yardımıyla Türkçe karakterlerin web sayfamızda doğru gözükmesi sağlanmaktadır. html örnekler\örnek16.html Özel Karakterler Tag Tanımı < < (less than symbol) > > (greater than symbol) & & (ampersand) " " (double quote) Registered Trademark [TM] Copyright [c] &#nnn; ASCII code (where nnn is the value) Formlar & Metin Alanları Formlar yardımıyla kullanıcılardan etkileşimli veri girişi sağlayan alanlar oluşturulur. Pek çok web sitesinde; bazı programları çekmeden önce isminizi ve e-posta adresinizi girmeniz gerekir veya küçük anketler olur onları doldurmanız istenir, gezdiğiniz web sitesi hakkındaki görüşleriniz sorulur vs. Siz de web sitenize bu ve benzeri pek çok amaç için kullanılabilecek formlar yerleştirebilirsiniz. Dikkat!!! ACTION parametresi form içerisine girilen verilerin işleneceği uygulamanın URL sini içermektedir. <FORM ACTION="http://www.comu.com/cgi-bin/update" >... </FORM> Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez. Size e-posta gelebilmesi için sayfanızdaki formu dolduran kişilerin web tarayıcılarındaki e-posta sunucu ayarları doğru yapılmış olmak zorundadır ki bazen bu ayarlar yapılmamış veya yanlış olabiliyor. Burada kesin çözüm CGI programları kullanmak ki bunun için web hosting hizmeti aldığınız kuruluşa danışmanız gerekiyor

11 Verileri İletme Metotları <FORM> takısı içerisinde kullanılırlar method özelliği verilerin işlenmek için hangi metot ile gönderileceğini belirler. Bu işlem için iki değişik yol vardır: POST ve GET metotları. <form action= form_isle.php method= post > GET talepleri önbelleğe alınır GET talepleri tarayıcı tarihçesinde kalır GET talepleri l sık kullanılanlara l l eklenir GET talepleri asla değerli veriler için kullanılmamalıdır. GET taleplerinin uzunluk kısıtlaması vardır (3000 karakter). GET talepleri sadece veri geri almak için kullanılmalıdır. POST talepleri asla önbelleğe alınmaz POST talepleri l tarayıcı tarihçesinde kalmaz POST talepleri sık kullanılanlara eklenemez POST taleplerinin uzunluk kısıtlaması yoktur. Metin Alanları Form hazırlarken kullanılan alanlar Metin satırı (<INPUT TYPE="TEXT >) Metin alanları (<TEXTAREA >) Radyo düğmeleri (<INPUT TYPE="RADIO >), İşaret kutucukları (<INPUT TYPE="CHECKBOX" >) Kombo kutuları (<SELECT NAME="liste >) Şifre satırı (<INPUT TYPE="PASSWORD >) Dosya yükleme (< INPUT TYPE ="file >) Çerçeve kutusu (<FIELDSET STYLE= PADDING: 2">) Gelişmiş düğme (<BUTTON NAME="B1"> ) Resim (<input src="getaway.jpg" type="image"> Etiket (<label>demene</label>) Saklanmış alan (<INPUT TYPE= HIDDEN >) Metin Alanı <TEXTAREA> işareti, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle belirleyebileceğimiz, içine yazı yazılabilecek bir alan tanımlamamızı sağlıyor. Bu alana yazılan yazı, alanın fiziksel sınırlarını aşınca otomatik olarak kaydırma çubukları çıkacaktır. Böylece alanın fiziksel boyutlarıyla sınırlanılmadan istenildiği kadar yazı yazılabilir. WRAP parametresi bir satırın sonuna gelindiğinde satırın otomatik olarak bölünüp bölünmeyeceğini belirler. Yazılanların Enter'a basılmadığı sürece sağa doğru uzayıp gitmesini istemiyorsanız her zaman için "soft" değerini kullanın. html örnekler\örnek20.html 63 Metin ve Şifre Satırı <INPUT TYPE=TEXT> ile metin satırları tanımlıyoruz. NAME parametresiyle her birine bir isim veriyoruz. SIZE parametresi ise satırın görünür boyutunun kaç karakter olacağını belirliyor. Her ne kadar görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH parametresiyle maksimum kaç karakter girilebileceğini belirleyebilirsiniz. Böylece satırın görünür boyunu aşan girdiler kaydırılarak gösterilecektir. Eğer metin satırına yazılan karakterlerin görünmesini istemiyorsanız TYPE parametresinin değerini PASSWORD yapın. Böylece her yazılan karakter yerine bir yıldız görüntülenecektir. Adından belli olduğu üzere bu özel metin satırı genellikle şifre girişleri için kullanılır. html örnekler\örnek21.html 64 Radyo Düğmeleri Radyo düğmeleri, sunulan bir dizi seçenekten sadece bir tanesini seçmenize izin veren form öğeleridir. Örneğin Bu dersi anlatan hocanızdan memnun musunuz?" sorusuna hem evet hem de hayır yanıtını veremezseniz. Radyo düğmeleri web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır; seçeneklerden bir tanesini seçer ve Gönder düğmesine basarsınız. Radyo düğmesini seçili yapmak için <INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var" CHECKED> Örnek olarak biz de basit bir oylama/anket yapalım. html örnekler\örnek22.html 65 İşaret Kutucukları İşaret kutucukları, radyo düğmelerinin aksine birden çok seçenek seçmenize izin verirler. Örneğin "Dışarıda yemek yerken tercih ettiğiniz yiyecekler:" sorusuna birden çok yanıt verebilirsiniz. Yanıtı birden çok olabilen sorular için işaret kutucukları kullanılmalıdır. İşaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan satırları kullanıyoruz. Dikkat ederseniz bu satırlar herhangi bir VALUE değeri içermiyorlar; bunun yerine her bir işaret kutucuğunun kendine ait bir ismi var. CHECKED parametresi istediğiniz seçeneğin otomatik olarak seçili gelmesini sağlar. Radyo düğmelerinin aksine birden çok seçeneği otomatik olarak seçebilirsiniz. html örnekler\örnek23.html 66 11

12 Kombo Kutuları Kombo kutuları, sayfayı uzanıp giden seçeneklerle doldurmak istemediğiniz zamanlarda çok yararlı olur. Bir kombo kutusu, yanındaki ok işaretine tıklandığında açılan ve içerdiği seçeneklerden birini seçmenize izin veren özel bir form öğesidir. Kombo kutusunu tanımlamak için <SELECT> ve <OPTION> işaretlerini kullanıyoruz. <SELECT> işareti kombo kutusunun tümüne karşılık geliyor ve NAME parametresiyle isimlendirilmesi gerekiyor. <OPTION> işareti ile ise kombo kutumuzda yer alacak her bir seçeneği belirliyoruz. Buradaki --Modem-- yazılı satırın bir VALUE parametresine sahip olmadığına dikkat edin. html örnekler\örnek24.html Örnek Form Yandaki form doldurulup ilgili Submit Query düğmesine basıldığında bu veriler işlenecekleri uygulama içerisine gönderilirler. Bu işlem ş sonucunda http protokolü bir kısmı arka sayfada verilen veri transferini gerçekleştirir. örnekform1.html Tarayıcının gönderdiği istek Alanlar - Özet POST /cgi-bin/banking.pl HTTP/1.0 Content-Length: 154 Accept: image/gif... (more headers ) acct= &pin=0545&transaction=account+balanc es&verify_by_mail=yes&info=cds,autoloans&comments =What+use+is+this+without+withdrawals+and+deposits% 21%21 Alan Tipi text Hidden image password textarea select option submit reset Tanımlama Normal tek satırlık giriş Kullanıcı girişi için kullanılmaz, sunucudan alındıktan sonra formu izlemek için kullanılır. Üzerine resim konulan düğme ğ Yazılanı göstermeyen kullanıcı girişi için Çok satırlı giriş Açılabilir veya kaydırılabilir seçim listesi Tamamlanan formu sunucuya gönderir Form içeriğini temizler 69 html örnekler\örnek14.html 70 CGI Scripts HTML text, grafik ve diğer elemanları birleştirme ve görüntülenmesini sağlamasına rağmen yordamsal programlama için herhangi bir destek sağlamaz. HTML formları gibi ortamlar tarafından sağlanan verileri işlemek için CGI programları ve Scriptlerin kullanılmasına ihtiyaç vardır. CGI Common Gateway Interface- sunucuda bulunan n programların web sayfası ile etkileşimde bulunmasına imkan tanımak için geliştirilmiş bir standarttır. Çoğu CGI programı UNIX shell script veya Perl gibi dillerde yazılır. Bunlar aynı zamanda C/C++ gibi derlenen dillerde de yazılabilir. CGI Scripts CGI scriptlerini çalıştırmak için üç farklı yol vardır. <A HREF="http:/www.host.domain/cgi-bin/name.pl"> <IMG SRC="http:/www.host.domain/cgi-bin/name.gif"> <FORM ACTION="http://www.host.domain/cgibin/handle_form.pl" METHOD="POST"> Anchor üzerine tıklandığında ğ CGI scripti çalıştırılır. ş Web sayfası yüklendiğinde image cgi scripti çalıştırır. Submit düğmesi üzerine tıklandığında form olayı çalıştırılır

Html temelleri. Ders 4

Html temelleri. Ders 4 Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için HTML Ders 8 Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için Web sayfasının bu kısmında kayan çerçeve

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2

Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2 Giriş Html temelleri Ders 2 World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

12. Tanımlama Listeleri
,
,

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını

Detaylı

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

WEB TASARIMI. Đnternet Nedir?

WEB TASARIMI. Đnternet Nedir? ĐÇĐNDEKĐLER İÇİNDEKİLER... 1 WEB TASARIMI... 2 İnternet Nedir?... 2 HTML (Hypertext Markup Language)... 4 (Hareketli Metin İşaretleme Dili)... 4 KLASÖR VE DOSYA İSİMLERİNDE... 5 STANDART TAKILAR... 5

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

TEMEL HTML DERS NOTLARI - Table-Form

TEMEL HTML DERS NOTLARI - Table-Form Tablolar ... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir.

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

İnternet Programcılığı

İnternet Programcılığı İnternet Programcılığı 1 Öğr.Gör. Fırat YÜCEL Akdeniz Üniversitesi Enformatik Bölümü Kaynak H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002 2 Web

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

HTML (Hyper Text Markum Language)

HTML (Hyper Text Markum Language) HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

Html Komutlar. ... belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Html Komutlar. <TITLE>... </TITLE> belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r. Html Komutlar 1. ... Aras nda Kullan lan Komutlar ... belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Detaylı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd Tüm haklar mahfuzdur. Bu yayının hiçbir kısmı ECDL Kuruluşundan izin almadan hiçbir şekilde çoğaltılamaz. Çoğaltım talepleri yayıncıya yapılmalıdır. The European Computer Driving Licence Foundation Ltd

Detaylı

Ekran 1 : Font Komutları Dosyası ekranı

Ekran 1 : Font Komutları Dosyası ekranı 27 Ekim 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : ETASQLFORM DĐZAYNLARDA FARKLI FONT LU YAZI TĐPĐ KULLANIMI ETASQL Doküman Düzenleyicisi olan ETASQLFORM.EXE ile Fatura, Sipariş,

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. > 1) Tüm kodlar bunun arasında çalışır. 2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. 3) Sayfa gövde kısmıdır. Renkler, yazılar

Detaylı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir: HTML HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 482BK0153 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 Ders- 13 World Wide Web (WWW) Yrd. Doç. Dr. Burcu Can Buğlalılar Bilgisayar Mühendisliği Bölümü Bilgisayar Katmanları İçerik World Wide Web (WWW) Anlık Mesajlaşma

Detaylı

Internet: Tarihçe ve Kavramlar

Internet: Tarihçe ve Kavramlar Internet: Tarihçe ve Kavramlar Umut Al umutal@hacettepe.edu.tr Internet in Tarihçesi 1945 Vannevar Bush memex 1962 Licklider (MIT) Galaktik Ağ 1969 DARPA ARPANET 1972 İlk e-posta 1983 TCP-IP 1991 Gopher,

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

Temel HTML Eğitimi. Erman Yükseltürk

Temel HTML Eğitimi. Erman Yükseltürk Temel HTML Eğitimi Erman Yükseltürk HTML Nedir? 1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması

Detaylı

INTERNET. Fırat Üniversitesi Enformatik Bölümü

INTERNET. Fırat Üniversitesi Enformatik Bölümü INTERNET 3 INTERNET Internet, Uluslararası arası ağ (International Network) demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir. Internet, binlerce omurgalar arası bağ,

Detaylı

WEB TASARIMI VE PROGRAMLAMA DERSİ

WEB TASARIMI VE PROGRAMLAMA DERSİ WEB TASARIMI VE PROGRAMLAMA DERSİ Dersin Modülleri HTML 1 HTML 2 Web Tasarım Editörü 1 Web Tasarım Editörü 2 Web Tasarım Editörü 3 Web Tasarım Editörü 4 Etkileşimli Web Uygulamaları 1 Etkileşimli Web Uygulamaları

Detaylı

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI Ders Notları WEB TASARIMI Đçerik: HTML, Frontpage 2000, Dreamweaver MX, Photoshop 6.0, Flash MX, Paint Shop Pro, Swish, Javascript, Javaapplet, FTP, Đsim Registeri, Server Kiralama Đnternet Nedir? Đnternet,

Detaylı

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi

Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi GENEL DERS BİLGİLERİ Öğretim Elemanı Ofis : MUH 312 : Öğr. Gör. Dr. T.Tugay BİLGİN Ofis Saatleri : Pazartesi:

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVERDA NESNELERE DAVRANIŞ EKLEME Dreamweaver da fare hareket olaylı, animasyonlu görüntüler oluşturmak istenildiğinde hazır scriptler anlamına gelen Davranışlar(behaviors) kullanılmaktadır. Yukarıdaki

Detaylı

Uluslararası arası ağ (International Network) bağlanan tüm bilgisayarların ortak bir dil konuşur ortak iletişim diline TCP/IP

Uluslararası arası ağ (International Network) bağlanan tüm bilgisayarların ortak bir dil konuşur ortak iletişim diline TCP/IP INTERNET 3 INTERNET Internet, Uluslararası arası ağ (International Network) demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir. Internet, binlerce omurgalar arası bağ,

Detaylı

İNTERNET TABANLI PROGRAMLAMA- 5.ders

İNTERNET TABANLI PROGRAMLAMA- 5.ders Html nedir? İNTERNET TABANLI PROGRAMLAMA- 5.ders Hareketli metin işleme dili basitce browser larda görebileceğimiz (internet exp.) internet dökümanları olusturmaya yarayan bir cesit dildir html ile oluşturduğumuz

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

Çözüm Bilgisayar. Çözüm İntSite

Çözüm Bilgisayar. Çözüm İntSite Çözüm Bilgisayar Çözüm İntSite Çözüm İnternet Site Programı (intsite.exe) Firmamızca geliştirilen ve Çözüm HBYS programının ana modülü olan Hasta Takip modülünü kullanan tüm hastanelerin kullanabileceği

Detaylı

BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11

BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11 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,

Detaylı

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir?

Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page vii Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? 6 Web Taray c (Browser)

Detaylı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...

Detaylı

Hazırlayan Mustafa ULAŞ mulas@firat.edu.tr

Hazırlayan Mustafa ULAŞ mulas@firat.edu.tr HTML ve Uzaktan Eğitim Materyali Hazırlama Teknikleri Hazırlayan mulas@firat.edu.tr INTERNET 3 INTERNET Internet ağlar arası ağ demektir. Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağdır.

Detaylı

Web Tasarımının Bugünü ve Geleceği

Web Tasarımının Bugünü ve Geleceği Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin

Detaylı

FRONT PAGE EĞİTİM NOTLARI BAŞLANGIÇ. 1- Open araç çubuğu düğmesinin yanındaki aşağı oku tıklayarak, web seçeneğini işaretleyin

FRONT PAGE EĞİTİM NOTLARI BAŞLANGIÇ. 1- Open araç çubuğu düğmesinin yanındaki aşağı oku tıklayarak, web seçeneğini işaretleyin FRONT PAGE EĞİTİM NOTLARI BAŞLANGIÇ 1- Open araç çubuğu düğmesinin yanındaki aşağı oku tıklayarak, web seçeneğini işaretleyin 2- Açılan sayfadan, oluşturulmak istenen sitenin içeriğine göre hazır şablon

Detaylı

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir?

ÇALIŞMA SORULARI. 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? ÇALIŞMA SORULARI 1. HTML nedir? a) Sayfa içindeki metinlerin tarayıcıda nasıl görüneceğini ve işlevsel olacağını düzenleyen işaret dilidir. b) Diğer sayfaları bağlayan linkler c) Nesneyi bağlayan linkler

Detaylı

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir?

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir? Html'e Giriş HyperText Markup Language (hypertext işaret dili) Nedir? Hypertext terimi bir text'en başka bir text'e zıplamanızı(jump) sağlayan linklerin bulunduğu text'ler için kullanılır. Normal bir yazıda

Detaylı

İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı

İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı Web Programcılığı Dalı HTML, XHTML, CSS 2011 1 HTML HTML Nedir? HTML Web sayfalarının kullandığı dildir. HTML bir programlama dili değildir. HTML

Detaylı

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ

BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ BĐLGĐSAYARDAN BAĞIMSIZ YAZDIRMA ĐŞLEMĐ Argox X-2000+ barkod / etiket yazıcısını bilgisayardan bağımsız kullanabilmek için Argox X-2000+ barkod / etiket yazıcısı ile birlikte verilen CD içerisinde bulunan

Detaylı

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 1

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 1 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 1 2 Dersi Veren: Doç.Dr. Nuray At Mühendislik Fakültesi, Elektrik-Elektronik Müh. Bölümü, EEM213 e-mail: nat@anadolu.edu.tr Kaynaklar: 1. E. Yaşar, T. Özseven, İnternet

Detaylı

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU Üniversitemiz Webmail servisi yenilenmiş olup Roundcube webmail üzerinden servis vermeye başlamıştır. Daha önce kullanılan SquirrelMail servisi https://oldwebmail.cankaya.edu.tr/

Detaylı

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir. 21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme

Detaylı

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın: HTML nedir? HTML e GİRİŞ E. Fatih Yetkin HTML Hyper Text Markup Language kısaltmasıdır. Bir HTML dosyası, çeşitli işaretleme etiketleri içeren bir metin dosyasıdır. Bu işaretleme etiketleri (markup tags)

Detaylı

PHP ile İnternet Programlama

PHP ile İnternet Programlama PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 3. BÖLÜM: Formlarla Çalışmak HTML Formlarının Temelleri Dinamik etkileşim

Detaylı

www.wikispaces.com Kullanım Kılavuzu

www.wikispaces.com Kullanım Kılavuzu www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz

Detaylı

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir?

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir? HTTP & HTML Seval ÖZBALCI Bilgisayar Programcılığı Bölümü Ders 3 HTTP ve HTML Kullanarak İlk Web Sayfasının Oluşturulması BİRİNCİ BÖLÜM HTTP Nedir? HTML Nedir? Temel Unsurlar Editör Türleri İlk Sayfanın

Detaylı

BİLGİSAYAR PROGRAMLAMA

BİLGİSAYAR PROGRAMLAMA BİLGİSAYAR PROGRAMLAMA Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642 1 MİCROSOFT EXCEL Elektronik tablolama veya hesaplama programı olarak da adlandırılan Excel, girilen veriler üzerinde

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS. Web İçerik Sistemi. Bilgi İşlem Daire Başkanlığı-WEB GRUBU

MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS. Web İçerik Sistemi. Bilgi İşlem Daire Başkanlığı-WEB GRUBU MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS Web İçerik Sistemi -WEB GRUBU 2013 B i l g i İ ş l e m D a i r e B a ş k a n l ı ğ ı MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI BİRİM BÖLÜM DAİRE

Detaylı

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER 1.WEB PANELE GİRİŞ www.okuladı.meb.k12.tr/mebpanel Resim1: Okul Web Siteleri Yönetim Paneli [MebWeb] Giriş Ekranı AÇIKLAMA: Okulunuzun web

Detaylı

WEB TASARIMI VE PROGRAMLAMA

WEB TASARIMI VE PROGRAMLAMA WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ

Detaylı

5-Hafta Genel Sayfa Yapısı

5-Hafta Genel Sayfa Yapısı 5-Hafta Genel Sayfa Yapısı Paragraf Oluşturma Metin Biçimlendirme Referans ve Alıntıların Belirlenmesi Metinlerin Vurgulanması Kısaltma ve Terimlerin Belirtilmesi Alt ve Üst Simge Kullanımı Uİ-UX NEDİR?

Detaylı

GELİŞMİŞ İNTERNET UYGULAMALARI

GELİŞMİŞ İNTERNET UYGULAMALARI Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004

Detaylı

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Bilgi Teknolojileri (IT) Kavramları, Bilgisayar Kullanımı ve Dosyaların Yönetimi, Bilgi ve İletişim HAFTA 1 1. Genel Kavramlar(Bilgisayarın tanımı,bilgi

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE BASİT WEB İŞLEMLERİ 482BK0152 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

Internet Programcılığı-I Ders Notları HTML. Kaynak

Internet Programcılığı-I Ders Notları HTML. Kaynak Internet Programcılığı-I Ders Notları HTML Kaynak Active Server Page (ASP) Professional Skills Devlopment AppDev (Application Development: http://www.appdev.com) 2 Bazı Internet Terimleri Internet: TCP/IP

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Semboller, Ses Ekleme, Video Ekleme Orta Doğu Teknik Üniversitesi

Detaylı

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals The European Union s Making the Labour Market more Inclusive III programme For North Cyprus Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals Module

Detaylı

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız.

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız. 2. EKLE SEKMESĐ TABLO EKLEMEK: Sayfamıza tablo eklemek için, TABLO butonuna bastıktan sonra açılan pencereden kaç sütün ve kaç satırlık bir tablo oluşturacağımızı belirliyoruz. Fareyi sürüklemek, tablonun

Detaylı

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır.

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Üye Girişi Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Giriş Sayfası Sayfa ayarlarını buradan yapabilirsiniz. Anahtar

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre

Detaylı