زبان HTML و CSS
معرفی برخی عناصر در زبان HTML و CSS
آموزش زبان HTML و CSS براساس نسخه نهایی HTML5 و CSS3 را در این مقاله از سایت آموزی دنبال کنید. جهت یادگیری بهتر شما عزیزان دوره های آموزشی در این زمینه نیز در وبسایت آموزش آنلاین سایت آموزی همراه شوید.
آموزش html برای همه افرادی که قصد دارند، آموزش طراحی سایت را استارت بزنند ضروری است.
پس اگر جزو افراد علاقمند به یادگیری هستید و اطلاعاتی در این زمینه ندارید یا تازه شروع کرده‌اید، html را بایستی بطور کامل بگیرید.
سایت آموزی تدریس کامل زبان html را از صفر تا صد برای شما همراهان گرامی ارائه می دهد.
ساخت یک سند HTML
ایجاد یک فایل اچ تی ام ال به راحتی یک آب خوردن است.
برای ایجاد اسناد html نه به برنامه خاصی نیاز دارید و نه به سیستم عامل بخصوصی.
در واقع شما فایلهای html را می‌توانید حتی به کمک نرم‌افزار NotePad ویندوز نیز ایجاد کنید.
با این وجود توصیه می‌کنیم برای راحت‌تر نوشتن کدها و همچنین فهم بهتر مطالب از نرم افزارهای ویرایش متن همچون ++Notepad یا Sublime Text و یا Adobe dream viewer و… استفاده کنید.
تگ‌ها (Tag)
اولین جمله هر سند اچ تی ام ال <!DOCTYPE html> است.
این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML با نسخه ۵ هستیم.
پس اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند پنویسیم.
اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید.
پس بخاطر داشته باشید که ما همیشه آن را در اولین خط از کدهایمان قرار می‌دهیم.
تگ html
دومین رکن اصلی هر صفحه HTML ، استفاده از تگ های باز و بسته <html> و <html/> است.
که برای شروع نوشتن زبان اچ تی ام ال از آن استفاده می‌کنیم.
همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ html می نویسیم.
تگ head
بین دو تگ <html> و <html/> تگ‌های جدیدی با اسم تگ باز <head> و تگ بسته <head/> قرار می‌گیرند.
به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.
تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه html است.
مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه می‌کند.
معمولا چیزهایی که در این بخش گفته می‌شود به صورت مستقیم در سایت شما نمایش داده نمی‌شوند.
آموزش HTML و CSS آموزش HTML5 و CSS3 پروژه محور
تگ Body
همانطور که از اسم این تگ مشخص است، بدنه اصلی برنامه در این تگ قرار خواهد گرفت.
هر متنی که در این بخش خارج از تگ به خصوصی بنویسید در صفحه وبتان دیده نمی شود.
تگ body به عنوان پدر تگ های درونی خود محسوب می شود.
و مانند سایر تگ ها از قانون سلسله مراتبی در زبان html تبعیت می کند.
body پس از تگ های meta ، head ، html و title و.. در سند html به کار می رود.
درون تگ body تگ های مهمی جهت طراحی چارچوب سایت استفاده می شوند.
آموزش css در سایت آموزی
آموزش css
پیش نیاز زبان css
پیشنهاد می شود اگر با آموزش زیر آشنا نیستید، قبل از ادامه آموزش CSS ، آنرا مطالعه فرمایید:
آموزش HTML
CSS (سی اس اس) چیست؟
CSS ( سی اس اس ) سرنام واژگان Cascading Style Sheets است. (صفحات استایل آبشاری)
با استفاده از CSS می توان، نحوه ی نمایش عناصر html را مشخص نمود.
Style ها برای حل کردن یک مشکل به HTML 4.0 اضافه شدند.
زبان css جهت ساخت صفحات گرافیکی در وبسایت های گوناگون در آخرین نسخه html یعنی html5 گستردگی بیشتری یافت.
جهت ذخیره سازی اسناد html می توانید از طرریق تگ link اسناد خارجی css خود را برای سند html خود فراخوانی کنید.
برگه های استایل خارجی ( External Style Sheets ) می توانند در انجام کارهای زیاد صرفه جویی کنند.
برگه های استایل خارجی در فایل هایی با فرمت css. ذخیره می شوند.
آموزش CSS (سی اس اس)
با استفاده از CSS می توان، ظاهر یک صفحه HTML را به چندین سبک مختلف نمایش داد: نمایش نحوه انجام کار
آموزش CSS ( سی اس اس ) – حل یک مشکل بزرگ توسط CSS ( سی اس اس )
HTML هرگز قصد نداشت که توسط تگ ها، صفحات را قالب بندی کند، بلکه قصد داشت محتوای یک سند را فقط نمایش دهد.
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
زمانی که تگ هایی مانند <font> و مشخصه هایی مانند color به HTML 3.2 اضافه شد، برای طراحان وب یک کابوس بزرگ آغاز شد.
در وب سایت های بزرگ باید اطلاعات font ها و color ها به هر صفحه ای اضافه می شد.
اما این کار بسیار هزینه بری بود.
برای حل این مشکل، CSS ( سی اس اس ) توسط کنسرسیوم W3C یا ( World Wide Web ) ایجاد شد.
در HTML 4.0 قالب بندی صفحات می تواند از فایل HTML حذف شده و در یک فایل CSS ( سی اس اس ) جدا ذخیره شود.
در آخرین نسخه html یعنی html5 نیز توسعه بسیاری از کدهای css در قالب اسناد html میسر شد.
امروزه تمام مرورگرها، CSS ( سی اس اس ) را پشتیبانی می کنند.
آموزش CSS (سی اس اس) – انجام کارهای زیاد، فقط با یک حرکت
در آموزش CSS ( سی اس اس ) مشخص می کنید که عناصر HTML را چگونه نمایش دهید.
آموزش HTML و CSS آموزش HTML5 و CSS3 پروژه محور
Style ها معمولاً در فایلهای جداگانه با فرمت CSS ( سی اس اس ) ذخیره می شوند ( External style sheets ) اینکار شما را قادر می سازد.
فقط با تغییر یک فایل، ظاهر و یا دیزاین تمام صفحات یک پروژه را تغییر دهید.
در زبان css شما به راحتی می توانید از طریق کدهای css ، نحوه نمایش تگ های html را در خروجی مرورگر تغییر دهید.
مثلا شما می توانید از طریق خاصیت border-radius ، گوشه عناصر html را گرد کنید.
و یا از طریق خاصیت text-shadow ، متن موجود در تگ html را سایه دار نمایید.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
عناصر منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
زبان HTML و CSS نسخه نهایی HTML5 و CSS3 – اختصاصی سایت آموزی
دیدگاهتان را بنویسید