با ما همراه باشید

منتشر شده

در

آموزش طراحی وب صفرتاده (html – قسمت دوم)
5 (100%) 1

با سلام در خدمت شما هستیم با آموزش طراحی صفحات وب صفرتاده قسمت دوم.
خب جلسه قبل یه جزئیات مختصری درباره HTML گفته بودیم که باز این جلسه تکمیلش میکنیم.
کلا گفتیم که HTML ما ساخته شده از یکسری تگ مثل <h1>که بااین علامت(<>) باز میشن و با علامت (/) بسته میشن.
موقع باز شدن این تگ ها میتونیم بهشون خاصیت یا attribute بدیم.

 

مقاله‌های مرتبط:

 

مثلا:
<h1 style =”color:red”>
</h1>
بعداً بیشتر درباره attribute صحبت میکنیم.

«ساختار HTML»

*تگ های معنایی:

  • <h1><h6>
  • <p>
  • <br>

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

به عنوان مثال:این تگ،مفهوم هدر رو میرسونه <h1>، این تگ،مفهوم پاراگراف رو میرسونه <p>و…
توی default  (پیش فرض)بروزرها فرضا فایرفاکس یا کروم هر کدوم از این برزورها به یک شکلی مفهوم این تگ های معنایی رونشون میدن.
مثلا متن رو bold میکنند یا فونتشو بزرگ میکنند.
تگ <br> داخل html یجورایی مستقل از Enter توی متنه.
مثلا اگر توی متنتون Enter بزنید (جهت فاصله افتادن بین متن)و برید خط بعد، توی html  همچین اتفاقی نمی افته و به خط بعدی نمیره ولی با استفاده از تگ <br> داخل متنتون خیلی راحت میتونید به خط بعدی برید.

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

از اونجایی که دوتا بلاک نمیتونن در کنارهم قرار بگیرند،به صورت پیش فرض بلاک جدید میره زیر بلاک قدیمی. پس در این صورت پاراگراف جدیدمیره زیر پاراگراف قبلی.

*تگ های فرمت

  • <em><small>
  • <b>
  • <i>
  • <sub><sup>

این نوع تگ ها خیلی مفهوم خاصی نشون نمیدن لزوماً بزارید با مثال بهتون بگم:

  • تگ<em>:این تگ برای متن هایی که مهم است به کار میره.
  • تگ<b>:متنی که درون این تگ قراربگیره(bold) میشه.
  • تگ<i>:متنی که درون این تگ قرار بگیره (italic)میشه.
    تگ های<sub><sup>:مثلا وقتی که
    می خواید x² یا x2 رو نشون بدید از این تگ ها استفاده میشه.

*دستور DOCTYPE

پیش از هر چیز بد نیست تعریفی از این دستور داشته باشیم، دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وبه، از اونجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML یا (HyperText Markup Language) را ارائه کرده که هر کدام از اونها در مقایسه با هم دارای تفاوت هایی کمی هستند، اما این موضوع سبب شدکه مرورگرهای وب، در برخورد با صفحات مختلف نتونن در حالت عادی، استاندارد صحیح رو شناسایی کنن و به جای پردازش مناسب با استاندارد اصلی، عملیات پیش فرض خودشون رو برای نمایش صفحه انجام بدن.

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

عجب توضیح خوبی بود😁 خب حالا بریم با این تگ ها یه مثال بزنیم:

خروجی:

بازم اولین چیزی که بعد از این باید توی html قرار بگیره عکسه،یک تگ <img> هست که درواقع محتوا نداره همون جا که باز میشه،بسته میشه به این صورت:

<img src=”balloons.jpg”>

یک فایل تصویری باید در کنار html قرار بدید،و جای اینجا<src> باید آدرسشو مشخص کنید.
خب من یه عکس balloons.jpg دارم که اونو پیش فایل index.html قرار میدم.
خب حالا می خوایم با تگ<img>این عکس رو لود کنیم.

دو تا تگ توی img وجود داره که خیلی مهمه یکی تگ alt هست که مخفف alternate.
ممکنه توی اینترنت عکس به سرعت لود نشه و طول بکشه و قبل از اینکه عکس نمایش داده بشه، اون چیزی که اینجا مینویسید نمایش داده میشه.
خب من بهalt مقدار balloons رو میدم.یه تگ دیگه ای به نام title هست که وقتی که ماوس ببرید روی عکس چی نشون داده بشه در واقع.
دوتا خاصیت دیگ هم طول(width) و عرض(height) و واحدشون پیکسله.
کلا واحدی که توی طراحی وب استفاده میکنند پیکسله.

یه نکته ای رو لازم دونستم بگم اینکه تا میتونید از این خاصیت width,height کمتر استفاده کنید.وهروقت نیاز داشتین از عکسی استفاده کنید،اول اون عکسو به اندازه ای که نیاز دارید دربیارین و بعد ازش استفاده کنید.
چون کم کم حجم داره برای ما مهم میشه و ۳kB ، ۳۰۰KBخیلی در آینده مهم خواهد بود.

خب حالا باهم یه مثال ببینیم:

خروجی:

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

کلا تکنیک های زیادی رو به کار میبرند،مثلا فرض کنید یه سایت درازی باشه و شما باید اسکرول کنید تا به همه قسمت هاش دسترسی داشته باشید.
بعد یه تکنیکی میزنن برای افزایش سرعت صفحه اینطوریه که تا وقتی که به اونجایی که در واقع میخواهید برید اسکرول نکردید عکس های مربوط به اون تیکه اصلا از سرور گرفته نمیشه،حالا در آینده با جاوااسکریپت می‌بینید که چجوری میشه این کارو کرد.
یه تکنیک دیگه ای که استفاده می‌کنند اینه که فرضا ۱۰تا عکس های مختلف ی که توی صفحتون هست اینارو میان باهم ترکیب میکنند،میشه یه عکس خیلی بزرگ خب بعد میگن یا تیکه عکس رو هدر بزار،اون تیکه عکسو فوتربزار.
درواقع عکس و بعد از گرفتن از سرور تیکه تیکه میکنند،در آینده اینو میبینیم که چرا اصلأ این کار فایده داره.

درباره پروتکل HTTPبیشتر توضیح میدم چون یه اشاره ای قبلاً کردم.
مرورگر به وب سرور میگه که index.htmlروبده و وب سرور index.html رو بهش برمیگردونه،بعد وقتی که کلا پارسش کرد و دید یه عکس Balloons.jpg نیاز داره میگه اونو بده و وب سرور عکس رو بهش برمی گردونه.

اون چیزی که بدیهتا ما باید تو وب پیج ازش استفاده کنیم احتمالا لینک به وب پیج های دیگس.
لینک رو با تگ<a> نشون میدن یه خاصیت:”..”=href داره میگه که به چی لینک باشه و توی تگ <a>اون متنی که میخواید لینک باشه و قرار میدید.

<a href=”…”>link</a>

برای مثال یه فایل html دیگه می‌سازم و توش این قطعه کد رو قرار میدم:

<h1>this is another html<h1>

خروجی:

خب برمیگردیم به فایل قبلیمون و قطعه کد لینک رو می‌نویسم برای قشنگی کار توی تگ <p>قرارش میدم.
<P>
<a href=”another.html”>go to another html</a>
</P>

خروجی:

تگ <a> برخلاف تگ <p> که گفتم حالت بلاک مانند داره زیرهم قرار میگیرند.
تگ<a>این لاینه (inline)در مقابل بلاک،به این معنی که اگر شما چند تا تگ <a> درکنارهم داشته باشید در یک خط قرار میگیرند.
مثلا:

خروجی:


خب مشخصه دیگ درواقع متن و لینک ها درکنارهم قرار میگیرند.
الان وب سرور من بلده ۳تا فایلو سرو کنه :

  • another.html
  • Index.htm
  • Baloons.jpg

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

  • index.html
  • Index.htm
  • Index.php

اگر مسیری‌رو مشخص نکنید،خودشون میرن اول دنبال اینا میگردن اگر پیدا نکرد پیغام خطا میده.

یه چیز دیگه ای که توی تگ <a> به درد ما میخوره خاصیت target هستش که با استفاده از اون میتونم چند تا وب پیج دیگه رو وب پیجتون لود کنید.
برای مثال:میشه بالای صفحه گوگل باشه و پایین صفحه یاهو.
یه چیز دیگه ای که توی Target وجود داره اینه که اگر اونو مساوی blank قرار بدید مثل:
“Target=”_blank

که خاصیتش اینجوریه که اگر روی عکس کلید کنید توی tab جدید باز میکنه(یا همون پنجره جدید،بخوام معنیش اینجوری میشه که کلا توی یه جای دیگه بازش میکنه.)
خب بیایید یه مثال ببینیم:

خروجی:


خب یه مثال جالب میخوام بزنم،میخوام به جای نوشته ی تگ <a> عکس بزارم.

خروجی:


خب قبل از اینکه وارد بحث جدید بشم میخوام یه سوال بپرسم:
اگه بخوام خود تگ <h1>رو نشون بدم و یا هر تگ htmlدیگه خود متن رو ببینم نه اثرش رویhtml رو چه کار کنم؟
جوابش سادس فقط کافیه از ;lt& به معنی کوچکتر و ;gt& به معنی بزرگتر استفاده کنید.
به این صورت:

خروجی:

«ساختار html (قسمت دوم)»

۱:لیست

  • <ul>
  • <Li></Li>
  • </ul>
  • <ol>
  • </ol>

تگ <ul>:به معنی لیست بدون ترتیب و ایتم های <li> به این صورت:

خروجی:

تگ<ol>:به معنی لیست ترتیب دار

خروجی:
یه خاصیتی که میخوام به <ol> بدم اینه که شماره های منو از ۲۰ شروع کنه،به این صورت:

خروجی:

۲:تگ های Generic

  • <Span></Span>
  • <Div></Div>
  • Span,div
    سطح بر خط،سطح بلوک

شما ممکنه مستقل<p> از و<img> یکسری متن رو بخواید بلاک(block)یا این لاین (inline) کنید.

برای این کاردوتا تگ <span><div>داریم که مخصوص این کاره.
تگ<span>:یه تگیه که هیچ کاری نمیکنه عملاً، و صرفاً یک تیکه رو مشخص میکنه و یک تگ in line هست.

تگ<div>: شبیه spanهستش با این تفاوت که block هست.

خب حالا بریم یه مثال بزنیم:

خروجی:

یه مقدار که طرح صفحمون پیچیده تر بشه این تگ ها خیلی به کار میاد مخصوصاً تگ <div>

تگ <div> رو شبیه یه مستطیل فرض کنید که توی صفحه تعریفش کردید.درواقع <div> ها برای چیدن طرحتون به کار میرن،ولی در کل اینجوری تصورکنید که مستطیل بندی کردید صفحه پیجتون روو با اونا میتونید طرح بدید به صفحتون.

«جدول»

باز یه چیز بدرد بخور دیگه ای که احتمالاً خوب هست بدونید،جدول ها هستن تگ های که وجود دارن براش:

<Table>
<tr><td> NW</td><td>NE</td></tr>
<tr><td>SW</td><td>SE</td></tr>
</Table>

<tr>:table row
<td>:table data

اینجوریه که یه جدول یکسری سطر داره و هرسطح یکسری ستون داره که با <td> مشخصشون میکنند.

یه مثال ببینیم:

خروجی:

دوتا سطر داره و هر سطرشم دوتا ستون داره یه خاصیتی که میخوام به <table> اینه که میخوام خاصیت border=1 تعریف کنم،که یه کادر بهش بده.
برای ترکیب ستون ها میتونیم از colspan استفاده کنیم ینی چن تا ستون رو باید بگیره،همین کار رو هم میشه با سطر هم انجام داد اونم با خاصیت rowspan حالا یه مثال ببینیم.

خروجی:


یه کار دیگه ای که میشه با <table> انجام داد اینه که کل صفحه رو table کنم و یه Layout که دوست دارم باهاشون درست کنم،قدیم خیلی مرسوم بود ولی الان با div,span صورت میگیره.
خب به پایان این بخش از آموزش صفرتاده رسیدیم، امیدوارم که زیاد خسته نشده باشید،تمرین یادتون نره..

مارودنبال کنید.

برای افزودن دیدگاه کلیک کنید

یک پاسخ بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *