html & css

۱۳۹۵بهمن ۱۸دوشنبه

سلیمانی پورروح الله: مدرس[email protected]

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

(lib.ir)ایران کتابخانه هایاطالع رسانیکارشناس پژوهشی پایگاه

ایران، شاخه قماطالع رسانیکتابداری و انجمن

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

:مفاهیم کلیصفحه وب

وب سایتوب سرور

مرورگر وب

:فعالیت های مربوط به ایجاد وب سایت هااز ایجاد یک صفحه ساده وبتا ایجاد وب سایت های پیچیده

توسعه محتوای وببرنامه نویسی وب

امنیت وبجست وجوموتورهایبهینه سازی برای

طراحی رابط کاربر

:فعالیت های مربوط به ایجاد وب سایت

سازماندهی محتوای وب سایت: معماری اطالعاتذخیره محتوای وب سایت: طراحی دیتابیس یا پایگاه داده

ر با وب سایتتعیین چگونگی تعامل کارب: برنامه نویسی وب سایت گرنمایش اطالعات در مرور : طراحی رابط کاربر یا اینترفیس

ال . ام. تی. اچHyperText Markup Language (HTML)

(زنگام)تن مبراشانه گذاری نبان زصفحات وبزبان توصیف ساختار

ایت در زبانی برای تعیین چگونگی نمایش محتوای صفحات وب سمرورگر وب

زبانی برای طراحی قالب صفحات وب

کوچکبرچسب های حاوی متنی است، فایل یک HTMLفایل•( tag)نشانه گذاری

برچسب های نشانه گذاری، چگونگی نمایش صفحه وب و •محتویات آن را در مرورگر تعیین می کند

ذخیره شودhtmیا htmlباید با پسوند HTMLفایل•مانند ویرایشگر متنی ساده را می توان در یک HTMLفایل •

notepadایجاد کرد

(Elements)المان ها یا برچسب ها (Attributes)خصیصه ها

(Values)ٰمقادیر

<body bgcolor=”blue“> </body>

برچسب

خصیصه مقدار

.تندالمان ها یا برچسب ها شامل یک تگ باز و یک تگ بسته هس

<body> </body>

تگ باز تگ بسته

گیرد و قبل قرار میعالمت بزرگتر و عالمت کوچکتر نام تگ باز، میان گذاشته می شوداسلشاز نام تگ بسته یک

<body> </body>

عالمت کوچکتر اسلش

عالمت بزرگتر

<!DOCTYPE html><html>

<head><title> Page Title </title>

</head><body>

<h1> This is a Heading </h1><p> This is a paragraph.</p>

</body></html>

This is a HeadingThis is a paragraph

Page Title



</head><body>


</body></html>


Page Title

Open tag

Close tag



</head><body>


</body></html>


Page Title



</head><body>


</body></html>

Html Head



</head><body>


</body></html>

Html body



</head><body>


</body></html>

Page title



</head><body>


</body></html>

نشانه گذاری یک تیتر



</head><body>


</body></html>

نشانه گذاری یک پاراگراف



</head><body>


</body></html>

Declaration

ش آنتعریف فایل به مرورگر برای نمای: اعالن



</head><body>


</body></html>


Page Title

(: تندزوج هس)تگ های اچ تی ام ال معموال از دو بخش تشکیل می شوند

<p> </p>

Start tag/ Opening tag

End tag/ Closing tag

پاراگراف


<p> </p>

تگ باز یا تگ شروع

نتگ بسته یا تگ پایا

پاراگراف


<p> </p>

پایان پاراگراف

آغاز پاراگراف

پاراگراف

.دبعضی تگ ها به صورت فرد یا خالی می آی:خالی/ تگ فرد

<br />

برای شکستگی سطر

پایان سطر

ســـــــــــــــــــــــــــــــــــطر

آغاز سطر

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

<img src=“images/pic1.jpg” />

اسلش

فاصله

خصیصه

<a href="url"> link text </a>

<a href="http://www.w3schools.com/html"> Visit our HTML tutorial </a>

Visit our HTML tutorial

<table border="1" style="width:100%"><tr>

<td> Jill </td><td> Smith </td><td> 50 </td>

</tr><tr>

<td> Eve </td><td> Jackson </td><td> 94 </td>

</tr><tr>

<td> John </td><td> Doe </td><td> 80 </td>

</tr></table>

Jill Smith 50

Eve Jackson 94

John Doe 80

شیوه نمایش در مرورگر وب

تگ اصلی جدول

ستون

سطرها

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

۱۹۹۴: تأسیس(مخترع وب)تیم برنرز لی : مدیرشرکت و سازمان۳۸۵: اعضا

عه وبارائه کننده خودآموزها و منابع آموزشی مرجع در زمینه زبان های توس

HTML, CSS, JavaScript, PHP, SQL, and JQuery

NotepadMicrosoft Expression Web

What You See Is What You Get

WYSIWYG

دریافت عین مشاهده

ساده برای نمایش از زبان های نشانه گذاری و روشی سی اس اس در ( مانند نوع قلم، رنگ و اندازه ها)چیدمان و جلوه های تصویری

.وب استصفحه های

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

<p><font color=“blue”>

A new background and font color with inline CSS</font>

</p>

:شیوه های کاربرد سی اس اس در فایل های اچ تی ام ال(inline)ـ شیوه نامه درون خطی یا محلی

(Internal Style Sheet)ـ شیوه نامه داخلی (External Style Sheet)ـ شیوه نامه خارجی

<p style="color:blue;">A new background and font color with inline CSS

</p>

<p><font color=“blue”>

A new background and font color with inline CSS</font>

</p>


<head><title> page title </title>

<style>#para1 {

font-size:20px;color: red;

} #para2 {

font-size:10px;color: blue;

} </style>

</head><body>

<p id="para1">Every paragraph will be affected by the style.</p><p id="para2">Me too!</p>

</body></html>


<head><title> page title </title>

<style>

<link rel="stylesheet" type="text/css" href="theme.css">

</style></head>

<body><p id="para1">Every paragraph will be affected by the style.</p><p id="para2">Me too!</p>

</body></html>

theme.css

HTMLبه چندین فایل CSSهر فایل می تواند

دمتصل شود و مورد استفاده قرار بگیر

را می توان به یک صفحه CSSچند فایل HTMLپیوند زد

body {background-color: lightblue;

}

h1 {color: navy;margin-left: 20px;

}

رانتخابگاعالن

خصیصهمقدار

:استایل ها را به سه روش می توان تعیین کردHTMLـ بر اساس نام عناصر

، یعنی تعدادی از عناصر که با یکHTMLعناصر classـ بر اساس قرار کالس مشخص شده باشند تحت تأثیر خصیصه های مشترک

می گیرندکه در این صورت هر عنصر دارای یک HTMLعناصر idـ بر اساس

idمنحصر به فرد است و خصیصه های ویژه دارد

P {margin-top: 1em;

}

.class1 {background: white;

}.class2 {

background: blue;}

#id1 {color: blue;

}#id2 {

color: red;}

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

 HTML

/* This is a multi-line comment */ CSS

خصیصه های هر عنصر جداگانه تکرار می شد و حجم HTMLدر از مجموعه ایهر خصیصه را بر CSSزیادی کد تولید می شد اما در

می توان اعمال کردHTMLعناصر جدا کردHTMLرا می توان از تگ های CSSاستایل های برای ایجاد تنوع و جذابیت بیشتر استCSSقابلیت های

امکان مدیریت ویژگی ها و سبک های بخش های مختلفCSSبا صفحات وب بیشتر فراهم می شود

اکس اچ تی ام الزبان امتدادپذیر نشانه گذاری فرامتن یا Extensible HyperText Markup Language - XHTML

ات اچ تی ام ال است به همراه رعایت دقیق تمامی قواعد و دستور همان ان از که موجبات افزایش اطمیناکس ام ال نحوی نزدیک تر به زبان

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

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

.نوشته شود.باشد <HTML>ریشهحاوی یک عنصر باید XHTMLفایل

تهیه طرح اولیه•طراحی رابط کاربر در فتوشاپ•برش تصویر اصلی رابط کاربر در فتوشاپ• ال و اجرای طرح بر اساس تصاویر و رنگ ها با استفاده از اچ تی ام•

سی اس اس... و Ajax، (فلش)استفاده از جاوااسکریپت، تصاویر متحرک •

برای ایجاد عناصر پویا در اینترفیسآزمایش اینترفیس در مرورگرهای رایج•

(HTML, CSS, Wordpress, Photoshop)وبسایتطراحی ساعته ۴کارگاه وبسایت هابا هدف آشنایی کلی با اصول طراحی

۱۳۹۵بهمن ۱۸دوشنبه عمومی استان قمکتابخانه هایکل اداره ـ قم

سلیمانی پورروح الله: مدرس[email protected]

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

(lib.ir)ایران کتابخانه هایاطالع رسانیکارشناس پژوهشی پایگاه

:برگزارکنندگانایران، شاخه قماطالع رسانیانجمن کتابداری و

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

html & css

Technology