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

بایگانی برچسب‌ها : آموزش اچ تی ام ال

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

آموزش CSS – پس زمینه در CSS

آموزش CSS – پس زمینه در CSS طراحی سایت در کرج شرکت طراحی سایت کیان تجارت فاوا

پس زمینه در CSS

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

چگونگی اضافه کردن رنگ در css:

 روش اول -از طریق کد HEX:

در این مثال ابتدا علامت # قرار می‌دهیم و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال” fd0000 #”

روش دوم – کد RGB رنگ:

در این حالت باید کد RGB‌ رنگ را بدهید. ابتدا کلمه RGB را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد RGB در پرانتز و بین "" می‌نویسیم.”(RGB (255,0,0″

روش سوم – نوشتن نام رنگ‌های پیش‌فرض:

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود.  – مثال : “red” برای رنگ قرمز

رنگ پس زمینه:

  • نام : background-color
  • این ویژگی چه کاری انجام می‌دهد؟‌  تغییر رنگ پس‌زمینه المان‌های HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ رنگ‌ها که به هر ۳ صورتی که در بالاتر مرور کردیم قابل استفاده هستند.
  • نمونه نوشتن:  رنگ مورد نظر# : background-color
  •  مثال۲ –  background-color:  #ff0000
  •  مثال ۳- “(background-color: “rgb(255,0,0
  •  مثال ۴- background-color: blue

HTML

<div class=”bg-yelllow”><p>یک متن که داخل یک صفحه زرد قرار دارد</p></div>

CSS

bg-yellow {

background-color: yellow;

}

یک متن که داخل یک صفحه زرد رنگ قرار دارد

 

عکس پس‌زمینه:

شما در CSS و HTML می‌توانید تصویر پس زمینه یک المان را تغییر دهید. عکس پس زمینه درCSS  و HTML  بدین صورت نوشته می‌شود:

  • نام: background-image
  • این ویژگی چه کاری انجام می‌دهد؟‌   تغییر تصویر پس زمینه  هر نوع المانی در HTML
  • چه چیزهایی را در مقابلش بنویسیم؟ در این جا باید آدرس عکس مورد نظرتان را به CSS بدهید.
  • نمونه نوشتن:    (‘آدرس دقیق و کامل عکس در اینترنت’) background-image:   url
  • مثال:  (“background-image:    url (“zoomit.ir/axshoma.jpg

background-image: url(“KIANART/PIC.jpg”);

HTML

<div class=”bg-img”><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url(‘http://www.kianart.ir/media/b/items/..pic.jpg’);”

}

یک متن که داخل یک صفحه با تصویر زمینه قرار دارد

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین “” نوشته شود. ("url.png")

 

تکرار تصویر پس زمینه:

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

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-x;

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

برای تکرار تصویر در جهت عمودی نیز تنها کافیست تا این کد را برای راستای y بنویسیم.

background-image: url(“kianart.ir/t.png”);

background-repeat: repeat-y;

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

background-repeat:  no repeat;

 

Tagged