آموزش یادگیری html

sun-shine · 8 بهمن، ۱۳۹۳

سلام دوستان

در این تاپیک قصد دارم html را از صفر شروع کنم، امیدوارم فرصت اینو داشته باشم که کامل کنم و همه مطالب رو قرار بدم.

منبعی که یکی از دوستان پیشنهاد دادن فیلم های آموزشی هستش که در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

موجود هست که خیلی ساده و خوب گفته شده ولی از اونجایی که سرعت اینترنت کمه و برای همه امکان دانلود فیلم وجود نداره قصد دارم که مطالبی که از فیلم یادداشت کردم، همچنین مطالبی که در فیلم گفته نشده رو از کتاب HTML-DHTML-XML جعفرنژاد قمی در این تاپیک قرار بدم.

سعی می کنم که مطالب هر پست، خیلی زیاد نباشه و بصورت دسته بندی شده باشه.

امیدوارم که این تاپیک مفید باشه

sun-shine · 8 بهمن، ۱۳۹۳

بخش اول: توضیح مختصری در مورد کلیات

خب بهتره اول یه مقدار در مورد کلیات و اصلاحات صحبت کنیم.

HTML چیست؟

عبارت HTML (اچ تی‌ام ال) مخفف Hyper Text Markup Language به معنی زبان نشانه‌گذاری ابرمتن است.

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

Html زبان استاندارد طراحی صفحات وب: کلیه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهایت به کدهای HTML تبدیل شده و توسط مرورگر نمایش داده می‌شوند. به عبارت دیگر مرورگر‌ها هیچکدام از کدها و کنترل‌های سمت سرور همچون کدهای asp و php را نمی‌شناسند و کد قابل فهم برای آن‌ها اچ تی‌ام ال می‌باشد. کامپایلر‌های زبآن‌های برنامه نویسی سروری در نهایت کد‌های خود را برای نمایش به کد اچ تی‌ام ال تبدیل می‌کنند و برای مرورگر می‌فرستند تا به کاربران نمایش داده شود.

تفاوت HTM و HTML:

در گذشته بدلیل اینکه پسوندها از سه کاراکتر تشکیل می‌شد، از پسوند HTM استفاده می‌شد ولی اکنون می‌تواند از پسوند HTML نیز استفاده نمود. بهتر است از پسوند HTML استفاده شود.

تگ (tag) :

از دو علامت بزرگتر و کوچکتر () تشکیل شده است که بین این دو علامت نام تگ قرار می‌گیرد.

انواع تگ:

1. تگ‌های با فرزند: از یک تگ شروع و یک تگ پایان تشکیل شده است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

اسلش می‌تواند آخر هم آورده شود.
داخل این تگ، می‌توان تگ‌های دیگر استفاده کرد.

2. تگ‌های بدون فرزند:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

در صورتی که فاصله و اسلش هم گذاشته نشود، جواب می‌دهد.

Properties یا خواص:

برای دادن خواص به تگ‌ها، یک فاصله گذاشته و سپس نام خصوصیت را نوشته، سپس مساوی و دابل کوتیشن و مقدار خصوصیت را داخل دابل کوتیشن می‌نویسیم.

خصوصیت می‌تواند چند مقداری نیز باشد که با , (کاما) از هم جدا می‌شود.

تگ با فرزند

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

تگ بدون فرزند

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خواص مشترک بین تگ ها:

برخی خواص، برای تمام دستورات HTML کاربرد دارد مانند:

1. ID: یک شناسه عددی الفبایی منحصر به فرد است که برای مراجعه بعدی استفاده می‌شود.

2. TITLE: صفت متنی است وقتی ماوس در مرورگر روی عنصر قرار می‌گیرد، آن متن ظاهر می‌شود.

همچنین CLASS و STYLE از خواص مشترک است.

sun-shine · 8 بهمن، ۱۳۹۳

بخش دوم: ساختار کلی HTML:

خب بریم سر اصل مطلب

ساختار HTML:

هر برنامه، دو بخش اصلی دارد:

1. بخش عنوان: اطلاعات مکمل در مورد سند است که با تگ شروع و پایان HEAD مشخص می شود.

عنوان صفحه با دستور

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

اطلاعات موجود در head مهم است زیرا محتوای سند را توصیف می کند و در واقع مانند صفحه اول کتاب است. موتورهای جستجو از این اطلاعات، برای شاخص بندی صفحات وب استفاده می کند.

2. بخش بدنه: شامل تمامی دستورات است که صفحه را تولید می کند و با

شروع و به تگ خاتمه می یابد.

ساختار کلی HTML بصورت زیر می باشد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نکات:

1. در نوشتن دستورات HTML، تفاوتی بین حروف کوچک و بزرگ نیست.

2. بیشتر از یک فاصله در HTML نداریم و برای ایجاد فاصله باید از دستور مربوطه استفاده نمود.

3. ENTER نیز در HTML وجود ندارد و برای رفتن به سطر بعد، باید از دستور مربوطه استفاده نمود.

صفات دستور BODY:

1. صفت Bgcolor: برای تعیین رنگ پس زمینه است.

2. صفت text: برای تعیین رنگ متن نوشته های صفحات است.

3. صفت Background: تصویری را بعنوان زمینه صفحه در نظر می گیرد. مقدار این صفت، url یا gif یا jpeg است.

4. Link (رنگ پیوندهایی که دیده نشده است)، Alink (رنگ لینکی که در حال کلیک است)، Vlink(رنگ لینکی که ملاقات شده است)

5. DIR: جهت متن را نشان می دهد که دو مقدار RTL(برای متن های فارسی) و LTR (برای متن های انگلیسی) بکار می رود.

انتخاب رنگ:

سه روش برای انتخاب رنگ وجود دارد:

1. نام رنگ: مثلا color = "Red"

2. مقدار هگزا دسیمال: از شش حرف تشکیل شده است که باید ابتدا علامت # را گذاشت. #RRGGBB که هر کدام، مقدار 0-f می گیرد.

مثلا برای رنگ قرمز بصورت زیر نوشته می شود: color="#ff0000"

3. RGB(R , G , B): هر کدام از این حروف، مقداری بین 0-255 می گیرد.

مثلا برای رنگ قرمز، بصورت زیر نوشته می شود. color= "RGB(255,0,0)"

تعیین عناوین در متن

عناوین در متن به 6 دسته تقسیم می شود که با تگ های شروع و پایان h1 تا h6 مشخص می شود که h1 بزرگترین عنوان و h6 کوچکترین عنوان است.

خاصیت align مربوط به تگ عناوین:

برای تعیین موقعیت عنوان در یک سطر از صفت align می توان استفاده نمود که چهار مقدار right، left، center و justify می گیرد.

مثال :

دستور زیر کلمه salam را بصورت تیتر بزرگ و در وسط سطر نشان می دهد.

salam

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خب حالا فایلمون رو با پسوند html ذخیره می کنیم و بعد با یک مرورگر بازش می کنیم.

خروجی مثال:

sun-shine · 9 بهمن، ۱۳۹۳

بخش سوم: آدرس دهی، ایجاد پاراگراف، شکستن خط، متنهای بدون فرمت و کشیدن خط

اول از همه چند تا نکته رو بگم که در پست های قبلی فراموش کردم

نکات:

1. از نظر من (استادم، خوشبختم ) بهترین نرم افزاری که برای نوشتن html می تونیم استفاده کنیم، ++notepad هستش، به خاطر اینکه مثل notepad همه کد به رنگ مشکی نیست یعنی در notepad++ تگ ها و خصوصیات و ... هر کدوم یه رنگ هستش. از طرفی هم مثل ویژوال استادیو و Dreamweaver نیست که خودش فرمت آماده داشته باشه و خودش تگ پایانو بزنه. اینجوری تنبل هم نمیشیم :vahidrk:

2. برای دیدن سایتی که طراحی و ذخیره کردیم، فقط کافیه که بروی اون دابل کلیک کنید.

3. برای تغییر سایتی که قبلا نوشته اید، کافیست که روی فایل آن راست کلیک و open with کرده و با نرم افزار مورد نظر باز کنیم.

4. تمام دستوراتی که در ادامه نوشته میشه، بین دو تگ باز و بسته

هست.

خاصیت Background از تگ body:

می توان برای سایت خود، از یک عکس بعنوان پس زمینه استفاده نمود. به این منظور از خاصیت Background استفاده می شود. به این منظور، باید مقدار این خاصیت را آدرس عکس یا url آن باشد که در ادامه به هر دو می پردازیم:

1. آدرس عکس:

دو نوع آدرس داریم:

الف- آدرس دهی مطلق: آدرس کامل عکس است که در صورتی که عکسی در سیستم شما باشد و بروی آن راست کلیک کرده و properties بگیرید، آدرس کامل آن را در قسمت location نشان می دهد. آدرس آن را کپی کرده، سپس یک اسلش و نام عکس و پسوند آن را می نویسیم.

مثال:

اگر عکسی با نام flower1.jpg در مسیر E:/pic/picture باشد، بصورت زیر آدرس دهی می کنیم:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ب- آدرس دهی نسبی: بدین منظور، عکس را در کنار پروژه و یا در پوشه ایی بنام مثلا image در کنار پروژه کپی کرده و بصورت نسبی آدرس دهی می کنیم.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

2- آدرس URL:

برای آدرس دهی با URL، ابتدا باید کلمه http:// را نوشت و سپس آدرس کامل عکس مورد نظر را بنویسیم.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نکته:

1. بدلیل اینکه ممکن است در کامپیوترهای مختلف، عکس در مسیری که در آدرس دهی مطلق گفته شده، وجود نداشته باشد. بهتر است حتما از آدرس دهی نسبی استفاده شود.

2. در صورتی که عکسهای پروژه را در پوشه image و صفحات را در پوشه page ذخیره کردید، برای آدرس دهی نسبی و برای اینکه به عقب برگردید، ابتدا باید ../ گذاشته تا از پوشه page خارج شود و سپس بقیه آدرس را مانند قبل بنویسید.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

اگر می خواهید دو بار به عقب برگردد، از دو تا ../ استفاده می شود

همانطور که گفتیم، در HTML، هر تعداد که enter در متن بزنیم، اثری ندارد و در صفحه نشان داده نمی شود. سه روش برای شکستن خط وجود دارد:

1. پاراگراف بندی متن با استفاده از تگ

:

برای شروع و پایان پاراگراف از

متن پاراگراف P> استفاده می شود. هر متنی بعد از این تگ به خط بعد می رود. این تگ بغیر از خصوصیات مشترک، خصوصیت align نیز دارد که برای تعیین موقعیت پارگراف است و چهار مقدار right، left، center و justify می گیرد.

2. شکستن خط یا Enter با تگ BR>

برای شکستن خط، از تگ br> استفاده می شود که یک تگ بدون فرزند است. از این تگ، می توان در هر کجای متن استفاده نمود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

تفاوت تگ

و BR>:

هر دوی این تگ ها باعث شکستن خط می شود ولی تگ

دو فاصله بین پاراگراف ایجاد می کند، یکی قبل از پاراگراف و یکی بعد از پاراگراف. ولی تگ

یک فاصله ایجاد می کند.

3. متن فاقد فرمت با استفاده از تگ

[/b][/color]هر متنی که داخل تگ باز و بسته pre نوشته شود، به همان صورت در صفحه نمایش داده می شود. یعنی enter و فاصله را نیز به همان صورتی که می نویسیم، نشان می دهد.
 
[color=#00ff00][b]مثال:[/b]
[/color]
[html]<pre>
T
      X
                  X
                              T
</pre>[/html]
[color=#ff0000][b]ایجاد خط (تگ  HR>)[/b]
[/color]برای ایجاد خط، می توان از تگ بدون فرزند  HR> استفاده نمود که علاوه بر خصوصیات مشترک دارای خصوصیات زیر می باشد:
 
   [color=#ee82ee][b]1.   Color:[/b][/color] رنگ خط
  [b][color=#ee82ee] 2.  Width[/color]: [/b]پهنای خط به درصد یا پیکس
 [color=#ee82ee][b]  3.  Size:[/b][/color] ارتفاع خط بر حسب پیکس
   [color=#ee82ee][b]4.  Noshade:[/b] [/color]خط فاقد سایه باشد.
 [color=#ee82ee]  [b]5.  Align:[/b][/color] موقعیت خط که چهار مقدار right، left، center و justify می گیرد.
 
[color=#00ff00][b]مثال:[/b]
[/color]
[html]<Hr align="center" width="20px" />
[/html]
 
شبه کد بالا یک خط با پهنای 20 پیکسل و در وسط سطر می کشد.
 
[size=3][font=times new roman][b][color=#00ff00]مثال: 
[/color][/b][/font][/size]در سایت طراحی شده زیر، کلیه مطالبی که در بالا گفته شده است را استفاده نمودیم. برای خصوصیت color از هر سه روش اختصاص رنگ استفاده شده است. همچنین تصویری در پس زمینه قرار گرفته است.
 
[size=3][font=times new roman] 
[html]
<html>
    <head>
        <title> noandishaan </title>
    </head>

<body background="img/sakdandan5.jpg" text="#0000ff" dir="rtl" >
        <h3>

            <p>
            گل سگ دندان

            <hr color="yellow" width="25%" align="right"  />

            سردهٔ سگ دندان (نام علمی: 'Erythronium') نام یک سرده از گیاهان است. گیاه پیازداری است که د
            ارای دو برگ متقابل است. گل‌های آن درشت و واژگون با قطعات گلپوش برگشته به سمت بالا و دارای قا
            عده‌ای زنگوله‌ای شکل هستند.
            </p>

            <p>
                    میوهٔ آن نیز کپسول چند دانه است. این جنس در
                    حدود ۲۵ گونه در اروپا، نواحی معتدل آسیا 
                    و آمریکای شمالی دارد. در ایران فقط یک گونه از آن به نام سگ دندان
            (نام علمی: 'Erythronium caucasicum') یافت می‌شود.
            </p>

            <hr noshade/>            

            Html یک زبان ساخت یافته است. <br /> html زبان اصلی طراحی صفحات وب می باشد.
            <hr size="5" color="rgb(200,100,80)" width="250px" align="left"/>

            <pre dir="ltr">
T
    X
        X
            T
            </pre>
        </h3>

            <body/>
</html>
[/html]
[color=#00ff00][b]خروجی مثال:
[/b][/color][/font][/size]
[center][/center]

sun-shine · 10 بهمن، ۱۳۹۳

بخش چهارم، فرمت‌بندی متن

وسط چین (تگ center) :

در جلسات قبل دیدم که با خاصیت Align نیز می‌توان متن را وسط چین کرد ولی تگی نیز وجود دارد که هر چیزی داخل آن قرار گیرد، در وسط سطر قرار می‌گیرد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

Bold کردن متن (تگ B یا Strong) :

هر دو تگ، موجب پر رنگ شدن متن می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ایتالیک کردن متن:

هر دو تگ، موجب کج شدن متن می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

زیرخط دار کردن متن:

یک خط زیر متن کشیده می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خط زدن متن:

روی متن، یک خط می کشد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

توان (اندیس بالا)

Sup اندیس بالاست مثلا برای x به توان دو بصورت زیر عمل می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

زیر اندیس

زیر اندیس ایجاد می کند مثلا برای نوشتن y₁ بصورت زیر عمل می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

متن چشمک زن

متنی را در صفحه وب بصورت چشمک زن در می آورد(در همه مرورگرها عمل نمی کند مثلا در فایرفاکس اجرا می شود). الان کاربردی ندارد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

متن متحرک (تگ marquee)

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

1. Behavior: حرکت متن را کنترل می کند که سه مقدار زیر را شامل می شود.

الف- Alternate: متن در طول مسیر، یکبار از چپ به راست و یکبار از راست به چپ حرکت می کند.

ب- Scroll: متن از سمت راست به چپ شروع به حرکت کرده و زمانی که به انتها رسید، دوباره از سمت راست به سمت چپ به حرکت ادامه می دهد. صفت پیش فرض است.

ج-Slide: متن از راست به چپ حرکت کرده و زمانی که اولین کاراکتر به آخر سطر رسید، متوقف می شود.

2. Bgcolor: رنگ زمینه متن متحرک است.

3.Direction: مشخص می کند، متن به چه جهتی حرکت کند. پیش فرض left است

الف- left: به سمت چپ حرکت می کند.

ب- Right: به سمت راست حرکت می کند.

ج- Up: به سمت بالا حرکت می کند.

د- Down: به سمت پایین حرکت می کند.

4.Hight: ارتفاع کادر حاوی متن است که با پیکسل یا درصد مشخص می شود.

5.Width: عرض کادر حاوی متن است که با پیکسل یا درصد مشخص می شود.

6. Hspace: فاصله بین لبه کادر و محتوای آن در سطح افق، چقدر باشد.

7.Vspace: فاصله بین لبه کادر و محتوای آن در سطح عمودی، چقدر باشد.

8.Loop: تعداد دفعات حرکت متن است که پیش فرض 1- است یعنی بینهایت.

9. Scrollamount: فاصله بین هر بار نمایش متن متحرک چند پیکسل باشد.

10. ScrollDellay: بین هر بار نمایش متن متحرک، چند میلی ثانیه فاصله داشته باشد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

تغییر فونت و سایز (تگ font)

برای تغییر فونت و سایز و رنگ متن از تگ font استفاده می شود. با استفاده از این تگ می توان، نوع فونت، اندازه، جهت و رنگ متن را انتخاب نمود. این تگ شامل خصوصیات زیر است.

1. Face: نوع فونت

2. Color: رنگ قلم

3. Size: اندازه قلم که بصورت عددی یا نسبی است. اگر عددی باشد، از 1 تا 7 است و پیش فرض آن 3 است. نسبی یعنی اندازه فونت را نسبت به اندازه فعلی کم یا زیاد می کند که می تواند از 1+ تا 6+ و 1- تا 6- باشد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

sun-shine · 10 بهمن، ۱۳۹۳

بخش پنجم: قرار دادن تصویر در صفحه و ایجاد پیوند

قرار دادن تصویر در صفحه وب:

به این منظور از تگ بدون فرزند استفاده می‌کنیم. این تگ علاوه بر خاصیت Title و Style خصوصیات زیر را داراست:

1. SCR: آدرس عکس است که مطابق روشهای آدرس دهی قبلی، می‌توان آدرس دهی کرد.

2. Align: مکان تصویر را مشخص می کند.

3. Alt: متنی را مشخص می‌کند که در صورتی که مرورگر نتوانست تصویر را نشان دهد، این متن نمایش داده شود.

4. Height: ارتفاع تصویر به پیکسل است.

5. Width: عرض تصویر به پیکسل است.

6. Border: می‌توان دور عکس، یک حاشیه ایجاد کرد.

مثال:

دستور زیر، یک عکس با ارتفاع 200 پیکسل و عرض 300 با حاشیه 2 پیکسل در صفحه قرار می دهد و در صورتی که تصویر لود نشود، عبارت "load a picture" نمایش داده می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ایجاد پیوند در HTML:

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

1. Target: مشخص می‌کند که لینک به چه صورت نمایش داده شود. سه مقدار زیر را می‌گیرد:

الف- _self: صفحه را در صفحه جاری باز می‌کند.

ب- _blank: صفحه را در تب جدید باز می‌کند.

ج- _top: مثل اولی است.

2. Href: مهمترین خاصیت تگ است و برای تعیین مقصد بکار می‌رود. سه حالت دارد که بصورت زیر است:

الف- وقتی روی لینک کلیک می‌کنیم، به جای دیگر مثل سایت دیگر هدایت شود. حتما باید قبل از آدرس سایت عبارت Http: // گذاشته شود. در مثال زیر، زمانی که روی عبارت "سایت گوگل" کلیک شود، به سایت گوگل هدایت می‌شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ب- زمانی که روی لینک کلیک می‌شود، به صفحات دیگر در همین کامپیوتر است.

مثال:

مثلا اگر یک صفحه با نام class4. html داشته باشیم، با کلیک بروی عبارت "صفحه کلاس 4"، به آن صفحه هدایت می‌شویم.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ج- در صورتی که روی لینک کلیک می‌شود، به نقطه‌ای در همین صفحه انتقال یابیم. به این منظور، باید آن بخش از صفحه وب، نام منحصر به فردی داشته باشد. این نام توسط خاصیت id باید مشخص شود. سپس در تگ a، برای مراجعه به آن بخش، ابتدا علامت # گذاشته و سپس نام آن بخش ذکر شود.

مثال:

در مثال زیر، با کلیک بروی عبارت "اینجا"، به قسمت "تست لینک" پرش می‌کند.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

sun-shine · 12 بهمن، ۱۳۹۳

بخش ششم: نقشه های تصویری

تصاویر و پیوند:

می توان یک تصویر را نیز بعنوان پیوند در نظر گرفت. تنها کافیست که بصورت زیر، تگ img را داخل تگ باز و بسته a قرار داد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نقشه های تصویری (تگ map):

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

به این منظور بصورت زیر عمل می کنیم:

1. برای تگ map، یک خاصیت با نام name نوشته و یک نام به آن اختصاص می دهیم.

2. برای عکس، خاصیتی بنام usemap تعریف می کنیم که مقدار آن باید برابر با خاصیت name مربوط به تگ map باشد. قبل از اسم، علامت # گذاشته می شود.

3. در تگ map، یک تگ بدون فرزند area می نویسیم. این تگ دو خاصیت مهم دارد که عبارتند از:

الف- shape: که نوع شکل نقشه است و سه مقدار می گیرد: circle(دایره)، Rect(مستطیل) و Poly(چندضلعی) می گیرد.

ب-coords: مهمترین قسمت نقشه تصویری، دادن مختصات است که برای هر کدام از سه نوع، بصورت زیر است:

شکل را در نرم افزار paint باز کرده و برای بدست آوردن مختصات هر نقطه که نیاز دارید، کافیست که ماوس را روی آن نقطه نگه دارید تا مختصات x و y آن در گوشه پایین سمت چپ نشان داده شود.

دایره: سه مقدار می گیرد که مختصات x و y نقطه مرکزی و شعاع دایره است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

مستطیل: در مستطیل خاصیت coords چهار مقدار می گیرد که بصورت زیر است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

چند ضلعی: در چند ضلعی، برای نوشتن مختصات، طول و عرض نقاط را در کنار هم می نویسیم. نکته مهم در چند ضلعی اینست که باید نقطه اول و آخر یکی باشد یعنی مختصات نقطه اول، باید در آخر نیز آورده شود تا بصورت محیط بسته شود. می توان مختصات نقاط منحنی را نیز به این صورت بدست آورد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

مثال:

در مثال زیر، هر سه نوع shape را استفاده کردیم. این مناطق در شکل با رنگی متمایز، نشان داده شده است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

زمانی که ماوس بروی مناطق مشخص قرار داده شود، شکل کرسل ماوس به شکل دست تغییر می کند و با کلیک بروی این مناطق، به لینک های مشخص منتقل می شود.

sun-shine · 14 بهمن، ۱۳۹۳

بخش هفتم: چند رسانه ایی در وب

شامل تصویر، صدا و ویدئو می باشد.

1. تصاویر در وب:

تصاویر وب بهتر است از یکی از سه فرمت GIF، JPEG و PNG باشد. همچنین بهتر است حجم فایل نیز کم باشد.

همانطور که قبلا گفته شد، برای قرار دادن تصویر در صفحه از تگ بدون فرزند استفاده می کنیم. خصوصیاتی که قبلا نیز ذکر شد، شامل:

1. SRC: آدرس فایل تصویر یا آدرس تصویر مورد نظر در سایت دیگر

2. Border: ضخامت کادر دور تصویر

3. ALT: در صورتی که تصویر به هر دلیلی ظاهر نشود، به جای آن این متن نمایش داده می شود.

4. Width: عرض تصویر

5. Height: ارتفاع تصویر

علاوه بر موارد فوق، تگ img برای تنظیم تصویر می توان، از خصوصیات زیر استفاده نمود:

6. Align: زمانی که تصویری در بلوکی از متن قرار بگیرد، خط بعدی متن، در بالا، وسط و پایین قرار می گیرد. سه مقدار زیر را می تواند بگیرد:

Top: متن در بالا قرار می گیرد.
Middle: متن در وسط قرار می گیرد.
Button: متن در پایین قرار می گیرد، این گزینه پیش فرض است.

7. Vspace: میزان فضای عمودی در بالا و پایین تصویر ایجاد می کند که به پیکسل است.

8. Hspace: میزان فضای افقی در راست و چپ تصویر ایجاد می کند که به پیکسل است.

مثال Align:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

مثال Vspace و Hspace:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

2. صوت و صدا در وب:

قبلا برای صوت و دیدن فیلم از پلاگین استفاده می شد ولی امروزه از تگ audio استفاده می شود.مهمترین فرمت های فایلهای صوتی در اینترنت mp3، wav، ogg است. نوع فرمتهای صوتی و اینکه در کدام browser ساپورت می شود، عبارتند از :

چهار روش پخش صدا:

1. استفاده از تگ object: خصوصیت آن data است که مقدار نام فایل و پسوند فایل را می گیرد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

2. استفاده از تگ bgsound: به محض لود سایت، صدا پخش می شود و امکان قطع آن وجود ندارد. خصوصیت آن Src است که مقدار نام فایل و پسوند فایل را می گیرد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

3. استفاده از تگ embed: در html 5 وجود دارد. خصوصیت آن Src است که مقدار نام فایل و پسوند فایل را می گیرد. خصوصیت width و height نیز می توان تعریف کرد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

4. تگ audio: شامل خصوصیات زیر است:

خصوصیت Src که نام فایل و پسوند آن است.
خصوصیت controls دارد که حتما باید گذاشته شود، وگرنه چیزی نمایش نمی دهد.
خصوصیت muted: برای قطع صدا
خصوصیت autoplay: پخش اتوماتیک صدا به محض لود سایت
خصوصیت loop: تکرار مجدد آهنگ

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نکته:

برای اینکه همه مرورگرها بتوانند فایل را پخش کنند، از تگ باز و بسته audio استفاده می کنیم و هر سه فرمت را می گذاریم و بصورت زیر تعریف می کنیم:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

sun-shine · 16 بهمن، ۱۳۹۳

بخش هشتم:

چند رسانه ایی در وب (2)

3. ویدئو و فیلم

سه فرمت برای فایلهای فیلم در وب عبارتند از mp4(mpeg4)، webm و ogg. در جدول زیر فرمت ها و بروزرهای ساپورت کننده آنها قرار داده شده است.

در در گذشته، برای فیلم نیز مانند صدا از پلاگین استفاده می شد و برای ربط آن از Object استفاده می شد ولی امروزه از تگ video استفاده می شود.

سه روش نمایش فیلم در سایت:

1. استفاده از تگ object:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

2. استفاده از تگ embed:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

3. استفاده از تگ video:

این تگ، خواصی شبیه به audio دارند، که بصورت زیر می توان استفاده نمود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

دیگر خواص تگ video:

1. خاصیت preload: هم در ویدئو و هم در audio استفاده می شود. در صورتی که خواستید از video استفاده کنید، از این خاصیت استفاده کنید. سه مقدار می گیرد:

None فیلم لود نمی شود مگر اینکه دکمه play زده شود. با اینکار باید فیلم اول لود شود تا بتواند اجرا شود.
Auto بصورت پیش فرض است و خودش لود می شود. خیلی کم استفاده می شود مثل تبلیغات
Metadata برنامه نویسان حرفه ای از این گزینه استفاده می کنند. یک سری اطلاعات اضافی در مورد فیلم یا صوتی که روی سایت گذاشته شده می نویسیم تا در ابتدا لود شود. سپس فیلم لود می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

1. خاصیت poster:

مخصوص ویدئو است. به جای صفحه سیاه، قبل از لود فیلم این عکس نشان داده می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نکته:

اگر بخواهیم ویدئو با هر مرورگری باز شود، باید دو فرمت mp4 و webm ویدئو مورد نظر را بصورت زیر قرار دهیم.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

sun-shine · 17 بهمن، ۱۳۹۳

جلسه نهم: تگ های دسته بندی و گروه بندی

برای این منظور دو تگ وجود دارد:

1. تگ div: برای تقسیم بندی صفحات html به صفحات کوچکتر استفاده می شود. زمانی که div می نویسیم، عناصر بعد از بستن این تگ در خط بعدی قرار می گیرند.

عملکردش شبیه به تگ p است و متن بعد از این تگ، در پاراگراف بعدی قرار می گیرد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

در صورتی که بخواهیم با استفاده از div دو ستون کنار هم ایجاد کنیم، باید از خاصیت style استفاده کنیم که مربوط به مبحث css است و در اینجا به آن پرداخته نمی شود.

مثال نمایش اطلاعات در دو ستون با استفاده از div

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

2. تگ span: برای متن استفاده می شود. مانند div نیست و عناصری که بعد از این تگ قرار می گیرند، در سطر جاری می مانند. این تگ نیز مربوط به css است.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

this is a paragraph

لیست ها

سه نوع لیست وجود دارد: 1. لیست مرتب (

)، لیست نامرتب (UL) و لیست تعریفی (

)

1. لیست مرتب:

لیستی است که ترتبی عناصر آن مهم است. ترتیب با شماره گذاری با استفاده از اعداد عربی، حروف یا اعداد رومی انجام می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خصوصیت تگ OL:

Compact: فاقد مقدار است زیرا به مرورگر می گوید جهت صرفه جویی در فضای صفحه، عناصر لیست را فشرده کند.

Type: مشخص می کند که شماره گذاری از چه حرف یا اعدادی شروع شود. اگر برابر a باشد، از حروف کوچک و اگر A باشد از حروف بزرگ برای شماره گذاری استفاده می کند. اگر type برابر i باشد، شماره گذاری با اعداد رومی کوچک و اگر I باشد اعداد رومی بزرگ و مقدار 1 اعداد معمولی انجام می شود.

Start: دارای یک مقدار عددی است و مشخص می کند که شماره گذاری با چه مقداری شروع شود. مثلا اگر type=”a” و start=”10” باشد، لیست از حرف j شروع می شود.

نکته: خصوصیت type را می توان به Li ها نیز اختصاص داد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

2. لیست نامرتب(UL):

برای عناصری که ترتیب در آنها مهم نیست، استفاده می شود و برای مشخص کردن عناصر لیست نامرتب، از علامت های دایره و مربع توپر و دایره تو خالی استفاده می کند.
این لیست نیز می توان بصورت تو درتو استفاده کرد و دایره و مربع توپر برای سطح اول لیست و دایره توخالی برای سطح دوم لیست و یک مربع برای سطح سوم استفاده می شود.
صف type در دستور UL علامت را در کل لیست مشخص می کند و صفت type در دستور Li برای تعیین صفت عناصر لیست استفاده می شود.
مقدار type می توان disk، circle و square باشد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

3. لیست تعریفی(DL):

شامل مجموعه ایی از عناصر و تعریف هریک از آنهاست. یعنی به همراه هر عنصر، تعریفی از آن نیز وجود دارد. هر عنصر لیست با

و تعاریف نیز با دستور

مشخص می شود.

بدلیل اینکه فاقد شماره یا علامت است، اغلب برای ایجاد تورفتگی به متنها استفاده می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

sun-shine · 17 بهمن، ۱۳۹۳

جلسه دهم: جداول

تعریف جدول:

جدول ساده شامل چند سطر و ستون است که محل برخورد هر سطر و ستون را خانه جدول می گویند.

سطر: سطرها با تگ باز و بسته TR مشخص می شود.

ستون: عناوین با تگ باز و بسته TH مشخص می شود.

داده های داخل جدول:مقادیر داخل سلولهای جدول با TD مشخص می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

صفات جدول:

Border: حاشیه جدول است.

Rowspan: یک مقدار عددی است که مشخص می کند که یک خانه جدول می تواند به اندازه چند سطر ارتفاع داشته باشد.

colspan: یک مقدار عددی است که مشخص می کند که یک خانه جدول می تواند به اندازه چند ستون عرض داشته باشد. ادغام چند سلول

این دو صفت برای جداولی است که پهنا و ارتفاع های متفاوتی دارند.

Width: عرض جدول به پیکسل یا درصد

Height: ارتفاع جدول

Bgcolor: رنگ جدول

Bordercolor: رنگ حاشیه جدول

Cellpading: فاصله عنوان با لبه border، فاصله متن از بالا و پایین و چپ و راست

Cellspacing: فاصله ستونها نسبت به هم

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

جدول و صفحه آرایی

جداول ابزار مناسبی برای صفحه آرایی صفحه وب می باشد. استفاده از جدول برای صفحه آرایی مستلزم بکارگیری صفت width است که عرض جدول به پیکلس یا درصد است.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

نکته مثال:

برای ایجاد سلولهای خالی جدول بهتر است از

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

خروجی مثال:

دیگر امکانات جدول:

امکانات زیر برای موتورهای جستجو مفید است.

: یک یا جند گروه از سطرها، ممکن است حاوی بخش راس باشند که با این تگ مشخص می شود. در واقع قسمت head جدول را مشخص می کند.

: یک یا چند گروه از سطرها، ممکن است حاوی بخش زیرنویس باشند که با این تگ مشخص می شود. : حاوی بخش بدنه می باشد.

نکته:

خصوصیت این تگ ها اینست که مثلا اگر thead را آخر بیاوریم، خود مرورگر متوجه می شود که head است و اول جدول می گذارد.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

sun-shine · 17 بهمن، ۱۳۹۳

جلسه یازدهم: فرم ها و پرسشنامه ها:

فرم و پرسشنامه ابزاری برای تعامل با کاربران است. مانند فرم نظرخواهی، فرم دریافت سفارش و ....

برای ایجاد فرم از تگ باز و بسته form استفاده شود.

صفات فرم:

صفت action: چگونگی پردازش فرم را با صفت action مشخص می کنیم. صفت action برابر آدرس url برنامه ایی است که داده های فرم را پردازش می کند. در صورتی که نخواهیم به جایی ارسال شود از علامت # استفاده می کنیم.

صفت method: مشخص می کند که چگونه فرم ها به آدرسی که توسط صفت action تعیین شده، ارسال شود. این صفت دو مقدار دارد : 1. Get که اطلاعات در address bar مشخص است. 2. Post: که اطلاعات بصورت مخفی ارسال می شود.

صفت name: برای نامگذاری فرم استفاده می شود.

کنترلهای فرم:

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

1.کنترلهای متنی (تگ بدون فرزند input)

فیلدهای فرم است که طول آن برابر یک خط است مثل نام افراد را دریافت می کند. صفات آن عبارتند از :

· صفت Type: مقدار صفت type آن را برابر با text قرار می دهیم که نشاندهنده کنترل متنی است.

· صفت size: طول فیلد را مشخص می کند. البته کاربر می تواند بیش از این تعداد کاراکتر نیز وارد کند.

· صفت maxlength: حداکثر طول کاراکتر را مشخص می کند و بیش از این مقدار نمی تواند کاربر کاراکتر وارد کند.

· صفت value: متن پیش فرض این فیلد است و هنگام ظاهر شدن فرم در آن فیلد قرار دارد و بعنوان راهنما استفاده می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

نکته: نام فیلدها باید منحصر به فرد باشند

2. فیلد رمز در فرم

مانند فیلد کنترل متن یک سطری است با این تفاوت که داده نمایش داده نمی شود و به جای کاراکتر ستاره قرار می گیرد. صفات آن مانند کنترل متن است ولی صفت type آن مساوی با password است.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

3. فیلد متن چند سطری (تگ textarea)

همانند فیلد متنی می توان اندازه فیلد و مقدار پیش فرض تعیین نمود. Rows برای تعداد سطرهای متن و cols تعداد ستون های آن استفاده می شود. متن پیش فرض را باید داخل تگ باز و بسته textarea نوشت.

صفت readonly باعث می شود که فقط فیلد برای خواندن باشد و نتوان داخل آن چیزی نوشت.

مثال:

متنی با 5 سطر و 80 ستون و با متن پیش فرض "لطفا اینجا را پر کنید"

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

4. منوهای بازشونده (تگ select)

منوهای باز شونده به کاربر اجازه می دهد که یکی از چند گزینه را انتخاب نماید. یکی از امتیازات بزرگ منوهای باز شونده اینست که در آن واحد فقط یک گزینه آن مشخص است و سایر گزینه ها مخفی هستند و فضای زیادی در صفحه نمی گیرد.

برای ایجاد منوی باز شونده از تگ باز و بسته select استفاده می شود. تگ option برای مشخص کردن گزینه های منو می باشد. صف value مقداری است که هنگام انتخاب آن گزینه، این مقدار ارسال می شود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

5. لیستهای لغزنده

دستور select می تواند شامل صفت size باشد که تعداد عناصری را که می توانند در آن واحد در صفحه نمایش داده شود را مشخص می کند. پیش فرض آن صفر است.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

6. کادرهای کنترلی

اگر تعداد گزینه هایی که با یکدیگر تضاد ندارند، باید انتخاب شود، بهتر است از کادر کنترلی استفاده شود. کادر کنترلی می تواند on یا off باشد.

برای ایجاد آن از تگ input استفاده می کنیم و مقدار صفت type آن را برابر checkbox قرار می دهیم. صفت checked تعیین می کند که بصورت پیش فرض یک کادر کنترلی فعال باشد. صفت value مقداری که باید به جای مقدار فرضی انتقال داده شود را مشخص می کند.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

7. دکمه های رادیویی

شبیه دکمه های کنترلی است اما فقط یک گزینه را می توان انتخاب نمود. برای ایجاد آن از تگ input استفاده می کنیم و type آنرا برابر radio قرار می دهیم. انتخاب نام برای دکمه های رادیویی اهمیت زیادی دارد زیرا کنترلهایی که عملکرد یکسانی دارند را با هم دسته بندی می کند.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

8. دکمه های reset و submit

زمانی که کاربر فرم را پر کرد باید بتواند آن را به سرور ارسال کند. صفت type دستور input می تواند دو مقدار reset و submit را بگیرد که reset به کاربر اجازه می دهد تا فرم را پاک کرده و با مقدار اولیه پر شود و مقدار submit موجب می شود تا محتویات فرم به آدرسی که در صفت action مشخص شده است ارسال گردد.

صفت name نام دکمه و صفت value مقدار آن را مشخص می کند.

مثال::

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

9. استفاده از دکمه های تصویری به جای submit

در صورتی که صفت type مربوط به دستور input را برابر image قرار دهیم می توانیم از دکمه تصویری برای تحویل فرم استفاده کنیم. این دکمه نه تنها فرم را تحویل می دهد بلکه مختصات جایی از تصویر را که کاربر کلیک کرده ارسال می کند. تصویر نیز با صفت src مشخص می شود و اغلب صفاتی که برای تگ بکار می رود برای تگ input نیز بکار می رود.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

10. ارسال فایل

برای ارسال فایل، از تگ input استفاده کرده و مقدار صفت type را برابر با file قرار می دهیم.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

خروجی مثال:

پانوشت:

توی این تاپیک سعی شد تا مطالب اصلی در زبان HTML گفته شود. امیدوارم مفید واقع شده باشه و لطفا دوستان مطالب تکمیلی را ادامه بدند. ممنون

afrodeyt · 29 بهمن، ۱۳۹۳

سلام ببخش وسط اموزش اومدم میشه بیشتر در مورد محیطی که باید این کدها توش بنویسیم بگی؟؟

**Imaaan** · 29 بهمن، ۱۳۹۳

سلام ببخش وسط اموزش اومدم میشه بیشتر در مورد محیطی که باید این کدها توش بنویسیم بگی؟؟

سلام

توی پست چهارم گفتن که:

1. از نظر من (استادم، خوشبختم ) بهترین نرم افزاری که برای نوشتن html می تونیم استفاده کنیم، ++notepad هستش، به خاطر اینکه مثل notepad همه کد به رنگ مشکی نیست یعنی در notepad++ تگ ها و خصوصیات و ... هر کدوم یه رنگ هستش. از طرفی هم مثل ویژوال استادیو و Dreamweaver نیست که خودش فرمت آماده داشته باشه و خودش تگ پایانو بزنه. اینجوری تنبل هم نمیشیم

2. برای دیدن سایتی که طراحی و ذخیره کردیم، فقط کافیه که بروی اون دابل کلیک کنید.

3. برای تغییر سایتی که قبلا نوشته اید، کافیست که روی فایل آن راست کلیک و open with کرده و با نرم افزار مورد نظر باز کنیم.

afrodeyt · 29 بهمن، ۱۳۹۳

سلام
توی پست چهارم گفتن که:

خوندمش اما متوجه نشدم

**Imaaan** · 29 بهمن، ۱۳۹۳

خوندمش اما متوجه نشدم

شما توی Notepad هم می تونی این کدا رو بنویسی و فایل رو با پسوند html ذخیره کنی، ++Notepad هم فقط کد رو رنگی می کنی، این تاپیک رو ببین:

[h=1]++ Notepad[/h]

afrodeyt · 1 اسفند، ۱۳۹۳

ممنونم

sun-shine · 12 فروردین، ۱۳۹۴

آموزش CSS در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند. Css اصلی ترین بخش برای زیبا کردن سایت است.

با استفاده از CSS می توان تگ های HTML را براحتی استایل های مورد نظر در آورد، تعیین رنگ پس زمینه، تعیین مکان و عرض و طول، فرمت دهی و font و ... همگی کارهایی است که با CSS می توان براحتی انجام داد.

به این منظور، در تاپیک آموزش CSS، به معرفی و یادگیری CSS می پردازیم.

**Just Mechanic** · 13 فروردین، ۱۳۹۴

اول از همه یه تشکر ویژه دارم از خانوم sun-shine بابت این تاپیک آموزش خوب و عالیشون.

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

پست #4 یه غلظ تایپی در بخش ایجاد خط (تگ HR>) درقسمت کد نویسی وجود داره که به جای تایپ حرف h حرف b تایپ شده .حیفم اومد نگم چون این مطلب بی نقص هستش اینم اصلاح بشه عالیه.

حال سوال خودم.

در پست 7 map رو توضیح دادید متوجه شدم سایز تصویر شما با سایزی که در سایت لود شده یکی نیست.

حالا این مشکلی برای پیدا کردن موقعیت و جانمایی هابوجود نمیاره؟

**Just Mechanic** · 13 فروردین، ۱۳۹۴

سلام مجدد

میخوام یه سایتی رو معرفی کنم که کدهای اچ تی ام ال رو توش وارد میکنی و تو یه کادر دیگه نتیجه کارت رو بهت نشون میده

واسه کسایی که میخوان شروع کنن عالی هستش

سریع تغییرات رو میبینن

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

ورود

آموزش یادگیری html

ارسال های توصیه شده

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

salam

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

afrodeyt 79

لینک به دیدگاه

Imaaan 17,059

لینک به دیدگاه

afrodeyt 79

لینک به دیدگاه

Imaaan 17,059

لینک به دیدگاه

afrodeyt 79

لینک به دیدگاه

sun-shine 7,672

لینک به دیدگاه

Just Mechanic 27,854

لینک به دیدگاه

Just Mechanic 27,854

لینک به دیدگاه

به گفتگو بپیوندید

سایت نواندیشان

انجمن نواندیشان

فعالیت ها

جریان فعالیت های من

کسب درآمد کنید