İnternet Programcılığı I

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

HTML e GİRİŞ Temel HTML etiketleri.
HTML
İNTERNET.
DREAMWEAVER TABLO OLUŞTURMA VE TABLO ÖZELLİKLERİ
HTML’e Devam Uygulama.
Özel Site.NET İnternet Nedir? Soner Sevindik.
Hazırlayan: Cihan UĞUR
Değişkenler ve bellek Değişkenler
T.C. İNÖNÜ ÜNİVERSİTESİ Arapgir Meslek YÜKSEKOKULU
HTML’ ye Giriş Uzm. Murat YAZICI.
Eğitim Programı Kurulum Aşamaları E. Savaş Başcı ASO 1. ORGANİZE SANAYİ BÖLGESİ AVRUPA BİLGİSAYAR YERKİNLİĞİ SERTİFİKASI EĞİTİM PROJESİ (OBİYEP)
WEB TASARIMI HTML.
İnternet Programcılığı
İNTERNET.
İNTERNET VE İLETİŞİM.
İNTERNET.
İNTERNET ADRESLERİ.
Tablolar Tablolar etiketi ile belirtilir. Bir tablo etiketi satırlara bölünür ve her satır da etiketi ile sütunlara bölünür. etiketinin anlamı "table.
Temel Bilgisayar Bilimleri Dersi
BTEP 203 – İnternet ProgramcIlIğI - I
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
KIR ÇİÇEKLERİM’ E RakamlarImIz Akhisar Koleji 1/A.
HİSTOGRAM OLUŞTURMA VE YORUMLAMA
Prof. Dr. Leyla Küçükahmet
İNTERNET PROGRAMCILIĞI I
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir.  Formlar, web sayfası tasarlayan kişi veya şirketlerle internet.
TABLOLAR.
BAĞLANTI (KÖPRÜ) OLUŞTURMA
FERHAT KADİR PALA SACİDE GÜZİN MAZMAN
WEB TASARIMINDA TEMEL KAVRAMLAR
BTEP 203 – İnternet ProgramcIlIğI - I
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE.
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 4. Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler.
İNTERNET PROGRAMCILIĞI I
HTML :Hyper Text Markup Language explorer, firefox, opera herhangi bir derleyiciye ihtiyaç duymadan çalışabilir metin biçimlendirme resim ekleme ve biçimlendirme.
Internette iki çe ş it adresleme kullanılır. IP numarası herhangi bir bilgisayar internete ba ğ landı ğ ı anda, dünya üzerinde sadece ona ait olan bir.
Listeleme Etiketleri.
İLERİ HTML.
İNTERNET TARAYICI (WEB BROWSER) PROGRAMLARI
İNTERNET VE İLETİŞİM.
ÖĞR. GRV. Ş.ENGIN ŞAHİN BİLGİ VE İLETİŞİM TEKNOLOJİSİ.
İNTERNET.
İNTERNET ADRESLERİ VE YAPISI
WEB TASARIMININ TEMELLERİ
HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.
Hazırlayan: Yrys Moidin kyzy. 1) html; 1. html (hypertext markup language ): hipermetin işaretleme dili. 2) Bu tag wep sayfasında bulunan ilk tagdır.
INTERNET EXPLORER TEMEL İŞLEMLER GOOGLE ARAMA TEKNİKLERİ
WEB SİTESİ YAPIYORUM HTML
HTML GİRİŞ OĞUZ İNAL.
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar
İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ.
İnternet Programlama-I
KIRKLARELİ ÜNİVERSİTESİ
 Internet’e bağlı kuruluşlar değişik gruplara ayrılabilir ve bir kuruluşun internet adresi, o kuruluşun ait olduğu guruba göre ilgili kısaltmalar içerir.
HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz.
Web Tasarımı 2.Hafta. HTML Nedir  Hyper Text Markup Language (Hiper Metin İşaretleme Dili) web sayfalarını oluşturmak için kullanılan standart metin.
İNTERNET ADRESLERİ.
Dünyanın bilgisine açılan pencere...
İnternet Programcılığı I
İNTERNET PROGRAMCILIĞI 1
İNTERNET ADRESLERİ.
İNTERNET PROGRAMCILIĞI 1
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER
Temel Internet Kullanımı Y. Doç. Dr. M. Sıtkı İlkay Ekim 2006.
Dünyanın bilgisine açılan pencere...
Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar
Sunum transkripti:

İnternet Programcılığı I OĞUZ İNAL

İNTERNET İnternet, bir çok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır. Aynı zamanda, insanların her geçen gün gittikçe artan “üretilen bilgiyi saklama / paylaşma ve ona kolayca ulaşma” istekleri sonrasında ortaya çıkmış bir teknolojidir. Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir.

IP (Internet Protocol) Numarası IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara setidir. Örneğin: 192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile (daha kolay hatırlamanız için ), diğer bilgisayarlarla iletişim kurduğunda IP adresini kullanır.

İnternet Alanı (Domain) İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.

İnternet adreslerinde görülen kısaltmalar gov: Hükümet kurumları (government) edu: Eğitim kurumları (education) org: Ticari olmayan kuruluşlar (organization) com: Ticari kuruluşlar (company) mil: Askeri kurumlar (military) net: Servis sunucular (network) ac: Akademik kuruluşlar (academic) int: Uluslararası kuruluşlar (international) Bunun yanında kullanılan ülke kısaltmaları da vardır. Bazıları; tr:Türkiye, jp:Japonya, uk:İngiltere, it:İtalya, ch:Isviçre gibi.

WEB Tarayıcılar WEB tarayıcısı, internet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşim halinde olabilme olanağı veren bir uygulama programıdır. Tarayıcı kelimesinin İngilizce karşılığı “browser”dır. Tarayıcı kullanıcısı adına İnternet üzerinde WEB sunucularından isteklerde bulunan bir istemci programdır.

WEB Tarayıcıların Çalışması WEB istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. Örneğin; Milli Eğitim Bakanlığının WEB sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan WEB sayfalarına erişmek istediği mesajını yollamıştır. Milli Eğitim Bakanlığının WEB sunucusu istediğiniz bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır. Sizin WEB tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızda anlaşılır bir şekilde gösterir.

Arama Motorları İnternet büyük miktarda bilgi içerir, ancak en büyük sorun ihtiyacınız olan bilginin yerini tespit etmektir. Arama motoru, WEB sitelerini dolaşarak içeriklerini inceleyen ve bu içerikleri sizin arama yapabilmeniz için uygun şekilde indeksleyen programlara verilen isimdir.

Arama Yapmak Mantıksal bağlaç terimleri WEB üzerinde istediğiniz bilgilere ulaşmanızı sağlayacak güçlü filtrelerdir. Mevcut arama servislerinin birçoğu mantıksal bağlaçları destekler. Örneğin, “İzmir AND Otel” yazarsanız, hem İzmir hem de otel kelimelerinin geçtiği alanlar listelenecektir. Bazı arama servislerine “izmir + otel” yazarak aynı aramayı yaptırabilirsiniz. Eğer şimdi vereceğimiz örnekte olduğu gibi arama yaptırırsanız ayrı ayrı iki kelimeyi dikkate alır. Örneğin, “Microsoft OR Netscape” derseniz, hem Microsoft hem de Netscape’i içeren alanlar listelenecektir. Mantıksal bağlaçların yanında detaylı arama seçeneklerini de kullanabiliriz. Dosya biçimi, tarih, arama yapılacak yer (sayfa başlığı, sayfanın herhangi bir yeri, sayfaya yapılan bağlantılar…) gibi seçenekler ile detaylı arama da yapılabilir. Kelime parçalarını aramak için soru (?) ve yıldız (*) işaretleri kullanılır. Soru işareti (?) tek bir harfin yerini tutarken (?ence-bence, sence), yıldız işareti (*) birden fazla harfin yerini tutar (tele*-telefon, televizyon).

Web Sayfası Hazırlarken Dikkat Edilecek Noktalar Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz. Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır. WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız. Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

HTML (HYPER TEXT MARKUP LANGUAGE)

HTML Sayfası Oluşturma

HTML Komut Yapısı HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Örnek uygulamalar için Notepad kullanılmıştır. Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya “dosya_adi.html” olarak kaydedilmelidir.

Yazım Kuralları Komutlar büyük ya da küçük harfle yazılabilir. Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez. Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır. Örnek : <HTML>,<BODY>,<TITLE>

WEB sayfasında standart olarak bulunması gereken kodlar şunlardır WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler.

<HTML> <html>, bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.

<HEAD> HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan parametreler aşağıdaki tabloda verilmiştir. Kullanılacak parametreler Görevi name Author, description ve keywords özellikleri tanımlanır. http-equiv Refresh, expires, content ve content-style-type özellikleri tanımlanır. Size Yazının boyu belirlenir.

<TITLE> Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.

<META NAME="keywords“ CONTENT="Sitenizi <META NAME="keywords“ CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> <META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını gösterir.

<BODY>

<BR> Yazdığımız yeri istediğimiz yerden bölmek veya satır başı yapmak için <BR> deyimini kullanabiliriz.

<CENTER>: Sayfayı yatay olarak ortalamak için kullanılır. <H1>,<H2>,…<H6>: Yazı büyüklüğünü belirlemek için kullanılır.H harfinin yanındaki rakam büyüdükçe yazı büyüklüğü küçülür. <B>: Yazıyı kalın yazmak için kullanılır. <I>: Yazıyı italik yazmak için kullanılır. <U>: Yazıyı altı çizili yazmak için kullanılır. <Font Size=Rakam>: Yazı büyüklüğünü belirlemek için Font deyimi de kullanılır. <Font Color=“Renk”> : Yazı rengini belirlemek için kullanılır. <Font FACE=“Yazı tipi”>: Yazı tipini belirlemek için kullanılır.

<HR>: Sayfaya yatay çizgi eklemek için kullanılır <HR>: Sayfaya yatay çizgi eklemek için kullanılır. Color parametresi ile çizgiye renk verilebilir. <P>: Paragraf yapmak için kullanılır. Align parametresi kullanarak paragrafın hangi yöne hizalanacağı seçilebilinir.

Metni Birlikte Kullanmak Sayfalarda Resim ve Metni Birlikte Kullanmak <IMG SRC> tagı html sayfasına resim eklemek için kullanılıyor. Html dosyasına göre resmin yolunu gösteriyoruz. <IMG SRC='resim/mehmetakif.jpg' border=2 Align='Left'> Width parametresi ile resmin genişliğini, Height ile de yüksekliğini ayarlayabiliriz. Border ile kalınlığını, Align ile de resmin hangi yöne hizalanacağını belirtiyoruz.

Sayfalara E-mail linki Yerleştirmek Sayfalara E-mail linki yerleştirmek için; <A Href=MAILTO:mailadresi> Gözükecek metin </A>

Başka Web Sayfalarına Bağlantı Vermek

Resimlere Bağlantı Özelliği Vermek

STYLE SHEET ve CSS kullanımı Style kullanımı sayesinde metinlerin biçim özellikleri otomatik olarak kısa sürede değiştirilebilinir. Style’ler daha çok aynı sayfada aynı biçimleme işlemi birden fazla tekrar edildiği zaman işlevsel olmaktadır. Html kodlarımızın içerisinde bir style tanımlayabileceğimiz gibi oluşturduğumuz stil özelliklerini farklı bir css uzantılı dosyadan da çağırabiliriz.

CSS koduna bakış Bir css ifadesi her zaman noktalı virgül (;) ile biter. İfadeler bir kıvrımlı parantez içinde yer alır. p { color: red; text-align: center; }

Stil Belirlemek Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var.

Stili Başka Bir Dosyadan Çağırmak stildosyasi.css

TABLO HAZIRLAMAK Tablo hazırlamak için <TABLE> etiketi kullanılır. Border parametresi ile tabloya kenarlık ekleyebiliriz.Border değeri ne kadar büyük olursa tablonun kenarlığı o kadar kalın olur. Width parametresi ile tablonun genişliği belirlenir. Table deyimi ile tablo hazırlama özelliği başlatıldıktan sonra <TR> deyimi ile tabloya satır, <TD> deyimi ile tabloya sütün eklenir. <TH> ile de satır eklenir fakat bu kez o satırdaki yazılar Bold olur.

Hücreleri Birleştirmek Zemin Rengini Belirlemek Table deyimi ile birlikte BGCOLOR parametresini kullanırsanız tablonun zemin rengi değişir, TR ile kullanırsanız satırın, TD ile kullanırsanız sütunun rengi değiştirilir. COLSPAN ve ROLSPAN deyimi hücreyi birleştirmek için kullanılıyor.

Tablonun Hücrelerine Resim Girişi

Form Hazırlamak Form hazırlamak için HTML kodu içinde <FORM> deyimi kullanılır. Kullanıcının Form yardımıyla bilgi girebilmesi için INPUT deyiminden faydalanılmaktadır. Bilgi girilecek nesnenin tipi TYPE parametresi ile belirlenmektedir. Eklenen nesnenin seçili olması için INPUT ile birlikte checked parametresi kullanılır. Eklenen her nesnenin bir adı ve bir tipi olmalıdır.

Forma Onay Kutusu(Checkbox)Eklemek

Radyo Düğmesi Hazırlamak

Metin Kutusu Hazırlamak Metin kutusu hazırlamak için Type parametresine text değerini aktarmak gerekir. Html sayfama boşluk karakteri eklemek için “&nbsp” kullanılır. Size parametresi ile metin kutusunun genişliği ayarlanabilir. Metin kutusuna girilecek metne sınırlama getirmek için MaxLength parametresinden yararlanılır. Value parametresi ile metin kutusuna değer aktarılabilinir. Type parametresine text yerine password değeri aktarılırsa metin kutusuna şifre girişi yapılır. Girilen bilgilerin ekranda okunması engellenir.

TEXTAREA DEYİMİ Web sayfası aracılığı ile dışarıdan girilecek bilginin birden fazla satırdan meydana gelmesini istiyorsanız TEXTAREA deyiminden yararlanabilirsiniz. Parametre olarak satır sayısı ve sütun genişliği verilebilir.

Liste Kutusu Hazırlamak Liste kutusu hazırlamak için SELECT deyimi kullanılır. Name parametresi ile liste kutusunun adı, Size parametresi ile liste kutusunun yüksekliği belirlenmektedir. Liste kutusuna eklemek istenen her bir seçenek <OPTION> İLE </OPTION> arasına yazılmalıdır. Select deyimi ile Selected parametresini kullanmak gerekir.

Düğme (Buton) Hazırlamak Input deyiminin Type parametresine “button” değerini aktardığımızda forma bir düğme yerleştirilir. Düğmenin başlığı value parametresi ile belirlenir. Type parametresine “button” yerine “reset” parametresi aktarılırsa o düğmeye tıklandığında formdaki bilgiler temizlenir.