Scribd
Upload
698 views

HTML and CSS

Uploaded by

Mary Enitek
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
698 views

HTML and CSS

Uploaded by

Mary Enitek
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

‫برمجة صفحات االنترنت باستخدام‬

‫‪HTML and CSS‬‬


HTML ‫المكونات الرئيسية لصفحة‬
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>

2
Tags

Tags ‫• اهم عناصر ال‬

<html>...</html>

<head>...</head>

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

‫نصوص‬

3
‫القوائم‬

• ‫قوائم غير مرقمة‬


<ul>
<li> Apples
<li> Oranges
</ul>
• ‫قوائم مرقمة‬
• <ol>
<li> One
<li> Two
</ol>
• Can be nested

4
‫الجداول‬

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5
‫ما هي ال ‪CSS‬‬
‫)‪• CSS (Cascaded Style Sheets‬‬
‫يمكن أن توفر ‪ CSS‬الكثير من الوقت خالل البرمجة‬ ‫•‬
‫يتم استخدا@م ‪ CSS‬للتحكم في نمط وتخطيط العديد من صفحات الويب دفعة واحدة‬ ‫•‬
‫إنه ببساطة يفصل التصميم عن المحتوى‬ ‫•‬
‫تحدد األنماط كيفية عرض ‪HTML‬‬ ‫•‬

‫‪6‬‬
‫لماذا تستخدم األنماط؟‬

‫المستندات المكتوبة باستخدام ‪ CSS‬هي‬


‫‪Webpage‬‬
‫‪ .1‬أكثر مرونة‬
‫‪ .2‬قصيرة‬
‫‪Style-‬‬
‫‪Structure‬‬ ‫‪formattin‬‬ ‫‪ .3‬واضحة‬
‫‪g‬‬ ‫‪ .4‬تراعي أداة التنسيق األساسية‬
‫‪ .5‬تعطي سهولة إدارة المستندات المتعددة‬
‫‪(X)HTML‬‬ ‫‪CSS‬‬ ‫‪ .6‬توفير الوقت‬
‫‪ .7‬فرص جديدة في التنسيق‬

‫‪7‬‬
‫مثال‬

‫‪8‬‬
‫اساسيات‬
‫مكونة من ثالثة اجزاء‪:‬‬ ‫•‬
‫المحدد {الخاصية‪ :‬القيمة} }‪selector {property: value‬‬ ‫•‬
‫عادة ما يكون المحدد هو عنصر ‪ /‬عالمة ‪ HTML‬التي ترغب في تعريفها‬ ‫•‬
‫الخاصية هي السمة التي ترغب في تغييرها‬ ‫•‬
‫كل ممتلكات (‪ )property‬لها ‪Value‬‬ ‫•‬
‫إذا كانت القيمة عبارة عن كلمات متعددة ‪ ،‬فضع عالمات اقتباس حول القيمة‬ ‫•‬
‫}"‪p {font-family: "sans serif‬‬ ‫•‬
‫لجعل تعريفات األنماط أكثر قابلية للقراءة ‪ ،‬يمكنك وصف خاصية واحدة في كل‬ ‫•‬
‫سطر‬
‫‪p‬‬
‫{‬
‫;‪text-align: center‬‬
‫;‪color: black‬‬
‫‪font-family: arial‬‬
‫}‬
‫‪9‬‬
‫المجموعات‬

h1,h2,h3,h4,h5,h6
{
color: green
}

‫جميع العناوين ستظهر باللون االخضر‬ •

This is header h1
This is header h2
This is header h3
This is header h4

10
‫مزايا صفحات الويب الديناميكية‬

‫ يمكنك تحديد أنماط مختلفة لنفس النوع من عنصر‬، ‫باستخدام محدد الفئة‬
HTML.

p.right {text-align: right}


p.center {text-align: center}
• Using the class argument in (X)HTML:
<p class="right"> This paragraph will
be right-aligned. </p>
<p class="center"> This paragraph will
be center-aligned. </p>

11
• Element Selectors – (refer to HTML tags)
H1 {color: purple;}
H1, H2, P {color: purple;}
• Contextual – (refer to HTML, but in context)
LI B {color: purple;}

12
‫كيف يمكن تطبيقها؟‬

• Class Selectors

H1.warning {color: red;}


OR to an entire class…
.warning {color:green;}

– In your HTML code -

<H1 CLASS=“warning”>Danger!</H1>
<P CLASS=“warning”>Be careful…</P>

13
‫كيف يمكن استدعائها‬

1. ‫اعدادت المتصفح االفتراضية‬


2. External style sheet
 inside external *.css file
3. Internal style sheet
 inside the <head> tag
4. Inline style
 inside an HTML element

14
External style sheet

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

link ‫يجب أن ترتبط كل صفحة ويب بورقة األنماط باستخدام عالمة‬ •


mystyle.css ‫يقرأ المتصفح تعريفات األنماط من ملف‬ •

15
Internal Style Sheet

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>

‫يجب استخدامه عندما يكون لمستند واحد نمط فريد‬ •


style ‫ باستخدام عالمة‬Head ‫تم تعريفه في‬ •

16
Inline Style

<body>

<h1 style=“color:30 ; text-size:18”> Welcome </h1>

</body>

HTML ‫ بالداخل@ في عالمات‬CSS ‫تتم كتابة نمط‬

17
‫االستدعاء باكثر من طريقة‬

• An internal style sheet has following properties for


the h3 selector:
h3 { text-align: right;
font-size: 20pt }
• External style sheet has these:
h3 { color: red;
text-align: left;
font-size: 8pt }
• Your Web Browser has default formatting:
h3 { color: black;
font size: 10pt }
‫؟؟‬h3 ‫ماذا ستكون اعدادات‬
o color: red;
o text-align: right;
o font-size: 20pt

18
‫أمثلة على ‪CSS‬‬

‫‪19‬‬
‫النصوص‬
• color • text-decoration
• direction – none
– ltr underline
rtl overline
• word spacing line-through
blink
– normal
• text-align
length
– left
right
center
justify

20
‫أمثلة على ‪CSS‬‬

‫‪21‬‬
‫الخطوط‬
• font-family • font-weigh
• family-name – normal
generic-family bold
• font-size bolder
– xx-small lighter
x-small 100
small
– /etc./

22
‫أمثلة على ‪CSS‬‬

‫‪23‬‬
‫القوائم‬
<head>
<style type="text/css">
ul
{
list-style-image:
url('arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

24
CSS Box Model
‫ مربعات‬HTML ‫ تعتبر عناصر‬، CSS ‫في‬ .1
• The Box Model consists of:
1. Margin
2. Border
3. Padding
4. The Actual Content

25
‫عناصر طول وعرض الصفحة‬
‫هام‪ :‬عندما تقوم بتعيين خصائص العرض واالرتفاع لعنصر باستخدام‬ ‫‪.1‬‬
‫‪ ، CSS‬فإنك تقوم فقط بتعيين عرض وارتفاع منطقة‬
‫المحتوى‪Content Area‬‬
‫ضا إضافة المساحة المتروكة‬
‫لحساب الحجم الكامل لعنصر ما ‪ ،‬يجب أي ً‬ ‫‪.2‬‬
‫والحدود والهوامش‪.‬‬
‫العرض اإلجمالي للعنصر في المثال أدناه هو ‪ 300‬بكسل‪:‬‬ ‫‪.3‬‬

‫‪26‬‬
‫المثال‬
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

‫ بكسل؟‬300 ‫كيف تم حسابها‬


250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

27
HTML Layouts
:‫ يمكنك إنشاء مواقع الويب باستخدام إما‬، HTML ‫ في‬.1
• <div> which is a block element
• <Tables> by specifying number of columns and
rows

28
‫روابط مفيدة‬

: div ‫مثال على‬ .1


http://www.w3schools.com/css/css_boxmodel.asp
http://www.w3schools.com/css/ :CSS ‫تعلم‬ .2
http://validator.w3.org/ .3
http://www.csszengarden.com/ .4

29

You might also like