بلاگ تمز-دانلود قالب بلاگ بیان،قالب و افزونه وردپرس
  • صفحه نخست
  • وبلاگ
  • فروشگاه
  • مرکز آموزش
  • حریم خصوصی
  • ورود / عضویت
  • فراموشی گذرواژه

ساختار و اصول نوشتن کدهای اچ تی ام ال

  • خانه
  • دسته بندی نشده
  • ساختار و اصول نوشتن کدهای اچ تی ام ال
ج.محمد مرداد ۳۰, ۱۳۹۳ دسته بندی نشده ۰ نظر

 

مشاهده عکس

 

 

بخش دوم ساختار و اصول اولیه نوشتن کد های اچ تی ام ال

نرم افزار مورد نیاز :

 

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

همچین چیزی اصلا درست نیس!!! درسته که یه سری نرم افزارها هستن که کدنویسی را

راحتر میکنند و یه سری دیگر بصورت ویژوال کار طراحی رو انجام میدن! اما بطور کلی برای کد نویسی وب

شما به یک ویرایشگر متن به سادگی “نوت پد” ویندوز، به برنامه دیگری نیاز ندارید! و یا حداکثر برنامه های

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

 

 

اصول نوشتن کدهای html

 

اچ تی ام ال از شناسه ها یا همان تگ ها ساخته شده هست. خب این تگ ها چی هستند و به چه صورتی نوشته می شوند.

هر تگ اچ تی ام ال با علامت  کوچکتر ریاضی > باز می شود و با علامت بزرگتری < به پایان می رسد.       <تگ>

خب وارد نوشتن کد بشیم

مثال را با معرفی یک تگ پرکاربرد در اچ تی ام ال شروع میکنیم <b>  مخفف کلمه  bold

این تگ باعث ضخیم شدن متن میشود که برای نوشتن این تگ نوشتن تنها <b> کافی نیست باید

این تگ بسته بشه به این صورت<b/>  به مثال دقت کنید :

  <b>آموزش برنامه نویسی وب ، یک برنامه نویس وب</b>

خروجی :  آموزش برنامه نویسی وب ، یک برنامه نویس وب

حال یک نمونه اشتباه رو باهم ببنیم

<b>آموزش برنامه نویسی وب ، یک برنامه نویس وب

ساختار اچ تی ام ال از هزاران تگ تشکیل شده هست ، برای اینکه این تگ ها بدرستی در کنار هم قرار بگیرند شما باید همیشه

همچنین بخوانید  راهنمای تگ های متا : سطح مبتدی

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

به این مثال دقت کنید تا به معنای جمله بالا بیشتر پی ببرید.

</u></b> آموزش برنامه نویسی وب ، یک برنامه نویس وب<b><u>

در اچ تی ام ال تگ های استثنایی هم هستند که نیاز به بسته شدن ندارند. در این بخش فقط یک مثال میزنیم

و توضیحات را در بخش بعدی مطرح میکنم .

</br> مخفف کلمه ی break  که این تگ باعث میشه به خط بعدی برید. (همون نقطه از سر خط دبستان)! به مثال دقت کنید:

<b/> آموزش برنامه نویسی وب <br> یک برنامه نویس وب <b>

خروجی : یک برنامه نویس       (خط شکسته شد و ادامه متن به خط بعدی  رفت)

                آموزش برنامه نویس وب

 

پشتیبانی مرورگر ها از این تگ

Element     
<br>YesYesYesYesYes
 

ساختار کلی اچ تی ام ال

 

<!doctype html>
<html lang="bal"> 
<head>
<meta charset="utf-8">
<title> آموزش برنامه نویسی وب </title>
</head>
<body>
بدنه اصلی اچ تی ام ال که هر چی بین این باشه تو مرور گر نشون داده میشه!
</body>
</html>

<doctype html!>  این خط به مرورگر و یا هر ابزار دیگری اعلام میکند که صفحه موجود از چه نوع استانداردی استفاده می کند.

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

همچنین بخوانید  طراحی و کدنویسی صفحه نخست سایت کاریابی

برچسب html  که در مثال بالا خصیصه  lang  را با مقدار bal   اضافه کردیم ، مشخص کردیم که متن این سند حاوی زبان بلوچی است. (بودن خصیصه  lang  اجباری نیس و بودن و نبودن آن تاثیری در کارایی و معتبر بودن فایل اچ تی ام ال مان ندارد)

 

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

اولین خط  داخل این پرچسب مشخص کننده شیوه رمز گذاری  حروف سند هست (اطلاعات بیشتر). که ما همیشه از utf-8  در فایل خودمان استفاده میکنیم.

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

مشاهده ی عکس

برچسب body  بدنه ی اصلی سند اچ تی ام ال که هر چه میخواهیم در مرورگر ببینم باید در این قسمت قرار بدیم.

ما تا آخر آموزشمون از این ساختار استفاده می کنیم.

خب الان دیگه آماده اید اولین صفحه html  خودمان را بنویسیم.

۱ : نوت پد را باز کنید  عکس

۲ : کدهای قسمت بالا را در نوت پد بنویسید

۳ : فایل خود را به این صورت ذخیره کنید. نوع فایل باید html باشد. عکس 

۴ : حال فایل خود را با مرورگر تون اجرا کنید . enlightened” لطفا از مرورگر اکسپلورر استفاده نکنید ” .

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

امیدوارم تونسته باشم قابل فهم براتون نوشته باشم.wink

لطفا در قسمت نظرات ، دیدگاه و سوالات خود را بنویسید. موفق باشید . تا بخش بعدی خدا همراتون smiley

همچنین بخوانید  فایل psd کادر جست و جو مطالب

 

پیوست یک  : NotePad++

پیوست دو : Sublime Text

vote
رتبه دهی مطلب
اچ تی ام الاصول نوشتن Htmlhtmlhtml Structureساختار htmlطراحی وبنوت پدوبلاگ/اچ تی ام ال
بخش اول – معرفی اچ تی ام المطلب قبلی
طراحی هدر آموزش برنامه نویسی وبمطلب بعدی
اشتراک
اطلاع از
Please login to comment
0 نظرات
Inline Feedbacks
View all comments

خوب است بدانید

  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • انتشار مطلب در بلاگ بیان
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین محصولات مارکت

  • قالب ریسپانسیو زمستان بلاگ بیان

    دانلود قالب ریسپانسیو زمستان بلاگ بیان

    ۳۹,۰۰۰ تومان
  • مطالب مرتبط بلاگ بیان

    مطالب مرتبط بلاگ بیان

    ۱۵,۰۰۰ تومان
  • قالب نوشتار بلاگ بیان

    قالب نوشتار بلاگ بیان

    ۳۰,۰۰۰ تومان
  • قالب مجله و خبری بلاگ بیان

    قالب مجله و خبری بلاگ بیان ماهتاک

    ۴۷,۰۰۰ تومان
  • قالب انحنای بلاگ بیان

    قالب انحنا بلاگ بیان

    امتیاز 5.00 از 5
    ۴۵,۰۰۰ تومان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

دسته های محصولات

  • اسکریپت
  • افزونه بلاگ بیان
  • افزونه وردپرس
  • پروژه کامپیوتر
  • دسته بندی نشده
  • سئو
  • سورس نرم افزار آندروید
  • شرکتی
  • قالب HTML
  • قالب بلاگ بیان
  • قالب وردپرس
  • ووکامرس

سوالات متداول

  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • انتشار مطلب در بلاگ بیان
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
0
0
Would love your thoughts, please comment.x
()
x
| Reply