HTMLYazılım

HTML DERSLERİ #1

HTML DERSLERİ; serisinde sıfırdan başlayarak HTML dünyasını öğreniyoruz… Hiç gözünüz korkmasın; adım adım, sakin sakin ve anlaşılır şekilde öğrenebileceksiniz.

Bilgi paylaşımını kolaylaştırmak için kim bir dil üretir ki?

Tim Berners-Lee, o zamanlar CERN’de çalışırken (Avrupa Nükleer Araştırma Merkezinde) HTML‘i ortaya çıkartmış. Ayrıca kendisi “www” sistemini kuran kişidir. Çalışanlar arasındaki bilgi, doküman vs. paylaşımını kolaylaştırmak için tasarlamıştır.

HTML DERSLERİ #1
HTML DERSLERİ <p> “Merhaba HTML” </p>

<MERHABA HTML>

HyperText Markup Language (Çeviri: Hiper Metin İşaretleme Dili) olarak tercüme edilir. “Hiper” ‘den kasıt, elektronik cihaz ekranlarında gösterilen sadece yazıdan ibaret olmayan gelişmiş özelliklere sahip belgelerdir. HTML’i tanımlarken “web sitesi tasarımının temelinde kullanılan iskelettir” diyebiliriz.

HTML, işaret dilleri yardımıyla Browser ile (www üzerinde yer alan bütün dokümanların görüntülenmesini sağlayan tarayıcılar) anlaşır ve Browser da bu işaretlerden anladığını ekrana yorumlayarak gösterir. [Browser=İnternet Tarayıcısı. Ör: Google Chrome]

Genellikle <> </>” arasına yazılı olan bu işaretlere, etiket / tag denir. Her etiketin Browser için ayrı bir özelliği vardır. Şu an son sürümü olan HTML5 kullanılmaktadır.
(Teşekkürler Lee…)

NASIL ÖĞRENİLİR?

Burada, HTML derslerine başlamadan önce ilk yapmamız gereken şey çalışma programlarımızı belirlemek… Yani HTML etiketlerini yazacağımız bir editör edinmemiz gerekiyor. Ücretsiz editörlerin başında Notepad, Sublime Text, Visual Studio vb. uygulamalar geliyor. Bunlardan birini seçtikten sonra artık küçük adımlarla etiketleri yazarak hangi özelliği olduğunu öğrenebiliriz. Küçük bir araştırma ya da denemedelerden sonra karar verebilirsiniz. Genelde bu editörlerin setup dosyası boyutları küçüktür.

HTML için eğitici olan web sitelerinden biri https://www.w3schools.com ama Türkçe yazılmadığı için HTML DERSLERİ #1 de kademeli olarak daha detaylı inceleyebiliriz. Kaliteli bir Web sitesi yapmak istediğimizde HTML görsel açıdan yeterli olmayacağı için destekleyici olarak bazı dillerden yardım alır. 

WEB SİTE TASARIMI İÇİN GEREKLİ ARAÇLAR

HTML DERSLERİ #1 1 HTML DERSLERİCSS (Cascading Style Sheets) Anlamı: Basamaklı Stil Şablonları/Sayfaları. HTML ile akrabalığı kendisinin de işaretleme dili olmasından geliyor. Fakat yetenekleri birbirinden farklıdır. Basit bir örnekle tanımlarsak; Bir sınıf listesi yapılması gerekiyor, listenin içeriğini HTML ile yazıp listenin görünümünü CSS ile tasarlayabiliriz. Sitemizin kullanıcı tarafından bakıldığında daha zengin bir hale getirmeye yardımcı olur.

HTML DERSLERİ #1 2 HTML DERSLERİJAVASCRİPT: Betik dil olarak anılan JS, Sitemizi biraz daha profesyonel bir hale getirmek için bize yol gösteriyor. Siteyi dinamik hale getirebilir, kullanıcılardan veri alabilir, seçim yaptırabilir ve seçime göre aksiyon alabiliriz. Hatta tamamen kullanıcı odaklı içerikler üretebiliriz.

HTML DERSLERİ #1 3 HTML DERSLERİBOOTSTRAP : Web site tasarımı yapmanın kestirme yolunu bize, ücretsiz bir CSS framework olan Bootstrap sunuyor. Yukarıda verdiğimiz tablo örneğinden gidersek, burada yapmamız gereken şey, size uygun olan mevcut tablolardan birini seçip içeriğini doldurmak. İşte bu kadar… 

*Önyüz (frontend) tasarımı dışında olanların da (php, python, JQuery vb. ) kendince özellikleri vardır.

 ÖRNEKLERLE HTML DERSLERİNE GİRİŞ

<1> Tüm HTML belgeleri <!DOCTYPE html> ile başlamalıdır. HTML belgelerinde <title> arasındaki </title> metin, belgenin başlığını belirler. Buraya yazılan metin, tarayıcının başlık çubuğunda veya sayfanın sekmesinde gösterilir. Bir kez kullanılır. Sayfa başlığının içeriği arama motoru optimizasyonu için çok önemlidir! Belgenin kendisi <html> başlar, </html> ile biter. Tasarlayacağımız bir sayfanın görsel etiketleri <body> ile </body> arasına yazılanlardır. Genel çalışma alanı da burasıdır.

<1> Görünümü:

HTML DERSLERİ #1 4 HTML DERSLERİ
HTML DERSLERİ PROGRAMDA GÖRÜNÜMÜ

<2> Çalışma alanımızın içerisine şimdi etiket/tagları yazabiliriz. Her site bir başlık ile başlar. En üst seviye başlık için kullanılan tag; <h1> ile başlar, </h1> ile biter. İki tagin arasına sitenize uygun başlığı verebilirsiniz. Birden fazla başlık atacağınız zaman boyuta göre sayı değişikliği olabilir. Başlık tagleri arasında bir hiyerarşi vardır.
<h1> büyük başlık olurken, <h6> küçük başlığı yazar. Aynı boyda olacaksa kullandığınız başlığın tagını tekrar uygulayabilirsiniz.

<2>Görünümü:

HTML DERSLERİ #1 5 HTML DERSLERİ
HTML DERSLERİ PROGRAMDA GÖRÜNÜMÜ

<3> Başlığı attıktan sonra alt satıra geçip konuyla ilgili paragrafımızı yazabiliriz. Bu arada alt satıra geçmek için etiketin sonuna <br> yazarak da alt satıra inebilirsiniz. Paragrafımızı yazacağımız tag; <p> ile </p> arasına yazılır. Başka bir paragraf ekleyeceğimiz zaman yine aynı tagı kullanabiliriz.

<3>Görünümü:

HTML DERSLERİ #1 6 HTML DERSLERİ
HTML DERSLERİ PROGRAMDA GÖRÜNÜMÜ

HTML DERSLERİ #1 ile temel girişi yaptık. Kod yazacağınız programa alışmak için biraz egzersiz yapabilirsiniz. Seriye devam etmeden önce şunu hatırlayalım: şu an hedefimiz öğrenmek olsa da ilerleyen zamanlarda kendi tasarımlarımızı yapmaya başlayacağız. Yeni başlamanın heyecanıyla zor örnekler ve hızlı çalışma sisteminden olabildiğince uzak kalmaya çalışın derim. Çünkü zor örneklerle uğraşırken aslında zihinsel olarak yorulup erken pes edebilir veya yetersizlik hissine kapılabilirsiniz. Şahsen ilk öğrendiğim dil C#’ da bunu yaptım ve basit bir örneğe bakarken bile bunalıyorum. Her yerden her şeyi almak pek de iyi bir şey değilmiş. Enerjinizi ve isteğinizi hemen bitirmemenizi öneririm.

Daha üretken tasarımlar ve yeni fikirler yapmanız içinse, en iyi yol hayallerinizi orijinal tutmak. Keyifli çalışmalar…

Teknolojiye dair yeni haber ve bilgilerden geri kalmayın!

RABİA YILMAZ: NETBEANS KOD TAMAMLAMA NASIL YAPILIR?
MURAT BERKSOY: BULUT NEDİR? NASIL KULLANILIR?BULUTA GİRİŞ
AHMET HALİL IŞIK: BİLGİSAYAR ALMA REHBERİ-1|DİZÜSTÜ MÜ? MASAÜSTÜ MÜ?
E.FATİH YÜCEL: TOTAL WAR SHOGUN 2 TÜRKÇE YAMA %100|STEAM VE TÜM DLC
MİHRİBAN TENGİLİMOĞLU: ELEKTRİKLİ OTOMOBİLLER
BARAN YILDIRIM: NÖRO PAZARLAMAYA(NEUROMARKETİNG)GRİŞ
CANSU MUSLU: LOJİK KAPILAR-1
SALİH ÖZTÜRK: AKILLI SAAT ALACAKLAR İÇİN 7 FİYAT PERFORMANS CANAVARI
ÖMER FARUK AKSUNGUR: MOBİL UYGULAMALARDAN NASIL PARA KAZANILIR?
NURİ ARSLAN: ÇOKLU KAMERA KULLANIMI TELEFONLARA NE KAZANDIRIYOR?
ELİF TORUN: ARTIRILMIŞ GERÇEKLİK(AUGMENTED REALİTY)NEDİR?
MUSTAFA ÇELİK: UZAYDAKİ TÜRKİYE UYDULARI
ÖMER ÖZOĞLU: YENİ BAŞLAYANLAR İÇİN JAVA SCRİPT! #1
MUHAMMED MUSAB AKDAŞ: YERLİ VE MİLLİ EN ÖNEMLİ 5 ASKERİ PROJEMİZ
ADMİN: WİKİPEDİA NEDİR?VİKİPEDİ NEDEN KAPANMISTI?AYDINLANACAKSIN1

2 Yorum

  1. I have been exploring for a bit for any high quality articles or weblog posts on this sort
    of space . Exploring in Yahoo I eventually stumbled upon this site.
    Studying this info So i’m glad to convey that I’ve an incredibly excellent uncanny feeling
    I came upon just what I needed. I most indisputably will make certain to don?t disregard
    this web site and give it a look regularly.

  2. Because the admin of this web site is working, no doubt very rapidly it will be renowned,
    due to its feature contents.

Bir cevap yazın

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

Başa dön tuşu