ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

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

طراحی سایت با html

 در این مقاله قصد داریم طراحی سایت با html را برای شما شرح دهیم و به صورت مقدماتی آن را بررسی کنیم. با ما همراه باشید.

Html مهم ترین ابزار طراحی سایت
در html همه ی چیز را در بین تگ های < > قرار می دهیم. به کد زیر دقت کنید که با زبان html نوشته شده است.

 

شما می توانید کدهای html را در هر سند مانند نوت پد بنویسید. هر ادیتور که قابل نگارش باشد مثل تکست داکیومنت قابلیت نوشتن اسناد html را دارد. در ساخت سایت با html هر سند را با نوشتن خط اول قطعه کد بالا شروع می کنیم. سپس باید تگ html را باز کنیم و در این بین می توانیم هر تگی را قرار دهیم. هر تگ را که باز می کنیم باید در انتها آن را ببندیم. هر تگ در html بیان گر یک چیز است. در ادامه بیشتر خواهیم گفت.

آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5

مهم ترین تگ های طراحی سایت با html

طراحی سایت با html

یادگیری html بسیار آسان می باشد

مهم ترین تگ های html به شرح زیر می باشند:
• تگ html: هر سند html باید با این تگ آغاز شود و در نهایت در آخر سند با همین تگ بسته می شود.
• تگ title: در طراحی سایت با html این تگ عنوان صفحه را بیان می کند و مابین تگ head قرار می گیرد.
• تگ body: این تگ بدنه ی سند است و می تواند شامل هر نوع تگی باشد.
• تگ h1 تا h6، سرتیترها : سرتیتر ها را با این تگ ها مشخص می کنیم. و به ترتیب از بالا تا پایین یعنی از h1 تا h6 از اهمیت تگ ها کاسته می شود.
• تگ های ایجاد کننده خط و فاصله: دو تگ یکتای br و hr تگ هایی هستند که از آن ها به دفعات زیاد در اسناد html برای ایجاد خط و فاصله استفاده می شود.
پاراگراف ها را در ساخت سایت با html با تگ <p> مشخص می کنیم.

ویژگی های تگ های html در طراحی سایت با html

طراحی سایت با html

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

همان طور که گفتیم عناصر html میان دو تگ قرار می گیرند. هر عنصر html می تواند دارای ویژگی هایی نیز باشد. به عنوان مثال قطعه کد زیر را مشاهده کنید.

 

تگ a یک لینک را معرفی می کند و href آدرس آن لینک است.

عکس ها در طراحی سایت با html با تگ <img> معرفی می شوند. نام فایل عکس نیز با src مشخص می شود. به عنوان مثال:

 

دو ویژگی دیگر به ترتیب عرض و طول عکس را مشخص می کنند.

آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5

ویژگی alt یک توضیح برای عکس را ایجاد می کند. به عنوان مثال:

 

در ساخت سایت با html ویژگی style می تواند استایل یک عنصر html را مشخص کند. به عنوان مثال:

 

با ویژگی تعریف شده برای تگ p خواهید دید که متن پاراگراف به رنگ قرمز نوشته می شود.

ویژگی title برای عنصر پاراگراف به این صورت است:

 

هنگامی که ماوس را روی متن پاراگراف ببرید title تعریف شده برای شما نمایان می شود.
پاراگراف ها در طراحی سایت با html
همان طور که گفتیم تگ <br> ایجاد خط می کند. به عنوان مثال:

 

خروجی شما به صورت زیر خواهد بود:

 

Style در طراحی سایت با html

طراحی سایت با html

بهترین ویرایشگر متن برای نوشتن کد های html

در طراحی سایت با html ویژگی استایل می تواند شامل مقادیر زیر باشد و یک توصیفگر برای یک عنصر html می باشد:
• background-color: برای تعیین رنگ بک گراند مورد استفاده واقع می شود.
به قطعه کد زیر دقت کنید:

 

با این قطعه کد رنگ پس زمینه شما آبی می شود.
• Color: برای تعیین رنگ یک نوشته در ساخت سایت با html از این ویژگی استفاده می کنیم.

به کد زیر توجه کنید:

 

خروجی شما به صورت زیر است:

 

• font-family: نوع فونت نوشته را مشخص می کند.
به طور مثال به کد زیر دقت کنید:

 

خروجی شما اینگونه می باشد:

 

• font-size: برای تعیین اندازه نوشته در طراحی سایت با html به کار می رود.
به کد زیر توجه کنید:

 

خروجی شما به صورت زیر می شود:

 

• text-align: در طراحی سایت با html این ویژگی نیز محل قرار گیری نوشته را مشخص می کند. این که در راست باشد یا چپ و یا وسط.
به قطعه کد زیر توجه کنید:

 

خروجی که شما خواهید گرفت اینگونه می باشد:

 

فرمت بندی متن در طراحی سایت با html

در طراحی سایت با html می توانیم نوشته ها یا پاراگراف ها را فرمت بندی کنیم. برای فرمت بندی متن در طراحی سایت با html از تگ های زیر استفاده می کنیم:
• <b> : نوشته ای که میان این تگ قرار می گیرد به صورت بولد نشان داده می شود یعنی: <b>This text is bold</b> در این صورت خروجی اینگونه است: This text is bold.
• <strong>: نوشته ای که میان عنصر قرار می گیرد مهم جلوه داده می شود یعنی: <strong>This text is strong</strong> در اینصورت خروجی اینگونه می شود: This text is strong.
• <i>: نوشته ای که میان این عنصر قرار می گیرد به صورت ایتالیک نمایش داده می شود. یعنی: <i>This text is italic</i> خروجی به شکل روبرو می باشد: This text is italic.
• <em>: هنگامی که بخواهیم بر روی یک محتوا تاکید کنیم از این تگ استفاده می کنیم که محتوای درون این تگ نیز به صورت مورب نمایش داده می شود.
• <mark>: هنگامی که بخواهیم یک نوشته را مارک کنیم از این تگ استفاده می کنیم. یعنی: <h2>HTML <mark>Marked</mark> Formatting</h2> خروجی می شود:

طراحی سایت با html

استفاده از تگ مارک

• <small>: نوشته ای که میان این تگ قرار می گیرد کوچک تر از باقی نوشته ها نمایش داده می شود. یعنی: <h2>HTML <small>Small</small> Formatting</h2> خروجی می شود:
HTML Small Formatting

• <del>: نوشته ای که میان این تگ قرار می گیرد به صورت خط خورده نمایش داده می شود. یعنی: <p>My favorite color is <del>blue</del> red.</p> نتیجه می شود:

طراحی سایت با html

استفاده از تگ del

• <ins>: نوشته ای که میان این تگ قرار می گیرد به صورتی نمایش داده می شود که زیر آن خط کشیده شده است. یعنی: <p>My favorite <ins>color</ins> is red.</p> خروجی می شود:

استفاده از تگ ins

• :<sub> نوشته ای که میان این تگ قرار می گیرد پایین تر از باقی نوشته ها نمایش داده می شود. یعنی: <p>This is <sub>subscripted</sub> text.</p> نتیجه: This is subscripted text.
• <sup>: نوشته ای که میان این تگ قرار می گیرد بالا تر از باقی نوشته ها نمایش داده می شود. یعنی: <p>This is <sup>superscripted</sup> text.</p> نتیجه: This is superscripted text.

ایجاد جدول در طراحی سایت با html

در طراحی سایت با html می توانیم جداول را نیز ایجاد کنیم. در html جدول ها با تگ <table> ایجاد می شوند. برای آن که عناوین ستون های جدول را ایجاد کنیم از تگ <th> استفاده می کنیم. در طراحی سایت با html برای ایجاد هر سطر از جدول از تگ <tr> و برای ایجاد هر سلول جدول از تگ <td> استفاده می کنیم. به عنوان نمونه به قطعه کد زیر دقت کنید:

 

خروجی این قطعه کد مطابق با عکس زیر می باشد:

ایجاد جدول در html

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

 

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

Bordered Table
Use the CSS border property to add a border to the table.

Firstname

Lastname

Age
Jill

Smith

۵۰

Eve

Jackson

۹۴

John

Doe

۸۰

در طراحی سایت با html حال اگر بخواهیم برای هر سلول اندازه تعیین کنیم از قطعه کد زیر استفاده می کنیم:

 

خروجی این کد به صورت مقابل می باشد:

 

اگر یک ستون از جدول بیش از دو مقدار داشت کافی است مانند کد زیر عمل کنید:

 

در این صورت خروجی به صورت زیر می شود:

Name Telephone
Bill Gates ۵۵۵۷۷۸۵۴ ۵۵۵۷۷۸۵۵

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

 

در این صورت خروجی شما اینگونه می شود:

Name: Bill Gates
Telephone: ۵۵۵۷۷۸۵۴
۵۵۵۷۷۸۵۵

اگر قصد دارید جدول شما در طراحی سایت با html دارای عنوان باشد می توانید به صورت زیر عمل کنید:

 

در این صورت خروجی شما به صورت زیر خواهد شد:

Month Savings
January $۱۰۰
February $۵۰

لیست ها در طراحی سایت با html

لیست ها یکی دیگر از انواع داده برای طراحی سایت با html هستند. به طور کلی شما اگر بخواهید هر گونه سایتی را طراحی کنید به طور قطعی به لیست ها نیاز پیدا خواهید کرد. لیست ها در طراحی سایت با html به دو گونه شمارشی و غیر شمارشی هستند. در ادامه به شرح این لیست ها خواهیم پرداخت.

لیست های غیر شمارشی با تگ <ul> آغاز می شوند و هر عنصر لیست با تگ <li> ذکر می شود. ساده ترین نوع لیست غیر شمارشی به صورت زیر است:

 

خروجی این لیست اینگونه می باشد:
• Coffee
• Tea
• Milk

علامت قبل از هر عنصر لیست غیر شمارشی در طراحی سایت با html را می توانید به دلخواه خود تعیین کنید. این علامت می تواند دایره یا مربع و یا هیچ باشد.

لیست غیر شمارشی به صورت علامت دایره به صورت زیر می باشد:

 

خروجی این قطعه کد به صورت زیر است:

o Coffee
o Tea
o Milk

لیست غیر شمارشی با علامت مربع در طراحی سایت با html نیز به صورت زیر است:

 

خروجی این لیست اینگونه می شود:

 Coffee
 Tea
 Milk

لیست غیر شمارشی بدون علامت نیز به صورت مقابل است:

 

خروجی این لیست غیرشمارشی مانند مثال های بالا است با این تفاوت که هیچ علامتی در کنار عناصر لیست وجود ندارد.
لیست های شمارشی نیز در طراحی سایت با html وجود دارند. این لیست ها با تگ <ol> شروع می شوند و هر عنصر لیست با تگ <li> بیان می شود. لیست های شمارشی می توانند با تایپ های زیر بیان شوند:

 

به قطعه کد زیر در طراحی سایت با html دقت کنید:

 

خروجی این لیست این گونه می باشد:
۱٫ Coffee
۲٫ Tea
۳٫ Milk
می توانید با تغییر دادن تایپ لیست علامت شمارشی آن را تغییر دهید.

آموزش تک
نویسندهآموزش تک

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