Buradasın
HTML'de Metin Biçimlendirme ve Class Seçici Kullanımı Eğitimi
youtube.com/watch?v=9LDWMKoX9VkYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web tabanlı kodlama dersinin ikinci ünitesi olan metinlerin biçimlendirilmesi konusunu anlatan eğitim içeriğidir.
- Video, HTML'de metin kullanımı, metinlerde biçimsel düzenleme, paragraf yapıları, liste yapıları ve bağlantılar konularını kapsamaktadır. İlk bölümde Notepad++ programı kullanılarak h etiketleri, p etiketleri, font etiketleri, i etiketleri, br etiketleri, u etiketleri, ol etiketleri, li etiketleri ve a etiketleri gibi temel HTML etiketlerinin kullanımı örneklerle açıklanırken, ikinci bölümde class seçici kullanımı ve stil uygulama yöntemleri gösterilmektedir.
- Eğitim, gömülü stil kullanımı ile başlayıp, body etiketleri arasındaki kodların incelenmesiyle devam etmekte ve class'ların renk gibi stil özelliklerinin nasıl değiştirilebileceği de örneklerle anlatılmaktadır.
- Web Tabanlı Kodlama Dersinin İkinci Ünitesi
- Bu videoda web tabanlı kodlama dersinin ikinci ünitesi olan metinlerin biçimlendirilmesi ele alınacak.
- Konu, HTML'de metin kullanımı, metinlerde stil kullanımı, paragraf yapıları, liste yapıları ve bağlantılar konularını içerecek.
- Örnekler üzerinden ilerleyerek, yazılan HTML kodlarının web tarayıcısında nasıl görüntüleneceğini gözlemleyeceğiz.
- 01:15HTML Kodlarının Yapısı
- HTML kodları HTML etiketi ile başlayıp bitiyor ve hid etiketi kullanımı zorunlu olmayan bir etikettir.
- Meta etiketi ile Türkçe karakterlerin tarayıcıda düzgün görüntülenebilmesi için ayar yapılıyor.
- Title etiketi arasında web sitemizin tarayıcıda görüntülenmesini istediğimiz başlık yer alıyor.
- Body etiketi arasında web sayfasında yer alması istenen metin, resim, video, tablo gibi içerikler yer alır.
- 03:00Başlık Etiketleri
- Body etiketleri arasında h1, h2, h3 ve h4 etiketleri bulunuyor.
- H etiketi metnimizin bir başlık olduğunu belirten etiket ve 1'den 6'ya kadar değer alabiliyor.
- Önem derecesi en büyük olan başlık h1 (birinci derece başlık) ve h1 başlığı içerisinde yazılan metinler punto olarak en büyük puntoya sahip.
- 04:16Metin Biçimlendirme Etiketleri
- Metnin koyu, italik ya da altı çizili görünmesini, metin rengini ve tipini ayarlamak, içeriği liste haline getirmek, paragrafları biçimlendirmek için farklı etiketler kullanılır.
- P etiketi paragrafın başladığını belirten etikettir ve align özelliği ile metnin sola, sağa, ortaya ya da iki yana yaslı olmasını belirtebiliriz.
- Font etiketi yazı tipini, rengini, boyutunu vesaire ayarladığımız bir etikettir.
- I etiketi arasına yazılan metinler web sayfasında italik olarak görüntülenir.
- Br etiketi standart olmayan bir kullanımla enter işlemi yaparak web sayfalarında bir alt satıra geçmek için kullanılır.
- U etiketi ile karşılaşıyoruz ve u etiketleri arasına yazılan metinler altı çizili olarak görüntülenir.
- 07:39Liste Etiketleri
- Ol etiketi sıralı liste oluşturmak için kullanılan bir etikettir ve bir, iki, üç abc şeklinde ilerleyen listelerdir.
- Ol etiketinden sonra yazdığımız ifade aslında listemizin başlığıdır.
- Li etiketi ile listemizin maddelerini tanımlayabiliriz.
- 09:00Bağlantılar
- Web sayfamızda link, video, resim gibi bağlantılar kullanmak için a etiketini kullanıyoruz.
- A etiketi arasına yazılan ifadeler artık bir bağlantı olmuş demektir.
- Bağlantının nereye yönlendirileceğini haşref özelliğinde belirtiyoruz.
- 10:25HTML'de Stil Kullanımı
- HTML dosyalarında stil kullanımı üç şekilde olabilir: etiketin içerisinde kullanmak, he bölümünde gruplayarak kullanmak (gömülü stil) ve dışarıdan ayrı bir stil dosyası kullanmak.
- Gömülü stil için hit etiketleri arasında bir style etiketi oluşturmamız gerekiyor ve bunun style etiketinin type özelliğini text.css olarak belirlememiz gerekiyor.
- Style etiketi içerisinde class seçici kullanarak belirli sınıfların görünümünü tanımlayabiliriz.
- 11:53HTML'de Class Seçici Kullanımı
- Body etiketleri arasındaki kodlar inceleniyor ve paragraf etiketi başlatılmış, class özelliği tanımlanmış.
- Style etiketleri arasında classlar nokta ile oluşturulmuş ve p etiketinin class özelliği "paragraf" olarak belirlenmiş.
- Liste etiketi oluşturulmuş ve class özelliği "vurgu" olarak belirlenmiş, bu da listenin elemanlarının kırmızı olarak görüntülenmesini sağlıyor.
- 12:46Stil Değişikliklerinin Etkisi
- Sağ tarafta kodlar görüntülendiğinde stil etiketinin içinde tanımlanan özelliklerin web sayfasına yansıdığı görülüyor.
- Vurgu class seçici ile yapılan stillerin rengi kırmızı yerine mavi olarak değiştirildiğinde, web sayfası yenilendiğinde stillerin maviye döndüğü görülebiliyor.
- HTML etiketleri arasında gömülü stil kullanmak isteyenler bu şekilde işlem yapabilirler.