HTML Syntax4:18
HTML - Basic Tags2:15
HTML5 Always starts with <!DOCTYPE html>
** Remember** head and body are inside html tag
<html>
<head> only main tags will remain here
</head>
<body> everything in body will be at the screen as output
</body>
</html>
HTML Elements in Detail5:27
********** HTML IS not case sensitive ********
in this episode we took : all heading tags , paragraph tag , br tag
HTTML Attributes3:11
All html elemnts have attributes , it provides additional info about the elements
** Attributes always specified at the start tag
** Attributes Syntax name/vale -> name ="value"
HTML - Headings2:31
HTML - Paragraphs7:18
HTML - Styles4:27
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
HTML - Text Formatting8:12
<p style="font-size: 20px;">Computer <b>programming</b> is the
process of <small> This is samll </small>performing a particular
computation (or more generally,
<strong>Hello</strong> a specific<mark>Marking </mark> computing result),
usually by <i>Emphasize </i>designing/building an executable
computer program.</p>
<p>
Html is not <del>Programming</del> language
</p>
<h1>Math</h1>
<p>x<sup>2</sup></p>
<h1>Science</h1>
<p>H<sub>2</sub>O</p>
HTML - Comments1:34
HTML - Colors5:19
Write on the body not heading it was a mistake :( sry
HTML - Hyper Links4:59
Write on body not the heading sry :(
HTML - Images3:49
HTML - Tables10:27

<table >
<tr >
<th>Name</th>
<th>Age</th>
<th>Grade</th>

</tr>
<tr>
<td>Ahmed</td>
<td>20</td>
<td>Very good </td>

</tr>
<tr>
<td>Samer</td>
<td>30</td>
<td> good </td>

</tr>

</table>
HTML - Lists6:30

<h1>Unordered Lists </h1>
<ul>
<li>Orange</li>
<li>Mango</li>
<li>Strawbarry</li>
</ul>
<h1>Ordered Lists</h1>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>

</ol>
<h1>Nested lists </h1>
<ol>
<li>Cars</li>
<ul>
<li>Mercedes</li>
<li>Toyota</li>
<li>Ford</li>
</ul>
<li>Mobiles</li>
<ul>
<li>Iphone</li>
<li>Samsung</li>
<li>Nokia</li>
</ul>

</ol>
HTML - Container5:00


<div style="background-color: red;">
<h1>This is heading</h1>
<p> Hello</p>
<ol>
<li>
First
</li>
</ol>

</div>
<span style="background-color: blue;">This is a span</span>
HTML - Frames4:05
<iframe scr="https://youtu.be/tgbNymZ7vqY"></iframe>
<iframe width="100%" height="300px" name="youtube" src="https://www.youtube.com/embed/tgbNymZ7vqY" title="YouTube video player"></iframe>
HTML - Classes8:42
<!DOCTYPE html>

<html lang="en">
<head>

<style>
/*to comment in css */
.brx {
color:blue;
background-color: red;
font-size: x-large;

}
/* id name's are same rules of programming variables*/
#id{
color : lightblue;
background-color: black;

}

</style>

<title>TITLE </title>
</head>
<body>

<h1 class="brx">CLASSES</h1>
<p class="brx">This is a paragrah</p>

<h1 id="id"> ID 'S </h1>
<p >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

</body>

</html>
HTML - Forms14:18
<!DOCTYPE html>

<html lang="en">
<head>

<title>TITLE </title>
</head>
<body>

<form>
<label for="fname">First name:</label>
<input type="text" id="fname">
<br><br>
<label for="lname">Last name :</label>
<input type="text" id="lname"><br><br>

</form>
<h1>Radio Buttons</h1>
<form>
<input type = "radio" id ="Mango">
<label for="Mango">Mango</label><br>
<input type = "radio" id ="Strawberry">
<label for="Strawberry">Strawberry</label>

</form>
<h1>Checkbox</h1>
<form>
<input type="checkbox" id="banana">
<label for="banana">Banana</label><br>
<input type="checkbox" id="Orange">
<label for="Orange">Orange</label><br>
<input type="submit" value="Submit">

</form>

</body>

</html>

Form in 5 Minutes7:19
<!DOCTYPE html>

<html lang="en">
<head>
<style>
.red{
color:whitesmoke;
background-color: red;
font-size: x-large;
font-family: 'Courier New', Courier, monospace;
}
.blue{
color:black;
background-color: brown;
font-size: x-large;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}
</style>

<title>TITLE </title>
</head>
<body>
<h1>Welcome to my Website</h1>

<form class="red">
<label for="fname">First name:</label>
<input type="text" id="fname">
<br><br>
<label for="lname">Last name :</label>
<input type="text" id="lname"><br><br>

</form>
<form class="blue">
<h3>Gender :</h3>
<input type = "radio" id ="Mango">
<label for="Mango">Male</label><br>
<input type = "radio" id ="Strawberry">
<label for="Strawberry">Female</label>

</form>
<form class="red">
<h3> Choose your skills </h3>
<input type="checkbox" id="banana">
<label for="banana">Smart</label><br>
<input type="checkbox" id="Orange">
<label for="Orange">Fast writing</label><br><br>
<input type="submit" value="Submit">

</form>
<h3>Websites</h3>
<p>Website: <a href="google.come">Google</a></p>
<p>Contact us on Number : +1584848765</p>

</body>

</html>

Requirements

لا تحتاج الى أي خبره مسبقة

Description

ستتعلم في الكورس أساسيات ال اتش تي ام ال ويمكنك أن تبني صفحتك الخاصة من الصفر.

ستتعلم كيف تكتب على صفحتك الخاصة وتزيينها بخصائص بدائية .

بعض الأسس التي ستتعلمها : paragraph, div , videos , styling a

<a> : هذا الوسم يُستخدم لعمل الروابط

<!DOCTYPE html> : هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html

<html>:هذا الوسم يحتوي على جميع وسوم لغة html ماعدا طبعا <!DOCTYPE html>

<div> : نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS

<dl>:تستخدم مع وسم <dd> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها.

<--...--!> : هذا الوسم يستخدم لكتابة شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة

<ul> : تستخدم مع وسم <li> وذلك لعمل قائمة غير مرتبة من الاشياء

<title>:هذا الوسم يُستخدم لتحدد عنوان الصفحة

<th>:هذا الوسم هو المسؤول عن إضافة العنوان (الجزء العلوي) داخل الجدول وبالتالي يكون داخل وسم ال <table>

<style> : يكون بداخلة اكواد لغة CSS وذلك لتنسيق الوسوم

<pre> : المحتوى الذي بداخل هذا الوسم يكون تم تنسيقة مسبقا

<ol>:تستخدم مع وسم <li> وذلك لعمل قائمة مرقمة او مرتبة

<iframe>:يستخدم لعمل إطار في الصفحة

هذه هي أهم التاغات التي نستخدمها في اللغة وسنتناولها في الكورس مع العديد من الأمثلة

بعد الانتهاء من الكورس يمكنك أن تبني صفحتك الخاصة كاملة من الصفر و أن تشاركها مع أصدقاءك

Who this course is for:

Beginners Frontend developers
HTML developers

HTML5 Crash Course [ in Arabic ]

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 8min

HTML Basics - أساسيات اللغة18 lectures • 1hr 42min

HTML - Full Website with HTML1 lecture • 7min

What is next ? ما بعد الكورس1 lecture • 1min

Requirements

Description

Who this course is for: