صفحه اصلی / بلاگ / دوره مقدماتی طراحی و برنامه نویسی وب (جلسه دوم)

دوره مقدماتی طراحی و برنامه نویسی وب (جلسه دوم)

جلسه سوم طراحی دوره مقدماتی طراحی و برنامه نویسی وب،در این قسمت با 4 تگ کاربری و مفید در طراحی وب آشنا خواهیم شد که میتوانید استفاده زیادی از آنها ببرید.

طراحی و برنامه نویسی وب

سلام دوستان امروز با جلسه دوم دوره مقدماتی طراحی و برنامه نویسی وب در خدمت شما هستم،تو این جلسه میخوایم،این دوره برای افرادی در نظر گرفته شده که قصد ورود به دنیای طراحی و برنامه نویسی وب رو دارند و میخواند که در این زمینه فعالیت کنند،ما این دوره رو به طور رایگان در اختیار شما قرار میدیم تا بتونید از اون استفاده کنید.

جلسات قبل دوره مقدماتی طراحی و برنامه نویسی وب:

تو جلسات قبل ما نقشه راه ورود به حوزه طراحی و برنامه نویسی وب رو به شما نشون دادیم و گفتیم که چطور باید شروع به یادگیری طراحی و برنامه نویسی وب کنید،با یه ادیتور مناسب آشنا شدیم،چند تا تگ مفید و کاربردی رو معرفی کردیم که حتما در پروژه های شما لازم میشه که از اونها استفاده کنید و نمیتونید بدون اونها یه سایت رو طراحی کنید و اون رو ران کنید،برای مطالعه جلسات قبل میتوانید از لینک های زیر استفاده کنید:

طراحی وب
طراحی و برنامه نویسی وب

آنچه در جلسه سوم دوره طراحی و برنامه نویسی وب یاد میگیرید:

در این جلسه شما با تگ های،سنتر، تصویر،صدا و ویدئو آشنا میشوید،تگ سنتر برای اینه که المنت ها ر و به وسط صفحه بیاره و اونها رو وسط چین کنه،سه تگ دیگه همونطور که از اسمشون پیداست این تگها برای اضافه کردن رسانه ها به صفحه وب استفاده میکنیم،مثلا نیاز به این داریم که در سایتمون یه تصویر قرار بدیم،فرقی نمیکنه که چه تصویری باشه،یا اگه یه سایت موزیک دارید،صد در صد به این نیاز دارید که در صفحه دانلود موزیک از این تگ استفاده کنید برای پخش آنلاین موزیک ها،و در نهایت تگ ویدئو که برای نمایش ویدئو در صفحات وب استفاده میشه،به عنوان مثال سایت آپارات رو که نظر بگیرید ،اگر سورس اون رو مشاهده کنید( نحوه مشاهده سورس سایت ها رو در جلسه مقدمه گفتیم،روی این لینک کلیک کنید)میبیند که در قسمت هایی که ویدئو نمیش داده شده از تگ video استفاده کرده،خب بریم برای شروع جلسه دوم طراحی و برنامه نویسی وب،آماده باشید.

تگ center در طراحی وب:

تگ center همونطور که قبلا گفتیم برای وسط چین کردن و آوردن المنت ها و درواقع عناصر صفحه وب ما به وسط هست،این وسط که میگیم یعنی وسط اون تگ مادری که در اون قرار داده،در مثال زیر تگ مادر تگ body هست بنابراین در وسط صفحه قرار میگیره:

<html>
<head>
<title>اولین جلسه طراحی وب</title>
</head>
<body>


<center>

<h1>طراحی و برنامه نویسی وبسایت</h1>

<h2>سر فصل ها:</h2>

<h4>آموزش:</h4>
<p>
شروع دوره رایگان طراحی و برنامه نویسی وب از کافه آموزش
</p>



</center>

</body>
</html>

اگر صفحه رو سیو کنید و اون رو اجرا کنید،میبینید که تمام عناصر ما به وسط صفحه وب اومدن،هر چیزی که بین تگ شروع و پایان center باشه به وسط صفحه میاد.

تگ Img در طراحی وب:

دومین تگی که میخوایم تو این جلسه در موردش صحبت کنیم،تگ تصویر هست،که برای نمایش تصاویر در صفحات وب استفاده میشه،فرض کنید شما،میخواید داخل سایتتون،در قسمتی که برای نمایش مطالب در نظر گرفتید،تصویر زمینه اون مطالب رو به نمایش بزارید،خب این هم گرافیک سایت شما رو بهتر میکنه و هم اینکه به کاربر کمک میکنه که بهتر بفهمه محتوای اون مطلب چی هست،برای نمایش تصویر در صفحه وب ما از کد زیر استفاده میکنیم:

<html>
<head>
<title>اولین جلسه طراحی وب</title>
</head>
<body>


<center>

<h1>طراحی و برنامه نویسی وبسایت</h1>

<h2>سر فصل ها:</h2>

<h4>آموزش:</h4>
<p>
شروع دوره رایگان طراحی و برنامه نویسی وب از کافه آموزش
</p>

<img src=”image/blog.jpg” style=”width:80%;height:600px;”/>


</center>

</body>
</html>

هونطور که تگ تصویر رو میبیند،ما اینجا دو مشخصه بهش دادیم یکی src و اون یکی هم style،خب مشخصه استایل که برای همه تگ ها هست و میشه از اون استفاده کنیم و برای استایل دهی تگ مورد نظر مورد استفاده قرار میگیره،به عنوان مثال ما اینجا گفتیم که عرضش 80% و ارتفاع اون 600px باشه،مشخه src مخفف کلمه source به معنای منبع هست که برای تعیین مسیری که تصویر در اون قرار داده از اون استفاده میکنیم.

طراحی و برنامه نویسی وب
طراحی و برنامه نویسی وب

تگ audio در طراحی وب:

در طراحی وب این تگ برای سایت های زیادی کاربرد نداره و اکثر سایت هایی که فایل صوتی زیادی در اون قرار داده میشه از این تگ استفاده میکنن،مثل سایت های دانلود موزیک،سایت های کتاب صوتی و….،هر وقت که ما نیاز به این داریم که در صفحه خودمون یه فایل صوتی رو قرار بدیم از این تگ استفاده میکنیم،نحوه استفاده از این تگ به این صورت میباشد:

<html>
<head>
<title>اولین جلسه طراحی وب</title>
</head>
<body>


<center>

<h1>طراحی و برنامه نویسی وبسایت</h1>

<h2>سر فصل ها:</h2>

<h4>آموزش:</h4>
<p>
شروع دوره رایگان طراحی و برنامه نویسی وب از کافه آموزش
</p>

<br>
<br>
<br>
<br>
<br>
<br>


<img src=”image/blog.jpg” style=”width:80%;height:600px;”/>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<audio src=”music/1.mp3″ style=”” controls/>

</center>

</body>
</html>

مثل تگ تصویر در این تگ هم برای مشخص کردن مسیر فایل صوتی خودمون از مشخصه src استفاده میکنیم،که اینجا ما گفتیم در فولدر موزیک فایل 1 رو برای ما اجرا کند،مشخصه کنترل هم برای نمایش اون کنترل هست که ما میتونیم فایل صوتی رو قطع کنیم،صدای اون رو کم کنیم و…،اگه بخوایم یه فایل صوتی یا ویدئو به طور اتوماتیک هنگامی که صفحه بارگزاری شد اجرا بشه به اون مشخصه autoplay رو اضافه میکنیم،بریم برای استفاده از تگ ویدئو و اینکه چطور یه ویدئو رو در صفحه وب نمایش بدیم.

تگ video در طراحی وب:

میرسیم به آخرین تگی که در این جلسه میخوایم راجع به اون بگیم،تگ ویدئو،برای نمایش ویدئو در صفحات وب از این تگ استفاده میکنیم،به عنوان مثال یه ویدئو از پیش نمایش یه محصول یه فیلم سینمایی و یا هر چیز دیگه که میخواید:

<html>
<head>
<title>اولین جلسه طراحی وب</title>
</head>
<body>


<center>

<h1>طراحی و برنامه نویسی وبسایت</h1>

<h2>سر فصل ها:</h2>

<h4>آموزش:</h4>
<p>
شروع دوره رایگان طراحی و برنامه نویسی وب از کافه آموزش
</p>

<br>
<br>
<br>
<br>
<br>
<br>


<img src=”image/blog.jpg” style=”width:80%;height:600px;”/>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<audio src=”music/1.mp3″ style=”” controls />

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<video src=”video/1.mp4″ style=”” controls />

<br>
<br>
<br>
<br>
<br>
<br>
<br>

</center>

</body>
</html>

برای استایل دهی تگ ها شما میتوانید از هر موری که خودتان میخواهید استفاده کنید،در جلسه بعد استایل های کاربری در طراحی و برنامه نویسی وب را به شما معرفی خواهیم کرد.

حتما نظرات خودتان را راجع به دوره طراحی و برنامه نویسی وب مقدماتی بنویسید و اگر مبحثی رو میخواید که آموزش بدیم،به ما اطلاع رسانی کنید.

نویسنده: ابوالفضل شیخیانی


تگ ها:



نظرات:

دیدگاه شما

نام

ایمیل ( اختیاری )

سایت( اختیاری )

پیشنهاد ویژه برای شما:

آموزش راه اندازی کسب  و کار اینترنتی رایگان

آموزش راه اندازی کسب و کار اینترنتی (بدون سرمایه اولیه)

راه اندازی کسب و کار اینترنتی را به صورت رایگان یاد بگیرید و همین حالا کسب و کار اینترنتی خود را بدون سرمایه اولیه راه اندازی کنید و به درآمد عالی برسید

19000 تومان رایگان

دانلود
Cart Item Removed. Undo
  • No products in the cart.