طراحی قالب html


طراحی قالب html رو در این اموزش میخونید خوب بریم سراغ اصل مطلب یعنی اموزش 🙂  خوب html  چیست ؟ درک آنچه HTML است HTML (زبان نشانه گذاری Hyper Text) زبان برنامه نویسی است که صفحات وب را ایجاد می کند و در  طراحی قالب html  به ما کمک میکند ، این اسکلت هر صفحه وب است که وجود دارد.   برای دیدن آنچه که آن را به نظر می رسد، به اینترنت اکسپلورر بروید، به هر وب سایت بروید و با کلیک راست بر روی صفحه وب را انتخاب کنید “مشاهده منبع”. شما  یک صفحه از کد را مشاهده خواهید کرد و آن HTML است. این کد چیزی است که مرورگر شما را می بیند و انچه در مورد طراحی قالب html است. 

 

در Google Chrome F12 را فشار دهید.
در موزیلا فایرفاکس، Ctrl + U را برای مشاهده کد منبع صفحه فشار دهید.
در Safari، View → View Source (یا Option + Command + U) را انتخاب کنید.
در اینترنت اکسپلورر، گزینه منوی VIEW “منبع” است.


۲
صفحه اول اولیه خود را به همان اندازه ساده تر کنید. اگر این کار را نکنید، به احتمال زیاد توسط نحو و زبان اسکریپت غرق خواهید شد.

در طراحی قالب html مهم این است که به یاد داشته باشید که شما اطلاعات خود را بین یک تگ HTML باز و یک تگ HTML تعریف می کنید. یک تگ باز به نظر می رسد: <___>. یک تگ بسته به نظر می رسد: </ ___>. در نهایت، ___ با یک کد جایگزین شده است.


به شروع، سپس “برنامه ها” و سپس “لوازم جانبی” بروید. و بر روی “دفترچه یادداشت” کلیک کنید. اگر شما با استفاده از Notepad + ++ یک زبان HTML را انتخاب می کنید، بسیار ساده تر است اگر شما از زبان HTML استفاده می کنید، هر چیزی که نوشتید به طور خودکار با رنگ های مختلف ارتباط برقرار خواهد کرد. بدین ترتیب اشتباهات احتمالی بسیار آسان تر خواهد بود.

آموزش سئو

مرورگر چه زبانی را استفاده می کنید. در خط اول، تایپ <! DOCTYPE>، این باید همیشه اولین تگ در کد شما باشد. در خط دوم <html> را اضافه کنید. این برچسب دوم شما است که به کامپیوتر شما که یک صفحه وب را شروع می کنید است. این نیز بسته خواهد شد، بنابراین در پایان سند، با تایپ این عبارت، آن را خاتمه دهید: </ html>. این صفحه وب به پایان می رسد.

عنوان صفحه را به عنوان نشان داده شده اضافه کنید.


به صفحه خود یک عنوان بدهید عنوان بسیار مهم است، زیرا به کاربران خود کمک می کند تا آنچه را که در مورد صفحه وجود دارد، درک کنید. همچنین، هنگامی که کاربران سایت خود را نشانه گذاری کنند، این عنوان همه مواردی است که آنها در فهرست نشانک ها می بینند. عنوان کد HTML <title> است. در پایان عنوان خود را با نوشتن آن بنویسید </ title> عنوان در پوشه نشان داده می شود، انتظار نداشته باشید که عنوان وب سایت واقعی باشد.
تصویر به نام ایجاد یک صفحه وب ساده با HTML مرحله ۷

کار بر روی صفحه صفحه برای باز کردن برچسب بدن، <body> را باز کنید سپس تگ بدن را با تایپ </ body> ببندید. بخش عمده ای از اطلاعات برای صفحه وب شما بین <body> و </ body> قرار دارد.

برای دادن صفحه وب به رنگ پس زمینه، می توانید یک سبک را به بدن اضافه کنید. برای افزودن یک رنگ پسزمینه، این برچسب را <body style = “background-color: silver”> اضافه کنید. شما می توانید رنگ های مختلف و یا حتی کد هگزا سعی کنید. کلمات در علامت نقل قول به عنوان “صفات” شناخته می شوند. آنها باید با علامت نقل قول احاطه شوند!

تصویر به نام ایجاد یک وب سایت ساده با HTML مرحله ۸

یک متن را بین تگ های بدن بنویسید.

برای ایجاد متن به خط بعدی (مانند فشار دادن «Enter» در صفحه کلید خود)، نوشتن <br> <br>
آیا میخواهید یک محوطه را اضافه کنید، در غیر این صورت به عنوان یک کلمه که در یک صفحه حرکت میکند، شناخته میشود؟ به سادگی <marquee> TEXT GOES HERE </ marquee> را تایپ کنید.



چند عکس اضافه کنید اگر می خواهید یک تصویر از اینترنت را روی صفحه وب خود قرار دهید، کد HTML برای تصاویر <img src = “URL”> است. برچسب بسته:. با این حال، برچسب بسته شدن اختیاری است.

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


<title> صفحه وب من </ title>
<body bgcolor = “yellow”>
من عاشق wikiHow چون
<marquee> این بهترین وب سایت در جهان است </ marquee>
<img src = “http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif”> </ body>


کار خود را ذخیره کنید. به “save as” بروید، نام فایل را با یک پسوند .html (مانند “testfile.html”) قرار دهید و در زیر نوع فایل “تمام فایل ها” یا “متن” را انتخاب کنید. اگر هر دو انجام نشود، کار نخواهد کرد. برای پیدا کردن صفحه هر کجا که شما آن را ذخیره کردید، آن را دو بار کلیک کنید، و مرورگر وب پیش فرض شما باید صفحه وب بسیار خود را باز کند.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *