Scribd
Upload
730 views

HTML and CSS

Uploaded by

Mary Enitek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
730 views

HTML and CSS

Uploaded by

Mary Enitek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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