آموزش گام به گام طراحی وبسایت

آموزش گام به گام طراحی وبسایت | طراحی وب پیشرفته در سایت آموزی

در کامل ترین دوره تخصصی آموزش طراحی سایت فرانت اند در ایران مطابق با استانداردهای W3C آمریکا ثبت نام کن :

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

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

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

مقدمه ای بر آموزش طراحی وبسایت

وقتی صحبت از طراحی وب میشود قبل از هر زبان به یاد HTML می افتیم، پایه و اساس طراحی سایت با HTML است.

HTML مخفف کلمات Hypertext Markup Language است، این زبان از سال ۱۹۸۰ در پروسه های طراحی وب استفاده می شد و در پیشرفت طراحی وب روز به روز نقش بسزایی ایفا نمود.

اگر به تاریخچه Html علاقه مندید میتوانید به مطلب تاریخچه HTML در طراحی وبسایت مراجعه کنید.

اگر بخواهید در این حوزه فعالیت نمایید باید با واژه تگ آشنا شوید، در HTML دستورات درون تگ ها قرار میگیرند.

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

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

نرم افزارهای ویرایش کد Adobe dream viewer ، sublime ، bracket و نوت پد پلاس پلاس ( Notepad++ ) و… به عنوان نرم افزارهای ادیتور کدنویسی پیشرفته تر در این زمینه محسوب می شوند.

تگ Head در آموزش گام به گام طراحی وبسایت با HTML

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

تگ head برای نشان دادن بخش هد سند HTML و اطلاعات عمومی (metadata) در مورد سند استفاده می شود.

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

بین دو تگ <html> و <html/> تگ‌های جدیدی با اسم تگ باز <head> و تگ بسته <head/> قرار می‌گیرند.

به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.

تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه html است.

مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند.

آموزش گام به گام طراحی سایت | طراحی وب پیشرفته

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

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

در کامل ترین دوره تخصصی آموزش طراحی سایت فرانت اند در ایران مطابق با استانداردهای W3C آمریکا ثبت نام کن :

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

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

تگ head در موتور جستجو

در حالی که محتویات کمی از تگ head به کاربران نشان داده میشود ، اما این تگ برای رباتها مهم است.

موتورهای جستجو ، خزنده هایی دارند (به عنوان مثال در گوگل GoogleBot نامیده میشوند) که به طور مداوم برای گردآوری و ایندکس کردن لینک ها از یک سایت به سایت دیگر به در اینترنت به گشت و گذار می پردازند.

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

تگ <head> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

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

تگ Body در آموزش گام به گام طراحی وبسایت با HTML

تگ <body> بدنه سند را تعریف می کند و شامل تمام محتویات یک سند HTML ، مانند متن، لینک ها، تصاویر، جداول، لیست ها، و غیره است.

یعنی شما در وبسایت خود هر آیتم بصری را باید درون تگ <body> ایجاد کنید.

به عبارت دیگر چارچوب دیداری سایت شما شامل تگ های زیادی است.

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

تگ body به عنوان پدر تگ های درونی خود محسوب می شود.

و مانند سایر تگ ها از قانون سلسله مراتبی در زبان html تبعیت می کند.

آموزش گام به گام طراحی سایت | طراحی وب پیشرفته

تگ های بعد از تگ body

body پس از تگ های meta ، head ، html و title و.. در سند html به کار می رود.

تگ <body> شامل یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

این تگ بعد از بسته شدن تگ head ، باز و قبل از بسته شدن تگ html ، بسته می شود.

درون تگ body تگ های مهمی جهت طراحی چارچوب سایت استفاده می شوند.

تگ <body> در همه مرورگرهای معتبر اعم از فایرفاکس ، گوگل کروم ، اپرا ، سافاری و اینترنت اکسپلورر پشتیبانی می شود.

برخی تگ های مهم که درون تگ body جهت ساخت چارچوب زبان html به کار می روند:

تگ p ( تگ پاراگراف )
تگ a ( تگ ساخت لینک )
تگ img ( تگ ایجاد عکس در اسناد html )
تگ های heading ( h1 , h2 , h3 , h4 , h5 , h6 )
تگ div ( ایجاد سکشن و بخش بندی برای چارچوب صفحات html )
عنصر span ( ایجاد تنوع درون متنی با سکشن های داخلی و اینلاین بلاک دارای استایل متفاوت )
تگ article ( تگ article یا تگ مقالات به عنوان یکی از تگ های مستقل در سند html کاربرد دارد )
تگ form ( برای ساخت فرم ها در html از تگی به نام تگ form استفاده می کنیم. )
تگ button ( تگ button یک دکمه قابل کلیک را در سند HTML تعریف می کند. )
عنصر input ( این تگ جهت ایجاد کنترل ها در سند html معمولا در درون تگ form به کار می رود. )