HTML Web Sayfası Oluşturma
Hiper Metin İşaretleme Dili’nin İngilizcesi olan Hypertext Markup Language’ın kısaltılmış hali yani HTML ile kendi web sayfanızı oluşturabilirsiniz.
Her web sayfasının kullanıcı tarafından görünen kısmını oluşturan HTML, öğrenmesi kolay ve eğlenceli bir metin işaretleme dilidir. Bu eğitim serisiyle HTML hakkındaki temel bilgileri edinmiş olacaksınız.
HTML Etiketleri
HTML’de her şey birer etiket içerisinde yer alır ve bu etiketlerin hepsi farklı görevlere sahiptir. Her etiket [enlighter lang=”html”]<[/enlighter] ve [enlighter lang="html"]>[/enlighter] işaretleri içerisinde başlar ve [enlighter lang=”html”][/enlighter] işaretleri içerisinde biter. Mesela aşağıdaki örnekte 5. satırda [enlighter lang=”html”]
Basit Bir HTML Sayfa Örneği:
[enlighter lang=”html”]
Sayfa İçindeki Başlık
Bu bir paragraf alanıdır. Buraya genellikle sayfadaki uzun yazılar gelir.
[/enlighter]
HTML Sayfa Örneğimizi İnceleyelim:
Örneğimizin 1. satırındaki [enlighter lang=”html”][/enlighter] etiketi, dokümanın en başında yer alır ve tarayıcıya bu dokümanın bir HTML dokümanı olduğunu söyler.
2. satırda yer alan [enlighter lang=”html”][/enlighter] etiketiyse içerisindeki metinlerin HTML olduğunu belirtir.
3. satırda HTML sayfamızın üst kısmını oluşturan ve İngilizce baş anlamına gelen [enlighter lang=”html”]
[/enlighter] etiketi yer alıyor. Bu etiket 5. satır için yukarıda açıkladığım [enlighter lang=”html”]7. satırdan itibaren başlayan ve İngilizce gövde anlamını taşıyan [enlighter lang=”html”]
[/enlighter] etiketi ve 9. satırdaki [enlighter lang=”html”]
[/enlighter] paragraf etiketi gibi etiketleri içerisinde barındırır.
HTML Dosyası Oluşturma
Örneğimizi bilgisayarınızda denemeniz oldukça kolay çünkü HTML, her türlü tarayıcıda çalışır ve herhangi bir program yüklenmesi gerekmez.
HTML dosyası oluşturmak için Windows işletim sistemindeki Not Defteri veya benzeri bir metin editörüne örneğimizdeki kodları kopyalayın ve metin dosyasını “metinadi.txt” yerine “metinadi.html” olarak kaydedin. Kaydetmiş olduğunuz dokümanı herhangi bir tarayıcıda çalıştırdığınızda aşağıdaki gibi bir görüntüyle karşılaşacaksınız.
Sık Kullanılan Bazı HTML Etiketleri
En yaygın kullanılan ve sizin de sık sık kullanacağınız bazı HTML etiketlerini aşağıda listeledim. Bunlar HTML’deki etiketlerin tamamı değildir ve tüm HTML etiketlerini görmek için W3.org’un tüm HTML elementleri sayfasını ziyaret edebilirsiniz.
Aşağıdaki örneklerimizin tamamı [enlighter lang=”html”]
[/enlighter] etiketi içerisinde olacağından kodları daha sade bir şekilde sunuyorum. Örnekleri denemek isterseniz gövde içerisinde kullandığınızdan emin olun.HTML’de Yorum Satırı Yapma
Yorum satırları, HTML dosyalarının içerisinde görünen ve tarayıcının kullanıcılara göstermediği kısımlardır. HTML’de yazdığımız kodlara yorum eklemek için [enlighter lang=”html”][/enlighter] etiketlerinin arasında yorumlarımızı yazıyoruz.
HTML Yorum Satırı Örneği:
[enlighter lang=”html”]
[/enlighter]
HTML’de Bağlantı Oluşturma
Bağlantı etiketi, HTML’de en çok kullanılan etiketlerden biridir. HTML’de bağlantı vermek için [enlighter lang=”html”]href=””[/enlighter] içerisindeki çift tırnakların arasına bağlantıyı ve [enlighter lang=”html”][/enlighter] ve [enlighter lang=”html”][/enlighter] etiketleri arasına görünecek metni yazmalıyız.
Hemen aşağıdaki örneğimizde HTML bağlantı etiketinin tamamı birlikte yer aldığı için daha anlaşılır olacaktır.
HTML Bağlantı Verme Örneği:
[enlighter lang=”html”]
Özgürce Yaz Sitesine Git
[/enlighter]
HTML’de Kalın Yazı ve İtalik Yazı Etiketleri
HTML’de [enlighter lang=”html”][/enlighter] etiketi arasında yer alan metnin tamamı kalın yazıyla yazılmış gibi görünür. İtalik yazı görünümü içinse [enlighter lang=”html”][/enlighter] etiketi kullanılır.
HTML Kalın Yazı ve İtalik Yazı Örneği:
[enlighter lang=”html”]
Normal yazı kısmı ve kalın yazı kısmı.
Adam öyle iriydi ki herkes ona Koca Hasan diye hitap ediyordu.
[/enlighter]
Span Etiketi ve Satır İçi Stil Verme
[enlighter lang=”html”][/enlighter] etiketi genellikle paragraf içerisindeki metinlerin belirli bölümlerine çeşitli özellikler vermek için kullanılır.
Aşağıdaki örneğimizde Span etiketinin içindeki metni [enlighter lang=”html”]style=”color:blue”[/enlighter] koduyla maviye çevirdik. Buradaki Color, yazı rengini iki nokta üst üsteden sonraki renge çevirmeye yarıyor. Örneğimizde Blue dediğimiz için metin mavi görünecektir.
Span Etiketi ve Style Örneği:
[enlighter lang=”html”]
Onun çok güzel mavi gözleri vardı.
[/enlighter]
Div Etiketi ve Renk Kodları
[enlighter lang=”html”]
[/enlighter] etiketi hemen hemen her yerde görebileceğiniz bir kapsayıcıdır. HTML’de herhangi bir bölümü ifade eder. İçerisinde diğer birçok etiket yer alabilir.
Bu örneğimizde [enlighter lang=”html”]
[/enlighter] etiketi içerisine metin etiketleri yerleştirdik ve yazı rengini stil vererek değiştirdik. HEX renk kodu dediğimiz [enlighter lang=”html”]style=”color:#0000FF”[/enlighter] bu kodla ekranda görünebilecek tüm renkleri elde etmemiz mümkün. HEX renk kodlarını kolayca belirleyebilmek için W3 Schools’un HTML renk paletini kullanabilirsiniz.
Div Etiketi ve HTML Renk Kodu Örneği:
[enlighter lang=”html”]
Bu Bir Başlıktır
Bu bir paragraftır.
[/enlighter]
HTML’de Resim Ekleme
[enlighter lang=”html”][/enlighter] etiketiyle yine bağlantı verme etiketinde olduğu gibi resmin adresini yazarak HTML’de resimleri görüntülemek mümkün. [enlighter lang=”html”]src=””[/enlighter] kısmındaki çift tırnakların arasına gelen adrese sahip resim tarayıcılarda tam ekran olarak görünecektir. Eğer resmin belirli bir boyutta görünmesini isterseniz [enlighter lang=”html”]height=””[/enlighter] parametresinin çift tırnakları arasına piksel cinsinden resmin boyunu veya [enlighter lang=”html”]width=””[/enlighter] parametresini kullanarak yine aynı şekilde resmin enini belirtebilirsiniz.
Örneğimizde resmin 48 piksel eni ve boyu var ayrıca [enlighter lang=”html”]alt=””[/enlighter] parametresiyle resmin neyi içerdiğiyle ilgili bir açıklama da ekledik.
HTML Resim Ekleme Örneği:
[enlighter lang=”html”]
[/enlighter]
HTML’de Liste Oluşturma
Liste oluşturmak için en başta listenin dış elementini [enlighter lang=”html”]
[/enlighter] etiketiyle oluşturmalıyız. Ardından bu etiketin içerisine [enlighter lang=”html”]
[/enlighter] etiketiyle dilediğimiz kadar liste elemanı ekleyebiliriz.
HTML Liste Örneği:
[enlighter lang=”html”]
- Kahve
- Limonata
- Su
[/enlighter]
Basit Örnek HTML Sayfa
En basit haliyle mobil uyumlu bir HTML sayfasının yapısını görebilmeniz için mobil uyumlu basit bir HTML sayfa oluşturdum.
Mobil Uyumlu HTML Sayfa Örneği:
[enlighter lang=”html”]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et sodales diam. Proin vehicula dui sed urna ullamcorper pretium. Nulla facilisi. Sed a fringilla ex. Donec vel rutrum nisi. Phasellus at viverra diam, quis scelerisque purus. Sed lobortis eros sed leo sagittis, quis pellentesque dui cursus. Cras pharetra sapien orci, at fringilla dolor ultrices a.
Cras dignissim tempor neque, eu ullamcorper felis convallis ac. Maecenas nec ultricies felis, sit amet vulputate nibh. Aliquam urna diam, eleifend nec dictum non, vulputate in mi. Vestibulum vitae convallis tellus. Proin accumsan consequat orci vulputate hendrerit. Suspendisse sit amet ante ac nibh placerat faucibus ut a mauris.
Sed iaculis justo tortor, nec interdum odio cursus id. Suspendisse ex lacus, egestas et nisl congue, malesuada luctus nisl. Integer sed purus id nisi fermentum facilisis. Sed maximus dapibus magna, quis viverra lacus rutrum ut. Vivamus aliquam quam quis arcu interdum mollis.
Duis convallis tellus vel felis molestie, maximus commodo metus fermentum. Proin nec purus non ex elementum ultrices in ac libero. Nunc nisi velit, rhoncus eu vehicula vel, faucibus quis lacus.
Sayfa İçindeki Başlık
Alt Başlık
[/enlighter]
Yukarıdaki kodları kopyalayıp bir “index.html” içerisine kaydedin ve aşağıdaki kodları da aynı klasörün içerisindeki “style.css” dosyasına kaydedin. HTML dosyasını tarayıcınızda çalıştırdığınızda aşağıdaki gibi bir görüntü elde edeceksiniz.
Mobil Uyumlu Sayfa CSS Örneği:
[enlighter lang=”css”]
* {
font-family: Arial;
margin: 0;
padding: 0;
}
html {
background-color: #1d4657;
}
a {
text-decoration: none;
color: black;
}
header {
background-color: #4384b1;
width: 100%;
display: inline-block;
}
.menu {
float: right;
}
.menu li {
display: inline-block;
}
.menu li a {
color: white;
font-size: 16px;
font-weight: 300;
padding: 12px 18px;
display: inline-block;
}
.menu li a:hover {
background-color: #5fabe0;
}
.kutu {
width: 100%;
max-width: 1200px;
margin: auto;
}
.logo {
font-size: 24px;
font-weight: 600;
color: white;
padding: 7px 20px;
display: inline-block;
}
.logo:hover {
background-color: #5fabe0;
}
main {
padding: 30px 15px;
min-height: 770px;
background-color: white;
}
h1 {
text-align: center;
font-size: 36px;
margin-top: 15px;
margin-bottom: 30px;
}
h2 {
margin-top: 15px;
}
p {
margin-top: 15px;
}
.foto {
float: left;
margin: 0px 15px 15px 0;
padding: 5px;
background: #f7f5ed;
border: 1px solid #cccabc;
border-radius: 2px;
width: calc(100% – 15px);
max-width: 400px;
}
footer {
width: 100%;
display: inline-block;
}
footer .menu {
float: none;
text-align: center;
margin-top: 10px;
}
footer .menu li a {
padding: 6px;
margin: 6px;
}
footer .menu li a:hover {
background-color: #1d4657;
text-decoration: underline;
}
.copyright {
font-size: 14px;
color: #c5def4;
text-align: center;
margin: 5px 0;
}
[/enlighter]
Tavsiyem bu dosyaları kendiniz oluşturarak HTML ve CSS dosyalarına alışmanız olsa da dilerseniz dersteki örneği sıkıştırılmış haliyle burayı tıklayarak indirebilirsiniz.
Sonuç ve Bir Sonraki Ders
Temel web tasarım dersimizin ilk bölümü olan HTML web sayfası oluşturma dersimizde önemli HTML etiketlerini ve kullanımlarını, HTML sayfa oluşturmayı ve çalıştırmayı öğrendik. Bir sonraki dersimizde sizlere CSS kullanımından bahsedeceğim ve birlikte sıfırdan birkaç sayfalık bir HTML web sitesi oluşturacağız.
Temel Web Tasarım Dersleri
- HTML Web Sayfası Oluşturma
- CSS ile Mobil Uyumlu Site Yapımı