امروز اولین قدم در راه طراحی وب رو بر میداریم .
برای اینکه شما یک طراح وب بشید در مرحله ی اول نیاز مند یادگیری htmlهستید.
خب بریم سراغ یادگیری👍
تعریف Html:
اچ تی ام ال یک زبان نشانه گذاری هست نه زبان برنامه نویسی. اچ تی ام ال در واقع صفحه وب رو اسکلت بندی و لایه بندی میکند. یک صفحه وب رو در نظر بگیرید برای طراحی اون صفحه، شما باید ابتدا از اچ تی ام ال برای لایه بندیش استفاده کنید. به اصطلاح اسکلت بندیش بکنید بعد با زبان css اون صفحه رو قشنگ تر زیباترش کنید.
اچ تی ام ال زبان خیلی راحت و ساده ای هستش و اگر با مباحث این دوره بیایید جلو شش ماه فول میشید 👍.

بیشتر بخوانید : آموزش html & csss (پیشرفته)

برای اینکه بتوانیم کدنویسی کنیم و نتیجه ی کارمون رو ببینیم نیازمند دو چیز هستیم.
1:نرم افزار (Editor or IDE).
2:مرورگر.
برای مرور گر میتوانید از گوگل کروم استفاده کنید .
برای نرم افزار مورد نیاز میتوانید انتخاب های مختلفی داشته باشید و شما حتی با ساده ترین نرم افزار ها مثل notepad هم میتوانید کد های خودتان را بنویسید ولی ما چندین پیشنهاد بهتر داریم در زیر به چندین نرم افزار اشاره میکنیم که میتوانید به سلیقه ی خود یکی را انتخاب کنید
1:Notepad
2:Notepad++
3:Bracket’s
4:VScode
5:atom
6:Dreamweaver

پیشنهاد بنده برای راحتی کار شما برای کار با اچ تی ام ال گزینه ی 3 و 4 هست که میتوانید یکی با سلیقه ی خود انتخاب کنید .
ما در این دوره برای راحتی کار شما از نرم افزار Bracket’s استفاده خواهیم کرد.

بالاخره میریم سراغ کد نویسی 😍.

در ابتدا یک پوشه در کامپیوتر خود باز کنید. نام پوشه رو هرچی دوس دارید بزارید. بعد نرم افزار brackets رو باز کنید. در قسمت سمت چپ گزینه New folderرو بزنید و بعد گزینه ی Open folderرو بزنید در پنجره ی باز شده اون پوشه ای که ساختید رو انتخاب کنید و گزینه ی Select Folderرو بزنید. الان پوشه ی شما انتخاب شده بعد در قسمت سمت چپ درست زیر New folder کلیک راست کنید و گزینه ی New file رو انتخاب کنید و بعد یک نام دلخواه با پسوند html را وارد کنید. مثال برای وارد کردن نام 👈 web.html نام به صورت اختیاری هست. یعنی میتوانید حتی اسم خودتون رو هم وارد کنید ولی پسوند باید htmlباشد بعد از ساختن سند اون رو انتخاب کنید و برید صفحه ی کد نویسی.

قبل از کد نویسی اچ تی ام ال ذکر چند نقطه لازم است.
1:هر چیزی که داخل یک صفحه مرورگر قابل مشاهده هست از یک تگ مخصوص به خودش ساخته شده
2:ساختار کلی یک تگ به صورت زیر است 👇.
یک علامت کوچک تر >
نام تگ
یک علامت بزرگ تر<
و هر تگ که شروع میشود یک تگ پایانی هم دارد که با علامت کوچک تر و علامت/ و نام تگ و علامت بزرگ تر مشخص میشود.

بیشتر بخوانید : چرا باید سایت داشته باشیم؟

				
					<p>website</p>

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

نکته: دوستان برای اینکه نتیجه ی کد های خودتون رو مشاهده کنید باید اون سند و صفحه رو save کرده و داخل مرورگر باز کنید.

خب سریع بریم سراغ کد نویسی ، که در این بخش کد رو مینویسیم بعد میریم سراغ توضیحش👍.

خب شما برای اینکه بتوانید از کد های html استفاده بکنید حتما باید این کد رو بنویسید یعنی این کد base تمام کد های اچ تی ام ال هست حتما باید نوشته بشه.

بریم سراغ توضیحات کد

				
					<doctype html></doctype>

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

این کد ریشه ی تمام تگ های ما و نمایان گر یک صفحه ی وب هست.

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

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

در این عکس 3 عدد تگ رو ما هنوز نگفتیم ولی نگران نباشید تک تک این تگ هارو مورد بحث قرار خواهیم داد.

یه مبحث دیگه ای که. دوستان باید بهش بپردازیم صفت ها هستن. بریم که یاد بگیریم اصلا صفت چیه؟
ما به وسیله ی صفت ها در اچ تی ام ال می توانیم کنترل بیشتری بر تگ ها داشته باشیم. بسیاری از تگ ها صفت های منحصر به فرد خود را دارند که به این صفت ها صفت های اختصاصی می گویند. اما بعضی از صفات نیز بین تگ ها مشترک است و در همه ی تگ ها یک کار را انجام میدهند به این صفت ها صفت های عمومی می گویند. مثال 👇

Class
Id
dir
lang
style
title
hidden
contenteditable

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

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

بیشتر بخوانید : افزونه المنتور چیست؟

				
					<p>website</p>

این تگ، تگه پاراگراف هست و میتونید یک متن رو داخلش بنویسید.

align

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

1:left – متن در سمت چپ قرار میگیرد
2:right – متن در سمت راست قرار میگیرد
3:center – متن در وسط قرار میگیرد
4:justify – متن از هردو طرف تراز میشود

حالا بریم یاد بگیریم که صفت و تگ رو چطوری با هم قرار میدهند به مثال زیر توجه کنید.

				
					<p align="right">website</p>

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

امروز میخواهیم چند تا از تگ های قالب بندی رو بگیم پس زود میرم سراغ اموزش ها.

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

متن داخل این تگ در صفحه به صورت ضخیم نمایش داده خواهد شد.

این تگ دقیقا مثل تگ b متن رو ضخیم میکند ، این تگ زمانی به کار میرود که بخواهیم متن مهمی رو که از متن های معمولی جدا هست ، ضخیم کنیم.

این تگ متن را ایتالیک میکند یعنی مورب میکند کمی کج می کند.

این تگ دقیقا مثل تگ i متن رو مورب میکند ، این تگ زمانی به کار میرود که بخواهیم متن مهمی رو که از متن های معمولی جدا هست ، مورب کنیم.

این تگ زیر متن های ما یک خط میکشد.

<s>

این تگ متن مارو به صورت خط خورده نشان میدهد.

متن را بالا چین میکند.

متن را پایین چین میکند.

این تگ هارا هم به صورت ترکیبی و هم به صورت تکی تمرین کنید وقتی میگویم به صورت ترکیبی یعنی به شکل زیر 👇

				
					<p>webdisign<i>lnformation</i></p>

دوستان اینم نمونه کد بالا هم به صورت تکی و هم به صورت ترکیبی تقدیم شما⁦❤️⁩

بریم سراغ ادامه ی تگ های قالب بندی.

<big>

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

بیشتر بخوانید : سایت یا اینستاگرام | 6 دلیل برای رها کردن اینستاگرام

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

<abbr>

این تگ برای کلماتی که مخفف هستند به کار میرود و با صفت title نوشته میشود
مثلا شما اسم websiteرو در نظر بگیرید برای اینکه بتوانید با این تگ یک مخفف ایجاد بکنید به شکل زیر مینویسید.

				
					<abbr title="website">wb</abbr>

الان هرگاه در مرورگر ماوس را روی کلمه ی wbببرید در زیرش یک کادر ظاهر شده و کلمه ی websiteرا نمایش خواهد داد.

<hx>

معمولا برای ایجاد تیتر ها و عنوان ها استفاده میشه و مقادیر 1 تا 6 رو میگیرد مقدار 1 بزرگ ترین متن و مقدار 6 کوچک ترین متن میباشد مثال👇

				
					<h1><span id="website">website</span></h1>
<h2><span id="website1">website</span></h2>
<h3><span id="website2">website</span></h3>
<h4><span id="website3">website</span></h4>
<h5><span id="website4">website</span></h5>
<h6><span id="website5">website</span></h6>

همان طور که گفتیم مقدار 1 بزرگ ترین متن میباشد و به ترتیب مقدار 2 کوچک تر از 1 و… 6از همه کوچک تره.

<del>

از این تگ برای مشخص کردن تغییراتی که نشان میدهد نویسنده صفحه ، محتوایی که از قبل در صفحه موجود بوده است را حذف کرده است ، میتوان استفاده کرد. مهم ترین صفت این تگ صفت cite هست که آدرس یک صفحه که در آن دلیل حذف شدن محتوا را توضیح داده باشد مشخص میکند.

<ins>

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

دوستان اینم نمونه کد نوشته شده در قالب کد نویسی از مباحث بالا

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

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

<pre>

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

<hr>

این تگ یک خط افقی ایجاد میکند.
و از صفت های زیر پشتیبانی میکند👇

Width

با این صفت که مقادیر px و درصد را میگیرد میتوانیم عرض خط را کنترل کنیم.

بیشتر بخوانید : آموزش جامع المنتور فقط در 20 دقیقه! - کاملا رایگان

Color

با این صفت که از نامش هم معلومه میتوانیم رنگ خط را کنترل کنیم و برای مقدار دهی نام رنگ مثلا red را مینویسیم

Size

با این صفت میتوانیم ارتفاع خط را کنترل کنیم و مقادیر px و در صد را میگیرد.

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

نمونه کد تگ های بالا

بریم یک فیلم طراحی های خلاقانه با HTML + CSS

خب با این تگ میتوانیم برای متن های خودمون اندازه و رنگ و فونت خاصی رو اعمال بکنیم.
این تگ از صفت های زیر پشتیبانی میکند.

face

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

size

با این صفت میتوانیم اندازه ای برای متن خود اعمال کنیم که مقادیر 1تا7را میتوانیم به این صفت بدهیم.

color

با این صفت میتوانیم رنگی برای متن خودمان اعمال بکنیم که با نوشتن نام رنگ میتوانیم رنگ مورد نظر خودمان را مشخص بکنیم مثل blue.

این تگ حتما باید داخل قسمت headقرار بگیرد و کارایی این تگ اینه که یه فونتی برای صفحه مشخص میکند که بقیه ی تگ ها از این تگ به عنوان base فونت خود استفاده میکنند.

کد اماده ی تگ فونت.

<a>

با این تگ میتوانیم یک لینک درست کنیم.
که میتواند ادرس یک صفحه ی دیگری باشد یا ادرس یک وب سایت یا ادرس تلگرام و اینستاگرام و…
مهم ترین صفت این تگ صفت href هست که داخل این صفت میتوانیم ادرس صفحه یا وب سایت یا تلگرام و … را قرار دهیم.

				
					<a href="google.com">website</a>

الان داخل مرورگر چنانچه بر روی کلمه ی websit کلیک کنیم به سایت google خواهیم رفت. البته در این نمونه که مثال زدیم ادرس کامل ندادیم و کار نخواهد کرد. در این بخش فقط میخواستم که اشنایی اولیه ای داشته باشید.

در ادامه بیشتر به این تگ میپردازیم.

accesskey

از این صفت برای ایجاد میانبر برای دسترسی به اون لینک داخل مرورگر استفاده میشه. هر کاراکتری که داخل این صفت قرار داده بشه داخل مرورگر با زدن کلید Alt+accesskey میتوانیم به اون لینک دسترسی پیدا کنیم و اون رو اجرا کنیم. البته این صفت مختص لینک ها نیست و تقریبا برای تمامی تگ های اچ تی ام ال که قادر به اجرا شدن هستن کار میکنه.

بیشتر بخوانید : طراحی سایت شرکتی | 20% تخفیف

Target

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

_blank

لینک‌ را کاملا در صفحه ای جدید باز میکند.

_self

لینک‌ را در همان صفحه ای که لینک‌ قرار دارد باز میکند.

_top

صفحه را در پنجره ای بدون فريم باز می كند غالبا مثل self _عمل می کند.

_parent

لينک را در frameset پدر تگ frame جاری باز میکند.

framename

لینک را در پنجره ای با نام مشخص باز میکند.

download

با استفاده از این صفت میتوان مشخص کرد که وقتی کاربر بر روی یک لینک (متن یا تصویر و..) کلیک کرد یک فایل (تصویر,صدا,متن و…) بصورت مستقیم برای کاربر دانلود شود.

یک فیلم دیگه از طراحی خلاقانه با html & css ببینیم

در این قسمت دو نوع ادرس دهی می پردازیم.

1:ادرس دهی مطلق
2:ادرس دهی نسبی

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

http://google.com

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

images/logo.png/..

معمولا برای دسترسی به فايل هايی از داخل سرور (سايت) خودمان از آدرس های نسبی و براي دسترسی به
فايل هايی در سرور (سايت) های ديگر از آدرس های مطلق استفاده ميشود.

لینک های لنگری : لینک های لنگری در صفحه ی سایت خودمان مورد استفاده قرار میگیرند فرض کنید در ابتدای سایت یک لینک دارید و در اخر سایت یک تگ p دارید و میخواهید وقتی روی اون لینک کلیک میکنید به تگ p منتقل بشید برای این کار باید کد زیر را بنویسید.

				
					<a href="#hi"> web </a><a> </a>

داخل ادرس دهی لینک حتما باید از کاراکتر( # ) استفاده بکنید و داخل تگ p این کد رو باید بنویسید.

				
					<p id="hi">web site</p><p></p>

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

به این دوره امتیاز دهید و نظر خودتون رو ثبت کنید

 4.5/5

0 0

محسن حسن آبادی وب‌سایت

سلام ، من محسن حسن آبادی هستم ، از سال ۹۵ طراحی سایت رو شروع کردم و قصد دارم تجربیاتم رو باهاتون به اشتراک بزارم

آموزش html & css (مقدماتی)

سلام خیلی خوش آمدید!