وبلاگ چیتا وب


blog post
در این بخش با تگ های video, audio, img آشنا میشوید، علاوه بر این ها، تگ div را یاد میگیرید که از مهم ترین تگ هایی است که یک طراح حرفه ای از آن بسیار استفاده میکند. آدرس دهی تصاویر، صداها و فیلم ها خیلی مهم میباشند و باید به دقت آنها را در سند HTML بنویسید.

تا اینجا با عناصر (elements) مختلفی آشنا شدیم، اما بهتر است بدانید که یک صفحه وب از قسمت های (division) مختلفی ساخته شده، و زبان HTML، این قسمت ها را با تگ <div></div> میشناسد؛ به این معنی که وقتی از این تگ استفاده میکنیم میتوانیم آن را یک والد بدانیم و در آن فرزندانی از عناصری که تا کنون شناخته ایم (مثل p,a,ol, li,h1,…) استفاده کنیم.

نکته

div های بدون محتوا، درون صفحه وب نمایش داده نمیشوند.

این مفاهیم به هیچ وجه سخت نیست و فقط کافی است بدون داشتن عجله، زیاد تمرین کنید تا بهتر در ذهنتان جا بگیرد.
یکی از استاندارد هایی که توسعه دهندگان و طراحان به کار میبرند این است که هر جا که لازم باشد از تگ div استفاده میکنند، در واقع ممکن است که در یک صفحه وب خیلی ساده بیش از ده ها div استفاده شود!
در بخش قبلی گفته شد که body پدر همه ی عناصر و تگ هایی که در درونش دارد، است و حالا میگوییم که بهتر است بعداز نوشتن تگ body و قبل از نوشتن بقیه ی عناصر یک تگ div باز و بسته بنویسیم و همه ی کدها را در آن قرار بدهیم.

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
      <div>
       
            <h2>Learning DIV</h2>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>

            <div>
                <ul>
                    <li><a href="http//:cheetahweb.ir/">cheetah web</a></li>
                </ul>
            </div>
        
      </div>
    </body>
 </html>

در کد بالا از div استفاده شده و تمام عناصر (elemets ) درون آن قرار گرفته اند. حتی تگ ul هم در یک div قرار گرفته، به دلیل تقسیم بندی بهتر صفحه. اگر این صفحه را اجرا کنید خواهید دید که هیچ تفاوتی با همین کد اما بدون div نخواهد داشت؛ درواقع اجرای این ها نیست که تفاوت دارد بلکه طرز کد نوشتن آن هاست که تفاوت ایجاد میکند و پیشنهاد ما این است که در کدهای خود و درقسمت های مختلف حتما از div استفاده کنید، تا کد تمیزتر و خواناتری داشته باشید، علاوه بر این در درس های CSS خواهید دید که چه قدر دستورات آسان تر خواهند شد.

shatranj web site

این تصویر یک وب سایت است که تمام آن با زبان HTML5 و CSS3 طراحی شده و اگر کد آن را نگاه کنید متوجه میشوید که چه قدر از div استفاده شده است.

دانلود فایل کد

تگ <img>

این تگ برای قرار دادن تصویر در صفحه استفاده میشود. تگ img تگ بسته ندارد و از ویژگی (attribute ) های src و alt استفاده میکند، ویژگی src آدرس تصویر را مشخص میکند:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
         <img src=”image-folder/img-01.jpg”>
    </body>
 </html>

و در تگ alt توضیح کوتاهی درباره ی عکس نوشته میشود، زیرا بعضی اوقات است که اینترنت کند است و عکس ها به درستی بارگذاری نمیشوند پس نوشتن یک توضیح کوتاه به کاربر میگوید که این عکس درباره چه چیزی بوده...

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
      <div>
         
          <div>
                 <h2>This is an Image With details</h2>
          </div>
          <div>
                <hr>
                <img src="img/machine-man.png" alt="a machine man">
                <hr>
          </div>
          <div>
                <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                      Libero harum error officia impedit vitae sed aliquid esse, 
                      tempora quidem aut obcaecati aliquam itaque ipsam at 
                      pariatur dignissimos fugiat porro, molestiae.
                </p>
          </div>
        
      </div>
    </body>
 </html>
showing image

جزئیاتی که در alt نوشته شده را زمانی میتوانید ببینید که یا آدرس تصویر به درستی ذکر نشده باشد و یا حجم آن تصویر زیاد باشد، به اندازه ای که اینترنت کم سرعت نتواند به خوبی تصویر را بارگذاری کند!

dont found the image

در اینجا عکس به درستی بارگذاری نشده و نوشته ای که در alt قرار گرفته نمایش داده شده است.

تگ <video></video> :

در این تگ فیلم قرار میگیرد(یا هرچیزی با فرمت mp4)، آدرس این کد را به دو روش مینویسند.

روش اول:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
        
        <div>
            <h2>This is a Video</h2>
            <hr>
            <div>
                <video src="vid/mp4_video.mp4" controls>
                </video>
            </div>
         </div>
        
    </body>
 </html>

با نوشتن کلمه ی controls ، دکمه های play,stop, صدا و تمام صفحه، به آن اضافه میشوند. اگر controls نوشته نشود نمیتوانید ویدئیو را ببینید.

showing video

روش دوم:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
        
        <div>
            <h2>This is a Video</h2>
            <hr>
            <div>
                <video controls>
                    <source src="vid/mp4_video.mp4">
                </video>
            </div>
         </div>
        
    </body>
 </html>

این روش از نظر اجرایی تفاوتی با کد اول ندارد، دقیقا مثل هم اجرا میشوند، اما در این کد از ویژگی src در تگ source برای آدرس دهی استفاده شده، در صورتی که درکد قبلی از ویژگی src در تگ video استفاده شده بود. روش دوم استانداردتر است!

تگ <audio></audio> :

از این تگ برای قرار دادن صدا و آهنگ (یا هر چیزی با فرمت mp3) استفاده میشود. مانند تگ video، این تگ را نیز میتوان به دو روش نوشت؛ روش اول استفاده از ویژگی (attribute) src در تگ audioمیباشد، و روش دوم استفاده از ویژگی src در تگ source است.

روش اول:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
        
        <div>
            <h2>This is an Audio</h2>
            <hr>
            
            <div>
                <audio src="audio/rock-song.mp3" controls>
                </audio>
            </div>
         </div>
        
    </body>
 </html>

روش دوم:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
        
        <div>
            <h2>This is an Audio</h2>
            <hr>
            <div>
                <audio controls>
                    <source src="audio/rock-song.mp3">
                </audio>
            </div>
         </div>
        
    </body>
 </html>
showing audio
نکته

یادتان باشد که حتما ویژگی controls را در تگ های video,audio بنویسید!!
دقت کنید که آدرس درست عکس ها،ویدئوها و صداها را در ویژگی src بنویسید؛ در غیر این صورت نمتوانید آن را مشاهده کنید!!

این مطلب را به اشتراک بگذارید

about author

ثمین یدالهی

فارغ التحصیل مهندسی IT

دیدگاه ها

دیدگاهی بگذارید: