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

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

اچ تی ام ال | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

چرا از اچ تی ام ال استفاده کنیم؟

چرا از اچ تی ام ال استفاده کنیم؟

زبان HTML (اچ تی ام ال)یا Hyper-Text Markup-Language زبان برنامه نویسی پذیرفته شده جهانی است که وب را قدرتمند میکند. قبل از معرفی HTML، طراحی یک صفحه وب به شدت محدود بود.

و از آنجا که هیچ ویرایشگر اچ تی ام ال  وجود نداشت، توسعه دهندگان وب مجبور بودند زبان برنامه نویسی را به عنوان یک دستورالعمل یاد بگیرند که موجب خستگی بیشتر آن شد.

با معرفی کد HTML، نیازی به تایپ کردن کد HTML از ابتدا نبود. از آن به بعد، بسیاری از ویراستاران HTML ظهور کرده اند و امروزه محبوب ترین آنها Front Page و Dreamweaver هستند.

اگر چه این ویراستاران دارای مثبت و منفی هستند، آنها در هنگام صحبت کردن در مورد HTML Coding بسیار کارآمد هستند. همانند هر زبان، هنگامی که شما آن را مدیریت می کنید، می توانید شروع به خودتان کنید، آن را وب سایت های ساده یا برنامه های کاربردی پیچیده وب.

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

نه تنها این به همان اندازه برای کسب و کارهای کوچک و رو به رشد است که واقعا نیازی به قابلیت های پیشرفته در وب سایت خود ندارند و همچنین سازمان های بزرگ که دارای مزایای فراوان هستند. در زیر برخی از نکات کلیدی استفاده از اچ تی ام ال برای ایجاد وب سایت شما هستند.

پشتیبانی مرورگر

بسیاری از مرورگرها در مقایسه با سایر زبان های برنامه نویسی وب از اچ تی ام ال پشتیبانی می کنند. تا زمانی که برنامه نویس تضمین کند که وبسایت را بهینه سازی کند، تقریبا در تمام وبسایتهای سراسر جهان نشان داده خواهد شد.

همچنین، بهینه سازی وب سایت مبتنی بر HTML برای سازگاری مرورگر به نظر نمی رسد.

رایگان

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

ابزارهای توسعه

تعداد زیادی از ابزارهای توسعه است که با HTML سازگار با هر زبان برنامه نویسی دیگر هستند. آن را FrontPage، DreamWeaver یا هر ابزار برنامه نویسی دیگر پیدا کردن یک ابزار توسعه یك كار مهم نخواهد بود.

موتور جستجوگر دوستانه

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

نتیجه

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

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

 

Tagged
اچ تی ام ال | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

HTML طراحی وب سایت

HTML طراحی وب سایت

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

اکثر ویراستاران تا حدودی مانند استفاده از یک پردازشگر کلمه هستند. شما باید چگونگی ایجاد یک فایل جدید، فایل خود را ذخیره کنید و فایل خود را در یک مرورگر مشاهده کنید. وقتی می توانید این کارها را انجام دهید، می توانید این کار را انجام دهید

دوستان خوب! نرم افزار طراحی خود را آتش بگذارید و شروع کنیم.یادداشتی برای کاربران ویرایشگرهای وب WYSIWYG مانند Dreamweaver:ویرایشگر شما هچ تی ام ال را برای شما ایجاد می کند و احتمالا به طور خودکار همه چیز را آموزش می دهد که من چگونه در این مقاله به صورت دستی انجام می دهم.

بنابراین شما می توانید همه چیز را در این مقاله در مورد اچ تی ام ال جست و خیز کنید. به همین دلیل است که شما یک ویرایشگر WYSIWYG دارید، درست است؟به عنوان یک طراح مناسب وب، به شما توصیه می کنم یاد بگیرید، حتی اگر ویرایشگر شما آن را به طور خودکار برای شما ایجاد کند.چرا؟

سه دلیل. یکی، اچ تی ام ال به صورت خودکار ایجاد می شود buggy یا clunky درست است. دو، خوب است بدانید چه چیزی ژنراتور کد خودکار خود را تولید می کند، در صورت نیاز به ویرایش هایی که ویرایشگر شما نمی تواند انجام دهد

(ویراستاران WYSIWYG نمی توانند همه چیز را انجام دهند، اگر چه Dreamweaver بسیار نزدیک است). سه، دانستن اچ تی ام ال برای اشکال زدایی موثر ضروری است.

تمپلیت

هر وبسایت از صفحات وب ساخته شده است و هر صفحه در ابتدا خالی است، بله؟

در ویرایشگر متن خود، زیر را تایپ کنید اگر شما از یک ویرایشگر WYSIWYG استفاده می کنید، احتمالا همه شما باید وارد آن شوید Hello، World. ویرایشگر متن این افراد این را تایپ می کنند:

<html>

<head>

<title>Example One</title>

</head>

<body>

Hello, Jersey City!

</body>

</html

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

در غیر این صورت، مرورگر خود را باز کرده و File را انتخاب کرده و سپس صفحه باز کنید. در اینترنت اکسپلورر، پس از آن بر روی Browse کلیک کنید تا فایل hello.html را پیدا کنید و در Netscape روی File Choose File کلیک کنید تا فایل hello.html را پیدا کنید.

شما باید یک صفحه کاملا خالی را در مرورگر خود با کلمات Hello، Jersey City ببینید! و نوار عنوان مرورگر باید یک مثال را بگوید. تبریک می گوییم، اولین گام کودک را برداشته اید.

تگ های HTML

کد های HTML یا برچسب ها توسط کمتر از (<) و بزرگتر از(>) نمادهای این اجازه می دهد که مرورگر بین کد های HTML و متن شما تفاوت کند. به عنوان مثال، توجه داشته باشید که در کد خود سلام، جرسی سیتی! با کمتر یا بیشتر از نماد ها محصور نمی شود.

 

Tagged
آموزش 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