Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

HTML5 For Beginners [ In Arabic]

Name: HTML5 For Beginners [ In Arabic]
Rating: 4.5 (43 reviews)

Learn HTML5 And Build Projects in details

Created byElAmir Mansour

Last updated 1/2023

Arabic

What you'll learn

HTML5 IN detail
Little CSS
Real world projects
The structure of the web

Course content

12 sections • 34 lectures • 4h 36m total length

Introduction about HTML53:24
What is an IDE?1:18
Overview about the two Projects1:25

HTML Headings3:47
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5 </h5>
<h6>this is heading 6</h6>
</body>
</html>
HTML Comments2:34
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>
HTML Paragraphs8:15
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<pre>
aaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbb

ccccccccccccccccc

dddddddddddddddddd
</pre>


</body>
</html>
HTML Text Formating10:48
<!DOCTYPE html>
<html>
<head>

</head>
<body>




<p>
This is a <b>paragraph</b> with b tag
</p>


<p>
This is a <strong>Paragraph</strong> with strong tag
</p>


<p>
This is a <i>Paragraph</i> with i tag
</p>

<p>
This is a <em>Paragraph</em> with em tag
</p>

<p>
This is a <small>Paragraph</small> with small tag
</p>

<p>
This is a <mark>Paragraph</mark> with mark tag
</p>


<p>
My name was <del>Ahmed</del> and now my name is Mohammed
</p>

<P>
the water in chemisty equals H<sub>2</sub>O
</P>

<P>
x<sup>2</sup> is euqals to x * x
</P>

</body>
</html>
What is an Attribute ?1:58
HTML Quotations12:51
<!DOCTYPE html>
<html>
<head>

</head>
<body>




<p>This is a quote about ahmed : </p>
<blockquote>
Ahmed is from egypt , he is 15 years old , and
he loves programming
</blockquote>



<p> Ahmed Shawki once said : </p>
<q> Live happy </q>


<p> The world <abbr title="World Health Organization">WHO</abbr> was found in 1950</p>


<address>

Written by ElAmir<br>

email : 15161@gmail.com<br>

Egypt-Cairo

</address>



<p> A book called <cite>Eaten by The Wolf</cite> is written by Ahmed</p>



<bdo dir="rtl">Hello i am trying to use the bdo</bdo>

</body>
</html>
Quiz

Basic styles ( attributes )9:59
<!DOCTYPE html>
<html>
<head>

</head>
<body>



<h1 style ="color:red">This is a red heading</h1>

<p style = "color:blue"> This is a blue pargraph</p>

<p style="background-color:brown">This is paragraph with brown background color </p>
<p style = "font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">This is a font family styling </p>
<p style="text-align:left"> This text is on right </p>

<p style="color:red;background-color:black">This is red text and background black</p>

</body>
</html>
CSS Colors2:21
<!DOCTYPE html>
<html>
<head>

</head>
<body>



<p style = "color :palevioletred"> This is the text color</p>

<p style = "background-color: blue;">The background color </p>

</body>
</html>
Connect CSS In 3 ways12:35
<!DOCTYPE html>
<html>
<head>

<style>
/*
Internal styling
*/

</style>


<link rel="stylesheet" href="styles.css">

</head>
<body>




<h1>This is a heading</h1>
<p >this is an example of inline styling</p>

<p> this is a random paragraph</p>

</body>
</html>
Quiz

Links3:00
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="styles.css">

</head>
<body>


<a href="https://www.google.com">google website</a>

</body>
</html>
Images in detail4:02
Always Specify alt, width, and height for Images

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="styles.css">

</head>
<body>


<h1>This is a picture </h1>

<img src="data:image/jpeg;base64,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" alt="this is a natural picture " style="width:250px ; height:250px;">

</body>
</html>
Favicon and Title2:39
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="styles.css">



<title>My HTML</title>
<link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKvBVIpTTVUxYltKcghiIQRbYA0qeXV6P6QaaBHxAzJA&s">

</head>
<body>

</body>
</html>
iFrames3:07
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<h1>This is an iframe example </h1>

<iframe src="file:///C:/Course/index.html" title="iframe example " width="200px" height="200px"></iframe>

</body>
</html>
Quiz

Border,padding,margin6:12
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>

h1{
border :2px solid red;
padding: 10px;
margin :30px;
}
</style>

</head>
<body>


<h1>This is a heading </h1>

<h1>This is another heading </h1>

</body>
</html>
Tables in detail15:38
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>

table,th,td{
border :2px solid black;
padding: 10px;
}
th{
color:aqua;
background-color:blueviolet;
}

</style>

</head>
<body>

<table>

<tr>

<th>first name </th>
<th>last name</th>
<th>age</th>

</tr>

<tr>

<td> Ahmed</td>
<td> Mahmoud </td>
<td>15</td>
</tr>
<tr>
<td> Hamad</td>
<td> Mohammed</td>
<td>20</td>
</tr>
<tr>
<td> Ali</td>
<td> Mohammed</td>
<td>20</td>
</tr>

</table>

</body>
</html>
Lists in detail12:54
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>

ul{
list-style-type:circle;
}

</style>
</head>
<body>


<h1>Example of nested lists </h1>

<h1>Coffe Shop List</h1>

<ul>
<li>Coffee</li>
<ul>
<li>Expresso </li>
<li>Turkish</li>
<li>French </li>
</ul>
<li>Tea</li>
<ul>
<li>Red tea</li>
<li>Green tea </li>

</ul>
<li>Juices</li>
</ul>

<h1>Ordered Lists Example</h1>

<ol type="A" start="1">
<li>Coffee</li>
<li>Tea</li>
<li>Juices </li>
</ol>

</body>
</html>
Quiz

The box Model ( div)4:35
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>

</style>
</head>
<body>

<div style="color:aqua; background-color: black;">
<h1>This is a Div elemnt</h1>
<p>This is a paragraph aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<ol>
<li>
Ahmed
</li>
<li>
Mohammed
</li>
</ol>
</div>

</body>
</html>
Block and inline elements4:37
نقدر نحول من
Block Element
ل
Inline element
باستخدام
display : inline , inline-block , block
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>

</style>
</head>
<body>


Hello this is a random text
<div style="background-color:red">
<h1>Hello this is a div</h1>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>



<p>This is an example of inline elemnts
<span style="background-color:red ;">Span example </span> and so on
</p>

</body>
</html>
Quiz

Class in detail8:25
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Class example
1- class names are case sensitive
2- you can use the class at any element in html
*/
.redfont{
color:red;
background-color: black;}
.redFont{
color:blue;
}

</style>
</head>
<body>

<p class="redfont">This is my first paragraph</p>
<p class="redfont">This is my second paragraph</p>

<p >This is my third paragraph</p>

<p >This is my fourth paragraph</p>

</body>
</html>
Id in detail4:30
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
/* ID example
1- case sensitive
2- cant start with a number or cant containt white spaces
*/
#myId{
background-color: black;
color: aqua;

}

</style>
</head>
<body>


<h1 id="myId">This is our ID Example</h1>
<h1 >Another heading </h1>

</body>
</html>
Links(Book marks)4:37
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>

<body>
<a href="#Chap6">Go to Chapter 6 </a><br>
<a href="#Chap17">Go to chapter 17</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 >Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="Chap6">Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 >Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="Chap17">Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
Quiz

Form Syntax and Types7:26
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>

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

</body>
</html>
Form Attributes and examples6:36
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>


<form action="page.php" method="post">
<label for="fname">first name : </label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name :</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</form>

</body>
</html>
Form Elements and examples12:16
Form input types and examples21:02
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>

<form>


<label for="fname">First name : </label>
<input type="text" id="fname" name="fname" value="Ahmed">
<br><br>
<label for="lname">last name : </label>
<input type="text" id="lname" name="lname" value="Hamad">
<br><br>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">
<br><br>
<input type="submit" value="Login">
<input type="reset">

</form>

<p>Choose your Langauge</p>

<form action="page.php">
<input type="radio" id="English" name="Language" value="English">
<label for="English">English</label>
<br>
<input type="radio" id="Arabic" name="Language" value="Arabic">
<label for="Arabic">Arabic</label>
<br>
<input type="radio" id="French" name="Language" value="French">
<label for="French">French</label>

</form>

<p>How many programming languages you know</p>
<form>


<input type="checkbox" id="lang1" name="lang1" value="java">
<label for="lang1"> Java </label>
<br>
<input type="checkbox" id="lang2" name="lang2" value="c#">
<label for="lang2"> C# </label>
<br>
<input type="checkbox" id="lang3" name="lang3" value="python">
<label for="lang3"> Python </label>

</form>

<p>Choose a color</p>
<form>
<label for="color">Choose your favorite color :</label>
<input type="color" id="color" name="color">
</form>


<form>
<label for="birthdate">Enter your brithday</label>
<input type="date" id="birthdate" name="birthdate" min="2000-01-02">

</form>

</body>
</html>
Form input attributes and examples11:49
<!DOCTYPE html>
<html>
<head>

<title>My HTML</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>


<form>
<label for="fname">first name </label>
<input type="text" id="fname" name="fname" value="ahmed">
<br><br>
<label for="lname">last name </label>
<input type="text" id="lname" name="lname" value="mohammed">
</form>


<br><br>
<form>
<label for="fname">first name </label>
<input type="text" id="fname" name="fname" value="ahmed" readonly>
<br><br>
<label for="lname">last name </label>
<input type="text" id="lname" name="lname" value="mohammed" disabled>
</form>



<form>
<label for="num">Enter a number : </label>
<input type="number" id="num" name="num" step="3">
</form><br><br>

<form>
<label for="fname">first name </label>
<input type="text" id="fname" name="fname" value="" size="5" maxlength="5">
<br><br>
</form>


<hr>
<form autocomplete="off">
<label for="fname">first name </label>
<input type="text" id="fname" name="fname" value="">
<br><br>
<label for="lname">last name </label>
<input type="text" id="lname" name="lname" value="">
<input type="submit" value="Submit">
</form>

</body>
</html>
Quiz

Requirements

Nothing

Description

أهلا بكم في كورس ال اتش تي ام ال 5 بالتفصيل ومع مشروعين.

قبل أي شيء يمكنك التواصل معي في أي نقطة من الكورس أو مناقشة أي شيء .

ماذا ستتعلم في الكورس ؟

ستتعلم أغلب وأهم التاغات الموجودة في ال html

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

بتتعلم بعض أساسيات الويب في ال css

لأنها مرتبطة جدا ب ال html

ستبني مشاريع من الصفر .

ستتعلم كيف تبني فورم كامل من الصفر و العناصر التي داخل الفورم .

هناك تاغز عديدة ك

( HTML , paragraphs , headings , form , h1 to h6 , lists underordered and ordered once , tables , borders , padding and margins )

بالمشروعين : هناك ملاحظات عديدة بحيث تتعلم منها وما تقع فيها وتقعد بالساعات بحثا عن مشكلة بسيطة جدا

تأكد من وجود أمثله عديدة بحيث المعلومة توصل بجميع جهاتها

كيف تذاكر الكورس ؟

ببساطة بعد كل جزئية في الكورس حاول انك تجربها بنفسك وتكتب أكتر من مره و تشوف النتائج وتقع في بعض الأخطاء لأنها اللي بتعلمنا , فتدرب عمليا كثير كثير كثير جدا لأنه أهم شيء

في حالة انك حابب تعرف معلومات أكتر عن عنوان معين في كورس ابحث عنه و في مليون موقع على الانترنت يمكنك الاستفادة عن معلومات أكثر عن ما تبحث عنه والتعمق فيه إن أردت

كلهم مع أمثلة تفصيلية وعملية .

أرجو التواصل معي في حالة احتجت الكورس ولم يكن بإمكانك دفع ثمنه , دون أي احراج تواصل معي بالخاص

Who this course is for:

Beginner Frontend developers
Beginner Web developers

HTML5 For Beginners [ In Arabic]

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 6min

HTML 5 - Main Tags (DOCTYPE)2 lectures • 9min

HTML5- Headings , Comments,Paragraphs, Text Formating6 lectures • 40min

CSS Basics ( Selectors )3 lectures • 25min

Links , Images ,Favicon,iframes4 lectures • 13min

Tables and Lists3 lectures • 35min

Inline and block elements2 lectures • 9min

Classes and id's3 lectures • 18min

Project 11 lecture • 26min

HTML Forms5 lectures • 59min

Requirements

Description

Who this course is for: