İnternetten para kazanmanın yolları ile ilgili yazılar paylaşmaya devam edeceğim. Sizler de internetten gelir elde etmek istiyorsanız yazılarımı takip ederek internetten para kazandıran siteler ve uygular ile hızlı ve kolay para kazan abilirsiniz. Harika Bir pasif gelir elde et Uyurken Bile Para Kazan Ücretsiz bitcoin kazan dıran bu harika sitenin ayrıca referans sistemi var. Üye olduğunuzda Refer(sayfasına gidip kendi linkinizi heryerde paylaşın ve para kazanmaya hemen başlayın.) Arkadaşlarınızı da üye yaparak pasif gelir elde edebilirsiniz . Genelde uyurken bile para kazan denildiğinde anlamanız gereken bu sistemdir. Haydi Ücretsiz Bitcin kazanmaya başlayalım ve paraya dönüştürelim. Siteye Hemen Üye ol: FreeBitcoin ( tıkla ) Ücretsiz Bitcoin Kazandıran siteye hemen üye ol (arkadaşlarınla paylaş) uyurken bile para kazan Her saat bitcoin kazanabilirsin ( Şanslı isen 200 Dolar değerinde Bitcoin ) Kazandığın her bitcoinle ücretsiz çekiliş bileti alabilirsiniz. Dikkatle
Bağlantıyı al
Facebook
Twitter
Pinterest
E-posta
Diğer Uygulamalar
html nedir
Bağlantıyı al
Facebook
Twitter
Pinterest
E-posta
Diğer Uygulamalar
Web tasarım ve kodlama derslerinde ilk öğreneceğimiz dil html teknolojisidir.Bir internet sitesinin iskeletide denen bu işaretleme diliyle web site yapmasını öğreneceğiz.Hiç bir kodlama bilginiz olmasa dahi bloğumu takip edin makalelerimi okuyun ve uygulamaya çalışın.Eminim siz de kendi web sitenizi kodlayarak sıfırdan kendi projelerinizi hayata geçirebileceksiniz.
Öncelikle html nedir,ne işe yarar nasıl kullanılır bunları öğreneceğiz.Html öğrenilmesi en kolay dildir ve ben size bildiğim herşeyi uygulamalı olarak anlatacağım.Sitede kullandığım kod editörüyle anında ne işe yaradığını göreceksiniz.Kod67 Html Dersleri başlıyor.
Html5 Dersleri Başlangıç
HTML Nedir
İnternet siteleri yapmamıza olanak sağlayan işaretleme dili olan html sayesinde Chrome,Firefox,İnternet Explorer,Safari ve Opera gibi tarayıcılar html etiketlerini (kodlarını) yorumlayarak kullanıcıya istenen formatta görüntülenmesini sağlatırlar.Örneğin Google'da bir arama yaptığımızda çıkan sonuçlara göre bir linke tıklarız ve bağlantı sahibi internet sitesine gideriz.
Lafı uzatmadan bir html sayfası kodları nasıldır bunu inceleyelim.Aşağıdaki kod editorünü inceleyeniz.Ve o kodlar sayesinde bir web sitesi oluştu.Evet ilk web sitemiz aşağıda göründüğü gibidir.
Yukarıdaki kod yapılarıyla bir web sitesi oluşturduk.İnanması zor biliyorum ama bir web sitesinin en yalın ve en göze hitap etmeyen hali budur.Şimdi sırasıyla kod editöründeki etiket veya kodların anlamlarını açıklamaya başlayalım.
Html web sayfasındaki etiketlerin anlamları
Doctype Bildirimi: En son kullanılan html teknolojisinin adı HTML5'tir.Bu belgenin html5 yapısına uygun olduğunu tarayıcılara ve arama motorlarına bilgi verir.
Öncelikle çoğu html kodları başlangıç ve bitiş etiketleriyle yazılır ve içerisinde bit html elemanı barındırır.
Dikkat ederseniz html etiketi tüm belgeyi kucaklamış kod satırının başında ve sonunda var .Burdan anlamamız gereken şey internet siteleri html tagı(etiketi) ile başlar html etiketiyle biter.
Sonrasında dikkatinizi çekecek iki önemli etiket var. Bunlardan biri head diğeri ise body.Head bölümünde arama motorlarına bilgi sağlamaya çalışırız.Bunlardan bazıları:
Sayfanın başlığı (<title> </title> etiketleri arasına yazılan yer.Kullanıcılar bunu görebilir.)
Anahtar kelimler,Meta açıklama denilen arama motorlarında görüntülenen açıklama kısımları.
Web sayfalarını oluştururken CSS teknolojisinden faydalanırız.Web sayfalarına stiller uygulayarak daha renkli sayfalar oluşturmamızı sağlayan bu dilin dosyalarınıda çoğu zaman head bölümüne ekleriz.
Keza dinamik web sayfalar oluşturmamızı sağlayan ve kullanıcı taraflı bir dil olan javascript kodlarını da head kısmına yerleştirebiliriz.
Html ile hazırlanan belgelerin uzantısı html,html ve xhtml olabilir.Html kodlarını yazarken dikkat edilmesi gerekenş eyler:
<html> ile başlayan etiket </html> bitiş etiketiyle sonlanır.
<br /> <img /> gibi tek yazımla kullanılan etiketler de vardır.
Html kodları(tag) türkçe karakter barındırmaz.
Büyük ve küçük harf kullanımı fark etmez ama kabul gören yazım (syntax) küçük harflerdir.
Şuan için bile bu kadar fazla bilgi yeterli kafanız karışsın istemiyorum.Head bölümüne arama motorları için ve tarayıcıların yorumlaması için bilgiler girildiğini unutmamak yeterli.
Son olarak body etiketinden bahsetmek istiyorum.Body etiketleri arasında kalan her şey web sitemize uğrayan ziyaretçinin gördüğü herşeyi içerir.
Örneğin kod editöründe yaptığımız web sitesi içerisindeki h1 etiketleri başlık etiketlerinden biridir.Ve web sayfalarımızda başlıklar oluşturmamızı sağlar.Diğer gördüğünüz p etiketi ise paragraflar oluşturmamızı sağlayan html kodlarından biridir.
Css Html sayfalarına stil uygulamamıza yardımcı olan teknolojidir
Eminim yukarıdaki yaptığım web site tanımından rahatsız oldunuz.Bir web sitesi böyle olmaz ki dediğinizi duyar gibiyim.Bu algıyı kırabilmem için web sayfamızda css kullanmalıyım.Belki vay be web site nasıl bu hale geldi diyeceksiniz.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Css ve html kardeşliği</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
</head>
<body>
<header class="w3-container w3-padding-16 w3-center w3-red">
<h1>Yeni web sitemiz</h1>
</header>
<p class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue w3-padding-16 w3-container">Az önceki paragraftan eser yok değilmi</p>
<h2>Birde tablo ekleyelim</h2>
<table class="w3-table w3-bordered w3-striped w3-border test w3-hoverable">
<thead><tr class="w3-green">
<th>html</th>
<th>Css</th>
<th>Javascript</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web sayfalarının iskeletidir.</td>
<td>Web sayfalarını süsler stiller oluşturur</td>
<td>Javascript ise etkileşimli ve dinamik web sayfalar oluşturmamıza yardım eder.</td>
</tr>
</tbody>
</table>
<h3>Birde Javscript ile tanışın.</h3>
<p>Aşağıda gördüğünüz butona lütfen tıklayın.</p>
<button onclick="window.alert('Merhaba Nasılsın')">Çalıştır</button>
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Html öğrenerek hemen web site yapmaya başlayabilirsiniz.</i></p>
</div>
</body>
</html>
Biraz daha ilerletirsek normal bir web sayfası oluşturabiliriz.Ama daha çok erken o kadar kolay ve hızlı öğreneceğiz ki kodlama öğrenirken en önemli şey sabır.Uygulamalarla birlikte html bu sitede çok kolay öğreneceksiniz.Sadece nelerle karşılacağımızın sunumu niteliğinde olan bir ders bu.
Eğer seo öğrenmek istiyorsanız HTML dilini asgari düzeyde bilmeniz gerekebilir.
Ben web sitesi hazırlarken Google'ın da dediği gibi daha tasarım süreceindeyken kararlar veriyorum.Arama motorları için önemli olan html etiketleri bulunmaktadır.Bunlara semantic etiketler de deniliyor.Article gibi.Header,footer,nav...
Bir web sitesi yapmak için editör kullanacağız.Bilgisayarınızdaki notepadle bile web sitesi yapılabilir ama kodları renkli göstermez yardımcı olmaz kod yazmanıza.Benim tercihim Netbeens ide editörü.Youtube video derslerinde bu html editörü üzerinden dersler anlatacağım.
Evet arkdaşlar html nedir konusunu anlatmaya çalıştığım makalemin şimdilik sonuna geldik.Html dersleri tüm hızıyla devam edecek.Web tasarım ve kodlama öğrencisi olarak sizlerle öğrendiğim herşeyi paylaşmaya devam edeceğim.İyi kodlamalar.Yeni Yılınız Kutlu Olsun.
HTML Resimler <img> Etiketi HTML'de resimler <img> etiketi ile gösterilir. <img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir. src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar: <img src="URL" alt="alternatif metin"> Örnek <!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html> Kendiniz deneyin » Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğin
<link> Etiketi Örnek Harici bir stil dosyasına bağlanma: < head > < link rel= "stylesheet" type= "text/css" href= "googledrive.css"/> < /head > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9IeeNUkg43XLWstUHVuTzg5a28" /> </head> <body> <h1>Bu başlık link verilmiş bir stil dosyasıyla biçimlendirildi.</h1> <p>Bu paragraf ve sayfa arka planı da aynı şekilde biçimlendirildi.</p> </body> </html>
<style> Etiketi Örnek <style> elementinin bir HTML belgesinde kullanımı: < html > < head > < style > h1 { color: green; } p { color: red; } < /style > < /head > < body > < h1 > Bu bir başlık < /h1 > < p > Bu bir paragraf... < /p > < /body > < /html > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <head> <style> h1 {color:green;} p {color:red;} </style> </head> <body> <h1>Bu bir başlık</h1> <p>Bu bir paragraf...</p> </body> </html>
CSS overflow Boyutları belirlenen bir html elemanın içeriği kutu boyutunu aştığı durumlarda css overflow özelliği ile gösterimler kontrol edilebilir.Kaydırma çubuklarının çıkıp çıkmayacağını veya çıkacaksada x yönünde mi y yönünde mi kaydırma çubuğu istiyoruz gibi sorularımızı cevaplayan ve çözen bir özelliktir. Örnek: Bu css örneğinde iki tane div elemanından bir tanesine scroll diğerine ise hidden değeri verilmiştir. div.scroll { background-color: yellow; width: 150px; height: 150px; overflow: scroll; } div.hidden { background-color: pink; width: 150px; height: 150px; overflow: hidden; } Kendiniz deneyin » CSS overflow nedir nasıl kullanılır Overflow özelliği ile birlikte içeriğin elementin boyutlarını aşması durumunda kaydırma çubuğunun gösterilip gösterilmeyeceğini kontrol edebiliriz. CSS overflow CSS overflow özellikleri Varsayılan Değ
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript kullancı taraflı bir dildir.Öğrenilmesi en kolay web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir.
CSS empty-cells table#tablom {<br> empty-cells:<span id='rfrnscsscde'>show</span>;<br>}<br> CSS empty-cells değerleri show hide initial Sonuç Ekranı Tabloda boş bir hücre olduğunda ,boş hücrenin kenarlarının gösterilip gösterilmesi için kullanılır. CSS3 HTML Javascript Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com
<li> Etiketi Örnek Bir sıralı (<ol>) ve bir sırasız (<ul>) HTML listesi: < p > Sıralı liste: < /p > < ol > < li > Siyaset < /li > < li > Ekonomi < /li > < li > Spor < /li > < /ol > < p > Sırasız/maddeli liste: < /p > < ul > < li > Siyaset < /li > < li > Ekonomi < /li > < li > Spor < /li > < /ul > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <p>Sıralı liste:</p> <ol> <li>Siyaset</li> <li>Ekonomi</li> <li>Spor</li&g
Yorumlar
Yorum Gönder