2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

HTML e GİRİŞ Temel HTML etiketleri.
HTML
Bilgi ve İletişim Teknolojileri Dersi
Bilgilerimi sunuyorum
Kayıt olun’a tıklayın…
Web Bilgi Girişi Kullanım Rehberi
HTML’ ye Giriş Uzm. Murat YAZICI.
Tarayıcınızı açıp, web sayfası adresinizi giriniz. (1) Sayfa düzenleyebilmeniz için “Giriş” bağlantısına tıklayınız. Giriş yaptıktan sonra sayfaların içeriğini.
KLAVYE KULLANIMI.
BİLİŞİM TEKNOLOJİLERİ DERSİ MİCROSOFT WORD
Bir hedefi ve amacı olan bir bilgi sunumudur.
İnternet Programcılığı
Kişisel Web Sayfaları Kullanım Bilgileri
İNTERNET VE İLETİŞİM.
Sosyal Bilgiler Öğretmenliği Wordpress 2. Not
INTERNET EXPLORER TEMEL İŞLEMLER GOOGLE ARAMA TEKNİKLERİ
BTEP 203 – İnternet ProgramcIlIğI - I
Görsel Okur-Yazarlık *
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
Bilgisayar Uygulamaları II
WEB TASARIMININ TEMELLERİ
Support.ebsco.com Kullanıcı Kılavuzu Gelişmiş Arama.
İnternet Programcılığı II
FERHAT KADİR PALA SACİDE GÜZİN MAZMAN
WEB TASARIMINDA TEMEL KAVRAMLAR
HTML HYPER TEXT MARKUP LANGUAGE Burcu Yılmaz – İ brahim Mert Bilişim Teknolojileri Ö ğ retmeni.
İnternet Programlama PHP.
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.
Bilgisayarda Ofis Programları
İNTERNET PROGRAMLAMA - 1
HTML :Hyper Text Markup Language explorer, firefox, opera herhangi bir derleyiciye ihtiyaç duymadan çalışabilir metin biçimlendirme resim ekleme ve biçimlendirme.
İnternet Programcılığı I A-Şubesi 2-1.Ders
STiL ŞABLONU (CSS) TEMELLERİ
Cascading Style Sheets (Stil Şablonları)
ETwinning Twinspace Kullanımı Nisan 2014.
EĞİTİMDE BİLİŞİM TEKNOLOJİLERİ
PHP.
BİT’İNİ KULLANARAK BİLGİYE ULAŞMA VE BİÇİMLENDİRME
İNTERNET VE İLETİŞİM.
Arama Motorlarını Kullanmanın Püf Noktaları
TABLETLERİN OKULLARA TESLİMATI
HTML (Hyper Text Markup Language) İnternet dökümanları oluşturmaya yarayan işaretleme dilidir.
Dyned eba şifre güncelleme işlemleri için
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 Tarayıcıları ve Arama Motorları
WEB SİTESİ YAPIYORUM HTML
Yrd. Doç. Dr. Doğan AYDOĞAN
Dyned sunusu.
KELİME İŞLEMCİ PROGRAMI
-Genel sayfa düzeni. -Duyuru Ekleme -Fakülte-Myo Sayfa düzenleri eğitimi.
Hazırlayan: EMRAH HAS. Eşzamanlı ya da eş zamansız, metin, grafik, animasyon, ses, video gibi içeriğin tamamen işlenmiş, yarı işlenmiş ya da ham veri.
KIRKLARELİ ÜNİVERSİTESİ
Windows Live Movie Maker Nedir? Movie Maker ile, bilgisayarınızda yer alan fotoğraf ve videolarınızı kullanarak, bunlar üzerinde düzenlemeler, değişiklikler.
PROGRAMLAMA VE SCRATCH.
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.
BİLİŞİM TEKNOLOJİLERİ
Web Tarayıcıları ve Arama Motorları
Öğretim Görevlisi Emel ALTINTAŞ
Kullanıcı Kılavuzu Gelişmiş Arama support.ebsco.com.
WEB TASARIMI BOOTSTRAP KULLANIMI SAVAŞ TUNÇER
WEB TASARIMI STİL ŞABLONLARI (CSS KULLANIMI) SAVAŞ TUNÇER.
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
Web Tarayıcıları ve Arama Motorları
Bu sunum Balıkesir İl Milli Eğitim Müdürlüğü’nün 08/09/2014 tarihli /480.99/ sayılı , “Dyned Destek Hizmeti” konulu yazısına istinaden.
Mehmet Fatih KARACA Yrd. Doç. Dr. Salih GÖRGÜNOĞLU
Tasarım: Ali Topal.
Sunum transkripti:

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 Yapısı ve Yazım Kuralları *Html komutları temel olarak bir açılış tagı, bir kapanış tagı ve içerikten oluşur. Her açılış tagı mutlaka kapatılmalıdır. Aksi takdirde komut düzgün çalışmayabilir. Açılış ve kapanış tagı içinde kalan içerik komuttan etkilenir ve beklenen görevi yerine getirir. <p>Komut İçeriği</p> Açılış Tagı Kapanış Tagı

<p style=”değer”> Merhaba </p> Her html tagının kendine göre özellikleri vardır. Örneğin tagların «id» özelliği, ilgili taga bir isim verilmesini ve onun diğer taglardan ayırt edilmesini sağlar. Html taglarının «style» özelliği ise tagların görünümünü ve konumunu değiştirmeye yarar. Dikkat ederseniz özelliğe atanan değer tırnak içinde yazılır. Bu bilgiler ışığında tagların özellikleri de eklenince, bir önceki sayfada bulunan html komutunun yapısı aşağıdaki gibi olur. <p style=”değer”> Merhaba </p> Açılış Tagı Kapanış Tagı

<head> </head> <body> </body> </html> Html dilinde bazı komutların kapanış tagı yoktur. Örneğin <br/> komutu paragrafın alt satırdan devam etmesini sağlar ve kapanış tagı yoktur. Bu Komut içinde bulunan ”/” işareti tagın kapanmasını sağlar. Html komutları büyük veya küçük harfle yazılabilir fakat HTML5 standartına göre HTML komutları küçük harfle yazılmalıdır. HTML Komutları yan yana veya alt alta yazılabilir. Örneğin, aşağıda gördüğünüz kodlar aynı işi yapar; okunabilirliliği arttırdığı için alt alta yazmak tercih edilebilir. <html><head></head><body></body></html> <html> <head> </head> <body> </body> </html>

<!-- açıklama alanı --> Açıklamalar Eğer oluşturduğunuz web sayfası yada kodlarla ilgili bazı açılamalar yazmak istiyorsanız aşağıdaki tagı kullanabilirsiniz; Açıkama tagı içine yazılan kodlar tarayıcılar tarafından dikkate alınmaz. Açıklamalar sadece tasarımcıya yönelik yazılan hatırlatma metinleridir. Eğer bir sayfada birden fazla kişi çalışıyorsa yada sayfada kritik öneme sahip ve kolayca unutulabilecek bazı kodlar yazıyorsanız açıklama yazmakta fayda vardır. Böylece hem siz hemde diğerleri sizin yazdığınız kodları kolayca anlayabilir. Açıklama satırları aylar yada yıllar önce yazdığınız ve belki de artık unuttuğunuz kodlar hakkında ipucu verir. Açıklama kodları sayesinde daha önce yazdığınız kodları hatırlayıp üzerinde daha kolay güncelleme yapabilirsiniz. <!-- açıklama alanı -->

HTML Sayfası Oluşturma & Kaydetme Html’in başarılı olmasının en büyük nedenlerinden biri basitliğidir. Ücretsiz, basit bir editör ve basit birkaç komutla kendi web sitenizi oluşturabilirsiniz. Html’in başarılı olmasının bir diğer sebebi ise basit bir tarayıcıya sahip olan tüm cihazlarda çalışabiliyor olmasıdır. Yaptığınız Html sayfaları cep telefonlarında, tabletlerde, bilgisayarlarda ve diğer akıllı bir çok cihazda sorunsuz çalışabilir. Bu başlık altında en temel komutlardan oluşan bir HTML sayfası yapacağız ve sayfamızı tarayıcıda test edeceğiz. Web sayfalarında mutlaka bulunması gereken komutlardan biri <html> tagıdır. Her HTML sayfası <html> tagı ile başlayıp </html> tagı ile bitmelidir. HTML Sayfaları iki temel kısımdan oluşur; her HTML sayfasında bir başlık (head) bir gövde (body) kısmı bulunur. Başlık kısmı tarayıcılara ve arama motorlarına yönelik bazı komutları barındırırken, gövde kısmı ziyaretçilere yönelik komutları ve içeriği barındırır. Örnek olarak ; <html> <head> </head> <body> <p>Merhaba Dünya!</p> </body> </html>

Sayfa başlığı eklenmiş örnek kod; Oluşturduğunuz HTML sayfasının bir başlığa (title) sahip olmasını istiyorsanız <head> tagının içinde <title> tagını kullanmalısınız. <title> tagı arama motorları tarafından veritabanına eklendiği ve arama sonuçlarında görüntülendiği için çok önemlidir. Mutlaka her sayfaya bulundurduğu içerik ve ürünlerle ilgili başlık bilgisi koyulmalıdır. Böylece, sayfa içinde bulunan içerik ve ürünler arama sonuçlarında daha yukarıda listenelecektir. Konu ile ilgili makale için bu linki ziyaret edebilirsiniz; http://tasarimgalerisi.com/seo-uyumlu-site-basligi-nasil-olmali/ Sayfa başlığı eklenmiş örnek kod; SIRA SİZDE! 1- Masaüstünde “sağ tıklayın” ve “yeni” deyin 2- Not defterini seçin 3- Oluşturduğunuz not defterini açın ve soldaki kutuda bulunan kodları yazın. 4- “Dosya menüsü”nden “farklı kaydet” seçeneğini seçin 5- Dosyanıza isim verin. Mesela merhaba.html 6- “Kayıt türü” yazan yeri “tüm dosyalar” olarak seçin 7- Kaydedin. Masaüstünde (örnekteki isim için) merhaba.html diye bir internet sayfası oluşacaktır. <html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Merhaba Dünya!</p> </body> </html>

Temel HTML Komutları KOMUT AÇIKLAMA <!doctype html> Sayfanın HTML5 ile tasarlandığını belirtir. Sayfanın en başında bulunur. <html> </html> Sayfanın başlangıcı ve sonunu belirtir. <head> </head> Sunucu ve arama motorları ile ilgili bilgileri içerir. <body> </body> Ziyaretçiye gösterilecek içeriği barındırır. <title> </title> Sayfa başlığı. <html lang= ”tr”> Sayfanın dilini belirtir. Türkçe sayfalarda tr kullanılırken, ingilizce sayfalarda en kullanılır. <html> tagının bir özelliğidir. Yani, ayrı bir komut değildir. <meta charset= ”utf-8”> Türkçe karakterlerin düzgün görünmesini sağlar ve <head> tagının içine yazılmalıdır. <hx> </hx> İçeriklerin başlık bilgisini barındırır. Gazetelerin manşetleri gibi, başlık taglarıda web sayfalarındaki metinlerin manşetleridir. Okuyucuların dikkatini çekmek için kullanılır. <p> </p> Paragraf <br/> Aynı paragrafın alt satırına geçmenizi sağlar.

Yukarıdaki bilgilerin ışığında, iletişim bilgilerimizi barındıran web sayfasını hazırlıyalım. <!-- Sitenin İletişim Sayfası --> <!doctype html> <html lang="tr"> <head> <title>Firmamızın İletişim Bilgileri</title> <meta charset="utf-8" /> </head> <body> <h2>İletişim Bilgileri</h2> <p>Tasarım Galerisi Şirketi<br /> Çiçek Sokak No:61 Ümraniye/İstanbul<br /> Tel:123456789 Cep:0530123456<br /> http://www.tasarimgalerisi.com<br /> email:info@tasarimgalerisi.com</p> </body> </html> Kodları Yorumlayınız

<h1> <h2> <h3> <h4> <h5> <h6> Etiketleri H tagı, aslında headings kelimesinin kısaltmasıdır. Kod yazarken h olarak yazılır. Bu taglar, herhangi bir web sayfasında metini büyütmede kullanılır. Genellikle sayfalardaki başlıklar bu kodlar yardımcılığıyla yazılır. Hem daha şık görünür, hem de Google tarafından daha çok sevildiği bilinir. Bu h tagları, 1 – 6 rakamları aralığında yazılır. 7 ve üstü kullanılmaz. Ayrıca bu taglarda h1 tagı en büyük, h6 tagı en küçük puntolu yazıdır. Google, sayfaları indexlerken h1 tagını, h6 tagından daha çok önem verir. Örnek Kullanımı; <!-- Sitenin İletişim Sayfası --> <!doctype html> <html lang="tr"> <head> <title>Firmamızın İletişim Bilgileri</title> <meta charset="utf-8" /> </head> <body> <h1>Başlık Tagı 1</h1> <h2>Başlık Tagı 2</h2> <h3>Başlık Tagı 3</h3> <h4>Başlık Tagı 4</h4> <h5>Başlık Tagı 5</h5> <h6>Başlık Tagı 6</h6> </body> </html>

Web Sayfa Kaynak Kodlarının İncelenmesi İnternette gezerken karşımıza bir çok ilgi çekici siteye yada sayfaya rastlarız. Eğer bu sayfaların kodlarını inceleyip neler yapıldığını görmek istersek ilgili sayfaya sağ tıklayıp ”Sayfa Kaynağını Görüntüle” komutunu çalıştırabiliriz. Burada dikkat etmeniz gereken konu, bir resim veya flash animasyonu üzerine tıklamamaktır. Aksi takdirde kaynak kodlarına ulaşamazsınız. Örneğin www.tasarimgalerisi.com web sitesine girdikten sonra sayfa kaynağını görüntüle dedikten sonra aşağıdaki kodları görürsünüz. Sayfanın kodları açıldığında sadece HTML kodlarını değil, sayfa içinde kullanılan JavaScript ve diğer kodları da görebilirsiniz. İlgilendiğiniz sayfayı dahada yakından incelemek isterseniz bilgisayarınıza kaydedebilirsiniz. Sayfanın uygun bir yerinde ctrl+s kısayolunu kullanarak sayfayı kendi bilgisayarınıza kaydedebilirsiniz. Daha sonra bu sayfayı bir editör ile inceleyebilirsiniz. Sayfa ile beraber birde klasör gelmektedir. Bu klasörün içinde sayfa ile ilişkili resim CSS Javascript veya jquery gibi dosyalar bulunmaktadır.

Dosya Adları Dosyaların adında sadece küçük harf kullanın. Örneğin dosya adını Anasayfa yerine anasayfa yaparsanız hem daha hızlı yazarsınız hemde link verirken daha rahat edersiniz. Türkçe karakterler (ü,ö,ı,ş,ğ) kullanmayın. Sayfalara isim verirken, sayfanın yapacağı işe uygun isimler verin. Örneğin, eğer iletişim bilgilerini içeren bir sayfa oluşturacaksanız iletisim.html gibi bir dosya adı kullanabilirsiniz. Eğer sayfanıza birden falz kelimeden oluşan bir dosya adı verecekseniz kelimeler arasına tire (-) karakteri koyun. İçerisinde boşluk karakteri olan dosya adlarını kesinlikle kullanmayın. Örneğin iletisim bilgileri.html şeklinde bir dosya adı kullanmayın. İki kelime arasında alt çizgi (_) kullanabilirsiniz ama arama motorları (-) karakterini daha çok sever.