Giriş. Html temelleri. Giriş -devam. URL nedir? Ders 2
|
|
|
- Levent Akpınar
- 8 yıl önce
- İzleme sayısı:
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
2 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 kendisinin arayıp bulmasıdır. Hypertext de bu ise bir tıklama mesafesi uzaklıktadır. 5 6 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 2
3 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: 1. <html> </html> Dokümanın tamamını içerir 2. <head> </head> Baş kısım bilgisini içerir 3. <title> </title> Başlığı içerir. 4. <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. html örnekler\örnek4.html 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. Eğer özel bir format kullanmak isterseniz bunu <pre> ve </pre> ile yapabilirsiniz. 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
4 HTML - 6 HTML içerisinde beş değişik liste tipi vardır: 1. Sıralanmamış 2. Sıralanmış 3. Klasör 4. Menü 5. 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 HTML - 7 Klasör türü liste için <dir> ve </dir> takıları kullanılır. Menü türü liste için <menu> ve </menu> takıları kullanılır. html örnekler\örnek8.html 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 (tip) belirtmek mümkündür. html örnekler\örnek10.html 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 ile ilgili 10 değişik durum söz konusudur: 1. Yeni bir html dokümanına geçiş <A HREF=" 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=" to Section 1</a> 5. Bir resmi veya başka bir ses, video veya çalıştırılabilir kodu çalıştırmak. <A HREF=" the picture</a> 6. Telnet bağlantısı açmak <A HREF="telnet://host.domain">Log into host.domain</a> 7. Ftp Bağlantısı açmak <A HREF="ftp://ftp.host.domain">Use FTP to get files</a>
5 HTML Goopher bağlantısı (kaynak arama hizmeti) açmak <A HREF="gopher://gopher.host.domain">Use Gopher to find files</a> 9. mesajı oluşturmak <A HREF="mailto:name@host.domain">Send mail to the webmaster</a> 10. 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 - 11 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 - 13 <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=" " STYLE="text-decoration: 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=" onmouseover="this.style.color='#cc0000' onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a> HTML - 14 Ş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=" STYLE="text-decoration: none onmouseover="this.style.color='#cc0000'" onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a> html örnekler\örnek14a.html
![html HTML - 11 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](/docs-images/43/946393/images/page_5.jpg "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.")
6 HTML - 15 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. 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 HTML - 15 <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 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 - 16 HTML - 17 <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 <table>...</table> takısı kullanılır. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz
7 HTML - 18 HTML 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 <tr>...</tr> arasına yazılır. Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır. 27 HTML - 20 <table border="1"> <thead>tablo Başlığı (table head)</thead> <caption align="bottom"> alt-yazı (caption) <caption> <tr> <th>1.sütun</th> <th>2.sütun</th> <th>3.sütun</th> </tr> html örnekler\örnek15a.html <tbody> <tr> <td>hücre1</td> <td>hücre2</td> <td>hücre3</td> </tr> <tr> <td>hücre4</td> <td>hücre5</td> <td>hücre6</td> </tr> <tr> <td>hücre7</td> <td>hücre8</td> <td>hücre9</td> </tr> </tbody> </table> 28 7
8 Parametreler <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. Parametreler 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 Parametreler cellspacing parametresi hücreler arası marjı belirler. Parametreler 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
9 <td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır. Parametreler background parametresi ile hücreye grafik-artalan yerleştirebiliriz Parametreler 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. Parametreler align parametresi hücre içinde yatay hizalama yapar. valign parametresi hücre içinde düşey hizalama yapar
10 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 htm1.html
11 <frameset>...</frameset> <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="*,*"> 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 frame name="..." src="..." 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. FRAMESET parametreleri frameborder="..." (yes, no) Ç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
12 Daha karmaşık çerçeveler Daha karmaşık çerçeveler a 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 Pencere boyutlarının sabit olmasını sağlar
13 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 alanın koordinatları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
14 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. html örnekler\örnek19b.html 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. name= veri_tipi Bu bölümde author, description ve keywords özellikleri tanımlanır. equiv= veri_tipi Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır. <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 Sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <meta http-equiv= refresh content= 5; URL= > GMT saat sistemine göre belirtilen saat ve tarihte geçerliliğini yitirecektir (silinecektir). <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 >
15 Türkçe Karakterler Özel Karakterler <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 Tag < > & " &#nnn; Tanımı < (less than symbol) > (greater than symbol) & (ampersand) " (double quote) Registered Trademark [TM] Copyright [c] 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=" >... </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
![html Tag < > & " &#nnn; Tanımı < (less than symbol) > (greater than symbol) & (ampersand) " (double quote) Registered Trademark [TM] Copyright [c] ASCII code (where nnn is the value) 57 58 Formlar &](/docs-images/43/946393/images/page_15.jpg "Metin Alanları Formlar yardımıyla kullanıcılardan etkileşimli veri girişi sağlayan alanlar oluşturulur.")
16 Verileri İletme Metotları <FORM> takısı içerisinde kullanılar 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ı. 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 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
17 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 İş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 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
18 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 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=" <IMG SRC=" <FORM ACTION=" 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 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
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
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
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
Giriş. Html temelleri. Giriş -devam. URL nedir? www protokolleri. Hypertext nedir? 19.02.2013. 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
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri
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ı
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
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
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ı
ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr HTML (HyperText Markup Language) Web sayfaları hazırlamak
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ı
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
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
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
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
HTML Etiketleri Genel Özellikler (Global Attributes)
HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel
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
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
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar
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
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
İ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
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
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
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2013 2014 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 26 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.
BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek
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,
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
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Formlar Kullanıcının da aktif olacağı dinamik web sayfaları
Web Teknolojileri ve Programla
12.05.2010 Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+ da örnekler Web Teknolojileri ve Programla Bölüm
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
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.
Site Temizlik Projesi Kodları
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu
Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.
Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.
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
İ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,
HTML Sayfaları. Bütün html sayfaları
HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde
Site Tasarım Çalışması -3
Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;
HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
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
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
MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler
MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,
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.
<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
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
İ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
İ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
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 :
HTML (Hyper Text Markup Language) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ
1 HTML (Hyper Text Markup Language) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir. Eğer bu işi kod kullanmadan yapacaksanız Frontpage,
İ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
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
Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method
HTML Formları Temel Başlıklar HTML Formlarının amacı Çalışma şekli Form Action ve Method HTML/WWW veri paylaşımı üzerine kurulmuştur. Html işaretleme dilidir. Diğer içerikler ile bağlantılar (linkler)
İ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.
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
HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek
STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web
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
<html> <head> </head> <body> </body> </html> METİN BİÇİMLENDİRME ETİKETLERİ Şimdi yukarıda öğrendiklerimizi bir örnek ile uygulayalım.
WEB TASARIMI-1 DERSİ Internet WEB TASARIMI-1 Programcılığı DERSİ -1 Dersi Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir.eğer bu işi kod kullanmadan yapacaksanız Frontpage,
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ş,
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
HTML WEB TASARIMI-1 DERSİ
WEB TASARIMI-1 DERSİ HTML Bir web sayfası yapmak için tek gereken onu nasıl tasarlayacağımızı bilmektir.eğer bu işi kod kullanmadan yapacaksanız Frontpage, Dreamweaver vs programları kullanabilirsiniz.ama
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ı
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
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
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
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
İ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
HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir.
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının
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,
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
BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı
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:
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.
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ğ,
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ğ,
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ı
Web Teknolojileri ve Programla
Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?
Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU
Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları
DIV KAVRAMI <style> position: absolute
DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) Ele Alınacak Başlıklar HTML tarihçesi Bir HTML dökümanın genel görünümü HTML ve tarayıcı etkileşimi Tarihçe Internet The World Wide Web (www) HTML URI/URL HTTP Tim Berners-Lee
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
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
HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.
HTML Tablolar Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz. Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği
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...
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ı
HTML Bloklar. CSS Display özelliği
HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün
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
İnternet Programcılığı
İnternet Programcılığı 1 Yrd. Doç. Dr. 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
WEB TABANLI PROGRAMLAMA
WEB TABANLI PROGRAMLAMA 6. ve 7. DERS Köprü Ekleme (hyperlinks) ve Map (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için Anchor etiketi kullanılır.
BÖLÜM 5. HTML Biçimleme Belirteçleri
BÖLÜM 5 HTML Biçimleme Belirteçleri 12. Genel Bakış 12.1 Giriş Paragraflar, başlıklar, veya listeler için bir HTML belirtecini kullandığınızda, o belirteç sadece kullanıldığı alandaki yazıları belirlenen
http://www.microsoft.com/visualstudio/eng/downloads
Visual Studio 2012'nin kurulumunu, Visual Studio'nun kullanımını ve Windows Store'da basit bir proje hazırlanmasını anlatacağım. Hepsinden önce Visual Studio ortamından biraz bahsedelim. Visual Studio
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.
Turgut Özal Üniversitesi WEB Sitesi Kullanım Kılavuzu
Turgut Özal Üniversitesi WEB Sitesi Kullanım Kılavuzu Temmuz 2012 Turgut Özal Üniversitesi web sitesi yönetim paneline aşağıdaki link yardımıyla ulaşabiliriz. http://www.turgutozal.edu.tr/webmin/ Karşımıza
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