ساخت یک صفحه وب ساده

ساخت صفحه وب ساده با html

ساخت صفحه وب ساده با html همرا با توضیحات خط به خط

با نام و یاد خدا جلسه ی دوم از پروژه هایی با html را شروع می کنیم.

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

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

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

کد پروژه ی این جلسه ی ساخت یک صفحه ساده وب ساده با html

توضیح کامل و خط به خط کد پروژه ی جلسه ی آموزشی ساخت یک صفحه وب ساده با html

توضیح اولین کد پروژهی جلسه ی ساخت یک صفحه ی وب ساده:

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

این کد نشانگر این است که از زبان html استفاده می کنیم.

همچنین صفت dir نحوه ی چینش صفحات وب را معین می سازد(راست چین چپ چین و…)

که ما مقدار آن را rtl قرار دادیم که به معنای چپ چین است.

تگ head و محتویات دورن این تگ

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

تگ body و محتویات این تگ در آموزش ساخت یک صفحه وب ساده با html

در بالا تگ body بخش دوم زبان html باز شده است.

سپس در این تگ از صفت style که برای فزودن کد های css به تگ ها است استفاده کرده ایم.

بعد از ان هم در درون صفت style ما دستور font-family را نوشته ایم که این عبارت از زبان برنامه نویسی css است. و ما مقدار font-family را فونت معروف tahoma قرار داده ایم.

در کد بالا شما یکی از شش تگ heading به نام h1 را مشاده می کنید که برای نوشتن سر تیتر به کار می آید.

بعد هم در این تگ از دو صفت align و style استفاده کرده ایم.

صفت style که برای افزودن کد های css به کار می آید و در بالا هم گفته شد.

و صفت align که مکان قرار گیری تگ را مشخص می کند.(چپ راست پایین بالا)

ما مقدار صفت style را color:red قرار دادیم که خود عبارت داد می زند که یعنی رنگ متونی که در این تگ قرار می گیرد قرمز باشد.

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

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

عبارت بالا درون تگ هدینگ h1 قرار گرفته یعنی این متن به رنگ قرمز در وسط صفحه و… قرار می گیرد.

تگ h1 بسته شده است.

تگ p باز شده است و صفت style گرفته است.

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

ایندفعه ما با عبارت font-size:30px به مرورگر گفته ایم که محتویات تگ p را با اندازه ی فونت 30 پیکسل نمایش بده.

سپس همانطور که خودتان کد کلی را بالا مشاهده می کنید متن مورد نظر ما به نمایش در آمده است.

و هر جایی که می خواستیم به خط بعد برود از تگ:

استفاده کردیم.

تگ p بسته شده است.

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

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

بعد از این مرحله صفت alt وجود دارد. متنی که در این صفت نوشته شده است زمانی که برای عکسی که آدرس آن را داده اید مشکلی پیش آید نمایان می شود.

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

در پایان هم شما تگ br را مشاهده می کنید که برای رفتن به خط بعد به کار رفته است.

تگ h2 هم از دیگر اعضای تگ های heading است که صفت align و style را به خود اختصاص داده.

صفت align: این صفت برای تعیین محل قرار گرفتن تگ است. (وسط و راست و…)

صفت style: این تگ هم بار نوشتن کد های css به کار می رود.

مقدار صفت align مساوی شد با center به معنای وسط و صفت دیگری هم color:red که رنگ متن را مشخص کرده است.

در بالا هم یکی دیگر از اعضای heading ها را تحت عنوان h3 مشاده می کنید که صفت های align و style را خود جای داده.

توضیح این تو صفت:

چندین بار در بالا توضیح داده شده اند.

تگ بالا تگ a است که برای لینک دادن به پدیده ها مورد استفاده قرار می گیرد.

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

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

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

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

بسته شدن تگ a

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

تگ بالا هم که تگ b است و برای bold کردن به کار می آید.

تگ a هم به صورت کامل توضیح داده شد.

تگ های بالا بسته شده اند.

سخن پایانی

امیدوارم که به خوبی کد بالا را برای شما توضیح داده باشم.

با معرفی ما به دوستان آشنایان و…

ما را در امر تدریس و… یاری کنید.

نوشتهٔ قبلی
پروژه با تگ های قالب بندی متن در html
نوشتهٔ بعدی
شخصی سازی قالب آموزشی با html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست