آموزش html :: آموزش html5

۷ مطلب با کلمه‌ی کلیدی «آموزش html» ثبت شده است

آموزش html5 جلسه ی هفتم

🌟 2 ) صفت عمومی class : زبان html5 این قابلیت را دارد که تکنولوژی های متفاوتی را به آن ضمیمه کنیم تا هم زیبایی صفحات وب ما بیشتر شود و هم پویایی و تعاملی بودن آن .

دو مورد از تکنولوژی های مهم و پرکاربرد ، css و javascript می باشند . معمولا این تکنولوژی ها را در فایل خارجی ای می نویسند و آن فایل خارجی را به فایل اصلی html لینک و متصل می کنند تا کدهای آنها برای المان های html اجرا شود .

برای اینکه بتوانیم به المان های html ، ویژگی هایی جدیدی را با استفاده از css و javascript اختصاص دهیم ، باید یک نامی به المان مان بدهیم تا آن نام را در فایل های خارجی استفاده کنیم . این نام با استفاده از صفت class یا id قابل اعمال است .

مثلا فرض کنید می خواهیم با استفاده از فایل خارجی css ، رنگ متن داخل المان body را عوض کنیم .

برای این کار ابتدا یک نام کلاس به المان body نسبت می دهیم . یا با استفاده از صفت class یا id ( در اینجا class )

<body class="style" >hello world!</body>

حالا در فایل css ، با استفاده از این نام ، کد مربوط به تغییر رنگ را می نویسیم تا اجرا گردد .

.style{
color:red;
}

همانطور که می بینید ، در کنار نام کلاس ، یک نقطه آمده است که نشان می دهد یک کلاس است . در id به جای نقطه ، علامت # می آید .

مثال عملی :

تغییر رنگ متن hello world در المان body ، با استفاده از css :

1 ) ابتدا notepad را باز کنید .

2 ) کدهای زیر را در این فایل وارد کنید و با یک نام دلخواه و پسوند html. و انکود utf-8 ذخیره کنید .

<!doctype html>
<html>
<link rel="stylesheet" href="new1.css" />
<head></head>
<body class="style">
hello world!
</body>
</html>

در مورد تگ لینک فعلا فقط این را بدانید که برای اینکه فایل خارجی css را به این فایل html لینک یا متصل کنیم ، لازم است از این تگ استفاده کنیم . در داخل صفت href ، باید آدرس فایل خارجی را وارد کنیم .

3 ) یک فایل جدید ایجاد کنید . قطعه کد زیر را در آن وارد کنید و با یک نام دلخواه و پسوند css. و انکود utf-8 ، در همان محل فایل html ذخیره کنید .

.style {

color:red;

}

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

4 ) حالا می توانید فایل html اول را با مرورگر باز کنید و ببینید که متن شما با رنگ قرمز نشان داده شده است .

نکته : آموزش css به صورت کامل بعد از آموزش html5 خواهد آمد . پس لازم نیست هم اکنون سراغ یادگیری آن بروید . مثال بالا فقط برای درک مفهوم کلاس بود .

🌟 صفت عمومی class ، توسط همه ی مرورگرها پشتیبانی می شود .

🌟 می توانیم برای یک المان ، حتی چند نام کلاس استفاده کنیم . برای این کار کافیست میان نام ها یک فاصله بیندازیم .

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

🌟 در هنگام تعریف نام کلاس به موارد زیر توجه کنید :

1 ) نام کلاس نباید با عدد شروع شود ( فقط حرف )

2 ) باقی کاراکترها می تواند حروف ، اعداد و دو کاراکتر خط تیره (-) و آندرلاین (_) باشد .

3 ) این نام به حروف کوچک و بزرگ حساس نیست . چون در html5 ، هیچ چیزی به حروف کوچک و بزرگ حساس نیست .

html5 is case-insensitive !

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

۱۸ آذر ۹۴ ، ۱۰:۴۸ ۰ نظر

html5

آموزش html5 جلسه ی ششم

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

🌟 تگ html : این تگ ، تگ مادر و ریشه ی پرونده ی html می باشد و همه ی تگ ها و المان ها درون آن قرار می گیرند . از نظر المان ، المان html ، المان نوع اول می باشد . یعنی هم تگ آغازی دارد هم محتوا و هم تگ پایانی

<html>

elements & content

</html>

🌟 تگ html به مرورگر میفهماند که این فایل ، یک فایل html می باشد .

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

🌟 بعد از درک و یادگیری تگ html و اینکه چه کاری می کند ، باید به سراغ صفت های این تگ برویم . چنانچه قبلا ذکر شد ، دو نوع صفت می شود برای آن در نظر گرفت . نوع اول صفات عمومی (global) که شامل 16 صفت است و نوع دوم صفات خصوصی که دو مورد می باشد .

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

🌟 صفت عمومی accesskey :

اگر بخواهیم المان ما در صفحه با استفاده از کلید های میانبر ، active یا focus شوند ، از این صفت استفاده می کنیم . مقداری که این صفت می گیرد کلید میانبر می باشد که معمولا بعد از داشتن کلید alt زده می شود . در مورد کلید های میانبر مثلا فرض کنید که یک لینکی در صفحه داریم . اگر بخواهیم روی لینک کلیک کنیم دو راه داریم . یکی اینکه با موس روی آن بیاییم و کلیک کنیم و دیگری اینکه از کلید های میانبر استفاده کنیم . مثلا alt+s را بزنیم تا لینک فعال شود .

برای این مثال داریم :

<a href="" accesskey="s" >content</a>

🌟 کلید میانبر برای سایر مرورگرها alt + accesskey است اما برای firefox به صورت alt+ shift + accesskey می باشد .

🌟 صفت accesskey توسط همه ی مرورگرها پشتیبانی میشود .

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

۱۷ آذر ۹۴ ، ۱۷:۵۹ ۰ نظر

html5

آموزش html5 جلسه ی پنجم

🌟 تا الآن یاد گرفتیم که با استفاده از تگ ها می توانیم محتوا را نشانه گذاری کنیم و ویژگی خاصی به آنها دهیم . اما html ، امکان اضافه کردن تغییراتی دیگر به محتوای تگ را برای ما فراهم کرده است که استفاده از صفت یا attribute می باشد .

🌟 attribute یا صفت : اطلاعاتی که در تگ آغازی وارد می شود و امکانات جدیدی به تگ و محتوا اضافه می کند .

🌟 syntax صفات تگ به صورت زیر است که name ، نام آن صفت ، و value ، مقدار آن می باشد .

name = "value"

<tagname name="value" >content</tagname>

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

<a href="آدرس مقصد" >content</a>

اما بعضی از صفات ، وجودشان ضروری نیست . یعنی می توانیم بیاوریم و یا نیاوریم . مثل صفت title برای همین تگ a که باعث می شود وقتی ماوس روی متن لینک رود یک متنی به صورت tooltip ظاهر شود .

<a href="آدرس مقصد" title="متنی که نمایش داده می شود">content</a>

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

🌟 پس از این منظر ، دو نوع صفت داریم که یکی صفاتی است که وجودشان برای تگ یا المان ضروری است (required) و دیگری صفاتی است که وجودشان برای تگ ضروری نیست (optional) .

🌟 اما از منظری دیگر نیز می توان صفات را به دو بخش تقسیم کرد :

1 - صفات کلی یا جهانی (global) : این صفات می توانند در همه ی المان ها حاضر شوند . منتها ممکن است کاربردشان در بعضی تگ ها زیاد ، در بعضی کم و شاید در بعضی بی کاربرد باشد . صفات جهانی مثل class و id

2 - صفات خاص و محلی (local) : این صفات فقط می توانند در یک یا بیش از یک تگ استفاده شوند و اصولا برای آن تگ یا تگ ها به وجود آمده است و حق نداریم در همه ی تگها ، آنها را به کار ببریم . مثل href برای تگ a . البته شاید یک صفت در دو یا چند تگ به کار رود ولی به این معنا نیست که هر جا بخواهیم بتوانیم آنها را استفاده کنیم . یعنی global نیستند . مثل صفت src که هم در تگ img و هم در تگ script استفاده می شود .

🌟 توصیه می شود در هنگام نوشتن صفات تگ ، از حروف کوچک استفاده کنید (lower case)

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

۱۷ آذر ۹۴ ، ۱۲:۱۰ ۰ نظر

html5

آموزش html5 جلسه ی چهارم

🌟 المان : پرونده های html از المان ها ساخته می شوند . المان ها دو نوع اند :

1- نوع اول با یک تگ شروع می شوند بعد محتوا می آید و در آخر تگ پایانی می آید . مثال زیر یک نمونه المان نوع اول است :

<body> hello world </body>

2- نوع دوم فقط یک تگ دارد و محتوا ندارد . مثل تگ <br>

🌟 پس دیدیم تگهایی که محتوا ندارند خودشان یک المان محسوب می شوند و تگهایی که محتوا دارند با محتوایشان تشکیل یک المان می دهند .

🌟 در کد زیر میخواهیم تعداد المان ها را مشخص کنیم :

<html>

<body>

<p></p>

</body>

</html>

اگر با دقت نگاه کنیم می بینیم که 5 المان داریم که عبارتند از html و head و body و p و h1

🌟 ساختار زبان html به صورت پدر فرزندی یا تو در تو می باشد . یعنی بعضی المان ها درون بعضی دیگر به کار می روند . مثلا در کد بالا ، المان های p و h1 درون المان body قرار گرفتند .

🌟 المان های html و head و body ، مهمترین المان های فایل html هستند . المان html ، پدر همه ی المان ها و ریشه ی پرونده ی html است . المان head ، حاوی مشخصات صفحه است و المان body حاوی content صفحه است که در خروجی نمایش داده می شود .

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

🌟 المان های نوع دوم را المان های خالی یا empty element نیز می نامند .

🌟 تگ های html به حروف کوچک و بزرگ حساس نیستند ولی بهتر این است که آنها را با حروف کوچک بنویسیم

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.

۱۶ آذر ۹۴ ، ۲۳:۴۹ ۰ نظر

html5

آموزش html5 جلسه ی سوم

🌟 چنانچه ذکر شد ، برای نوشتن کدهای html نیاز به یک ویرایشگر متن داریم

🌟   ویرایشگرهای متن دو نوع اند :

1- ساده مثل    sublime text ،   notepad و ...

2- پیشرفته مثل dream weaver ، htmlpad و ...

🌟   برای یادگیری html توصیه می شود از ادیتور ساده و قوی ++notepad استفاده شود .

🌟   به وجود آوردن اولین صفحه ی وب با notepad :

برای به وجود آوردن اولین صفحه وب که پیام hello world را نشان دهد ، مراحل زیر را به ترتیب انجام دهید :

1   بازکردن notepad

2 نوشتن ساختار اصلی html

<!doctype html>

<html>

     <head>
         <title></title>
    </head>

    <body>
    </body>

   </html>

3 نوشتن hello world در میان تگ body

<!doctype html>

<html>

     <head>
         <title></title>
    </head>

    <body>

           hello world

    </body>

   </html>

4   انتخاب file از منو و بعد save as

5   نوشتن نام برای فایل و قرار دادن پسوند htm. یا html. برای آن مثلا example.html

6   انتخاب utf-8 به عنوان encoding

7   ذخیره کردن در مکان مورد نظر

8   بازکردن فایل ذخیره شده با مرورگر

🌷 اکنون می بینید که پیام hello world در صفحه نمایان شد و شما توانستید اولین صفحه وب خود را بسازید

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید

۱۶ آذر ۹۴ ، ۲۲:۴۵ ۰ نظر

html5

آموزش htm5 جلسه ی دوم

🌟 مرورگر وظیفه ی خواندن و اجرا کردن پرونده های html را دارد . یادمان باشد که مرورگر ، تگ ها را نشان نمی دهد بلکه فقط محتوا را آن هم بر حسب خاصیت تگ ها نشان می دهد .

🌟 مهم ترین مرورگرهایی که می توانیم از آنها برای خروجی گرفتن از فایل های html استفاده کنیم عبارتند از :

firefox - chrome - IE - safari

🌟 ساختار کلی و اصلی فایل html به صورت زیر است

<!doctype html>

<html>

     <head>
         <title></title>
    </head>

    <body>
    </body>

   </html>

🌟   اولین خط ، اعلان ورژن html است . مثلا در این اعلان به مرورگر می فهمانیم که نسخه html ما نسخه ی html5 می باشد .

🌟   تگ html مادر و ریشه ی همه ی تگ هاست و همه ی تگ ها در آن قرار می گیرند .

🌟   تگ html دو فرزند دارد . یکی تگ head که اطلاعات مربوط به صفحه در آن می آید و این اطلاعات در بدنه ی سفید مرورگر نشان داده نمی شوند . دومی تگ body که تمام آنچه در بدنه ی مرورگر نشان داده می شود ، در آن قرار می گیرد . پس کل محتوا در تگ body قرار می گیرد .

🌟   اعلان doctype : همانطور که گفتیم با نوشتن این اعلان ، به مرورگر می فهمانیم که از چه ورژنی از html استفاده می کنیم تا در ترجمه ی آن توسط مرورگر دچار مشکل نشویم .

🌟   برای اینکه مرورگر بتواند به درستی یک فایل را اجرا کند باید دو چیز آن مشخص باشد :

1- نوع آن : با پسوند فایل و شروع ترجمه می فهمد چه فایلی است .

2- ورژن آن : در فایل html با قرار دادن اعلان doctype ، ورژن html را به مرورگر می فهمانیم .

🌟   اعلان doctype به حروف کوچک و بزرگ حساس نیست . یعنی case sensitive نمی باشد .

🌟   اعلان doctype باید در اولین خط و بالای تگ html قرار گیرد . یعنی قبل از اینکه مرورگر با هر تگی مواجه شود ابتدا باید این اعلان را ببیند .

🌟   اعلان doctype ، یک تگ نیست بلکه مشخص کننده ورژن html است .

🌟   اعلان doctype توسط همه ی مرورگر ها پشتیبانی می شود .

🌟   روند تکاملی زبان html :

🔹 html   1991

🔹 html 2   1995

🔹 html3.2   1997

🔹 html4.01   1999

🔹 xhtml   2000

🔹 html5 2014

🌟 اعلان doctype برای ورژن html4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

🌟 اعلان doctype برای ورژن xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

🌟 اعلان doctype برای ورژن html5

<!DOCTYPE HTML>

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید

۱۶ آذر ۹۴ ، ۲۱:۲۳ ۰ نظر

html5

آموزش html5 جلسه اول

🌟   زبان html ، یک زبان نشانه گذاری یا markup برای توصیف صفحات وب است .

🌟   کلمه ی html ، خلاصه شده ی عبارت hyper text markup language به معنای زبان نشانه گذاری فرامتن می باشد .

🌟   زبان html حاوی تگ های نشانه گذاری می باشد که به وسیله ی این تگ ها ، محتوای خود را نشانه گذاری می کنیم .

🌟   هر تگ html محتوا را به سبک خاصی توصیف می کند . مثلا یکی محتوا را تبدیل به لینک (a) می کند ، دیگری تبدیل به پاراگراف (p) و ... .

🌟   برای نوشتن کدهای html نیاز به یک ادیتور متن مثل notepad ویندوز داریم . همچنین فایل ساخته شده html را توسط مرورگر اجرا
می کنیم . یعنی مرورگر وظیفه اجرای کدهای html را دارد .

🌟   تگ html در واقع یک کلمه کلیدی است که بین دو علامت > و < قرار می گیرد . این کلمه کلیدی برای html شناخته شده است و کار خاصی انجام می دهد . لذا نباید از کلمات دلخواه استفاده کنیم .

🌟   نمونه ای از تگ ها را در زیر می بینید

🌟 بر حسب اینکه تگ ما محتوا بگیرد یا نگیرد ، تگ ها را به دو دسته تقسیم می کنیم :

1- تگ هایی که محتوا می گیرند . مثل تگ پاراگراف (p) ، تگ لینک (a) و ... . در این حالت syntax کلی به صورت زیر است :

<tagname>content</tagname>

🔹 در این مورد هم تگ آغازی داریم و هم تگ پایانی و محتوا در وسط ایندو قرار می گیرند .

🔹 در این حالت ، به مجموع تگ آغازی ، محتوا و تگ پایانی ، یک المان (element) گفته می شود .

2- تگ هایی که محتوا نمی گیرند و فقط کار خاصی انجام می دهند مثل تگ خط شکن (br) و تگ عکس (img) . این تگ ها چون محتوایی ندارند ، نیاز ندارند که تگ انتهایی داشته باشند . در این حالت syntax کلی به صورت زیر است :

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید

۱۶ آذر ۹۴ ، ۲۰:۱۰ ۰ نظر

html5

مرجع کامل زبان html5

۷ مطلب با کلمه‌ی کلیدی «آموزش html» ثبت شده است