GELİŞMİŞ İNTERNET UYGULAMALARI

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

Download "GELİŞMİŞ İNTERNET UYGULAMALARI"

Transkript

1 Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML HTML Web Standarts Project 1999 HTML XHTML HTML 5.0 için ilk çalışmaların başladığı yıl. 10 yıllık gelişim süreci 2010 dan sonra çok bilinir hale gelmeye başlandı. Günümüzde gelişim devam ediyor HTML5 kapsamlı test yılı Tam olarak standartlaşması 2020 yi bulabilir. Not: Web standartları World Wide Web Consortium(W3C) tarafından belirlenir.

2 HTML 5 Nedir? HTML5, HTML 4 ve XHTML 1 in yerine getirilen yeni bir web betimleme dilidir. HTML5 geleceğin web teknolojisidir. Günümüzde büyük oranda standartlaşmıştır. Bu yeni versiyonu çıkarmak için bazı önşartlar vardı: - yeni versiyon HTML, CSS, DOM ve Javascript tabanlı olmalı - dışardan eklenti ihtiyacını en aza indirgemeli (flash gibi) - daha iyi şekilde hata ayıklanabilmeli - daha çok etiket üretilmeli ve script'in yerini alabilmeli - HTML5 cihaz bağımsız çalışabilmeli - geliştirme aşamaları herkese açık olmalı HTML5 Genel Özellikleri Eski HTML sürümlerini destekler. Zengin kullanıcı interaktivitesi içerir. Tasarımcılara ve geliştiricilere zaman kazandırır. HTML5 destekli her tarayıcı aynı şekilde yorumluyor. Daha fazla yapısal elemana, form elemanlarına ve yeni özelliklere sahiptir. Gelişmiş multimedia desteği sunmaktadır. İçerisinde yeni teknolojiler barındırır ya da önceden var olan teknolojilerin kullanımını sağlar. JavaScript ve CSS3 teknolojilerini daha etkili bir şekilde kullanmamızı sağlar.

3 HTML5 Yeni Getirdiği Özellikler Çizim yapmaya imkan veren canvas elemanı Geniş bant ve zengin medya içeriği için video ve audio elemanları Çevirim-dışı (off-line) içerik barındırma (Offline Apps) İçeriği daha iyi tanımlayan özel elemanlar(yeni yapısal etiketler): article, footer, header, nav, section... Yeni form kontrolleri: calendar, date, time, , url, search... Masaüstünden web sitesine sürükle bırak özelliği GeoLocation API : Kullanıcının bulunduğu yerin enlem ve boylamını verir. Daha çok mobil cihazlarda kullanılır.

4 HTML5 Tarafından Desteklenmeyen Taglar: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp> HTML5 Yeni Gelen Taglar: <canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time> HTML5 Tarafından Desteklenmeyen Tag Attribute ları(tag Özellikleri): - align - link, vlink, alink, text (<body> için) - height ve width - scrolling ( <iframe> için) - hspace ve vspace - cellpadding, cellspacing, border (<table>) - bgcolor - valign

5 HTML5 te Yenilikler: 1) Page Direktifi (Sayfa Bildirimi) sadeleştirildi. eski: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> yeni: <!DOCTYPE html> 2) Meta karakter kodlaması sadeleştirildi. eski: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> yeni: <meta charset= UTF-8 > 3) JavaScript ve CSS eklentileri sadeleştirldi. eski: <script type="text/javascript" src="script1.js"></script> <link href="stil_dosyasi.css" type="text/css" rel="stylesheet"/> yeni: <script src= jsfile.js ></script> <link rel= stylesheet href= style.css >

6 HTML5 ile Birlikte Gelen Yeni Yapısal Tag lar <header>, <footer>, <section>, <nav>, <aside>, <article>, <figure> Birçoğu <div> lerin yerine gelmiştir. İsimleri içerikleri hakkında bilgi verir. Bu nedenle anlamsal etiket olarak isimlendirilirler. HTML5 te <div> kullanımdadır. <header>: Sayfanın üst kısmını yada sayfanın herhangi bir yerinde başlık alanı tanımlamak için kullanılır. <footer> : Sayfanın alt kısmını tanımlar. Sitemap, copyright, sosyal media ikonları, değişik bağlantılar bu alanda yer alabilir. <section> : Sayfanın herhangi bir bölümünü oluşturmak için kullanılır. <section> içinde <article> ve <div> yer alabilir. <header>, <aside> ve <footer> etiketleri bu etiketi kapsayabilir. <nav> : İçerisinde menü ve linklerin bulunduğu alan. <article> : Haber, makale, vb. gibi metin içerikli alanlarda kullanılır.

7 <aside> : Yan alanlar tasarlamak için kullanılır. <figure>: HTML belgesinde image ları işaretlemek için kullanılır. Resim, grafik, vb. gibi görsel nesneler. Örnek)

8 Örnek: XTML1.0 ile kodlanmış sayfa

9 Aynı sayfa HTML5 ile kodlanmış

10 Örnek)

11 Uygulama: Aşağıdaki görüntüyü HTML5 standartları ile kodlayınız. HTML5 ile Gelen Yeni Tag lar (Devam ) <article> Kendi içinde bir içeriği olan, tüm sayfadan bağımsız içerikler için kullanılır. Blog anasayfalarında yer alan bağımsız her bir gönderi için kullanılır. Haber, makale, blog yazısı v.b. gibi metin içerikli alanlarda kullanılır. <command> button, radio button veya checkbox gibi form elemanlarında kullanılır. <details> bir dokümanın bir parçasının yada tamamımın detaylarını açıklamak için kullanılır.

12 <summary> <details> elemanı içinde özet veya açıklama için kullanılır. <figcaption> <figure> bölümünün alt yazısı olarak kullanılır. <hgroup> <h1> den <h6> ya kadar başlık bölümlerini içerir. En büyük değer bölüm başlığı olurken diğerleri alt başlık olarak görünür. <mark> özellikle belirtilmek istenilen metinler (highligt) için kullanılır. <meter> alt ve üst değerleri bilinen ölçümler için kullanılır. <progress> işin ilerleme durumunu göstermek için kullanılır. <ruby> uzakdoğu alfabelerinde kullanılan harflerin veya notların okunuşunu, açıklamasını göstermek için kullanılır. <rt> <ruby> elemanın bilgi notunu açıklamak için kullanılır. <rp> <ruby> elemanını desteklemeyen tarayıcıların göstermesi istenlen içerik için kullanılır. <time> saat, tarih veya her ikisinin de gösterimi için kullanılır. <wbr> (WORD BREAK). Satır boşluğu bırakmak için kullanılır.

13 YENİ ZENGİN MEDYA ELEMANLARI HTML5, zengin medya içeriklerini desteklemektedir. <audio> multimedya içeriği, ses, muzik, yada diğer ses içeriğini göstermek için kullanılır. Ör) <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> <video> video içeriği için kullanılır. Ör) <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <source> <audio> ve <video> elemanlarının içinde, kaynak adreslemek için kullanılır. <embed> flash ve java gibi eklentileri sayfa içine yerleştirmek için kullanılır. <track> medya oynatıcılarında içerik metnini göstermek için kullanılır.

14 CANVAS ELEMANI Bir web sayfası içinde kullanıcı yada kodlama yönlü vektörel çizim yapılmasına olanak sağlanmaktadır. Canvas elemanı bunun için Javascript kullanmaktadır. <canvas> javascript ile grafik çizimi için kullanılır. Ör) <canvas id="mycanvas"></canvas> <script> var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff0000'; ctx.fillrect(0,0,80,80); </script> Yeni FORM ELEMANLARI HTML5 daha fazla yetileri olan form elemanları sağlamaktadır. Bunlar: <datalist> girdi değerleri seçenekleri için bir liste oluşturmakta kullanılır. Ör) <input list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist>

15 <keygen> kullanıcıyı yetkilendirmek için rumuzlar üretir. <output> farklı çıktıları göstermek için kullanılır. Örneğin bir script kullanılılarak üretilen çıktı bu eleman ile gösterilir. YENİ INPUT TYPE ve ÖZELLİKLER (New Input Types and Attributes) HTML5 daha zengin ve tarayıcı kontrollü formlar oluşturmak için yeni [input] tiplerine sahiptir. Bunlardan bazıları; color date datetime datetime-local month number range search tel time url week tel girdi değeri bir telefon numarası olduğu durumlarda kullanılır. search girdi alanı bir arama alanı olduğu durumlarda kullanılır. Destek veren tarayıcılarda kutunun sağ iç yanında, tüm metni silmek için (x) ikonu yer alacaktır. url girdi değeri bir URL olduğu durumlarda kullanılır.

16 girdi değeri eposta olduğu durumlarda kullanılır. datetime girdi değeri tarih ve/ya saat olduğu durumlarda kullanılır. date girdi değeri tarih olduğu durumlarda kullanılır. month girdi değeri ay olduğu durumlarda kullanılır. week girdi değeri hafta olduğu durumlarda kullanılır. time girdi değeri saat olduğu durumlarda kullanılır. datetime-local girdi değeri kullanıcı bilgisayarındaki tarih ve saat olduğu durumlarda kullanılır. number girdi değeri bir sayı olduğu durumlarda kullanılır. range girdi değeri sayı ile verilen bir aralık olduğu durumlarda kullanılır. color girdi değeri hexadecimal renk kodu olduğu durumlarda kullanılır. INPUT elemanı için yeni özellikler(attributes) ve kullanım şekilleri ise autofocus <input type= autofocus> Sayfa yüklendiği zaman otomatik olarak bu alan içinin aktif olmasını sağlar

17 required <input type= text required> Form gönderildiği zaman bu alanın tarayıcı tarafından boş olup olmadığı kontrol edilir. HTML5 den önce bu doğrulama için çeşitli scriptler kullanmak gerekirdi. placeholder <input type= text placeholder= Lütfen adınızı giriniz > Metin alanı içinde bu alanın hangi bilgi için kullanılacağı hakkında bilgi verir. Metin alanı içine tıklandığı zaman placeholder metni silinir ve kullanıcının kendi değerini yazması sağlanır. Kullanıcı metin alanını boş bırakarak alan dışına çıktığında, placeholder metni tekrar alan içinde ye alır. HTML den önce bu gibi bir kullanım için çeşitli scriptler kullanmak gerekirdi.tarayıcının bu özelliğe destek vermemesi halinde, metin kutusunun içi boş olarak görünecektir. list metin alanına girilebilecek önceden tanımlı içerik var ise list özelliği kullanılır. Kullanıcı bu alanı doldururken girdiği her harf sonrasında listede yer alan uygun elemanlar metin alanın altında aşağı doğru açılır ve kelimenin tamamını yazmadan seçilerek metnin kutu içine yazılması sağlanır. Kullanım şekli; <input type="text" id="illistesi" list="iller" placeholder="lütfen bir il seçiniz" > <datalist id="iller"> <option value="istanbul"> <option value="ankara"> <option value="izmir">

18 <option value="eskişehir"> <option value="erzurum"> <option value="hakkari"> </datalist> min/max <progress min="0" max="100" value="60">60%</progress> <meter max="10">9 araba</meter> pattern Posta Kodu: <input id="zip" name="postakodu" pattern="[\d]{5}(-[\d]{4})"> Girilecek olan alanın 5 haneli ve yalnızca rakam olduğunu göstermektedir. Okunaklılık konusunda HTML5 in yapısına biraz aykırı görünse de, programcılar için pattern tanıdık bir özelliktir. Tarayıcı tarafından bu kontrolün yapılması HTML5 in güzel bir özelliğidir.

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

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

Detaylı

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım)

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Yeni Form Elementleri HTML5 işlevi fazla olan ve daha fazla form elemanı sunmaktadır Tarayıcı

Detaylı

Barış Öztekin, 2011 ANKARA www.barisoztekin.com

Barış Öztekin, 2011 ANKARA www.barisoztekin.com Barış Öztekin, 2011 ANKARA www.barisoztekin.com H T M L 5 1 HTML5 HTML5 NEDİR? HTML5; HTML, XHTML ve HTML DOM(Document Object Model) için belirlenmiş standartlardır. HTML in bir önceki versiyonu olan HTML4

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

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 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

HTML5. Erek Göktürk. Özgür Yazılım A.Ş. www.ozguryazilim.com.tr

HTML5. Erek Göktürk. Özgür Yazılım A.Ş. www.ozguryazilim.com.tr HTML5 Erek Göktürk Nedir? Yenir mi? Web içerik dili HTML'in yeni sürümü Daha iyi belirlenmiş işletim semantiği Yeni elemanlar (tags) ve özellikler (attributes), bazıları da çöpe Ümit: Tarayıcılar arası

Detaylı

CSS3, HTML 5 ve jquery ile Web Tasarımı. Umuthan Uyan

CSS3, HTML 5 ve jquery ile Web Tasarımı. Umuthan Uyan CSS3, HTML 5 ve jquery ile Web Tasarımı Umuthan Uyan JavaScript Kütüphanesi JavaScript ile yazılan özellikle AJAX ve diger web teknolojilerini kullanarak web yazılımlarını kolaylıkla gelistirmemizi saglayan

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞ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ı

Detaylı

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 İÇİNDEKİLER VII İÇİNDEKİLER 1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 2 BOOTSTRAP CSS DOSYASININ İNCELENMESİ 5 Bootstrap

Detaylı

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım)

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım) BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Nedir? HTML in bir önceki versiyonu olan HTML 4.0.1 1999 yılında çıkarılmış ve o tarihten

Detaylı

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

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

Detaylı

Web Programlama Kursu

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

Detaylı

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

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

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

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

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

2-Hafta Temel İşlemler

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

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

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

Detaylı

2. HTML Temel Etiketleri

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

Detaylı

HTML5'in Sunduğu Yenilikler ve Bir Örnek Uygulama Rafet Durgut 1, Doç. Dr. Abdülkadir Çakır 2

HTML5'in Sunduğu Yenilikler ve Bir Örnek Uygulama Rafet Durgut 1, Doç. Dr. Abdülkadir Çakır 2 HTML5'in Sunduğu Yenilikler ve Bir Örnek Uygulama Rafet Durgut 1, Doç. Dr. Abdülkadir Çakır 2 1 Süleyman Demirel Üniversitesi, Bilgisayar Mühendisliği Bölümü, Isparta 2 Süleyman Demirel Üniversitesi, Elektrik-Elektronik

Detaylı

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

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

Detaylı

HTML (Hyper Text Markup Language)

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

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

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

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

Detaylı

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

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

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

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

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

Detaylı

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

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

Detaylı

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

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

Detaylı

İNTERNET PROGRAMCILIĞI I

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

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

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

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

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

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

Detaylı

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

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

Detaylı

www.elektrikogretmenleri.com

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

Detaylı

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

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

Detaylı

DIV KAVRAMI