7 Günde Html5 Nasıl Öğrenilir?

Html web sayfaları hazırlamak için kullanılan bir betik  dilidir. Zaman içerisinde gelişen html yapısı günümüzde HTML5 adıyla çok güçlü ve birçok özelliği barındıran bir hal almıştır. Bu yazımızda sizlere HTML5 ile ilgili kavramları öğreterek, html5 ile bir web sitesi oluşturmanın adımlarını göstereceğiz. html5 dersleri mize hoşgeldiniz.

Dersimizin videosuna buradan ulaşabilirsiniz.

Öncelikle şunu belirtmek isterim. HTML5 ile bir web sayfası oluşturmak için hiçbir programa ihtiyacımız yoktur. Bilgisayarınızda yüklü olan not defterini kullanarak html5 kodlarınızı yazabilirsiniz. Biz derslerimizde not defterinin biraz gelişmişi olan ve bize kod yazarken bazı kolaylıklar sağlayan notepad++ programını kullanacağız. Notepad++ programı ücretsiz bir program olup nasıl indirip bilgisayarınıza yükleyeceğinizi adım adım göstereceğim.

Sizde HTML5 öğrenmek için sabırsızlanıyorsanız gelin beraber derslerimize başlayalım. Html5 dersleri mizi dikkatli takip edip bilgisayarınızda uygulamaları yaparsanız sonucunu aalacağınıza emin olabilirsiniz.

Html5 Dersleri 1. Gün

Kodlarımızı yazarken kullanacağımız notepadd++ programı ile işe koyulalım. Programın internet adresi https://notepad-plus-plus.org/ Buradan download bölümüne girdiğinizde programın güncel versiyonunun linkini bulailirsiniz. (Şu anda 7.5.1 versiyonu mevcuttur.) Burda dikkat edeceğiniz işletim sisteminiz 32 bit ise programın 32 bit versiyonunu, işletim sisteminiz 64 bit ise programın 64 bit versiyonunu indirmek olacak.

html5 dersleri

Notepad++ programını indirdiniz. Bilgisayarınıza yüklediniz.  Masaüstünüze kısayolunu yerleştirin. Bir diğer ihtiyacınız olan programda Web tarayıcısı olacak. Chrome tarayıcısını tercih edebilirsiniz. Masaüstünüze html5 çalışmalar adlı bir klasör oluşturun. HTML5 çalışmalarımızı bu klasörün içinde toplayacağız.

html5 dersleri

Masaüstümüzde gerekli kısayolları kolay ulaşabileceğimiz şekilde yerleştirdiysek Notepad++ programını açarak işe koyulalım.

Notepad++ Arayüzü ve kullanımı

Programı açtığımızda karşımıza boş bir sayfa gelecektir. Bu sayfayı ilkwebsayfam.html ismiyle masaüstümüzde oluşturduğumuz html5 çalışmalar klasörüne kaydedelim. Dosya – Farklı Kaydet seçiyoruz ve karşımıza bir pencere geliyor.

html5 dersleri

Kaydete bastık ve ilkwebsayfam.html isimli boş dosyamızı oluşturmuş olduk. Html 5 sayfamıza başlarken aşağıdaki kodu yazarız.

bunu yazdığınızda tarayıcı belgenizin html5 formatında olduğunu anlar. ilk sayfamızı yazalım:

İlk html5 sayfamız

sizde yukarıdaki kodu  yazın ve sayfanızı kaydedin.

<html> ………………….. </html>        Html sayfamızın başlangıç ve bitişini işaret eden etiketlerdir.

<head> ………………….. </head>        Html sayfamızın ismi , karakter seti gibi html sayfamızla ilgili ayarların bulunduğu bölümdür.

<title> ……………………..  </title>        Adres çubuğunun üstünde görünen sayfa ismimizdir.

<body>………………………</body>      Sayfamızdaki içeriğin bulunduğu alandır.

html5 dersleri

Menüden Launch in Chrome a tıklayarak sayfamızı chrome tarayıcıda görüntülüyoruz.

html5 dersleri

Sayfaya açıklama ekleme

Açıklama satırları sayfada görünmez. Sadece sayfanın html kodlarına müdahale edenler için bilgilendirme amacıyla kullanılır. Yukarıda gördüğünüz gibi açıklama <!– ile başlar ve –> ile biter.

Html dosyalarının isimlendirilmesi

Dosyalarınızı isimlendirirken kelimelerin arasında boşluk karakteri bırakmayın. Kelimeleri birbirinden ayırmak istiyorsanız “-” işareti kullanabilirsiniz. Türkçe karakter kullanmayınız.

Örnek isimlendirmeler:    html-calismalar.html , yeni-web-sayfam.html , ilk-blog,yazim.html

Sayfaya başlık ekleme

başlıklar <h1> , <h2> , <h3> , <h4> , <h5> ve <h6> olmak üzere 6 tanedir. Bunlardan en büyük olanı <h1> , en küçük olanı <h6> dır.

yukarıdaki sayfayı tarayıcıda görüntülersek:

html5 dersleri

burda gördüğünüz gibi <h5> ve <h6> başlık olmasına rağmen normal yazılardan daha küçüktür.

<strong> …………………. </strong>  yazımızı kalınlaştırmak için kullanılır. Bu etiket html5 ile gelmiştir.

<em>…………………………… </em>   yazımızı italik( eğik) yazmak için kullanılır. Bu etiketde html5 ile gelmiştir.

tarayıcı görüntümüz:

html5 dersleri

burda dikkat ederseniz paragraflarımız yazdığımız gibi çıkmıyor. Paragraflara başladığımızı ve bitirdiğimizi de etiketlerle belirtmemiz gerekiyor.

<p> ……………………… </p> paragraf başlangıcı ve bitişini belirtir.

<br/>   Bir alt satıra geçer. Bu etiket gördüğünüz gibi tek kullanılır. Yani açtıktan sonra kapamaya gerek yoktur. (Kendi kendini kapatır.)

Şimdi tarayıcı görüntümüze bakacak olursak:

html5 dersleri

Html5 ile gelen yeni etiketler:

İlerideki html dersleri nişde karşınıza çıkacak yeni html5 etiketlerinin listesini sizinle paylaşmak istiyorum. Etiket isimleri ve açıklamaları şöyledir:

<canvas> : Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio> : Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri elirler.
<figure> : Media türü içerikler için grup oluşturulur.
<hgroup> : Belgedeki bir bölüm hakkında tanılama yapılacak alanı sağlar.

 

Leave a Reply

%d blogcu bunu beğendi: