Uzun zamandır farklı platformlar için front-end konulu ücretli eğitim setleri hazırlıyorum. Her zaman aklımda ücretsiz set hazırlayıp paylaşma fikir vardı. Steemit hesabımda bulunması için burada öncelikle Html ve Css konulu dersler paylaşacağım.
Html Eğitim Seti Ders 1 - Herkes İnternet Sitesi Yapabilir
Websitesi Nedir ?
Öncelikle websitesinin ne olduğundan bahsedelim. Geçmişte websiteleri .html uzantılı yalnızca birkaç paragraf yazı ve düşük bit imajlardan oluşan şeylerdi. Ancak günümüzde teknolojiyle beraber websitelerinin de gelişmesi önlenemiyor.
Tüm internet sitelerinde html(Hyper Text Markup Language) dili kullanılmaktadır. Elbette günümüzde html dili bilmek yeterli değil fakat websitesi oluşturmak istiyorsanız mutlaka bilmeniz gerekmektedir. Çünkü tarayıcıya bir sayfanın internet sitesi olduğu bilgisini vermek için html kodlarına ihtiyacınız vardır.
Websitesi; temelde internet tarayıcılarının kodları yorumlarıp ekrana görüntüler oluşturmasıyla meydana gelir. Yani yazacağınız kodlar internet tarayıcıları(Firefox, Chrome, Explorer vb.) tarafından biliniyor ve yorumlanıp ekrana sonuçlar gösteriliyor.
Kodları Nereye Yazacağız ?
Kodları windows işletim sisteminde notepad gibi yazı yazabileceğiniz metin editörlerine yazacaksınız. Kaydederken uzantılarını .html olarak ayarlayacaksınız ve bu sayfa artık bir internet sayfası olacak.
Hadi Başlayalım
Html Yazım Kuralları ve Standart Html Etiketleri
Html'de yazılan her koda, aynı zamanda etkiket diyebilirsiniz. Öğreneceğiniz ilk etiket <html></html> etiketi olacaktır. Zaten adını aldığı dilin kısaltması olarak kullanılıyor. Burada dikkat edeceğiniz nokta her html etiketi küçüktür "<" işareti ile başlar ve büyüktür ">" işareti ile son bulur. Aynı zamanda yukarıdaki etikette gördüğünüz gibi her html etiketinin bir açılışı bir de kapanışı vardır. Kapanışlar her zaman / işareti ile yapılır. Aşağıdaki kodları ve açıklamaları incelediğinizde daha iyi anlayacaksınız.
| Html etiketi | Açıklaması |
|---|---|
<doctype html> | Sayfanın en üstüne yazılır. Doysa tipinin html olduğu bilgisini tarayıcıya iletir. |
<html></html> | Yazılan tüm kodlar bu iki etiket arasına yazılmalıdır. |
<title></title> | Sayfa başlığının bulunacağı etikettir. Aynı zamanda tarayıcının üst kısmında görünen isim de bu alan içerisinden alınır. |
<head></head> | Sayfanın üst kısmında bulunur bazı özel etiketler head etiketi arasına yazılır. Arama motorlarının ilk baktığı yer de burasıdır. |
<body></body> | Sayfanın tüm içeriğini kapsayacak etikettir. Her şey body etiketleri arasında yer alır. |
Aşağıda hep birlikte kullanımını görebilirsiniz.
<html>
<head>
<title>Örnek Sayfa Başlığı</title>
</head>
<body>
Merhaba Dünya !
</body>
</html>
Örneği biraz inceleyelim. Html'de ilk yazılan kod her zaman son kapanır. Html etiketini ilk açtığımız için en son kapattık. Bu yazım kuralına dikkat etmelisiniz.
Yukarıdaki kodları metin editörüne yapıştırıp .html uzantı ile kaydederseniz çift tıklayarak önizleyebilirsiniz.
Bu dersimiz bu kadardı. Bir sonraki dersimizde görüşmek üzere.
Görsel Kaynak: http://news.bbc.co.uk/2/shared/spl/hi/pop_ups/07/in_pictures_10_years_of_the_bbc_news_website/html/2.stm
Merhaba, yazınız @kusadasi ve @try-market tarafından yürütülmekte olan Kürator Projesi kapsamında seçilmiştir ve oylanarak desteklenecektir.
Yazılarınızda #cointurk etiketini kullanarak projemize dahil olmaya devam edebilirsiniz. Diğer projelerimiz hakkında bilgi alabilmek için @kusadasi'nı takip edebilir ve CoinTurk Discord Kanalı'na katılabilirsiniz.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @secx! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - The semi-finals are coming. Be ready!
Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @secx! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Do not miss the last post from @steemitboard:
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit