• celalcanh.h.oglu@gmail.com

Category Archivehtml

362136e

Test Makale

Test Makalem

Link


 

tum_html_kodlari_dersleri

Html Temel Giriş

Html Dersleri- Ders1 Giriş

 

SelamunAleyküm arkadaşlar,Ben Suat sizlerle birlikte işleyeceğimiz derslerin ilki Html giriş seviyesinden başlayarak anlatmaya çalışacağım umarın faydalı olacaktır. Yazılı derslerin yanı sıra belli aralıklarla videolarla anlatıklarımızın uygulamalarını yapıp pekiştirmeye çalışacağım

İşin aslına bakarsanız bu benim ilk makalem ve sizlerle beraber bende bilgilerimi güncelleyeceğim. Eğer web tasarımı temelden öğrenmek istiyorsanız, Doğru yerdesiniz demektir. Unutmayınız ki başlamak başarmanın yarısıdır. Dersler sıkıcı bir durum alırsa lütfen bana mesaj atarak belirtiniz. Anlattığımız dersleri sürekli pratikle tekrar etmeniz hızlı öğrenmenize yardımcı olacaktır. Sürekli tekrar etmeniz unutmamanızada yardımcı olacaktır. Ben programlamayı her zaman matematiğe eşdeğer görmüşümdür ve işin doğrusu matematikle doğrudan ilişkilidir alacağınız ilk merhaba yazısına değil çözeceğiniz ilk hata sizi mutlus etsin.Programlama dersinleride matematik gibi sürekli pratik ve tekrar gerektiren birşeydir UNUTMAYINIZ.Bir yerlerde eksiğimiz kusurumuz, imla hatamız olursa şimdiden affınıza sığınıyorum.

 

Derslerimizi Sırası ile basit HTML-HTML5,CSS,CSS3’ü iyi seklinde anlatmaya çalışacağım ve en sonda web programcılığına Php ile  giriş yapıp gidebildiğimiz yere kadar gideceğiz.

Arkadaşlar öncelikle html kodlarını çalıştırabilmemiz için bilgisayarımızda web tarayıcılarının bulunması gerekli(Firefox,Google Chorme v.b) bunların bir çoğunun bulunmasında fayda olacaktır.

Ve diğer ihtiyacımız olan bir şey de HTML kodlarını derleyebileceğimiz bir editörün olmasıdır. Dilerseniz bilgisayarınızda ki notpad’i bile kullanabilirsiniz ama ben dersleri Notpad++ ve Dreamweaver Kullanarak anlatacağım. Notpad++ ücresizdir.

Aşağıda ilk etapta verekli programları indirip kurabilirsiniz.

 

Suat AYDEMİR

“ UNUTMAYINIZ KİMSE BAŞARI BASAMAKLARINI ÜÇER BEŞER ÇIKMAMIŞTIR SABIRLI VE MERAKLI OLUNUZ”

Ders-1

Html Nedir ?

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.

Html Etiketler kullanırak yazılır ve tarayıcı bu kodları derleyerek tasarımızı görsel olarak sunar.

Html “<html>” şeklinde başlar ve “</html>” şeklinde biter.

Html Yazım kuralları

Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;

Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>, <tag>…..</tag>

Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ) 

Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir. <body>….</BODY> veya <Html>….</html>

Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.

Örnek verecek olursak

Html dosları arkadaşlar sunucumuz veya bilgisalarımız da “.html”  veya “.htm” uzantısı ile kayıt edilir. Kullancağımız editör ne olursa olsun dosyamızı farklı kaydet deyip dosya uzantımızı belirtilen uzantılar ile kayıt edilmesidir. Aksi takdirde html dosyamız derlenmeyip çalışmayacaktır.

<html>

<head>

<body>

 

…………………… İçerik………………………

 

 </body>

</head>

</html>

 

 

Gerekli programlar için linkler;

Editör

Notpad++

Tarayıcılar

Mozilla Firefox

Google Chorme

unnamed

HTML DERS -2-

html-5

| HTML DERS -2- |


Anlatımlarımız samimi bir dille olacaktır bunun sayesinde sıkılmadan daha çok öğrenmek isteyeceksiniz ve sıradaki dersleri heyecanla bekliyeceksiniz…

unnamed

HTML’YE GİRİŞ DERSİ -1-

html-css

| HTML’YE GİRİŞ DERSİ -1- |


Anlatımlarımız samimi bir dille olacaktır bunun sayesinde sıkılmadan daha çok öğrenmek isteyeceksiniz ve sıradaki dersleri heyecanla bekliyeceksiniz…


  1. WWW (World Wide Web)

    İnternet üzerindeki servislerden birisidir. Metin (text), resim, şekil, grafik, fotoğraf, ses, bilgisayar programı vb gör-işit nesnelerini, sunucuda düzenlendiği biçimiyle istemciye (kullanıcı) sunar.

  2. HTML (HyperText Markup Language)

    Web’in dilidir. Yukarıda açıklanan işleri yapmak için, özel bilgisayar programları hazırlanır. Bunlara web sayfaları ya da web dökümanları diyeceğiz. Bu programlar HTML dili ile yazılır.

    HTML nin komutları tag (damga) adını alır. Web sayfasında yapmak istediğimiz işleri bunlarla belirtiriz. Bu nedenle, HTML damgaları, işlevlerine göre, genel amaçlı programlama dillerindeki (örneğin, Pascal ya da C) komutlar, deyimler, prosedürler ve fonksiyonların rolünü oynar. Damgaların işlevlerini böyle görmek , HTML dilini kavramayı kolaylaştıracaktır.

    Web sunucusu ve web tarayıcısı birlikte çalışarak, web sayfasında (program) verilen komutları icra ederler. Böylece, istemci, web sayfasını, programlandığı biçimiyle görebilir.

    Web teknolojisinde yer alan bilgisayarlar, işletim sistemleri, programlar,… vb. çok sayıda marka, model, sürüm farlılıklarına sahiptir. Bu nedenle, web sayfaları, mümkün olduğu kadar geniş bir yelpazede ortak özelikleri kullanır. Başka bir deyişle, web sayfalarının donanıma, işletim sistemine bağlı olmadan çalışması istenir. Gene de, bazı kısıtlamalar kaçınılmazdır.

    Web teknolojisinden tam yararlanabilmek için yeterli hıza ve belleğe sahip bir bilgisayarınız, çözünürlüğü yüksek bir görüntü biriminiz ve son sürümlere yakın bir tarayıcınız (browser) olmalıdır.

    Donanım ve işletim sistemi ne olursa olsun, tarayıcı web sayfasında belirlenen aşağıdaki niteliklerden doğrudan etkilenir.

    • Kullanılan damgalardan,
    • Belirlenen sayfa genişliğinden,
    • Text görüntülemek için seçilen font’lardan,
    • Seçilen renklerden.

    Dolayısıyla, öncelikle, bu nitelikleri istediğimiz gibi belirlemeyi öğrenmeliyiz.

  3. Basit ama önemli gerçekler

    Web sayfasına konulan metinler herhangi bir kelime işlemci (word processor) ile yazılabilir. Buna orijinal metin diyelim. Tarayıcılar,orijinal metinde sözcükler arasına konulan boşluklardan yalnız birisini algılar. Örneğin iki sözcük arasına üç tane boşluk (space) konulmuşsa, tarayıcı onu tek boşluk olarak algılar. Tarayıcılar, orijinal metindeki satır başlarını algılamaz. Bir paragrafı, seçilen sayfa genişliğine uyacak biçimde kendiliğinden satırlara ayırır. Buna sarma (wrapping) denilir. Böyle oluşu iyidir, donanımdan bağımsızlığı sağlar. Satır başı yapılmak isteniyorsa, bu işi yapan özel HTML damgası yazılmalıdır. Bunları biraz sonra inceleyeceğiz.

    Örnek
    Metin 1 Metin 2 Metin 3
    Tarayıcı,
    orijinal       metindeki
    ek boşlukları ve satırbaşlarını
    algılamaz.
    Tarayıcı,      orijinal
    metindeki    ek boşlukları
    ve
    satırbaşlarını algılamaz.
    Tarayıcı, orijinal metindeki
    ek boşlukları ve
    satırbaşlarını     algılamaz.

    Bu üç metinin üçü de aşağıdaki tek görüntüyü verir:

    Tarayıcı, orijinal metindeki ek boşlukları ve satırbaşlarını algılamaz.

    HTML damgaları (komut – tag), < > simgeleri arasına yazılır. Genellikle,

    <TAG > … </TAG >

    biçiminde başlangıç ve bitiş yerleri belirtilir. Buna bir tekne (container) diyeceğiz. Komutun etki alanı tekne içinde … yerine yazılanlardır. Örneğin,

    <B > Bu tag koyu yazı yazdırır. </B >

    kodunda <B> … </B> teknesi içindeki metin koyu yazılır. Bunu yapan html damgası B dir. B nin başladığı yer <B > ile, bittiği yer </B > ile belirlenir.

    Damga (tag) yazılışında büyük ya da küçük harf kullanılması sonucu etkilemez. Başka bir deyişle,

    <B> … </B>
    <b> … </b>

    damgaları aynı işi yaparlar.

  4. BİRDAHAKİ DERSİMİZDE HTML TEMELÖĞELERİ , YAZI ŞEKİLLERİ RENKLERİYLE İLGİLİ BİLGİ VERECEĞİM YAZIMIZI OKUDUĞUNUZ İÇİN TEŞEKKÜREDERİZ…