این یک نوشته ی فرضی می باشد. نگاه کنیم دوباره
تگ html
همانطوری که در مقاله ی ساختار پایه فایل های html، گفته شد؛ سه تگ اساسی در طراحی صفحات وب وجود دارد که در این میان، تگ <html> یکی از حداقل تگ های مورد نیاز در طراحی صفحات وب است.
تگ <html> در ابتدای فایل آورده می شود تا به مرورگر اعلام شود که فایل مربوطه یک فایل html می باشد. در حقیقت مرورگر پس از مواجه شدن با این تگ است که نحوه ی تفسیر محتوای آن فایل را تعیین می کند.
انتهای کدهای html به کار رفته در طراحی هرگونه از صفحات وب؛ می بایستی به تگ پایانی </html> ختم شده و بعد از آن هیچ کد اچ تی ام ال دیگری آورده نشود.
در حقیقت تگ html بزرگترین تگ موجود در طراحی صفات وب است که سایر تگ ها درون آن قرار میگیرند.
نکته:
در نظر گرفتن صفت xmlns برای تگ <html> در نسخه ی html غیر مجاز و در نسخه ی xhtml ضروری است.
تگ body در فایل های html
تگ <body> از تگ های اصلی است که ساختار پایه ی تمام فایل های html را تشکیل می دهد. این تگ تمام قسمت قابل مشاهده برای کاربران را در خود جای می دهد.
تگ body بدنه ی اصلی فایل های اچ تی ام ال را تشکیل می دهد؛ بنابر این تمام عناصری که در صفحات وب وجود دارند و مشاهده می شوند، درون این تگ به کار گرفته می شوند:
<html></p> <p dir="ltr"><head></head></p> <p dir="ltr"><body></p> <p dir="ltr">content goes here ...</p> <p dir="ltr"></body></p> <p dir="ltr">
نکته ی css:
تمام مشخصه هایی که در css از قواعد ارث بری پیروی می کنند؛ مقدار خود را از body به ارث می برند.
ترفند css:
برای کاهش حجم کدهای css و تسریع در طراحی صفحات وب سایت ها؛ بهتر است ابتدا مولفه هایی که میتوان از ارث بری آن ها استفاده کرد، قبل از هر چیز برای انتخابگر body مقدار دهی شوند. به عنوان یک نمونه به مثال زیر توجه کنید:
body {</p>
<p dir="ltr">font:normal 12px Tahoma, Arial, serif;</p>
<p dir="ltr">color:#222;</p>
<p dir="ltr">background:#eee;</p>
<p dir="ltr">}
ترفند css:
تکنیک های بگراندهای بزرگ (big backgrounds) در سی اس اس با توجه به فضای body طراحی شده و مورد استفاده قرار میگیرند:
body {</p>
<p dir="ltr">background:url(images/big-bg.png) no-repeat center top;</p>
<p dir="ltr">}
ترفند css:
معمولا برای سبک دهی بهتر، یک عنصر پوشاننده درون body تعریف می شود و در مرکز body قرار داده می شود. سپس در فضای بیرون از آن ممکن است منوهای ثابت یا … مورد استفاده قرار بگیرد.
<body></p> <p dir="ltr"><div id=”wrapper”></p> <p dir="ltr">…</p> <p dir="ltr"></div><!—#wrapper—></p> <p dir="ltr"></body>
ساختار پایه فایل های html
به طور کلی تمام صفحات سایت هایی که توسط کاربران مشاهده می شوند، از یک ساختار پایه برخوردار هستند. این ساختار پایه متشکل از سه بخش عمده است:
- تگ html
- تگ head
- تگ body
ترکیب ساختار پایه ای که گفته شد، به صورت کد زیر است:
<html> <head> </head> <body> </body> </html>
همانطوری که مشاهده می شود؛ عناصر head و body در داخل عنصر بزرگتر html قرار میگیرد. در مقاله های آموزشی ای که در ادامه می آوریم، در مورد هر کدام از سه عنصر کلی فوق، توضیح خواهیم داد.
این بدان معناست که وقتی میخواهید یک فایل html جدید ایجاد کنید، ابتدا می بایستی سه عنصر فوق را ایجاد کرده، سپس به ایجاد سایر قسمت ها بپردازید. چون هنگامی که اقدام به طراحی سایت می کنید؛ ساختار پایه ای فوق، در تمام صفحات باید وجود داشته باشند.
ارسال شده در آموزش html
برچسبشده تگ های html, تگ های اصلی اچ تی ام ال, عناصر اصلی html, عناصر اصلی اچ تی ام ال
پاسخ دهید:
صفت های class و id در html
در یکی از مقاله های آموزشی، صفت ها در html را توضیح داده ایم. نوع خاص و پرکاربردی از مشخه ها در html، مربوط به دو نوع از آن هاست.
صفت های class و id در html، این امکان را در طول فرآیند طراحی صفحات وب به شما می دهند تا نامگذاری و رده بندی مناسبی برای عناصر مختلف صفحات سایت داشته باشید.
وقتی عناصر به وسیله ی صفت های class و id نامگذاری می شوند؛ این قابلیت را خواهیم داشت تا بتوانیم عناصر html را انتخاب کنیم تا به وسیله ی جاوااسکریپت کنترل کرده و یا به وسیله ی سی اس اس سبک دهی کنیم.
صفت id
اگر در هر صفحه، یک عنصر با نام مورد نظرتان دارید، می توانید از صفت ی id برای نامگذاری آن استفاده کنید. مثلا در طراحی سایت، به طور منطقی در هر صفحه تنها یک لوگو وجود دارد. یعنی صفحات دارای چند لوگو نیستند! بنابر این می توانید برای نام گذاری عنصر مربوط به لوگو، از صفت id استفاده کنید:
<a id="logo" href="http://parstuts.com">Pars Tuts</a>
صفت class
اگر در هر صفحه، این احتمال وجود داشته باشد که یک یا چند عنصر با یک نام وجود داشته باشند، از صفت class برای نامگذاری آن استفاده می کنیم. مثال ممکن است یک بخش با آی دی gallery داشته باشیم که ممکن است در آن چندین آیتم وجود داشته باشند (در یک گالری چند تصویر وجود دارد). در این صورت مثال زیر گزینه ی خوبی است:
<div id="gallery"> <img src="#" alt="#" /> <img src="#" alt="#" /> <img src="#" alt="#" /> <img src="#" alt="#" /> </div>
ترفند:
برای مشخص کردن تگ های پایانی برای هر کدام از عناصری که با آی دی و یا کلاس نامگذاری شده اند، با استفاده از توضیحات اچ تی ام ال (html comments)، می توانید مانند کد روبرو استفاده کنید:
<div id="content"> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">php</a></li> </ul><!-- .nav --> </div><!-- #content -->
در این روش علاوه بر نوشتن نام هر عنصر، نوع آن را نیز مشخص می کنیم. این کار با قرار دادن # قبل از نام عنصری که نام آن با آی دی مشخص شده است و همچنین با قرار دادن . قبل از نام عنصری که نام آن با کلاس مشخص شده است، انجام می شود. استفاده از این تکنیک به خوانایی کدها خیلی کمک می کند.
نکته:
علت انتخاب # و . برای مشخص کردن آیدی ها و کلاس ها این است که در جاوااسکریپت و سی اس اس، آیدی ها و کلاس ها با همین نشان ها انتخاب می شوند.
ارسال شده در آموزش html
برچسبشده html attributes, html class, html id, صفات در html, مشخصه های اچ تی ام ال, کلاس ها و آی دی ها در اچ تی ام ال
پاسخ دهید:
به کار گیری html و css در طراحی صفحات وب
در پارس تاتس، شما سرفصل های آموزش html و آموزش css را به عنوان دو بخش اساسی در سلسله مقاله های آموزشی طراحی سایت، مشاهده خواهید کرد.
در این مقاله ی آموزشی نقش html و css را در طراحی صفحات وب توضیح خواهیم داد.
نقش html در طراحی سایت؛ مشخص کردن اجزای صفحات وب
این یک اشتباه رایج است که گفته می شود با html، صفحات سایت طراحی می شوند! اما چرا این جمله اشتباه است؟ به خاطر اینکه استفاده از html به تنهایی نمی توان صفحه ای را ایجاد نمود که در نظر کاربر، یک صفحه ی سایت مناسب باشد. بلکه تا هنگامی که کدهای ایجاد شده به وسیله ی html، حداقل با css سبک دهی نشوند، نمی توان صفحات وب با کیفیت و کارآیی مناسب را ایجاد کرد. در حقیقت html به طراحی صفحات وب کمک می کند.
نقش کلیدی html، نشانه گذاری (mark up)، عناصر مختلف صفحات وب می باشد. مانند تعیین بخش هدر (header)، تیترها، منوها، نظرات، دیدگاه ها، سایدبار (sidebar)، فوتر (footer) و …
نکته:
html با محتوای صفحات وب سروکار دارد.
نقش css در طراحی سایت؛ سبک دهی و استایل دهی به اجزای صفحات وب
بخش های مختلف که توسط html، نشانه گذاری شده اند، توسط css سبک دهی می شوند. مثلا برای هر کدام از عناصر نشانه گذاری شده توسط اچ تی ام ال، css تعیین می کند: چه رنگی داشته باشد، تصویر پس زمینه و یا رنگ پس زمینه ی آن چه باشد، چه عرضی داشته باشد، چه ارتفاعی داشته باشد، در چه موقعیتی قرار بگیرد و …
نکته:
css با ظاهر و چیدمان صفحات وب سروکار دارد.
استفاده از html، به صورت معناگرا
یکی از اصولی که در طراحی حرفه ای صفحات وب به طور جدی باید مورد توجه قرار بگیرد، استفاده ی مفهومی از اچ تی ام ال است. یعنی باید هر عنصر را طوری ایجاد کرد که:
- نحوه ی نشانه گذاری هر عنصر، نشان دهنده ی محتوای آن باشد.
- نحوه ی نشانه گذاری هر عنصر، بر اساس سبک دهی آن نباشد (نشانه گذاری ها، presentational نباشند.)
برای درک دقیق آنچه گفته شد، به مثال زیر توجه کنید:
<div id="header"></div> <div id="content"></div> <div id="sidebar"></div> <div id="footer"></div>
در مثال فوق، با استفاده از صفت های id، نام هر بخش به صورت معناگرا مشخص شده است: header, sidebar, footer, content بنابر این کاربرد کدهای html بصورت معناگرا کاملا در مثال فوق مشاهده می شود.
حالا به مثال زیر توجه کنید:
<div id="ali-logo"></div> <div id="left"></div> <div id="right"></div> <div id="red-box"></div>
در کدهای بالا، اسامی انتخاب شده به دلایل زیر اشتباه و نامناسب هستند:
- نام ali-logo به این دلیل مناسب نیست که اسم یک شخص است و بر اساس محتوای آن (که قرار است هدر باشد) نامگذاری نشده است.
- نام های right و left بهیچ وجه مناسب نیستند. چرا که چپ و یا راست بودن عناصر با css تنظیم می شوند. حالا فرض کنید پس از گذشت مدتی بخواهیم جای عناصری که با نام های right و left مشخص کرده ایم را جابجا کنیم. چه اتفاقی می افتد؟ عنصری که نام آن left است، در سمت راست قرار میگیرد و عنصری که نام آن right است در سمت چپ قرار میگیرد!
- نام red-box هم مناسب نیست؛ چرا که مانند نام های right و left بر اساس سبکدهی (presentational) نامگذاری شده است. در حالی که ممکن است بخواهیم بعدا رنگ آن را به آبی، زرد و یا … تغییر بدهیم. واضح است که جالب نیست نام قسمتی قرمز باشد، در حالی که رنگ آن سبز است!
بنابراین همیشه توجه داشته باشید که هنگام استفاده از کدهای html، نامگذاری ها را به صورت معناگرا انجام بدهید.
ارسال شده در آموزش html
برچسبشده آموزش html و css برای طراحی صفحات وب, طراحی سایت با css, طراحی سایت با html
پاسخ دهید:
تگ های عمومی و پرکاربرد span و div
اگر تاکنون با کدهای html مواجه شده باشید، حتما متوجه شده اید که تگ های div و span به وفور به کار گرفته شده اند. این تگ ها در اچ تی ام ال به صورت عمومی و به منظور نشانه گذاری قسمت های مختلف به کار می روند.
علت اینکه از تگ های div و span با نام تگ های عمومی یاد می کنیم، این است که در طراحی صفحات وب به وسیله ی اچ تی ام ال برای برخی عناصر، تگ های ویژه و مخصوصی وجود دارند؛ مثلا تگ a برای لینک ها، تگ های ul – li و ol – li، برای لیست ها و منوها، تگ img برای تصاویر، تگ p برای پاراگراف ها و … اما برای سایر محتوای سایت که تگ اختصاصی ای وجود ندارد، از تگ های div و span کمک گرفته می شود.
کاربرد تگ div در html
تگ div که مخفف division به معنای بخش، قسمت می باشد، برای نشانه گذاری بخش های مختلف اصلی به کار می روند. مثلا برای نشانه گذاری هدر (header)، نشانه گذاری سایدبار (sidebar)، و یا نشانه گذاری فوتر (footer).
به یاد داشته باشید که معمولا در طراحی صفحات وب، قسمت های اساسی و اصلی را با تگ <div> نشانه گذاری می کنند و برای قسمت های کوچک تر و جزئی تر استفاده از آن توصیه نمی شود.
نکته:
تگ div، به عنوان یک عنصر بلوکی در html شناخته می شود.
برای درک بهتر از نحوه ی استفاده از تگ div، به نمونه کد اچ تی ام ال زیر توجه کنید:
<div id="wrapper"> <div id="content"> </div><!--#content--> <div id="sidebar"> </div><!--#sidebar--> <div id="footer"> </div><!--#footer--> </div><!--#wrapper-->
همانطوری که مشاهده می کنید، در کد html فوق، کل محتوای صفحه ی وب در دست طراحی، به بخش ها (و یا همان divها) ی کلی اعم از پوشاننده ی کلی یا همان wrapper، محتوا یا همان content، سایدبار و فوتر تقسیم بندی شده است.
کاربرد تگ span در html
تگ span برای نشانه گذاری بخش های کوچک تر به کار می رود. مثلا برای نشانه گذاری بخشی از یک نوشته، یک یا چند کلمه از یک جمله، یک عبارت از یک پاراگراف و …
نکته:
تگ span به عنوان یک عنصر خطی در html شناخته می شود.
برای درک بهتر از نحوه ی استفاده از تگ span، به نمونه کد اچ تی ام ال زیر توجه کنید:
<p>Our website name is <span>Pars Tuts</span> that is dedicated to web design.</p>
نام اصلی وب سایت در متن فوق به وسیله ی تگ span محصور شده است تا بلکه نیاز باشد به آن سبک دهی و استایل جداگانه ای شود. مثلا شاید لازم باشد توسط css، رنگ آن متفاوت تعیین شود و یا …
عناصر خطی و بلوکی در html
همانطوری که در آموزش های قبلی نیز گفته شد، عناصر مختلفی در html وجود دارند که در طراحی صفحات وب به کار گرفته می شوند.
به طور کلی عناصر را می توان به دو دسته ی عمده تقسیم کرد:
- عناصر خطی – inline elements
- عناصر بلوکی – block elements
عناصر خطی در html
این دسته از عناصر، دقیقا همان مقداری فضا اشغال می کنند، که محتوا دارند. هنگامی که در طراحی صفحات وب، عناصر خطی پشت سر هم تعریف شوند، پس از تفسیر نتیجه توسط مرورگرها، ملاحظه خواهید کرد که عناصر مختلف در کنار یکدیگر قرار گرفته اند.
تعدادی از عناصر خطی در اچ تی ام ال عبارتند از:
<a>, <span>, <img />, …
برای درک بهتر عناصر خطی، به مثال زیر توجه کنید:
<span>this is an inline element</span> <a href="http://parstuts.com">web design tutorials">Pars Tuts link</a> <strong>this is another inline element</strong>
کد بالا را ذخیره کنید و با مرورگری باز کنید؛ مشاهده خواهید کرد که تمام عناصر html به کار رفته در کد بالا، کنار یکدیگر قرار میگیرند. چرا که تمامی آن ها عناصر خطی (inline elements) هستند.
عناصر بلوکی در html
دسته ی دیگر از عناصر اچ تی ام ال، گونه از عناصر است که وقتی ایجاد می شوند، عناصر قبلی و بعدی در کنار آن ها قرار نگرفته و در فضای کنار آن ها، هیچ عنصر دیگری قرار نمی گیرد.
تعدادی از عناصر بلوکی در اج تی ام ال عبارتند از:
<p>, <div>, <ul>, …
برای درک بهتر عناصر بلوکی، به مثال زیر توجه کنید:
<span>this is an inline element</span> <p>a sample paragraph</p> <a href="http://parstuts.com">web design tutorials">Pars Tuts link</a> <strong>this is another inline element</strong>
کد بالا را ذخیره کرده و بوسیله ی مرورگری باز کنید. مشاهده خواهید کرد عنصر بلوکی <p> در مثال فوق، طوری قرار میگیرد که هیچ عنصر دیگری در کنار آن نیست. در حقیقت اطراف آن را یک فضای خالی تشکیل خواهد داد.
قواعد بکارگیری عناصر بلوکی و خطی به صورت تو در تو
- عناصر بلوکی را به هیچ وجه نمی توان درون عناصر خطی به کار گرفت.
- عناصر خطی را می توان درون عناصر بلوکی به کار گرفت.
- عناصر خطی را می توان درون سایر عناصر خطی به کار گرفت.
- تنها برخی از عناصر بلوکی را می توان درون سایر عناصر بلوکی به کار گرفت. مثلا می توان عنصر <p> را درون <div> به کار گرفت اما نمی توان عنصر <ul> را درون عنصر <p> به کار گرفت.
ارسال شده در آموزش html
برچسبشده آموزش html, عناصر بلوکی html, عناصر بلوکی اچ تی ام ال, عناصر خطی html, عناصر خطی اچ تی ام ال
پاسخ دهید:
آنچه برای یادگیری html به آن نیاز دارید
ما برای اینکه سلسله مطالب آموزش طراحی سایت را به بهترین نحو و با کیفیتی بالا ارائه کنیم، برای هر سرفصل ابزارهای لازم را معرفی خواهیم کرد.
برای آموزش html، یکسری ابزارها نیاز هستند که در ادامه آن ها را به شما معرفی می کنیم:
مرورگرها
مرورگرهای اصلی یا همان Major Browsers را بر روی سیستم خود نصب کنید. این مرورگرها عبارتند از:
Firefox, Internet Explorer, Chrome, Opera, Safari
به یاد داشته باشید که مرورگرها تفاسیر متفاوتی از کدهای html و css دارند و در حین روال طراحی صفحات وب، کاملا با این تفاوت ها آشنا خواهید شد.
نکته:
در ایران درصد بسیار بالایی از کاربران از نسخه های متفاوت مرورگر اینترنت اکسپلورر استفاده می کنند. برای اینکه نسخه های متفاوت را به صورت یکجا داشته باشید، نرم افزار IE Tester را دانلود کرده و بر روی سیستم خود نصب کنید.
ویرایشگرهای متنی
برای مدیریت کدهای خود (اعم از html, css, php, … ) نیاز به ویرایشگرهای متنی مناسبی دارید تا بتوانند کار شما را راحت تر کنند. در این میان هرچند نوت پد به صورت پیش فرض بر روی سیستم عامل ویندوز نصب هست، اما به دلیل اینکه تقریبا هیچ قابلیت خاصی را به طراحان وب نمی دهد، ناگزیر به استفاده از سایر ویرایشگرهای متنی هستید. برای این منظور دو نوع ویرایشگر متنی را به شما پیشنهاد می کنیم.
Dream Weaver
البته برخی به اشتباه می گویند که به وسیله ی دریم ویور طراحی وب سایت می کنند! در حالی که Dream Weaver تنها یک ویرایشگر متنی است که البته تعدادی تمپلیت های از پیش آماده دارد که به صورت کاملا ابتدایی هستند.
موارد کاربرد: بعلت سنگین بودن Dream Weaver پیشنهاد می شود برای مواردی که نیاز به مدیریت فایل ها و ارتباطات بین آن ها دارید، از این ویرایشگر استفاده کنید.
Notepad++
نوت پد پلاس پلاس نام ویرایشگر متنی دیگری است که آن را به شما پیشنهاد می کنیم. این ویرایشگر متنی، اپن سورس (متن باز) و رایگان بوده و بسیار سبک می باشد. به این معنا که فایل هایی را که با نوت پد پلاس پلاس باز می کنید، خیلی سریع باز می شوند.
موارد کاربرد: به علت سبک بودن و امکان خوانایی بالایی که نوت پد++ دارد، بهتر است برای ویرایش فایل های تکین خود، (یعنی وقتی که فقط می خواهید یک فایل تنها را ویرایش کنید) از نوت پد++ استفاده کنید.
ابزارهای فایرفاکس
برای یادگیری طراحی صفحات وب و ورود به دنیای طراحی سایت، بهتر است حتما افزونه های زیر را بر روی فایرفاکس خود نصب کنید:
FireBug:
این افزونه به شما کمک می کند تا بتوانید کدهای html خودتان و نتیجه ی آن ها در فایرفاکس را مشاهده کنید.
Web Developer:
این افزونه ابزارهای زیادی دارد، از جمله غیر فعال کردن جاوااسکریپت و سی اس اس، تغییر آنی سی اس اس و مشاهده ی نتایج لحظه ای و امکان ذخیره ی آن، قابلیت اندازه گیری بخش های مختلف طراحی شده در صفحات وب و …
ColorZilla:
این افزونه ی فایرفاکس به شما این امکان را می دهد تا یک color picker داشته باشید و بتوانید نمونه رنگ هر قسمت از صفحات وب را که تمایل داشته باشید انتخاب کرده و نمونه کد آن را دریافت کنید.
روال طراحی صفحات وب
توصیه ی ما به شما این است که برای داشتن یک روال مناسب و استاندارد در طراحی صفحات وب، ابتدا کدهای خود را با استفاده از فایرفاکس تست کنید، سپس در صورتی که با اشکالی مواجه شدید، با استفاده از فایرفاکس و افزونه های گفته شده برای آن، ایرادیابی کنید و در آخرین مرحله صفحات وب طراحی شده خود را در سایر مرورگرها تست کنید.
ارسال شده در آموزش html, ابزارهای طراحی سایت
برچسبشده ابزارهای آموزش html, ابزارهای طراحی سایت, دریم ویور, نوت پد پلاس پلاس
پاسخ دهید:
توضیحات در html
یکی از کارهایی که به منظور آموزش html و یا با هدف مستندسازی (documentaion) بهتر فایل های اچ تی ام ال انجام می شود، استفاده از توضیحات (html comments) است. توضیحات در html، این امکان را می دهند که در میان کدهای html، به مرورگر اعلام کنید که بخشی از کد را مانند بقیه به صورت کدهای عادی html، تفسیر نکنند.
برای درج توضیحات، متن توضیح مورد نظر را بین جفت تگ های زیر می آوریم:
به عنوان مثال، خواهیم داشت:
نکته:
این یک اشتباه رایج است که گفته می شود:
بلکه واقعیت این است که مرورگرها توضیحات را تفسیر می کنند، اما نه به صورت عناصر معمولی اچ تی ام ال، بلکه با قواعد و قوانین مخصوص به خودش.
فواید استفاده از توضیحات در کدهای html
مثال های زیر هر کدام از فواید استفاده از توضیحات در کدهای html را بررسی می کنیم:
در کد زیر شرح وظایف عنصر مربوطه با توضیحات مشخص شده است:
در کد زیر برای مشخص کردن هر کدام از تگ های پایانی، از توضیحات استفاده شده است:
یک نمونه کاربرد توضیحات برای ایرادیابی عناصر مختلف صفحات وب است. مثلا ممکن است برای اینکه بخواهیم نتیجه ی تفسیر کدها را بدون عنصر با نام آی دی nav مشاهده کنیم، آن را توسط تگ های مربوط، تبدیل به توضیحات کنیم: