بسم الله الرحمان الرحيم
شاهد أيضاً: تعلم تصميم المواقع – تعلم HTML, HTML5, CSS, CSS3: المقدمة
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
احتياجات قبل البدء:
نظام التشغيل:
Windows أو Linux أو MAC OS …
متصفح ويب:
Chrome أو Firefox أو Opera …
محرر الأكواد:
Notepad++ أو Komodo Edit أو Netbeans أو Sublime Text …
أيقونات: https://www.iconfinder.com
ألوان: https://html-color-codes.info
المقدمة – Introduction:
إصدار HTML5 عبارة عن تحديثات جديدة وإصلاحات للغة HTML.
تم إطلاق هذا الإصدار في 2008 للتجربة من المبرمجين وفي 2011 نزل الإصدار مع وجود مشاكل التوافق مع المتصفحات وفي 2015 نزل الإصدار النهائي وأصبح معتمد في كل المتصفحات.
لاحتراف التعامل مع هذا الإصدار نحتاج إلى تعلم: HTML, CSS, JavaScript.
الغرض من تعلم HTML5: معرفة عناصر جديدة وتسهيل كتابة الكود وتنسيق شكل الصفحة بشكل أفضل وأسهل.
ملاحظات:
* Validity: إضافة على متصفح كروم لكشف الأخطاء في الصفحة
*MIME Type: لا نحتاج كتابتها في HTML5 مثلtype=”text/css”
مثال:
Code:
<!DOCTYPE html>
<html>
<!– HTML5 !–>
<head>
<meta charset=”utf-8″/>
<title> HTML 5 </title>
<link rel=”stylesheet” href=”style.css”/>
<script src=”file.js”> </script>
</head>
<body>
</body>
</html>
العناصر القديمة – Deprecated Tags:
هي عناصر تم استبدالها بعناصر أحدث منها ويمكن تجاهلها واستخدام بدائلها
أمثلة:
[acronym] تم استبدالها بـ abbr
[abbr]: وصف الكلمة
[applet] تم استبدالها بـ object
[object]: وضع فيديو او صورة مضمنة في الصفحة
[dir] تم استبدالها بقائمة ul أو ol
[frameset] [frame] [noframes]: وضع صفحات بداخل بعضها، تم استبدالها بـ iframe
[basefont] تنسيق الكلمات، تم استبدالها بـ CSS
[big] تكبير كلمة، تم استبدالها بـ CSS
[center] وضع الكلمة في الوسط، تم استبدالها بـ CSS
[font] تنسيق النصوص، تم استبدالها بـ CSS
[strike] نص عليه خط، تم استبدالها بـ CSS
[tt] تم استبدالها بـ CSS
المزيد من العناصر على هذا الرابط:
https://developer.mozilla.org/fr/docs/Web/HTML/Element
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
العناصر الجديدة – New Tags:
العناصر الجديدة في HTML5 هي:
Header, Nav, Article, Section, Footer, Main, Mark, Time, Progress, Details, Wbr, Figure, Dialog, Meter, Bdi
Main: عنصر رئيسي لا يتكرر في الصفحة
Mark: علامة على النص باللون الأصفر
Time: إدخال التاريخ، مفيد لـSEO.
Progress: عدات التقدم، يستخدم في Upload و Monitor وما شابه
Details: محتوى في القائمة مخفي، على سبيل المثال المراجع
Wbr: word break عنصر اختياري لعمل رجوع إلى السطر للفقرات الطويلة أو الروابط.
Figure: شرح الشكل الرئيسي للعنصر، يمكن استعماله في الصور وما شابه
* figcaption: وصف الشكل
Dialog: شعار منبثق
* open: مفتوح
Meter: عداد يمكن يرتفع أو ينخفض، على سبيل المثال عداد السيارات
عناصر meter:
http://codepen.io/pankajparashar/pen/GnFpA
أمثلة لـ meter:
http://codepen.io/pankajparashar/pen/Lce1j
* Bdi: عكس الاتجاه لتصحيح الاتجاه الأصلي
ملاحظة: كل هذه العناصر مثل DIV حيث يمكن تعريفها عن طريق الكلاسات class.
مثال:
الصورة1:
تتمة الصورة2:
تتمة الصورة3:
تتمة الصورة 4:
تتمة الصورة 5:
تتمة الصورة6:
الشكل على المتصفح:
مثال كود أسفل الصفحة Footer:
Code:
<!– Start Footer !–>
<footer>
إضافة 2021/1443 ©
</footer>
<!– End Footer !–>
عناصر لها دلالة لفظية – Semantics:
العناصر التي تكتب في الكود ولها دلالة لفظية.
مثال:
Code:
<header> </header>
<nav> </nav>
<section> </section>
<article> </article>
<footer> </footer>
<div class=”header”>
</div>
بنية الكود – Syntax:
يمكن كتابة الكود في HTML 5 بطرق متنوعة:
<code class=” ” أو class=’ ‘ أو class= أو class = >
<code CLASS=” ” Class=’ ‘>
ملاحظات:
* يمكن ترك العناصر مفتوحة ويتم غلقها تلقائيا.
* عند التعامل مع أكواد XML قد تحتاج إلى غلق العناصر.
مثال:
Code:
<p> Paragraph 1
<p> Paragraph 2 </p>
<img
class = ‘image’
src = “1.png”
width = “100”
height = “100”
alt = إضافة
title = إضافة >
توافق HTML 5:
لابد من تعريف العناصر للمتصفحات القديمة مثلInternet Explorer ويمكن عمل ذلك تلقائيا بـJavaScript مثلاً عن طريق تحميل ملف HTML5 Shiv من موقع github.
مثال:
Code:
<!– [if lt IE9]>
<script src=”html5shiv.min.js”> </script>
<![endif]–>
<article>
<section> Idafa </section>
</article>
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
شريط الفيديو – Video:
وضع فيديو في الصفحة.
تعريف العنصر:
<video> </video>
خواص العنصر:
controls: التحكم بالفيديو
<video controls>
width: عرض الفيديو
height: طول الفيديو
loop: تكرار الفيديو
<video loop>
muted: فيديو بدون صوت
<video muted>
autoplay: تشغيل تلقائي للفيديو
<video autoplay>
poster: صورة الفيديو
<video poster>
track: ترجمة الفيديو (.vtt: video text track شكل الترجمة)
<track src=”idafa.vtt”>
kind: نوع الترجمة
<track kind=”subtitles”>
(subtitles: ترجمة الكلام, caption: ترجمة المؤثرات, description: وصف, chapter: التقسيمات أو الأجزاء, metadata: المعلومات الوصفية)
srclang: اللغة
<track srclang=”ar”>
label: اختيار اللغات
<track label=”العربية“>
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
أنواع حقل البيانات الجديدة – New Form Input:
Color: قائمة اختيار الألوان
type=”color”
Range: المستوى
type=”range”
Number: حقل الارقام
type=”number” step=”10″
step: القفز
max: الحد الأقصى
max=”30″
min: الحد الأدنى
min=”0″
Email: البريد الإلكتروني
type=”email”
Search: حقل البحث
type=”search”
Url: حقل الرابط
type=”url”
Time: الوقت
type=”time”
Date: التاريخ
type=”date”
Datetime: الوقت والتاريخ
type=”datetime-local”
Month: الشهر
type=”month”
Week: الأسبوع
type=”week”
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
عناصر جديدة للنماذج – New Form Elements:
Disabled: الغاء تفعيل الحقل
<input disabled>
Required: حقل إجباري
<input required>
Autocomplete: الغاء تفعيل إكمال النص تلقائياً المحفوظ في الحقل
<input autocomplete=”off”>
Autofocus: تحديد حقل افتراضي
<input autofocus=”on”>
NoValidate: الغاء التحقق من الحقول
<form novalidate>
Action: ارسال المعلومات في الحقل
<form action=”.php”>
Method: كيفية ارسال البيانات في الخادم Server
<form method=””>
Get: ارسال بيانات تظهر في الرابط
Post: ارسال بيانات مع الصفحة لا تظهر بالرابط
formaction & formmethod: عمل override لارسال البيانات
<input formaction=”.php”>
<input formmethod=””>
EncType: نوع تشفير البيانات
يتم تشفير النص في الرابط URL من نوع ASCCI
<form enctype=””>
id: ربط حقل الإدخال باكثر من نموذج
<form id=”main-form”>
formvalidate: تأكيد override للنموذج الاصلي
<input formvalidate>
تعطيل الخاصية مؤقتاً: formnovalidate
formtarget: كيفية فتح الرابط من خلال النموذج
<input formtarget=”_blank”>
placeholder: توضيح ماذا سنكتب في الحقل (مختلف تماما عن value)
<input placeholder=””>
multiple: عناصر متعددة، يستخدم مع حقل الايميل والملف.
<input multiple>
Pattern: تحديد الكلمات في الحقل
<input pattern=”[A-Z]{6}”>
يستخدم في text و search و tel و email و url فقط
ReadOnly: للقراءة فقط
<input readonly>
لا يعمل مع خواص heading, color,range,textbox, submit, button
الفرق بينه وبين Disabled:
* يتم إرسال قيمة readonly عبر الخادم Server في الرابط عكس disabled لا ترسل.
* يمكن استخدام focus مع readonly عكس disabled لا يمكن.
Datalist: قائمة البيانات ويمكن الاختيار منها
<datalist> </datalist>
Output: اظهار ناتج عملية حسابية في نموذج
<output> </output>
مثال:
تتمة الصورة:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
القوائم الجانبية – Sidebar:
إنشاء أعمدة في وسط أو يمين أو يسار الصفحة (Widgets)
<aside> </aside>
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الصوتيات – Audio:
وضع ملف صوتي:
<audio> </audio>
تحديد مصدر الملف الصوتي:
<source>
الخواص:
MME: type of audio
controls: التحكم بالصوت
<audio controls>
autoplay: تشغيل تلقائي
<audio autoplay>
loop: تكرار تلقائي
<audio loop>
muted: تشغيل ووقف الصوت
<audio muted>
preload: إعادة تشغيل تلقائي في المتصفح
<audio reload=”auto”>
auto: تلقائي, none: عدم تشغيل الملف الصوتي, metadata: المعلومات الوصفية
مثال:
الشكل على المتصفح:
إنشاء تصميم Canvas:
يتم عمل تصميم Canvas عن طريق كتابة أكواد جافا سكربت في ملف “.js” واستدعاؤه في ملف HTML، ويمكن استخدامه بدلاً عن CSS وأكواد HTML.
ميزاته:
– Interactive: تفاعلي، كل عنصر موجود في تصميمCanvas يمكن التحكم به بواسطة جافا سكربت.
– Animation: يمكن عمل تصاميم متحركة لكل عنصر
– Flexibility: المرونة، يمكن عمل أي شيئ في الصفحة من دون قيود
– Support: يدعم جميع المتصفحات من دون اسثتناء
– Web Standard: لا يحتاج الى متطلبات أخرى لإستخدامه، فهو جزء (api) من لغة HTML5.
– Development: نحتاج محرر اكواد ومتصفح فقط لبدء التطوير.
يمكن استخدام تصميمCanvas في تصميم إعلانات تفاعلية وتقديمات مشابهة لـPowerpoint أو أي تصاميم مماثلة…
نحتاج ملفين خارجين JavaScript لكتابة الأكواد بداخلهما واستدعاؤهم في ملف HTML:
canvas.js ; file.js
شرح بعض أكواد جافا سكربت:
#080: اللون الأخضر، #F00: اللون الأحمر، #00F: اللون الأزرق، #F0F: اللون البنفسجي
fillStyle: الشكل, fillRect: مستطيل (x, y, width, height)
x: حركة إلى اليمين, y: حركة إلى الأسفل, width, height: طول وعرض الشكل
strokeRect, strokeStyle: ملئ الحواف فقط “Border“
lineWidth: زيادة حجم الحواف“Border“
clearRect: استثناء جزء معين من المستطيل
lineWidth: حجم الخط بالعرض
moveTo: انتقل الى (مكان بدئ الخط)
lineTo: الخط
stroke: إظهار
myContext.font: اختيار نوع الخط
strokeText: عمل حواف “Border” لنص فارغ من الداخل
مثال:
Code:
<html>
<head>
<meta charset=”utf-8″/>
<title> Canvas: إنشاء تصميم</title>
<link rel=”stylesheet” href=”style.css”/>
</head>
<body>
<!– <canvas id=”c” width=”300″ height=”300″> </canvas>
<script src=”file.js”> </script> –>
<script src=”canvas.js”> </script>
</body>
</html>
ملف canvas.js:
ملف file.js:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
إنشاء تصميم SVG:
SVG اختصار لـ Scalable Vector Graphics، وهو تصميم مفتوح المصدر وموصى به من طرف W3، يتميز عن Canvas بجودة التصميم حيث لا تتأثر جودة الصورة عند تقريبها أو إبعادها Zoom.
SVG هو عبارة عن ملف XML ويمكن كتابة الكود في ملف HTML5 مباشرة أو في ملف SVG ثم استدعاؤه، وهو كود مختلف عن الصورة ويمكن ضغطه Minify.
برامج لإنشاء SVG:
Inkscape – Illustrator – Adobe Fireworks – Sketch
تعريف اصدار SVG:
xmlnx=”http://www.w3.org/2000/svg”
الدائرة والمستطيلRectangle & Cercle:
نصف القطر redius:
rx=”” ry=””
مستطيل:
<rect />
دائرة:
<circle />
تحريك الدائرة من الجانب (عرضا وطولا):
cx=””, cy=””
تحريك الدائرة من القطر (الوسط):
r=””
اللون:
fill=””
استخدام CSS:
stroke: عمل حواف “Border”
stroke-width: تحديد حجم الحواف “Border”
opacity: الشفافية
hover: تغيير اللون تلقائياً
وضع اكواد css داخل العنصر:
style:=””
يمكن كتابة رسالة في الكود على المتصفحات غير المدعومة، على سبيل المثال:
متصفحك لا يدعم تقنية SVG
Your Browser Does Not Support SVG
شبيه الدائرة Ellipse:
الفرق بينه وبين الدائرة: يمكن تحديد العرض والطول (rx, ry) عكس الدائرة
الخط Line:
المكان الذي يبدأ منه الخط:
x1=””, y1=””
المكان الذي ينتهي فيه الخط:
x2=””, y2=””
الفرق بين SVG و Canvas:
SVG:
– التصميم واضح مع الزووم Zoom (إبعاد أو تقريب الصورة)
– يستخدم في التطبيقات الكبيرة وتصميم الأيقونات
– لا يمكن حفظه كصورة
Canvas:
– التصميم باهت مع الزووم Zoom (إبعاد أو تقريب الصورة)
– خاص بالألعاب
– يمكن حفظه كصورة لانه مكتوب بجافا سكربت
مثال:
الشكل على المتصفح:
ملفات CSS:
stylesvg.css
