آموزش گام به گام طراحی سایت
آموزش گام به گام طراحی وبسایت | طراحی وب پیشرفته در سایت آموزی
در کامل ترین دوره تخصصی آموزش طراحی سایت فرانت اند در ایران مطابق با استانداردهای 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 به کار می رود. )
در ادامه به بررسی تگ های داخلی تگ body می پردازیم:
تگ p درون تگ body در سند html
عنصر p به عنوان یک تگ محتوایی درون تگ body و جهت ایجاد پاراگراف در مرورگر وب کاربرد دارد.
تگ p به عنوان یکی از تگ های بلاک لول ( block level ) در زبان html شناخته می شود.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
در کامل ترین دوره تخصصی آموزش طراحی سایت فرانت اند در ایران مطابق با استانداردهای W3C آمریکا ثبت نام کن :
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery
پیوندهای کاربردی و مفید
تگ های اچ تی ام ال در سایت آموزی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های اچ تی ام ال در سایت آموزی
تگ های منسوخ HTML در سایت آموزی
عناصر block level و inline level در سایت آموزی
تگ های اچ تی ام ال در W3school
آموزش گام به گام طراحی سایت | طراحی وب پیشرفته – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید