Anasayfa / Web Tasarım / Web Tasarım Nasıl Yapılır Html

Web Tasarım Nasıl Yapılır Html

Web tasarım nasıl yapılır html  sorulduğunda metin işaretleme dilinin İngilizcesi Hypertext Markup Language dir. Kısaltılmış hali ise HTML dir. HTML ile kendi web sitenizi yapabilirsiniz.

Bütün web sitesinin kullanıcı tarafından görüntülenen kısmını oluşturmakta olan HTML, öğrenmesi kolay olan, eğlenceli bir işletme dilidir. Eğitim serisiyle HTML hakkında temel bilgilendirmeleri edinmiş olacaksınız.

HTML Etiketleri nelerdir?

HTML de yazılan her şey bir etiket içerisin de yer almaktadır. Bu etiketlerin her birinin farklı görevleri vardır. Her etiket <ve> işaretleri içerisin de başlamaktadır. Ve </ ile >  işaretleri ile biter. Misal <title> ve </title> etiketleri arasında yer almakta olan metinler tarayıcı da görünecek olan yazıyı belirleyen dir.

ÖRNEKLEME:

  1. Satırdaki <!doctype html> etiketi en başta bulunur ve tarayıcıya dokümanın bir HTML dokümanı olduğunu bildirir.
  2. Satırda yer alan ise <html></html> etiketiyse eğer içerisin de olan metinlerin HTML olduğunu belirtir.
  3. Satırda ise HTML sayfamızın üst kısımlarını oluşturan ve İngilizce baş anlamına gelen <head></head> etiketi yer almaktadır ve <title><title> etiketleri gibi sayfanın başında yer alması gereken etiketleri içermektedir.
  4. Satırdan itibaren başlayan ve İngilizce de gövde anlamını taşıyan <body></body> etiketi ise HTML sayfasının en esas elementlerini içerecek olan kısımdır. Body kısmı, 8. Satırda yer alan ve sayfada başlık oluşturmaya yarayan <h1></h1> etiketi ve 9. Satırda bulunacak olan <p></p> paragraf etiketi gibisinden etiketleri içerisinde barındırmaktadır.

HTML Dosyası nasıl oluşturulur?

Bir HTML dosyası oluşturmak için önce Windows işletim sisteminiz deki not defteri veya ta benzer bir metin editörüne örnek verdiğimiz kodları kopyalayıp metin dosyasını “metinadi.txt” yerine “metinadi.html” olarak kaydedip kaydetmiş olduğunuz dokümanı herhangi bir çalıştırabilirsiniz.

Sık sık kullanılan bazı HTML etiketleri

En çok yaygın olarak kullanılan ve sizlerin de sık sık kullanacağı bazı HTML etiketlerini aşağıda listeliyorum. Bunlar HTML’ deki etiketlerin tabi ki de tamam mı değildir.

Örneklerimizin tamamı <body></body> etiketleri içerinde yer alacakları için kodları  daha sade bir şekilde sunmaktayım. Eğer örnekleri denemek isterseniz gövde içinde yani <body></body> içerisinde kullandığınız dan emin olmalısınız.

ÖRNEKLEMELER

HTML yorum satırı yapmak

Yorum satırları sadece HTML dosyalarının içinde görünen ve tarayıcıların kullanıcılara gösterilmediği kısımdır. HTML içinde yazdığımız kodlara yorum ekleye bilmek için <! – –  ve – -> bu etiket arasında yorumlarınızı yaza bilirsiniz.

HTML de bağlantı oluşturmak

HTML de sıklıkla kullanılan etiketlerden birisidir HTML de bağlantı verebilmek için href=”” içerisinde bulunan çift tırnakların arasına bağlantıyı <a href=””> ve </a> arasına görünecek  olan bir metini yazmalıyız.

HTML de kalın yazlar ve italik yazı tarzı etiketleri

Bunlar HTML de <b></b> etikti arasında yer almakta olan yazının tamamını kalın yazıyla yazılmış gibi gösterir. İtalik içinse <i></i> etiketi kullanılmakta dır.

Span ve satır içi stil verme etiketleri

<span></span> etiketi çoğunlukla paragraf içerisindeki metinlerin belirli bölümüne çeşitli özelik vermek için kullanılmakta.

Misal Span içindeki metin style=”color:blue” koduyla maviye çevrile bilir.

Div etiketi ve renk kodlamaları

<div></div> etiketini her yerde görme ihtimaliniz çok yüksektir. HTML de herhangi bir bölümü ifade etmektedir ve içerisinde bir çok etiket yer alabilmektedir.

<div></div> etiketi içerisine metin etiketleri ekleyerek ve yazı rengi stil vererek yapabilirsiniz. HEX renk kodu denilen style=”clor:#0000FF” bu kodu kullanarak ekranda görüle bilecek tüm renk seçeneklerini elde ede bilirsiniz.

HTML de resim eklemek

<img src =””> etiketiyle aynı bağlantı ekleme etiketinde olduğu gibi resim adresini vererek HTML de resimleri görüntüleye bilmek mümkün olmaktadır src=”” bölgesinde ki adrese sahip resim sitede tam ekran olarak görünecektir. Eğer ki resmin farklı bir boyuta görünmesini isterseniz height=”” çift tırnakların arasına piksel tarzın da resim resmin boyunu yada width=”” kullanarak aynı şekilde resmin enini belirtirsiniz.

Ayrıca alt=”” yazarak resmin ne içerdiğini göre bilirsiniz.

HTML de liste eklemek

Yapılan web sitesinde listeleme oluşturmak istediğinizde ilk olarak <ul> </ul>  olarak ekleriz. Sonra bu etiketin içerik kısmına ise <li> </li>   etiketini istenilen miktarda ekleriz.

HTML Etiketlerinin Anlamı:

Html: Konulardaki tüm etiket işlemlerini belirleyen etikettir. Kod yazılmaya başlandığında ilk başta açılıp kod kısmı yazıldığında bitirdikten sonra sonra kapanır.

Head: Yapılan web sitesinde konu ile ilgili yazılan bölümdür.

Body: Bu etiket ise yapılan web sitesinin yer alan ve internet kullanıcıların rahatlıkla görüntüleme sağlayan etikettir. Yazılan kodların bir çoğu bu etiketin üzerinden yazılır.

Html kodları yazılırken nelere dikkat edilmesi gerekir

İki çeşit ile olur bunlardan bir tanesi head  diğer bir kısmı ise body dir. Başlık ve içerik kısmı head etiketinden yapılır. Başlık ile ilgili yapılan veya yapılacak tüm kod kısmı bu etiketin altından yapılır. Web sitenizde gösterilmek istenen konular ise body etiketi altında yazılır.  Sitenizin sorunsuz ve sağlıklı bir şekilde çalışmasını istiyorsanız site içi ve/veya site dışı etkenlerine dikkat etmeniz gerekir. Site içi bağlantı web sayfasının birbirleri arasında veri akışının etkileşiminin doğru bir şekilde olmasını sağlar. Site dışı bağlantılar sosyal medya ile doğru bir şekilde etki etmesi gerekir. Teknolajinin gelişimiyle birlikte bir çok insan bu yöntemi tercih ediyor. Web siteniz az vakitte çok internet kullanıcılarına ulaşmaları için site dışı bağlantıları kullanmaktadırlar.

hakkında Acarnet Editör

Bu Yazıya da Bakabilirsiniz

Web Tasarım Hizmeti Alırken Dikkat Etmeniz Gereken 12 Kural

İşletmeler veya kişiler web sitesi yaptırırken bir çok hatalı kararlar alırlar ve sonucunda da çok …

Bir cevap yazın

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