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

بایگانی برچسب‌ها : html

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

آموزش html 5 + دانلود کتاب

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

 

HTML5 یا زبان نشانه‌گذاری ابرمتنی ۵ یا اچ‌تی‌ام‌ال۵ (به انگلیسی: HyperText Markup Language5 یا HTML5) زبانی برای ساختن و ارائهٔ محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان در دست توسعه‌است.

اچ‌تی‌ام‌ال۵ شامل جزئیات مدل‌های پردازش است تا پیاده‌سازی سازگارتری داشته باشد. اچ‌تی‌ام‌ال۵ نشانه گذاری برای اسناد در دسترس را گسترش می‌دهد، بهبود می‌بخشد و توجیه می‌کند. هم چنین نشانه‌گذاری و رابط برنامه‌نویسی کاربردی (APIها) را برای برنامه‌های پیچیده تحت وب معرفی می‌کند. به همین دلیل، HTML5 کاندیدای بالقوه برای برنامه‌های کاربردی تلفن همراه کراس پلت فرم است. بسیاری از ویژگی‌های HTML۵ با در نظر گرفتن توانایی اجرا بر روی دستگاه‌های کم قدرت مانند گوشی‌های هوشمند و تبلت‌ها ساخته شده‌است.

 

برای مطالعه ی و یادگیری جز به جز با ما همراه باشید .

[email-download-link namefield=”YES” id=”40″]

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
آموزش CSS - نحوه انتخاب المان‌های HTML - طراحی سایت در کرج شرکت کیان تجارت فاوا

آموزش CSS – نحوه انتخاب المان‌های HTML

آموزش CSS – نحوه انتخاب المان‌های HTMLطراحی سایت در کرج شرکت کیان تجارت فاوا

CSS Selector چیست؟

انتخاب‌ کردن یک المان اچی تی ام ال، یکی از مهمترین قواعد CSS است. در واقع شما برای اینکه یک المان HTML  را درCSS تغییر دهید اول باید  آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن CSS می‌گویند و شما با کمک انتخابگر، المان HTML مورد نظر را انتخاب یا پیدا می‌کنید.

برای صدا کردن یک المان HTML ، نیاز داریم که اسم آن را صدا بزنیم. المان‌های HTML هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته می‌شوند و لینک‌ها با تگ a شناخته می‌شوند. در واقع تگ‌هایHTML نام‌های عمومی هستند و اگر شما از آن‌ها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.

مثلا در زیر ما نوشته‌ایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کرده‌ایم.

HTML

<p>متن اول</p>

<p>متن دوم</p>

<p>متن سوم</p>

CSS

 p {

color: #۹۹CC00;

}

متن اول

متن دوم

متن سوم

حالا از خودتان می‌پرسید اگر ما قصد تغییر همه پاراگراف‌ها را نداشته باشیم و تنها بخواهیم یکی از المان‌ها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class‌ به کار می‌آید. کلاس و id در واقع بهترین روش برای انتخاب المان‌ها در CSS و HTML است.

برای درک بهترکلاس و ID مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل “محمد” حضور دارند، کلمه “محمد”  را صدا بزنید. در این صورت تمامی محمدها مخاطب شما خواهند شد و به حرف  شما گوش خواهند داد. در CSS هم همین گونه است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های HTML را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.

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

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

اضافه کردن ID به المان‌های HTML :

در قدم اول ما باید المان‌های HTML مان را دارای یک آی‌دی منحصر به فرد کنیم. مثلا  برای پاراگراف <“p id=”hi> می‌نویسیم که با <p> تفاوت دارد.  چرا که <“p id=”hi> دارای یک آی دی منحصر به فرد با نام hi است که توسط شما و با اضافه کردن اتریبیوت id به دست آمده است.

پس برای اضافه کردن ID به هر المان HTML کلمه ID را در تگ مورد نظر یادداشت کرده و در مقابل آن "نام آی‌دی"= را می‌نویسیم:

ID = ” نام آی‌دی مورد نظر”

حالا که با نحوه‌ی اضافه کردن id به المان‌های HTML آشنا شدیم؛ در قدم دوم وقت آن رسیده است تا آن‌ها را با CSS انتخاب کنیم. برای انتخاب یکID خاص در سی اس اس باید علامت # و سپس نامی که به عنوان ID به المان داده‌ایم را بنویسیم.

برای مثال ما در زیر المان‌هایی که دارای ID منحصر به فرد hi# هستند،  انتخاب کرده‌ایم و قوانین دلخواهمان را بر روی آن اعمال کرده‌ایم.

HTML

<p id =”hi”> متنی که دارای آی‌دی hi است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>

CSS

#hi{
text-align: center;
color:  #ff6600;
}

متنی که دارای آی‌دی hi است را توسط CSS انتخاب می‌کنیم تا آن را تغییر دهیم.

انتخاب از طریق کلاس:

راه حل دیگر برای تغییر همزمان چند المان استفاده از قابلیت کلاس است. کلاس مانند فامیلی برای همان مثال آدم‌ها و خیابان است. بدین ترتیب که شما این دفعه فامیلی فرد را صدا می‌زنید و ممکن است یک یا چند نفر مخاطب شما باشند. شما با اضافه کردن اتریبیوت class به المان‌های HTML خود می‌توانید به صورت همزمان یک استایل و شمایل دلخواه به همه آن‌ها بدهید. مثلا فرض کنید می‌خواهید تیترهای مطلب را با رنگ آبی نشان دهید و تیترهایی که در کنار صفحه و بالای منوها قرار دارند را با همان رنگ مشکی پیش‌فرض نشان داده شود.

در قدم اول، المان‌های صفحه اچ تی ام ال (هر چند تا که دوست داریم تغییر کنند)‌ کلاس اضافه می‌کنیم.

در این مثال باید به تمامی هدرهایی که در متن قرار دارد کلاس دلخواه را بدهیم. بدین ترتیب تمامی این هدرها که دارای این کلاس شوند از چنین استایلی بهره‌مند خواهند شد.

HTML

<p  class=”ghermez”> هر تگی که دارای کلاس ghermez است را توسط سی‌اس‌اس انتخاب می‌کنیم تا آن را تغییر دهیم.</p>
<h2 class=”ghermez”>عنوان دارای کلاس قرمز</h2>
<h3 class=”ghermez”>عنوان دارای کلاس قرمز</h3>

CSS

.ghermez{
color:  red;
}

هر تگی که دارای کلاس ghermez است را توسط CSS انتخاب می‌کنیم تا آن را تغییر دهیم.

 عنوان دارای کلاس قرمز

روش‌های بالا روش‌های کلی انتخاب المان‌های HTML توسط CSS هستند. اما هنوز هم می‌توانید با ترکیب این روش‌ها، دامنه‌ی محدوتری را انتخاب کنید. مثلا اگر قصد داشته باشید بگویید تمامی تگ‌های فلان که دارای کلاس فلان هستند. مثلا تمامی تگ‌های پاراگرافی که دارای کلاس abi هستند. مثال:

HTML

<p class=”abi”>من یک متن با کلاس آبی هستم</p>

<h3 class=”abi”>من یک عنوان با کلاس آبی هستم.</h3>

<p  class=”red”>من هم یک متن با کلاس قرمز هستم.</p>

CSS

p.abi{
color: #۰۰CCFF;
}

 من یک متن با کلاس آبی هستم

من یک عنوان با کلاس آبی هستم.

من هم یک متن با کلاس قرمز هستم.

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس ABI هستند دیگر مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

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

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

 

Tagged