Scribd
Upload
23 views

HTML

Uploaded by

khaledmohsen469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

HTML

Uploaded by

khaledmohsen469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Html Course

‫ وهي لغه صفحات الويب‬browser ‫ هي اللغه التي يعتمد عليها ال‬html ‫لغه‬
‫من‬2102 ‫ في سنه‬html5 ‫ واخيرا اصبح‬xhtml ‫وكان فيها اكتر من اصدار‬
small case ‫االفضل كتابه التاجات بال‬
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 Browsers do not display the HTML tags, but use them to
render the content of the page

____________________________________________________

HTML tags
HTML tags are element names surrounded by angle brackets:

<>‫ لما نيجي نكتبه هنكتبه عن طريق‬html ‫بمعني ان تاج ال‬


angle brackets ‫االقواس دي اسمها‬

 HTML tags normally come in pairs


‫ بيجي علي هيئه جزئين وده في الشكل‬html ‫بمعني اني لما اكتب تاج ال‬
‫العادي‬
‫‪Tags Type‬‬

‫‪start&end‬‬
‫‪start‬‬

‫‪The end tag is written like the‬‬


‫‪start tag, but with a forward‬‬
‫‪slash inserted before the tag‬‬
‫‪name‬‬

‫معني كده ان عندي نوعين من التاجات التاج االول هو ال ليه فتحه‬


‫وملوش قفله يعني مثال >‪ <img‬ده نوع ملوش قفله‬
‫اما النوع التاني هوا التاج ال ليه فاتحه وقافله وقالي ان قافله التاج دي‬
‫الزم يكون نفس الكلمه بس قبلها ‪ /‬مثال >‪<div> </div‬‬
HTML page structure

‫ الزم اكون كاتب هذا ال‬web ‫الزم علشان ابدا اي صفحه‬


web ‫ وهو ثابت واساسي في اي صفحه‬structure
html

<body></body> <head></head>

the content apear in web page option for web page


HTML Attributes

Attributes provide additional information about HTML


elements

‫انه بيضيف صفات سمات للتاج بتاعي بمعني ان كالم لما اجي اكتبه‬
<a> ‫ بتاعي واقدر اتحكم فيه زي مثال تاج‬tag ‫هيخلني اتعامل مع ال‬
‫ ده هوا يعتبر‬href=" " ‫ بتاعي فوق مثال او‬link ‫اقدر اخلي ال‬
attribute
important Attributes:-

Attributes provide additional information about an element

Attributes are always specified in the start tag

Attributes usually come in name/value pairs like: name="value"

ِ‫ بتاػي غير كذ‬Element ‫ دِ يٓى اَّ بيذيُي يؼهٕيات اضافيّ نم‬attribute ٌ‫يؼُي كذِ ا‬
ِ‫ باالضافّ اَّ بيجي ػهي انشكم د‬start tag ‫اَّ بيتكتب جٕاِ ال‬

{ name_att = "value"}
‫‪Heading:-‬‬

‫أل ‪ُْ element‬ذرسّ ْٕا يٍ انؼُاصر انًًّٓ جذا ْٕٔا ‪heading‬‬


‫ْٕٔا ػبارِ ػُٕاٌ انصفحّ يثال نٕ ػُذي يقانّ يثال بيكٌٕ نيٓا ػُٕاٌ‬
‫انؼُٕاٌ دِ بقا ْٕ ال ‪ٔ heading‬ػُذي ‪ 6‬احجاو يختهفّ يٍ ال‬
‫‪heading‬‬

‫يثال كهًّ ‪ new message‬دي تؼتبر ‪ heading‬طيب ػايسيٍ َؼرف‬


‫بقا انتاج دِ بيتكتب ازاي‬

‫بمعني انه بيبدا من اول ‪ h1‬وهوا االكبر حجما الي ‪ h6‬وهوا االصغر‬
‫حجما فيهم‬
‫‪Heading important:-‬‬
‫‪Search engines use the headings to index the structure and content‬‬
‫‪of your web pages‬‬
‫‪Users skim your pages by its headings. It is important to use‬‬
‫‪headings to show the document structure‬‬
‫بمعني ان محركات البحث بتخلي الموقع بتاعي المستخدم يوصل بيه بسرعه الي جانب اني بعطي ايحاء‬
‫للمستخدم ان ده جزء منفصل علي الموقع بتاعي‬

‫‪Heading notes:-‬‬
‫‪Browsers automatically add some white space (a margin) before and‬‬
‫‪after a heading.‬‬

‫بمعني ان ال ‪ browser‬ال انا هستخدم لما احط ‪ heading‬هيحطلي مسافه تحت وفوق وشمال ويمين الجمله‬
‫وده كان السبب انه بيجي في سطر لوحده علشان كده ممكن اعدل فيه عن طريق استخدام خواص ‪ css‬علشان‬
‫اشيل المسافه دي‬

‫‪Use HTML headings for headings only. Don't use headings to make‬‬
‫‪text BIG or bold‬‬

‫‪.‬بمعني اني لما اجي استخدم ال ‪ heading‬مش علشان اجيب خط كبير ال انا بستخدمه علشان عندي في ‪psd‬‬
‫بتاعي ‪ heading‬بس غير كده مستخدموش‬

‫‪Paragraph:-‬‬
‫بمعني ان لو عندي مثال كالم كتير مثال ده هعرضه عن طريق ال >‪ <p></p‬بمعني مثال‬

‫الكالم ده بكتبه عن طريق تاج ال ‪ p‬وهوا بالنسبه لياا ‪ paragraph‬بمعني فقره نصيه عايز احطها في‬
‫الموقع بتاعي‬

‫‪Paragraph note:-‬‬
Browsers automatically add some white space (a margin) before
and after a paragraph.
paragraph ‫ برضو بيسيب مسافه قبل وبعد كل‬heading ‫انه زي ال‬

Large or small screens and resized windows will create different


results. The browser will remove any extra spaces and extra lines
when the page is displayed

paragraph ‫بمعني اني لما اغير مساحه الشاشه بتعتي هيتغير معايا شكل ال‬

you cannot change the output by adding extra spaces or extra


lines in your HTML code.
‫ سطر مثال بعد معمل مسافات وانزل سطر وكده‬01 ‫ في‬paragraph ‫بمعني اني لو كتبت محتوي ال‬
‫ للمسافات الكتير‬ignore ‫هيعرضه برضو بس بيعمل‬

‫ شاف ان دي جمله واحده طيب لو عايز انزل سطر‬browser ‫ او ال‬compiler‫بمعني هوا هنا ال‬
‫ ده‬paragraph ‫ بتاعي انزل سطر في ال‬browser ‫< بمعني بقول لل‬br> ‫هستخدم‬

Dropping the end tag can produce unexpected results or errors


‫ عادي الكن في المستقبل لما تيجي تعمل موقع كبير‬run ‫< الكود هيعمل‬/p> ‫بمعني اني لو نسيت ال‬
‫ الن ملهاش قفله‬open only ‫هتالقي مشاكل كتير جدا علشان كده بالش تنسي قفله اي التاج معدا التاج‬
‫‪Element style :-‬‬

‫بمعني اني عايز اضيف شكل لل ‪ element‬بتاعي عن طريق ال ‪ css‬زي مثال لون االخط لون الخلفيه‬
‫بتعتي وهكذا‬

‫طيب بكتب الكود بتاعي ازاي عن طريق استخدام كلمه ";‪ style= "property : value‬مثال‬

‫معني كده اني عندي في ال ‪ browser‬ال ‪ heading‬اديتلو لون ازرق اما بالنسبه لل ‪ paragraph‬اديتلو‬
‫لون احمر‬

‫طيب لو انا عايز اغير الخلفيه بتاعت ال‪ page‬بتعتي ازاي معني كلمه خلفيه هي ‪background-color‬‬
‫يعني لون الخلفيه‬

‫كده هالقي ان الخلفيه الشاشه اصبحت لون ازرق‬


‫طيب لو عايز اجيب الكالم بتاعي في نصف الصفحه اعمل ايه‬
‫معني كده اني بقول انا محتاج الكالم ده يجي في منتصف الصفحه عن طريق استخدام ‪text-align‬‬

‫‪Text Format :-‬‬

‫بمعني شكل ال ‪ text‬بتاعي ايه شكل الكالم ال هيكون موجود في الصفحه ايه ودي برضو من خواص‬
‫ال‪css‬‬

‫‪1- <b> - Bold text‬‬ ‫معناه اني عايز الخط بتاعي يبقي علي شكل‬
‫‪ Bold‬يعني يكون ظاهر بشكل دقيق لل ‪user‬‬
‫‪2- <strong>- Important text‬‬ ‫دي بستخدمها في حاله اني لو عندي ‪ text‬مهم‬
‫جداا هستخدم تاج ال ‪ strong‬وممكن يجي في‬
‫نصف تاج عادي‬

‫‪3- <i> - Italic text‬‬ ‫ان شكل الخط بتاعي يكون علي شكل االيطالي‬
‫وده بيفدني لو عامل موقع متعدد اللغات‬
‫‪4- <em>- Emphasized text‬‬ ‫زي ال ‪ Strong‬بظبط انه ال ‪ text‬ده مهم برضو‬
‫الكن نادر االستخدام‬
‫‪5- <mark>- Marked text‬‬ ‫اني لو عايز اعمل موقع وفي مقاالت وفي جزئيه‬
‫مهمه في المقال هعمل ليها عالمه لونها اصفر‬
‫عليها علي شكل ‪ mark‬هكذا ‪misara‬‬

‫‪6- <small>- Small text‬‬ ‫اني لو عايز الخط بتاعي يكون صغير جدا اصغر‬
‫من ال ‪ h6‬استحدمه وده يتعبرنادر االستخدام‬
‫في المواقع بشكل عام‬
‫‪7- <del> - Deleted text‬‬ ‫اني مثال شغال علي موقع بيعرض منتاجات وعمل‬
‫خصم علي منتج فاهستخدم هذا التاج علشان يبان‬
‫للمستخدم السعر قبل الخصم وبعد الخصم‬
‫‪8- <ins>- Inserted text‬‬ ‫التاج ده بيحط خد تحت الكلمه بتعتي‬
‫‪9- <sub> - Subscript text‬‬ ‫اما ده فانا مثال اكثر االستخدام في المواقع الخاصه‬
‫بالطب او االدويه الن مثال في ‪ h2o‬فهوا هيخلي‬
‫‪ 2‬دي تكون تحت‬
‫‪10- <sup> - Superscript text‬‬ ‫اني مثال بعمل موقع فيه معامالت رياضيه‬
‫زي ‪ 2‬اس ‪ 4‬فاالس ده هعمله عن طريق الكود ده‬
‫‪HTML quotation:-‬‬

‫‪element defines a short quotation‬‬

‫بمعني اني لو عايز اعمل ‪ paragraph‬مثال وفيه اقتباس من شخص معين هستخدم >‪<q‬‬

‫الناتج هيكون ‪double quote‬‬

‫طيب انت لو بتعمل موقع فيه جزء مقالي الزم مثال تسيب جزء في اول الصفحه طب نعملها ازاي‬

‫الجزء ال فاضي ده بيتعمل عن طريق ‪blockqoute‬‬

‫طيب لو عندي مثال صوره مثال لشيكسبير وانا عايز اكتب اسمه بطريقه كويسه غير ال ‪ font‬عن طريق‬
‫‪ html‬هستخدم كود >‪<cite> the name </cite‬‬
‫هيكتب كلمه ‪ the scream‬بطريقه مختلفه مثال اقرب الروايات بهذا الشكل‬

‫‪Comment style:-‬‬
‫معني كلمه ‪ comment‬هو اوال مش بيظهر في المتصفح هيا هتظهر في الكود نفسه طب فائده ايه‬

‫هناك فائدتين االولي‪ -:‬انك لما تيجي تعدل حاجه ف الكود بعد فتره تعرف الكود ده بتاع ايه بظبط‬

‫ثانيا ‪ -:‬ال ‪ comment‬هوا حلقه الوصل بينك وبين ال ‪ front-end developer‬وكذلك مع‬

‫‪ back-end developer‬الذلك الكومنت الغني عنه في اي موقع ‪.....‬‬

‫‪color name:-‬‬
‫في الوان معينه احيانا يكون صعب انك تكون عارفها فهنا هتالقي معظم الدرجات االلوان االغلب استخدام‬
‫في الشغل العملي ان شاء هللا‬
‫‪• rgb( num , num , num) -> red , green, blue‬‬
‫• ان الرقم من ‪ 0‬الي ‪ 255‬يعني في خالله بيكون في لون ‪color‬‬

‫)‪• rgba( num, num, num, opacity‬‬


‫‪color‬‬ ‫• نفس ال ‪ rgb‬الكن الشفافيه من ‪ 1‬الي ‪ 0‬فتره دي بس‬

‫‪• hexa color---> #num‬‬


‫‪color‬‬ ‫• االكثر استخدام في االلون‬

‫‪• name of color‬‬


‫‪color‬‬ ‫• انك تكتب اسم اللون العادي‬
HTML links:-
‫ ٔتؼُي اَي اقذر اضغط ػهي‬Hyperlinks ‫ بطريقّ اخري ْي‬link ًّ‫يؼُي كه‬
‫ أ كهًّ تحٕنُي ػهي صفحّ اغري‬link

‫ بًؼُي اَي نًا اضغط ػهيّ ْيذخهُي ػهي يٕقغ‬link ِ‫كم د‬


...‫ طيب بُكتب انكٕد ازاي ؟؟‬face book

ِ‫ ٔيؼُي كذِ اٌ انجسء د‬href  hyper reference ًّ‫يؼُي كه‬


.... ‫ْٕا ال ْحط فيّ انًٕقغ بتاػي‬
‫طيب ػايس اػرف اٌ انصفحّ دي ْم ْتفتح في َفس انصفحّ ٔال‬
target ‫ اخري ٔال في جسء يٍ انصفحّ كم دِ ػٍ طريق‬tab ‫في‬
The target attribute specifies where to open the linked document

1- _blank Opens the linked document in a


new window or tab

2- _self Opens the linked document in the


same window/tab
3- _parent

Opens the linked document in the


parent frame

4- _top Opens the linked document in the


full body of the window

HTML images:-

Images are defined with the <img> tag.

<img> ‫ ػٍ طريق‬image ‫اٌ ػهشاٌ استخذو انتاج بتاع ال‬

The <img> tag is empty it contains attributes only, and does not have
a closing tag.

open only ‫اٌ انتاج دِ يهٕش قافهّ اصال يٍ انتاجات ال‬

The src attribute specifies the URL (web address) of the image

source ‫ ٔاختصارِ اني‬src="location_image.xxx" ‫اٌ ػهشاٌ احط انصٕرِ الزو استخذو‬

The alt attribute provides an alternate text for an image

‫احياَا في يؼظى االٔقات انصٕرِ يًكٍ يتظٓرش ػهي انسيرفر أ ػهي جٓاز انًستخذو فالزو‬
‫ ْٔي اختصار اني‬alt ‫ادي نهًستخذيّ كهًّ يبسطّ تؼبر ػهي انصٕرِ َفسٓا ػٍ طريق‬
Alternative text

‫ ال انا‬1.jpg ‫ ان الزم الصور بتعتك ال هتنزلها اسمها يدل عليها مش مثال‬SEO ‫من اهم االشياء في مجال‬
‫ هستنتج ان الصوره دي بتعات ميسره وهكذا‬misara.jpg ‫اقول‬
HTML table:-

An HTML table is defined with the <table> tag.


<table></table> ‫علشان اعمل جدول عندي بعرفه عن طريق‬
Each table row is defined with the <tr>
<tr> ‫بمعني علشان اعرف صف في الجدول عن طريق‬
A table header is defined with the <th>
<th> ‫ نستخدم‬header ‫ زي اسم الطالب مثال ده‬header ‫بمعني علشان اعرف ال‬

A table data/cell is defined with the <td>


‫علشان املي الداتا بتعتي انا مثال اسماء الطلبه‬
‫طيب هنالحظ هنا ان ال ‪ table‬ده مفهوش خطوط علشان كده هنرسم الخطوط بتعته عن طريق‬

‫معني ده اني عايز حجم الخط بتاعي ‪ 1px‬ويكون ‪ solid‬يعني خط كامل ويكون لونه اسود‬

‫‪To make a cell span more than one column, use‬‬


‫‪the colspan attribute:‬‬
‫بمعني اني لو عايز مثال عمود ال ‪ age‬ده ياخد عمودين استخدم ال ‪ colspan‬دي‬
‫تعتبر ‪ attribute‬يعني مش تاج وبتاخد رقم "‪colspan="2‬‬
‫‪To make a cell span more than one row , use‬‬
‫‪the rowspan attribute:‬‬
‫بمعني اني لو عايز صف معين ياخد مكان صفين يبقي استخدم ‪ rowspan‬نفس الشئ بظبط في ‪colspan‬‬

‫‪summary table:-‬‬
HTML List :-

An Unordered List

An Ordered List

An Description Lists
‫‪unordered List :-‬‬

‫بمعني ‪ list‬يعني قائمه تحتوي علي مجموعه من العناصر في شكل غير مرتب والكن منظم جدا‬

‫هنحتاج ال ‪ list‬النها من اهم االشياء االكثر استخدام في الموقع مثال هعمل ‪ list‬مكونه من ايكونات ال‬
‫‪ social media‬او مكونه من مجموعه ‪links‬‬

‫‪syntax :-‬‬

‫نسنتنج ان علشان اعرفه هقولو انا هشتغل ‪ unordered list‬عن طريق >‪ <ul‬اما >‪ <li‬فهي اختصار الي‬
‫‪ list item‬بمعني العناصر المطلوب ان تظهر في الموقع بتاعي‬
‫‪The list items will be marked with bullets (small‬‬
‫‪black circles) by default‬‬
‫ان ال ‪ item‬هتتمثل عندي علي شكل ‪ circle‬لونها اسود طب لو حبيت اغير‬
‫الشكل ده او اشيله اعمل ايه‬
‫‪The CSS list-style-type property is used to‬‬
‫‪define the style of the list item marker‬‬
‫بمعني اني هستخدم خاصيه بال ‪ css‬اسمها ‪ list-style-type‬يعني حددلي نوع الشكل بتاع ال ‪list‬‬

‫في اغلب المواقع التي سوف تواجهها سوف تشاهد ان معظم ال ‪ list‬بتاخد ‪none‬‬

‫‪ordered List :-‬‬

‫يعني ‪ list‬مرتبه يعني عارف مين االول ومين الثاني ومين الثالث وهكذا واحيانا بحتاجها لو بكتب لحد مسار‬
‫مثال لشغل فالزم يتعلم ‪ html‬ثم ‪ ...‬ثم ‪ ...‬هكذا بالترتيب‬
‫‪syntax :-‬‬

‫نفس بظبط ال ‪ ul‬الكن االختالف في ال >‪ <ul‬هيكون >‪ <ol‬ومعناها هنا ‪ordered list‬‬

‫طيب لو انا حبيت اشيل االرقام واحط حاجه تانيه برضو زي ‪ ABC‬ازاي ؟؟‬

‫‪The type attribute of the <ol> tag, defines the type‬‬


‫‪of the list item marker:‬‬
‫‪Description List :-‬‬

‫‪A description list is a list of terms, with a‬‬


‫‪description of each term‬‬
‫بمعني اني عندي كلمه وعايز وصف ليها علشان كده هستخدم‬
‫‪Description list‬‬
‫‪syntax :-‬‬

‫معني كلمه >‪ <dl‬هنا بعرفه اني هستخدم ‪ Description list‬اما بالنسبه ل >‪<dt‬‬
‫فهنا بقولو ان ال ‪ data‬ال عايز اوصفها اما >‪ <dd‬هوا المسؤل عن وصف الداتا‬
The <dl> tag defines the description list
the <dt> tag defines the term (name)
the <dd> tag describes each term

summary list:-
‫‪HTML Iframe :-‬‬

‫‪An iframe is used to display a web page within a‬‬


‫‪web page.‬‬
‫معني ال ‪ iframe‬ده كود بيخليني افتح صفحه تانيه في الصفحه بتعتي زي‬
‫الخريطه مثال‬

‫دي خريطه عن طريق تاج ال ‪iframe‬‬

‫‪syntax :-‬‬

‫ال ‪ url‬هو عنوان الصفحه بتعتي باخدها ‪ copy‬واحطها ‪ past‬في الكود‬


‫طيب اكيد محتاج اظبط الحجم بتاعها طيب ازاي ؟؟‪...‬‬
‫‪Use the height and width attributes to specify‬‬
‫‪the size of the iframe‬‬

‫ممكن احط ال ‪ width‬وال ‪ height‬عن طريق اكتبهم عادي او استخدم ال ‪style‬‬

‫‪File path :-‬‬

‫بمعني كل ملف او صوره عندي في الموقع بيكون ليها مسار طيب المسار المتفق‬
‫عليه هوا ؟؟‬

‫بمعني ان الصوره بتعتي جواه ملف اسمه ‪ images‬ممكن الملف بتاع ال ‪image‬‬
‫يكون جواه ملفات اخري‬
‫بمعني ان الصوره بتعتي جواه ملف كبير اسمه ‪ images‬والملف ده جواه ملفات‬
‫تانيه فانا عايز الملف ال اسمه مثال ‪ company‬جواه صوره بقا دي ال عايز‬
‫اعرضها اسمها ‪ bulding.png‬ده بقا مفهوم المسار بتاع الملف‬

‫‪div element :-‬‬


‫هوا عنصر علشان اعمل مساحه في الصفحه فيها مجموعه من العناصر‬

‫‪The <div> element is often used as a container for other HTML‬‬


‫‪elements.‬‬
‫انه عنصر بستخدمه علشان يحتوي علي عناصر ال ‪html‬‬
‫‪The <div> element has no required attributes,‬‬
‫‪but style, class and id are common.‬‬
‫بمعني انه مش بيحتاج ‪ attribute‬معدا ال‪ style‬علشان اكتب اي ‪ property‬وال ‪ class‬وال ‪id‬‬

‫‪syntax :-‬‬

‫‪span element :-‬‬


‫هوا عنصر ممكن استخدمه في نص الكالم لو عايز مثال اعمل كلمه بلون مختلف‬
‫هستخدم ال ‪span‬‬
‫‪The <span> element is often used as a container for some text.‬‬

‫انه ممكن يكون يحتوي علي ‪ text‬عادي بس الزم يكون مميز علي الباقي‬
The <span> element has no required attributes,
but style, class and id are common
id ‫ وال‬class ‫ وال‬property ‫ علشان اكتب اي‬style‫ معدا ال‬attribute ‫بمعني انه مش بيحتاج‬
When used together with CSS, the <span> element can be used
to style parts of the text

form element :-

user name ‫ يعني ابسط االمثله علشان تخش اي موقع بتحط ال‬form ‫يعني ايه‬
‫ او بتعمل اكونت جديد فاحنا هنعرف بشكل مبدئي ازاي نعمل‬password ‫وال‬
form
The HTML <form> element defines a form that is used to collect user
input

syntax :-
‫ طب ده بيعمل ايه ؟‬action ‫ اسمه‬form ‫ مهم في ال‬Attribute ‫في‬
DB ‫ وال‬php ‫ دي بالملف بتاع ال‬Form ‫ده بيساعدنا اننا نربط ال‬
The action attribute defines the action to be performed when the form
is submitted.

Form contains form elements.


Form elements are different types of input elements, like text
fields, checkboxes, radio buttons, submit buttons, and more

<input> element :-

The <input> element is the most important form element


‫ النه من غيره مش هيكون‬form ‫هوا يعتبر من العناصر التي يعتمد عليها ال‬
‫ النه بيحتوي علي حقل االدخال وعناصر اخري‬form ‫فيه‬
The <input> element can be displayed in several ways,
depending on the type attribute.
.... ‫ او او‬text ‫ بتاعه هل هوا زرار وال‬type ‫ يعتمد اعتماد كلي علي ال‬input ‫ان ال‬

attribute job
1- disabled attribute specifies that the input field disable
2- readonly that the input field is read only (cannot be
changed)
3- maxlength maximum allowed length for the input field

<select> element :-
The <select> element defines a drop-down list
‫ بمجرد اني لما اضغط عليها‬item ‫ ينزل منها اكتر من‬list ‫علشان اعمل‬
<textarea> element :-

The <textarea> element defines a multi-line input field (a


text area)

‫هوا مكان اقدر اكتب كومنت بتاعي او راي المستخدم في الموقع بتاعي‬

Attribute of <textarea> element :-

The rows attribute specifies the visible number


of lines in a text area
The cols attribute specifies the visible width of
a text area

<button> element :-
The <button> element defines a clickable button

Method attribute:-
post ‫ وال‬get ‫ دي هتعمل‬form ‫ده بقا علشان احدد هل ال‬
The method attribute specifies the HTTP method (GET or POST)
to be used when submitting the form data

When to use get :-


The default method when submitting form data is GET
get ‫ يعني لو مكتبتهاش هتكون‬get ‫هوا في الطبيعي بيكون‬
the submitted form data will be visible in the page
address field

url ‫ بمعني ان ده هتبان في ال‬lastName ‫ وال‬firstName ‫ ال‬user‫بمعني اني كده خدت من ال‬
‫طيب لو البيانات دي حساسه او مهمه جدا استخدم ايه ؟؟‬

When to use post :

Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address
field.
‫ بتاعي‬url ‫ لو بيانات المستخدم بتاعي مهمه جدا فالزم معرضهاش في ال‬post ‫بمعني اني بستخدم ال‬

Head element :-

‫ يحتوي علي تاجات مهمه جدا في الشغل بتاعي‬head ‫تاج ال‬


‫‪meta element :-‬‬

‫‪The <meta> element is used to specify which‬‬


‫‪character set is used, page description, keywords,‬‬
‫‪author, and other metadata.‬‬
‫بمعني اني بستخدمه علشان احدد هل الصفحه بتعتي تدعم اللغه العربيه‬
‫واالنجليزيه وال ال ده اول استخدام‬

‫ده اول حاجه ‪ charset‬هنا معناها هتدعم لغات ايه في الموقع بتاعك اما‬
‫الكود ‪ utf-8‬ده معناه اني هستخدم اللغه العربيه واالنجليزيه‬
‫‪Metadata is used by browsers (how to display‬‬
‫‪content), by search engines (keywords), and‬‬
‫‪other web services‬‬
‫بمعني اني لو دخلت عملت ‪ search‬علي الموقع بتاعك من قبل مخش عايز‬
‫اعرف هوا بيتكلم عن ايه طب ازاي‬
‫الكالم ال مكتوب تحت ده هوا وصف الصفحه بتاعت ‪ YouTube‬طب اتعملت‬
‫عن طريق الكود ده‬

‫معني كلمه ‪ description‬هوا وصف الصفحه بتعتي‬


‫طيب بفرض اني عايز اعمل ‪ search‬بس بكلمه واحده بس وعايز الصفحه بتعتي‬
‫تظهر ازاي ؟؟‬

‫كل ال هعمله هغير كلمه ‪ description‬الي ‪ keywords‬بس وبعد كده في ال‬


‫‪ content‬بتاعي هحط الكلمات المهمه في الصفحه‬
‫طيب بفرض اني عايز ابحث علي اسم فنان او مؤلف او حد مشور اوي وهوا‬
‫عندي في الموقع طب اعملها ازاي ؟؟‬

‫كل ال هعمله هحط في ال ‪ name‬بس كلمه ‪ author‬وفي ال ‪ Content‬هحط‬


‫اسم الفنان بتاعي او الشخص المشهور‬
‫طيب بفرض اني عايز اعمل ‪ refresh‬للصفحه بتعتي مثال كل ‪ 01‬ثانيه‬
The viewport is the user's visible area of a web
page. It varies with the device, and will be
smaller on a mobile phone than on a computer
screen
‫ بتعتي بتتعرض علي‬web page ‫ مهم جدا انه بيخلي ال‬meta ‫عندي نوع‬
‫ وهوا‬responsive ‫الموبيل‬

A <meta> viewport element gives the browser


instructions on how to control the page's
dimensions and scaling.
‫ من جهتين االولي‬page ‫ مهم في انه بيتحكم في ال‬viewport ‫معني ده ان ال‬
‫ هيا طريقه عرض‬scaling ‫ وهوا الطول والعرض وهكذا اما ال‬dimensions
‫الصوره متكونش مبكسله‬
page‫ بتاع ال‬width‫معني ده انه ال‬
width=device-width
‫ بتاع‬width ‫الزم يكون مطروح من‬
‫االسكرين‬
initial-scale=1.0
‫ بتاع الشاشه او الصور‬zoom‫ان ال‬
‫يكون علي الوضع الطبيعي بواحد‬

‫طيب ايه الفرق اني احط الكود ده او اشيلو او انساه هياثر ازاي في شاشات‬
‫التلفون‬
Layout element :-

HTML5 offers new semantic elements that define the


different parts of a web page
‫ان في طريقه علشان اعرف تقسيمه الصفحه بتعتي بتكون ازاي‬

‫شكل الصفحه في‬


‫معظم االحيان‬

You might also like