طراحی وب سایت در کرج
026-34204893
09101013858

آموزش HTML

آموزش اچ تی ام ال - HTML |طراحی سایت در کرج | کیان تجارت فاوا

آموزش اچ تی ام ال

آموزش اچ تی ام ال

ساخت یک سند HTML

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

ما در این آموزش اچ تی ام ال، به شما نحوه ایجاد یک فایل اچ تی ام ال را در برنامه ویرایش متن پیش فرض ویندوز، یعنی نوت پد Notepad آموزش می‌دهیم.

مرحله اول: در نسخه‌های قبل از ویندوز ۸، بر روی دکمه Start ویندوز کلیک کنید. سپس از بخش All Programs وارد بخش Accessories شوید و از آنجا برنامه Notepad را اجرا کنید. در ویندوز ۸ یا نسخه‌های جدیدتر نیز منوی استارت (گوشه سمت چپ صفحه) را کلیک کرده و کلمه Notepad را تایپ کنید تا برنامه در لیست روبرویتان قرار گیرد. حالا متن کدها را در فایل متنی که باز کرده‌ایم وارد می‌کنیم. در حال حاضر چون متنی را نمی‌دانیم هر چه دوست دارید در آن بنویسید و به مرحله بعدی بروید.

مرحله دوم: حالا وقت ذخیره فایل در آموزش اچ تی ام ال (قالب صفحه اچ تی ام ال) است. برای این کار از منوی file در نرم افزار NotePad گزینه save As را انتخاب کنید. فایلتان را به نام دلخواه مثلا zoomit.Html تغییر دهید. توجه داشته باشید که حتما پسوند html. را بعد از نام دلخواهتان قرار دهید تا فرمت متن به یک سند اچ تی ام ال تبدیل شود.

مرحله سوم:‌ در این قسمت یک گزینه کشویی به نام encoding دیده می‌شود که بهتر است آن را روی UTF-8 قرار دهید.

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

 تگ‌ها (Tag):

ما در بین دو علامت <> قرار می‌گیرند. ما به این علامت و کلمه بین آن‌ها, اصطلاحا تگ اچ تی ام ال یا گاهی المان اچ تی ام ال می‌گوییم. به مثال زیر توجه کنید تا منظورمان را بهتر متوجه شوید:

<اسم تگ> متن یا هر چیز دیگر<اسم تگ به همراه علامت اسلش(/)>

<tagname> content </tagname>

به تگ اول opening tag و به تگ دوم Closing tag می‌گوییم. شما هر چه دوست دارید خطابشان کنید.

  • نمونه یک تگ باز کننده (همان فارسی openning tag است): <html>
  • نمونه یک تگ تمام کننده (معادل فارسی closing tag است): <html/>

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

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

 

Tagged
بخش اول آموزش html - طراحی وب سایت در کرج - شرکت طراحی سایت کیان تجارت فاوا

بخش اول آموزش html

بخش اول آموزش htmlطراحی وب سایت در کرجشرکت طراحی سایت کیان تجارت فاوا

html چیست ؟

زبان نشانه‌گذاری ابرمتنی  یا اچ‌تی‌ام‌ال، HTML یا HyperText Markup Language در کنار css هستهٔ فناوری ساخت صفحه‌های وب هستند.

اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است.

زبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند.

دستورالعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، با آن‌ها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود. تاکنون ۵ نسخه از اچ تی ام‌ال عرضه شده‌است.

هر یک از برچسب‌های html، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر درhtml تعریف شده‌اند.

یک سند html، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های html تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های html  هستند، تک‌تک آن‌ها را از داخل سند html خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

html زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول به کار می‌رود.

 

کدهای HTML و مفهوم آن

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

 

محتوای طراحی صفحات اینترنتی

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

لایه محتوی یا Content که با زبان html ایجاد می شود.

لایه نمایش یا Presentation که به وسیله زبان CSS ایجاد می شود.

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

 

برنامه های تحت طراحی وب به دو دسته تقسیم می شوند:

برنامه های استاتیک: برنامه هایی هستند که صفحات آنها از متن، تصویر، صوت و لینک ها … تشکیل شده اند و  درواقع این نوع صفحات با کاربر تعاملی ندارند و صرفا کاربر می تواند موارد داخل این صفحات را ببیند. زبان html در طراحی و ساخت صفحات استاتیک مورد استفاده قرار می گیرد. همچنین ظاهر صفحات وب را می توان با آن طراحی کرد.

برنامه های دینامیکی: برنامه هایی هستند که داده ای را از کاربر دریافت می کند و آن را مورد پردازش قرار می دهند، و در انتها نتیجه آن رابه کاربر نشان می دهد.

 

 

 

Tagged