HTML Nedir? HTML Ders Notları!!!

alpamis · 19-10-2006, 00:16

HTML (Hypertext Markup Language)

(Hareketli Metin İşaretleme Dili)

82 Tane Html komutu var; 180 Tane özellik var.

Her şeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (metin işaretleme) dilidir

yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar.

Ayrıca

gelişen browser teknolojileri sayesinde

HTML içine yazılar dışında resim

ses

video

Java

JavaScript

VBScript gibi dillerle yazılmış programlar

ya da diğer nesneler de gömülebilir. Bu sayede bir HTML dokümanı düzenlenmiş

mizanpajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin

browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa

HTML'le online bir gazete

bir slide-show

şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

<html>
<head>

Burada genelde doküman içeriği dışında kalan karakter set tanımlamaları

başlık

JavaScript tanımlamaları vb elemanlar bulunur...
<title> Başlık </title>
</head>
<body>

Burada ise dokümanın asıl içeriği vardır

içinde metin

ses

video vb içerebilir...
</body>
</html>

KLASÖR VE DOSYA İSİMLERİNDE

1) Türkçe karakter yok (ç

ğ

ö

ü

İ

ı

ş yerine c

g

o

u

i

s kullanılacak)

2) Büyük harf yok

3) 8 harfi geçmese daha iyi olur.

4) İlk giriş sayfasının adı index.html olmalı

HTML sayfaları hazırlarken NOTEPAD kullanacağız.

TAG (Etiket) : HTML dosyalarında normal metin ile Web tarayıcısına yollanacak olan özel komutları birbirinden ayırmak için kullanılan işaretler ve komut dizileridir. Normal metinden bu takıları ayırmak için “büyüktür” ve “küçüktür” işaretleri kullanılır.

Örn: <html>

</html>

STANDART TAKILAR

<html> è Tüm Html sayfaları <html> ile başlar </html> ile biter.

<title> è Sayfanın başlık kısmında çıkması istenen yazılar buraya yazılır.

<body> è Sayfa içinde çıkması istenen yazılar bu komut içine yazılır.

<html>

<title> Hasan Web Tasarımı Öğreniyor </title>

<body>

Hasan DURMAZ

<body>

</html>

<h1> BAŞLIKLAR

Yazıların Başlık şeklinde yazılması için kullanılır. 6 tane başlık çeşidi vardır.

<html>

<title> Başlıklar </tille>

<body>

<h1> Başlık 1 </h1>

<h2> Başlık 2 </h2>

<h3> Başlık 3 </h3>

<h4> Başlık 4 </h4>

<h5> Başlık 5 </h5>

<h6> Başlık 6 </h6>

</body>

</html>

BR ETİKETİ ( Alt satıra geçmeyi sağlar)

<html>

<title> BR Etiketi </title>

<body>

Pazartesi

Salı

Çarşamba

<br> Ocak <br> Şubat <br> Mart

</body>

</html>

HR ETİKETİ ( Çizgi çizer)

<html>

<title> HR Etiketi </title>

<body>

<hr>

<hr color=red> ( color è Renk verir)

<hr color=blue size=5> (size è Kalınlık verir)

<hr color=green width=500>

</body>

</html>

HR Etiketi’nin Parametreleri

<hr width=100> è Çizginin genişliğini ayarlamak için kullanılır.

<hr size=20> è Çizginin kalınlığını ayarlamak için kullanılır.

<hr color=ff0000> è Çizginin rengini ayarlamak için kullanılır.

<hr align=right>

left

center è Çizginin sayfadaki yatay konumunun sola

sağa veya ortaya hizalanmasını sağlar.

<marquee> KAYAN YAZI

<html>

<title> Kayan Yazı </title>

<body>

<marquee> <font color=red size=7> Kayıyorum He He He </font></marquee>

<marquee direction=right> Sağa Doğru Kaydırır </marquee>

<marquee direction=up> Yukarı Kaydırıır </marquee>

<marquee direction=down> Aşağı Kaydırır </marquee>

</body>

</html>

<marquee> Parametreleri

<marguee direction=right>

up

down è Sağdan

yukarıdan ve aşağıdan başlayarak kayması sağlanır

<marquee behavior=alternate> è Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider

<marquee bgcolor=ff00ff> è Kayan yazıların arka plan rengini belirler.

<marquee height=10 width=250> è Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir.

<marquee loop=3> è Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur.

<marquee scrolldelay=1> è Kaydırma hızını ayarlar. Hızlı kayması için küçük; yavaş için de büyük değer

RENK MODELLERİ

RGB (Red

Green

Blue) (Kırmızı

Yeşil

Mavi) è Doğada bütün renkler aslında bizim adına Kırmızı

Yeşil ve Mavi dediğimiz üç ana rengin karışımından meydana gelmişlerdir. Herhangi bir rengin oluşabilmesi için 0 ile 255 arasında bir oran kullanılmalıdır. Ancak bu sayıların mantıklı bir şekilde Web tarayıcısına yollanması gerekir. Bu renk kodlarını HTML dilinde kullanmak ve Web tarayıcısına yollamak için 16’lık (Hexadecimal) sayı sistemi kullanılmaktadır. İnternet’te yayınlanacak sayfalar için kullanılır.

Max : 72 dpi

Standart : 50 dpi

256*256*256 = 16.400.000 Renk

CMYK (Cyan

Magenta

Yellow

Black) è Baskıya gidecek işler için kullanılır.

Min :300 dpi

100*100*1000*100 = 100.000.000 Renk

ASCII (American Standart Computer İnformation İnfo)

0-255

@ à Alt + 64

m2 à Alt + 253

m3 à Alt + 252

Enter à Alt + 13

# à Alt + 35

A B C D E F

10 11 12 13 14 15

R G B

255 0 0

% 100 Kırmızı ( R ) à FF 00 00

% 100 Yeşil ( Y ) à 00 FF 00

% 100 Mavi ( B ) à 00 00 FF

Siyah à 00 00 00

Beyaz à FF FF FF

Sarı à FF FF 00

Mor à FF 00 FF

Gri à C0 C0 C0

Şimdi artık 65.536 karakteri destekleyen Unicode var.

<bgcolor> è Ekranın arka planının rengini belirlemek için kullanılır. <body> takısı ile birlikte kullanılır. Bu parametre ile renklerin ASCII karşılıkları (FF0000) kullanılabileceği gibi rengin ingilizcesi de (green

gray) kullanılabilir.

<html>

<title> Renk Modelleri </title>

<body bgcolor=FF0000>

</body>

</html>

<center> è Yazıyı satırda ortalar

<b> è Yazıyı Koyu

Kalın yapar.

<i> è Yazıyı İtalik

Eğik yapar.

<u> è Yazıyı Altı çizgili yapar.

Bu komutlardan son açılan ilk kapatılır. Yani sondan başa doğru kapatılır.

<font> è Yazının tipini ve boyutunu ayarlamamızı sağlar.

<font> Takısının Parametreleri
<font face=arial size=5 color=ff00ff >
<font face=arial> è Yazının tipini
<font size=5> è Yazının büyüklüğünü
<font color=ff00ff> è Yazının rengini belirler.

LİNK VERMEK

1-) Bir Web sitesine Link vermek

2-) Site içi Link vermek

3-) Mail adresine Link vermek

4-) Sayfa içine Link vermek

<html>

<title> Linkler </title>

<body>

<a href=http://www.bilgiegitim.com> Bilgi Eğitim </a> <br>

<a href=”kayan.html”> Kayan Yazı </a> <br>

<a href=mailto:durmazhasan@mynet.com> Mail Gönder </a>

</body>

</html>

<a href=http://www.bilgiegitim.com target=”_blank”> è Target parametresi ile açılacak sayfanın farklı bir sayfada açılması sağlanabilir.

Sayfa içine link vermek için de

1-) <a name=”1”> diye Link verilmek istenen alan isimlendirilir.

2-) Link verirken de <a href=”1”> 1 e Git </a>

kullanılır.

<body> Takısının Parametreleri

<body bgcolor=ffff00 background=deniz.jpg text=ffffff link=0000ff hlink=ff0000 vlink=ff00ff>

bgcolor è Arka plan rengini ayarlar.

Background è Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar.

Text è Metnin rengini belirler.

Link è Linklerin renklerini belirler.

Hlink è Fare imleci link’in üzerine geldiğinde link’in hangi renkte görüntüleneceğini belirler.

Vlink è Ziyaret edilen sayfaların linklerinin rengini belirler.

SAYFANIN TÜRKÇELEŞTİRİLMESİ

<head> è Sayfa hakkında bilgi içerir. Sayfada görüntülenmez.

<html>

<head>

<meta http-equiv=content-type content=text/html;charset=windows-1254>

<meta http-equiv=content-type content=text/html;charset=iso-8859-9>

<meta name=description content=”Bir cümle ile sitenin Tanmı”>

<meta name=keywords content= “Virgülle

ayrılmış

anahtar kelimeler”>

<title> Başlık </title>

</head>

<body>

</body>

</html>

RESİM EKLEMEK

Curdir è Current Directory

*.jpg

*.png

*.gif è İnternetteki Resim formatı olarak kullanılır.

*.bmp

*.tiff

*.eps

*.psd

*.cdr è Resim formatları da internette kullanılmaz.

JPG è Kalite önemli ise jpg formatı kullanılır. Fakat resimlerin arka kısmı kare şeklinde gelir.

GIF è Hareketli ve kenarları boş gelir. Yani kafa olduğu gibi gif formatında alınabilir.

Örn:

<html>

<head>

<meta http-equiv=content-type content=text/html;charset=windows-1254>

<meta http-equiv=content-type content=text/html;charset=iso-8859-9>

<meta name=description content=”Bir cümle ile sitenin Tanmı”>

<meta name=keywords content= “Virgülle

ayrılmış

anahtar kelimeler”>

<title> Resim Eklemek </title>

</head>

<body>

<img src=x.jpg>

<img src=x.jpg width=250 heigh=300>

<img src=bilgisayar.gif alt=”Güzel bir resim”>

<img src=bilgisayar.gif alt=”Güzel bir resim” width=450>

<a href=http://www.bilgiegitim.com><img src=bilgisayar.gif border=0 alt=”Güzel Bir Resim”> </a>

</body>

</html>

<img src=*.jpg>’nin Parametreleri

<img align=middle src= bilgisayar.jpg > è Yazı resmin ortasından hizalanarak yazılmaya başlar

<img align=top src =bilgisayar.gif > è Yazı resmin üstünden hizalanarak yazılmaya başlar

<img align=left src= bilgisayar.jpg> è Yazı resmin solundan yazılmaya başlar

<img align=right src= bilgisayar.jpg> è Yazı resmin sağından hizalanarak yazılmaya başlar

<img src= bilgisayar.gif alt=”???????? ?????” è Resmin üzerine gelince çıkması istenilen yazı

<img border=0 src=bilgisayar.gif> è Resmin etrafında çerçeve çıkmasını engeller.

TABLOLAR
<table>

<tr><td> </td></tr>

<tr><td> </td></tr>

Örnek:

<table border=1 width=500 height=300 bgcolor=green>

<tr><td>Hücre 1 </td><td>Hücre 2 </td></tr>

<tr><td>Hücre 3 </td><td> Hücre 4 </td></tr>

</table>

<tr> è Satır açar

<td> è Sütun açar

<table> Takısının Parametreleri

<table border=1> è Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

<table width=100> è Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.

<table height=50> è Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.

<table cellspacing=2> è Tablonun içerisindeki hücrelerin

birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.

<table cellpadding=5> è Hücrelerin içerisindeki metin

resim

v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.

<table bgcolor=ffff00> è Tablonun genel arka plan rengini belirlemek için kullanılır.

<table align=left> ; <table align=right>; <table align=center>è Tablonun konumunu ayarlamayı sağlar.

<table background=tugla.gif> è Tablonun arkasına resim konulabilir.

< table bgcolor=ffff00 > è Tablonun arka zemin rengini ayarlar.

<td> Takısının Parametreleri

Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa

sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td align=left> right; center è Hücrenin içerisinde yer alan metin

resim

grafik vs. gibi web sayfası öğelerini sola

sağa veya ortaya hizalayabiliriz.

<td bgcolor=00ffff> è Hücrenin arka plan rengini

diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.

<td width=250> è Hücre genişliğini belirlemek için kullanılır.

<td colspan=2> è Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.

<td rowspan=2> è Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.

<td background=hasan.gif> è Hücrenin arka planına bir resim yerleştirir.

Örnek:

<table bordercolor=lightblue cellspacing=4 width=500>

<tr><td> A </td><td> B </td><td> C </td></tr>

<tr><td> D </td><td> E </td><td> F </td></tr>

<tr><td> G </td><td> H </td><td> I </td></tr>

</table>

è Rowspan è Colspan

<body>

<table border=1>

<tr><td>A</td><td>B</td><td rowspan=2>C</td></tr>

<tr><td>D</td><td>E</td></tr>

<tr><td colspan=3>F</td></tr>

A
B
C

D
E

F

colspan è Sütun Birleştir

rowspan è Satır Birleştirir

MÜZİK EKLEMEK
İnternette kullanılacak müzik dosyalarının türü MIDI veya WAV olmalıdır. Wav dosyaların boyutları büyüktür ve zor yüklenir. Onun için arka plan sesi kullanırken daha çok MIDI uzantılı dosyalar tercih edilirse daha iyi olur.

<bgsound src=daglar.mid loop=-1> loop=-1 è Sürekli çalması için

</head>

Film yayınlamak için Microsoft Windows Encoder kullanılır. Avi ve dat dosyaları wmv’ye çeviririz.

<bgsound src=daglar.mid> Komutu ile sayfa yüklendiğinde sürekli müzik çalar. Fakat müziğe müdahale edemeyiz.

Müziği durdurmak

tekrar başlatmak veya film koymak için

<body>

<embed src=donence.mid> è Ayarlanabilir müzik için kullanılır.

<embed src=donence.wmv> è Film için kullanılır.

ISP DNS SERVER
Server

PERL

ASP

PHP

JSP

CFM

IIS ( Microsoft)

Apache ( Linux

Unix)

CGI ( Common Gateaway Interface )

JSP’nin Server’i TOMCAT’dir.

FORM ELEMANLARI

<form action=verial.asp method=post name=form1>

verial.php

verial.jsp

verial.pl

verial.cfm de olabilir.

POST

1-)Yavaş

2-) Güvenli

3-) http header’ı kullanır.

4-) Sınırsız bilgi gönderir

GET

1-) Hızlı

2-) Güvensiz

3-) Browser’in adres satırını kullanır.

4-) Max 2048 karekter gönderebilir.

<form action=verial.asp method=post name=form1>

Adınız è Text (255 Karaktere kadar)

*******

Şifreniz è Password

Cinsiyetiniz

Bay
Bayan è Radio

Hobileriniz

q Sinema

q Müzik

q Tv è Chechbox

Mesajınız

è Textarea

Reset

Submit

ÖRNEK 1:

<form action=verial.asp method=post name=form1>

Adınızı Giriniz <input type=text name=ad> <br>

Şifrenizi Giriniz<input type=password name=sifre><br>

Cinsiyetiniz <input type=radio name=cinsiyet value=bay> BAY <br>

<input type=radio name=cinsiyet value=bayan> BAYAN <br>

Hobileriniz <input type=checkbox name=hobi1> Sinema

<input type=checkbox name=hobi2> Bilgisayar

<input type=checkbox name=hobi3> Müzik

<input type=checkbox name=hobi4> Spor <br>

Mesajınız <br>

<textarea cols=35 rows=10></textarea><br>

Doğum Tarihiniz

<select name=gun>

<option> 01 </option>

<option> 02 </option>

<option> 03 </option>

<option> 04 </option>

<option> 05 </option>

<option> 06 </option>

<option> 31 </option>

</select>

<select name=ay>

<option> OCAK </option>

<option> ŞUBAT</option>

<option> ARALIK </option>

</select>

<select name=ay>

<option> OCAK </option>

<option> ŞUBAT</option>

<option> ARALIK </option>

</select>

<select name=yil>

<option> 1971 </option>

<option> 1972 </option>

<option> 2002 </option>

</select>

<input type=submit value=Gönder>

<input type=reset value=Sil>

</form>

ÖRNEK 2:

<body>

<form method=post action=x.asp>

Adınız <input type=text name=ad><br>

Şifreniz <input type=password name=sifre><br>

Eğitim Durumunuz <select name=egitim>

<option> Lise </option>

<option> Üniversite </option>

<option> Ortaokul </option>

<option> İlkoukul </option>

</select><br>

<input type=submit value=Gönder>

<input type=reset value=sil>

</form>

FRAME

Frame çerçeve anlamına gelir. Amacı bir web sayfasını belli parçalara bölmek ve bu parçaların içerisinde değişik

birden fazla Web sayfası görüntülemektir.

Frame

Frame

Frame

sol.html

sag.html

Þ frameset Þ frame.html

İki Sayfa aç

1-) Birine “burası sag sayfa yaz” sag.html olarak kaydet

2-) “Burası sol taraf” yaz sol.html olarak kaydet.

3-) Frame için anasayfada (frame.html )

<head>

<frameset cols=150

* border=0>

<frame src=sol.html>

<frame src=sag.html name=ana>

</frameset>

Sol.html’yi açıp (frame.html )

<body>

<a href=http://www.yahoo.com> Yahoo </a><br>

<a href=kayan.html target=ana> Kayan Yazı </a><br>

<a href=form2.html target=ana> Form Elemanları </a><br>

<a href=sag.html target=ana> Ana Sayfaya Dön </a>

Sayfaların sag tarafta açılması için frame sayfasında sag.html için isim verilir ve bu isim linklerden sonra

<a href=kayan.html target=ana> şeklinde belirtilir.

Ust.html

Alt.html

ÞFrame.html

ust.html

<body>

<a href=http://www.turkcell.com.tr target=ana> Turkcell </a>

<a href=http://www.telsim.com.tr target=ana> Telsim </a>

<a href=http://www.aria.com.tr target=ana> Aria </a>

frame.html

<head>

<frameset rows=100

* border=0>

<frame src=ust.html>

<frame src=alt name=ana>

</frameset>

<frameset> Takısının Parametreleri

<frameset border=0> è Çerçeveleri birbirinden ayıran çizgilerin kalınlığını belirler.

<p> Þ Paragraf satır sonu olunca kendi alta geçiyor

<p>’nin Parametreleri

<p align=left> è Paragrafı sola hizalar. (Parametre kullanılmasa da paragraf sola hizalanmış olur.)

<p align=right> è Paragrafı sağa hizalar.

<p align=center> è Paragrafı ortalar

&nbsp (Birden fazla Boşluk vermek) è Bir karakterden daha fazla boşluk vermek için kullanılır.

Örn: ahmet   nbsp; mehmet è ahmet mehmet şeklinde 3 karakter araya boşluk bırakır.

<nobr></nobr> è Hiçbir zaman yeni satıra geçmiyor.

<sup> </sup> è Üst simge işareti çıkartır. Örn: m² gibi

<sub> </sub> è Alt simge işareti çıkartır. Örn: O2

<p> </p> è Yeni bir paragraf açıp kapatırken kullanılır.

<pre> </pre> è Önceden düzenlenmiş metin blokları için kullanılır.

<strike> </strike> è Üzeri çizili yazı oluşturmak için kullanılır. Örn: İptal edildi.

<adress> </adress> è Adres bölümleri için kullanılır. Genelde italik olarak render edilir.

èHTML açıklamalrı  ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir

LİSTELER

Orderlist ( Sıralı Liste ); Unorderlist ( sırasız liste )

Madde imi ve numaralandırma

<ol> <ul>

1. a. İ. ð

2. b. İi. ·

3. c. İi *

Örn:

<ol type=1>

<li> Fizik

<ol type=a>

<li> Statik

<li> Dinamik

<li> Nükleer

<li> Katıhal

</ol>

<li> Kimya

<ol type=a>

<li> Organik

<li> İnorganik

</ol>

<li> Matematik

<ol type=a>

<li> Sayılar

<li> Fonksiyonlar

<li> Diğer

<ol type=i>

<li> Türev

<li> İntegral

</ol>

</ol>

</ol>

Görünümü Bu Şekilde

Fizik
Statik
Dinamik
Nükleer
Katıhal
Kimya
Organik
İnorganik

Matematik
Sayılar
Fonksiyonlar
Diğer
I. Türev

II. İntegral

Madde işaretleri için ol yerlerine ul yazılır.

<li type=disc> è İçi Dolu daire

<li type=circle> è İçi boş daire

<li type=square> è İçi Dolu Kare

<ul type=disc>

<li> Fizik

<ul type=square> Yani a yerine square yaz.

i yerine de <ul type=circle> yazılır.

SCRİPTLER

Bir olay bir etkileşim varsa javascript’dir

Sagmouse.html

<head>

<scrpit language=javascript>

function sagmouse() {

if (event.button= =2) {

alert(“Kodlarımı Göstermem”)

alert(“Kod Çalmak Yasak”)

alert(“Yapma Dedim!”)

}

}

document.onmousedown=sagmouse

</script>

alper-fx · 25-10-2006, 02:19

çok teşekkur ederim paylaşım için

alper-fx · 25-10-2006, 02:25

bana bazı konularda yardım<marquee> <font color=red size=7> alper-fx alper-fx alper-fx </font></marquee>cı olursan sevınırım.muzık yuklemeyı bırazdaha acabılırsen sevınırım

alper-fx · 25-10-2006, 02:35

pekı örnehin kayanyazı upload mı yapmakgerekır
gerekıyor

~~azatbaba~~ · 26-10-2006, 09:11

paylaşımın için teşekkürler...

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevap	Son Mesaj
html kotları 100 lerce html kodu bir arada buyrun burdan	Umßrella	Programlama	1	07-02-2008 10:21
HTML Nedir ?(Açıklamalı Anlatım Web Dizayn)	cihan.beyoglu	Program Anlatım	11	02-02-2007 22:00
html rgb to hex color and hexcolor to html rgb color	alpamis	Delphi	0	18-10-2006 23:41

19-10-2006, 00:16	#1 (permalink)
alpamis	HTML Nedir? HTML Ders Notları!!! HTML (Hypertext Markup Language) (Hareketli Metin İşaretleme Dili) 82 Tane Html komutu var; 180 Tane özellik var. Her şeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (metin işaretleme) dilidir yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar. Ayrıca gelişen browser teknolojileri sayesinde HTML içine yazılar dışında resim ses video Java JavaScript VBScript gibi dillerle yazılmış programlar ya da diğer nesneler de gömülebilir. Bu sayede bir HTML dokümanı düzenlenmiş mizanpajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa HTML'le online bir gazete bir slide-show şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz. <html> <head> <!-- Head elemanları --> Burada genelde doküman içeriği dışında kalan karakter set tanımlamaları başlık JavaScript tanımlamaları vb elemanlar bulunur... <title> Başlık </title> </head> <body> <!-- Body elemanları --> Burada ise dokümanın asıl içeriği vardır içinde metin ses video vb içerebilir... </body> </html> KLASÖR VE DOSYA İSİMLERİNDE 1) Türkçe karakter yok (çğöüİış yerine cgouis kullanılacak) 2) Büyük harf yok 3) 8 harfi geçmese daha iyi olur. 4) İlk giriş sayfasının adı index.html olmalı HTML sayfaları hazırlarken NOTEPAD kullanacağız. TAG (Etiket) : HTML dosyalarında normal metin ile Web tarayıcısına yollanacak olan özel komutları birbirinden ayırmak için kullanılan işaretler ve komut dizileridir. Normal metinden bu takıları ayırmak için “büyüktür” ve “küçüktür” işaretleri kullanılır. Örn: <html> </html> STANDART TAKILAR <html> è Tüm Html sayfaları <html> ile başlar </html> ile biter. <title> è Sayfanın başlık kısmında çıkması istenen yazılar buraya yazılır. <body> è Sayfa içinde çıkması istenen yazılar bu komut içine yazılır. <html> <title> Hasan Web Tasarımı Öğreniyor </title> <body> Hasan DURMAZ <body> </html> <h1> BAŞLIKLAR Yazıların Başlık şeklinde yazılması için kullanılır. 6 tane başlık çeşidi vardır. <html> <title> Başlıklar </tille> <body> <h1> Başlık 1 </h1> <h2> Başlık 2 </h2> <h3> Başlık 3 </h3> <h4> Başlık 4 </h4> <h5> Başlık 5 </h5> <h6> Başlık 6 </h6> </body> </html> BR ETİKETİ ( Alt satıra geçmeyi sağlar) <html> <title> BR Etiketi </title> <body> Pazartesi Salı Çarşamba <br> Ocak <br> Şubat <br> Mart </body> </html> HR ETİKETİ ( Çizgi çizer) <html> <title> HR Etiketi </title> <body> <hr> <hr color=red> ( color è Renk verir) <hr color=blue size=5> (size è Kalınlık verir) <hr color=green width=500> </body> </html> HR Etiketi’nin Parametreleri <hr width=100> è Çizginin genişliğini ayarlamak için kullanılır. <hr size=20> è Çizginin kalınlığını ayarlamak için kullanılır. <hr color=ff0000> è Çizginin rengini ayarlamak için kullanılır. <hr align=right> left center è Çizginin sayfadaki yatay konumunun sola sağa veya ortaya hizalanmasını sağlar. <marquee> KAYAN YAZI <html> <title> Kayan Yazı </title> <body> <marquee> <font color=red size=7> Kayıyorum He He He </font></marquee> <marquee direction=right> Sağa Doğru Kaydırır </marquee> <marquee direction=up> Yukarı Kaydırıır </marquee> <marquee direction=down> Aşağı Kaydırır </marquee> </body> </html> <marquee> Parametreleri <marguee direction=right>updown è Sağdan yukarıdan ve aşağıdan başlayarak kayması sağlanır <marquee behavior=alternate> è Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider <marquee bgcolor=ff00ff> è Kayan yazıların arka plan rengini belirler. <marquee height=10 width=250> è Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir. <marquee loop=3> è Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur. <marquee scrolldelay=1> è Kaydırma hızını ayarlar. Hızlı kayması için küçük; yavaş için de büyük değer RENK MODELLERİ RGB (Red Green Blue) (Kırmızı Yeşil Mavi) è Doğada bütün renkler aslında bizim adına Kırmızı Yeşil ve Mavi dediğimiz üç ana rengin karışımından meydana gelmişlerdir. Herhangi bir rengin oluşabilmesi için 0 ile 255 arasında bir oran kullanılmalıdır. Ancak bu sayıların mantıklı bir şekilde Web tarayıcısına yollanması gerekir. Bu renk kodlarını HTML dilinde kullanmak ve Web tarayıcısına yollamak için 16’lık (Hexadecimal) sayı sistemi kullanılmaktadır. İnternet’te yayınlanacak sayfalar için kullanılır. Max : 72 dpi Standart : 50 dpi 256256256 = 16.400.000 Renk CMYK (Cyan Magenta Yellow Black) è Baskıya gidecek işler için kullanılır. Min :300 dpi 1001001000100 = 100.000.000 Renk ASCII (American Standart Computer İnformation İnfo)* 0-255 @ à Alt + 64 m2 à Alt + 253 m3 à Alt + 252 Enter à Alt + 13 # à Alt + 35 A B C D E F 10 11 12 13 14 15 R G B 255 0 0 % 100 Kırmızı ( R ) à FF 00 00 % 100 Yeşil ( Y ) à 00 FF 00 % 100 Mavi ( B ) à 00 00 FF Siyah à 00 00 00 Beyaz à FF FF FF Sarı à FF FF 00 Mor à FF 00 FF Gri à C0 C0 C0 Şimdi artık 65.536 karakteri destekleyen Unicode var. <bgcolor> è Ekranın arka planının rengini belirlemek için kullanılır. <body> takısı ile birlikte kullanılır. Bu parametre ile renklerin ASCII karşılıkları (FF0000) kullanılabileceği gibi rengin ingilizcesi de (green gray) kullanılabilir. <html> <title> Renk Modelleri </title> <body bgcolor=FF0000> </body> </html> <center> è Yazıyı satırda ortalar <b> è Yazıyı Koyu Kalın yapar. <i> è Yazıyı İtalik Eğik yapar. <u> è Yazıyı Altı çizgili yapar. Bu komutlardan son açılan ilk kapatılır. Yani sondan başa doğru kapatılır. <font> è Yazının tipini ve boyutunu ayarlamamızı sağlar. <font> Takısının Parametreleri <font face=arial size=5 color=ff00ff > <font face=arial> è Yazının tipini <font size=5> è Yazının büyüklüğünü <font color=ff00ff> è Yazının rengini belirler. LİNK VERMEK 1-) Bir Web sitesine Link vermek 2-) Site içi Link vermek 3-) Mail adresine Link vermek 4-) Sayfa içine Link vermek <html> <title> Linkler </title> <body> <a href=http://www.bilgiegitim.com> Bilgi Eğitim </a> <br> <a href=”kayan.html”> Kayan Yazı </a> <br> <a href=mailto:durmazhasan@mynet.com> Mail Gönder </a> </body> </html> <a href=http://www.bilgiegitim.com target=”_blank”> è Target parametresi ile açılacak sayfanın farklı bir sayfada açılması sağlanabilir. Sayfa içine link vermek için de 1-) <a name=”1”> diye Link verilmek istenen alan isimlendirilir. 2-) Link verirken de <a href=”1”> 1 e Git </a> kullanılır. <body> Takısının Parametreleri <body bgcolor=ffff00 background=deniz.jpg text=ffffff link=0000ff hlink=ff0000 vlink=ff00ff> bgcolor è Arka plan rengini ayarlar. Background è Arka plana bir resmin duvar kağıdı olarak döşenmesini sağlar. Text è Metnin rengini belirler. Link è Linklerin renklerini belirler. Hlink è Fare imleci link’in üzerine geldiğinde link’in hangi renkte görüntüleneceğini belirler. Vlink è Ziyaret edilen sayfaların linklerinin rengini belirler. SAYFANIN TÜRKÇELEŞTİRİLMESİ <head> è Sayfa hakkında bilgi içerir. Sayfada görüntülenmez. <html> <head> <meta http-equiv=content-type content=text/html;charset=windows-1254> <meta http-equiv=content-type content=text/html;charset=iso-8859-9> <meta name=description content=”Bir cümle ile sitenin Tanmı”> <meta name=keywords content= “Virgülle ayrılmış anahtar kelimeler”> <title> Başlık </title> </head> <body> </body> </html> RESİM EKLEMEK Curdir è Current Directory .jpg .png .gif è İnternetteki Resim formatı olarak kullanılır. .bmp .tiff .eps .psd .cdr è Resim formatları da internette kullanılmaz. JPG è Kalite önemli ise jpg formatı kullanılır. Fakat resimlerin arka kısmı kare şeklinde gelir. GIF è Hareketli ve kenarları boş gelir. Yani kafa olduğu gibi gif formatında alınabilir. Örn: <html> <head> <meta http-equiv=content-type content=text/html;charset=windows-1254> <meta http-equiv=content-type content=text/html;charset=iso-8859-9> <meta name=description content=”Bir cümle ile sitenin Tanmı”> <meta name=keywords content= “Virgülle ayrılmış anahtar kelimeler”> <title> Resim Eklemek </title> </head> <body> <img src=x.jpg> <img src=x.jpg width=250 heigh=300> <img src=bilgisayar.gif alt=”Güzel bir resim”> <img src=bilgisayar.gif alt=”Güzel bir resim” width=450> <a href=http://www.bilgiegitim.com><img src=bilgisayar.gif border=0 alt=”Güzel Bir Resim”> </a> </body> </html> <img src=.jpg>’nin Parametreleri <img align=middle src= bilgisayar.jpg > è Yazı resmin ortasından hizalanarak yazılmaya başlar <img align=top src =bilgisayar.gif > è Yazı resmin üstünden hizalanarak yazılmaya başlar <img align=left src= bilgisayar.jpg> è Yazı resmin solundan yazılmaya başlar <img align=right src= bilgisayar.jpg> è Yazı resmin sağından hizalanarak yazılmaya başlar <img src= bilgisayar.gif alt=”???????? ?????” è Resmin üzerine gelince çıkması istenilen yazı <img border=0 src=bilgisayar.gif> è Resmin etrafında çerçeve çıkmasını engeller. TABLOLAR <table> <tr><td> </td></tr> <tr><td> </td></tr> Örnek: <table border=1 width=500 height=300 bgcolor=green> <tr><td>Hücre 1 </td><td>Hücre 2 </td></tr> <tr><td>Hücre 3 </td><td> Hücre 4 </td></tr> </table> <tr> è Satır açar <td> è Sütun açar <table> Takısının Parametreleri <table border=1> è Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. <table width=100> è Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır. <table height=50> è Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır. <table cellspacing=2> è Tablonun içerisindeki hücrelerin birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır. <table cellpadding=5> è Hücrelerin içerisindeki metin resim v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır. <table bgcolor=ffff00> è Tablonun genel arka plan rengini belirlemek için kullanılır. <table align=left> ; <table align=right>; <table align=center>è Tablonun konumunu ayarlamayı sağlar. <table background=tugla.gif> è Tablonun arkasına resim konulabilir. < table bgcolor=ffff00 > è Tablonun arka zemin rengini ayarlar. <td> Takısının Parametreleri Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz. <td align=left> right; center è Hücrenin içerisinde yer alan metin resim grafik vs. gibi web sayfası öğelerini sola sağa veya ortaya hizalayabiliriz. <td bgcolor=00ffff> è Hücrenin arka plan rengini diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir. <td width=250> è Hücre genişliğini belirlemek için kullanılır. <td colspan=2> è Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir. <td rowspan=2> è Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir. <td background=hasan.gif> è Hücrenin arka planına bir resim yerleştirir. Örnek: <table bordercolor=lightblue cellspacing=4 width=500> <tr><td> A </td><td> B </td><td> C </td></tr> <tr><td> D </td><td> E </td><td> F </td></tr> <tr><td> G </td><td> H </td><td> I </td></tr> </table> è Rowspan è Colspan <body> <table border=1> <tr><td>A</td><td>B</td><td rowspan=2>C</td></tr> <tr><td>D</td><td>E</td></tr> <tr><td colspan=3>F</td></tr> A B C D E F colspan è Sütun Birleştir rowspan è Satır Birleştirir MÜZİK EKLEMEK* İnternette kullanılacak müzik dosyalarının türü MIDI veya WAV olmalıdır. Wav dosyaların boyutları büyüktür ve zor yüklenir. Onun için arka plan sesi kullanırken daha çok MIDI uzantılı dosyalar tercih edilirse daha iyi olur. <bgsound src=daglar.mid loop=-1> loop=-1 è Sürekli çalması için </head> Film yayınlamak için Microsoft Windows Encoder kullanılır. Avi ve dat dosyaları wmv’ye çeviririz. <bgsound src=daglar.mid> Komutu ile sayfa yüklendiğinde sürekli müzik çalar. Fakat müziğe müdahale edemeyiz. Müziği durdurmak tekrar başlatmak veya film koymak için <body> <embed src=donence.mid> è Ayarlanabilir müzik için kullanılır. <embed src=donence.wmv> è Film için kullanılır. ISP DNS SERVER Server PERL ASP PHP JSP CFM IIS ( Microsoft) Apache ( Linux Unix) CGI ( Common Gateaway Interface ) JSP’nin Server’i TOMCAT’dir. FORM ELEMANLARI <form action=verial.asp method=post name=form1> verial.php verial.jsp verial.pl verial.cfm de olabilir. POST 1-)Yavaş 2-) Güvenli 3-) http header’ı kullanır. 4-) Sınırsız bilgi gönderir GET 1-) Hızlı 2-) Güvensiz 3-) Browser’in adres satırını kullanır. 4-) Max 2048 karekter gönderebilir. <form action=verial.asp method=post name=form1> Adınız è Text (255 Karaktere kadar) ***** Şifreniz è Password Cinsiyetiniz Bay Bayan è Radio Hobileriniz q Sinema q Müzik q Tv è Chechbox Mesajınız è Textarea Reset Submit ÖRNEK 1: <form action=verial.asp method=post name=form1> Adınızı Giriniz <input type=text name=ad> <br> Şifrenizi Giriniz<input type=password name=sifre><br> Cinsiyetiniz <input type=radio name=cinsiyet value=bay> BAY <br> <input type=radio name=cinsiyet value=bayan> BAYAN <br> Hobileriniz <input type=checkbox name=hobi1> Sinema <input type=checkbox name=hobi2> Bilgisayar <input type=checkbox name=hobi3> Müzik <input type=checkbox name=hobi4> Spor <br> Mesajınız <br> <textarea cols=35 rows=10></textarea><br> Doğum Tarihiniz <select name=gun> <option> 01 </option> <option> 02 </option> <option> 03 </option> <option> 04 </option> <option> 05 </option> <option> 06 </option> <option> 31 </option> </select> <select name=ay> <option> OCAK </option> <option> ŞUBAT</option> <option> ARALIK </option> </select> <select name=ay> <option> OCAK </option> <option> ŞUBAT</option> <option> ARALIK </option> </select> <select name=yil> <option> 1971 </option> <option> 1972 </option> <option> 2002 </option> </select> <input type=submit value=Gönder> <input type=reset value=Sil> </form> ÖRNEK 2: <body> <form method=post action=x.asp> Adınız <input type=text name=ad><br> Şifreniz <input type=password name=sifre><br> Eğitim Durumunuz <select name=egitim> <option> Lise </option> <option> Üniversite </option> <option> Ortaokul </option> <option> İlkoukul </option> </select><br> <input type=submit value=Gönder> <input type=reset value=sil> </form> FRAME** Frame çerçeve anlamına gelir. Amacı bir web sayfasını belli parçalara bölmek ve bu parçaların içerisinde değişik birden fazla Web sayfası görüntülemektir. Frame Frame Frame sol.html sag.html Þ frameset Þ frame.html İki Sayfa aç 1-) Birine “burası sag sayfa yaz” sag.html olarak kaydet 2-) “Burası sol taraf” yaz sol.html olarak kaydet. 3-) Frame için anasayfada (frame.html ) <head> <frameset cols=150* border=0> <frame src=sol.html> <frame src=sag.html name=ana> </frameset> Sol.html’yi açıp (frame.html ) <body> <a href=http://www.yahoo.com> Yahoo </a><br> <a href=kayan.html target=ana> Kayan Yazı </a><br> <a href=form2.html target=ana> Form Elemanları </a><br> <a href=sag.html target=ana> Ana Sayfaya Dön </a> Sayfaların sag tarafta açılması için frame sayfasında sag.html için isim verilir ve bu isim linklerden sonra <a href=kayan.html target=ana> şeklinde belirtilir. Ust.html Alt.html ÞFrame.html ust.html <body> <a href=http://www.turkcell.com.tr target=ana> Turkcell </a> <a href=http://www.telsim.com.tr target=ana> Telsim </a> <a href=http://www.aria.com.tr target=ana> Aria </a> frame.html <head> <frameset rows=100* border=0> <frame src=ust.html> <frame src=alt name=ana> </frameset> <frameset> Takısının Parametreleri <frameset border=0> è Çerçeveleri birbirinden ayıran çizgilerin kalınlığını belirler. <p> Þ Paragraf satır sonu olunca kendi alta geçiyor <p>’nin Parametreleri <p align=left> è Paragrafı sola hizalar. (Parametre kullanılmasa da paragraf sola hizalanmış olur.) <p align=right> è Paragrafı sağa hizalar. <p align=center> è Paragrafı ortalar &nbsp (Birden fazla Boşluk vermek) è Bir karakterden daha fazla boşluk vermek için kullanılır. Örn: ahmet   nbsp; mehmet è ahmet mehmet şeklinde 3 karakter araya boşluk bırakır. <nobr></nobr> è Hiçbir zaman yeni satıra geçmiyor. <sup> </sup> è Üst simge işareti çıkartır. Örn: m² gibi <sub> </sub> è Alt simge işareti çıkartır. Örn: O2 <p> </p> è Yeni bir paragraf açıp kapatırken kullanılır. <pre> </pre> è Önceden düzenlenmiş metin blokları için kullanılır. <strike> </strike> è Üzeri çizili yazı oluşturmak için kullanılır. Örn: İptal edildi. <adress> </adress> è Adres bölümleri için kullanılır. Genelde italik olarak render edilir. <!-- -->èHTML açıklamalrı <!-- ile başlar ve --> ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir LİSTELER Orderlist ( Sıralı Liste ); Unorderlist ( sırasız liste ) Madde imi ve numaralandırma <ol> <ul> 1. a. İ. ð 2. b. İi. · 3. c. İi * Örn: <ol type=1> <li> Fizik <ol type=a> <li> Statik <li> Dinamik <li> Nükleer <li> Katıhal </ol> <li> Kimya <ol type=a> <li> Organik <li> İnorganik </ol> <li> Matematik <ol type=a> <li> Sayılar <li> Fonksiyonlar <li> Diğer <ol type=i> <li> Türev <li> İntegral </ol> </ol> </ol> Görünümü Bu Şekilde Fizik Statik Dinamik Nükleer Katıhal Kimya Organik İnorganik Matematik Sayılar Fonksiyonlar Diğer I. Türev II. İntegral Madde işaretleri için ol yerlerine ul yazılır. <li type=disc> è İçi Dolu daire <li type=circle> è İçi boş daire <li type=square> è İçi Dolu Kare <ul type=disc> <li> Fizik <ul type=square> Yani a yerine square yaz. i yerine de <ul type=circle> yazılır. SCRİPTLER Bir olay bir etkileşim varsa javascript’dir Sagmouse.html <head> <scrpit language=javascript> function sagmouse() { if (event.button= =2) { alert(“Kodlarımı Göstermem”) alert(“Kod Çalmak Yasak”) alert(“Yapma Dedim!”) } } document.onmousedown=sagmouse </script>

25-10-2006, 02:19	#2 (permalink)
alper-fx	çok teşekkur ederim paylaşım için

25-10-2006, 02:25	#3 (permalink)
alper-fx	bana bazı konularda yardım<marquee> <font color=red size=7> alper-fx alper-fx alper-fx </font></marquee>cı olursan sevınırım.muzık yuklemeyı bırazdaha acabılırsen sevınırım

25-10-2006, 02:35	#4 (permalink)
alper-fx	pekı örnehin kayanyazı upload mı yapmakgerekır gerekıyor

26-10-2006, 09:11	#5 (permalink)
~~azatbaba~~	paylaşımın için teşekkürler...

Konu araçları
Yazıcıdaki Görüntüsünü Göster Sayfayı Maille Gönder