Вы находитесь на странице: 1из 12

Html Intro

==========
��� ������ ��
Hyber Text markup language
�� ��� ����� �������� �� ���� ����� ������� ���� ������ �������
��� ������ ���� ���� �� ����� ������ ����� ����� ����� �� ������� ��� ��� ����� ��
�� �� �� ���� ����������
��� ��� ������� �� �� �������� ������ ��� ��������
�������� �� ����� �� ���� ��� ����� ����� ������� ���� �� ���� ��� ����� ������ ���
<p> ��� �������
</p> ��� �������
����� ��� ������� �� ����� ��� ����� ��� ������ ������
���
<br> ��� ��� ����
<img src=""> ��� ��� ���� �� ����

���� ����� ����� ����� �� �� �� ���� ���� ��� ����� ������ ����� �� �� �� ����� ��
���� ��� ����� ������ ������

<!DOCTYPE html>
<html>
<head>
�� ������ ��� �� ������� ������ ������ �������� ������� ��� ������� �� ��������
����� �������
</head>

<body>
�� ������ ��� �� ��� ������ ����� �� �������� ����� ��� �� �������
</body>
</html>

���� ��� �� ����� �� ������ ���� �� ��������� ��������� � ������


<!DOCTYPE html>
�� ������ ��� �� �� �� ������� ������

What I need To start


====================
��� ������ ����� ����� �� �� �� ����� ����� �����
��� ����� ������� ������ ����� ��� ����� ��������� ���� ��� �� �� ���� ������
���� ���� ������ �� ���� ����� ����� ���
Comodo
Notepad++
Sublime

��� ������� �� ������� ������


<title>MY page title</title>
��� ����� ���� �� ����� ����� ������ ������ �� ����� �� �����

<h1>something here </h1>


������ ���� ����� ���� �� ���� ����� ����� ���� ��� ��� 6 ����� ��� ����� �� ���
����
<a href="https://www.youtube.com">Click here to goto google</a>
��� ����� ���� �� ����� �� ��� ���� ������� ��� ���� ����� ���� ������ �� ������
href

��
<a href="https://www.youtube.com" target="_blank">Click here to goto google</a>
���� ������ ������� ���� �� ����� ����

3# Attributes
=============
��������� �� ������ �� ����� �� ������ ������� ������ ���� ���� ����
��� ���� ���� ����� ����
��� ����� ����� ������ �� ��� ���� ���� ����� ����� ���� ����

<a href="https://www.youtube.com">Click here to goto google</a>


<img src="c:\malek.jpg">

���������� �� ������ �� ������� �������� ��� ��


href
src

���� �� ��� ������� ��� ��� �������

4# Heading
==========
��� ����� ���� ���� ����� ���� ����� ������ ������ ����
���� �������� ������� ���� ���� �� ����� ���� ��������� ��� ������ ������ ������
����� ������ ����� ��� ������ ���� ���� ������ ��� �� ����
��� ������ �� ������ ������ ����� ���� �� ��� �������� �� ����� ���� ����� ��
������
�� ���� ����� ����� �� ���� ��� ����� ������
������ ��� ����� �� �������� �� 6 ������� ������� ��� ��� 1 ����� ��� ����� �� ���
����

<h1>Your Sentence</h1>
<h2>Your Sentence</h2>
<h3>Your Sentence</h3>
<h4>Your Sentence</h4>
<h5>Your Sentence</h5>
<h6>Your Sentence</h6>

5# Paragraph
============
��� ������� ������ �� ������ ��� ����
��� ��� ���� ���� ����� ������ ��� ���� ����� ������ �� ������ ������ �� ��� ���
������� �������� ��� ��� ���� ��� ������ ����� ��� �� ��� �� ������ ����� ����
�����
������ ������ �� ���� ��� ����� �� ���

<p>
Hey Guys I'm Here
my name's malek
</p>
����� ����� �������� ��� ��� ���� ����� ����� ��� ������
���� ���� ���� ������ ����� ���� ���� �� ���� ��� ��� ��� ���
<br>

����

<p>
Hey Guys I'm Here
<br>
my name's malek
</p>

6# images
=========
��� �����
��� �� ������� ���� ���� ��� ����
������� ���� ���� ���� ����� ����� �� ���� ������
����� �������� ������� ����� ������ ��� ���� ��� ����� ����� �� ���� �� ���� �����
��� ��������
���� ���� �� ���� ����� ��� �������� ���� ������ ����� ��� �����
���� ��� ���� ��� ����� ����� ����� �������� ���� �����
��� ���� �� ���� ���� �� ������ ������� ���� ������ ��� ��� ������ ��� ���� ������
�����
���� ���� �� ��� ������� ������� �� ������ ��� ��� ������ ��� ��� ��� �������
������
���� ���� ������ ���� ����� ��� �� ��� ������� ������� �� ������ ��� ��� ������
���� ��� ������� �� ��� ������ ���������
���� ���� ������ �� ����� ��� ������� ������� ��� ������ ��� ��� ������ ����
�������� ���� ������� ���

<img src="https://www.google.com.eg/images/nav_logo242.png"> ���� �� ����

<img src="d:/malek.jpg"> �� ���� ���� �� ���� ������


<img src="malek.jpg"> �� ��� ������� ������� ��� ������
<img src="images/malek.jpg"> �� ����� ��� ���� ������� ������� �� ������
<img src="../malek.jpg"> �� ������� ������� ������ �� ���� �� ���� ���� �� ������
���

����� ������� ���� ���� ���� ����� ��� ������� ������ ���
alt="img couldn't loaded"
���� ��������� ���� ������ �� ������ �� �� ���� ��� ����� ������ ����� ��� ��

width="100" ������ ��� ������


height="100" ������ ��� ������

<img src="malek.jpg" alt="img couldn't loaded" width="100" height="100">

7# Anchor Links
===============
������� �������� ������ ������� ����
�������� �� �� �� ���� ���� ���� ���� ��� ���� ��� ������ ���� ������ �� ������
����� ����� ��� ��� ������
������� ���� ������ �� ������ ��� ������ ���� ������ ������� ���� ������
������� ���� ��� ������ �� ������ ��� �����
<a></a>
���� ����� �� ������ �� ��������� �� ������� ������ ���

href:����� ������ ������ ������ ������ ����


target:��� ����� ������ ����� ���� �� ��� ������ �� �� ����� ���� ��� ������
_blank �� ����� �� ����� ����
_self �� ����� �� ��� ������ ��� ��������

����
<a href="https://www.google.com" target="_blank">Google</a>
��� ���� �� ����� ����

��� ������ ������� ��� ����� �� ������ ���� ������ ��� ����� ����� ������ �������
���� ������ ������
���� �� ��� ������ ���� �� ���� ���� ���� ��� ���� ������ ���� �� ���� �� ������
���� �� ������� ����� ���� �������� �����
�� �� ���� ���� �� �� ... �� ��� ���� ����� ��� ������ �� ���� ���� ��� ���

���� ��� ���� ������ ����� �� ��� ������ ���� ������� �� �� ��� ��� ���
<p id="btm">bottom</p>

�� ���� ������ ��� ��� ������ �������


<a href="#btm">go to bottom</a>

8# Head Tages
=============
���� ������� ���� ��� ������� �� ����� ����� ������ɿ
���� ���� ������� ���� ���� �� ����� ����� ������� ����� �����

<meta charset="utf-8">
<meta name="description" content="this site doing something" >
<title>my page title</title>
<style></style>
<link rel="stylesheet" href="">
<script></script>

<meta charset="utf-8">
����� ����� ������ �������� �������� ��� �� ������� ������� ���� ���� ����� �������
�����������

<meta name="description" content="this site doing something" >


����� ��� ������ �������� ������� ������ ����� �� ������ �����

<title>my page title</title>


����� ������

<style></style>
������ ������ ������� ��� ��� ���� ��� ������ ������ ����� ������ ������ �������
������
<link rel="stylesheet" href="css/mystyle.css">
������ ��� ����� ������ �� ��� �����

<script></script>
����� ����� ������ ������

9# Comments
===========
������ �������� �� ��������� ��������� ������ ��� �� ���� ����� �� ���� ���� �����
�� ���� ���� ���������� ��� ���� ������� ����� ��� �����
������� �������� �� ���� ���� ������� ���� ���������
���� ���� ������� ��� ��� ���� ������ ����
�� ����� ��� ���� ���� ������ ��� ��� ����
����� �� �� ��� ����� ���� ����
��� ��� ����� �� �� �� ���� ���� �����
<!-- -->

����
<!-- Thi is comment -->

10# Block , Inline , div


=========================
���� ����� �� ������� �� ��� ����� �� �� ��
����� ����� �� ����� ����

inline
------
���� ����� �� ������� �� ������� ���� ��� ��� ����
�� ��� ��� ���� ����� ���� �� ��� ������ �� ����� ���� ���� ������ ����� ��� ������
���� ����
����� ����� ��� ���� ���� ��� ��� ���� �� �� ���� �� ����� ������
<br>

������ ��� �������


<a href="www.google.com">click</a> ��� ��������
<img src="malek.jpg"> ��� �����
<span>something here</span> ��� ��� ���� ����� ������ ����

��� ��� ������� ������� �� ����� ��� ���� �� �� ��� ���� ����� ����� ����� ��� ���
����

Block
-----
���� ����� �� ������� ��� ����� �� ����� ������ ���� �� ��� ����� �� ������� ������
��� ���� ��� ���� �� ��� �� ��� �����
������ ��� ������� ��
<p>paragraph here</p> ��� ������� ������
<h1>head<h1> ��� �����
<div>div1</div> ��� ����� �������

��� ��� ������� ������� ���� ������ ��� ��� ����� ������ ��� ����� ��� ����� ��� ��
��� �����
Div
---
����� �� ����� �� ��� ���� ������� ����� ��� �������� ����� ���� ����� ����
��� ���� ��� �� ���� ���� �������� ������ ��� ���� �� ��� ���� �� �� ������ ����
��� ���� ����� �� ���� ������ �� �������� ��� ����� ����� �� ��
����
<div>
<h1>head</h1>
<p>paragragh</p>
</div>

11# Lists
=========
����� ����� ������� �������� ���� ��� ����� �� �� ��

unorder list
------------
��� �������� ����� ����� �� ����� ����� ��� ����� �� ����� ��� ������� ���� �����
��� ��� ����
������ ���� ����� ��� ���� ������� �������

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

���� ��� ������� ��� ����� ������ �� ��� ���� �����


��� ���� ��� ����� ������� ��� ��� ���� �� ������� ��������

order list
----------
������� ������� �� �������
��� ��� ����� �� ������� ������� ��� ���� ������ ������� �������� ����� �������
�������

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

����� ���� ������� ��� ����� ������ �� ��� ����


��� �� ���� ������� ����� �� ������� ���� ��������� ���

type="A" ������ ������� ����� ����� ���� �� ����


start="5" ����� �� ��� ���� ���� �� ����� ������ �����
reversed ���� ����� ������� ����� ������ ���� �� ������

Descreption List
----------------
��� ����� ����� ����� ������ �����
����� ���� ���� ��� ��� ���� ������� ������ ����
����� ����

<dl>
<dt>Item1</dt>
<dd>it's good item</dd>
<dd>it's cheap item</dd>
<dd>it's useful item</dd>

</dl>

12,13# Text Format


===============
����� ������
��� ����� ������ ���� ������� ���� ����� �� �� �� ��������� �� ������ ���� �� ��
���� ������ ����� �� �� �� �������� ���� ����� ������� �����
���

<b>Bold</b> ���� ���� ���� �� ����


<strong>strong Text</strong> ���� ���� ���� ���� ��� ������ �����

<i>Italic</i> ���� �� ����


<em>emphasize Text</em> ���� ���� ���� ���� ��� ��������� �����

<small>Small Text</small> ������ ���� ������� �� ���� ������

<blockquote>Block Quote Text</blockquote>


������ ���� �� ���� ���� �� ���� �� ��� ����� ���� ��� ����� ����� �� ����� ��� ��
������� ������ ���� ���� ������ �� ����� ���� ��� ���

<q>Quote Text</q> ��� ����� ������ ��� ���� �� ��� ������� �� ���� ��� ��� ����
���� �� ����� ������ ����� ��� ������ ��� ������� ��� ������

<mark>marked text</mark> ������ �� ���� ���� ���� ���� ��� ���� �� ��� ������
�������� ��� ���� ���� ���� ����� �������� �����

<del>Deleted Text</del> ������ �� �� �� �� ��� ������ �� ��� ����� �� �� �����

<ins>Inserted Text</ins> ������ �� �� �� ���� ������ ������ �������� ��� �����


������ �� ��� �� ���� ������ ����� ������

4<sup>2</sup> ���� ����� ��� ����� �� ����� ���� ���� ������� �� ����� �����
������� ����� ��� ����� ��� �����
H<sub>2</sub>o ��� ��� ����� ������ ���� ����� ��� ����� �� ����� ���� ���� ���
����� ������� ���������

14,15,16# Tables
================
����� ��� ������� ���� ������� ������ �� �� ��
������ ������ �� ����� ������� ������ ������ ������ ������ ������� ������ ��
������� ���� �������� ������
��� ���� ������� �� ������ �� ���� ������ ������� ��� ��� ����� ������ ����� ����
����� ���� ��� �� ����� ������
���� �������� ������ �������� ��� ����� ���������� ������ ����� �������
���� ��� ���� ��������� ������� �� ����� �� �� ��
��� �������� �� ��� ������� �������� ������ ����� �� ������
����� ������ ���� ������ ������ ����� �� ��� ����� ������

<table></table>����� ������ �� ����� ������


<Caption></Caption>����� ������ �� ��� ����� ������ �� ������ ���� ��������� ��� ��
���� ��� ������ ��
<tr></tr>����� ������ �� ����� �� ���� ������
<th></th>����� ������ �� ��� ������� ������� �� ��� ���� �� ������ �� ������
<td></td>����� ������ �� ��� ���� ����� ������

<thead></thead>����� ����� ����� �� �� ������� �� ����� �� ������� ����� ���� ��


���� ������ �� ���� �� ������� �� ������� ����� �� �� ����
<tfoot></tfoot>����� ����� ����� �� �� ������� �� ����� �� ������� ����� ���� ��
���� ������ �� ���� �� ������� �� ������� ����� �� �� ����

������� ��� ���� �� ������� ���� ���� ��������� ���� ������ ����� �� �� ���� �����
������� ���
border="1" ���� ���� ������ ��� ������� ������
align="center" ���� ������ �� ����� ������
width="800px" ������ ��� ������

��� �� ���� ��� ��������� ������ ���� ������� �� �� �� �� ��� ���


colspan="2" ���� ������ ������ ��� ���� ��� ���� �� ������ ����� ����
rowspan="2" ���� ���� ������

����

<table border="1" align="center" width="800px">

<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>

<tr>
<td>1</td>
<td>malek</td>
<td>26 years old</td>
</tr>

</table>

17# Classes
===========
����� ������� �� ���� ��
Classes
������� ����
������ ������ ��� ������ ��� ���� ���� ������� �� ���� ������� ... ������� ���
����� ����� ��� ������ ���� �������ҿ
���� ������ ������� �� ����� ����� ���� ���� ���������� �� ������� ����� �� ��
���� ���� ���� �� �� ������ ������� ��� ��� ����� ������ �����
��� ���� ���� ����� ��� ��� ������ �� ����� ���� ���� ��� ����� �� ���� ����� ���
�������
����
<div class="test"> First Div</div>
<p class="test"> paragraph </p>

<h1 class="test2"></h1>
<h2 class="test2"></h2>

��� ��� ���� ���� ����� ������ ���� ��� ������ ��� ����� ���� �����
����� ����� ���� �����
���� ��� ���� ����� ���� ���� ����� �� �� ���� ������� ��� ������ ����� �����
������� ��� ������� ���
������� �� ������ ������

18:20# Form
===========
������ �� ����� �� ����� ������ ��� ���� ��� ����� ������� ��������
������ ���� ������ ������ ���� ������ ��������� ������ ������� �� ��� ��� ���
����� ������ ���� �������� ��� ������� ������ ��� ���� ��� ��� ��������� �� ������
���

<form></form> ����� ����� ������ ������ �������� ����� �������


-name="formname" ��������� ����� ������ ������ ��������
-class="classname" ������ ���� ������ ��� �� ����� ������ ����� ������ �������
-action="gotopage.php" ������ ��� ��������� ������ �������� ����� ���� ���� �����
�������
-method="get" or "post" ���� ��� ��������� ���� ������ ������� ��� ���� ��� ������
������ ���������

<label></label> ����� ����� ������ ���� ������ ���� ����� ����� ���� ����� �������
���� ����� ������ ������ ���������

<input > ������� ��� ����� ������ ������� ��� ����� ����� ����� ���������� ��� ���
��� �� ��� ��� ���� �����
-type=
"text" ������ ���� ����� �����
"password" ���� ���� ������� ���� ��������� �� ����� ��� ����
"checkbox" ���� ���� ����� ��� ���� ����� ������
"submit" ���� ���� ������ �������� ���� �� ������� �� �������
"button" ���� ���� ��� ������ ������ ��� ����
"reset" ������ ��� ������� ��� ���� ������� ����� ������� ����� ���� ������
"file" ���� ���� ���� ���� ����� ����� ����� ���� ��� ����
"image" ���� ���� ���� ������ ���� ������ �������� ����� �����
"hidden" ���� ���� ����� ����� ������ �������� ��� ������
"radio" ���� ���� ����� ��� ���� ����� ����� ��� �� ����

-Value="val" ���� ���� ����� ���� �� �������


-placeholder="hint" ���� ���� ����� �� ���� �� ������ ���� �� ������� ����� �����
������� �����
-maxlength="50" ���� ���� ������ ���� ���� �� �������

<textarea></textarea> ����� ����� ���� ���� ����� ���� ��� �� ������ ��� �� �����
������ �� ����� �������� ����������
-rows="6"
-cols="10"
-readonly

<fieldset></fieldset> ������ ���� ���� �� ���� ������ ���� ����� ����� ��� �����
������� ������ ������� �������
<legend></legend> ������ ��� ����� ���� ����� ������ �� ������ ������� ������
������ ����� ��� ���� ����� ������

<select></select> ����� ����� ���� ����� ���� �� ������� �������� ���� ����� �����
����� ���� ������� ����� �� ����� �����
-name="combo1" ��������� ����� ������ ������� ����
-disabled ��������� ����� ������ ������� ���� �� �����
-size="2" ��������� ����� ���� ��� ������� ���� �������� ��������� �� 1
-multiple ��������� ����� ������� ���� �� ��� ���� ����������� ����� �������� ���
��������

<option></option> ����� ����� ������ ����� ���� ������� ���� ����� ��� ����� �����
������ ����� �������� ����
-disabled ��������� ����� ������ ����� �� ������ �������
-selected ��������� ����� ������ ��� ���� �� ������ �� �� ��� �������� ���������
-value ������ ���� ������ ������ �� ���� ������ ����� ������

<optgroup></optgroup> ����� ����� ���� ���� ������� ����� ���� ������� ���� �����
��� ����� ������� ������ ��� ���� ���
-label="groupName" ��������� ����� ������ ��� ������
-disabled ��������� ����� ������ �� ������� ������ ���� ������ �� ������ ��������

���� ��� ������� �� ���� �� ������� �������

<form name="form1" action="reg.php" method="post">

<fieldset>
<legend>Personal Info</legend>

<label>UserName:</label>
<input type="text" placeholder="pls enter your usrname" ><br>

<label>password:</label>
<input type="password" placeholder="pls enter your password" ><br>
</fieldset>

<input type="checkbox" value="RememberMe" >Remember Me <br>

<input type="Radio" name="Gender" value="Male" >Male


<input type="Radio" name="Gender" value="FeMale" >FeMale

<input type="submit" value="send info" >


<input type="button" name="hello" value="hello" onclick="jsfunName()" >
<input type="reset" value="Clear Form" >
<input type="file" value="Upload your cv" ><br>

<input type="image" src="www.google.com/g.jpg"><br>

<select name="combo1" size="1" multiple>


<optgroup label="Design Language">
<option>HTML</option>
<option>BootsTrap</option>
<option>CSS</option>
</optgroup>
<optgroup label="Programming Language">
<option>PHP</option>
<option>Paython</option>
<option>ASP</option>
</optgroup>
</select>

</form>

22# iFrame
==========
���� ���� �� ������ �� ������� ����
inlineframe
��� ����� �� ��� ���� ���� ����� ���� ��� ���� ���� ������� �� ���� ���
�� ����� ������� ���� ��� ���� ����� �� ���� ��� �����
��� ������� ���� ���� ������ ����� �� ������� ������� ������ ���� ���� �� ���
�������� ������� �� ������� �� ���� ��� �����
����� ��� ����� �������� �������

<iframe></iframe> ����� ������ �� ���� ����


-name="frameName" ��������� ������ ������ ��� ���� ���� �������
-src="link.com" ��������� ������ ����� ������ �� ������ ������ ���� ���� ���� ����
-width="600" ��������� ������ ���� ���� ����
-height="400" ��������� ������ ���� ���� ����
-scrolling= ��������� ������ ���� ����� ���� ���� ���� ����� ������ ������� ����
���� ���� ���� ���� ���� ����� ����� ���
"no" ������ ��������
"yes" ���� ��������
"auto" ���� ������ �������� �� ���� �� ���� ������ ����

����
<iframe name="frameName" src="http://www.w3schools.com/" width="600" height="400"
scrolling="auto"></iframe>

23# Entities
============
�������� ������� �������� ���� ����� �� �� ��
���� ��� �������� �� �������� ������ ������� �� ���� ����� ����� ������ ���� ���
������ ��� ������ �� ���� ��� �� �����
Skipping Code
��� ��� �������� ���� ��� ���� �� ����� ��� ������ ���� ���� ���� �� ����� �� ����
������� ��� ������� ����� ����
���� ��� �������� ���� ���� �� ����� �� ������ ������� ������� ������ �� ��������
���� ����� ��� ���� ������ ���� ��
��� ����� ��� ��������
" " < > & � � � � � �

������� ������ ���� ��������

&nbsp; = " " ���� ���� �� ����� ��� ������ �� ����� ���� ����� �����
&lt; = < ���� ����� ���� ��
&gt; = > ���� ����� ���� ��
&amp; = & ���� ����� ����� ���� ����
&cent; = � ���� ����� ������
&pound;= � ���� ����� ������ ������
&yen; = � ���� ����� ���� ������ ��������
&euro; = � ���� ����� ������
&copy; = � ����� ����� ���� �����
&reg; = � ���� ����� ������ ���� ������ ��������� ��������

����� ������
======
����� �� ���� ��� ����� ���� ��� ���� �� ����� ���� �� ����� �� ���� ���� ����
�����

��� ������ ���� ����� ������ ��� ����� ������ �� ����� ��� ��������
https://www.youtube.com/playlist?list=PLDoPjvoNmBAwClZ1PDcjWilxp9YERUbNt

��� �������� �������� ����� ����


Captian.malek@Gmail.com

Вам также может понравиться