در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه

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


HTML چیست؟

ابتدا بهتر است درکی از زبان HTML و کاربرد آن داشته باشیم. HTML مخفف Hyper Text Markup Language که زبان پایه ی طراحی صفحات وب است می باشد. همانطور که گفتیم در طول این دوره در مورد HTML و CSS صحبت می کنیم. به طور کلی می توان HTML را به اسکلتی برای ساختمان تشبیه کرد که CSS کار نما و زیبا سازی ساختمان را برای ما انجام می دهد.

تاریخچه ی Markup Language ها و HTML

در زمان پیدایش وب ، زبان های مختلفی برای ساخت صفحات وب به وجود آمدند که به آن ها Markup Language (زبان نشانه گذاری)گفته می شد این زبان ها بر اساس پردازش متن کار می کردند. بعد ها در زمانی که تیم برنرزلی در زمان طراحی شبکه ی اینترنت از آن ها الهام گرفت و زبانی به نامhyper text markup language (نشانه گذاری فرا متنی) را طرح ریخت و آن را منتشر کرد و امروزه در تمامی وبسایت ها استفاده می شود.

از آن زمان تا به حال 5 نسخه از HTML منتشر شده که آخرین نسخه ی آن HTML 5 نامیده می شود این نسخه در سال 2014 توسط سازمان جهانی وب منتشر شد. که دارای امکانات بیشتری برای طراحی صفحات جذاب تر وب هست.کد های HTML پس از تفسیر توسط مرورگر ها به متون معمول تبدیل شده و نمایش داده می شوند. HTML به ما قابلیت گذاشتن متن ، جدول ،عکس ،لینک ، صدا و فیلم را می دهد.


تگ های HTML

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


قسمت اول که در بین <و> قرار دارد تگ شروع (start tag) و قسمت دوم که است تگ پایان (end tag) نامیده می شود.

بدیهی است که مرورگر tag های HTML را نشان نمی دهد فقط با استفاده از تگ ها نوع نمایش صفحه رو تعیین می کند.به طور کلی یک فایل HTML ساختاری شبیه به این دارد:

ساختار فایل html


کجا HTML بنویسیم؟

Editor های مختلفی برای HTML وجود دارد که چند تایی از آن ها در لیست زیر آورده شده اند:
  • Mictosoft Web Matrix
  • Notepad ++
  • Adobe Dreamweaver
  • Web Storm
  • Sublime text
  • Brackets
و...

ابتدا نرم افزار بسیار سبک Notepad ++ را از اینجا دانلود و نصب کنید.پس از نصب آماده ی نوشتن اولین صفحه ی HTML خودتون باشید.من در درایو D پوشه ی درست می کنم و نام اون رو Workspace در نظر می گیرم و در داخل اون من فولدر پروژه ی اول را درست می کنم.

project

سپس نرم افزار Notepad ++ رو باز می کنم.درون منوی Language در قسمت H گزینه ی HTML رو انتخاب می کنم.سپس فایل خودم را در فولدر project1 که درست کردم save می کنم.حالا می خواهیم شروع به نوشتن کد بکنیم.






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

تگ html در بر گیرنده ی کل فایل ما (به جز doctype ) خواهد بود. و در درون ان تگ body نشان دهنده ی شروع صفحه ی ماست.شما برای دیدن صفحه باید با مرورگر خودتون فایل HTML رو باز کنید. برای این کار روی فایل HTML راست کلیک کنید و با استفاده از Open With آن را با یکی از مرورگر های موجود باز کنید(ترجیها کروم یا فایر فاکس)در قسمت متن ها و Style ها آشنا می شویم.

ITPRO باشید!
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران
#طراحی_وب_با_html #آموزش_قدم_به_قدم_html #آموزش_html_به_زبان_ساده #آشنایی_با_html #آموزش_ساده_html #آموزش_طراحی_وبسایت #طراحی_صفحات_وب #آموزش_گام_به_گام_html #html_چیست؟ #طراحی_صفحات_وب_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
15 نظر
مهران سیفعلی نیا

به نظر من بهترین محیط برای این کار ++NotePad ،البته این نظر شخصیه ولی محیطش هم ساده ست و هم کمی هم کمک میکنه به تازه کارها برای تشخیص اشتباهات.

همچنین شما نوشتید:

<p> این یک بند است.</P>
<h1>این یک عنوان است.</h1>

فکر نمیکنید جا بجا باشه؟

یعنی:

<h1>این یک عنوان است.</h1>
<p> این یک بند است.</P>
کسری

به نظر من web storm خیلی راحت تره

فاطمه شیرازی

سلام

میشه قسمت های بعدی هم زودتر بذارید

پارسا صفوی

قسمت بعدی تا امشب ارسال می شود.

پارسا صفوی

قسم دوم و سوم روی سایت قرار گرفته اند.

فاطمه شیرازی

منظورم قسمت های چهارم هست و بعد از اون

پارسا صفوی

امشب قرار می گیرند.

فاطمه شیرازی

ممنون!من نیم ساعته تموم میکنم هر قسمت رو!

خیلی مشتاقم برای بقیه قسمت ها

Gelareh Soluki

shoma goftid ke roye file HTML rast click konim ama az koja?

Gelareh Soluki

شما برای دیدن صفحه باید با مرورگر خودتون فایل HTML رو باز کنید. برای این کار روی فایل HTML راست کلیک کنید و با استفاده از Open With آن را با یکی از مرورگر های موجود باز کنید(ترجیها کروم یا فایر فاکس)

man injaro nemifahmam!!

az koja inkaro konan

پارسا صفوی

جایی که فایل html هست رو باز می کنید سپس روی اون فایل کلیک راست کرده و سپس از داخل منوی ظاهر شده گزینه ی open with رو بزنید و یک مرورگر از صفحه ی باز شده انتخاب کنید.

Gelareh Soluki

mamnun...tag haro koja bayad nevesht?

dakhele hamin file html?

ya na ?

koja bayad tag ro benevisam?

پارسا صفوی

ما صفحه ی html رو با notepad ++ باز می کنیم و داخل اون تگ ها رو می نویسیم سپس صفحه رو برای دیدن نتایج جدید ریفرش می کنیم.

Gelareh Soluki

ممنونم

+9****+38

فک نمی کنید محصولتون خیلی گرونه؟ اینم در نظر بگیرید که دانشجو قراره ازتون خرید کنن 

لطفا قرمتارو بیارید پایین      

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

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