پسر برنامه نویس

همه چیز درباره html چیست

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

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

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

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

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

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

HTML مخفف کلمات Hypertext Markup Language است،

این زبان از سال ۱۹۸۰ در پروسه های طراحی وب استفاده می شد

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

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

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

در HTML دستورات درون تگ ها قرار میگیرند.

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

کار شما با یک محیط Notepad ساده هم راه می افتد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تگ بسته body حکم انتهای کدهای بدنه دیداری سایت را دارد.

این تگ بعد از بسته شدن تگ 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 شناخته می شود.

منبع

یادیفای شنبه 8 تیر 1398 ساعت 16:08

0 نظر