آموزش مقدماتی HTML و CSS (جلسه یک: آشنایی با HTML و CSS - بخش ۱)
1398/02/03 13:06 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه یک: آشنایی با HTML و CSS - بخش ۱)

زمانی را تصور کنید که اینترنت هنوز اختراع نشده بود، وبسایت‌ها وجود نداشتند و کتاب‌هایی که روی کاغذ چاپ شده و صرافی شده بودند، منبع اصلی اطلاعاتی بودند. اگر می‌خواستید اطلاعات خاصی را بیابید باید زمان و انرژی زیادی را صرف مطالعه یک کتاب کامل می‌کردید.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

امروز می‌توانید یک مرورگر وب را باز کنید، یک موتور جستجو را انتخاب کنید (گوگل یا هر کدام دیگر) و هر چیزی که می‌خواهید را جستجو کنید. می‌توانید هر نوع اطلاعاتی را با فشردن نوک انگشتتان بیابید.

همچنین احتمال اینکه یک نفر در جایی از دنیا یک وبسایت ساخته باشد که دقیقه موضوع مورد نظر شما در ذهن او نیز وجود داشته باشد خیلی زیاد است.

در طول این دوره به شما خواهیم آموخت که چگونه می‌توانید وبسایت‌های خودتان را با استفاده از دو زبان غالب رایانه (یعنی HTML و CSS) بسازید.

قبل از اینکه سفرمان را به سمت آموزش چگونگی ساخت وبسایت با HTML و CSS آغاز کنید، مهم است که تفاوت‌های موجود بین این دو زبان (از لحاظ syntax) و واژه‌های مشترک آن‌ها را درک کنید.

HTML و CSS چه هستند؟

HTML (زبان نشانه‌گذاری ابرمتنی) با تعریف محتوا به اشکال سر تیتر (heading)، پاراگراف‌ها یا تصاویر، ساختار و معنای محتوا را ایجاد می‌کند. (CSS (Cascading Style Sheets یک زبان نمایی است که ایجاد شده است تا با استفاده از مثلاً فونت‌ها یا رنگ‌ها، ظاهر محتوا را آراسته کند.

این دو زبان (یعنی HTML و CSS) مستقل از یکدیگر هستند و باید همین‌طور هم باشد. CSS نباید درون یک سند HTML نوشته شود و برعکس. یک قانون غیر قابل تغییر این است: HTML همیشه محتوا را ارائه می دهند و CSS همیشه ظاهر آن محتوا را تغییر می‌دهد.

حالا که چنین درکی از تفاوت بین HTML و CSS داریم، اجازه دهید بیشتر در مورد HTML صحبت کنیم.

شناخت واژه‌های مرسوم در HTML

وقتی با HTML کار می‌کنید، با واژه‌های جدید و گاهی عجیب روبه‌رو خواهید شد. به مرور زمان، بیشتر با تمام این واژه‌ها آشنا خواهید شد، اما سه واژه مرسوم در HTML که باید در ابتدای کار بشناسید عبارت‌اند از عنصرها (elementها)، تگ‌ها و اتریبیوت‌ها.

عنصرها (Elementها)

عنصرها نمادهایی هستند که ساختار و محتوای اشیاء داخل یک صفحه را تعریف می‌کنند. برخی از عنصرهای پر استفاده عبارت‌اند از سطوح مختلف سر تیتر یا هدینگ (که با عنصرهای <h1> تا <h6> تعریف می‌شوند) و پاراگراف‌ها (که با عنصر <p> مشخص می‌شوند) هستند. لیست عنصرها شامل <a>، <div>، <span>، <strong> و <em> و خیلی عنصرهای دیگر نیز هست.

عنصرها با استفاده از علامت‌های بزرگ‌تر (<) و کوچک‌تر (>) که در اطراف نام عنصر قرار گرفته‌اند، مشخص می‌شوند. بنابراین، یک عنصر چیزی شبیه به مثال زیر است:

<a>

تگ‌ها

استفاده از علامت‌های بزرگ‌تر و کوچک‌تر در اطراف یک عنصر چیزی به نام تگ ایجاد می‌کند. تگ‌ها معمولاً به صورت جفتی (تگ باز و تگ بسته) به کار می‌روند.

یک تگ باز نشان دهنده آغاز یک عنصر است. تگ باز با یک علامت کوچک‌تر (>) شروع می‌شود، بعد از آن نام یک عنصر قرار می‌گیرد و سپس با یک علامت بزرگ‌تر (<) پایان می‌یابد. برای مثال: <div>.

یک تگ بسته، نشان دهنده پایان یک عنصر است. تگ بسته با یک علامت کوچک‌تر (>) شروع می‌شود، پس از آن یک forward slash (/) و نام عنصر قرار می‌گیرند  با یک علامت بزرگ‌تر (<) پایان می‌یابد. برای مثال: </div>.

محتوایی که بین تگ‌های باز و بسته قرار می‌گیرد، محتوا آن عنصر محسوب می‌شوند. برای مثال یک anchor link دارای تگ باز <a> و تگ بسته <a/> است. چیزی که بین این دو تگ قرار می‌گیرد به عنوان محتوا anchor link شناخته می‌شود.

بنابراین، تگ‌های anchor شبیه به مثال زیر خواهند بود:

<a>...</a>

اتریبیوت‌ها

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

اتریبیوت class یک عنصر را طبقه‌بندی می‌کند. اتریبیوت src یک منبع برای محتوای استفاده شده مشخص می‌کند و اتریبیوت href یک رفرنس یا آدرس هایپرلینک به سمت یک منبع لینک شده فراهم می‌کند.

اتریبیوت‌ها درون تگ باز، پس از نام عنصر تعریف می‌شوند. در کل اتریبیوت‌ها شامل یک نام و یک مقدار هستند. فرمت اتریبیوت‌ها به این شکل است: نام اتریبیوت که پس از آن یک علامت مساوی قرار گرفته و سپس یک مقدار نقل شده (قرار گرفته در بین دبل کوتیشن “…”) قرار دارد.

برای مثال، یک عنصر <a> که شامل یک اتریبیوت href است به شکل زیر کد نویسی می‌شود:

<a href="http://mug.ac/">MUG</a>

 

کد بالا متن “MUG” را در صفحه وب نمایش می‌دهد و وقتی کاربران روی این متن کلیک کنند، به آدرس http://MUG.ac/ هدایت می‌شوند. عنصر anchor با تگ‌های باز <a> و <a/> که در اطراف متن قرار گرفته‌اند، تعریف می‌شود. اتریبیوت آدرس هایپرلینک و مقدار درون تگ باز نیز با فرمت href=http://mug.ac تعریف می‌شوند.

شکل ۱.۱: نمایش syntax در HTML که شامل یک عنصر (element)، اتریبیوت و تگ می‌باشد.

شکل ۱.۱: نمایش syntax در HTML که شامل یک عنصر (element)، اتریبیوت و تگ می‌باشد.

حالا که با عنصرها، تگ‌ها و اتریبیوت‌های HTML آشنا شدید، اجازه دهید به مبحث ایجاد اولین صفحه وب بپردازیم.

اگر در ادامه با کدها و موضوعات جدید مواجه شدید نگران نباشید، در حین توضیحات یا در جلسات آینده همه چیز را توضیح خواهیم داد.

تنظیم ساختار سند HTML

سندهای HTML در واقع سند‌های متنی ساده هستند که به جای پسوند فایل txt. با پسوند فایل html. ذخیره می‌شوند. برای آغاز کد نویسی با زبان HTML، ابتدا به یک ویراستار متن ساده نیاز دارید. متأسفانه نمی‌توان از Microsoft Word یا Pages استفاده کرد، چون این ویراستارها برای ویراستاری متن بیش از حد غنی و قوی هستند.

دو مورد از محبوب‌ترین ویراستارهای متن ساده برای کد نویسی با HTML و CSS عبارت‌اند از Dreamweaver و Sublime Text. البته می‌توانید از جایگزین‌های این دو ویراستار نیز استفاده کنید، برای مثال ++Notepad برای ویندوز و TextWrangler برای مک.

همه سندهای HTML دارای یک ساختار ثابت هستند که شامل تعاریف و عنصر‌های زیر می‌باشند:

<DOCTYPE html>، <html>، <head!> و <body>.

تعریف نوع سند یا <!DOCTYPE html> به مرورگر وب اطلاع می‌دهد که کدام ورژن از HTML استفاده می‌شود و این تعریف در ابتدای سند HTML قرار می‌گیرد.

چون ما قرار است از آخرین ورژن HTML استفاده کنیم، پس تعریف نوع سند خود را خیلی ساده با کد <DOCTYPE html!> مشخص می‌کنیم. در ادامه تعریف نوع سند، عنصر <html> قرار می‌گیرد که آغاز سند را مشخص می‌کند.

درون عنصر <html>، عنصر <head> قرار دارد که بالای سند را مشخص می‌کند و شامل هر گونه متاداده (یعنی اطلاعات در مورد صفحه) است. محتوای درون عنصر <head> در خود صفحه وب نمایش داده نمی‌شوند.

در عوض، این عنصر شامل تیتر سند (که در نوار یا قسمت تیتر در پنجره مرورگر نمایش داده می‌شود)، لینک به سمت فایل‌های خارجی یا هر گونه متاداده مفید دیگر است.

همه محتوای قابل مشاهده درون صفحه وب درون عنصر <body> قرار می‌گیرند. قسمتی از یک ساختار سند HTML معمولی به شکل زیر است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

 

کد بالا نشان می‌دهد که متن با تعریف متن (<DOCTYPE html!>) آغاز شده است و پس از آن مستقیماً عنصر <html> قرار گرفته است. درون عنصر <html>، عنصرهای <head> و <body> قرار دارند.

عنصر <head> شامل کد رمزگذاری یا انکدینگ کاراکتر ( یعنی تگ <”meta charset=”utf-8>) و عنصر سند (با عنصر <title>) است. عنصر <body> شامل یک هدینگ یا سر تیتر با عنصر <h1> و یک پاراگراف با عنصر <p> است.

چون هم هدینگ و هم پاراگراف درون عنصر <body> قرار گرفته‌اند، پس در صفحه وب نمایش داده می‌شوند.

وقتی یک عنصر درون یک عنصر دیگر قرار می‌گیرد، بهترین کار این است که هر عنصر را در یک خط مجزا بنویسید، این امر باعث می‌شود ساختار سند نظم و خوانایی خوبی داشته باشد.

در کد بالا، هر دو عنصرهای <head> و <body> داخل یک عنصر دیگر به کار رفته‌اند (یعنی داخل عنصر <html>) و همان‌طور که مشاهده می‌کنید هر کدام در یک خط مجزا نوشته شده‌اند. این الگو برای تمام عنصرهای جدیدی که داخل عنصرهای <head> و <body> قرار می‌گیرند نیز به کار برده می‌شود.

عنصرهای self – closing

در مثال قبل، عنصر <meta> فقط یک تگ داشت و هیچ تگ بسته‌ای برای آن وجود نداشت. نترسید، این کد عمدتاً نوشته شد. توجه داشته باشید که همه عنصرها شامل تگ‌های باز و بسته نیستند. عنصر <meta> یکی از این عنصرها است. محتوای عنصر <meta> در مثال قبل با استفاده از اتریبیوت charset و یک مقدار مشخص شده است.

دیگر عنصرهای selfclosing مرسوم عبارت‌اند از:

  • <br>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <br>

ساختار به کار رفته در این مثال (یعنی استفاده از نوع سند <DOCTYPE html!> و عنصرهای <html>، <head> و <body>) یک ساختار بسیار مرسوم است. در ادامه دوره زیاد این ساختار را خواهید دید چون ما به کرات برای ایجاد سند‌های جدید HTML از آن استفاده خواهیم کرد.

اعتبارسنجی کد

مهم نیست در هنگام نوشتن کد چقدر دقت به خرج دهیم، به هر حال درون کد دچار اشتباه می‌شویم. خوشبختانه، وقتی با زبان‌های HTML و CSS کد نویسی می‌کنیم، از اعتبارسنج‌هایی برخوردار هستیم که می‌توانند کار ما را بررسی کنند.

شرکت W3C اعتبارسنج‌هایی برای HTML و CSS ساخته است که کد را اسکن کرده و اشتباهات آن را مشخص می‌کنند. اعتبارسنجی کد نه تنها به رندر شدن مناسب در تمام مرورگرها کمک می‌کند، بلکه همچنین بهترین روش‌ها برای کد نویسی را به ما می‌آموزد.

تمرین

فرض کنید قصد داریم چند کنفرانس در مورد کارمان برگزار کنیم. می‌خواهیم کنفرانس‌هایی در مورد سبک و روش (style) برگزار کنیم، در نتیجه می‌خواهیم یک وبسایت بسازیم که مراحل ساخت آن را در ادامه توضیح خواهیم داد. شروع می‌کنیم!

  1. ابتدا ویراستار متن خود را باز می‌کنیم، یک فایل جدید به نام html ایجاد می‌کنیم و آن را در محلی ذخیره می‌کنیم تا جای فایل را فراموش نکنیم. حالا یک فولدر روی دسکتاپ به نام “styles-conference” ایجاد می‌کنیم و این فایل را در آن ذخیره می‌کنیم. شما هم در این تمرین همین کار را انجام دهید.

  2. درون فایل html، یک ساختار سند ایجاد می‌کنیم که شامل نوع سند <!DOCTYPE html> و عنصرهای <html>، <head> و <body> است.
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>
  1. درون عنصر <head>، عنصرهای <meta> و <title> را اضافه می‌کنیم. عنصر <meta> باید شامل اتریبیوت charset و مقدار مناسب باشد. عنصر <title> نیز باید حاوی تیتر صفحه (مثلاً “styles conference”) باشد.
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
</head>
  1. درون عنصر <body>، عنصرهای <h1> و <p> را اضافه می‌کنیم. عنصر <h1> باید شامل سر تیتری که می‌خواهیم نشان داده شود باشد (مثلاً دوباره از “styles conference” استفاده می‌کنیم). عنصر <p> باید شامل یک پاراگراف ساده برای معرفی کنفرانس ما باشد.
<body>
  <h1>Styles Conference</h1>
  <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</body>
  1. اکنون زمان آن رسیده که ببینیم چه کار کردیم! به محل فایل html می‌رویم (که در فولدر “styles-conference” روی دسکتاپ قرار دارد). روی فایل دبل کلیک می‌کنیم یا می‌توانید آن را drag کنید و به داخل یک مرورگر drop کنید تا صفحه وبی که ساختید نمایش داده شود.

شکل 1.2: اولین مراحل ایجاد وبسایت Styles Confference

شکل 1.2: اولین مراحل ایجاد وبسایت Styles Confference

اجازه دهید کمی فضا را عوض کنیم و از HTML فاصله بگیریم. در انتهای این جلسه کمی به CSS می‌پردازیم. به یاد داشته باشید، HTML محتوا و ساختار صفحات وب ما را تعریف می‌کند، در حالی که CSS مسائل بصری و گرافیکی و ظاهری صفحات وب را مشخص می‌کند.

شناخت واژه‌های مرسوم در CSS

علاوه بر واژه‌های HTML، چند واژه هم در CSS وجود دارند که باید با آن‌ها آشنا شوید. این واژه‌ها عبار‌ت‌اند از selectorها، ویژگی یا propertyها و مقادیر یا valueها. همانند HTML، هر چه بیشتر با CSS کار کنید، بیشتر این واژه‌ها به چشمتان آشنا خواهند شد.

Selectorها

وقتی عنصرها به یک صفحه وب اضافه شدند، می‌توان با استفاده از CSS به آن‌ها سبک و سیاق اضافه کرد. یک selector دقیقه مشخص می‌کند که کدام عنصر یا عنصرهای درون HTML ما هدف قرار می‌گیرند و فقط برای آن‌ها استایل (یعنی رنگ، سایز و موقعیت) اعمال می‌شود.

Selectorها می‌توانند شامل ترکیبی از شاخص‌های متفاوت برای انتخاب عنصرهای منحصر به فرد باشند و همه این موارد به این بستگی دارند که قصد داریم چقدر دقیق عمل کنیم. برای مثال، ممکن است بخواهیم تمام پاراگراف‌های درون یک صفحه را انتخاب کنیم، یا ممکن است بخواهیم فقط یک پاراگراف خاص در صفحه را انتخاب کنیم.

در کل Selectorها، مقدار یک اتریبیوت (مثلاً مقدار یک id یا class) یا نوع عنصر (مثل <h1> یا <p>) را هدف قرار می‌دهند.

در CSS، در جلوی selectorها آکولاد قرار می‌گیرد ({}) که درون آن‌ها استایل‌هایی که قرار است روی عنصر منتخب پیاده‌سازی شوند، قرار می‌گیرند. Selector در مثال زیر تمام عنصرهای <p> را هدف قرار می‌دهد.

p { ... }

ویژگی یا propertyها

وقتی یک عنصر انتخاب شد، property استایل‌هایی که برای آن عنصر پیاده‌سازی می‌شوند را مشخص می‌کند. نام‌های property بعد از Selector و درون آکولادها قرار می‌گیرند و پس از هر کدام یک دو نقطه (:) قرار می‌گیرد.

Propertyهای بی‌شماری وجود دارند که می‌توانیم استفاده کنیم، برخی از آن‌ها عبارت‌اند از background، color، font-size، height و width و propertyهای جدیدی هم وجود دارند که گاهی مورد استفاده قرار می‌گیرند. در کد زیر، ما propertyهای color و font-size را برای تمام عنصرهای <p> تعریف می‌کنیم.

p {
  color: ...;
  font-size: ...;
}

مقادیر یا valueها

تا اینجای کار ما یک عنصر را با استفاده از یک selector انتخاب کردیم و با استفاده از یک property مشخص کردیم که دوست داریم چه استایلی روی آن اعمال شود. حالا می‌توانیم رفتار آن property را با استفاده از یک مقدار یا Value مشخص کنیم. مقادیر به شکل یک متن در بین یک علامت دو نقطه (:) و یک سمی کالن (;) به کار می‌روند.

در کد زیر ما همه عنصرهای <p> را انتخاب می‌کنیم،  مقدار property یا ویژگی color را متن orange و مقدار ویژگی font-size را روی ۱۶ پیکسل قرار می‌دهیم.

p {
  color: orange;
  font-size: 16px;
}

نحوه کد نویسی در CSS به این شکل است که کد با یک selector آغاز می‌شود، که بعد از آن بلافاصله آکولادها قرار می‌گیرند. درون این آکولاد‌ها تعاریفی شامل ویژگی و مقادیر قرار می‌گیرند. هر تعریف با یک ویژگی شروع می‌شود، که بعد از آن علامت دو نقطه قرار می‌گیرد، سپس مقدار ویژگی و در نهایت سمی کالن قرار می‌گیرند.

این یک روش مرسوم است که درون آکولادها، هر ویژگی به همراه مقدارش در یک خط مجزا نوشته می‌شوند. همانند HTML، این امر به نظم و خوانایی کد کمک فراوانی می‌کند.

شکل 1.3: نحوه syntax در CSS که شامل یک selector، ویژگی‌ها و مقادیر است.

شکل 1.3: نحوه syntax در CSS که شامل یک selector، ویژگی‌ها و مقادیر است.

خلاصه

در این جلسه با زبان‌های برنامه‌نویسی HTML و CSS آشنا شدید، فهمیدید که چه واژه‌های مرسومی در آن‌ها به کار می‌روند و به صورت مختصر با آن‌ها کد نوشتید و با چگونگی عملکرد و syntax این دو زبان آشنا شدید. در جلسه آینده بیشتر در مورد CSS صحبت خواهیم کرد.

منبع: shayhowe

  جلسه بعد

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات