Temel Html ve Html Sayfa Bölümleri Ders1

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

About SEO Uzmanı Mustafa Gövercin

Merhaba arkadaşlar ben SEO uzmanı Mustafa Gövercin yaklaşık 20 yıldır İnternet siteleri ve SEO konusunda kendimi geliştirmeye çalışıyorum. İnternet siteleri ile tanışmam 1999 yılına uzanmaktadır. Windows 95 işletim sisteminin olduğu ve harici depolama aracı olarak 1.44 MB alanı olan disketli bilgisayarlarla başlamıştım.

Mustafa Gövercin
Esenyurt Belediyesi kültür merkezinde öğrendiğim bilgisayarı o zaman yeni açılan ve hızla yaygınlaşmaya başlayan İnternet kafe türü yerlerde geliştirme imkânı bulmuştum. Çünkü kendime ait ne bilgisayar nede İnternetim vardı. İnternet kafede insanlar o dönemin en ünlü Chat (sohbet) programı Mirc ve ICQ ile vakit geçirirken ben Word ile yazı yazarak parmaklarımı hızlandırmaya çalışıyordum.

Sonrasında İnternet sitelerini incelemeye ve onların nasıl yapıldığını merak etmeye başlamıştım. Karşıma HTML işaretleme dili çıktı. O zaman henüz CSS stil dili bulunmuyordu. Biraz oradan bilgi, biraz bir yerden kod çalma derken site olamayacak kadar kötü siteler yapmaya başlamıştım.

İlk sitem sadece 10MB hosting olan bedavaweb.gen.tr olduğunu söylemeliyim. Eskiden free hosting kelimesi en çok aranan kelimeler arasında yer alıyordu. Çünkü hosting fiyatları gerçekten fahiş fiyatlarla satılıyordu. Depolama alanı ise oldukça azdı. İnsanlar bu nedenle özellikle yabancı kaynaklardan ücretsiz hosting alarak bir şeyler yapmaya çalışıyordu. Hatta bu hizmeti verenlerin büyük bir bölümü sitenize rahatsız edici reklamlar koyardı. Reklam koymayanlar ise çok kaliteli oldukları söylenemez. Bende Atspace.com sitesinden 50MB fakat MYSQL veritabanı olmayan birkaç hosting aldım. Halen o sitelerin açık olduğunu söyleyebilirim. Bu nedenle Atspace firmasına yürekten teşekkür ediyorum.

Toplistler ve Dizinler Çok Yoğun Kullanılıyordu

Google 1998 yılında kurulmasına karşın tam olarak etkin hale gelmesi 2002 sonrası olmuştur. Biz o süreçte sitelerimize trafik çekebilmek için yerli ve yabancı toplist, dizin sitelerini kullandık, o nedenle sitelerin alt (footer) kısmı toplist ve dizinlerin verdiği banner çöplüğü haline gelirdi. Çünkü bir toplist ya da dizinde siten yer alması için o banneri eklemek zorunda kalıyorsun. Tabii ki şuan bu tür siteler tamamen yok olmasa bile sayıları bir elin parmakları kadar az diyebilirim. Arama motoru olarak Yahoo.com daha eski fakat ABD’den başka ülkelere hayrı yok diyebilirim.

Eskiden SEO Diye Bir Şey Yoktu

Çünkü Google algoritmaları çok amatörce çalışıyordu. Bir kelimede ilk sayfaya gelmek için Title kısmına yazman yeterli olurdu. Daha fazla kelimede yer almak için kelimeler arasına virgül koyman yeterli diyebilirim. Şuan 60-70 karakter olan Title (başlık sınırı) eski sistemde title etkili olduğu için insanlar 600-700 hatta daha fazla başlıklara yer verirdi. Çok iyi hatırlıyorum sitemin biri Hülya Avşar kelimesinde ilk sırada çıkıyordu. Hülya Avşar ile ilgili hiçbir içerik ya da görsel olmadığı halde! Çünkü title Hülya Avşar yazması yeterli oluyordu.

2004 Yılında Google Adsense İle Kazanmaya Başladım

Bu işe başladığım ilk zamanlarda bu işlerden para kazanmayı hedefliyordum. İlk olarak kitapyurdu.com gibi sitelerin reklamını alarak başladım. Fakat biriken paramı hiçbir şekilde ödemediler. Şuan büyük bir şirketiz diye övünseler bile geçmişte benim gibi insanların küçük meblağ olmasına karşın ödemedikleri ve hiçbir şekilde cevap vermedikleri haklarını eminim unutmazlar.

Tabii ki böylesi başarısız Türk sponsorlar sonrası Google Adsense Türkiye’de de başvuru almaya başladı. Bende kayıt oldum ve reklam yayınlamaya başladım. İlk ödemem 1400$ değerinde olmuştu (birkaç aylık reklam yayını sonrası) çek gönderdiler. O zaman Havele vs yoktu, çek gönderdiler ama ne yapacağımı bilemiyorum. Bankaları dolaşmaya başladım. Çözüm bulan banka neredeyse hiç çıkmadı. Hatta Ziraat Bankasında görevli bir ihtiyar artık sinirimi dayanılmaz hale getirmişti. Koydum önüne bakmadan bile ne bu diyerek artistçe bir yaklaşımda bulunmuştu. Neyse ki Akbank görevlisi durumu anladı ve sorunu çözdü. Çeki bankaya veriyorum 20$’da işlem ücreti ödüyorum. 1 Ay sonra çekin ödemesi hesabıma geçiyordu.

Eğitim, Moda, Turizm Siteleri Yaptım

Google Adsense ile kazanmaya başlayınca artık sitelerimin sayısını artırmaya karar verdim. Bu kapsamda başlıkta da belirtildiği gibi eğitim, moda ve turizm alanında siteler yaptım. Fakat şuan ki kadar başarılı içerik oluşturduğum söylenemez. Bu nedenle sitelerim birçok algoritmadan zarar gördüler. Bunlar benim için aslında engel ve tecrübe oluyordu. Böylece Google’yi daha iyi anlama ve kurallara adapte olmayı öğrendim.

Sağlık Alanında Hizmet Vermeye Başladım

2009 Yılında Webmastersitesi.com yöneticiliği yaparken bir iş ilanı konusu açıldı ve ben başvuru yaptım orada başladım. Tek şubesi olan bir sağlık merkeziydi. Başladığım o işte 10 yıl geçti ve halen devam ediyorum. 1 Olan şube sayısı 3 tanesi İstanbul’da olmak üzere 6’ya yükseldi. Bu süreçte yaklaşık 100 sitenin tasarım ve SEO işlemlerini gerçekleştirdim.

Sağlık Alanında İçerik Oluşturmayı Öğrendim

En sevdiğim şeylerden biri haline gelen sağlık alanında yazı yazmak, öğrenmek, öğretmek daha önce yaptığım işlerin tümünü geride bıraktı diyebilirim. Çünkü bazı hastalıkların çok kolay nüfus ettiğini öğreniyorsun. İnsanlar çok basit, çok kolay önlemlerle hastalıklardan korunabileceğini öğreniyorsun. Bu bilgiyi bir an evvel insanlarla paylaşmak için heyecanlanıyorsun. Bu nedenle sağlık alanında her yazıyı yazabilirim. Tabii ki henüz ilgilenmediğim alanlarda önce araştırma ve öğrenme süreci olacağı için bazen 2-3 saat geç bitebilir.

Bundan Sonraki Çalışma Alanım Sağlık Siteleri

Bugüne kadar yaptığım işler arasında en keyiflisi olan sağlık ve doktorlarla bir arada çalışma güzelliğini devam ettireceğim. Bunda sonra her işi yapmak, her sektörde yer almak yerine sadece sağlık sektöründe olarak, hastaneler, klinikler ve doktorların İnternet siteleri ve SEO çalışmalarını yapacağım. Çünkü severek yaptığım bu işte daha başarılı oluyorum. Böylece hizmet verdiğim kurum, kuruluş ve bireylere faydalı oluyorum.

17 comments

  1. 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.

    • WEBMASTERYOLCU

      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

  2. hocam msn den falan ders veriyormusun?:D

    • WEBMASTERYOLCU

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

  3. 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?

    • WEBMASTERYOLCU

      Ö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ı

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

  5. 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.

    • WEBMASTERYOLCU

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

  6. 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

    • WEBMASTERYOLCU

      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.

  7. 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

    • WEBMASTERYOLCU

      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 .

      https://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

  8. ö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…

  9. 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..

  10. güzel olmuş

  11. A.Samet Yıldırım

    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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir