HTML ve CSS Nedir ? Temel Bilgiler

tarafından
HTML ve CSS Nedir ? Temel Bilgiler

HTML ve CSS Nedir ? HTML nedir ? CSS nedir ? Bu yazıda web siteleri oluşturmak için kullanılan dillerden biri olan HTML ve CSS hakkında temel bilgiler bulunacak.

Yapabiliyorsanız, İnternet’in icadından önce bir zaman düşünün. Web siteleri yoktu ve kağıda basılmış ve sıkıca bağlı kitaplar birincil bilgi kaynağınızdı. Peşinde olduğunuz bilgilerin tam olarak izini sürmek için oldukça fazla çaba ve okuma  gerekiyordu.

Bugün bir web tarayıcısı açabilir, istediğiniz arama motoruna atlayabilir ve uzağa arama yapabilirsiniz. Akla gelebilecek herhangi bir bilgi parmaklarınızın ucunda.

Bu yazıda, en baskın iki bilgisayar dili (HTML ve CSS) hakkında bilgiler vereceğim.

HTML ve CSS ile web siteleri oluşturmayı öğrenme yolculuğumuza başlamadan önce, iki dil arasındaki farkları, her dilin sözdizimini ve bazı ortak terimleri anlamak önemlidir.

HTML ve CSS Nedir?

HTML ve CSS Nedir ?

HTML , HyperText Markup Language, bu içeriği örneğin başlıklar, paragraflar veya görüntüler olarak tanımlayarak içerik yapısı oluşturur ve anlam verir. CSS (Cascading Style Sheets) Türkçe anlamıyla Basamaklı Stil Sayfaları örneğin fontları veya renkleri kullanarak içeriğin görünümünü biçimlendirmek için oluşturulan bir sunum dilidir.

İki dil (HTML ve CSS) birbirinden bağımsız ve bu şekilde kalmalı. CSS bir HTML belgesinin içine yazılmamalıdır ve bunun tersi de geçerlidir. Kural olarak, HTML her zaman içeriği temsil eder ve CSS her zaman bu içeriğin görünümünü temsil eder.

HTML ve CSS arasındaki farkın bu anlayışıyla, daha ayrıntılı olarak HTML’ye dalalım.

Genel HTML Terimlerini Anlamak

HTML ile çalışmaya başlarken, muhtemelen yeni ve genellikle garip terimlerle karşılaşırsınız . Zamanla hepsine daha fazla aşina olacaksınız, ancak başlamanız gereken üç genel HTML terim elementler , etiketler ve niteliklerdir.

Elementler

Elementler, bir sayfadaki nesnelerin yapısını ve içeriğini tanımlayan göstergelerdir. Daha sık kullanılan elemanların bazı başlıklar  <h1>  <h2> <h3> <h4> <h5> <h6> ve paragraf <p> elemanı); liste içerecek şekilde devam ediyor <a>, <div>, <span>, <strong>, ve <em> elemanları, ve daha birçok element.

Elemanlar < >, eleman adını çevreleyen açılı ayraçların  kullanılmasıyla tanımlanır . Böylece, bir eleman aşağıdaki gibi görünecek:

<a>

Etiketler

Bir elemanı çevreleyen daha küçük ve daha büyük açılı ayraçların kullanılması etiket olarak bilinen şeyi yaratır . Etiketler en çok açılış ve kapanış etiket çiftlerinde görülür.

Bir açılış etiketi bir elementin başlangıcını işaretler. Bir elemanın isminin izlediği bir işaretten daha küçük bir işaretten oluşur ve daha sonra bir işaretten daha büyük bir işaretle biter; örneğin <div>,.

Bir kapanış etiketi bir elemanın sonunu işaretler. Bir eğik çizgiden sonra gelen bir işaretten daha küçük bir işaretten ve öğenin adından oluşur ve daha sonra bir işaretten daha büyük bir işaretle biter; örneğin </div>,.

Açılış ve kapanış etiketleri arasına giren içerik, o öğenin içeriğidir. Örneğin bir bağlantı linki açılış etiketine <a> ve kapanış etiketine sahip olacaktır. </a> Bu iki etiket arasına giren, bağlantı linkinin içeriği olacaktır.

Yani <a> etiketleri şöyle görünecek:

<a>....</a>

Öznitellikler

Nitelikler , bir eleman hakkında ek bilgi sağlamak için kullanılan özelliklerdir. En yaygın nitelikler id, bir öğeyi tanımlayan niteliği; class bir element sınıflandırır; src gömülebilir içerik için bir kaynak belirten nitelik; ve href bağlantılı bir kaynağa köprü referansı sağlayan özellik.

Öznitelikler açılış etiketinde bir öğenin adından sonra tanımlanır. Genel olarak nitelikler bir ad ve bir değer içerir. Bu niteliklerin formatı, ardından bir eşittir işareti ve ardından belirtilen bir özellik değerinin izlediği özellik adından oluşur. Örneğin, href niteliği içeren bir <a> elementi aşağıdakine benzer:

<a href="url">Teknoloji Dostu</a>

HTML Belge Yapısını Ayarlama

HTML belgeleri, .html dosya uzantısı yerine dosya uzantısıyla kaydedilen düz metin belgeleridir(.txt). HTML yazmaya başlamak için öncelikle rahat kullandığınız bir düz metin editörüne ihtiyacınız vardır. Ne yazık ki bu, zengin metin editörleri olduğu için Microsoft Word veya Sayfaları içermez. HTML ve CSS yazmak için kullanılan en popüler düz metin düzenleyicilerinden ikisi Dreamweaver ve Sublime Text’dir. Ücretsiz alternatifler arasında Windows için Notepad ++ ve Mac için TextWrangler bulunmaktadır.

Tüm HTML belgelerinin aşağıdaki beyanı ve unsurları içeren gerekli bir yapıya sahip

<!DOCTYPE html> <html> <head> ve <body>

Belge türü bildirimi veya <!DOCTYPE html> web tarayıcılarını, hangi HTML sürümünün kullanıldığını ve HTML belgesinin en başında bulunduğunu bildirir. HTML’nin en son sürümünü kullanacağımızdan, belge türü beyanımız basit <!DOCTYPE html>. Belge türü bildiriminin ardından, <html> öğe belgenin başlangıcını belirtir.

<html> Öğenin içinde, öğe, <head> meta veriler de dahil olmak üzere (sayfa ile ilgili bilgilerle birlikte) belgenin üstünü tanımlar. <head> Öğenin içindeki içerik web sayfasında gösterilmez. Bunun yerine, belge başlığını (tarayıcı penceresindeki başlık çubuğunda görüntülenen), harici dosyalara bağlantılar veya diğer yararlı meta verileri içerebilir.

Web sayfasındaki görünür içeriğin tamamı <body> öğesinin içine düşecektir . Tipik bir HTML belge yapısının dağılımı şöyle görünür:

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Merhaba Dünya!</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir web sayfasıdır.</p>
<p>TeknolojiDostu</p>
</body>
</html>

HTML ve CSS gibi web site kodlamayı öğrenebileceğiniz temel site:

https://www.w3schools.com

Eğer sizde kodlamaya meraklıysanız veya az çok bilip sorunlarla karşılaşıyorsanız forumumuza üye olup diğer kullanıcılarla çözüm arayabilirsiniz.

Teknoloji Dostu Forumuna üye ol! Soruların varsa konu açabilirsin!