HTML (HyperText Markup Language)

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

HTML e GİRİŞ Temel HTML etiketleri.
HTML
Bilgi ve İletişim Teknolojileri Dersi
Web Bilgi Girişi Kullanım Rehberi
İnternet Sitemizi Açarız! Çok Heyecanlıyız !. Fakat Ziyaretçi Gelmez..
HTML’ ye Giriş Uzm. Murat YAZICI.
HTML Ders Notları.
ENF 101 TEMEL BİLGİ TEKNOLOJİLERİ KULLANIMI
İnternet Programcılığı
Bilgisayar Dosya Uzantıları
Kişisel Web Sayfaları Kullanım Bilgileri
Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir?
Kodlama bilgisi gerekmez!
İleti çubuğunda Düzenlemeyi Etkinleştir'i tıklatın,
Temel Bilgisayar Bilimleri Dersi
İSİM UZAYLARI.
OGM SİTESİNDEN GİRİLEREK E-POSTA HESAP ŞİFRESİ DEĞİŞTİRME
BAĞLANTI OLUŞTURMAK Bağlantı rengini ve biçimlendirme özelliklerini ayarlamak Hipermetin bağlantıları oluşturmak Resim tabanlı bağlantılar oluşturmak Bağlantıların.
HTML’ye GİRİŞ Dr. Devkan Kaleci
BTEP 203 – İnternet ProgramcIlIğI - I
İNTERNET PROGRAMCILIĞI I
HTML’E GİRİŞ.
ÖDEVLER 1-Listeleme etiketleri 2-Color 3-Sayfa içinde bağlantı oluşturma Hilal BAYIR 2344 TUZLA TEKN İ K OKULLARI.
Çerez(Cookie) Kullanımı Oturum Yönetimi
Temel HTML Eğitimi Erman Yükseltürk.
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
CSS Birimleri.
WEB TASARIMININ TEMELLERİ
WİNDOWS 7 KURULUM.
BAĞLANTI (KÖPRÜ) OLUŞTURMA
WEB TASARIMINDA TEMEL KAVRAMLAR
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
İNTERNET PROGRAMLAMA - 1
HTML KODLARI HTML Dokümanındaki ilk etiket <html>’dir.
HTML :Hyper Text Markup Language explorer, firefox, opera herhangi bir derleyiciye ihtiyaç duymadan çalışabilir metin biçimlendirme resim ekleme ve biçimlendirme.
1 İNTERNET PROGRAMLAMA - 1 Bağlantılar Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.
Dosya Adları ve Uzantıları
İNTERNET PROGRAMLAMA - 1
HOŞGELDİNİZ…. HOŞGELDİNİZ… POWERPOİNT İLE… PowerPoint genellikle iş ya da okul için sunumlar hazırken kullanılır. Ancak PowerPoint çok daha eğlenceli.
Önce tasarım butonuna tıklayın
STiL ŞABLONU (CSS) TEMELLERİ
NOTEPAD++.
HÜCRELERİ HİZALAMA VE BİRLEŞTİRME
İNTERNET PROGRAMCILIĞI I
HTML (Hyper Text Markup Language) İnternet dökümanları oluşturmaya yarayan işaretleme dilidir.
WEB TASARIMININ TEMELLERİ
HTML ve Uzaktan Eğitim Materyali Hazırlama Teknikleri
WEB TASARIMININ TEMELLERİ
HTML HYPER TEXT MARKUP LANGUAGE Ayşe AK İ DA Ğ I Bilişim Teknolojileri Ö ğ retmeni.
WEB SİTESİ YAPIYORUM HTML
WORD WORD UYGULAMA.
Yrd. Doç. Dr. Doğan AYDOĞAN
WEB2.0 ARAÇLARI Gökçe Hanım EMİR K ONULAR : ajax, rss, css, vidcast, podcast podcast.
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.
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar
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.
KIRKLARELİ ÜNİVERSİTESİ
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
HTML HTML Nedir? HTML Ne İşe Yarar?. HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, tarayıcılarla görebileceğimiz, internet.
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.
HTML Bağlantılar (Link). Link Nedir? HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka bir belgeyle ya da web adresiyle.
KURTKÖY TİCARET MESLEK LİSESİ EĞİTİM ÖĞRETİM YILI
PHP'de Program Denetimi
Dosya Yönetimi.
AĞ Bilgisayar Adını ve Çalışma Grubunu Öğrenme Ağ Kurulumu
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI HTML LİSTELER VE FRAMELER SAVAŞ TUNÇER.
INTERNET nedir? Bu slayda şirket ambleminizi eklemek için
powerPoint nedir
Sunum transkripti:

HTML (HyperText Markup Language) HAYATI TANIMAK İÇİN İNTERNET; TANITMAK İÇİN KİŞİSEL BİR WEB

Giriş HTML nedir? Daha hızlı dönen bu yeni dünyada hobi ya da gereksinimden bu dile ihtiyaç var! Bu dilin Kolaylıkları ve Zorlukları

Gündem Bir web sitesi oluşturmak için günümüz teknolojisinde farklı yazılımlar ve bu siteleri paket olarak hazırlayan şirketler bulunmaktadır. Bir web sitesinin gerek hobi amaçlı gerekse reklam-tanıtım(genellikle kazanç düşüncesi) amaçlı yapılması, tanıtılması piyasalarda önemli bir yer teşkil eder.

1.1.HTML NEDİR ? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisidir diyebiliriz.

1.2. HTML'DE TEMEL UNSURLAR HTML nispeten kolay bir dildir. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..).

1.2. HTML'DE TEMEL UNSURLAR Belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazıyoruz. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda. Burada kullandığımız etiketler ve anlamları genel olarak şöyledir:

1.3. BAŞLIYORUZ !

1.4. İLK SAYFAMIZI YAPALIM 1. Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela “html_ders" olsun. Daha sonra bu ad bize lazım olacak. 2. Şimdi de bu klasörü açıp yeni bir "metin belgesi" oluşturun (sağ fare/Yeni/Metin belgesi). 3. Dosyayı çift tıklayarak açın ve şunları yazın:

1.4. İLK SAYFAMIZI YAPALIM <html> <head> <title>İlk Sayfam</title> </head> <body>Sayfama Hoşgeldiniz</body> </html>

1.4. İLK SAYFAMIZI YAPALIM 4. Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil)ve Tamam'a basın 5. Notepad'i kapatın, metin dosyasını silin ve oluşan yeni dosyayı açın. Dosya varsayılan browser'ınız (internet explorer, netscape navigator gibi) tarafından açılacaktır. Şöyle bir görüntü elde edeceksiniz.

1.4. İLK SAYFAMIZI YAPALIM

1.4. İLK SAYFAMIZI YAPALIM Böylece ilk HTML sayfamızı yapmış olduk. Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazıyoruz. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda. Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız "Sayfama Hoşgeldiniz" yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor.

1.5.1. METİN BİÇİMLENDİRME Bu bölümde öğreneceğimiz etiketler: Başlık etiketleri: <h1>...<h6> Paragraf etiketi: <p>...</p> Ortalama : <center>...</center> Diğerleri : <b>...</b>,<i>...</i>,<u>...</u>

1.5.2. METİN BİÇİMLENDİRME HTML'de metin stillerini üç şekilde belirleyebiliriz:   1. Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir. 

1.5.3. METİN BİÇİMLENDİRME 2. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)   3. HTML dosyasının dışında başka bir stil dosyası oluşturarak til için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.

1.5.4. METİN BİÇİMLENDİRME Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar.   Burada konumuz birinci metoda göre biçimlendirmeyi öğrenmek....!

1.5.5. METİN BİÇİMLENDİRME Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şunları yazıyoruz; <html> <head> <title>BaşlıkEtiketleri</title> </head> <body> <h1>Başlık1</h1><h2>Başlık2</h2> <h3>Başlık3</h3><h4>Başlık4</h4> <h5>Başlık5</h5><h6>Başlık6</h6> </body> </html>

1.5.6. METİN BİÇİMLENDİRME

1.5.7. METİN BİÇİMLENDİRME Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi html, head, title etiketlerini yerleştirdik. Sayfa başlığı (title) olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde (body) kısmına istediğimiz metinleri yazdık ve bu metinleri h1'den h6'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

1.5.8. METİN BİÇİMLENDİRME Şimdi ise biraz daha amatörlük seviyesini geçip daha fazla kod kullanalım.  Belki gün gelir iyi webmasterlar gibi sayfalarca kod yazıp sizde web tasarım şirketleri kurabilirsiniz. Kodlar şu şekilde olsun:  

1.5.9. METİN BİÇİMLENDİRME <html> <head> <title>Başlık Etiketleri-2</title> </head> <body> <h1><center>Sayfama Hoşgeldiniz </center></h1> <p>HTML etiketleri ile,</p> Yazıları <b>koyu</b> <i>italik </i> ve <u>altı çizili</u> olarak yazabiliyorum </body> </html>

1.5.10. METİN BİÇİMLENDİRME

1.5.11. METİN BÇİMLENDİRME Yeni öğrendiğimiz kodlara bir göz atalım:

1.6. FONTLAR Font etiketinin kullanımı; <font face=.... size=.... color=....> </font>

1.6.1. FONTLAR Bunlara font etiketinin parametreleri deniyor.

1.6.2 FONTLAR <font> etiketinin yanı sıra öğreneceğimiz bir diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından fark etmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini kullanıyoruz. İstisnai etiketlerden birisi bu, <br> etiketi sonlandırılmıyor. Yani “</br>” olarak sonlandırmaya gerek yok.

1.6.3. FONTLAR Buna bir örnek verelim; <html> <head> <title>BR etiketi</title> </head> <body> pazartesi salı çarşamba <br>ocak<br> şubat<br> mart<br> nisan </body> </html>

1.6.4. FONTLAR

1.6.5. FONTLAR Yukarıdaki örneğimizde "pazartesi, salı ve çarşamba"yı yazarken enter'la bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere "enter" etkisini <br> etiketiyle veriyoruz. Bu etiketin bir özelliği de sonlandırılmaması.

1.6.6. FONTLAR Şimdi font etiketinin kullanımını bir örnekle inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazı tiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.

1.6.7. FONTLAR <html> <head> <title>Renkler ve Mevsimler</title> </head> <body> <font face="tahoma" size="5" color="#008000">İlkbahar</font> <br> <font face="verdana" size="5" color="#ff0000">Yaz</font> <br> <font face="arial" size="5" color="#ffff00">Sonbahar</font> <br> <font face="comic sans ms" size="5" color="#0000ff">Kış</font> <br> </body> </html>

1.7. LİNKLER <a>...</a> Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara. Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Bu yolla başka neler yapılabilir? Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların hepsine bağlantı kazandırmak mümkün. Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.

1.7.1. LİNKLER Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim: <a href="....">...</a> Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün.

1.7.2. LİNKLER Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.

1.7.3. LİNKLER Ör: <a href="meyve.gif"> buraya tıklandığında meyve resmi açılacak </a> Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

1.7.4. LİNKLER Ör: <a href="midi.zip"> sıkıştırılmış midi dosyalarını çekmek için tıklayın </a> İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

1.7.5. LİNKLER Ör: <a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a> Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır. Ör:<a href="http://www.seminerdeu.8m.com/"> tıklayın sitemi ziyaret edin </a> Dördüncü örnekte bir internet adresi verdik. Ör: <a href="ftp://ftp.seminerdeu.8m.com/"> tıklayın dosyaları indirin </a> Bu ise bir ftp adresine verilen link örneği.

1.7.6. LİNKLER Ör: <a href="mailto: tugrul.kirmizi@deu.edu.tr"> mail atın </a> Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

TEŞEKKÜR EDERİM...