HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

HTML e GİRİŞ Temel HTML etiketleri.
HTML
DREAMWEAVER TABLO OLUŞTURMA VE TABLO ÖZELLİKLERİ
Sık Kullanılan Kontroller
HTML’ ye Giriş Uzm. Murat YAZICI.
WEB EDİTÖRÜ STİL SAYFALARI GELİŞTİRMEK
MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme
İnternet Programcılığı
STİL SAYFALARI GELİŞTİRMEK
BU DERSTE ÖĞRENECEKLERİMİZ Web sayfası oluşturma teknikleri Bir siteyi yönetmek Tablolarla çalışmak Stil sayfaları oluşturmak Katmanlarla çalışmak Form.
Stil Sayfaları HTML dosyaları oluştururken her satır ve paragraf için gerekli biçimleri ilgili yerlerde her seferinde belirtmemiz gerekir. Bazı durumlarda.
Javascript Oğuz İNAL.
Tablosuz Tasarım Div ler.
CSS CSS- Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
Kutu Modeli Özellikleri
IT 504 İnternet ve Web Programlama Tanıtım Yrd. Doç. Yuriy Mishchenko.
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6. Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler:  Color: Metnin rengini belirler.
CSS Birimleri.
 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.
WEB TASARIMININ TEMELLERİ
BAĞLANTI (KÖPRÜ) OLUŞTURMA
SOSYAL BİLGİLER ÖĞRETMENLİĞİ BİLGİSAYAR 2 NOT 2
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.
STiL ŞABLONU (CSS) TEMELLERİ
Cascading Style Sheets (Stil Şablonları)
POWER POİNT SUNU HAZIRLAMAK
Listeleme Etiketleri.
Liste Özellikleri Html etiketlerinden bildiğimiz sıralı (ordered) ve sırasız (unordered) listelere stil vermek için liste özelliklerini kullanacağız. Sıralı.
İNTERNET PROGRAMCILIĞI I
Tablo Özellikleri Tablo oluştururken kullandığımız , , ve etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.
WEB TASARIMININ TEMELLERİ
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.
WEB SİTESİ YAPIYORUM HTML
CASSCADING STYLE SHEETS
WORD WORD UYGULAMA.
Yrd. Doç. Dr. Doğan AYDOĞAN
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
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
Yrd. Doç. Dr. Murat Olcay Özcan
İnternet Programlama-I
İnternet Programlama-I
Yrd. Doç. Dr. Murat Olcay Özcan
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
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İ 1 MODÜL : WEB TASARIM. HTML 2.
BİLİŞİM TEKNOLOJİLERİ
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
BİLİŞİM TEKNOLOJİLERİ
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
İnternet Programcılığı I
İNTERNET PROGRAMCILIĞI 1
İNTERNET PROGRAMCILIĞI 1
WEB TASARIMI STİL ŞABLONLARI (CSS KULLANIMI) SAVAŞ TUNÇER.
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER
Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar
Web Kaynaklarının Değerlendirilmesi
Sunum transkripti:

HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html Editor: Notepad WebMatrix Dreamweaver Visual Studio Community Edition

Profesyonel Editor Avantajları Kodlama yaparken Auto-Complete özelli ğ i sa ğ lar. WebMatrix ücretsizdir

Neden Ana Sayfa İ smi İ ndex.html Olur?

İ lk Uygulama

Başlıklık Elementleri

Not: başlıklar birer bir standarttır. h1’den daha büyük yazı yazmak için stilleri kullanabiliriz. Sınır tam anlamıyla programcıya kalmıştır.

Metin Elementleri Yazıları ekranda farklı olarak göstermeyi sa ğ lar. Kendi fikir ve düşüncelerimizi en do ğ ru şekilde yansıtabilmesi için hepsi ayrı ayrı görevler almıştır. Pstrong Spanmark Divsmall Embr

Metin Elementleri

Yorum Ekleme - Comments Yorumlar, yazılan kodun daha kolay okunmasını sa ğ lamaktadır. Yorumlar tarayıcılar tarafından yok sayılır, yani yorumu dikkate almaz. Yorum etiketi " " karakterleri ile kapatılır ve yorumumuz bu etiket içine yazılır.

Kaynak Kodu / Source Code Sayfaların kodlarını / kayna ğ ını görebilmek için sayfa üzerindeyken sa ğ tıklayıp "Kayna ğ ı Göster" diyebilirsiniz.

Liste Elementleri Sıralı Liste(Ordered list) ol li 1,2,3,… a,b,c… A,B,C,… I,II,III,IV,…

Liste Elementleri Sırasız Liste(Unordered list) ul li Yuvarlak, kare,baklava,…

Liste Elementleri

Link Elementleri

Text-decoration: none = Linke tıklama işleminden sonra altı çizili özelli ğ ini kaldırır. Style ayarı yaptı ğ ımızdan, tagleri içersinde yer alır. Target: “_blank” = Linke tıkladı ğ ımızda sayfayı farklı bir sayfada açmamızı sa ğ lar.

Link ve Resim Elementleri

E ğ er resimleriniz web sayfanızın bulundu ğ u klasörden farklı bir yer de bulunuyor ve bulundu ğ u konum üst bir klasörde ise İ mg src=“../” şeklinde erişmemiz mümkündür

Link ve Resim Elementleri

Not: İ mage için anlatılan kurallar, linkler içinde geçerlidir. Hedef sayfaya erişim sa ğ larken a href=“../” mantı ğ ı ile yapılabilir. Uygulama: Resim için yaptı ğ ımız uygulamanın bir de ğ işi ğ ini sayfalar içinde yapınız.

Formlar ile Bilgi ve Giriş Input 1.Text 2.Password 3.Number 4.Tel 5. 6.url 7.Date 8.Time 9.Submit Textarea

Formlar ile Bilgi ve Giriş

autofocus="true" = Bu özellik sayfa ilk yüklendi ğ inde, klavyeden herhangi bir tuşa bastı ğ ımızda otomatik olarak yazılacak alanın belirlenmesinde kullanılır. Value=“” bütün type lar da kullanılır. Amaç yazılan kutuda sayfa ilk açıldı ğ ında varsayılan olarak istenilen de ğ erin gözükmesini sa ğ lar.

Combobox ile Seçim Select ◦ Option ◦ Optgroup ◦ Label ◦ Value ◦ selected

Combobox ile Seçim Çoktan Tek Seçmeli

Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli Checkbox ◦ İ d ◦ Name ◦ Checked Radio ◦ İ d ◦ name

Seçim Elementleri Çoktan çok veya Hepsi görünür seçmeli

Tarayıcılar, ekranda gördükleri yazı karakterlerini farklı yorumlayarak birbirlerinden farklı büyüklükte gösterebilir. E ğ er belli bir standart büyüklüklerinde ve bütün tarayıcıların aynı yorumu getirmesini istiyor isek, gibi taglerini kullanmamız gereklidir. checked : varsayılan olarak checkbox kutusunun seçili olarak gelmesini sa ğ lar

Video ve Ses Video ◦ Src ◦ Loop ◦ Autoplay ◦ Controls ◦ Poster Audio ◦ Src ◦ Loop ◦ controls

Video ve Ses

Video ve Ses Autoplay özelli ğ i kaldırması gerekiyor. Aksi halde ekledi ğ imiz resmi hızlı geçer ve bir anlamı kalmaz. Poster: Videoya ya poster eklememizi sa ğ lar Loop: Bu komut videonun sürekli olarak başa dönerek devam etmesini sa ğ lar

Video ve Ses

Etiketi Etiketi etiketi ile bir web sayfasını yada sitenin arama motorları için bilgilerin tanımlanmasını sa ğ ladı ğ ı gibi, içeri ğ in kodlama biçimini de tanımlar. 1- Arama motorlarına bilgi verme amacını taşır. 2- Bir web sayfasının içeri ğ ini temsil eden ve aralarına virgül konularak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamızı sa ğ lar.

CSS3(Cascading Style Sheets) Stil şablonları olarak tanımlanan bu kodlama tekni ğ i, HTML elementlerinin daha işlevsel özellikler kazanması için kullanılır. Tasarım tamamen CSS ile yapılmaktadır. CSS kuralı bir seçici ile bu seçicinin sınırlarını gösteren { } süslü parantezler arasındaki CSS özelliklerinin tümüne denir.

CSS3(Cascading Style Sheets) Body{ color:red } Bu kurala göre sayfanın yazı rengi kırmızı olacaktır. Sayfa düzeyind stil tanımı, sayfanın kısmında elementi bildirimi ile yapılır. elementi başlangıç ve bitiş etiketleri vardır ve kullanımı zorunludur.

CSS3(Cascading Style Sheets) Element Düzeyinde Stil Tanımı Style niteli ğ i alabilen her elementin bildirimi sırasında yapılabilir. metin

CSS3(Cascading Style Sheets) 1. Blok Düzeyi Elementleri Bloklar halinde alt alta gelecek bir biçimde görüntü oluşturur. Bu duruma blok denir., elementini bu duruma örnek verebiliriz. Marginleri vardır. Margin(Dış Boşluk) Blok düzeyi elementlerin bir ço ğ u kendisine atanan içeri ğ i görüntülerken bir dış boşluk bırakırlar.

CSS3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ ii kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

CSS3(Cascading Style Sheets) Kutu Modelini Anlamak Bir elementin kutu modelinde margin(dış boşluk), padding(iç boşluk) ve border (çerçeve kalınlı ğ ı) ile tanımlanmaktadır.

CSS3(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ i kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

CSS3(Cascading Style Sheets) Dahili CSS Uygulaması

CSS3(Cascading Style Sheets) Harici CSS Uygulaması

CSS3(Cascading Style Sheets) Stilin bütün taglara uygulandı ğ ını görebiliyoruz.

CSS3(Cascading Style Sheets) Class tanımlaması yaparak istedi ğ imiz tagların farklı stiller almasını sa ğ lamış olduk

CSS3(Cascading Style Sheets) İ d tanımlaması ile tekil olma özelli ğ i ile farklı stiller oluşturmak için kullanılır

CSS3(Cascading Style Sheets) Not: Klavye den CTRL+K+D tuşlarına basar isek, web matrix kodların düzenini yeniden ayarlayarak do ğ ru hale getirir.

CSS3(Cascading Style Sheets) Padding: ustten başlar saat yönünde de ğ erler gireriz. Text-shahow: gölge için kullanılır. İ lk de ğ er gölgenin soldan ne kadar uzakta oldu ğ u, ikincisi Üstten ne kadar uzakta oldu ğ u, üçüncüsü koyulu ğ u ve son olarak renk işlemi yapılır.

CSS3(Cascading Style Sheets)

Solid: düz çizgi sa ğ lar Dashed: Kenarları kesikli yapar Dotted: Kenarları noktalı yapar Padding: boşluk olmasını istemedi ğ imiz bölümlere 0px girmemiz gereklidir. border-radius de ğ eri yükseklik ve genişlik de ğ erinin tam yarısı ise, resim daire haline gelir.