Boyutlandırmayla ilgili bir soru

HTML
1

Kursta şöyle bir kod örnegi gördüm

    <style>
       *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        #showcase{
            background-color: #2E4C6d;
            height: 500px;
            width: 60%;
            padding: 10px;
        }
        #how-it-works{
            background-color: #FC997C;
            padding: 10px;
        }
       .main-header{/*Bu kod:uzun bir çizgi işine yarıyor*/
        background-color: #FC997C;
        padding: 8px 16px;
       }
       .main-nav{
        width: calc(100% - 99px);
        display: inline-block;
        text-align: right;
       }
       .main-nav__items{/*listeleme özelliklerini gördük*/
        margin: 0;
        padding: 0;
        list-style: none;
       }

       .main-nav__item{
        display: inline-block;
       }
       .main-header__logo{
        color: #fff;
        text-decoration: none; 
        font-weight: bold;
        font-size: 21px;
       }

       .main-nav__item a{ /*Compineytır selectır türüdür claasdaki elementi görmüştür*/
        text-decoration: none;
        color: #fff;
       }

    </style>
</head>
<body>
    <header class="main-header">
        <a href="#" class="main-header__logo">Movie-App</a>
        <nav class="main-nav">
            <ul class="main-nav__item">
                <li class="main-nav__item">
                    <a href="#">Home</a>
                </li>
                <li class="main-nav__item">
                    <a href="#">Movies</a>
                </li>
                <li class="main-nav__item">
                    <a href="#">Contract</a>
                </li>
            </ul>
        </nav>
    </header>
   
    <main width="1000px">
        <section id="showcase">
            <h1 style="background-color: #82b8ff;">Welcome to Movie App</h1>
        </section>
        
        <section id="how-it-works">
            <h2>How it works</h2>
        </section>
        
    </main>
</body>
kodun üst header kısmı biz genişlik vermesekte yana dogru genişliyor bunu sebebi nedir?
2

HTML den hiç anlamam şöyle koda bir göz attım.

.main-header{/*Bu kod:uzun bir çizgi işine yarıyor*/
        background-color: #FC997C;
        padding: 8px 16px;
        width: 50%;

Buraya genişlik 50% ekledim. Bant yarıya kadar geri çekildi.

Default ayarı değer verilmezse demek ki yüzde yüz.

Ama bu şekilde yaparsak üst main bandını yarıya alabildik.

image
image1352×648 7.43 KB

Yani bazı değerleri vermediğimizde default değerler kullanılıyor anladığım kadarıyla.

    <style>
       *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        #showcase{
            background-color: #2E4C6d;
            height: 500px;
            width: 60%;
            padding: 10px;
        }
        #how-it-works{
            background-color: #FC997C;
            padding: 10px;
        }
       .main-header{/*Bu kod:uzun bir çizgi işine yarıyor*/
        background-color: #FC997C;
        padding: 8px 16px;
        width: 50%;

       }
       .main-nav{
        width: calc(100% - 99px);
        display: inline-block;
        text-align: right;
       }
       .main-nav__items{/*listeleme özelliklerini gördük*/
        margin: 0;
        padding: 0;
        list-style: none;
       }

       .main-nav__item{
        display: inline-block;
       }
       .main-header__logo{
        color: #fff;
        text-decoration: none; 
        font-weight: bold;
        font-size: 21px;
       }

       .main-nav__item a{ /*Compineytır selectır türüdür claasdaki elementi görmüştür*/
        text-decoration: none;
        color: #fff;
       }

    </style>
</head>
<body>
    <header class="main-header">
        <a href="#" class="main-header__logo">Movie-App</a>
        <nav class="main-nav">
            <ul class="main-nav__item">
                <li class="main-nav__item">
                    <a href="#">Home</a>
                </li>
                <li class="main-nav__item">
                    <a href="#">Movies</a>
                </li>
                <li class="main-nav__item">
                    <a href="#">Contract</a>
                </li>
            </ul>
        </nav>
    </header>
   
    <main width="1000px">
        <section id="showcase">
            <h1 style="background-color: #82b8ff;">Welcome to Movie App</h1>
        </section>
        
        <section id="how-it-works">
            <h2>How it works</h2>
        </section>
        
    </main>
</body>

Muhtemelen header için olduğugu gibi footer için de aynı şey geçerli.

Faydası olursa styling için güzel bir resim olduğundan bir link de vereceğim.

HTML Styling Block Elements | HTML Goodies

3

vay kanka çok sag ol hiç farkında değilmişn kodun iş yorgunlugu böyle birşey olsa adam gibi tekrar yaspmasan olacağı buydu işte eyvallah çok sag ol

4

aklıam takılan şey neden yani neden yukardan böyle bir sıkıştırma çizgi var header diye yazdıgımız için mi acaba farklı birşey var bence. Bence movie App yazılan yer çok fazla yer kapladıgı için html otomatik olarak bölmüş olabilir mi

5

yok yok buldum şimdi eleman inline olduğu için tüm metni kaplıyor bundan dolayı bir genişlik vermemize gerek kalmıyor diye düşünüyorum inşallah öledir

6

Aslında HTML konusunu hiç anlamadığını düşünüyorum.

Daha önce verdiğim linkte bir web sayfasının temel alanlarının yerleşim resmi mevcut.

Header adı üstünde başlık kısmı, özel bir değerle sınırlamazsan doküman boyunca bant şeklinde devam eder. ( Çizgi dediğin kısım. Yani aslında orada bir çizgi yok.) Aksine header alanının arka plan rengi yeniden ayarlandığından orada başlık alanını bir şerit şeklinde renkli görüyorsun ki bunun sorduğun soruyla alakası yok.

Header ve footer alanları normalde HTML dokümanı boyunca altta ve üste devam eder. Temel arka plan rengi kullanıldığında farkı anlaşılmaz, ama arka plan rengi değiştirilirse bu alanları farkedersin.

Hayır hele ki yazdığın metinlerle hiç alakası yok.

Örneklemek için header başlığını 10% yaptığında header alanı açık sayfanın yüzde onuna kadar kısımda durur. Bu alanın içine metinler yerleştirilir.

image
image1365×651 8.23 KB

Yukarıda alanı yüzde 10 a getirirsen yazılar bir araya nasıl yaklaştı görebilirsin.

Bence henüz HTML nedir, html dokümanının alanları nelerdir. Bu alanlar nasıl yerleştirilmiştir hiç anlamamışsın. Css dosyası içinde mi dışında mı olmalı diye düşünmeden önce, html nedir ne değil iyice öğrenmeye çalış.

Aslında daha da geriye gitmen gerekir.

HTML motoru nedir?

HTML dosyaları nasıl yorumlanır, nasıl görüntülenir kavraman gerekmekte?

Kursta sor, html motorlarını farklarını sana bir anlatsın. HTML nedir ne değildir anlatsın. Bunları bile doğru dürüst yapamıyorsalar kursu bırak. Standart Türkiye kursuna gitmişsinidir, ezberletir ama yalnız kaldığında hiç bir şey yapamaz duruma gelirsin.

Comparison of browser engines - Wikipedia

Bu arada html motorlarına da göz at.

Aslında HTML sadece bir metin. Nasıl yorumlanıp görüntüleneceğine bu motorlar karar verir. Bunu yaparken de ortak anlaşılmış kurallara uyarlar, bunlardan biri de header alanı için özel bir değer vermezsen header alanı doküman boyunca devam eder, dokümanın boyu ne olursa olsun.

Mesela eskiden internet explorer zamanlarında bu işi trident engine yapardı. Şimdilerde adı yukarıdaki gibi edgehtml oldu. Sadece adı değişti demeyelim yinede.

Sonuç olarak.

İşin başına dönüp, önce html nin ne olup ne olmadığını iyice anla. Zaten temelde bir kaç kuraldan ibaret bir doküman türü. Pdf formatı da buna benzer, bazı kurallar içeren scriptlerdir.

Scriptler yorumlanan dillerdir ve yorumlayıcılarına göre davranırlar.

HTML ve CSS öğrenmek istiyorsan, bir kaynaktan çalış, çeşitli kaynaklara dağılma.

Bulabilirsen, sybex, Addison-Wesley, O’Reilly Media, Sams, McGraw-Hill Osborne Media gibi yayıncıların kitaplarına bak.

Üfürükten kitaplarla vakit kaybetme.

Biraz daha link vereyim temel konulara bakman için…

CSS Height, Width and Max-width (w3schools.com)

CSS Default Browser Values for HTML Elements (w3schools.com)

1 Beğeni
7

kanka 120 saatlik kurs sence kaç günde biter

8

120 saatte biter. Önemli olan sen kaç günde öğrenirsin?

1 Beğeni
9

hacı günde 3-4 saat ayırabiliyorum işte 2 ayda biter mi?

10

Her gün 4 saat ayırırsanız 1 ayda bitiyor. Kursu sadece izleyip geçmeyin, anlamaya da çalışın, örnek te yapabilirsiniz. Belki de bu süreyi 120 saatten uzun tutacaktır ama 120+ saat harcadığınıza değer.

1 Beğeni