Scribd
Upload
4 views

HTML_Learn

The document provides a comprehensive overview of HTML, including its structure, essential tags, and elements for creating web pages. It covers various HTML components such as headings, paragraphs, links, images, lists, tables, forms, and multimedia elements. Additionally, it discusses responsive design, color specifications, and metadata usage in HTML documents.

Uploaded by

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

HTML_Learn

The document provides a comprehensive overview of HTML, including its structure, essential tags, and elements for creating web pages. It covers various HTML components such as headings, paragraphs, links, images, lists, tables, forms, and multimedia elements. Additionally, it discusses responsive design, color specifications, and metadata usage in HTML documents.

Uploaded by

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

‫‪HTML‬‬

‫‪By: Mohamed Gamal Maklad‬‬

‫علَى آ ِل ُم َح َّمد‪،‬‬
‫علَى ُم َح َّم ٍد َو َ‬
‫علَى إِب َْراهِي َم‪َ ،‬وب َِاركْ َ‬
‫صلَّيْتَ َ‬
‫علَى آ ِل ُم َح َّمدٍ‪َ ،‬ك َما َ‬
‫علَى ُم َح َّم ٍد َو َ‬ ‫اللَّ ُه َّم َ‬
‫ص ِ ِّل َ‬
‫علَى آ ِل ِإب َْراهِي َم‪ ،‬فِي ا ْل َعالَمِ ينَ ‪ِ ،‬إنَّكَ حَمِ ي ٌد َم ِجي ٌد‪.‬‬ ‫َك َما ب َ‬
‫َاركْتَ َ‬
❖ HTML stands for Hyper Text Markup Language

HTML describes the structure of a Web page

Tags
<html> element is the root element of an HTML page
<title> element specifies a title for the HTML page (which is shown
</title> in the browser's title bar or in the page's tab)
<body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs,
</body>
images, hyperlinks, tables, lists, etc.
<h1> element defines a large heading

</h1>
‫ كل ما الرقم يكبر كل ما حجمه يصغر يعني‬h6 ‫ ل‬h1 ‫عندنا من‬
‫ ده أكبر واحد فيهم‬h1
<p> element defines a paragraph
</p>

<a> HTML links are defined with the ‫علشان اضيف لينك للصفحه عندي‬
</a>
<a href="https://www.MohamedMaklad.com"> </a>
<img> <img src="‫اسم الصوره‬.jpg" width="104" height="142">
<br> Add New line ‫علشان اعمل سطر جديد‬
<hr> Defines a thematic change in the content ‫ده بيضيف خط كده فاصل‬

<b> Bold text ➔ This text is bold

<i> Italic text ➔ This text is italic

<em> Emphasized text


<mark> Marked text➔

<small> Smaller text

<sup> ➔

1 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
<sub> ➔

<strong> Important text

<q> ” ‫ يعني “ زي كده‬Quotation ‫بتضيف للكالم‬

Comment <!-- Write your comments here -->

<figure> contain images and their caption so that the two are associated
HTML List Tags
<ul> unordered list

<li> Each list item starts with the


<ol> ordered list

<dl> defines the description list

<dt> defines the term (name)


<dd> tag describes each term
HTML Table Tags
<table> Defines a table

2 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
<tr> Defines a row in a table
<td> Each table cell is defined by a <td> and a </td> tag
<th> Defines a header cell in a table

<caption> To add a caption to a table


colspan To make a cell span over multiple columns

➔
➔

rowspan To make a cell span over multiple rows

HTML Forms
<form> element is used to create an HTML form for user input
<input>

<input
type="text">
➔

3 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
<label> ‫ اللي هندخل فيه حاجه رقم او حاجه احنا‬input filed ‫ ده بنكتب فيه كالم بمعني ايه يعني‬Label
‫ كده فبنستخدم‬First name ‫بنضطر نكتب دمبه علشان اليوزر يعرف هو ده بتاع ايه زي ما كتبنا‬
‫ علشان كده‬label

The <label> element also help users who have difficulty clicking
on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

❖ for attribute of the <label> tag should be equal


tothe id attribute of the <input> element to bind them
together.

<input Radio buttons let a user select ONE of a limited number of


type="radio"> choices.

<input Checkboxes let a user select ZERO or MORE options of a limited


type="checkbox"> number of choices
➔

<input defines a button for submitting


type="submit">

<input defines a reset button that will reset all form values to
type="reset"> their default values

<input defines a password field


type="password">
The characters in a password field are masked (shown as
asterisks or circles)
<input defines a button
type="button">
<input is used for input fields that should contain a date
type="date">
You can also use the min and max attributes to add restrictions
to dates ‫بتحدد أكبر و أصغر تاريخ‬
4 Mohamed Gamal Maklad ‫النب‬
‫عل ي‬ ‫صل ي‬
‫ي‬
<input defines a file-select field and a "Browse" button for file
type="file"> uploads.

<select> defines a drop-down list

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the


option
<option> defines an option that can be selected.
<datalist> Users will see a drop-down list of the pre-defined options as they
input data.

The list attribute of the <input> element, must refer to the id


attribute of the
element.

<textarea> defines a multi-line input field

rows ➔ number of
lines cols ➔
width
<fieldset> is used to group related data in a form.
<legend> defines a caption for the <fieldset> element

<output> element represents the result of a calculation ‫بتطلع ناتج عمليه معينه‬

5 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
<input> Notice that each input field must have a name attribute to be
submitted

If the name attribute is omitted, the value of the input field


will not be sent at all.
action ‫ هو اللي بيتنفذ او بيبعت الداتا له‬Action ‫ اهو لما نضغط عليه االمر اللي بعد‬Submit ‫شوفت انت زرار‬

On submit, send form


data to
"action_page.php"

If the action attribute is omitted)‫(مش مكتوب او مش موجود‬, the action


is set to the current page
target attribute specifies where to display the response that is
received after submitting the form

‫اللي هيحصل هل هيحصل في نفس نفس الصفحه وال هفتح‬Action ‫ ال‬Submit ‫دلوقتي ضغطت علي‬
‫صفحه جديده وال ايه‬

autocomplete attribute specifies whether a form should have autocompleted


on or
off.

novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should


not be validated when submitted

Notes

❖ HTML tags are not case sensitive: <P> means the same as <p>.
‫مبيفرقش استخدم كابيتل وال اصمول هو هو و الكود هيشتغل عادي‬
❖ name="value"  attributes ‫تعريف‬
❖ When the browser comes across two or more spaces next to each other, it only
displays one space

6 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
❖ To Add Comment <!-- Write your comments here -->
❖ Comments can be used to hide content.
❖ resolution of an image is the number of squares that fit within a 1 inch x 1 inch
square area

Unordered HTML List


list-style-type ‫بنحط هنا النوع اللي عاوزين نميز بيه كل عنصر‬
<ul style="list-style-type: square;">

ordered HTML List


<ol type="1">‫الل انت عاوزه‬ ‫ر‬ ‫ر‬
‫بق نوع التقيم ي‬
‫حط ي‬

7 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
Here are the inline elements in HTML ‫يعني مفيش ليهم قفله‬

By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:
➔
➔
➔

GET POST
• Appends the form data to the URL, • Appends the form data inside the
in name/value pairs body of the HTTP request (the
submitted form data is not shown in
the URL)

• The length of a URL is limited • POST has no size limitations and


(2048 characters) can be used to send large amounts
of data

• NEVER use GET to send sensitive • use POST to send sensitive data
data! (the submitted form data is (the submitted form data is not
visible in the URL!) shown in the URL)

• Useful for form submissions where a • Form submissions with POST cannot
user wants to bookmark the result be bookmarked

❖ HTML Canvas Graphics:


➢ canvas is a rectangular area on an HTML page. By default, a canvas has no border
and no content.
➢ Always specify an id attribute to be referred to in a script
➢ To add a border, use the style attribute

8 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
➢ a width and height attribute to define the size
➢ after creating the rectangular canvas area, you must add a JavaScript to do the
drawing
JS ‫ دي زي مساحه بنحددها علشان نرسم أشكال جواها ب‬Canvas
❖ SVG Graphics:
➢ SVG stands for Scalable Vector Graphics
➢ SVG is used to define graphics for the Web
➢ The HTML <svg> element is a container for SVG graphics.
➢ SVG has several methods for drawing paths, boxes, circles, text, and graphic

❖ Border Color:

❖ In HTML, colors can also be specified using color names, or RGB values, HEX values,
HSL values, RGBA values, and HSLA values
❖ RGB Color Values:
➢ rgb(red, green, blue).
➢ Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
➢ For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.
➢ To display black,➔ rgb(0, 0, 0) , white ➔ rgb(255, 255, 255)

9 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
❖ HEX Color Values:
➢ #rrggbb
➢ Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
➢ Red➔#ff0000 , Black ➔ #000000 , White ➔ #ffffff
❖ HSL Color Values:
➢ hsl(hue, saturation, lightness)
➢ Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.
➢ Saturation is a percentage value, 0% means a shade of gray, and 100% is the full
color
➢ Lightness is also a percentage value, 0% is black, and 100% is white.
❖ HTML Iframes:
➢ iframe is used to display a web page within a web page
➢ iframe can be used as the target frame for a link

Target
Link
❖ HTML - The Head Element:
➢ The HTML element is a container for the following elements:
➢ HTML metadata is data about the HTML document. Metadata is not displayed
➢ Metadata typically define the document title, character set, styles, scripts, and
other meta information
➢ <meta> element is typically used to specify the character set, page description,
keywords, author of the document, and viewport settings
➢ The metadata will not be displayed on the page, but are used by browsers (how to
display content or reload page

10 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
❖ HTML Layout Elements:
➢ <header> - Defines a header for a document or a section
➢ <nav> - Defines a set of navigation links
➢ <section> - Defines a section in a document
➢ <article> - Defines an independent, self-contained content
➢ <aside> - Defines content aside from the content (like a sidebar)
➢ <footer> - Defines a footer for a document or a section
➢ <details> - Defines additional details that the user can open and close on demand
➢ <summary> - Defines a heading for the <details> element
❖ HTML Responsive Web Design:
➢ creating web pages that look good on all devices!
➢ A responsive web design will automatically adjust for different screen sizes and
viewports ‫بتاتأقلم مع حجم كل جهاز‬
➢ The text size can be set with a "vw" unit, which means the "viewport width"
➢ 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

❖ HTML Media:
➢ Multimedia files have formats and different extensions like: .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
➢ Only MP4, WebM, and Ogg video are supported by the HTML standard.
➢ Only MP3, WAV, and Ogg audio are supported by the HTML standard
❖ The HTML Element:
➢ <video> element is used to show a video on a web page
➢ <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
➢ Add muted after autoplay to let your video start playing automatically

❖ To play an audio file in HTML, use the <audio> element

controls attribute adds audio


controls, like play, pause, and
volume

11 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬
❖ Playing a YouTube Video in HTML:
➢ Upload the video to YouTube
➢ Take a note of the video id
➢ Define an <iframe> element in your web page
➢ Let the src attribute point to the video URL
➢ Use the width and height attributes to specify the dimension of the player
autoplay=1 ➔ automatically starting a video
is annoying for your visitors!
mute=1 after autoplay=1 ➔ let your video
start playing automatically (but muted)

HTML Versus XHTML

❖ What is XHTML?
➢ XHTML stands for EXtensible HyperText Markup Language
➢ XHTML is a stricter, more XML-based version of HTML
➢ XHTML is HTML defined as an XML application
➢ XHTML is supported by all major browsers
❖ Why XHTML?
➢ XML is a markup language where all documents must be marked up correctly (be
"well-formed").
➢ XHTML was developed to make HTML more extensible and flexible to work with other
data formats (such as XML).
➢ In addition, browsers ignore errors in HTML pages, and try to display the website
even if it has some errors in the markup.
➢ So XHTML comes with a much stricter error handling.
❖ The Most Important Differences from HTML:
➢ <!DOCTYPE> is mandatory
➢ The xmlns attribute in <html> is mandatory
➢ <html>, <head>, <title>, and <body> are mandatory
➢ Elements must always be properly nested
➢ Elements must always be closed
➢ Elements must always be in lowercase
➢ Attribute names must always be in lowercase
➢ Attribute values must always be quoted

12 Mohamed Gamal Maklad ‫النب‬


‫عل ي‬ ‫صل ي‬
‫ي‬

You might also like