این تگ در بر دارندهی کل محتویات صفحه است که همه ی تگ ها را احاطه میکند. تنها عبارتی که قبل از تگ html باز باید نوشته شود، قطعه کد ! DOCTYPE html است که استثنائاً با حروف بزرگ نوشته میشود.
تگ < !DOCTYPE html > به مرورگر میفهماند که شما قصد استفاده از HTML نسخه ۵ را برای طراحی سایت صفحه ی وب خود دارید. در صورتی که بخواهید از ۲XHTML جهت طراحی صفحه وب خود استفاده کنید،
باید کد فوق را کمی تغییر دهید.
شاید به این فکر کرده باشید، پس چرا حذف آن تأثیری در صفحه وب ما ندارد؟ این کد در ایجاد صفحه HTML اختیاری و در صفحات XHTML اجباری است. اگر این تگ را به همراه یک ۳URL در بالای صفحه وب خود اعلان کنید سبب میشود که مرورگر فعلی، هنگام باز کردن صفحه شما در مد standard کار کنند.
بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در مرورگرهای مختلف داشته باشید. در صورت نگذاشتن این کد، مرورگر از روشهای قدیمیتر برای نمایش
صفحه شما استفاده میکند.
۲ EXtensible HyperText Markup Language
۳ Uniform Resource Locator
یک مثال عملی: در هنگام تعیین رنگ با شماره های هگزاد سیگمال، یک علامت # شارپدر ابتدای شماره رنگ قرار میگیرد. که حذف آن باعث نادیده گرفته شدن رنگ در زمان نمایش صفحه میشود، اما اگر کد
DOCTYPE را از ابتدای صفحه پاک کنید. مرورگرتان از این مورد ایراد نمیگیرد و آن رنگ را نشان میدهد.
نکته: برای تست این مثال از مرورگر فایر فاکس استفاده کنید. چون مرورگر Internet Explorer به طور معمولی هم از حذف علامت # ایراد نمیگیرد و ممکن است شما فکر کنید گذاشتن علامت # اختیاری است.
تگ head یا معادل فارسی آن تگِ سرانداز!، اولین تگ در بدنه تگ html میباشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگرهای وب میباشد. اطلاعات این بخش در قسمت بدنه سند html ما
نمایش داده نمیشود. ولی اطلاعاتی همچون عنوان صفحه، کلمات کلیدی، استایلهای خارجی و داخلی، جاوا اسکریپتهای خارجی و داخلی، آیکون صفحه، توضیحاتی راجع به سازنده و… را تعریف میکند. که برای مرورگر
و نیز ایندکس کردن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است.
در کل تگ head حاوی کدهایی است که مستقیماً روی صفحه دیده نمیشوند ولی تأثیر آنها دیده میشود.
تگ head هیچ صفتی ندارد.
تگهایی که بین تگ head قرار میگیرند عبارتند از:
<title> <link> <script> <style> <meta>
که در آینده کاربرد و نحوهی استفاده از آنها را توضیح خواهیم داد.
– تگ title عنوان صفحه را تعیین میکند و هیچ صفتی ندارد.
– محتوای تگ تایتل نباید بیش از ده کلمه باشد.
دورره آموزش طراحی سایت با HTML
– HTML به معنای زبان نشانهگذاری ابرمتن است.
– یعنی هر چند ما در این زبان یک سری متن را تایپ میکنیم اما این متون، معنایی فراتر از ابرمتن متن دارند.
– در این دوره ، HTML5 تدریس میشود.
– هر چند html به حروف کوچک و بزرگ حساس نیست اما بهتر است نام تگها و نام صفات با حروف کوچک انگلیسی نوشته شوند.
سادهترین برنامه به زبان HTML :
<!DOCTYPE html><html><head><title>First Page</title></head><body><h1 align="center">Hello World!</h1></body></html>
اولین گام در طراحی سایت:
اولین گام در شروع به طراحی، ایجاد یک پوشه برای آن سایت است. این پوشه میتواند به هر نامی انتخابشود اما چه بهتر که همنام دامنهی سایت باشد؛ مثلاً aftab.cc .
اما نکته مهم این است که با خودتان قراردادکنید که هر چیزی که قرار است در سایت شما استفاده شود، باید به این پوشه منتقل شود. عکسها، ویدئوها،اصوات و … همه باید ابتدا به این پوشه منتقل شوند سپس در کدنویسی به آنها اشاره شود. یعنی میشودیکی در درایو C شما باشد، یکی در درایو D شما، یکی روی دسکتاپ شما!!در این پوشه، زیرپوشههای مرتبط با محتوای خود بسازید. مثلاً پوشهای به نام img برای عکسهای سایت.پوشهای به نام video برای ویدئوهای سایت…
برنامه بالا را در NotePad تایپ کرده و در پوشه سایت که قبلاً ساختهایم، با نام index.html و باEncoding ، UTF-8 ذخیره میکنیم. )توجه داشته باشید که Encoding پیشفرض یعنی ANSI زبانفارسی را پشتیبانی نمیکند.(۱ Hyper Text Markup Language
– تگ یعنی برچسب
– ما عناصری داریم؛ مانند عکس، متن، ویدئو و … قرار است آنها را با برچسبها به دیوار سایت خودبچسبانیم.
– در HTML محدودهی عناصر با تگها مشخص میشوند.مانند {}و () که برای مشخص کردن یکمحدوده در زبان هستند
– صفتها به تگ دستور میدهند که به چه روشی عمل کنند. در html درج صفتها به این صورت
است:
عنصر/ Element Attribute / صفت Content / محتوا Closing tag Opening tag name="value"
نام صفت =”مقدارصفت ”
– مقدار هر صفت باید در دابلکوتیشن “قرار بگیرد.
– قبل از نام هر صفت، یک فاصله بزنید.
در HTML هر تعداد فاصله Space که بیش از یک فاصله باشد، یک فاصله به حساب میآید. یعنی به طور مثال اگر در بخش کد نویسی بین دو کلمه، ۱۰۰ فاصله وارد کنیم در مرورگر یک فاصله بیشتر نمایش داده نمیشود. برای درج فاصله های بیشتر از یکی، از عبارت استفاده کنید.
وب سایت هایی که موفق هستند خصوصیات مشترکی در طراحی سایت داشته اند که توجه افراد مختلف را به خود جلب می کنند. رعایت کردن این نکات می تواند جستجو کننده طراحی سایت را تبدیل به خریدار کند.
وب سایت هایی وجود دارند که طراحی سایت آن ها بسیار ضعیف است ولی کسب درآمد بالایی دارند، در واقع این گروه از وب سایت ها استثنا بوده و از قوانین ذیل پیروی نمی کنند.
مطالبی که در سایت استفاده می شود باید بدون ابهام و به صورت شفاف استفاده شود تا بازدید کنندگان این موضوع به راحتی متوجه مطالب شوند. بحث بعدی این است که بازدید کننده نباید برای بدست آوردن اطلاعات درباره وب سایت شما وقت خود را تلف کند از همان ابتدای طراحی سایت شفافیت و محتوای مناسب مطالب را در نظر داشته باشید.
داشتن تیتر های مناسب برای مطالب، انتخاب کلمه های کلیدی مرتبط با مطالب بسیار حائز اهمیت می باشد.
یکی از مواردی که کاربران را آزار می دهد انتظار بیش از حد برای بارگذاری صفحات سایت است حتی اگر سایت شما یکی از بزرگترین سایت ها باشد.
از شلوغی و آشفتگی در وب سایت خود بپرهیزید، سعی داشته باشید یک وب سایت مرتب، کاربر پسند و با طراحی مناسب برای بازدیدکنندگان بوجود آورید. فضای سفید در این نوع طراحی سایت بسیار کاربرد دارد.
برای جلب توجه کردن در میان بازدید کنندگان استفاده از روش های غیر ضروری مانند فایل های فلش، نشانگر و … مناسب نمی باشد. سعی کنید تمرکز خود را بر روی تبدیل بازدیدکنندگان به خریدار بگذارید، وب سایت هایی که طراحی ساده ای دارند از این قابلیت استفاده کرده اند.
عنصری که تاثیر بسیار مستقیمی در فروش محصولات وب سایت شما و موفقیت شما دارد وجود صداقت و نبود آن در وب سایت شما می باشد. درج کردن اطلاعات تماس و وجود فرم تماس بسیار ضروری می باشد.
مهم ترین امر در یک وب سایتی که محصولی را به فروش می رساند مراحل سفارش و خرید آن است که بسیار ضروری و مهم است، از مراحل پیچیده و غیر ضروری پرهیز کنید و سعی کنید مراحل کوتاه شفاف برای خرید طراحی کنید.
در طراحی سایت سعی کنید از رنگبندی مناسب استفاده کنید، رنگهایی که استفاده می شود با هم همخوانی داشته باشند.
سعی کنید مطالب و محتوای وب سایت را به صورت منظم به روز رسانی کنید، این امر موجب می شود انگیزه بیشتری در کاربر ایجاد شود تا از خواندن مطالب وب سایت شما لذت ببرد و وقت خود را در سایت شما صرف کند و به علاوه آن موتورهای جستجو به مطالب جدید واکنش خاصی دارد. که این امر در بحث سئو مناسب است.
در طراحی سایت باید استانداردهای کدنویسی رعایت شود و از کدهای مخرب و معیوب که در سایت ممکن است مشکلی ایجاد کند پرهیز شود.
نام سایت نشانگر تمامی مطالب وب سایت است سعی کنید نامی برای سایت خود انتخاب کنید که مرتبط با موضوع وب سایت شما و کاری که انجام می دهید باشد، از نام های پیچیده و طولانی پرهیز کنید.
در این مقاله به آموزش SASS و اینکه sass چیست می پردازیم ، Sass در طراحی سایت واژه جدیدی است و مخفف کلمه Syntactically Awesome Style Sheets است، و یک نوع زبان پیش پردازنده برای تولید کدهای CSS می باشد، زبان SASS جایگزین CSS محسوب نمی شود اما می توان آن را روشی برای مدیریت و توسعه کدهای CSSS دانست.
SASS یک زبان برنامه نویسی است که تبدیل به CSS می شود که شامل دو سینتکس است :
سینتکس اصلی که به عنوان
SASS شناخته می شود راه کوتاه تر و مختصر تر برای نوشتن کدهای CSS است.
سینتکس جدیدتر که با عنوان SCSS شناخته می شود و فرمت بلاک ها در این سینتکس شباهت بسیار زیادی به CSS دارد.
یعنی در SCC همانند CSS (آکولادها) و ( ; ) همان مفهوم را دارد.
نکته : در نهایت در طراحی سایت کدهای Sass به کدهای CSS تبدیل می شوند .(پایان بخش اول)
کلمه HTML مخفف (Hyper Text Markup Language) می باشد، این زبان از مجموعه ای تگ تشکیل شده است که از تگ ها برای توصیف صفحات وب استفاده می کند.
تگ های زبان html کلید واژه هایی هستند که بین علامت بزرگتر و کوچکتر () قرار می گیرند، معمولا تگ های این زبان به صورت زوج یا شروع و پایان استفاده می شوند.
به صورتی که در شروع یک تگ به صورتو در پایان برای بستن این تگ باید به شکلبا گذاشتن علامت ممیز یا اسلش (/) بسته شود.
هدف مرورگر ها این است که سند های html را خوانده و به صورت صفحات وب به بازدید کننده نمایش خواهد داد، به این صورت که مرورگر تگ های html را نشان نخواهد داد، اما از تگ های html استفاده می کند تا محتوای صفحه را تفسیر کند.
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
</body>