HTML ve CSS Görsel Anlatım Ders 1: HTML

Hybris · 5 Nis 2012

Selamun Aleykum arkadaslar. Bu konumda size HTML ve CSS anlatmaya calisicam. Surekli guncel dersler gelicektir. Ilk konumuza gecelim.

Bölüm :
HTML (HyperText Markup
Language)

Konu :
HTML Nedir?

HTML (HyperText Markup Language)

HTML, etiket (tag) adı verilen yapılardan oluşan, metin tabanlı bir işaretleme dilidir. HTML ile sayfada y
alacak içeriklerin (yazılar, resimler, animasyonlar, form bileşenleri), sayfanın neresinde, nasıl ve ne şekild
gösterileceği belirlenir. HTML dili, Internet Explorer veya diğer tarayıcılar (browser) tarafından yorumlanar
görsel bir içerik şeklinde sunulur. Tarayıcıların yaptığı işlem, sayfa içerisindeki bileşenleri alarak, HTML içerisind
tanımlandığı şekilde görüntülenmesini sağlamaktır.

Microsoft Expression Web Designer ve Dreamweaver gibi web sayfası editörleri kullanılarak HTML kod
yazmadan web sitesi oluşturabilmek mümkündür. Çünkü bu editörler, bir arayüzden tasarım yapma imkâ
verirler. Bu araçlar sayesinde HTML kodları arka planda otomatik olarak oluşturulur.

HTMLin bazı önemli özelliklerini şöyle sıralayabiliriz:

* HTML, Notepad gibi basit bir metin editörü ile yazılabilecek bir dildir. Yazılan kodlar, uzantısı .htm
da .html olan bir dosya olarak kaydedilirse, bu dosya bir tarayıcı tarafından görüntülenebilir. HTM
dosyaları herhangi bir derleyiciye (compiler) ihtiyaç duymaz. Web sunucusu gelen HTML iste
doğrudan cevapladığı için derleme yapılmaz ve tarayıcıda sadece HTML kodlarının çözümlenme
(parse) yeterli olur.

*HTML hatalara karşı dirençsiz bir dildir. HTMLde yazılmış bir sayfa, tamamen hatalarla dolu olsa bi
tarayıcı yorumlayabileceği kısmı görüntüler. Bu da sayfaların istenilmeyen bir şekild
görüntülenmesine sebep olabilir.

*HTML iç içe yer alan etiketlerden oluşur. Bir sayfanın düzgün görüntülenebilmesi için açılan h
etiketin kapatılması ve etiketlerin aralarındaki hiyerarşiye uygun bir şekilde yazılması gereklidir. B
etiketi başlatmak için <etiket_adi> ifadesi yazılır, o etiketi bitirmek için ise </etiket_adi> ifadesi yazıl
Böylece iki ifade arasındaki kısım o etiketin etki alanı içerisindedir. Etiketlerin birçoğunda üst elemen
alt element (parent-child) ilişkisi bulunmaktadır ve alt elementlerin üst elementler içerisinde y
alması gerekmektedir.

* Bir HTML dosyası <html> etiketi ile başlayıp </html> etiketi ile kapatılmalıdır.

Aşağıda, HTML ile yazılmış basit bir web sayfası bulunmaktadır.

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>HTML İçeriği...</h1>
</body>
</html>

Yukarıdaki kodlar, Notepad gibi bir metin editöründe yazılarak, uzantısı htm veya html olacak şekilde
kaydedilip, bir tarayıcıda çalıştırıldığında aşağıdaki gibi bir sonuç elde edilir. Buradaki <h1> elementi yazının
birinci başlık sitilinde olacağını belirlemektedir.

Bir HTML dosyasının, standart olarak <html> etiketi ile başlayıp </html> etiketi ile bitmesi gerekir.
<html> etiketinin içerisinde iki ana kısım bulunur.

Bunlar <head> ve <body> kısımlarıdır. Bir web sayfası ile ilgili tanımlamalar, JavaScript ve CSS gibi HTML
dışında yazılacak kod kısımları, <head> ve </head> ifadeleri arasında yer almalıdır.

<body> ise bir web sayfasının gövde kısmını oluşturur. Body kısmında web sayfasının bileşenleri (yazılar,
resimler vs.) bulunmaktadır. İçerik istenilen şekilde düzenlendikten sonra </body> ifadesi ile daha önce açılmış
olan <body> etiketi kapatılır.

<html>
<head>
Sayfa ile ilgili tanımlamalar, JavaScript ve CSS kodları...
</head>
<body>
Sayfanın içeriğini oluşturacak kısımlar(yazılar, resimler, vb...)
</body>
</html>

HTMLde şu ana kadar bahsedilen etiketlerden tabi ki çok fazlası vardır. Şimdi HTML sayfalarında sıklıkla
kullanılan HTML etiketlerine göz atma sırası. Burada bahsedecek olduğumuz etiketlerle örnek yapmak istersen
tek ihtiyacın olan araç Notepad olacaktır; ancak Visual Studio üzerinde yeni bir HTML sayfası oluşturup Visual
Studionun kod tamamlama özelliğinden de faydalanabilirsin

Bölüm :
HTML (HyperText Markup
Language)

Konu :
Temel HTML Etiketleri

Temel Sayfa Bileşenleri

Bir HTML sayfasında o sayfanın HTML sayfası olduğunu belirten, sayfanın başlık kısmı ile gövde kısmını
birbirinden ayıran elementler muhakkak olmalıdır. Bunlar HTML, HEAD ve BODY elementleridir. Bu kodlar ile
HTML sayfası oluşturabilirsin. HEAD kısmı sayfaya özel tanımlamaların gerçekleştirilecek olduğu kısımdır. BODY
ise sayfanın şeklinin belirleneceği kısımdır.

<title>....</title>
Title komutu, sayfanın başlığının belirlendiği bölümdür. Herhangi bir web sayfasını ziyaret ettiğinde
tarayıcının üst bölümünde ilgili sayfanın adının yazdığını görürsün. HTMLde sayfanın başlığının belirlendiği
bölüm TITLE komutudur ve TITLE komutu muhakkak HEAD etiketi arasında yer almalıdır. TITLE komutunu
aşağıdaki şekilde kullanabilirsin.

<html>
<head>
<title> Açık Akademi | HTML </title>
</head>
<body>
Sayfanın içeriğini oluşturacak kısımlar(yazılar, resimler, vb...)
</body>
</html>

Kodları bir notepad aracılığı ile html sayfası olarak kaydedip sayfayı çalıştırabilirsin. Sayfa çalıştırıldığında
tarayıcının en üzerindeki başlık bölümüne dikkat ettiğinde Açık Akademi | HTML yazıyor olacaktır.

HTML Satır Araları

HTMLde bir sayfanın içeriği belirlenirken metinlerin satır bazında birbirinden olan uzaklıklarını
ayarlamak önemlidir, çünkü son kullanıcının hoşuna gitmesi gereken bir şeyler yapmak için yola çıkıyoruz.
HTMLde metinleri paragraf bazında gruplamak için <P>, <BR> ve <HR> gibi etiketler kullanılabilir.
Kullanılabilecek olan etiketler sadece bunlar değildir ve daha fazlası vardır.

<P>...</P>
Paragrafı simgeler. <P> etiketi kullanılarak HTML içerisinde tıpkı Wordde olduğu gibi paragraflar
oluşturabilirsin. Sonraki bölümde göreceğin CSS sınıfları ile paragrafa özel sitiller verip o paragraf içerisinde
bulunan yazıların tamamının görünümü, kolaylıkla belirlenebilir.
<BR />
Bir paragraf içerisindeki metnin alt satıra alınmasını sağlar.
<HR />
HRde BR gibi metni bir alt satıra alır ancak arada bir tane de çizgi koyar.

Şimdi açıklanan bu üç etiketi kullanan bir sayfa tasarlaman gerekiyor. Sayfada iki tane paragraf ve
paragraf içerisindeki metinler alt satırlarda olsun.

<html>
<head>
<title>Satır Araları</title>
</head>
<body>
<p>
Paragraf 1
Bu satır altta olacak mı?</p>
<p>
Paragraf 2
<hr />
İkinci paragraf
<br />
Bu noktadan sonra alttan devam edecek...</p>
</body>
</html>

Bölüm :
HTML (HyperText Markup
Language)

Konu :
Diğer Önemli HTML Etiketleri

Başlıklar, Hizalama, Arka plan…

HTML’de metinlerin başlık olarak görünmesi gerektiği <h..> etiketi ile belirleniyor. Böylece sayfayı oluştururken başlıklar net bir şekilde belirtilebilmektedir. Burada önemli olan noktalardan bir tanesi Word’de
de olduğu gibi yazının ne tarafa hizalı olarak duracak olduğudur. Bir diğeri ise sayfanın arka plan rengini, tasarım yapılan projeye göre belirleme ihtiyacı olmasıdır.
Arka plan rengi ile birlikte özellik mantığını irdelemek gerekir. Arka plan rengi belirtilirken direkt komut
olarak sayfaya eklenmez. Sayfanın tamamını etkileyeceği için <body> etiketinin özelliği olarak sayfada yerini alır.
Özellikler <body bgcolor=”White”> şeklinde kullanılır.

Yukarıdaki etiketler kullanılarak şöyle bir örnek oluşturulabilir:

<html>
<head>
<title>Başlıklar</title>
</head>
<body bgcolor="gray" text="black">
<h1>
Başlık 1</h1>
<h2>
Başlık 2</h2>
<h6>
Başlık 6</h6>
<p align="right">
Bu yazı sağa dayalı olacak...</p>
</body>

Örneğe ait ekran görüntüsünü aşağıda bulabilirsiniz:

Resim (Image)

Sayfaya resim eklemek için img etiketi kullanılır. Bu etiket ile iligli özellikler şunlardır;

Bir resmi HTML bir sayfaya aşağıdaki şekilde ekleyebilirsin:

<html>
<head>
<title>Resimler</title>
</head>
<body>
<p>
<img alt="Kadıköy" src="kadikoy.jpg" style="width: 430px; height: 323px" /></p>
</body>
</html>

kadikoy.jpg resim dosyası için herhangi bir yol belirtilmediği için, bu dosyanın html dosyası ile aynı
dizinde olduğu varsayılır. Sayfa hazırlandığında, aşağıdaki gibi görünecektir.

Bağlantı (Link)

Sayfalar arasında geçiş işlemleri için bağlantılar kullanılır. Bağlantılar <a.. ></a> (anchor) etiketi ile
gerçekleştirilebilir. Bağlantıları kullanarak sayfalar arasında geçiş yapabileceğin gibi sayfanın belli bölümlerinde tanımlamalar yapıp aynı sayfa içerisinde de geçiş yapabilirsin.

Daha önceki örnekleri gözünün önüne getir ve bir örnekten diğerine geçmek için sayfalardan birine

bağlantı ekleyip test et. Bu örneğin gerçekleştirilmesini sana bırakıyorum, yapacağın tek şey sayfanın body
bölümünde herhangi bir yerde <a href=”baglanti.htm”>Bağlantılara Git</a> şeklinde bir link eklemek. Bu işlemi gerçekleştirdiğinizde sayfanızda Bağlantılara Git şeklinde bir bağlantı oluşturulacak ve tıkladığınızda, sizi baglanti.htm adresine yönlendirecektir.
Burada gösterilecek örnekte ise uzunca bir sayfayı düşünebilirsin. En üstte bir tane linkle sayfanın sonuna, en alttaki bir tane linkle ise sayfanın başına dönüyor olacağız.
HTML’de çok görmeye alışık olmadığımız a etiketindeki name özelliğinin kullanıldığı bu örneğin kodları aşağıdaki gibi olacaktır.

<html>
<head>
<title>Bağlantı</title>
<body>
<p>
<a name="top"></a>
<h1>Bu Sayfanın Başı</h1></p>
<p>
<a href="#bottom">Sayfa Sonuna Git</a>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /> </p>
<p>
<a href="#top">Sayfa Başına Git</a>
<a name="bottom"></a>
<h1>Bu Sayfanın Sonu</h1></p>
</body>
</html>

Koda ait ekran görüntülerini de aşağıda bulabilirsiniz.

SÜREKLİ GÜNCEL// Hybris

AliqueLL · 5 Nis 2012

Yeni Başlıyanlar İçin Güzel 1 PayLaşım...

seyfy51 · 25 Nis 2012

eline sağlık ama pek bişey yapamadım 3-5 tag ezberleme dışında bu tagların devamı gelecek mi ?

themarina · 9 Tem 2012

çok güzel eline sağlık emeğine sağlık

mcinturffssx · 17 Tem 2012

Çünkü bu editörler, bir arayüzden tasarım yapma imkâ
verirler. Bu araçlar sayesinde HTML kodları arka planda otomatik olarak oluşturulur.

webmasterolmakzor · 26 Tem 2012

Saol Teşşekür Ettim Ama Devamı Gelirse Minnettar Kalırım

n1nJA · 27 Tem 2012

verdiğin kodları kopyalıp not defterine yapıştırdım..dosyanın ismi XXX.html yaptım ve İE ve Mozilla birlikte açtım niye olmadı

hasan0808 · 28 Tem 2012

eline sağlık güzel paylaşım

H-1-N-1- · 13 Eyl 2012

Bundan sonra elimden geldigince bu konuyu güncel tutmaya calısacagım.

Ders Adı : HTLM+CSS DİV KULLANIMI

Anlatım :

Html’de tasarımlarımızı sağa, sola hizalamak, nesneleri ve yazıları dilediğimiz koordinatlara yerleştirmek için kullanılan ve az kod ihtiva etmesi ve Google tarafından tavsiye edilmesi ve sevilmesi nedeniyle son zamanlarda gündeme gelen bir kodlama biçimidir.
Css dediğimiz stil kodlamasıyla tam uyumlu olması nedeniyle de table yani hücre sistemlerinin yerini hızla almakta olan alternatif bir tag’ dir.Kullanımı eski tip table kullanımına göre daha fazla bilgi ve tecrübe gerektirmesi nedeniyle çoğu web tasarımcılara zor geldiğinden div kullanımı çok fazla yaygınlaşamamaktadır.
İlk önce divlerin özelliklerinden bahsedeceğim.Daha sonra örnekler üzerinden devam ederiz.
WIDTH (Genişlik) : Width özelliği DIV’imizin ve daha başka bir çok etiketin genişliğini belirleyen özelliktir. Genişliği biz px (pixel) ve % olarak kullanacağız.

#ust {
background:#CCC;
height:100px;
width: 700px;
}

FLOAT : Float özelliği DIV’imizin yerleşimi konusunda yetkilidir.Yukarıda verdiğim Width örneğinde verdiğim gibi eğer Float kullanmazsak sola yaslı şekilde karşımıza çıkacaktır.Sağa yaslı ve ortalı olması durumlarını da görelim.
SAĞA YASLI
view source print ?

1.#ust {
2.float:right;
3.background:#CCC;
4.height:100px;
5.width: 700px;
6.}

ORTALI
DIV’imizi ortalamak istediğimizde FLOAT tek başına yeterli olmayacak ve MARGIN özelliğine de ihtiyaç duyacağız.
MARGIN
MARGIN aslında, DIV’imizin etrafındaki diğer nesneleri kendisinden ne kadar uzağı iteceğini gösterir. Onlarla arasında kalacak mesafeyi belirler. Bu uzaklaştırma mesafelerini margin-top, margin-right, margin-bottom, margin-left şeklinde tek tek verebileceğimiz gibi tek bir magrin özelliği içinde aralarında boşluk bırakarak her kenar için tek seferde de verebiliriz. Bu durumda değerler üsten başlayarak saat yönünde ilerler ve sırayla tüm kenarların en yakın nesneyle arasındaki mesafeyi tanımlar (üst, sağ, alt, sol). Şimdilik bu özelliklerden bahsetmekle yetinip MARGIN özelliğini DIV’imizi ortalamak için nasıl kullandığımıza bakalım.http://blog.4primes.com/2011/09/div-yapisi-ve-kullanimi/#viewSource

#ust {
float: none;
margin:auto;
background:#CCC;
height:100px;
width: 700px;
}

Kodlamamızı bu şekilde yaparak Div’imizi ortalamayı başardık. Aslında CSS kodumuzdan Float özelliğini tamamen kaldırsanız da MARGIN bu haliyle ortalama için yeterli olacaktır. Ancak şu anda tek Div’le çalıştığımızı unutmayın. Bu yüzden Float özelliği önemsiz gibi görünmesin.
Şimdi bu bilgiler ile neler yapabileceğimize gelelim.

Yukarıdaki örnekteki gibi 3 tane div panelini yanyana getirmek için yazmamız gereken css kodu;
#div1 {float: right;
background: #edeaea;
height: 100px;
width: 150px;
}
#div2 {
float: right;
margin:auto;
background: #edeaea;
height: 300px;
width: 150px;
}
#div3 {
float: right;
background: #edeaea;
height: 200px;
width: 150px;
}

HTML kodlarımız ise;
http://blog.4primes.com/2011/09/div-yapisi-ve-kullanimi/#viewSource

<div>DIV1</div>
<div>DIV2</div>
<div>DIV3</div>

H-1-N-1- · 13 Eyl 2012

Devamı ;

Yukarıdaki verdiğim kod parçası aynı zamanda sağa dayalı yazmaktadır.
Şimdi ise Sola dayalı ve altalta dizilmiş divleri kodyalalım.Aşağıda css kodunu verdik.HTML kodu için bir üstteki örneğin HTML kodunu kullanabiliriz.
view source print ?

01.#div1 {
02.float: none;
03.height: 100px;
04.width: 300px;
05.}
06.#div2 {
07.float: none;
08.height: 300px;
09.width: 300px;
10.}
11.#div3 {
12.float: none;
13.height: 200px;
14.width: 300px;
15.}

Floatları none olarak atadığımızda sola dayalı olarak yazmaya başlar ve yeni gelen divleri altalta ekler.
Yukarıdaki kodladığımız şekilde eğer yine altalta fakat ortalı bir şekilde yazmak istersek üsteki Margin özelliğinde tanımladığım gibi yukarıdaki örnekteki her Div css kod içine;
view source print ?

1.margin: auto;

eklersek ortalamış oluruz.
Bir üsteki örnekte değinmediğimiz birde sağa dayalı olma koşulu kalmıştı.Bu yapıyıda sağlamak için yukarıdaki şekilde tanımladığımız örnek içinde;
view source print ?

1.margin: auto 0 auto auto;

Bu şekilde eklersek sağa dayalı ve altalta dizilmiz div yapısını elde ederiz.
Şimdi ise karma yapıda bir örnek vermek istiyorum.Bu örnek ile pek çok noktaya değineceğiz.

İlk önce HTML kodlamasına bakalım.
view source print ?

01.<div id="sayfa">
02.<div id="ustAlan">
03....// kodlama yapacağımız alan
04.</div>
05.<div id="icerik">
06....
07.</div>
08.<div id="anaMenu">
09....
10.</div>
11.<div id="altAlan">
12....
13.</div>
14.</div>

Şimdi de css kodlarını verelim.
view source print ?

01.#sayfa {
02.width:768px;
03.}
04.#ustAlan{
05.width: 768px;
06.}
07.#icerik{
08.float: right;
09.width: 568px;
10.}
11.#anaMenu {
12.float: left;
13.width: 200px;
14.}
15.#altAlan{
16.width: 768px;
17.clear: both;
18.}

Bu kodu yazdıktan sonra sayfamız başta gördüğümüz şekildeki duruma gelmiş bulunmaktadır. Burada yazdığımız kodda “icerik” alanının sağa, “anaMenu” alanının sola yerleşmesi için genişlik değeri ve float değerleri tanınmladık. Ayrıca altAlan‘ın bu iki bölümün altında kalması için clear:both tanımlaması yapılmıştır.
Şimdide bence en güzel özelliğe deyineyim.Likit sayfalar;Likit Sayfalarda Sabit Genişlikteki Sayfalar’dan farklı olarak genişlik değerleri piksel(px) olarak değil yüzde(%) olarak verilmesidir. Bu tür sayfalarda sayfa genişliği web tarayıcısının boyutu ile bağlantılıdır. Web tarayıcısının genişliği arttırıldığında sayfa genişliği artacak, web tarayıcısının genişliği azaltıldığında sayfa genişli azalacaktır. HTML kodunda değişiklik yoktur.Css kodunu yazarsak:
view source print ?

01.#sayfa {
02.width:83%;
03.margin:0 auto;
04.}
05.#ustAlan {
06.width: 100%;
07.}
08.#anaMenu {
09.float: left;
10.width: 30%;
11.}
12.#icerik {
13.float: right;
14.width: 70%;
15.}
16.#altAlan {
17.width: 100%;
18.clear: both;
19.}

En son olarak bir çok sitede kullanılan 3 kolonlu yapıda gösterip bitireceğim.Buradaki kodlamadı tek farklılık son eklenen bölümü de kapsayacak bir kapsayici bir alan eklenmesidir.

HTML kodu;
view source print ?

01.<div id="sayfa">
02.<div id="ustAlan">
03....
04.</div>
05.<div id="KapsayiciAlan">
06.<div id="icerik">
07....
08.</div>
09.<div id="BannerAlani">
10....
11.</div>
12.</div>
13.<div id="anaMenu">
14....
15.</div>
16.<div id="altAlan">
17....
18.</div>
19.</div>

Css kod ise;
view source print ?

01.#sayfa {
02.width:768px;
03.margin:0 auto;
04.}
05.#ustAlan {
06.width:768px;
07.}
08.#anaMenu {
09.float: left;
10.width: 200px;
11.}
12.#KapsayiciAlan {
13.float: right;
14.width: 568px;
15.}
16.#icerik {
17.float: left;
18.width: 368px;
19.}
20.#BannerAlani {
21.float: right;
22.width: 200px;
23.}
24.#altAlan {
25.width:768px;
26.clear:both;
27.}

Yukarıdaki kodlama ben pixel değerlerini kullandım.İstenirse % şeklinde de kodlanabilir.

ata25 · 15 Eyl 2012

elıne sağlık kardeşim

boobssver290 · 17 Eki 2012

Tebrikler Güzel Paylaşım.

w4LLop · 17 Eki 2012

Teşekkürler Kardeşim.

doguturkistan · 6 Kas 2012

selam arkadaşlar beni mobil web sitesi tasarımı yapmak istiyorum bana yardımci olmak isteyen arkadaşlar bilgi verirmisiniz lütfen tsk

özel mesaj yazarsanız memnun olurum

ziloo · 12 Kas 2012

Web Tasarım | Ensar Web Tasarım | internet sitesi tasarımı

fatihcaycı · 25 Kas 2012

Paylaşım güzell !

Teşekkür

Kinq54 · 5 Ocak 2013

süper bi anlatım olmuş tebrikler

HTML ve CSS Görsel Anlatım Ders 1: HTML

Hybris

Uzman üye

AliqueLL

Yeni üye

seyfy51

Yeni üye

themarina

Katılımcı Üye

mcinturffssx

Yeni üye

webmasterolmakzor

Yeni üye

n1nJA

Üye

hasan0808

Üye

H-1-N-1-

Uzman üye

H-1-N-1-

Uzman üye

ata25

Yeni üye

boobssver290

Katılımcı Üye

w4LLop

Yeni üye

doguturkistan

Yeni üye

ziloo

Yeni üye

fatihcaycı

Yeni üye

Kinq54

Katılımcı Üye

Sosyal medya sayfalarımız