HTML Dersleri -3 / Görüntü Seviyeleri (Div, Span)

Bu ders Tayfun Erbilen tarafından hazırlanmıştır.
HTML dersleri serimizin üçüncü bölümünde, görüntü seviyelerini, DIV ve SPAN etiketlerini detaylı bir şekilde inceleyeceğiz. Bu videoda, blok ve satır içi seviyelerin ne olduğunu, nasıl kullanılacağını ve ne zaman kullanılması gerektiğini öğreneceksiniz. Ayrıca, DIV ve SPAN etiketlerinin web sayfası düzenlemelerinde nasıl etkili bir şekilde kullanılacağını da göreceksiniz. Bu bölüm, web sayfası tasarımında esneklik ve düzen sağlamaya yönelik temel kavramları anlamanıza yardımcı olacaktır.
Yeni çıkardığım PHP Eğitim Setime gözatın!
udemy.com/php-...
-- Sosyal Hesaplarım;
/ erbilennet
/ prototurkcom
/ tayfunerbilen
/ prototurkcom
/ tayfunerbilen

[@PROTOTURKCOM]

HTML derslerini yazılı olarak öğrenmek isterseniz, prototurk'e bakmayı unutmayın! prototurk.com/html

[@onuraydeniz2040]

Yazılım dillerini kendi yazmış gibi anlatıyor.Mükemmel gerçekten

[@LeylaMurat-u5v]

çok akıcı anlatıyorsunuz emeğiniz için teşekkürler.

[@qlkaura]

Abi sen visualın kurucusumusun ne kadar güzel anlatıyorsun

[@alwestia]

:D

[@ukiyo-7290]

İyi ki öğrenirken tek bir yere bağımlı kalmamışım. İki farklı uygulamadan öğreniyorum, bitirince diğerine geçiyorum. Hem tekrar oluyor aklıma yatması açısından hem diğerinin öğretmediği şeylere denk gelebiliyorum. Son olarak da youtube dan video izliyorum. Bu kanalı bulduğum için çok mutluyum, benim gibi çok fazla anlamayan biri için bile çok net ve anlaşılır bir anlatım var. Ayrıca uygulamalarda duymadığım noktalara değiniyorsunuz, çok teşekkürler 💐

[@sedefsen8456]

nerelerden ders alıyorsunuz

[@Alceinnn]

udemyden okadar kurs aldım ara verınce kendımı tazelemek ıcın bakınayım dedım ellerıne saglık abım okadar akıcıkı dıkkat dagınıklıgım olmasına ragmen cok guzel anlıyorum sıkılmadan dınlıyorum

[@ddthemaste]

Kardesim, sen nasil bir kralsin be..

[@ozkanaltun5563]

Çok açıklayıcı bir anlatım. Teşekkürler.

[@Littlebabyesma]

2020 DE BURADA OLANLAR SES VERSİN

[@omer-gh3zj]

ben

[@otkur_0]

İnternetin babası olarak Lee abimize sanki demiş hadi benden bi kıyak birazda sen ünlü ol diye cidden çok iyi

[@user-td7fi4kl8p]

Anladım sonunda. 👍

[@sudeeeatby]

You have to do everything step by step and you will succeed. You must disconnect everything from PC protection. Thank you, Tutorials Buddy

[@kontrol7568]

ne anlatıyon

[@vedatakdemir6111]

Bu kadar az izlenmesi yazık

[@ferhatdev]

daha 1 hafta olmuş normal. Aynı eğitimi udemy de parayla satanları düşünürsek bu Tayfun Hocamın videoları çok daha fazla izlenecektir.

[@vedatakdemir6111]

Ferhat Yiğit bende öyle düşünüyorum

[@JosephWRLD]

@@cavidhuseynov7845 39

[@Kozmosistew]

@@samett devamını getir?

[@akifsaygin]

div muhtemelen "divide" dan geliyor bölmek demek ingilizcede zaten div etiketi de aşağı satıra indiriyor bölüyor bir anlamda

[@PROTOTURKCOM]

divide değilde division'dan gelmeymiş :) "what div stands for" diye ufak bir araştırma ile edindim bu bilgiyi

[@FeridAze]

@@PROTOTURKCOM ahahahah :)

[@bunyamin4]

@@PROTOTURKCOM ikisi aynı kelime biri çekimli hali divide fiil division isim

[@kreyziboy7886]

bir insan neden böyle videolara dislike atar ki adam mis gibi anlatıyor ben geçen yaz bir html dersi izlemiştim adam html'i bitirip css'i anlatmaya başlamıştı okullar açıldığı için devam edememiştim bu yaz başka bir yerden izliyim dedim geçen yaz öğrenmediğim şeyleri öğreniyorum şu an

[@exlondd-konu]

hocam anlatımınız çok sade ve kalıcı tesekkürler.

[@ahmetakbag9263]

Allah razı olsun ellerinize ve ağzınıza sağlık

[@kerimaydin5874]

çok sade ve basit anlatmışsın teşekkürler.

[@cabir_beatsz]

ALLAH razı olsun sizden

[@PROTOTURKCOM]

cumlemizden

[@orhanisayev9527]

Allah senden razı olsun Tayfun abi

[@Batussh]

hocam ne zaman yazılsa cevap veriyorsunuz yeminlen helal olsun emeğinize sağlık kod yazmayı sevdiren bir insansınız

[@SilIyBurger]

Awesome program

[@faniinsan]

Çok iyi

[@arifcaglarozgun]

It's just awesome

[@abdullahcerrahoglu3865]

Çok teşekkürleeer

[@geometrikselfelsefesi]

Allah razı olsun 👏

[@E_M_A_R_S]

Merhaba, hocam çok güzel anlatmışsınız derslerinizi severek izliyor ve uyguluyorum lakin 2 kere izlememe rağmen div ve spandan gerçekten hiç bir şey anlamadım. Sanırım CSS’ e geçince oturacak ama eğer bilen varsa bana uygun sade bir dil ile anlatabilir mi? (hayatımda ilk defa yazılım ile uğraşıyorum)

[@PROTOTURKCOM]

merhaba, evet css ile birlikte daha net oturacaktır. div ve span hiçbir varsayılan stili olmayan birisi blok seviyesinden (div) ve diğeride satır içi seviyeden (span) kullanılan birer etikettir. Tarayıcılar bu etiketleere ek stil eklemedikleri için genelde siz bunlarla yapınızı oluşturup css tarafında siz şekillendirirsiniz. CSS derslerinde "display" dersi altında zaten görünüm seviyelerini ayarlamayı öğreneceğimiz için span etiketini bile unutabilirsiniz. Sadece div etiketini kullanıyor olacağız çoğu yerde. Bir yere stil işlemi uygulamak için önce o alanın bir etiket içinde olması gerekiyor bu da genelde div etiketi oluyor öyle düşünün.

[@E_M_A_R_S]

@@PROTOTURKCOM Sayın hocam çok hızlı dönüşünüzden dolayı teşekkür ederim. Bu daha sağlıklı oldu daha iyi anladığımı düşünüyorum. Yanlış anlamazsanız aynı yorumu kopyala yapıştır yapıp videonun altına sabitlerseniz diğer anlamayan arkadaşlar da nasiplenebilir.

[@antica4385]

Eğitiminiz çok iyi gidiyor hocam fakat bir merak ettiğim konu var. Örneğin biz Adobe XD yi hani alanda kullanacağız?

[@PROTOTURKCOM]

tasarım çizerken kullanıyorsunuz sonuçta bir tasarım aracı başka bir kullanım alanı yok

[@antica4385]

@@PROTOTURKCOM teşekkürler hocam

[@xqeriafpszn1733]

abi ben kod yazıyorum ama sitede gözükmüyor doğruda yapıyorum

[@OzgurUrhan]

ders için teşekkürler

[@huseyinilkay8450]

5:05'de nasıl sağa kaydırıyor?

[@emirhankilic266]

everything works ty)

[@revoller8387]

Çok güzel ve açıkça anlatıyosun ama benim anlamadığım tek bir olay var, span etiketini kullanmasak olmaz mı? Sen oraya direkt cümle içerisine ''tayfun erbilen'' yazsan da yine aynı satırda olurlardı

[@PROTOTURKCOM]

daha sonra css de etiketleri seçip stil işlemi uygulamak için bu etiketleri kullanmak zorundayız css derslerinde farkını daha net anlayacaksın

[@revoller8387]

@@PROTOTURKCOM tamamdır teşekkür ederim şuan ders 8 deyim resim etiketini öğreniyorum

[@SilIyBurger]

thanks so much man

[@Kevintss]

ben kendi sayfamı nasıl açıcam onu anlamadım

[@umitpircan]

tüm videolarına yorum atmak isterim ama yazacak bir şey bulamadım.

[@mechmasterspro]

hocam hangi editörü kullanıyorsunuz

[@Kemalkalpak]

👏👏👏👏

[@zhuseyinmcpe4378]

Anladıgım kaddarıyla div satırın hepsini kaplıyo span normal bir cümleye yazılıyor

[@coprakc9247]

This truly helped me thnx??

[@emrecandemir3952]

Eğer c# açısından bakarsak div WriteLine davranışı, span ise Write davranışı sergiliyor gibi anladım. Doğru mudur?

[@PROTOTURKCOM]

Doğrudur :)

[@cahituysal56]

note defterindeki kodları internette açtığımda kodlar dönüşmüş olarak değilde yazdığım gibi gözüküyor nasıl düzeltebilirim?

[@mirhangonen2882]

bildiğim kadarıyla farklı kaydete basıp masaüstüne örnek veriyorum x.html diye kaydet sonuna html koy(bu arada not defteri değilde bir editör kullanmanı tavsiye ederim mesela ben sublime text 3 kullanıyorum sana da tavsiye edebilirim)

[@fr0ggeex]

Hocam ben şimdi 3:13 ü anladım fakat tam girmedi kafama bir iletişim adresinden anlatsanız uygun olur mu?

[@fr0ggeex]

@Muhammed AksuGG 1 yaşımla dala geçemessiniz 2 sonradan anladım fakat anlamamak hata değildir

[@otobos9022]

@Muhammed AksuGG Yazık kafana

[@kaos1789]

07:32 Yazılımcılar buraya bakan meraklılar için küçük Easter Eggler koyabilirler :)

[@kaos1789]

@Ke Siva tt ilk olarak html ile başla sonra css öğren, ikisini pekiştirdikten sonra js öğren, ben de yeni başladım

[@bugrahankurtulmus2427]

body etiketlerinin arasına yazdığım şeyler sayfayı açtığımda gözükmüyor kaydetmeme rağmen bunu nasıl çözebilirim

[@keremvardan7435]

ekran fotoğrafı atabilir misin?

[@ardakoncagul7883]

hocam sadece html kullanarak site yapılabilir mi

[@keremkubat425]

abi div ve spanı anlayamadım yardımcı olurmusun

[@PROTOTURKCOM]

div ve span hiçbir şey değil aslında. Stil işlemi uygulamak için kullanacağın inline ve block seviyesindeki etiketler o kadar.

[@fratozturk1533]

@@PROTOTURKCOM abi türkçe açıklarmısın

[@PROTOTURKCOM]

Türkçe açıkladım zaten kardeşim bazı teknik terimleri Türkçeye çevirmeye gerek yok yoksa global de sınıfta kalırsın bu seferde

[@burakdere7397]

Abi Arkaplan Nasıl Ekleyebiliriz?

[@softwaredeveloper9970]

css de; body{background-image:url(.../wallpapers/yellowback.png) } arkaplan neredeyse url kısmında onun yerini yazıyorsun

[@ugurdestegul6914]

Merhaba Tayfun ben yapmış olduğun işlemlerin aynısı yaptım ama ismim alt alta gelmedi sürekli olarak yan yana geliyor ve sağ tuş yapınca da işlem senin yaptığın gibi olmuyor maalesef...

[@justicekira]

Her satırın sonuna kodu kullan👍

[@yigityegenoglu1002]

Sitede ki yazı birtek bende mi çıkmıyor ?

[@adam-schannel]

Bu ingilizceyi nasıl hallettin gerçekten çok merak ediyorum abi

[@PROTOTURKCOM]

kolay olmadı ama uğraşınca her şey halloluyor be :) fırsatın varsa bi yurt dışı yapmanı öneririm

[@kodline5286]

Abi css de öğrenmek istiyorum sence HTML serinle beraber mi takip edeyim yoksa HTML i izledikten sonra mı izleyeyim cssi

[@PROTOTURKCOM]

html'i bitir, css'e sonra geçersin

[@kodline5286]

Teşekkür ederim abi videoların sayesinde yazılımcı olma hayalime bir adım daha attım

[@alicelik2676]

@@ascendwr 6 ayda yazılımcı mı olunur? Eğer 6 ayda yazılımcı olacağını zannediyorsan bu işi bırak derim

[@Meteyasarr]

@@alicelik2676 en azından onedio testleri gibi bir site yapmak istiyorum olur mu sence 6 ayda falan

[@alicelik2676]

@@Meteyasarr Dostum 4ay olmuş cevaplıyım. şöyle günde 5-6saat çalışırsan 9-10aya olabilirsin.Bende CSS HTML de çok iyi bir seviyeye geldim bu yorumu Atalı.Dediğim gibi gerizekalı değilsen günde 5-6saat çalışırsan 9-10 aya onedio gibi para edecek site yapabilirsin.İyi şanslar

[@derscalsms3804]

vscode da yazarken bende bazen bir anda script li bir şeyler çıkıyor anlamıyorum

[@PROTOTURKCOM]

li yazıp tab tuşuna basıyoruz otomatik tamamlıyor kodları

[@otobos9022]

@@PROTOTURKCOM hocam 5.07 de hepsini seçip düzelttiniz nasıl yaptınız kısayolu ne

[@azerbaijan671]

ders 3 bakildi

[@antica4385]

Python un kullanım alanı nedir?

[@PROTOTURKCOM]

yani python nedir diye aratırsanız milyonlarca sonuca ulaşabilirsiniz. bir programlama dili, genelde kullanım amacı veri madenciliği, yapay zeka çalışmaları ancak temelde web geliştirme ve diğer konularda python ile yapılabilir.

[@kamranhuseynli5397]

Hocam bu derslerin devami nerede?

[@PROTOTURKCOM]

14 bölüm, sonra css derslerine geçeceksin kanalda hepsi mevcut.

[@lyg-ahmetemin1829]

hocam chrome üzerinden nasıl deniyoruz

[@marazali9274]

Oluşturduğun .html dosyasını dosya gezgininden bul ve çift tıkla. Açılacaktır.

[@emreyildirim3246]

Inline ne demek

[@PROTOTURKCOM]

satır içi demek yani genişliği kapladığı içerik kadar demek diyebiliriz kısaca :)

[@emreyildirim3246]

@@PROTOTURKCOM Thank you üstad 4 gb ram javascript çalışmak için yeterli mi

[@ascendwr]

@@emreyildirim3246 1.60 ghz 4 gb benimki bazen çıkıp girince kasıyor birşey olmuyor

[@ahmetgul3562]

kullandığı programoın ismi ney

[@PROTOTURKCOM]

vscode

[@vanadyum244]

7:11 // şunun kadar kolay bişey olamaz

[@KralOyuncusu]

Div ve span ı pek anlamadım

[@PROTOTURKCOM]

stilsiz etiket, ekstra bir seyleri yok, css derslerinde detaylari daha iyi anlarsin

[@efootballtraining3105]

çok sağol çok güzel anlatıyorsun ama devam etsen biraz daha fazla öğretsen

[@PROTOTURKCOM]

Neye devam edeyim Başkan HTML bitti o kadardı

[@efootballtraining3105]

@@PROTOTURKCOM tamam hepsini iliycem eyer bişir sormak istersem cevaplarmısın

[@PROTOTURKCOM]

suistimal etmediğin sürece her zaman sorularına cevap alabilirsin :)

[@pronick5686]

site adresini nasıl değiştirebilirim kodları yazabilirmisin yanı ornegın youtube.com gibi?

[@PROTOTURKCOM]

bunun HTML ile bir alakası yok, yazılım dilleriyle yapabilirsin. Eğer örnek görmek istersen php derslerimde bunun örnekleri mevcut.

[@pronick5686]

@@PROTOTURKCOM peki php programı paralımı?

[@PROTOTURKCOM]

@@pronick5686 php program değil bir dil, ve açık kaynaklı bir dil. Dolayısı ile hayır herhangi bir ücret ödemene gerek yok

[@pronick5686]

@@PROTOTURKCOM sağol

[@pronick5686]

​@@PROTOTURKCOM​link atarmısın derslerini bulamadım

[@semihkara3406]

dahauzin uşağyam

[@zehra-xw4xu]

Üç video da baslasi seslendirmiş gibi

[@PROTOTURKCOM]

yok valla benim :D

[@DursunSAhmet]

bitek bende mi ses çok az? Kimse ses az dememiş.

[@efeozslh]

Ses normal.

[@fırateren-d9t]

ben anlamadım

[@PROTOTURKCOM]

CSS e geçince daha anlamlı olur, stili olmayan 2 etiket sadece takılma bunu bilsen yeter

[@fırateren-d9t]

@@PROTOTURKCOM Tamam abi teşekkürler.

[@rabiagol675]

tayfun bey div acıp kapattınız ve /div yazısını asagi indirdiniz onu yaparkenki kestirme yolunu göstermedin bir daha uzun yolla yazmak zorunda kaldim bilgi verirmisin

[@PROTOTURKCOM]

div yazıp tab duşuna basınca vscode otomatik tamamlıyor etiketi. ben ise yazdıktan sonra otomatik tamamlıyor, belki bir eklenti falan olabilir vscode'da emin değilim ama varsayılan olarak html dosyalarında bu davranışı sergiliyor diye hatırlıyorum eğer vscode kullanıyorsanız sizde de bu şekilde olmalı

[@maradanexe980]

ulan bir bok anlamadım bu div ile span lanetinden blokc inline filan ne aga güzel açıklayın şunu

[@PROTOTURKCOM]

dostum daha ne kadar açıklayalım? açıp kafanı beyninin içine mi koyalım bilgiyi, birazda kendini zorla anlamak için

[@maradanexe980]

@@PROTOTURKCOM Ha aga kusura bakma şimdi yine dinledim bu sefer anladım kusura bakma :)