5
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 21.595 Defa

Webmaster olmak isteyenler şuna inanın zor değil webmaster olmak web site yapmak için en bilgisayar uzmanı nede üniversite menzunu olmanıza gerek var buna inanın azimli olun en fazla 2 ay içeriisnde web site tasarlayacaksınız.

Bu ilk dersimiz arkadaşlar 2 günde bir yayınlayacağım dersleri takip öğrendiklerinizi mutlaka farklı örneklerle bol bol uygulama yapmalısınız.

Html nedir ne işe yarar konusuna yanıtımı bu sayfada kafanızı karıştırmamak için aşağıdaki linkte yer verdim.

Html Nedir?

Temel Html nedir html amacı nedir html ne için ve nerelerde kullanılır nasıl kullanılır onuda yine aşağıdaki linkten inceliyoruz.

Evet arkadaşlar Html Nedir ve Temel Html hakkında bilgi aldıktan sonra html ile ilgili çok önem arz eden mutlaka aklınızda tutmanız gereken bilgilere geçeceğim dediğim gibi mutlaka aklınızda bulunsun not alın.

HTML KOMUTLARI VE HTML KODLARI YAZIM KURALLARI

  1. Html kodlama yaparken büyük küçük harf kullanmak serbesttir.
  2. Html kodlarda TÜRKÇE karakter kulalnılamaz arkadaşlar. Nedir Bunlar (ç, ğ, ı, ö, ş, ü) Şeklinde sıralayabiliriz.
  3. Html Komutlar mutlaka < ve > işaretleri arasına yazılmalıdır bunlara etiket denir?

Html Sayfalarda veriler (yazı, resim vs ) yukrda 3. numarada blirttiğim etiketler arasında yazılır. Bir kaç etiket dışında açılan etiketler mutlaka kapatılmalıdır.

Etiket kapatmak için < işaretinden sonra / işaretinin konulması gereklidir diyoruz e buna bir örnekle devam ediyorum.

Örnek: <html> ilk etapta açtım İçerik Ekledim ve Şimdi Kapatıyorum </html> ve son olrak kapattım arkadaşlar.

Etiketlerin İç İçe Kullanılması:

Html Kodlar her zaman iç içe kullanılabilir arkadaşlar. Dikkat etmeniz gereken tek husus en içteki etikketten başlayarak açtığımız etiketi kapatmamız gerekir. Buna bir örnek vererek devam ediyorum arkadaşlar sizede uygulama yaptıracağım.

Örnek: 

<head>

<title> Webmasteryolcu İle Web Tasarım dersleri </title>

</head>

Yukardaki örnekte arkadaşlar iç etiket <title> ……..</title> dir ve ilk önce o kapanıp sonra </head> kapatılmıştır.

Etiketleri Parametreler İle Kullanma

Html etiketlerimiz arkadaşlar parametreler ile zenginleştirerek işlevlerini özelliklerini daha artırmak mümkündür.

Dikkat etmeniz gereken parametreler etikketten sonra kullanılıyor olmsıdır.

Parametre yazıldıktan sonra = işareti yazılır ve parametre değerini eklemek için ”   ”  çift tırmaklar arasına kullanacağımız para metre değeri verilir. Parametrelere bir örnek vermek gerekirse örnekte sayfamızın arkaplanına resim ekleyecem.

Örnek:  <body background= “resim.jpg”>

Yukarda yaptığım örneği size özetliyim arkadaşlar < etiketimi açtım ve body background ile sayfama arkpalan resmi ekleyeceğimi belirttim başka amaçla kullanılmaz o etiket not alın arkadaşlar. = işareti ile parametre kullanacağımı belirttim ve  “resim.jpg” ilede değerini verdim.

Ben ne dedim arkaplan resmi kullanacam dedim değerim ne olacak resim uzantısı olacak resim.jpg dedim ben illede jpg uzantıli resim olması şart değil gif ve png uzantılı resimde kullanabilirsiniz resimin adı resim olmak zorunda değil hasanda olabilirdi.

HTML SAYFA BÖLÜMLERİ VE İLK SAYFAMIZI UYGULAMA

<html></html>

Html sayfalarında standart arkadaşlar sayfanın <html> ile başlayıp sayfanın sonunda </html> ile bitmesidir aslında koymasanız olurmu olabiliyor html hata kaldıran bir dildir ama istediğiniz gibi olmayabilir.

<html>

Tüm Kodlar

</html

Yukardada belirttiğim gibi tüm kodlar <html> ile </html> arasında olmalı

<head></head>

Bu etiketler arasına sayfa hakkında bilgiler eklenir arkadaşlar ilerleyen derslerde detayla anlatacağım.

Metalar ile ilgili konuları ilerleyen derslerde detaylı ele alacam arkadaşlar şimdi kafanız karışmasın.

<body></body>

Html sayfamızın gövde kısmıdır arkadaşlar yukarda anlattığım title ve head tarayıcı ve arama motorları içindi body ise artık ziyaretçizin göreceği içerik ve gövde kısmıdır.

İlk Web Sayfamızı Yapıyoruz

Ne demiştik Temel Html kısmında html kodlama için gerekli olan araçlarda en basitinden Notepad (Not defteri demiştik ) her bilgisayarda olan bizde ilk etapta kendimizi not defterinde geliştirecez.

Açıyoruz not defterimizi Notepad Kısayoldan Çalıştırma

Not Defteri açma ve Kısa Yoldan Açma.

Not Defterimizi açtıktan sonra arkadaşlar aşağıda benim yazdığımı aynen yazın sakın olaki kopyala yapıştır yapmayın yazın arkadaşlar eliniz alışsın hafızanızda kodlar yer etsin tüm derslerimde kopyala yapıştır yapmayn yazın.

<html>

<head>

<title>Webmasteryolcu Temel Html Dersi</title>

</head>

<body>

Web sitesi yapmak zor olmadıdığını tüm dünyaya göstereceğim Derslerime çalışarak.

</body>

</html>

Yazdıktan sonra arkadaşlar dosya menüsünden farklı kaydet tıklayın ve açılan kayıt sayfasında

Dosya adı: ders1.html yada htm olarak kaydedebilirsiniz masaüstüne kayt ediyoruz.

htm yada html aynıdır html sayfalarının 2 iki uzantısı vardır htm yada html

Masa üstünde internet explorer şeklinde sayfanızı göreceksiniz yaptıklarınızı görmek için ona çift tıklıyoruz ve aşağıdaki örneği elde etmelisiniz.

 
 

Temel Html Dersleri ve Html Etiketleri

Temel Html Dersleri ve Html Etiketleri

 Bir Sonraki Dersimiz: Web Tasarım Dersleri Yazılar ve Biçimlendirme Ders2



   Paylaş

17 Yorum yapılmış

  • ali
    05 Ekim 2010 | Cevapla

    eline saglık hocam aylardır şu işi duzgun anlatan bi site arıyordum sonunda buldum.girdiğim diğer sitelerde adam direk başlıyor notpad a bişeyler yazmaya ben noluyor demeye kalmadan adam siteyi yapıyor video bitiyor.ancak bu dersten sonra anladım adamın ne yaptıgını . aynen sitede yazanları uyguluyorum.video 0lmasa bile çok güzel anlatmışsınız tebrikler.ama bana acil devamı lazım.bu dersi yarım saatte bitirdim şimdi devamını başka sitelerde arıycam boş boş 0turmaktansa ama siz anlatsaydınız daha iyi 0lurdu . devamını bekliyorum saygılar.

    • 05 Ekim 2010 | Cevapla

      EyvAllah öncelikle devamını yazmam sizleri sıkar benim için sorun değil 2 gündede bitirebilirim ama karşımdaki insan sıkılır soğur ama adım adım gidersek sıkılmadan adım adım başarır

  • ali
    05 Ekim 2010 | Cevapla

    hocam msn den falan ders veriyormusun?:D

    • 05 Ekim 2010 | Cevapla

      Tabiki uzak bilgisayar bağlantısı ile ders verdiğim kişinin bilgisayarına bağlanarak uygulamalı derslerde veriyorum

  • ali
    06 Ekim 2010 | Cevapla

    hocam tr.gg den site açtım ama bu html kodlarını nasıl kullanıcağımı bilmiyorum zaten sizin gösterdiğiniz kodlardan başka kodda bilmiyorum.mesela üstteki derste uygulama yapınca verdiğiniz resimdeki gibi bi sayfa açtım ama onu nasıl web siteye entegre edicez bilmiorum.bunları ilerki derslerdemi öğrencez?

    • 07 Ekim 2010 | Cevapla

      Öncelikle hocam tr.gg gibi yada buna benzer siteler ile hiç uğraşmayın bir kaç ders sonra yaptığımız sayfaları yayınlamayıda öğrenecez o tür free siteler boşuna zamna kaybı

  • 09 Ekim 2010 | Cevapla

    ARKADAŞLAR BENDE BİR WEBMASTERİM BURADAN HİÇ BİLMEDİĞİM BİLGİLERİ ÖĞRENDİM.eMEĞİ GEÇENLERDEN ALLAH RAZI OLSUN

  • murat
    13 Ekim 2010 | Cevapla

    hocam ben 2. sınıf elektronık öğrencisiyim ilk dersimi bugun yaptım ve cok zevklı geldi . Allah razı olsun sizden ben programcı olmak ıstıyorum bır öneriniz varmıdır.

    • 14 Ekim 2010 | Cevapla

      İlerleyen dersler daha keyifli olacaktır murat buna emin ol. proğramcı olmanın temeli html öğrenmekten geçer önce html sonra php mysql

  • uğur
    15 Ekim 2010 | Cevapla

    hocam background=”…..jpg” gibi resmi arka plana koyduğumda 4-5 resim küçük resim olarak çıkıyor bunun için resmi ortalamak tek arka plan resmi haline getirmek için ne yapmalıyım acil cvp

    • 15 Ekim 2010 | Cevapla

      Uğur Arkaplan olarak o resim tüm sayfayı kaplıyor resim küçükse kaplamak için çoğaltıyor çoğaltmaması için resimi büyütebilirsin.

  • ceyhan
    25 Ekim 2010 | Cevapla

    sizden allah razı olsun böyle güzel anlatan şu koskacaman internet aleminde yoktur size hocam diyeceğim emeğinize sağlık hocam ders 2 yi nezaman göreceğiz lütfen çabuk olsun çok heyacanlanıyorum.
    birde hocam bizler tam bir site yapmayı öğrenicez

    • 25 Ekim 2010 | Cevapla

      Cümlemizden Allah Razı Olsun Ceyhan Güzel Dileklerin İçin Teşekkür Ederim.

      2 Günde Bir Yayınlanan Derslerimiz Bugün 10, Ders Yayınlandı Tüm Dersleri Görmek İçin Html Dersleri Bölümünde Bulabilirsin .

      http://www.webmasteryolcu.com/webmaster/html-dersleri

      Dersleri Tam olarak takip edersen 2 ay içerisinde tam anlamıyla site tasarlayabilirsin html web tasarımcı olarak bir yerlerde iş bulabilirsin

  • ozgur
    11 Mayıs 2011 | Cevapla

    öncelikle burda bulunan bütün webmaster arkadaşlara slmlar burda bilgilerini paylaşan proje sormlusu hocamızada sonsuz tşkler derslerinizi büyük bir ilgiyle takip ediyorm başarılarınızn devamını diliyorm tşkler bilgi için kolay gelsin…

  • Metin
    06 Ekim 2012 | Cevapla

    tşkler derslerinizi büyük bir ilgiyle takip ediyorm Benim henüz sadece blogum var sayenizde belki sitede acarim 🙂 başarılarınızn devamını diliyorm ,güzel paylasim..

  • Ahmet
    09 Kasım 2012 | Cevapla

    güzel olmuş

  • A.Samet Yıldırım
    05 Mayıs 2015 | Cevapla

    Hocam ellerinize sağlık ben daha önce bulara bakmamıştım ama şimdi bakınca ne kadar sade ve anlaşılır yazdığınızı gördüm bunu başka hiçbir sitede bulamadım ellerinize sağlık.

Yorum yapın