<head>
<meta charset = “utf-8”: before utf-8 they used to use iso-8859-1 that doesn’t support Arabic language
but utf-8 does support it
<meta name= “description” content=” this we site is for people who love football “>
<meta name= “keywords” content=” football, soccer , Messi “> keyword is what people type in the
search bar and meta keywords helps your web site to appear more for people
<meta name= “author” content=” Mouad Aarab “>
<meta http-equiv=” refresh” content= “3”>: browser refresh each 3 sec
<Meta http-equiv=”refresh” content= “3 url=[Link]
<Link rel=’stylesheet’ href=’[Link]’>
<Style> : css syntax
<Script> : JavaScript syntax
<Title>: title of the browser
</head>
<body>
<p>: Defines a paragraph
<div>: div itself has no meaning at all, it represents its children
<hr/>:most often displayed as a horizontal rule that is used to separate content ( ________________)
<Br/>: Line break
<pre>: The text will be displayed exactly as written in the HTML source code and it preserves both spaces
and line breaks.
<!-- -->: The comment tag is used to insert comments in the source code. Comments are not displayed in
the browsers.
<span>: much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<small>: defines smaller text
<b>: defines bold text
<strong>: same effect as <b> but The <strong> tag is used to define text with strong importance.
<i>: defines italic text
<em>: same effect as <i> but The <em> tag is used to define emphasized text.
<mark>: defines marked text
<u>: represents some text that is unarticulated and styled differently from normal text, such as
misspelled words or proper names in Chinese text. (payemment) .
<ins>: same effect as <u> but <ins> is used for inserted text
<s>: specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line
through it (paypal) .
<del>: same effect as <s> but the <del> tag defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text. (1500$ 1200$)
<sub>: Defines subscripted text(hello world)
world)
<sup>: Defines superscripted text (hello
Image, video and audio tags:
Image:
<img>: is used to embed an image in an HTML page and it has two required attribute:
src wich specifies the path to the image and alt that if the browser cannot display the image because its invalid or an
unsupported type, in these cases the browser may replace the image with the text defined by the alt attribute.
<img src="[Link]" alt="this is an image">
Audio:
<audio>: used to embed sound content in a document, such as music or other audio streams.
<source>: used to specify multiple media resources for media elements, such as, <video>, <audio>,
and <picture>.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.
control attribute Specifies that audio controls should be displayed (such as a play/pause button etc)
loop attribute Specifies that the audio will start over again, every time it is finished
muted attribute Specifies that the audio output should be muted
autoplay attribute Specifies that the audio will start playing as soon as it is ready
<audio controls loop muted autoplay>
<source src="[Link]" type="audio/ogg">
your browser does not support this element
</audio>
Video:
<video>: used to embed video content in a document, such as a movie clip or other video streams.
The text between the <video> and </video> tags will only be displayed in browsers that do not support
the <video> element.
controls attribute Specifies that audio controls should be displayed (such as a play/pause button etc)
loop attribute Specifies that the audio will start over again, every time it is finished
muted attribute Specifies that the audio output should be muted
autoplay attribute Specifies that the audio will start playing as soon as it is ready
poster attribute Specifies an image to be shown while the video is downloading, or until the user hits the
play button
preload attribute Specifies if and how the author thinks the video should be loaded when the page loads
<track>:is used to specify subtitles, caption files or other files containing text, that should be visible when
the media is playing
Label attribute Specifies the title of the text track
kind attribute Specifies the kind of text track
<video controls loop muted autoplay width="300" height="150"
poster="[Link]" preload="metadata">
<source src="vid.mp4" type="video/mp4">
<track default src="[Link]" kind="subtitles"
label="arabiccc">
your browser does not support this element
</video>
Table:
<table>: Defines an HTML table.
<tr>: Defines a table row
<th>: Defines a table header
<td>: Defines a table cell
<caption>: Defines a table caption that must be inserted immediately after the <table> tage.
<thead>: used to group header content in an HTML table
<tbody>: used to group the body content in an HTML table
<tfoot>: used to group footer content in an HTML table
NOTE: thead, tbody and tfoot are used bach t9ad tableau ya3ni wakha tchad tfoot othatha fo9 thead maraytbadal walo f
structure dial table
rowspan attribute Sets the number of rows a cell should span
colspan attribute Specifies the number of columns a cell should span
<table border="1">
<caption>table title</caption>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ahmad</td>
<td>25</td>
<td rowspan="2">3000</td>
</tr>
<tr>
<td>gamal</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total</td>
<td colspan="2">5400</td>
</tr>
</tfoot>
</table>
Lists
<ul>: represents a list of items, where the order of the items is not important, that is where changing the order would not
materially change the meaning of the document.
<li>: Defines a list item, in <ul> and <menu> is usually displayed with bullet points, but in <ol> the list items will usually be
displayed with numbers and letters
<ol type= “””” start=””>: represents a list of items, where the items have been intentionally ordered, such that changing the
order would change the meaning of the document.
the type attribute takes 5 values:
- ‘a’ indicates lowercase letters
- ‘A’ indicates uppercase letters
- ‘i’ indicates lowercase Roman numerals
- ‘I’ indicates uppercase Roman numerals
- and ‘1’ indicates numbers (default value)
reversed attribute means that the items of the list are in reversed order.
start attribute specifies the start value of the list.
<dl>: Defines a description list
<dt>: Defines a name/term in a description list
<dd>: used to describe term/name is a description list
<dl>
<dt>iphone</dt>
<dd>this is a phone</dd>
</dl>
Link
<a>: Defines a hyperlink wich is used to link frm one page to another.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
download attribute Specifies that the target will be downloaded when a user clicks on the hyperlink
href attribute specifies the URL of the page the link goes to
target attribute specifies where to open the linked document
href=[Link]
href=”[Link] : to send an email
href= “#paragraph1”: to target a paragraph on the same browser we give the <P> an id
href=”[Link] to call a phone number
href=”JavaScript”: alert (‘hello world’ ) ;”: to show a JavaScript code
blank value Load the URL into a new loading browser context
input
<form>: Tag used to create an HTML form for user input, the <form> tag can contain one or more of <input>, <textarea>,
<button>, <select>, <option>, <optgroup>, <fieldset>, <lebel>, <output>
action attribute specifies where to send the form-data when the form is submitted
method attribute specifies the HTPP method to use when sending the form-data and it takes 2 values:
get which is the default value appends the for-data to the URL in name=value/name-value
post value sends the form-data as an HTTP post transaction
<fieldset>: Used to group related elements in a form and it draw a box around the related elements
<legend>: Defines a caption for the <fieldset> element.
<label>: Defines a label for input element
for attribute specifies the id of the form element the label should be bound to
<input>: specifies an input field where the user can enter data.
placeholder attribute specifies a short hint that describes the expected value of an <input> element
required attribute specifies that an input field must be filled out before submitting the form.
name attribute specifies the name of an <input> element and where the information are sent to
value attribute specifies the value of an <input> element
min max step attribute are usually used with range and number type
checked attribute specifies that an <input> element should be pre-selected when the browser loads (for radio and checkbox
multiple attribute specifies that a user can enter more than one value
maxlength attribute specifies the maximum number of characters allowed in an <input> element
minlength attribute specifies the minimum number of characters allowed in an <input> element
<form action="[Link]" method="post">
<fieldset>
<legend>title</legend>
<div>
<label for="txt">username</label>
<input placeholder="username" id="txt" required
name="user">
</div>
<div>
<label for="pw">password</label>
<input placeholder="password" id="pw" type="password"
required name="password">
</div>
<input value="send" type="submit" >
</fieldset>
</form>
the different input types are text, submit, button, color, file, seach, url, hidden, date, month, time, week, email, tel
<input type=”radio“>
Note: Its necessary to give all the radio input the same name
<form>
<div>
<input type="radio" id="mouad" value="mouad" checked name="friend" >
<label for="mouad">mouad</label>
</div>
<div>
<input type="radio" id="aymen" value="aymen" name="friend" >
<label for="aymen">aymen</label>
</div>
<div>
<input type="radio" id="said" value="said" name="friend" >
<label for="said">said</label>
</div>
<input type="submit">
</form>
Select option datalist
<select>: used to create a drop-down list
multiple attribute specifies that multiple options can be selected at once
<option>: defines the available options in the drop-down list
selected attribute specifies that an <option> element should be pre-selected when the browser loads
<optgroup>: used to group related options in a select element
label attribute specifies that a label/title for an option-group
This method using select and option tag doesnt allow u to see what u type in the search bar
<form>
<label for="cnt"> What is ur country</label>
<select name="country" id="cnt" >
<optgroup disabled label="section1">
<option value="egy">egypt</option>
<option selected value="alg">algeria</option>
<option value="mor">morocco</option>
</optgroup>
<optgroup label="section2">
<option value="can">Canada</option>
<option value="usa">Usa</option>
<option value="eng">England</option>
</optgroup>
</select>
<input type="submit">
</form>
<datalist>:
NOTE: We didnt close the <option> tag because what we write in the value attribute is what is going to manifest on the
browser
<input list="language" name="lang">
<datalist id="language">
<option value="c">
<option value="html">
<option value="css">
<option value="java">
<option value="c#">
<option value="python">
</datalist>
Button types
There are 3 kind of buttons:
submit: Defines a submit button
button: Defines a clickable button (mostly used with a Javascript to activate a Script)
reset: Defines a reset button
Note: Both ways have the same results
form>
<input type="button" value="button">
<input type="submit">
<input type="reset" value="reset">
</form>
<form>
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button"> button</button>
</form>
Textarea
<textarea>:Defines a multi-line text input control often used in a form, to collect user inputs like comments or reviews
autofocus attribute specifies that a text area should automatically get focus when the page loads
cols attribute specifies the visible width of a text area
rows attribute specifies the visible number of lines in a text area
disabled attribute specifies that a text area should be disabled ( the information of the value attribute aren’t sent )
readonly attribute specifies that a text area should be read-only (the information of the value attribute are sent )
<form target="_blank" novalidate>
<div>
<input disabled minlength="2" maxlength="10" required type="text"
placeholder="title" name="title">
</div>
<br>
<div>
<textarea cols="25" rows="5" readonly autofocus minlength="10"
maxlength="25" required name="content" placeholder="content..."
rows="3"></textarea>
</div>
<input type="submit">
</form>
Iframe, object and embed
<iframe>: Specifies an inline frame that is used to embed another document within the current HTML document.
allowfullscreen attribute allow the user to fullscreen the video
<object>: Defines a container for an external resource that can be a picture media player...
<embed>: Defines a container for an external resource that can be a picture media player...
<iframe src="[Link]
<object data="[Link]
<embed src="[Link]
<iframe width="200" height="250" src="[Link]" frameborder="0"
scrolling="no"></iframe>
<object width="200" height="250" data="[Link]"></object>
<embed width="200" height="250" src="[Link]">
<iframe width="200" height="250" src="vid.mp4" frameborder="0"
scrolling="no" allowfullscreen></iframe>
<object width="200" height="250" data="vid.mp4"></object>
<embed width="200" height="250" src="vid.mp4">
<iframe width="200" height="250" src="[Link]" frameborder="0"
scrolling="no"></iframe>
<object width="200" height="250" data="[Link]"></object>
<embed width="200" height="250" src="[Link]">
<iframe width="200" height="250" src="-صالح-الشيخ-ـ-التوحيد-كتاب-لشرح-التمهيد
الشيخ-آل.pdf" frameborder="0" scrolling="no"></iframe>
<object width="200" height="250" data="-الشيخ-ـ-التوحيد-كتاب-لشرح-التمهيد
الشيخ-آل-صالح.pdf"></object>
<embed width="200" height="250" src="-صالح-الشيخ-ـ-التوحيد-كتاب-لشرح-التمهيد
الشيخ-آل.pdf">
</body>