Post on 21-Feb-2017
۱۳۹۵بهمن ۱۸دوشنبه
سلیمانی پورروح الله: مدرسr.soleimanipour@gmail.com
دانشگاه آزاد اسالمی، واحد علوم و تحقیقات تهراندانش شناسیدانشجوی دکتری علم اطالعات و مرکز تحقیقات کامپیوتری نوربرنامه طرح و اداره وبکارشناس بخش
(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
<!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
Open tag
Close tag
<!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
<!DOCTYPE html><html>
<head><title> Page Title </title>
</head><body>
<h1> This is a Heading </h1><p> This is a paragraph.</p>
</body></html>
Html Head
<!DOCTYPE html><html>
<head><title> Page Title </title>
</head><body>
<h1> This is a Heading </h1><p> This is a paragraph.</p>
</body></html>
Html 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>
Page title
<!DOCTYPE html><html>
<head><title> Page Title </title>
</head><body>
<h1> This is a Heading </h1><p> This is a paragraph.</p>
</body></html>
نشانه گذاری یک تیتر
<!DOCTYPE html><html>
<head><title> Page Title </title>
</head><body>
<h1> This is a Heading </h1><p> This is a paragraph.</p>
</body></html>
نشانه گذاری یک پاراگراف
<!DOCTYPE html><html>
<head><title> Page Title </title>
</head><body>
<h1> This is a Heading </h1><p> This is a paragraph.</p>
</body></html>
Declaration
ش آنتعریف فایل به مرورگر برای نمای: اعالن
<!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
(: تندزوج هس)تگ های اچ تی ام ال معموال از دو بخش تشکیل می شوند
<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>
<!DOCTYPE html><html>
<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>
<!DOCTYPE html><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;}
، شامل یادداشت های سی اس اسو تی ام الاچ کدهایدر کامنت ها:سازنده صفحه وب است که مرورگر آنرا نادیده می گیرد
<!-- Write your comments here --> 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)وبسایتطراحی ساعته ۴کارگاه وبسایت هابا هدف آشنایی کلی با اصول طراحی
۱۳۹۵بهمن ۱۸دوشنبه عمومی استان قمکتابخانه هایکل اداره ـ قم
سلیمانی پورروح الله: مدرسr.soleimanipour@gmail.com
دانشگاه آزاد اسالمی، واحد علوم و تحقیقات تهراندانش شناسیدکتری علم اطالعات و دانشجوی مرکز تحقیقات کامپیوتری نوربرنامه طرح و اداره وبکارشناس بخش
(lib.ir)ایران کتابخانه هایاطالع رسانیکارشناس پژوهشی پایگاه
:برگزارکنندگانایران، شاخه قماطالع رسانیانجمن کتابداری و
عمومی استان قمکتابخانه هایاداره کل دانششریف پردازشگرشرکت