رفتن به نوشته‌ها

برچسب: آموزش html

آموزش طراحی وب – جلسه چهارم – لیست ترتیبی و غیرترتیبی

با جلسه چهارم از آموزش طراحی وب در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.

در جلسه قبل به آموزش برچسب هایی پرداختیم که می توان گفت از برچسب های پایه HTML بشمار می آیند؛ البته تعداد آنها به چند موردی که گفته شد ختم نمی شود! در این جلسه قصد داریم تا با لیست های ترتیبی و غیرترتیبی آشنا شویم.

از لیست ها برای قرار دادن موارد متعدد یک مجموعه استفاده می شود. حال این مجموعه ممکن است شامل چند نام یا توضیحات کوتاه از یک مساله و یا لیست کردن چند عدد پشت هم باشد! در HTML دو نوع لیست با نام های لیست نامرتب (غیرترتیبی) و لیست مرتب (ترتیبی) وجود دارد که در ادامه هر یک توضیح داده خواهد شد.

لیست نامرتب (لیست غیرترتیبی)

مشخصه این لیست در خروجی وجود یک نماد دایره ای شکل پیش از هر یک از موارد است. که بنا بر نیاز میتوان آنها را در CSS تغییر داد.(در جلسات بعد بیشتر آشنا می شوید) برچسب ابتدایی و اصلی لیست نامرتب <ul></ul>  است. و مواردی که خواهان لیست شدن آنها هستید با برچسب <li></li> میان ul قرار می گیرد. به این ترتیب در خروجی یک لیست غیرترتیبی خواهید داشت.

به صورت زیر نوشته می شود:

<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ul>
</body>
</html>

خروجی در مرورگر:

html-unordered-list

لیست مرتب (لیست ترتیبی)

همانطور که از نام این لیست پیداست با ایجاد آن می توان یک لیست ترتیبی داشت. ترتیب این لیست طبق نیاز می تواند عدد یا حروف باشد که با استفاده از CSS می توان آنها تغییر داد. اما به صورت پیشفرض عدد می باشد. برچسب اصلی لیست مرتب <ol></ol> است. مواردی که میخواهید به لیست اضافه شود مانند لیست غیرترتیبی با <li></li> در ol قرار می گیرد.

به صورت زیر نوشته می شود:

<html>
<body>
<ol>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ol>
</body>
</html>

خروجی در مرورگر:

html-ordered-list

شاید در برخی از سندها نیاز داشته باشید تا یک لیست شامل چند لیست دیگر باشد؛ برای اینکار می توانید از لیست ها به صورت تودرتو نیز استفاده کرد.

برای مثال:

<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه
<ol>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
</ol>
</li>
<li>مورد چهار</li>
<li>مورد پنج</li>
</ul>
</body>
</html>

خروجی در مرورگر:

html-nested-list

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

آموزش طراحی وب – جلسه سوم – برچسب های پایه

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

پس از اطلاع از ساختار اصلی و برچسب های اصلی یک سند html به سراغ تگ های پایه و کاربردی این زبان خواهیم رفت. همانطور که در جلسه قبل گفته شد تمام محتوایی که در برچسب head قرار میگیرد خوانش آنها توسط مرورگر انجام شده (قابل رویت در صفحه وب نیست) و شامل برچسب های مختلفی است که در ادامه هرکدام را مختصرا شرح می دهم.

برچسب دوطرفه title

حتما به سایت های مختلفی مراجعه کرده اید و عنوان سایت را که بر روی زبانه (Tab) مرورگر به نمایش در می آید دیده اید؛ برای به نمایش درآوردن نام سایت بر روی زبانه مرورگر از برچسبی به نام title استفاده می شود.

بصورت زیر نوشته می شود:

<title>دانگو وب</title>

با این کار شما قادر خواهید بود زمانی که صفحه شما در مرورگر باز می شود نام آن در زبانه به نمایش در بیاید. پس در انتها با اضافه کردن برچسب title محتوای سند ما باید به شکل زیر باشد.

<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
</head>
<body>
</body>
</html>

برچسب یکطرفه meta

این برچسب شامل ساختارهای مختلفی است که بنا بر نیاز نوشته شده و موتورهای جستجو از آنها برای بررسی سایت استفاده می کنند. در اینجا با یک نوع از ساختارهای متا تگ که مشخص کننده نوع رمزگذاری (encoding) سند شماست آشنا می شوید. اگر سند خود تا به اینجا را در مرورگر خود باز کنید، در زبانه مرورگر با کاراکترهایی ناخوانا مواجه می شوید که هیچ معنایی نداشته و با آنچه شما در برچسب title قرار داده اید متفاوت است.

 

html-meta-tag

برای رفع این مشکل از برچسب meta به صورت زیر استفاده می شود:

<meta charset="utf-8">

html-meta-tag-utf8

سند پس از اضافه کردن برچسب متا:

<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

تا اینجا با دو برچسب در head آشنا شدید که برای ساخت یک سند html کاربردی هستند. اما مابقی این برچسب ها را در جلسات بعدی و با شروع مباحث پیشرفته تر آموزش خواهم داد.

نکته: به یاد داشته باشید که برچسب های دو طرفه برچسب هایی هستند که درون آنها محتوا قرار می گیرد؛ اما برچسب های یک طرفه چنین ویژگی را ندارند.

حال به سراغ برچسب هایی می رویم که در body مورد استفاده قرار میگیرند. در جلسه قبل در مورد کلیت برچسب body توضیح داده شد. این برچسب، بدنه یک سند html را تشکیل داده و تمام برچسب هایی که در مرورگر توسط کاربر قابل رویت هستند در آن قرار می گیرد.

برچسب دوطرفه p

این برچسب برای ایجاد یک پاراگراف بکار برده می شود. یکی از ویژگی های برچسب پاراگراف این است که به صورت خودکار قبل و بعد از آن فضای خالی ایجاد کرده تا فاصله آن تا پاراگراف بعدی مشخص شود.

به صورت زیر نوشته می شود:

<p >این یک پاراگراف است.</p>

سند پس از اضافه کردن برچسب پاراگراف:

<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
<p >این یک پاراگراف است.</p>
</body>
</html>

برچسب دوطرفه تیتر (عنوان)

برای نوشتن عناوین از برچسب تیتر استفاده می کنیم. این برچسب شامل ۶ سطح می باشد که هر کدام از این سطح ها اندازه فونت متفاوتی با یکدیگر دارند. غیر از اندازه فونت هر یک از آنها نقش ویژه ای را در مسائل سئو (SEO) ایفا می کنند. (مانند عنوان همین نوشته که از برچسب تیتر۱ استفاده شده است)

که بصورت زیر نوشته می شوند:

<h1>عنوان یکم</h1>
<h2>عنوان دوم</h2>
<h3>عنوان سوم</h3>
<h4>عنوان چهارم</h4>
<h5>عنوان پنجم</h5>
<h6>عنوان ششم</h6>

برچسب های توپُر کننده متن

شاید در برخی از نوشته ها با کلمات توپر(Bold) برخورد کرده اید. این یک قابلیت از html می باشد که می تواند متن دلخواه شما را به صورت بولد نمایش دهد. دو برچسب که مورد استفاده قرار می گیرند برچسب b و برچسب strong می باشد. از نظر ظاهری این دو تفاوتی با یکدیگر ندارند و هر دو عمل توپر کردن متون را برعهده دارند؛ ولی از لحاظ ساختاری، برچسب b تنها در نحوه نمایش متون به صورت توپر عمل می کند اما برچسب strong همانطور که متن رو بولد می کند؛ در مسائل مربوط به سئو و… نیز تاثیرگذار است.

به صورت زیر نوشته می شود:

<b>این یک برچسب b است</b>
<strong>این یک برچسب strong است.</strong>

برچسب های italic

یکی دیگر از مواردی که در سایت های مختلف شاهد آن بوده اید کج (italic) بودن متون است. این قابلیت نیز توسط html امکاپذیر است. دو برچسب i و em این کار را برای شما انجام خواهند داد. تفاوت این دو برچسب هم مانند برچسب های توپر کننده بوده که توضیح آن در عنوان قبل گذشت. i تنها در نحوه نمایش و em در بحث سئو و… کاربرد دارد.

<i>این یک برچسب i است</i>
<em>این یک برچسب em است</em>

برچسب یکطرفه br

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

به صورت زیر نوشته می شود:

<br>

سند نهایی ما در این جلسه شامل تگ های زیر خواهد بود.

<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
<p >این یک پاراگراف است.</p>
<h1>عنوان یکم</h1>
<h2>عنوان دوم</h2>
<h3>عنوان سوم</h3>
<h4>عنوان چهارم</h4>
<h5>عنوان پنجم</h5>
<h6>عنوان ششم</h6>
<b>این یک برچسب b است</b>
<br>
<strong>این یک برچسب strong است.</strong>
<br>
<i>این یک برچسب i است</i>
<em>این یک برچسب em است</em>
</body>
</html>

آموزش طراحی وب – جلسه دوم – ساختار سند html

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

اچ تی ام ال (HTML)

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

HTML زبانی برچسب (Tag) محور بوده که تمام دستورات آن از برچسب ها تشکیل شده اند. هر برچسب از دو علامت <> (بزرگتر و کوچکتر) ساخته شده که بنا بر کارایی و نوع ممکن است یک طرفه یا دوطرفه باشند.

  • برچسب های یکطرفه

این تگ ها از یک جفت علامت <> تشکیل شده اند.

مثال:

<img>
<hr>
  • برچسب های دوطرفه

این تگ ها از دو جفت علامت <> تشکیل شده اند. با این تفاوت که در جفت دوم با یک “/”به پایان می رسد.

علامت “/” نشان دهنده ی انتهای تگ مورد نظر است.

مثال:

<a></a>

از اینکه فعلا از تگ های بالا سردر نمی آورید نگران نباشید! چون بزودی با تمام این تگ ها آشنا خواهید شد و از آنها در پروژه های خود استفاده خواهید کرد.

همانطور که از قبل گفته شد؛ سند (File) هر زبان ساختار و پسوند منحصر بفردی دارد که باید طبق آن نوشته و ذخیره شود. HTML نیز از قائده مستثنی نیست. ابتدا به پسوند ذخیره سازی سند HTML میپردازم تا پس از ساخت یک سند، ساختار آن را شرح دهم.

ذخیره سازی سند HTML

برای اینکه بتوانیم یک سند اچ‌تی‌ام‌ال بسازیم که توسط مرورگر قابل اجرا باشد ابتدا باید بدانیم که پسوند آن باید چگونه نوشته شود. برای این کار نرم افزار ویرایشگر کد خود را باز کنید (من در اینجا از Notepad++ استفاده می کنم)

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

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

notpad-new

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. برای اینکه دسترسی بهتری بر روی سندهای خود داشته باشید یک پوشه بر روی دکستاپ ایجاد کرده (در اینجا من نام project را انتخاب می کنم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند html شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام index را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، html را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

notpad-save

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

browser-fileساختار سند HTML

ساختار اصلی و ابتدایی یک سند html شامل چند تگ پیشفرض است که در ادامه هر یک را توضیح خواهم داد.

اعلامیه Doctype

دستور Doctype یک برچسب از HTML نیست بلکه یک ثابت برای اعلام به مرورگر است. بدین معنی که Doctype به مرورگر میفهماند که سندی که در حال خواندن آن است، چه نسخه ای html می باشد. این دستور همیشه باید در ابتدایی ترین خط از سند و قبل از هر تگی قرار گیرد.

به علت اینکه ما در حال استفاده از آخرین نسخه از html (نسخه ۵) هستیم از Doctype به صورت زیر استفاده می کنیم.

<!DOCTYPE html>

برای اطلاعات بیشتر شما درباره Doctype در نسخه پیشین html به یک نمونه از آن اشاره می کنم.(فقط برای آشنایی)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

همانطور که می بینید تفاوت بین نسخه ۵ و نسخه ۴.۰۱ بسیار است!

برچسب دوطرفه HTML

این تگ اصلی ترین تگ موجود در یک سند است زیرا وجود آن به مرورگر می فهماند که سند باز شده یک فایل HTML است.

تمام برچسب ها باید درون این تگ قرار گیرند بجز Doctype.

به این صورت نوشته می شود:

<html></html>

برچسب دوطرفه head

تگ هد محل قرار گیری برچسب هایی نظیر title, style, link و… است. برچسب های قرارگرفته در head برای مرورگرها قابل مشاهده و خوانش هستند.

به این صورت نوشته می شود:

<head></head>

برچسب دوطرفه body

تگ بادی محل قرارگیری تمام تگ ها و محتوا نظیر تصویر، متن و… می باشد.

به این صورت نوشته می شود:

<body></body>

توضیحات کم در مورد هریک از این برچسب ها برای این بود که در جلسات بعدی با هریک از آنها و کاربردشان بیشتر آشنا خواهیم شد.

در انتها ما در یک سند html تگ های زیر را خواهیم داشت.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

برای به یادسپاری این برچسب ها بهتر است ابتدا آموزش را مطالعه کرده و سپس آنها را با تایپ کردن مداوم تمرین کنید.

آموزش طراحی وب – جلسه اول – پیشنیازها

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

نکته: دو تعریف جداگانه یعنی طراحی تحت وب و برنامه نویسی تحت وب وجود دارد؛ برخی این دو مقوله را با هم اشتباه گرفته و یا هردو را یکی می دانند! اما باید تفاوت بین این دو را ابتدا درک کرد.

برنامه نویسی وب چیست

برخلاف طراحی وب (Web Design) که ظاهر (Frontend) یک نرم افزار تحت وب را تشکیل می دهد و در تعاریف به آن اشاره شد، برنامه نویسی وب (Web Programming) به منظور ایجاد تعامل و اجرای فرامین کاربر و همچنین ذخیره سازی داده در پایگاه داده و در سطح بالاتر به منظور ساخت یک نرم افزار تحت وب همچون سیستم های مدیریت محتوا نظیر وردپرس، جوملا و… است. زبان های برنامه نویسی تحت وب شامل php, asp.net, java, c++,c و… و همچنین فریمورک های مشتق شده از آنها می باشد. در برنامه نویسی به نوعی باطن یا هسته یک نرم افزار نوشته می شود و از همین جا می توان تفاوت بین این دو تعریف را درک کرد.

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

تجربه کاربری چیست

User Experience که به اختصار UX نامیده می شود؛ به معنی تجربه کاربری است. در ساده ترین تعریف، یک طراح UX در صدد است تا یک سیر مناسب را برای آشنایی یک خدمت ایجاد کند! طراح UX در پی حل مشکلات کاربر در مواجهه با یک موضوع است. این مشکلات ممکن است به طرز قرارگیری یک عنصر و یا اصول زیبایی شناختی مرتبط باشد تا پس از حل آن بهترین تجربه را برای کاربر رقم بزند.

رابط کاربری چیست

User Interface که به اختصار UI نامیده می شود؛ به معنی رابط کاربری است. UI برخلاف UX مسئول پیاده سازی مسیری است که طراح تجربه کاربری ایجاد نموده است. به نوعی وظیفه طراح رابط کاربری، ایجاد طرح گرافیکی به بهترین نحو است.

انواع صفحات وب

  • وبسایت ایستا

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

  • وبسایت پویا

صفحه (dynamic) صفحه ای است که برای تعامل با کاربر غیر از استفاده از HTML و CSS از زبان های برنامه نویسی مانند PHP, ASP و.. برای ذخیره سازی اطلاعات و ساخت یک سیستم مدیریت محتوا استفاده می کند. به همین سبب اگر فردی اطلاعات لازم در مورد کار با زبان های تحت وب را نداشته باشد به راحتی می تواند از پیشخوان (Panel) که برای سایت طراحی شده صفحه خود را بسازد، مطلب بنویسد و یا ظاهر سایت را از طریق تنظیمات تعبیه شده تغییر دهد.

چه زمانی از وبسایت ایستا یا پویا استفاده می شود؟

این انتخاب ارتباط مستقیم با کار شما و طراح دارد. برای مثال زمانی که شما تنها به چند صفحه برای معرفی شغل یا شرکت خود نیاز دارید می توانید از وبسایت ایستا استفاده کنید. اما زمانی پیش می آید که شغل شما گسترده بوده و نیاز به صفحات بسیار و نوشتن مطالب و رویدادهای روزانه هستید پس می توانید از وبسایت پویا استفاده کنید.

وبسایت های پویا را می توان به وسیله سیستم های مدیریت محتوا (CMS) ی رایگان همچون وردپرس، جوملا، دروپال و… راه اندازی کرد. و یا با پرداخت هزینه سیستم شخصی مورد نظر خود را بسازید.

نرم افزارهای کدنویسی

نکته: نرم افزارهای مختلفی برای کدنویسی وجود دارد که میتوان با توجه به امکانات، زیبایی، کارایی و… یکی را انتخاب کرد.

معمولا در ابتدا ساده ترین نمونه نرم افزار انتخابی که برای کدنویسی معرفی می شود، Notepad ویندوز است! اما چون محیط نوت‌پد بسیار ساده است بنده چنین چیزی را پیشنهاد نمی کنم. در عوض نرم افزارهایی را در زیر معرفی می کنم تا هرکدام را با توجه به سلیقه خود انتخاب کنید. پیشنهاد می کنم تا مطلب ویرایشگرهای قدرتمند برای کدنویس ها را مطالعه کنید.

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