در آموزش قبل با تاریخچه و زبان برنامه نویسی HTML آشنا شدیم، در این آموزش قصد داریم تگ های اچ تی ام ال را توضیح داده و به کار ببریم .
نرم افزار Notepad را باز کنید و سپس از طریق منوی Format گزینه Word Wrap را فعال کنید تا صفحه شما اسکرول افقی نداشته باشد و راحت تر بتوانید از Notepad استفاده کنید.
نکته شماره یک » در صورتی که اندازه متن ورودی در Notepad کوچک یا بزرگ و … می باشد از طریق منوی Fotmat گزینه Font را انتخاب کنید ، فونت مورد نظر و همچنین اندازه مورد نظر را انتخاب نمایید و در نهایت Ok را بزنید؛ لازم به ذکر است که این اندازه و فونت در خروجی و کد های شما هیچ تأثیری ندارد و فقط جهت مشاهده بهتر و راحت تر شما می باشد، بهترین فونت و اندازه قابل نمایش در Notepad استفاده از فونت Tahoma و اندازه ۱۲ پیکسل می باشد.
توجه کنید که تگ هایی را که معرفی میکنیم در Notepad در جای مشخص خود مشابه نمونه هایی که قرار میدهیم بنویسید. اما در انتهای کار هر آموزش، من سورس (مجموعه کد های نوشته شده) آن آموزش را در اختیار شما عزیزان قرار خواهم داد .
نکته شماره دو » جهت ویرایش کد (سورس) فایل HTML آن را با نرم افزار Notepad باز کنید تا بتوانید آن را به راحتی ویرایش نمایید، جهت انجام این کار بر روی فایل راست کلیک کرده و در بخش Open With گزینه Notepad را انتخاب کنید؛ در صورتی که گزینه Notepad در آن بخش موجود نبود در بهش Open With گزینه Choose Default Program را انتخاب کرده و در آنجا Notepad را انتخاب کنید.
اولین تگ مورد استفاده <html> می باشد که در ابتدای صفحه آن را می نویسیم و برای بستن آن از </html> استفاده می کنیم، تمام کد ها و عکس ها و تگ های ما باید بین این دو تگ قرار بگیرد. مانند :
|
۱
۲
۳
|
<html>
کد ها و تگ های ما در این قسمت قرار می گیرد
</html>
|
این تگ برای ما ابتدا و انتهای صفحه کد (صفحه سایت) را مشخص می نماید.
تگ بعدی <head> و </head> است که مشخص کننده بالایی صفحه می باشد که معمولاً در آن عنوان صفحه ، کلمات کلیدی و توضیحات کلی سایت قرار می گیرد .
|
۱
۲
۳
|
<html>
<head> عنوان و توضیحات سایت در این قسمت قرار خواهد گرفت </head>
</html>
|
تگ <title> و </title> در بخش Head قرار می گیرد و در آن عنوان سایت شما قرار خواهد گرفت که در نوار مرورگر نشان داده خواهد شد.
|
۱
۲
۳
۴
۵
|
<html>
<head>
<title>این اولین برنامه نویسی من است</title>
</head>
</html>
|
خب حالا از طریق منوی File گزینه Save As را انتخاب کنید، محل ذخیره سازی را انتخاب کرده و یک نام با پسوند .html برای فایل خود انتخاب نمایید و سپس از بهش Encoding گزینه UTF-8 را انتخاب و در نهایت ذخیره نمایید. سپس فایل خود را باز کنید و آن را مشاهده فرمایید ، عنوان سایت شما مانند عکس زیر در مرورگر به نمایش در می آید.
تگ <body> و </body> محل قرار گرفتن بدنه سایت است ، هر چیزی که درون این تگ نوشته شود در مرورگر به نمایش در می آید، که به شکل زیر قابل استفاده است :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
|
<html>
<head>
<title>این اولین برنامه نویسی من است</title>
</head>
<body>
محتوای این بخش در مرورگر به نمایش در می آید
</body>
</html>
|
مشابه عکس زیر :
تگ بعدی که یک تگ تنها می باشد <br> است که از کلمه Break گرفته شده است که در Html کار Enter را انجام می دهد .
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
<html>
<head>
<title>این اولین برنامه نویسی من است</title>
</head>
<body>
محتوای این بخش در مرورگر به نمایش در می آید
<br>
این یک متن تست است
<br><br>
این یک متن تست است
<br><br><br><br><br>
این یک متن تست است
</body>
</html>
|
همانطور که شما می توانید چندین مرتبه از Enter استفاده نمایید در HTML نیز می توان چندین بار از <br> استفاده نمود.
برای کشیدن یک خط افقی به منظور جدا کردن دو بخش از تگ <hr> استفاده می کنیم که همانند تگ Break نیازی به بستن ندارد.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
|
<html>
<head>
<title>این اولین برنامه نویسی من است</title>
</head>
<body>
این یک متن تست است
<hr>
این یک متن تست است
<hr>
این یک متن تست است
</body>
</html>
|
خروجی ما به شکل زیر نمایش داده می شود :
خب ما به طور کلی با ساختار برنامه نویسی به زبان HTML و همچنین روش نوشتن تگ ها و محل قرار گیری تگ ها آشنا شدیم ، در آموزش بعد به کار با متن ها می پردازیم.
موفق باشید.
آموزش برنامه نویسی HTML , آموزش برنامه نویسی Html Pdf , آموزش برنامه نویسی Html از مبتدی تا پیشرفته , آموزش برنامه نویسی Html پیشرفته , آموزش برنامه نویسی Html قسمت دهم , آموزش برنامه نویسی Html مقدماتی , آموزش برنامه نویسی Html5 , آموزش برنامه نویسی اندروید با Html5 , آموزش زبان برنامه نویسی Html5 , اموزش برنامه نويسي Html , اموزش برنامه نویسی Html 5 , دانلود آموزش برنامه نویسی Html , دانلود آموزش تصویری برنامه نویسی Html , دانلود آموزش زبان برنامه نویسی Html , دانلود رایگان آموزش برنامه نویسی Html , دانلود فیلم آموزش کامل برنامه نویسی Html به زبان فارسی , دانلود کتاب آموزش برنامه نویسی Html , دانلود کتاب آموزش برنامه نویسی Html به زبان ساده , دانلود کتاب آموزش زبان برنامه نویسی Html
