اچ تی ام ال – وبسایت آموزشی وب تی ام ال – webtml https://webtml.ir وب تی ام ال ، webtml ، ویدئوی آموزشی وب، مقالات آموزشی طراحی سایت Mon, 29 Aug 2022 10:30:32 +0430 fa-IR hourly 1 https://webtml.ir/wp-content/uploads/2016/07/favicon.png اچ تی ام ال – وبسایت آموزشی وب تی ام ال – webtml https://webtml.ir 32 32 ویرایشگرهای HTML – جلسه دو https://webtml.ir/html-editors/ https://webtml.ir/html-editors/#respond Mon, 09 Dec 2019 20:36:49 +0000 https://webtml.ir/?p=3639 سلام عرض می کنم خدمت دوستان عزیز در جلسه قبل، مقدماتی را راجع به HTML5 خدمت شما ارائه کردیم. در این درس قصد داریم نحوه نوشتن کدهای HTML از طریق text editor ها را به شما آموزش دهیم. برای این کار، وارد وب سایت w3schools.com می شویم و از آموزش اچ تی ام ال، منوی […]

نوشته ویرایشگرهای HTML – جلسه دو اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]>

سلام عرض می کنم خدمت دوستان عزیز
در جلسه قبل، مقدماتی را راجع به HTML5 خدمت شما ارائه کردیم. در این درس قصد داریم نحوه نوشتن کدهای HTML از طریق text editor ها را به شما آموزش دهیم.
برای این کار، وارد وب سایت w3schools.com می شویم و از آموزش اچ تی ام ال، منوی سمت چپ، HTML Editors را انتخاب می کنیم.

نوشتن HTML توسط Notepad یا TextEdit

عنوانی که برای این بخش انتخاب کرده است؛ Write HTML Using Notepad or TextEdit می باشد.
Notepad و TextEdit نرم افزارهایی هستند که به ترتیب بر روی سیستم عامل های ویندوز و مکینتاش موجود می باشند.
توضیحاتی که در اینجا ارائه شده است را خدمت شما عرض می کنم:

  • صفحات وب می توانند از طریق HTML Editor های حرفه ای ایجاد و تغییر داده شوند.
  • اگرچه برای آموزش HTML، پیشنهاد می کنیم که از ویرایشگرهای ساده مثل Notepad یا TextEdit استفاده کنید.
  • به این دلیل که در این ویرایشگرها شما مجبورید که تمام کدها را خودتان بنویسید و این باعث می شود که کدها، خیلی بهتر در ذهن شما بماند.

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

مراحل ایجاد فایل HTML

باز کردن notepad

برای باز کردن نوت پد در سیستم عامل های ۸ و بالاتر، از منوی Start، نوت پد را جستجو کنید و این نرم افزار را باز کنید.

اما در ویندوز ۷ شما باید این مسیر را دنبال کنید:

Start > Programs > Accessories > Notepad

باز کردن textedit در مکینتاش

Finder > Applications > TextEditor

در اینجا توضیح داده است: برای این که بتوانیم کدهای اچ تی ام ال را در این نرم افزار بنویسیم، باید یک سری تنظیمات را انجام دهیم که به صورت زیر است:

Preferences > Format و از آنجا Plain Text را انتخاب می کنیم و بعد از آن در پائین بخش Open and Save روی باکس Display HTML files as HTML code instead of formatted text کلیک می کنیم و بعد از آن نرم افزار را باز می کنیم و کد نویسی می نماییم.

سیستم عامل من ویندوز است؛ توضیحاتی که ارائه شد برای دوستانی است که از سیستم عامل مکینتاش استفاده می کنند.

 نحوه نوشتن کدهای HTML

طبق توضیحات، NotePad را باز کنید.
میتوانیم کدی که در وب سایت است را copy و در نرم افزار paste کنیم یا این که خودمان کد را بنویسیم.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

html

ذخیره کردن فایل HTML

بعد از این که کد را در نرم افزار paste کردیم، از منوی file گزینه save را انتخاب می کنیم و در مکان دلخواه، فایل را ذخیره می کنیم.

در بخش File Name اسم فایل را می نویسیم (اسم دلخواه) و بعد از آن پسوند فایل اچ تی ام ال که می تواند: htm یا html باشد را می نویسیم.

تفاوتی بین این دو نیست، من پسوند html را می نویسم.

در بخش encoding باید UTF-8 را انتخاب کنیم به این خاطر که اگر متن فارسی در فایل نوشتیم، به درستی نمایش داده شود.

فایل را ذخیره می کنیم و به پوشه ای که فایل را ذخیره کرده بودیم، می رویم و فایل را از طریق یک مرورگر باز می کنیم.
save file

باز کردن فایل HTML

اگر آیکن فایل، شکل مرورگر داشت، فایل خودبخود در یک مرورگر باز می شود. در غیر این صورت می توانید کلیک راست کنید و از گزینه open with یک مرورگر را انتخاب کنید مثل کروم یا فایرفاکس و …

من فایل را با دوبار کلیک باز می کنم. نتیجه کد را در مرورگر مشاهده می کنید.

بررسی فایل HTML

نرم افزار نوت پد را باز می کنیم و می بینیم که کد ما بدنه فایل HTML را داراست. و در بخش body که درواقع بدنه فایل HTML را تشکیل میدهد یک تگ h1 داریم که برای header ها و در واقع عنوان ها استفاده می شود و سایز بزرگ تری دارد.

تگ بعدی، تگ p است؛ که برای پاراگراف های متن استفاده می شود. که نحوه نمایش آن را در مرورگر می بینیم.

به وبسایت w3schools.com و ادامه آموزش برمی گردیم:

در مرحله ۳ نحوه ذخیره کرده فایل اچ تی ام را توضیح داده است و مرحله ۴ در واقع همان نمایش فایل است؛ که ما توضیح دادیم.

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

ممنون از همراهی شما

نوشته ویرایشگرهای HTML – جلسه دو اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/html-editors/feed/ 0 آموزش HTML5 جلسه چهارم https://webtml.ir/%d8%aa%da%af-img-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%da%86%d9%87%d8%a7%d8%b1%d9%85/ https://webtml.ir/%d8%aa%da%af-img-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%da%86%d9%87%d8%a7%d8%b1%d9%85/#respond Tue, 12 Sep 2017 02:21:08 +0000 http://webtml.ir/?p=2047 جلسه چهارم را به بحث در مورد Attribute ها و تگ img اختصاص میدهیم. attribute ها (خصوصیات) attribute ها صفت یا ویژگی خاصی را برای تگ تعریف می کنند. و می توانند یکسری اطلاعات به آن ها افزوده یا آن ها را اصلاح کنند و همیشه در تگ آغازین المان ها می آیند. بیشتر خصوصیات دارای […]

نوشته آموزش HTML5 جلسه چهارم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> جلسه چهارم را به بحث در مورد Attribute ها و تگ img اختصاص میدهیم.

attribute ها (خصوصیات)

attribute ها صفت یا ویژگی خاصی را برای تگ تعریف می کنند. و می توانند یکسری اطلاعات به آن ها افزوده یا آن ها را اصلاح کنند و همیشه در تگ آغازین المان ها می آیند. بیشتر خصوصیات دارای یک مقدار (value) هستند. توجه کنید که حتماً مقدار بین علامت کوتیشن (" ") باشد و مابین attribute و value علامت مساوی قرار گیرد. value مقدار و نوع خصوصیت تگ را تعیین می کند. به مثال زیر نگاه کنید:

<p align="center">
This text is aligned to center
</p>

در مثال بالا align یک attribute و center مقدار آن است. خاصیت align ترازبندی متن یا المان در جهت افقی را تعیین می کند. که شامل مقادیر center ،right و left می باشد. نتیجه کد بالا را در تصویر زیر می بینیم که متن را به وسط صفحه انتقال داده است:

align

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

<html>
<head>
<title> Attributes </title>
</head>
<body>
<p align="center"> This is a text <br>
<hr width="10%" align="right" >   This is also a text.
</p>
</body>
</html>

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

align

خاصیت valign ترازبندی متن را در جهت عمودی تعیین می کند که دارای مقادیر middle ،top و bottom می باشد.

خصوصیات مربوط به اندازه و سایز المان ها (Attribute Measurements)

بطور مثال ما می توانیم پهنای خط افقی که با استفاده از تگ <hr> رسم می کنیم را تغییر دهیم. این کار به کمک خاصیت width امکان پذیر است.

<hr width="50px">

پهنای المان هم توسط پیکسل (px) و هم توسط درصد (%) تعیین می شود:

<hr width="50%">

تگ img

برای قرار دادن یک تصویر یا عکس در صفحه از تگ img استفاده می کنیم. محتوای این المان فقط attributeها هستند، این المان تگ پایانی ندارد. آدرس تصویر (URL=Uniform Resource Locator) توسط خاصیت src که مخفف source می باشد، تعیین می شود. تگ img در HTML به صورت زیر نوشته می شود:

<img src="image.jpg" alt="توضیحات" >

دقت کنید که عکس موردنظر که قصد قرار دادن آن در صفحه را داریم حتما باید در همان پوشه ای باشد که فایل html را ذخیره کردیم. مقدار src که بین علامت کوتیشن (" ") آمده است، آدرس عکس به همراه نام آن می باشد. با کد زیر می توانیم عکس دلخواه خود را در صفحه بیاوریم:

<html>
<head>
<title> first page </title>
</head>
<body>
<img src="tree.jpg" alt="عکسی زیبا از درخت" >
</body>
</html>

تگ img

توجه داشته باشید که برای قرار دادن عکس در سایت خود طوری که بقیه افراد قادر به دیدن آن باشند باید فایل عکس را در یک سرور آپلود کرده لینکی که سرور می دهد را در قسمت src قرار دهیم. در مواقعی که به هر دلیل (مثلاً مشکل داشتن سرور یا عدم پشتیبانی مرورگر)، عکس نمایش داده نشود عبارتی که در خصوصیت alt می نویسیم، نمایش داده می شود. که این عبارت می تواند توضیحی در مورد عکس باشد یا اینکه دلیل نمایش ندادن عکس را بیان کند. دقت کنید که وجود خصوصیت alt الزامی است.

برای تغییر اندازه عکس از خصوصیات width و height استفاده می کنیم. که این خصوصیات با پیکسل و درصد تعیین می شوند.

<html>
<head>
<title> first page </title>
</head>
<body>
<img src="tre.jpg" height="150px" width="150px" alt="توضیحات" >
<!-- یا -->
<img src="tre.jpg" height="150%" width="150%" alt="توضیحات" >
</body>
</html>

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

به طور پیش فرض عکس بدون کادر در صفحه قرار می گیرد. برای قرار دادن کادر اطراف عکس از خصوصیت border در تگ img استفاده می کنیم. هرچه عدد مربوط به ضخامت کادر بشتر باشد، کادر ضخیم تر می شود.

<img src="tree.jpg" height="150px" width="150px" border="1px" alt="توضیحات" >

البته در نسخه های ۹ و پایین تر از مرورگر Internet Explorer بدون تعریف خصوصیت border، عکس با یک حاشیه نمایش داده می شد.

با ادامه توضیحات ما در مورد HTML5 در جلسات بعدی همراه باشید.

نوشته آموزش HTML5 جلسه چهارم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/%d8%aa%da%af-img-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%da%86%d9%87%d8%a7%d8%b1%d9%85/feed/ 0 آموزش HTML5 جلسه سوم https://webtml.ir/%d8%b9%d9%86%d9%88%d8%a7%d9%86-%d8%af%d8%b1-html/ https://webtml.ir/%d8%b9%d9%86%d9%88%d8%a7%d9%86-%d8%af%d8%b1-html/#respond Sat, 02 Sep 2017 16:50:11 +0000 http://webtml.ir/?p=2034 در این جلسه، عنوان در HTML ، کاربرد تگ <hr> و کامنت گذاری را توضیح می دهیم. عنوان در HTML : HTML شامل شش سطح از عنوان گذاری می باشد که بر اساس میزان اهمیت عنوان، درجه بندی می شوند. سطوح عنوان ها شامل <h5>، <h4>، <h3>، <h2>، <h1> و <h6> می باشند. کاربرد اصلی […]

نوشته آموزش HTML5 جلسه سوم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> در این جلسه، عنوان در HTML ، کاربرد تگ <hr> و کامنت گذاری را توضیح می دهیم.

عنوان در HTML :

HTML شامل شش سطح از عنوان گذاری می باشد که بر اساس میزان اهمیت عنوان، درجه بندی می شوند. سطوح عنوان ها شامل <h5>، <h4>، <h3>، <h2>، <h1> و <h6> می باشند. کاربرد اصلی عنوان گذاری برای ماشین های جستجوگر می باشد. اگر ما در کدنویسی از heading ها استفاده کنیم موتور جستجوگر راحت تر به مطلب ما دسترسی پیدا می کند. همچنین عنوان ها باعث بزرگتر شدن اندازه متن می شوند.

اگر به کد زیر و نتیجه آن در تصویر دقت کنید متوجه تأثیر Headings بر متن می شوید:

<html>
<head>
<title> first page </title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

عنوان در HTML

تگ <hr> و رسم خط افقی

برای کشیدن خط افقی از تگ <hr> استفاده می کنیم. به محل قرارگیری این تگ در کد دقت کنید:

<html>
 <head>
 <title> first page </title>
 </head>
 <body>
 <p> This is first paragraph </p>
 <hr>
 <p> This is second paragraph </p>
 </body>
 </html>

خط افقی کشیده شده بین دو پاراگراف که نتیجه تگ <hr> می باشد را در تصویر زیر مشاهده می کنید:

تگ </hr>

کامنت در HTML

کامنت ها در کدها نوشته می شوند اما در مرورگر نمایش داده نمی شوند و شامل توضیحات، یادآوری ها و هرگونه یادداشت مورد نیاز برنامه نویس می باشند. برای ایجاد کامنت باید همانند مثال زیر، متن کامنت را بین علامت های --!>  و <-- قرار دهیم:

<!-- Your comment goes here -->

برای فهم بهتر به مثال زیر توجه کنید:

<html>
<head>
<title> first page </title>
</head>
<body>
<p> first paragraph </p>
<!-- This is your comment -->
<p> second paragraph </p>
</body>
</html>

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

coment

در جلسات آتی مباحث جدیدی به شما عزیزان ارائه می شود.

نوشته آموزش HTML5 جلسه سوم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/%d8%b9%d9%86%d9%88%d8%a7%d9%86-%d8%af%d8%b1-html/feed/ 0 آموزش HTML5 جلسه دوم https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%aa%da%af-title/ https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%aa%da%af-title/#respond Mon, 28 Aug 2017 08:01:43 +0000 http://webtml.ir/?p=1992 در این جلسه در مورد تگ title ، تگ <br> و تگ های قالب بندی متن بحث می کنیم. تگ title : به منظور قرار دادن عنوان برای هر tab از صفحات وب، تگ title را به بخش head اضافه می کنیم. <html> <head> <title> first page </title> </head> <body> <p> This is a paragraph. […]

نوشته آموزش HTML5 جلسه دوم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> در این جلسه در مورد تگ title ، تگ <br> و تگ های قالب بندی متن بحث می کنیم.

تگ title :

به منظور قرار دادن عنوان برای هر tab از صفحات وب، تگ title را به بخش head اضافه می کنیم.

<html>
<head>
<title> first page </title>
</head>
<body>
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
</body>
</html>

نتیجه را در تصویر زیر مشاهده می کنیم:

تگ title

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

شکستن خطوط در HTML

برای ایجاد یک خط جدید در متن، بدون اینکه یک پاراگراف جدید بسازیم، می توانیم از تگ <br> استفاده کنیم؛ به طور مثال با نوشتن کد زیر در notepad و اجرای آن در مرورگر، می توانیم نتیجه ای شبیه تصویر دوم که در زیر آمده، داشته باشیم.

<html>
<head>
<title> first page </title>
</head>
<body>
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
<P> This is <br> a line break. </p>
</body>
</html>

در HTML به تگ هایی  شبیه به <br> که تگ پایانی ندارند، تگ خالی می گویند.

تگ </br>

تگ های قالب بندی

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

<html>
<head>
<title> first page </title>
</head>
<body>
<p> This is a regular text </P>
<p><b> Bold text </b></p>
<p><big> Big text </big></p>
<p><small> Small text </small></p>
<p><strong> Strong text </strong></p>
<p><i> Italic text </i></p>
<p><ins> Inserted text </ins></p>
<p><del> Deleted text </del></p>
<p><sub> Subscripted text </sub></p>
<p><sup> Superscripted text </sup></p>
</body>
</html>

نتیجه به کار بردن این تگ ها را  در تصویر زیر می بینید:

formatting elements
تگ <b> متن را ضخیم می کند.
تگ <big> متن را درشت می کند.
تگ <small> باعث کوچک شدن متن می شود.
تگ <strong> شبیه تگ <b> عمل کرده و نوشته را ضخیم می کند.
تگ <i> نوشته را اُریب یا ایتالیک می کند.
تگ <em> همانند تگ <i> عمل کرده و متن را اُریب می کند، (تگ های <strong> و <em> بااهمیت بودن متن را می رسانند).
تگ <ins> زیر متن خط می کِشد.
تگ <del> یک خط روی نوشته می کِشد.
تگ <sub> متن را زیرنویس و تگ <sup> متن را بالانویس می کنند. برای اینکه کارکرد تگ های <sup> و <sub> را بهتر متوجه شوید به مثال زیر توجه کنید:

<html>
<head>
<title> first page </title>
</head>
<body>
<p> X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup> </p>
<p> X<sub>2</sub>+Y<sub>2</sub>=Z<sub>2</sub> </p>
</body>
</html>

code
همانطور که مشاهده کردید در این جلسه کاربرد تگ title و تگ <br> را بررسی کردیم. همچنین نحوه تغییر ظاهر متن را با استفاده از تگ های تغییر فرمت یاد گرفتیم.

نوشته آموزش HTML5 جلسه دوم اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%aa%da%af-title/feed/ 0 آموزش HTML5 جلسه اول https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%d8%a7%d9%88%d9%84/ https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%d8%a7%d9%88%d9%84/#respond Sat, 26 Aug 2017 17:46:35 +0000 http://webtml.ir/?p=1903 به دوره آموزش HTML5 خوش آمدید! HTML مخفف Hyper Text Markup Language می باشد، و برای ایجاد ساختار صفحات وب استفاده می شود. بر خلاف زبان های اسکریپتی یا برنامه نویسی که برای اجرای عملیات از اسکریپت استفاده می کنند، یک markup language از تگ ها برای تعریف محتوا استفاده می کند. در اینجا یک مثال از تگ […]

نوشته آموزش HTML5 جلسه اول اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> به دوره آموزش HTML5 خوش آمدید! HTML مخفف Hyper Text Markup Language می باشد، و برای ایجاد ساختار صفحات وب استفاده می شود.

بر خلاف زبان های اسکریپتی یا برنامه نویسی که برای اجرای عملیات از اسکریپت استفاده می کنند، یک markup language از تگ ها برای تعریف محتوا استفاده می کند. در اینجا یک مثال از تگ HTML که ساده ترین دستور کدنویسی است، وجود دارد:

<p> I'm a paragraph </p>

<p>  بخش آغازین تگ و <p/> بخش پایانی تگ می باشد. دقت کنید که در بخش پایانی اسلش (/) به کار رفته است. برای ایجاد پاراگراف  در html از تگ p یا ( <p> ) استفاده می شود (مخفف Paragraph).

هرفردی که خواهان برنامه نویسی برای وب می باشد؛ باید زبان HTML را فرا بگیرد.

تگ <html>

ساختار یک فایل html شبیه به ساختار یک ساندویچ است. همانطور که یک ساندویچ دو تکه نان در دو طرف خود دارد؛ فایل html نیز دارای تگ آغازین و پایانی html می باشد، که دیگر بخش ها را احاطه می کند. در زیر تگ آغازین و پایانی html را می بینیم:

<html>
...
</html>

تگ <head>

این تگ درون تگ html نوشته می شود. تگ head نیز دارای تگ آغازین و پایانی می باشد، که شامل المان های غیرقابل دیدن در html بوده و به کارکرد صفحه وب کمک می کند. جایگاه قرارگیری تگ head به صورت زیر می باشد:

<html>
<head>...</head>
</html>

در مورد المان head بعداً بحث می شود.

تگ <body>

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

<html>
<head>
<head/>
<body>
This is a line of text
</body>
</html>

فایل HTML

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

notepad1

شما می توانید بدون نصب کردن هیچ نرم افزار دیگری کدهای HTML را در این برنامه بنویسید و سپس برنامه را ذخیره و اجرا کرده و به اشتراک بگذارید. بعد از اینکه کد را در برنامه notepad نوشتید باید فایل را ذخیره کنید. به این صورت که از نوار منو در بالای صفحه بر روی منوی file کلیک کرده و گزینه save را انتخاب می کنیم. پسوند اسم فایلی که می خواهیم آن را ذخیره کنیم باید html یا htm باشد.

همچنین در قسمت Encoding باید گزینه UTF-8 را انتخاب کنیم و سپس ذخیره کنیم. به تصویر زیر دقت کنید:

آموزش HTML5

وقتی فایل ذخیره شده را باز می کنیم نتیجه شبیه به تصویر زیر در مرورگر نمایش داده می شود:

browser

نوشته آموزش HTML5 جلسه اول اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html5-%d8%ac%d9%84%d8%b3%d9%87-%d8%a7%d9%88%d9%84/feed/ 0 SGML چیست؟ https://webtml.ir/sgml/ https://webtml.ir/sgml/#respond Mon, 14 Aug 2017 12:19:47 +0000 http://webtml.ir/?p=1890 SGML مخفف عبارت  Standard Generalized Markup Language می باشد و  استانداردی برای تعیین یک سند زبان نشانه گذاری (Markup Language Document) یا مجموعه ای تگ است. که این خصوصیات خود یک DTD است. SGML به خودی خود یک زبان برنامه نویسی نیست اما فرا داده ای است (meta data) که خصوصیات یک زبان برنامه نویسی را مشخص […]

نوشته SGML چیست؟ اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> SGML مخفف عبارت  Standard Generalized Markup Language می باشد و  استانداردی برای تعیین یک سند زبان نشانه گذاری (Markup Language Document) یا مجموعه ای تگ است. که این خصوصیات خود یک DTD است. SGML به خودی خود یک زبان برنامه نویسی نیست اما فرا داده ای است (meta data) که خصوصیات یک زبان برنامه نویسی را مشخص می کند.

بیشتر بخوانید 👈  DTD چیست ؟

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

  • آن ها می توانند به جای توجه به مشخصات ظاهری (که ممکن است در طول زمان تغییر کند)، با توجه به ساختار اسناد ایجاد شوند.
  • آن ها می توانند قابلیت جابجایی بیشتری داشته باشند زیرا یک کامپایلر SGML با توجه به DTD مربوطه، می تواند آن سند را تفسیر کند.
  • اسنادی که برای کاربردی خاص در نظر گرفته می شوند، به آسانی قابلیت استفاده برای سایر رسانه ها مثل صفحه نمایش کامپیوتر را دارند.

زبان مورد استفاده مرورگر وب، HTML می باشد که مثالی از زبان بر پایه SGML می باشد و برای هر سند HTML یک DTD وجود دارد.

امروزه در محیط های تحت شبکه، بسیاری از اسناد توسط XML ارائه می شوند که زبانی برای شرح داده می باشد و از اصول SGML استفاده می کند.

SGML.jpg

مثالی از سند پایه ای SGML

این سند پایه ای SGML شامل موارد زیر است:

  • DTD
  • یکی از المان های اصلی (که به عنوان tag یا markup شناخته می شوند)
  • پاراگراف
  • متن

المان های اصلی بسته به نوع سندی که در حال نوشتن آن هستید، می بایست یک <article>  <chapter> <book> یا <sect1>باشند.

در این مثال ساده SGML، از تگ  <article>استفاده کرده ایم:

<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook V3.1//EN">
<article>
<sect1 id="introduction"><title>Hello world introduction</title>
<para>
!Hello world
</para>
</sect1>
</article>

در مثال بالا خط اول یک DTD است.

دقت کنید که تگ های اول و آخر هر دو <article>و </article> هستند. سایر تگ ها در این تگ قرار می گیرند.

به تگ<sect1>دقت کنید که خصوصیتی به نام “id” دارد. اگر بخواهید هنگام راه اندازی یک تجزیه کننده (parser) فایل SGML، لینک ها به صورت اتوماتیک برای اسناد HTML ایجاد شوند، می بایست تمام تگ های <sectX>که X عددی بین ۱ تا ۵ است، خصوصیت id داشته باشند. بنابراین، تمام تگ های <sectX>، حداقل به تگ پاراگراف (para) و در پایان به </sectx> نیاز دارند.

توجه کنید که در DTD مثال بالا (خط اول)، سند را به عنوان  article معرفی کرده است که این به شما اجازه می دهد که <article>را به عنوان تگ سطح بالا (تگ اصلی) در مکان اول بیاورید. به عنوان مثال، اگر به جای ‘article’ از ‘book’ استفاده شده بود، تجزیه کننده SGML قادر نبود سند را تحویل دهد.

بیشتر بخوانید 👈  XML چیست ؟

ساختار عمومی SGML

یک نویسنده خوب فایل، همیشه برای فایل SGML مجوزی قرار می دهد. در ادامه آمده است که یک فایل SGML جدید چگونه است.

<!--Copyright (c)  ۲۰۰۲  your name, NewbieDoc project;
http://sourceforge.net/projects/newbiedoc
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU
Free Documentation License, Version 1.1 or any later version published by the Free Software
 Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts.
 A copy of the license can be found at http://www.fsf.org/copyleft/fdl.html.-->
<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook V3.1//EN">
<article id="hello-world" lang="en">
<sect1 id="introduction"><title>Hello world introduction</title>
<para>
Hello world!
</para>
</sect1>
</article>

دقت کنید چگونه به وسیله علامت های <-- و --!>کامنت گذاری کرده ایم. این مهم است، اگر آن را فراموش کنید، هنگامی که به وسیله یک تجزیه کننده SGML برنامه را اجرا می کنید، با انواع خطاها روبرو می شوید و این اطلاعات هنگامی که شما در حال ایجاد آن هستید، قابل مشاهده نیست. دلیل قابل مشاهده نبودنش این است که تجزیه کننده آن را به عنوان یک کامنت در نظر می گیرد و آن را به انتهای فایل تجزیه شده منتقل می کند. این خوب است زیرا می توانیم با اضافه کردن کامنت ها  نکاتی که در آینده استفاده می کنیم را یادآوری کنیم.

دقت کنید که برای تگ <article> خصوصیات “id” و “lang” در نظر گرفتیم. اگر شما در حال ساخت فایل چند صفحه ای HTML باشید، id مشخص می کند که فایل بعد از تجزیه چه نامی داشته باشد. خصوصیت lang مشخص می کند که متن اصلی با چه زبانی است.

برای فهم بهتر این مثال آن را انجام دهید. کد بالا را در یک ویرایشگر متن تایپ یا copy و سپس paste نمایید. فایل را با نام myfile.en.sgml ذخیره نمایید. در command line به پوشه ای که فایل  myfile.en.sgml در آن است بروید و فرمان زیر را اجرا کنید.

bash$ sgmltools -b html myfile.en.sgml

اکنون شما دایرکتوری با نام my file.en دارید. اگر محتوای دایرکتوری را تغییر دهید و  به محتوای آن بنگرید، می بینید که فایلی به نام hello-world.html دارید. وقتی این سند را ایجاد کردید، تجزیه کننده با استفاده از “id” نام فایل خروجی را می سازد. نام واقعی فایل شما برای نام گذاری زیرمجموعه ها استفاده می شود.

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

اگر شما به تگ <article> ، خود id اختصاص ندهید، فایل html به طور خودکار با نامی مشابه “t1.html” ذخیره می شود که هیچ کمکی نمی کند.

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

نوشته SGML چیست؟ اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/sgml/feed/ 0 نکاتی که باید درباره HTML 5 بدانید https://webtml.ir/%d9%86%da%a9%d8%a7%d8%aa%db%8c-%da%a9%d9%87-%d8%a8%d8%a7%db%8c%d8%af-%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5-%d8%a8%d8%af%d8%a7%d9%86%db%8c%d8%af/ https://webtml.ir/%d9%86%da%a9%d8%a7%d8%aa%db%8c-%da%a9%d9%87-%d8%a8%d8%a7%db%8c%d8%af-%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5-%d8%a8%d8%af%d8%a7%d9%86%db%8c%d8%af/#comments Mon, 19 Sep 2016 17:49:50 +0000 http://webtml.ir/?p=1551 ۱)HTML5 را نباید به عنوان یک عنصر واحد در نظر گرفت حق دارید بپرسید: چگونه استفاده از HTML 5 را آغاز کنم در صورتی که مرورگرهای قدیمی از آن پشتیبانی نمی کنند؟ اما این سوال به خودی خود گمراه کننده است. به این دلیل که HTML 5 یک عنصر واحد نیست. بلکه مجموعه ای از […]

نوشته نکاتی که باید درباره HTML 5 بدانید اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> ۱)HTML5 را نباید به عنوان یک عنصر واحد در نظر گرفت

حق دارید بپرسید: چگونه استفاده از HTML 5 را آغاز کنم در صورتی که مرورگرهای قدیمی از آن پشتیبانی نمی کنند؟ اما این سوال به خودی خود گمراه کننده است. به این دلیل که HTML 5 یک عنصر واحد نیست. بلکه مجموعه ای از ویژگی های مجزا است. بنابراین نمی توان تشخیص داد که کدام مرورگر از HTML 5 پشتیبانی می کند. بلکه می توان تشخیص داد که کدام ویژگی ها در هر مرورگر پشتیبانی می شوند. مثل: canvas, video یا geolocation.
ممکن است شما به HTML به عنوان مجموعه ای از تگ ها فکر کنید. بله این یک قسمت مهم از HTML است؛ اما تمام آن نیست. بلکه HTML علاوه بر این مشخص می کند، که این تگ ها چگونه با جاوا اسکریپت تعامل داشته باشند. این تعامل از طریق DOM برقرار می شود. برای مثال HTML تنها تگ <video> را معرفی نمی کند بلکه یک DOM API متناظر نیز برای شیء video در DOM وجود دارد. برای مثال شما می توانید از طریق این API تشخیص دهید کدام فرمت ها پشتیبانی می شوند، یک ویدئو را play و pause کنید، صدای ویدئو را قطع کنید، پیگیری کنید که چه مقدار از ویدئو دانلود شده است و هر چیز دیگری که شما بتوانید از طریق تگ <video> یک تجربه کاربری خوب ایجاد کنید.

۲) نیازی نیست که همه چیز را دور بریزید

formsدوست داشته باشید یا نه، نمی توانید انکار کنید که HTML 4 تا
کنون بهترین قالب نشانه گذاری بوده است. HTML 5 نیز بر پایه  همین موفقیت بنا شده است. نیازی نیست که نشانه گذاری های
موجودتان را دور بریزید. نیازی نیست که چیزهایی را که تا امروز یاد گرفته اید دوباره یاد بگیرید. اگر برنامه وبی شما تا
دیروز برپایه HTML 4 کار می کرده، امروز نیز برپایه HTML 5 کار می کند. اگر شما قصد ارتقا برنامه وبی خود را دارید، جای
درستی آمده اید. برای مثال: HTML 5 تمام کنترل های فرم HTML 4 را پشتیبانی می کند، با این وجود کنترل های ورودی جدیدی
نیز دارد. بعضی از این کنترل ها کاملا جدید هستند مثل اسلایدر و انتخابگر تاریخ (DatePicker)؛ بعضی نیز نامحسوس هستند.
برای مثال: email input که شبیه text box هست ولی مرورگرهای موبایل هنگام برخورد با این کنترل صفحه کلید را به صورتی
تغییر می دهند که ورود آدرس ایمیل راحت تر شود. مرورگرهایی که از این کنترل پشتیبانی نمی کنند با آن مثل یک فیلد
متنی برخورد می کنند و فرم نیز بدون هیچ تغییری کار میکند. این به این معنی است که شما می توانید به توسعه فرم های وبی
خود بپردازید حتی اگر بعضی از کاربران شما از IE 6 استفاده می کنند.

۳) شروع کار با HTML 5 آسان است

markup-with-arrow

ارتقا به HTML 5 می تواند به آسانی تغییر doctype باشد. هر سند HTML باید با
doctype شروع شود. نسخه قبلی HTML تعداد زیادی
doctype تعریف کرده بود و انتخاب درسترین آن ها کار سختی بود. در HTML 5 تنها یک doctype وجود دارد:

<!DOCTYPE html>

ارتقا به HTML 5 doctype، نشانه گذاری فعلی شما را ناکارامد نمی کند، به این خاطر که تمامی المان ها و ویژگی های HTML 4
 در HTML 5 نیز کار می کنند(هرچند که تعدادی از آن ها منسوخ شده اند). اما این ارتقا به شما اجازه می دهد که از المان های مفهومی جدید مثل: header ,footer ,article استفاده کنید.

۴) HTML 5 بسیار انعطاف پذیر است

قواعد نحوی (HTML 5 (syntax نسبت به XHTML بسیار منعطف است. شما می توانید تگ ها را با حروف بزرگ، حروف کوچک یا ترکیبی از این دو بنویسید.

<IMG SRC=webtml.jpg>
<img src=webtml.jpg>
<iMg SrC=webtml.jpg>

بستن عناصر خالی (void elements) اختیاری است. به این معنی که شما می توانید علامت / را در عناصر خالی حذف کنید.

<img src="webtml.jpg" />
<img src="webtml.jpg">
<br/>
<br>

تا زمانی که مقادیر خصوصیات تگ، حاوی مقادیر محدود شده (>، =، فاصله و …) نباشد، شما می توانید مقادیر را بدون استفاده از کوتیشن مارک (” “) درج کنید.

<img src="webtml.jpg">
<img src=webtml.jpg>

نوشته نکاتی که باید درباره HTML 5 بدانید اولین بار در وبسایت آموزشی وب تی ام ال - webtml پدیدار شد.

]]> https://webtml.ir/%d9%86%da%a9%d8%a7%d8%aa%db%8c-%da%a9%d9%87-%d8%a8%d8%a7%db%8c%d8%af-%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5-%d8%a8%d8%af%d8%a7%d9%86%db%8c%d8%af/feed/ 2