- 24 Ocak 2023
- 11,129
- 364
- 378
web uygulaması geliştirmenin temellerinden biri olan betik dili HTML ve basamaklı stil şablonları olan CSS ile temel web uygulamalarını birlikte geliştiriyor olacağız. HTML’ye Giriş ve Temel HTML Yapısı dersimizde temel HTML – CSS eğitimimiz başlangıç seviyesi kişiler için gerekli konuları kapsayacak. Bu ders dizisi sonunda katılımcı HTML5 ve CSS3 kullanarak sıfırdan web sitesi oluşturabilecek, en çok kullanılan HTML ve CSS etiketleriyle kendi web sitesini geliştirebilecek, CSS stil dosyaları ile istedikleri görüntüye sahip web ara yüzleri kodlayabilecekledir.
HTML Nedir?
HTML web sayfaları için standart işaretleme (markup) dilidir. HTML’in ilk versiyonu 1993 yılında Tim Berners-Lee tarafından oluşturulmuştur. HTML’in oluşturulduğu günden itibaren birçok versiyonu geliştirilmiştir.
HTML Versiyonları
HTML5 LogosuHTML5 Logosu
HTML5
XHTML
HTML 4.01
HTML 4.0
HTML 3.2
HTML 3.0
HTML 2.0
HTML 1
HTML, Hyper Text Markup Language kelimelerinin kısaltmasından oluşur ve .html, .html uzantılarına sahiptir. HTML kodları tarayıcılar tarafından yorumlandıktan sonra görüntüsü oluşur. O yüzden bir tarayıcıda farklı diğer tarayıcıda farklı sonuçlar elde etmek mümkündür. Dersimiz süresince tarayıcılar arası uyum içerisinde çalışan ara yüzler kodlayacağız.
HTML ara yüzleri hazırlarken birçok editör kullanabileceğiniz gibi bilgisayarınızda bulunan en basit metin editörünü de kullanabilirsiniz. HTML sayfaları oluştururken başlangıç seviyelerinde çok ihtiyacınız olmasa da ilerleyen derslerde uzun sayfalar için yazdığınız kodları yazım düzenine göre şekillendirecek editörler kullanılabilir. Örneğin Visual Studio Code IDE’si için geliştirilmiş HTML ve CSS sayfaları düzenli hale getirerek daha açık ve anlaşılır kod yazmanıza yardımcı olacaktır.
HTML nesneleri <> bloğu içerisine yazılan etiketlerden oluşur. HTML etiketlerinin özellikleri vardır. Bu özellikler isim ve değer çiftlerinden oluşur. Bu özellikler etiketlerle ilgili ek bilgileri tanımlamak için kullanılır. Örneğin: <meta charset=”utf-8”/> meta etiketinin özelliği olarak charset=”utf-8” tanımlanmıştır.
HTML Doküman Yapısı
HTML dokümanı ana olarak iki bölümden oluşur bunlar head ve body bölümleridir. HTML’ye Giriş ve Temel HTML Yapısı dersimizde bu konuya temel olarak değineceğiz. Head bölümünde sayfada görünmeyen ancak sayfa ile ilgili ayar etiketlerinin yer aldığı bölümdür. Body bölümünde ise sayfanın içeriğini oluşturan etiketler yer almaktadır.
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<p>Sayfa içeriği </p>
</body>
</html>
Tüm HTML dokümanları tanımlanırken doküman tipi tanımlanarak başlanmalıdır: <!DOCTYPE html> HTML doküman <html> etiketiyle başlar ve </html> ile biter. Html dokümanının sayfa içeriğini oluşturan, görünen kısmı <body> </body> etiketinin içerisine oluşturulur.
HTML Temel Etiket Yapısı
<!DOCTYPE html>
<html lang="tr">
<meta charset="utf-8">
<title>Sayfa Başlığı</title>
<body>
<h1>GeyikForum HTML – CSS Eğitimi</h1>
<p>Eğitim içerik metni.</p>
<p>Örnek paragraf metni.</p>
</body>
</html>
Etiketleri oluştururken temel HTML kodlarındaki unsurlardan biri HTML etiketleri birbirlerini kesmeyecek şekilde kapanır. Yani bir HTML etiketi açıldıktan sonra o etiket ya önce kapatılır ya da içerisindeki nesneyi tamamen kapsar.
<p>
Örnek metin <i>içeriği</p> hatalı
</i>
<p>
Örnek metin <i>içeriği</i> doğru
</p>
HTML etiketlerinde her bir etiket için ayrı özellikler tanımlıdır. Örneğin <img> etiketi kaynağı tanımlamak için src , alternatif metin için alt , boyutlandırmaları için ise width ve height özelliklerini alabilir:
<img src="logo.jpg" alt="mobilhanem.com" width="100" height="87">
HTML etiketlerinin özelliklerine değer verirken değerleri çift tırnak içerisinde verilmesi önerilir. Bu sayede arasında boşluk veya özel karakter olan değerler de rahatlıkla görüntülenebilmektedir.
<a href=https://www.geyikforum.com>
<a href="https://www.geyikforum.com">
HTML Etiketleri
HTML etiketlerini ana olarak iki başlık altında sunabiliriz. Bunlar Blok Seviyesi HTML Etiketleri ve Satır Arası HTML Etiketleridir. Blok Seviyesi HTML Etiketleri her zaman yeni bir satır ekleyerek ve tam genişliğe sahip olarak sayfada yer alır. Satır Arası HTML Etiketleri yeni satır eklemeden sayfada yer alır ve sadece gerekli olacak kadar genişliğe ulaşır yani içeriğinin uzunluğuna göre kendi uzunluğu da değişiklik gösterir.
<address> </address>
<article> </article>
<aside> </aside>
<blockquote> </blockquote>
<canvas> </canvas>
<dd> </dd>
<div> </div>
<dl> </dl>
<dt> </dt>
<fieldset> </fieldset>
<figcaption> </figcaption>
<figure> </figure>
<footer> </footer>
<form> </form>
<h1> </h1>
<header> </header>
<hr/>
<li> </li>
<main> </main>
<nav> </nav>
<noscript> </noscript>
<ol> </ol>
<p> </p>
<pre> </pre>
<section> </section>
<table> </table>
<tfoot> </tfoot>
<ul> </ul>
<video> </video>
<a> </a>
<abbr> </abbr>
<acronym> </acronym>
<b> </b>
<bdo> </bdo>
<big> </big>
<br/>
<button> </button>
<cite> </cite>
<code> </code>
<dfn> </dfn>
<em> </em>
<i> </i>
<img/>
<input/>
<kbd> </kbd>
<label> </label>
<map> </map>
<object> </object>
<output> </output>
<q> </q>
<samp> </samp>
<script> </script>
<select> </select>
<small> </small>
<span> </span>
<strong> </strong>
<sub> </sub>
<sup> </sup>
HTML – CSS
HTML sayfalar hazırlarken satır arası ve blok seviyesi HTML etiketleri istediğimiz ara yüzleri elde etmek için tek başına yeterli değildir. HTML sayfaları görsel olarak da zenginleştirmek için CSS yani basamaklı stil şablonuna da ihtiyaç duyacağız. CSS kodları temel olarak üç biçimde yazılabilir; satır arası, sayfa içerisine, harici dosyaya. CSS ile ilgili daha fazla bilgiyi ve örnekleri ilerleyen derslerimizde uygulamalı olarak paylaşacağız.
Özet
Temel HTML-CSS ders serimize bu dersimizle başladık. Bu dersimizde HTML ile tanıştık, HTML dokümanların sayfa yapısı, HTML etiketlerin temel yapısını ve HTML etiketlerin sınıflandırılmasını inceledik. Bir sonraki dersimizde HTML ve CSS ile ilk web sayfamızı oluşturarak HTML ile sayfalar oluşturarak yeni etiketlerle tanışacağız. Ayrıca ders serimizin devamında da bu yazımızda sadece ismi geçen etiketlerin kullanımını ve örneklerini oluşturacağız. Diğer HTML5-CSS3 derslerine erişmek için tıklayınız. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.tekmirc.com sitemizden de sorabilirsiniz.
HTML Nedir?
HTML web sayfaları için standart işaretleme (markup) dilidir. HTML’in ilk versiyonu 1993 yılında Tim Berners-Lee tarafından oluşturulmuştur. HTML’in oluşturulduğu günden itibaren birçok versiyonu geliştirilmiştir.
HTML Versiyonları
HTML5 LogosuHTML5 Logosu
HTML5
XHTML
HTML 4.01
HTML 4.0
HTML 3.2
HTML 3.0
HTML 2.0
HTML 1
HTML, Hyper Text Markup Language kelimelerinin kısaltmasından oluşur ve .html, .html uzantılarına sahiptir. HTML kodları tarayıcılar tarafından yorumlandıktan sonra görüntüsü oluşur. O yüzden bir tarayıcıda farklı diğer tarayıcıda farklı sonuçlar elde etmek mümkündür. Dersimiz süresince tarayıcılar arası uyum içerisinde çalışan ara yüzler kodlayacağız.
HTML ara yüzleri hazırlarken birçok editör kullanabileceğiniz gibi bilgisayarınızda bulunan en basit metin editörünü de kullanabilirsiniz. HTML sayfaları oluştururken başlangıç seviyelerinde çok ihtiyacınız olmasa da ilerleyen derslerde uzun sayfalar için yazdığınız kodları yazım düzenine göre şekillendirecek editörler kullanılabilir. Örneğin Visual Studio Code IDE’si için geliştirilmiş HTML ve CSS sayfaları düzenli hale getirerek daha açık ve anlaşılır kod yazmanıza yardımcı olacaktır.
HTML nesneleri <> bloğu içerisine yazılan etiketlerden oluşur. HTML etiketlerinin özellikleri vardır. Bu özellikler isim ve değer çiftlerinden oluşur. Bu özellikler etiketlerle ilgili ek bilgileri tanımlamak için kullanılır. Örneğin: <meta charset=”utf-8”/> meta etiketinin özelliği olarak charset=”utf-8” tanımlanmıştır.
HTML Doküman Yapısı
HTML dokümanı ana olarak iki bölümden oluşur bunlar head ve body bölümleridir. HTML’ye Giriş ve Temel HTML Yapısı dersimizde bu konuya temel olarak değineceğiz. Head bölümünde sayfada görünmeyen ancak sayfa ile ilgili ayar etiketlerinin yer aldığı bölümdür. Body bölümünde ise sayfanın içeriğini oluşturan etiketler yer almaktadır.
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<p>Sayfa içeriği </p>
</body>
</html>
Tüm HTML dokümanları tanımlanırken doküman tipi tanımlanarak başlanmalıdır: <!DOCTYPE html> HTML doküman <html> etiketiyle başlar ve </html> ile biter. Html dokümanının sayfa içeriğini oluşturan, görünen kısmı <body> </body> etiketinin içerisine oluşturulur.
HTML Temel Etiket Yapısı
<!DOCTYPE html>
<html lang="tr">
<meta charset="utf-8">
<title>Sayfa Başlığı</title>
<body>
<h1>GeyikForum HTML – CSS Eğitimi</h1>
<p>Eğitim içerik metni.</p>
<p>Örnek paragraf metni.</p>
</body>
</html>
Etiketleri oluştururken temel HTML kodlarındaki unsurlardan biri HTML etiketleri birbirlerini kesmeyecek şekilde kapanır. Yani bir HTML etiketi açıldıktan sonra o etiket ya önce kapatılır ya da içerisindeki nesneyi tamamen kapsar.
<p>
Örnek metin <i>içeriği</p> hatalı
</i>
<p>
Örnek metin <i>içeriği</i> doğru
</p>
HTML etiketlerinde her bir etiket için ayrı özellikler tanımlıdır. Örneğin <img> etiketi kaynağı tanımlamak için src , alternatif metin için alt , boyutlandırmaları için ise width ve height özelliklerini alabilir:
<img src="logo.jpg" alt="mobilhanem.com" width="100" height="87">
HTML etiketlerinin özelliklerine değer verirken değerleri çift tırnak içerisinde verilmesi önerilir. Bu sayede arasında boşluk veya özel karakter olan değerler de rahatlıkla görüntülenebilmektedir.
<a href=https://www.geyikforum.com>
<a href="https://www.geyikforum.com">
HTML Etiketleri
HTML etiketlerini ana olarak iki başlık altında sunabiliriz. Bunlar Blok Seviyesi HTML Etiketleri ve Satır Arası HTML Etiketleridir. Blok Seviyesi HTML Etiketleri her zaman yeni bir satır ekleyerek ve tam genişliğe sahip olarak sayfada yer alır. Satır Arası HTML Etiketleri yeni satır eklemeden sayfada yer alır ve sadece gerekli olacak kadar genişliğe ulaşır yani içeriğinin uzunluğuna göre kendi uzunluğu da değişiklik gösterir.
<address> </address>
<article> </article>
<aside> </aside>
<blockquote> </blockquote>
<canvas> </canvas>
<dd> </dd>
<div> </div>
<dl> </dl>
<dt> </dt>
<fieldset> </fieldset>
<figcaption> </figcaption>
<figure> </figure>
<footer> </footer>
<form> </form>
<h1> </h1>
<header> </header>
<hr/>
<li> </li>
<main> </main>
<nav> </nav>
<noscript> </noscript>
<ol> </ol>
<p> </p>
<pre> </pre>
<section> </section>
<table> </table>
<tfoot> </tfoot>
<ul> </ul>
<video> </video>
<a> </a>
<abbr> </abbr>
<acronym> </acronym>
<b> </b>
<bdo> </bdo>
<big> </big>
<br/>
<button> </button>
<cite> </cite>
<code> </code>
<dfn> </dfn>
<em> </em>
<i> </i>
<img/>
<input/>
<kbd> </kbd>
<label> </label>
<map> </map>
<object> </object>
<output> </output>
<q> </q>
<samp> </samp>
<script> </script>
<select> </select>
<small> </small>
<span> </span>
<strong> </strong>
<sub> </sub>
<sup> </sup>
HTML – CSS
HTML sayfalar hazırlarken satır arası ve blok seviyesi HTML etiketleri istediğimiz ara yüzleri elde etmek için tek başına yeterli değildir. HTML sayfaları görsel olarak da zenginleştirmek için CSS yani basamaklı stil şablonuna da ihtiyaç duyacağız. CSS kodları temel olarak üç biçimde yazılabilir; satır arası, sayfa içerisine, harici dosyaya. CSS ile ilgili daha fazla bilgiyi ve örnekleri ilerleyen derslerimizde uygulamalı olarak paylaşacağız.
Özet
Temel HTML-CSS ders serimize bu dersimizle başladık. Bu dersimizde HTML ile tanıştık, HTML dokümanların sayfa yapısı, HTML etiketlerin temel yapısını ve HTML etiketlerin sınıflandırılmasını inceledik. Bir sonraki dersimizde HTML ve CSS ile ilk web sayfamızı oluşturarak HTML ile sayfalar oluşturarak yeni etiketlerle tanışacağız. Ayrıca ders serimizin devamında da bu yazımızda sadece ismi geçen etiketlerin kullanımını ve örneklerini oluşturacağız. Diğer HTML5-CSS3 derslerine erişmek için tıklayınız. Konu dışı sorularınızı ve tüm yazılımsal sorularınızı sorucevap.tekmirc.com sitemizden de sorabilirsiniz.