ساخت قالب با HTML

ساخت قالب با HTML 1024 576 نویسنده

طریقه ساختن قالب با HTML

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

و حالا بیایید به این بپردازیم که چگونه می توان یک فایل اچ تی ام ال را برای شروع قالب سازی و یا همان پیکره بندی ایجاد نمود؟ برای این کار باید ابتدا به ساکن یک فایل با نام و پسوند index.html بسازید. همیشه هم هاست شما اول این فایل را با همین نام استارت می کند. حالا فایلی را که تولید نموده ایم و وصف آن را گفته بودیم. با یکی از ویرایشگر هایی که کمی بالا تر توضیحش را داده بودیم ویرایش می کنیم. و در درون آن ابتدا همان جمله ی معروف Hello World می نویسیم. یعنی سلام دنیا. این جمله منظورش این است که وب سایت جدیدی قدم به دنیای وب گذاشته است.

index

index

 

 

کشیدن و رها کردن در ساختن قالب HTML

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

 

<html>

<head>

<title>Page Title</title>

</head>

<body>

Hello World

</body>

</html>

 

 

دقت کنید که در کد های بالا جایی به نام Page Title وجود دارد که اشاره به عنوان صفحه دارد. می توانید هر عنوانی را برای آن در نظر بگیرید. ما در ایجا عبارت ” اوج آراد پرگاس” را انتخاب می کنیم و به شکل زیر قرارش می دهیم:

 

<html>

<head>

<title>اوج آراد پرگاس </title>

</head>

<body>

سلام دنیا

</body>

</html>

 

از طرفی ما به جای جمله ی Hello World جمله ی ” سلام دنیا را قرار دادیم. و حالا عکس زیر را داریم. خوب به تغییرات به وجود آمده توجه کنید:

 

عنوان صفحه

عنوان صفحه

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

 

 

 

موضوع می تواند کمی سخت تر هم باشد

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

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

 

 

 

 

ارائه ی طرح اولیه

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

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

 

 

 

 

نقشه ی ساختن قالب HTML

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

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

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

 

قالی PSD

قالی PSD

 

 

در پروژه خود به چه پوشه هایی نیازمندیم؟

همان طور که می دانید تا بخواهیم یک فایل وب را بسازیم. باید از چندیدن و چند ابزار برای این کار استفاده کنیم. و طبعا نیاز به چندین فولدر هم خواهیم داشت که هر کدام کارایی خود شان را خواهند داشت. در قسمت های قبلی چنین گفتیم که وقتی فایل index.html را می سازیم. حتما باید فولدر را هم برای آن در نظر بگیریم. اما در این قسمت می خواهیم بگوییم که برای ساختن قالب HTML باید چندین فولدر دیگر را هم در نظر داشته باشیم. یکی این که فولدری به نام img را ایجاد کنیم. که قائدتا عکس ها را در آن می گذاریم. و دوم این که فولدر به نام CSS نیاز خواهیم داشت. چیز هایی که در این مقاله به آن ها اشاره نمودیم. جزو پایه ای ترین موارد ساختن قالب HTML بود. در قسمت های بعدی موارد بیشتری را بررسی خواهیم نمود.