Muhammet Esat BÜYÜKBULUT

WD 002 – HTML İleri Seviye

—

by

Muhammet Esat BÜYÜKBULUT

in Web Development

Table of Contents

Block Level & Inline Level Elements

Block level elementler tüm satırı kaplar, yükseklik ve genişlikleri vardır. Block level element’ler yeni satırdar başlar. Diğer tarafta inline level element’ler yeni satırdan başlamaz ve sadece ihtiyaç duyduğu alan kadar yer kaplar.

Div & Span

div : block container to group elements for styling purpose
span : inline container to group elements for styling purpose

ID & Class

Bir şeyin stilini belirlemek için verilen kimliklerdir. ID daha özel unique şeyler için kullanılırken, class daha genel şeyler için kullanılır. Bir element sadece birine sahip olabileceği gibi her ikisine de sahip olabilir.

Bookmarks

id ile sayfa içi linkleme yapmak için kullanabiliriz.

<body>
    <a href="#intro">go to intro</a>
    <a href="#documentatiton">go to doc</a>

    <div style="height: 250px"></div>

    <p id="intro">This is intro.</p>
    <div style="height: 250px"></div>

    <p id="documentatiton">This is doc.</p>
    <div style="height: 2500px"></div>
</body>

Forms

<body>
    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>


        <input type="radio" id="html" name="fav_language" value="HTML">
        <label for="html">HTML</label><br>
        <input type="radio" id="css" name="fav_language" value="CSS">
        <label for="css">CSS</label><br>
        <input type="radio" id="javascript" name="fav_language" value="JavaScript">
        <label for="javascript">JavaScript</label><br><br>


        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
        <label for="vehicle1"> I have a bike</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
        <label for="vehicle2"> I have a car</label><br>
        <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
        <label for="vehicle3"> I have a boat</label>

        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>

Semantic Elements

Görünüş olarak bir değişikliğe sebep olmasa da belli bir anlam taşıyan elementlerdir.

<article>
<aside>
<details>
<figcaption>
<figure>
<header>
<footer>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Comments

Leave a Reply Cancel reply