title HACKERLAB title HTML dersleri HTML NEDR HTML
<title> HACKERLAB </title> ➢HTML dersleri
HTML NEDİR? HTML, web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. Web tarayıcıları bu kodları anlayarak görsel web sayfalarına dönüştürürler. HTML bir programlama dili değildir. HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Özetle; öz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler
HTML yazmak için, hangi programa ihtiyacım var ? ? ? HTML ile web sayfası hazırlamak için program bir herhangi bilgisayarınıza yüklemenize gerek yoktur. Herhangi bir metin editörü (not defteri, wordpad gibi) html sayfaları oluşturmak için yeterlidir. Fakat kodları yazarken kolaylık sağlamak ve kod yazım hızını arttırmak için Dreamweaver, Notepad++, Sublime Text gibi programlar tercih edilebilir.
1. <html>, <head>, <body> gibi büyüktür-küçüktür içerisine yazılan kodlara etiket (tag) adı verilir. 2. Açılan her etiket kapatılır. Etiket kapatmak için “ / “ işareti kullanılır. </html>, </body> gibi. 3. HTML etiketlerinde Türkçe karakterler yer almaz. 4. Etiketler büyük veya küçük harfle yazılabilir. Fakat genel kabul görmüş yazım biçimi küçük harftir.
<!--. . ………. --> Kodlara açıklama yazmak için bu etiket kullanılır. (Yorum satırı olarak adlandırılır. ) Bu kısım sadece kod ekranında görünür. Tasarımı etkilemez.
<html>. . </html> Bu etiket diğer tüm etiketleri sarmalayan HTML diliyle kodlama yapılacağını belirten, sayfanın başında açılıp sonunda kapatılan bir etikettir.
<head>. . </head> Hazırladığımız sayfa ile ilgili bilgiler ve tanımlamaların yer aldığı kısımdır. Bu kısımdaki kodlar web sayfasında görüntülenmezler. Bu kodlarla elde edilen tabloda görüldüğü gibi <head> içine yazılanlar web’de görünmüyor.
<title>. . </title> Sayfanın başlığını verir ve Google açısından en önemli etikettir. Buraya yazılanlar tarayıcının üst bilgi kısmında, arama motorunda sayfa listelenirken ve sayfanız sık kullanılanlar gibi bir yere kaydolurken gözükecek olan kısımdır. Sayfa içeriği ile ilgili en uygun başlık yazılmalıdır. <head> etiketi içerisine yazılır.
<meta>. . . </meta> İçerik ile ilgili bilgi veren meta etiketleri, siteye göre değil, sayfaya göre şekillenmelidir. Mümkünse her sayfa için ayrı belirlenmeli ya da otomatik olarak sayfaya göre meta etiketi oluşturacak bir sistem kullanmalıyız. Bu etiket HTML belgesi hakkında meta verileri sağlar. Meta verileri tarayıcıda gözükmezler. Meta etiketleri genellikle sayfanın description(açıklama), keywords(anahtar kelimeler), author(sayfa yazarı), last modified(son değiştirilme tarihi) ve diğer meta verilerini tanımlamak için kullanılır. Meta verileri tarayıcılar (sayfa yüklenirken nasıl görüntüleneceği), arama motorları (indexleme ve anahtar kelimeler) veya diğer web servisleri tarafından kullanılırlar.
<meta> Etiketi Parametreleri: Content-Type: Bu etiket, sayfanın karakter kodlamasını gösterir. Yazılmadığı takdirde sayfa ISO-8859 -1 karakter kodlaması olarak değerlendirilir. <head> etiketi içerisinde en üste yazılmalıdır. Content-Language: Sayfanın hangi dilde yayın yaptığının bilgisini verir.
<meta> Etiketi Parametreleri: Description: Sayfa ile ilgili açıklama girilen kısımdır. Çoğu zaman arama motorları açıklama kısımlarında sizin buraya yazdığınız yazıyı görüntülerler. Mümkün olduğu kadar kısa ve içerikle ilgili bilgi veren bir yazı girilmelidir. Keywords: Sayfa ile ilgili anahtar kelimeleri içerir. Çok fazla anahtar kelimenin olması zarar getirebilir. Birkaç anahtar kelime girilmesi yeterli olacaktır.
<meta> Etiketi Parametreleri: Robots: Bu tag arama motorlarına nasıl davranmaları hakkında ön bilgi veriyor. Sayfanın arama motorlarında listelenip listelenmemesini bu tag ile belirleyebiliyoruz. Sayfanın indexlenmesini istiyorsak; Sayfanın indexlenmesini istemiyorsak;
<body>. . </body> Bu etiket ziyaretçinin görebildiği, sayfanın tüm içeriğinin yer aldığı bölümdür. Kullanılacak etiketlerin bir çoğu body etiketinin içerisinde yer alır.
. . </br> HTML dili ile web sitesi oluştururken bir alt satıra geçmek için Enter tuşunun işe yaramadığını görürsünüz. HTML’de alt satıra geçmek için etiketi kullanılır. Bu kod sonucu elde edilen görüntü;
<hr>. . </hr> Bu etiket yazıldığı satıra satır boyunca çizgi çeker. Parametrelerle boyu uzayıp kısalabilir. Bu kodun tasarımı şöyledir;
<h>. . </h> Bu etiket yazılara başlık eklemek için kullanılır. Zaten etiketin ismi ingilizce heading yani başlık kelimesinin baş harfinden alınmıştır. Farklı büyüklükte başlıklar kullanılabileceği için h 1, h 2, h 3, h 4, h 5, h 6 olmak üzere 6 farklı başlık büyüklükleri mevcuttur. Burada en büyük başlık <h 1> en küçük ise <h 6> dır. Bu kod sonucu oluşan görüntü;
<u>. . </u> Bu etiket metnin istenen kısımlarının altını çizmek için kullanılır. İngilizce underline (altı çizili) kelimesinin baş harfinden gelmektedir. Bu kod sonucu oluşan tasarım;
<b>. . </b> Bu etiket yazıları kalın yapmak için kullanılır. İngilizce bold (kalın) kelimesinden gelmektedir. Web sayfalarında ziyaretçilerin dikkatini çekmek için kullanılır. Bu kod sonucu oluşan tasarım;
<em>. . </em> Bu etiket bir cümlede vurgulanması gereken yerde vurguyu gerçekleştirir. İngilizce emphasis(vurgu) kelimesinden gelmektedir. Bu kodun tasarımı şöyledir;
<i>. . </i> Bu etiket metni eğik yazmak için kullanılır. Italic kelimesinden gelmektedir. Bu etikette ziyaretçinin dikkatinin çekilmesi istenen yerlerde kullanılır. Bu kod sonucu oluşan tasarım;
<a>. . </a> Bu etiket başka bir siteye veya site içerisinde farklı bir sayfaya yönlendirmek için kullanılır. <a> etiketinin href parametresi yönlendirilecek sayfayı gösterir. Site içerisinde yönlendirme Başka bir siteye yönlendirme Küçük resme tıklayınca büyük resmi başka sayfada görüntüler
<p>. . </p> Yazdığımız metini paragraflara bölmek için kullanılır. Uzun yazılarda okunabilirliği arttırır. Bu kod sonucu oluşan tasarım;
<center>. . </center> Bu etiket yazılan yazının ortalanması için kullanılır. İngilizcedeki center (merkez) anlamından gelir. Bu kodun tasarımı şöyledir;
<strike>. . </strike> Bu etiket arasına yazılan yazılar üstü çizili görülür. <s> … </s> şeklinde de kullanılır. Bu kodun tasarımı şöyledir;
<strong>. . </strong> Bu etiket arasına yazılan yazılar normal boyutundan daha kalın görülür. Bu kodun tasarımı şöyledir;
<font>. . </font> Font etiketi metin rengini ayarlama, yazı tipini değiştirme ve boyutunu ayarlamak için kullanılır. Tek bir etiketin bu 3 özelliği değiştirebilmesi, aldığı parametreler sayesinde olmaktadır. ● Size parametresi: Metnin boyutunu ayarlamak için kullanılır. Yazının büyüklüğü 1 ile 7 arasında değer alır. Face parametresi: Yazı tipini değiştirmek için kullanılır. Bilgisayarda kullandığımız birçok yazı tipi geçerli olarak kullanılabilir. Fakat okunabilirlik ve tarayıcı desteği açısından Arial, Times New Roman gibi yazı tipleri tercih edilmelidir. Color parametresi: Yazı rengini değiştirmek için kullanılır. Red, blue, yellow gibi renklerin ingilizcesi kullanılabileceği gibi #3 b 457 c gibi renk kodları da kullanılabilir. NOT: Bu özellikler tek bir <font> etiketi içerisinde kullanılır.
<font> Etiketi Örnek : Bu kodların sonucu elde edilen tasarım;
<marquee>. . </marquee> Bu etiketle sayfada kayan yazılar oluşturulur. Direction: Kayma işleminin hangi yöne doğru yapılacağını belirler. Alacağı değerler left ve right’dir. Behavior : Kayma işleminin tek yönde değil iki yönde olması gerektiğini belirtmemize yarar. Alacağı alternate değeri komutun çalışmasını sağlar. Alternate yerine slide değeri vererek de kayma işleminin bir tur atmasından sonra bitmesini ve yazının bittiği yerde kalmasını sağlarız. Loop : Kayma işleminin kaç kez olması gerektiğini belirler. Width : Kayma işleminin olacağı genişliği yatayda belirler. Height : kayma işleminin olacağı genişliği dikeyde belirler.
<marquee> Etiketi Kullanımı:
<img>. . </img Hazırlamış olduğunuz web sayfasının içeriğine uygun olarak resimler eklemek için kullanılan html etiketidir. Bazı parametreler alır. img src etiketi ile kullanılan birtakım parametreler bulunur. Bunlar; width, height, border, align, alt parametreleridir. Width: Eklenilecek resmin pixel cinsinden genişliğini gösterir. Height: Eklenilecek olan resmin pixel cinsinden yüksekliğini gösterir. Border: Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Alt: Fare ile resmin üzerine gelindiğinde yazılmasını istediğiniz metni belirlemek için ya da resim yüklenemediği zaman resmin yerinde gösterilecek yazı için kullanılır. Align: Eklenilecek olan resmin nasıl hizalanacağını belirtmek için kullanılır. Left değeri ile kullanıldığı zaman resim sola hizalı, right değeri ile kullanıldığında resim sağa hizalı, center ile kullanıldığında ise resim ortalanmış olarak sayfaya eklenecektir. Source: Eklenilecek resmin kaynağını gösterir.
<img> Etiketi Kullanımı: Görünen kodda resimler klasöründeki hackercan. jpg isimli resmi sayfada gösteriyor. genişliği 250 px ve yüksekliği 85 px. Resmin üzerine fareyi getirdiğimizde ise “Hacker. Can” yazıyor.
< img etiketi ile hareketli resim ekleme: > Resmimizin hareketli resim olabilmesi için uzantısı “gif ” olmalıdır.
Arka planda otomatik olarak müzik çaldırmak: src= Müzik dosyasının yolunu belirttiğimiz bölüm. autostart= Html sayfamız yüklendiği zaman müziğin otomatik olarak çalmasını sağladığımız bölüm. Değeri true olursa müzik otomatik olarak başlayacaktır. loop= Müziğin kaç kere çalacağını belirteceğimiz bölüm. True veya -1 değerini yazarsak sayfamız açık kaldığı sürece müzik sürekli çalacaktır. False değerini yazarsak müzik dosyası bir kere çalacaktır.
Web sayfasına video eklemek: <video>…</video> Videonun tam adı yazılmalı ve uzantısı “mp 4” olmalı. Web sayfamıza video ekleye bilmemiz için <video></video> etiketlerini kullanmamız gerekir. controls : Varsayılan video denetimlerini gösterir oynat, duraklat, vb. . . (örnek kullanım: controls veya controls="controls" )
Video Formatları ve Tarayıcı Desteği Şu an için <video> elementini destekleyen üç format bulunmaktadır: mp 4, Web. M ve ogg:
TABLO ETİKETLERİ <table>. . </table> : Bir tablo oluşturmak için gerekli kodların tümü <table> ve </table> etiketleri arasına yazılır. Tablolar satır ve sütunlardan oluşur. <tr>. . </tr> : Tablo içerisinde satır oluşturmak için kullanılır. <td>. . </td> : Tablo içerisinde sütun oluşturmak için kullanılır. <th>. . </th> : Tablo içerisindeki sütunlardan başlık olanları belirtmek için kullanılır.
Tablo Örnek: Bu kodlarla elde edilen tablo ;
Tablo Parametreleri: border: Kenarlık oluşturmak için kullanılır. bordercolor: Kenarlıkların rengini değiştirmek için kullanılır. bgcolor: Tablonun arkaplan rengini değiştirmek için kullanılır. width: Tablonun genişliğini ayarlamak için kullanılır. height: Tablonun yüksekliğini ayarlamak için kullanılır. colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır. rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.
Tablo Parametreleri Örnek: Bu kodlarla elde edilen tablo ;
Listeleme Etiketleri <ol> : Ordered (sıralı) liste oluşturmak için kullanılır. Alt alta başında 1, 2, 3 olacak şeklinde. <ul> : Unordered (sırasız) liste oluşturmak için kullanılır. Alt alta başında madde işaretleri olacak şekilde. <li> : Listenin her bir öğesini oluşturmak için kullanılır
Listeleme Örnek: Sıralı Liste; Madde İşaretli Liste;
Listeleme Parametreleri: type parametresi: Listeleme etiketinin türünü değiştirir. <ol type=”A”> şeklinde bir kullanımda 1, 2, 3 yerine A, B, C yazılır. A, alfabetik bir liste oluşturur. Küçük harf de kullanılabilir. I, roma rakamı ile liste oluşturur. Küçük harf de kullanılabilir. <ul type=”square”> şeklinde bir kullanımda madde işaretleri kare şeklinde görülür. square: kare şeklinde liste oluşturur. circle: içi boş daire şeklinde liste oluşturur. disc: içi dolu daire şeklinde liste oluşturur. start parametresi: Bu parametre listeyi istenilen değerden başlatmak için kullanılır. <ol start=”C”> şeklinde bir kullanımda liste C harfinden başlar ve artarak devam eder.
Listeleme Örnek: İç içe(Hiyerarşik) Liste ; Not: Bu tarz listelerde kodlamayı karıştırmamak için öncelikle en dıştaki (yukarıdaki örnekte iç ve dış donanım birimleri) liste oluşturulur. Daha sonra iç listelere geçilir. Listeleri karıştırmamak için girintili şekilde yazmak işinizi kolaylaştıracaktır.
FORM OLUŞTURMA Site içerisinde arama yapma, yazılara yorum ekleme, kullanıcı girişi yapma, resim veya dosya ekleme gibi işlemler sitenin etkileşimi açısından önemlidir. Formlar olmasaydı sayfalar sadece statik öğelerden oluşmuş olacaktı, formlar ile sayfalarımız artık dinamik bir yapıya kavuşacak. Tabi şunu belirtmekte fayda var sadece HTML form öğelerini bilmek bu yukarıdaki saydığımız işlemleri gerçekleştirmek için yeterli olmayacak. Form oluşturmak için yeni etiketlere göz atalım.
Basit bir form oluşturalım: Bütün form öğeleri mutlaka <form> …. </form> öğeleri arasına yazılır. Aşağıdaki örnekte bir text kutusu ve bir butondan oluşan basit bir form tasarlanmıştır. Form öğesinin 2 adet parametresinden bahsedelim. Bunlar action ve method parametreleri. 1. Action parametresi: Form öğesinin olmazsa olmaz parametrelerinden biridir. Kullanıcının girdiği verilerin hangi sayfada işleneceğini gösterir. Örneğin çift tırnak arasına kayit. php yazılırsa girilen veriler bu sayfada işlenmek için oraya postalanır. 2. Method parametresi: Verilerin postalanma biçimini belirtmek için kullanılır. Genellikle get veya post parametreleri kullanılır. Örneğin get ile bir arama yaptığınızda adres çubuğunda aramanızla ilgili bilgilerin yer aldığını görürsünüz. Bu nedenle şifre gibi gizli bilgiler bu metotla kullanılmaz. Post ise daha güvenli bir veri gönderim tekniğidir.
İnceleyelim: Bu kodların tasarımı şöyledir;
Kodlara tek bakalım: 1 -Input Text: Bu klasik içerisine bir şeyler yazmamızı sağlayan dikdörtgen şeklindeki form öğesidir. Metin kutusu, textbox veya textfield diye adlandırabiliriz. 2 -Input Password: Şifrelerinizi girerken bunları gizleyerek ekrana bakan kişilerden gizleyen, text öğesinin benzeri bir kontroldür. 3 -Input Submit: Bu kontrol öğesi girilen verileri form action ve post öğesinde belirtilen yere göndermeye yarar.
Basit bir üye kayıt formu oluşturalım:
Kodlara tek bakalım: 4 -Input radio: Radio öğesi birden fazla seçenek arasından bir tanesini seçmek için kullanılır. Dikkat etmeniz gereken kısım ilişkili radio öğelerinin adları aynı olmalıdır. 5 -Input Checkbox: Checkbox birden fazla seçenek arasından bir veya daha fazlasını seçmek için kullanılır. Örnek olarak dilleri verdim. Bir kişi birden fazla dil bilebilir. 6 -Select: Önceden tanımlanmış seçenekler arasından bir tanesini seçmek için kullanılır. Örnek olarak yaşadığınız il güzel bir örnek.
>>DEVAM 7 - Textarea: Text kutusunun daha büyük ve çok satırlı biçimidir. Satır ve sütün sayısı değiştirilerek büyüklüğü ayarlanabilir. 8 -Input reset: Bu kontrol ise formu göndermek için değil içerisindeki verileri temizlemek için kullanılır.
<div>. . </div> <div> etiketi blok düzeyi unsurudur. Her <div> etiketi açılıp kapandığında bir alt satıra geçer. <div> leri tek olarak veya iç içe girmiş bir yapı olarak da kullanabiliriz. <div> etiketini bir kutu olarak düşünebiliriz. Web sayfasını kutu bölmelere ayırıyor gibi düşünebiliriz.
<div> Blokları: header: Sitenin başlık ve açıklama içeriği yer alır. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h 1 -h 6) birini kullanmanız yeterli. nav: Menüleri, Gezinti alanını temsil eder. Gezinti bağlantıları ya da içerik listesi için kullanılabilir. section: Genel bölümleme öğesidir. İçinde başlığı ve alt alanı olan bir makale olabilir. article: Bir makale ya da yazı alanını temsil eder. Bu bir blog yazısı, yorum alanı, haber vb. olabilir. aside: Ana içerikten ayrı yazılan, yüzeysel bir bağlantısı olan içeriğe denir. footer: Alt alanı temsil eder. Bu bir sayfanın, bir bölümün ya da bir yazının alt alanı olabilir.
<div> Blokları Kullanımı:
<span>. . . . <span> elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için Style ve CSS özelliklerinin ayrıca belirtilmesi gerekir. HTML <span> etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. <span>, <div> etiketinden farklı olarak bir satır içi element olduğu için metnin içinde kullanılması durumunda ilgili metni kesmez.
<div> ve <span> Elementi Kullanımı: ➤Bu kodlardaki style=” “ yapısı CSS derslerinde detaylı anlatılacaktır. Bu kodların tasarımı şöyledir;
BU EĞİTİM TAMAMLANDIĞINA GÖRE CSS DERSLERİNDE GÖRÜŞMEK ÜZERE
- Slides: 57