html/css

قالب طراحی شده توسط HTML/CSS

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

برای اینکه یک قالب HTML/CSS از حالت کاملاً ایستا خارج شود و تعامل واقعی با کاربر برقرار کند، باید از JavaScript استفاده شود. جاوااسکریپت باعث می‌شود:

  • دکمه‌ها واقعاً کاری انجام دهند
  • فرم‌ها اعتبارسنجی شوند
  • اسلایدر، منوهای بازشو و پاپ‌آپ ساخته شود
  • بدون رفرش شدن صفحه، محتوا تغییر کند
  • پیام خطا یا موفقیت نمایش داده شود

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

برای داینامیک واقعی (مثل ثبت‌نام کاربر، ورود، سفارش، پرداخت، پنل مدیریت و اتصال به دیتابیس) نیاز به زبان‌های سمت سرور داریم، مثل:

PHP (رایج‌ترین در ایران و وردپرس) برای یادگیری این زبان، میتوانید در کلاس آموزش PHP شرکت نمایید.

Python (فریم‌ورک‌هایی مثل Django) برای آموزش این زبان میتوانید در کلاس آموزش پایتون شرکت نمایید.

Node.js

ASP.NET

این زبان‌ها به سایت امکان می‌دهند که:

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

html5-and-css3

اجزای HTML

HTML از تگ‌ها (Tags) ساخته می‌شود و مهم‌ترین اجزای آن عبارت‌اند از:

1. تگ‌های ساختاری

<html> → ریشه اصلی صفحه

<head> → اطلاعات فنی صفحه (عنوان، فونت، متا)

<body> → محتوای قابل نمایش سایت

2. تگ‌های متنی

<h1> تا <h6> → تیترها

<p> → پاراگراف

<span> → متن‌های کوتاه درون خط

<strong> و <em> → بولد و ایتالیک

3. تگ‌های لینک و رسانه

<a> → لینک

<img> → تصویر

<video> → ویدئو

<audio> → صدا

4. تگ‌های چیدمان (Layout)

<div> → بلوک‌بندی

<section> → بخش‌بندی محتوا

<header> → هدر

<footer> → فوتر

<nav> → منوی سایت

5. تگ‌های فرم

<form> → فرم

<input> → ورودی

<textarea> → باکس متن

<button> → دکمه

<select> → لیست کشویی

اجزای اصلی CSS (ظاهر و طراحی)

CSS از قوانین استایل‌دهی (Rules) تشکیل شده که هر قانون شامل سه بخش است:

1. Selector (انتخاب‌کننده)

مثلاً:

div

.box

#header

2. Property (ویژگی)

مانند:

color

font-size

width

height

background

border

margin

padding

display

position

3. Value (مقدار)

مثل:

red

16px

center

100%

همانطور که عنوان شد، HTML/CSS مجموعه ای از تگ هایی است که شکل کلی آن بصورت زیر می باشد:

<html>

<head>

<head/>

<body>

<body/>

<html/>

html

در قسمت <head><head/> تگ هایی که مانند: <link>,<meta>,<style>, … قرار می گیرند و بصورت کلی  درون تگ <head> قسمت های راه انداز قرار می گیرند. و هر آنچه درون این تگ قرار میگیرد برای کاربر قابل مشاهده نمی باشد.

قسمت <body><body/> مهمترین تگ HTML می باشد و تمامی آنچه کاربران مشاهده می کنند درون این تگ قرار می گیرد.

Html-Css

CSS باعث زیبایی و جذابیت سایت می شود و در واقع قالب سیاه و سفیدی که توسط HTML ایجاد کرده اید را رنگ آمیزی می کند تا برای کاربران جذاب باشد و باعث خستگی کاربر نگردد .

در مقاله قبلی با عنوان های  انتخاب رنگ مناسب سایت و معرفی ابزار و سایت های مفید برای انتخاب رنگ وب سایت  به نکات بسیار مهمی برای رنگ آمیزی سایت صحبت کردیم.

Html-Css

اهمیت طراحی قالب سایت با HTML/CSS :

با اینکه مدت زمان زیادی از پیدایش زبان HTML/CSS می گذرد اما به علت اینکه این زبان پایه ای برای یادگیری زبان های برنامه نویسی دیگر شناخته شده است، هنوز منسوخ نشده است و جهت بهبود کارایی آن، ورژن های جدیدی ارائه می گردد.

HTML5 جدیدترین ورژن HTML  می باشد و امکانات زیادی مانند  واکنش گرایی به آن افزوده شده است. زبان HTML/CSS  به عنوان پایه و اساس جهت یادگیری برنامه نویسی به زبان های مختلف

مانند : PHP ,ASP.NET ,JAVASCRIPT  و … می باشد زیرا تمام مفاهیم مورد نیاز در هریک از زبان های گفته شده را در بر دارد و برای قدم گذاشتن در  هریک از مسیرهای  webdesigner (طراح قالب)، web master (پشتیبان سایت)، web developer( توسعه دهنده و برنامه نویس سایت) باید HTML/CSS را بصورت کامل و جامع آموزش دیده باشیم و بتوانیم یک قالب سایت را از صفر تا صد طراحی کنیم .قالب های طراحی شده  با HTML/CSS  کاملا منحصر به فرد هستند زیرا طراح قالب ایده های خود را در مقابل نگاه شما قرار می دهد و نمی تواند از سایت های دیگر کپی کند به همین دلیل  از میان قالب هایی که باHTML/CSS طراحی می شوند، جذاب ترین آنها از دید کاربر تجاری سازی شده و به فروش می رسند .

در HTML5 امکان طراحی لوگو نیز افزوده شده است که از طریق تگ <SVG> می توانید لوگوهای مورد نظر خود را در سایت طراحی نمایید.

نحوه تدریس در  آکادمی پرتو :

در پایان، اگر علاقه‌مند هستید طراحی وب را به‌صورت اصولی و کاربردی بیاموزید، شرکت در دوره‌ آموزش HTML و CSS با تدریس اساتید باتجربه و متخصص می‌تواند بهترین نقطه شروع باشد؛ در این کلاس‌ها آموزش‌ها به‌صورت پروژه‌محور ارائه می‌شود، به‌طوری که هنرجو از همان جلسات ابتدایی وارد فضای عملی طراحی سایت شده و با اجرای پروژه‌های واقعی، مهارت خود را تثبیت می‌کند. همچنین در پایان دوره، مدرک رسمی و قابل ترجمه به شرکت‌کنندگان ارائه می‌شود که می‌تواند مسیر ورود به بازار کار داخلی و حتی فعالیت‌های بین‌المللی را هموار کند.