محتوا

• مراحل
• روش 1 از 1: نوشتن یک صفحه HTML
• نکات
• هشدارها
• چه چیزی نیاز دارید

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

مراحل

روش 1 از 1: نوشتن یک صفحه HTML

1. 1 قبل از شروع آشنایی با یکی از مراحل ارائه شده در اینجا ، به بخش "آنچه شما نیاز دارید" مراجعه کنید.
2. 2 آنچه باید قبل از درک این موضوع بدانید:
3. 3 اصول اولیه. آیا تا به حال نام برچسب را شنیده اید؟ برچسب توسط براکت های زاویه ای احاطه شده است و کلمه داخل آن قرار دارد. برچسب پایانی به همان شکل نوشته شده است ، اما با افزودن یک خط افقی پس از اولین براکت زاویه ای. یک ویژگی یک کلمه اختیاری در یک برچسب است که برای افزودن جزئیات به یک برچسب استفاده می شود.
4. 4 ابتدای سند. در هر ویرایشگر متنی که استفاده می کنید ، موارد زیر را وارد کنید:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   برچسب باید با همان تگ بسته شود ، اما پس از اولین براکت زاویه دار ، بریده شود. استثنائاتی مانند برچسب ها وجود دارد متا یا DOCTYPE.
5. 5 DOCTYPE
   • به طور معمول ، اکثر صفحات وب تنظیم می شوند DOCTYPE ”. این به تعیین رمزگذاری و همچنین نحوه درک آن توسط مرورگرهای وب کمک می کند. اکثر صفحات بدون آن کار خواهند کرد ، "اما اگر می خواهید مطابقت داشته باشید این کار ضروری است (آنها انواع کدگذاری در اینترنت و نحوه استفاده از آنها را تنظیم می کنند)... DOCTYPE برای HTML 4.01 در زیر ارائه شده است:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> این یکی است از رایج ترین DOCTYPE در صفحات سراسر اینترنت استفاده می شود.ابتدا به نوع صفحه توصیف کننده "html" اشاره می کند ، سپس نوع کدگذاری را برجسته می کند و در نهایت ، مکان DOCTYPE ، که در نتیجه صفحه را برای مرورگر وب توصیف می کند.
   • انواع مختلفی از HTML وجود دارد (نسخه های مختلف در طول سالها توسعه یافته است) ، به عنوان مثال از برچسب های جدید یا برچسب های خاص استفاده می شود. برخی از برچسب ها منسوخ شده اند (به جای آنها از برچسب های مفیدتری استفاده می شود).
   • b> و من> - این چیزی است که در حال حاضر بر روی برچسب ها اعمال می شود ، زیرا از آنها برای تبدیل متن استفاده می شود ، اما نه مشخصات ، در نتیجه ، برچسب های دیگر جایگزین آنها می شوند. برچسب زدن قوی> جایگزینی برای b>، و em>، جایگزینی برای من>.
   • مهم است که برچسب های قبلی با برچسب هایی جایگزین شوند که فرمت بیشتری دارند. اگر متن ترجمه شود ، نه تنها قالب بندی ، بلکه معنای آن نیز ثابت می ماند. این از نظر معنایی درست است.
   • در نسخه XHTML 2.0 ، b> و من> مانند HTML نسخه 3+ استفاده نمی شود.
6. 6 HTML "قانون کپسوله سازی".
   • اجازه دهید نگاهی به برچسب های مهم تری که در حال حاضر استفاده می شود بیندازیم. در هنگام ایجاد صفحه ، از یک ساختار ساده استفاده می شود. اگر یک برچسب باز شد ، در نتیجه ، باید بسته شود... این در مورد کل ساختار صدق می کند. در اینجا یک نمونه معتبر از ساختار طرح XHTML آمده است:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • سر>
   • meta http-equ = "Content-Type" content = "text / html؛ charset = utf-8" />
   • عنوان> سلام جهان! / عنوان>
   • / head>
   • بدن>
   • h1> سلام جهان! / h1>
   • / body>
   • / html>
   • نمونه کد که پیامی صادر می کند سلام دنیا... به این می گویند آزمون سلام دنیا.
7. 7 عنوان
   • عنوان صفحه وب محتوای بین برچسب است سر>... این محتوا توسط کاربر قابل مشاهده نیست (فقط عنوانی که در عنوان صفحه نشان داده شده است). اطلاعات بین برچسب ها سر>، می تواند برچسب های دیگری مانند:
     
     
     • تگ META برای اطلاعاتی که برای موتورهای جستجو و سایر ابزارهای مفید مفید است استفاده می شود.
     • تگ LINK که پیوندی بین اسناد ایجاد می کند ، برای مثال برای Styles (CSS).
     • برچسب SCRIPT ، این شامل تقریباً هرگونه برنامه نویسی وب ، با قابلیت دسترسی از راه دور (از سند دیگر) است.
     • برچسب STYLE ، که در اصل سبکی است که می تواند روی صفحه اعمال شود.
     • تگ TITLE عنوانی است که به عنوان عنوان صفحه ای در مرورگر وب شما ظاهر می شود.
   • بیایید نسخه نمایشی برخی از این موارد را در عنوان سرصفحه ای که از این وب سایت گرفته شده است (کوتاه شده است) مشاهده کنید:
     • سر>
     • عنوان> ... / عنوان>
     • meta name = "description" content = "..." />
     • پیوند rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equ = "content-type" content = "text / html؛ charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / head>
       
       در صورت عدم توجه ، برچسب های جداگانه برجسته شده و اطلاعات واقعی حذف شده اند. مثال نسبتاً کوتاه است و تقریباً هر برچسبی را که در آن یافت می شود نشان می دهد سر>به جز نظر HTML (ما در مورد این موضوع در برچسب های ساده صحبت خواهیم کرد).
8. 8 برچسب های ساده در همه جا
   • بیایید پیش برویم و سایر برچسب ها را ببینیم. در برچسب زدن خود مراقب باشید و قانون کلی "محصور کردن" را به خاطر بسپارید.
     
     
     • strong> بر متن مهم تأکید می کند.
     • small> متن را کوچکتر می کند. اندازه قلم در واحدهای استاندارد از 1 تا 7 اندازه گیری می شود ، 3 اندازه متن پیش فرض است. ...
     • pre> بلوکی از متن غنی را تعریف می کند. همانطور که درست است ، چنین متنی با فونت یک اندازه و با تمام فاصله بین کلمات تایپ می شود.
     • em> متن را به عنوان یک عبارت نشان می دهد.
     • del> متن را حذف می کند.
     • ins> متنی را که در سند درج شده تعریف می کند.
     • h1> یکی از بسیاری از برچسب های عنوان. برچسب های از این دست با 'h' و با تفاوت در تعداد شروع می شوند. اطمینان حاصل کنید که برچسب را با همان شماره ببندید.
     • p> پاراگراف را تعریف می کند.
     • ! --- ... ---> بر خلاف سایر برچسب ها ، نظر باید داخل خود برچسب باشد. این اطلاعات فقط در صورت مشاهده کد قابل مشاهده است.
     • blockquote> نقل قول را نشان می دهد ، می تواند با برچسب cite> استفاده شود.
     • چند مثال بالا لیست کاملی از برچسب های موجود نیست. برای اطلاع از دیگران ، به سایت مراجعه کنید.
9. 9 ایجاد ساختار واضح
   • صفحات طوری طراحی شده اند که داده ها را در مجموعه های ساده ای از برچسب ها نگهداری می کنند تا بتوانیم اطلاعات را در پاراگراف ها تجزیه کنیم. رایانه داده ها را تشخیص می دهد ؛ از زمینه یا ارتباط مفهومی اطلاع ندارد. ما باید صفحات HTML سازگار با کامپیوتر ایجاد کنیم. این امر با استفاده از تگ div به دست می آید. این به ایجاد تعداد زیادی صفحه کمک می کند. می توان آن را با CSS طراحی کرد و راحت تر از ایجاد جداول کد بزرگ برای طرح است.
     • div> این برچسب خاص است زیرا می تواند سبک بندی شود و از بلوک های جداگانه ای از اطلاعات استفاده کند که هم کاربر و هم کامپیوتر می توانند آن را درک کنند.
   • بیایید نگاهی به یک طرح بندی ساده HTML بیندازیم که از تگ div استفاده می کند.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • سر>
     • meta http-equ = "Content-Type" content = "text / html؛ charset = utf-8" />
     • عنوان> سلام جهان! / عنوان>
     • / head>
     • بدن>
     • h1> سلام جهان! / h1>
     • div id = "contentOne">
     • p> این قسمتی از متن در div # contentOne است. / p>
     • div>
     • p> یک پاراگراف در بخش فرعی div # contentOne / p>
     • / div>
     • / div>
     • / body>
     • / html>
   • استفاده از برچسب های div> به یافتن و اصلاح سبک ها در حین کار با CSS و Javascript کمک می کند. HTML از کدگذاری های مختلف برای کار با سبک های CSS و Javascript برای ایجاد یک تجربه کاربری بهتر و پاسخگوتر استفاده می کند.

نکات

• پس از خواندن این مقاله ، متوقف نشوید و فکر کنید که همه چیزهایی را که باید بدانید آموخته اید. همیشه چیزی برای یادگیری وجود دارد ، به ویژه در این فناوری.
• یاد بگیرید ، درک کنید و کد بنویسید.
• توجه داشته باشید که برخی از برچسب ها فقط از> استفاده می کنند. Para و br چند نمونه هستند. سایر برچسب ها با> باز شده باید بیشتر بسته شوند. به عنوان مثال ، "div> / div>".
• مردم انتظار کشفیات جدیدی را دارند ، بنابراین دوباره اختراع ، طراحی یا کدگذاری کنید.
• وقتی چیزهای زیادی یاد گرفتید ، برنامه نویسی سرور را امتحان کنید.
• کار با CSS و همچنین Javascript را بیاموزید.

هشدارها

• به یاد داشته باشید ، HTML همه چیز در مورد ویرایش محتوا است. این بدان معنی است که HTML فقط برای ذخیره محتوا در یک قالب شناخته شده استفاده می شود. تغییرات دیگر باید با استفاده از فناوری های دیگر مانند CSS انجام شود. همچنین به معنای انجام "صحیح معنایی استحتی اگر دیگران اعتراف نکنند سایر زبانهای برنامه نویسی به ساخت صفحات وب (CSS ، Javascript و XML) کمک می کنند. HTML یک سازنده محتوا است.

چه چیزی نیاز دارید

• ویرایشگر متنی که از کدگذاری ANSI پشتیبانی می کند
• مرورگر وب مانند Internet Explorer یا Mozilla Firefox
• (اختیاری) ویرایشگر wysiwyg یا wykiwyg مانند Adobe Dreamweaver ، Aptana Studio یا Microsoft Expression Web