HTML - hypertext markup language

Basmaa
Mostafa
HTML
hypertext markup language
1

Basmaa
Mostafa
TABLE OF CONTENTS
01. HTML Basics
Basics-Semantic Elements-Attributes-Block and Inline
Elements-Forms-Responsive Web Design-XHTML…..
02. HTML for Text Formatting
Text formatting-Links-Tables-Lists-Symbols-Space…
03. HTML Visuals and Media
Layout-Classes-Colors-Images-Multimedia…
04. HTML tricks
< >
2

Basmaa
Mostafa
Main Concepts and Principles Explained
HTML Basics
01
3

Basmaa
Mostafa
Main Concepts and Principles Explained
● HTML stands for hypertext markup language.
● Content structure => make your websites easy-to-read and improve user
experience by dividing texts into paragraphs, lists, quotes, and headings.
● When comparing HTML vs HTML5, the first major difference is the level of support.
Websites created with HTML5 can be used across all major browsers and different
platforms as well.
4

Basmaa
Mostafa
HTML Syntax
<!DOCTYPE html>
<html>
<head>
<title>Name of the website</title>
</head>
<body>
<div>
<h1>Heading for the content below</h1>
<p>Text text text</p>
</div>
</body>
</html>
● The <!DOCTYPE> Declaration : informs the browser about
the document type , not case sensitive .
● The <html> element: used to define an HTML document .
● The <head> element: contains all information about what is
the HTML document , website title, required meta
information, and more .
● The <title> element: describes a document's title.
● The <body>element: makes content visible on websites
element should be shown in a website.
● The <h1>–<h6> elements: heading is similar to a title, Use to
point out content titles and names.
● The <p> element: defines a paragraph of text.
● The <div>element: used to define an HTML document .
● <html> : opening tag . </html> : closing tag .
5

Basmaa
Mostafa
Head Element
● define meta data (such as the title of the page or related keywords). It is also where
you'd place JS scripts or CSS stylesheets.
● The content of head section not shown to the users of the website: instead, it gives
instructions for the machine to display a webpage correctly.
○ <title>Document title</title>
defines the HTML page title
○ <link rel="stylesheet" type="text/css" href="style_file.css">
creates a relation to external resources (stylesheets or scripts)
○ <script>
document.getElementById("learn").innerHTML = "It works!";
</script>
include a JS script in your HTML document
○ <head>
<meta charset="UTF-8">
<meta name="description" content="Learn to code!">
<meta name="keywords" content="HTML, PHP,
JavaScript">
<meta name="author" content="The BitDegree Team">
</head>
define meta information about the document
6

Basmaa
Mostafa
*
What is an Empty Element in HTML?
elements are mostly used to add or embed content into documents ,do not need a closing tag
because there simply is no content for them to wrap around.
<img src="image.png" alt="Doggo" width="205" >
<area> <base> <br> <col> <embed>
<hr> <img> <input> <keygen> <link>
<meta> <param> <source> <track> <wbr>
Optional closing tags :
<p>Paragraph element without end tag
<html> <head> <body> <p> <dt>
<dd> <li> <option> <thead> <th>
<tbody> <tr> <td>
<tfoot> <colgroup>
7

Basmaa
Mostafa
Attributes
● <tag attribute="value">content</tag>
● Example
<img src="image.png" alt="Space Doggo" width="50" height="50">
● A class alters the element's appearance by changing its color, size, etc. with CSS
8

Basmaa
Mostafa
Attributes● Common HTML Attributes
○ id helps you to add a unique ID for an element to be used for identification
<nav id="faq">
○ class creates a relation between the element and a stylesheet
<p class="paragraph1">This is paragraph text.</p>
○ style allows you to provide inline styling
<div style="background-color: black; color: white;">
○ title adds information, Hovering on it will cause a tooltip
<h1 title="This will show up after hovering the mouse over this element">Some
random text</h1>
○ alt attribute sets up some alternative text
<img src="image.png" alt="Space Doggo">
○ href attribute adds an URL destination for a link, creating a hyperlink
<a href="https://www.bitdegree.org/">Click this link to start learning.</a>
○ width and height attributes, you can change the element's dimensions
9

Basmaa
Mostafa
Structural Elements
header of your website.
<header>
<h1>JavaScript</h1>
<h3>What is JavaScript?</h3>
<p>Today we are going to talk about JavaScript</p>
</header>
depicts space for the main content of a webpage
<main id="content" class="group" role="main">
describes a special space for navigation links
<nav>
<ul>
<li><a href="https://www.bitdegree.org/tag/interactive-learning">Gamified
Courses</a></li>
<li><a href="https://www.bitdegree.org/tag/game-dev">Game Dev Courses</a></li>
</ul>
</nav>
10

Basmaa
Mostafa
Structural Elementsdescribes the details of your website or content in general
<details>
<summary>Click to reveal fun facts!</summary>
<p>A banana is a berry, but a strawberry is not.</p>
<p>The Amazon rainforest covers 40 percent of South America.</p>
<p>Elephants can’t jump.</p>
</details>
sets space for isolated content to define a caption
<figure>
<figcaption>Dog</figcaption>
<img src="image.png" alt="The Bread Dog" width="300" height="300">
</figure>
Inline Elements
<mark> <progress> <meter> <time> <bdi>
11

Basmaa
Mostafa
Structural Elementsdefines a piece of self-contained information
<article>
<h1>Fun Fact</h1>
<p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>
describes content to be set to the side
<aside>
<h4>Lake</h4>
<p>Oxford lake is a lake in the state.</p>
</aside>
describe content which sets space for footnotes
<footer>
<address>
Postal Address: Door No.00, Street, City, State, Country.
</address>
<p>Copyright © 2018 All rights reserved.</p>
</footer>
12

Basmaa
Mostafa
Block Elements
● elements that always start with a new line
● take up all available width of the website
● displayed in a column.
<div>
<h1>–<h6>
<form>
Inline Elements
● elements don't start with a new line.
● only take up as much space as their content.
<span>
<a>
<img>
HTML inline elements
13

Basmaa
Mostafa
HTML Comment

or

● explain your choices to a colleague reviewing your code or
even debug a program quicker.
● This tag is <comment>NOT</comment> supported.
An experimental element which was never in the HTML
specification. No modern browser supports it
14

Basmaa
Mostafa
HTML Forms
<form action="/action_page.php">
First name:<br><input type="text" name="name" value="John"><br>
Last name:<br><input type="text" name="surname" value="Snow"><br>
<input type="submit" value="Submit">
</form>
Multi-choice Forms
Radio buttons Checkboxes Dropdown lists
<form>
<input type="radio" name="day" value="monday" checked>Monday<br>
<input type="radio" name="day" value="tuesday">Tuesday<br>
<input type="radio" name="day" value="wednesday">Wednesday
</form>
Type attribute
Button: checkbox color date datetime-local
email
File : hidden image month number
password
Radio : range reset search submit
tel
15

Basmaa
Mostafa
HTML Forms Attributes
<form action="index.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<p>Form elements</p>
</form>
Accept-charset Outlines the character set in the submitted form
Action Sets the destination of the data to be processed
Autocomplete Stipulates whether the form should be autocompleted (on by default)
Enctype Outlines the encoding type for the submitted information
Method Stipulates the HTTP method for submitting the form (get or post)
Name Names a form in HTML
Novalidate Informs the browser to avoid authenticating the form
Placeholder Specifies a placeholder text in a textual input field
Target Indicates the target webpage where the processed data will be displayed
16

Basmaa
Mostafa
Text Allows typing a line of text (usually under 32 characters)
Date Provides access to a calendar to choose a date
Email Allows typing an email address and validates it
Checkbox Allows selecting multiple options from a predefined set
Radio Allows selecting a single option from a predefined set
Submit Creates a submit button needed to send the input to the server
Accesskey Defines an access key (a keyboard shortcut)
Autocomplete Defines if the input field should be completed automatically by the browser
Autofocus Defines if the input field should be focused automatically by the browser
Border DEPRECATED. Defined the border for the input element
Checked Defines if an option should be selected automatically by the browser
Disabled Disables the input element
Form Connects the input element to an HTML form
Formaction Defines the URL address for data submission
Formenctype Defines how the user input will be sent to the server
Formmethod Defines the method to be used when sending user input
Formtarget Defines where the server response should be opened by the browser
Height Defines the height if the user input is an image
17

Basmaa
Mostafa
Language DEPRECATED. Defined the language used for input-related events
List Defines the ID the the <datalist> element
Max Defines maximum value for the input element
Maxlength Defines maximum text length for the input element
Multiple Allows entering multiple values
Min Defines minimum value for the input element
Name Defines the name of the input element
Pattern Defines a regular expression used in validation
Placeholder Defines places holder text to textual input elements
Readonly Forbids the user to modify input value
Required Forbids the user to submit the form if the required field has no input
Size Defines input size in characters
Src Defines the image input source
Step Defines the interval between valid numeric values
Value Defines a default value or selection
18

Basmaa
Mostafa
HTML Forms ElementsCommon Elements
collect textual multi-line data
<textarea name="comment" cols="30" rows="3" id="comment">Write your comments
here</textarea>
<label> tag sets a name for the <input> element.
<label>My Name Field</label>
<input type="text" name="myName" class="myNameInput" required/>
<fieldset> element groups related elements which are then displayed in one separated box.
<form action="login" method="POST">
<fieldset>
<legend>Login Form:</legend>
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
<input type="submit" value="Login">
</fieldset>
</form>
19

Basmaa
Mostafa
HTML Forms Elements
<datalist> element defines a list of options for the <input> element.
<input list="names">
<datalist id="names">
<option value="Tom">
<option value="Sam">
<option value="Jack">
<option value="Annie">
<option value="Rich">
</datalist>
</input>
<output> element defines a result of a calculation.
<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
0<input type="range" id="x" value="75">100
+<input type="number" id="y" value="72">
=<output name="result" for="x y"></output>
</form>
<keygen> element generated a private and public key pair to be used while submitting a form.
<form action="login" method="POST">
Username: <input type="text" name="user_name">
Password: <input type="password" name="user_password">
Keygen Strength: <keygen name="login_form">
<input type="submit" value="Login">
</form> 20

Basmaa
Mostafa
HTML Forms
<select> element generates an HTML drop down list
<select name="housepets">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
</select>
<select>
<optgroup label="Sports">
<option value="baseball">Baseball</option>
<option value="basketball">Basketball</option>
</optgroup>
<optgroup label="Shopping">
<option value="food">Food</option>
<option value="gift">Gift</option>
</optgroup>
</select>
21

Basmaa
Mostafa
Text formatting-Links-Tables-Lists-Symbols-Space
HTML for Text Formatting
02
22

Basmaa
Mostafa
HTML Character Encoding
character encoding huge selection of characters available. Apart from your usual Latin letters and
Arabic numbers, there are also foreign alphabets, mathematical symbols and other special
characters.
The first and simplest HTML character encoding is called ASCII stands for the American Standard
Code for Information Interchange
128 characters
Lowercase letters - Uppercase letters - Punctuation symbols - Numbers from 0 to 9
33 unprintable characters are also called control characters.
Your Best Option: UTF-8
Unicode is the industry standard used for the consistency of character encoding. such as UTF-
8, UTF-16, and UTF-32.
UTF-8 stands for Unicode Transformation Format 8-bit
reasons to use UTF-8:
It supports many languages - completely compatible with ASCII - natively used by XML - uses
less space than other Unicode encodings.
<meta charset="UTF-8">
23

Basmaa
Mostafa
HTML Text Formatting
<em> tag is used for emphasizing. Most browsers italicize HTML text within these tags –
however, this element conveys not only visual but also semantic meaning
<em>This text is emphasized.</em>
italicize HTML text without any semantic meaning, use the <i> tag:
<i>This text is in italics.<i>
<strong> tag defines important text. Browsers display it as bold text
<p>This is <strong>important</strong> text.</p>
bold text without any semantic meaning
<p>Normal text vs <b>Text in bold</b></p>
<u> tags, you can underline text
Here is some <u>underlined</u> text
<small> tags can be used to make the text smaller without changing the height of the line
<p>Paragraph with <small>smaller text</small> in it.</p>
opposite tag called <big> has been removed from HTML5
<center> element used to center text in HTML
<center>Everything here will be displayed in the center of the document.</center>
24

Basmaa
Mostafa
HTML Text Formatting
<mark> tags highlight HTML text in bright yellow color to resemble using a highlighter pen
<p>The mark tag is <mark>useful</mark> when you need to highlight important
information.</p>
<del> tags cross out your text is still visible in the final copy so don't use this tag if you want to
actually delete it!text to mark it as deleted
<p>I am not deleted text, but <del>I am.</del></p>
<s> tags create a similar visual effect as <del> but have a different semantic meaning – they
define a text that is no longer relevant
<p><s>This text is not relevant.</s></p>
<ins> tags mark inserted HTML text
<ins>This text is inserted</ins>
<sub> tags create subscript text which is half the size of the usual text and also has a lower line
<p>This text contains <sub>subscript</sub> text.</p>
<sup> tag defines an HTML superscript text
<p>The following is <sup>superscript</sup>.</p>
25

Basmaa
Mostafa
HTML Quoting and Citing
<dfn> tag is used to define the term, that is mentioned for the first time. The content of the tag is
displayed in italic.
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for
documents on the World Wide Web.</p>
blockquote and q are used for quotations. blockquote is generally used for standalone often
multi-line quotations whereas q is used for shorter, in-line quotations.
<p>So I asked Bob about quotations on the Web and he said <q>I know as much about quotations
as I do about pigeon fancying</q>. Luckily, I found HTML Dog and it said:</p>
<blockquote cite="http://www.htmldog.com/guides/html/intermediate/text/">
<p>blockquote and q are used for quotations. blockquote is generally used for standalone often
multi-line quotations whereas</p>
<cite> element defines the title of the work you're citing or quoting.
<cite>Sophie's Choice</cite> by William Styron
26

Basmaa
Mostafa
HTML Heading
<h1> – <h6>Names sections of a web document to provide structure
<head>Contains machine-readable metadata (e.g., encoding information)
<header>Contains introductory or navigational information
<h1>I am the most important heading in the world</h1>
<h6>I am the least important heading in the world</h6>
27

Basmaa
Mostafa
HTML Paragraphs
<p>This is a paragraph.</p>
<br> element new line
<p>You can<br>break a paragraph<br>using line breaks.</p>
<hr> element horizontal line
<hr>
<pre> element You can keep text formatting
<pre>
My Doggo is flying into space.
My Doggo is flying into space.
Oh, where will my Doggo fly now.
</pre>
28

Basmaa
Mostafa
HTML Link
<a> links, or hyperlinks
<a href="../html-basics" target="_blank">This is a link to coding lessons.</a>
_blank Directs the user to a new window or tab.
_self (default feature) Loads the URL in the same window or the tab it was clicked.
_parent Loads the URL in the parent frame. It’s only used with frames.
_top Loads the linked document in the full body of the window.
href="/learn/html-basics" root relative URL
title="Link to learn" outlines extra information about the link’s purpose
Using Images as HTML Links
<a href="https://www.bitdegree.org/course/coding-for-beginners-space-doggos">
<img src="image.png" alt="HTML Tutorials" >
</a>
Bookmark Links
<h2 id="examples">HTML Examples</h2>
<a href="#examples">Jump to HTML Examples</a>
include a link to the bookmark from a different page
<a href="https://www.bitdegree.org/tutorials/difference-between-html-and-
html5/#What_is_HTML5">Jump to read about HTML5</a>
29

Basmaa
Mostafa
HTML Tables
<table>
<caption>define the whole table</caption>
<thead>
<tr>
<td>Purchase</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Long Island</td>
<td>45</td>
<td>50</td>
</tr>
<tr>
<td>BestBuy</td>
<td>60</td>
<td>10</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Summary</td>
<td>It was mostly sunny.</td>
</tr>
</tfoot>
</table> 30

Basmaa
Mostafa
HTML Tables
<td>This is the first row in the first column</td>
<td>This is the first row in second column</td>
</tr>
<tr>
<td>This is the second row in the first column</td>
<td>This is the second row in the second column</td>
colspan attribute merges multiple cells in one row to create one
<th colspan="2">List of Fruit Prices</th>
Row span attribute acts in the same manner
<th rowspan="3">Month of June 2017</th>
<colgroup> and <col> elements allows you to assign specific inline styling for particular columns:
<table>
<colgroup>
<col span="1" style="background-color: cornsilk;">
<col style="background-color: bisque;">
</colgroup>
<tr>...
31

Basmaa
Mostafa
HTML ListsUnordered lists
Circle disc square none
<ul style="list-style-type: disc;" type="square">
<li>Sugar</li>
<li>Salt</li>
<li>Bread</li>
<li>Milk</li>
</ul>
Ordered lists
ordered list begins from 1
A Uppercase letters - a Lowercase letters - I Uppercase Roman numbers - i Lowercase Roman
numbers
start attribute in a numbered list, you can set a custom beginning point for the numbering
<ol type="i" start="10">
<li>Action</li>
<li>Adventure</li>
<li>Thriller</li>
<li>Comedy</li>
</ol>
32

Basmaa
Mostafa
HTML ListsDescription lists
<dl> to define a description list
<dt> to name the entries
<dd> to provide descriptions
<dl>
<dt>Car</dt>
<dd>A vehicle used for boring transportation.</dd>
<dt>Hot air balloon</dt>
<dd>A vehicle used for fun transportation.</dd>
</dl>
33

Basmaa
Mostafa
HTML ListsNesting Lists : lists within one another
<ol>
<li>Breakfast
<ul>
<li>Milk</li>
<li>Eggs </li>
</ul>
</li>
<li>Lunch
<ul>
<li>Meat</li>
<li>Bananas </li>
</ul>
</li>
<ul>
<li>Chicken</li>
<li>Rice</li>
</ul>
</li>
</ol>
34

Basmaa
Mostafa
HTML Symbols
Adding HTML Special Characters
There is no need to use tags, attributes, properties, or values. When writing text in your website,
include the entity name when needed
<p>I will display €</p>
<p>I will display €</p>
Char - Html Entity - Decimal Code -
Definition
$ -&dollar; -$ -Dollar
¢ -¢ -¢ -Cent
€ -€ -€ -Euro
£ -£ -£ -Pound
¥ -¥ -¥ -Yen
₹ -₹ -
Rupee
& - & - & - Ampersand
* - &ast; - * - Asterisk
@ - &commat; - @ - At symbol
% - &percnt; - % - Percent
® - ® - ® - Registered
sign
© - © - © - Copyright
sign
™ - ™ - ™ - Trademark
-   -   - Non-breaking 35

Basmaa
Mostafa
HTML Symbols
Char - Html Entity - Decimal Code - Definition
+ -&plus -+ -Plus
− -− -− -Minus
× -× -× -Multiplication
÷ -÷ -÷ -Division
= -= -= -Equal
≠ -≠ -≠ -Not equal
± -± -± -Plus or minus
∀ -∀ -∀ -For all
∃ -∃ -∃ -There exists
∂ -∂ -∂ -Partial differential
∇ -∇ -∇ -Nabla
∅ -∅ -∅ -Empty sets
∉ -∉ -∉ -Not an element of
∈ -∈ -∈ -Element of
∋ -&ni; -∋ -Contains as
a member
∑ -∑ -∑ -N-ary summation
∏ -∏ -∏ -N-ary product
Β -Β -Β -Greek capital letter beta
A -Α -Α -Greek capital letter
alpha
Δ -Δ -Δ -Greek capital letter
36

Basmaa
Mostafa
HTML Symbols
Char - Html Entity - Decimal Code - Definition
Γ -Γ -Γ -Greek capital letter
gamma
Ζ -Ζ -Ζ -Greek capital letter zeta
E -Ε -Ε -Greek capital letter
epsilon
↑ -↑ -↑ -Upwards arrow
← -← -← -Leftwards arrow
↓ -↓ -↓ -Downwards arrow
→ -→ -→ -Rightwards arrow
♣ -&clubs; -♣ -Black club suit
♠ -&spades; -♠ -Black spade suit
♦ -&diams; -♦ -Black diamond suit
♥ -&hearts; -♥ -Black heart suit
37

Basmaa
Mostafa
HTML SpaceHTML does not allow multiple spaces in a line It has a feature called whitespace
collapse: no matter how many spaces you type
 
 
to add an uncollapsible HTML blank space between words, images, or other page
elements.
38

Basmaa
Mostafa
Computer Code
HTML computer code is displayed with fixed letter size, font, and spacing.
<code> tags define an HTML code snippet on your website text will be displayed in a
default monospace font:
<code>
a = 6;
b = 9;
c = "this is the best program";
</code>
<samp> element depicts the output of the system or computer in your HTML
document. The font, size, and spacing remain the same as with other HTML code
elements:
This is an output of a program ->
<samp>
a + b + c = alotOfNumbers
</samp>
<kbd> element also defines a fragment of HTML code, according to HTML syntax, it
should only be used to display a keyboard input:
Press <kbd>Ctrl + O</kbd> to open a document file
<var> element defines a variable. It can be used to define variables in mathematics or
programming:
<p>Einstein's best known equation goes like this:
<var>E</var> = <var>mc</var><sup>2</sup></p>
39

Basmaa
Mostafa
Styles
Cascading Style Sheets (CSS)
Type Added with
Best for
Inline CSS The style attribute A single element
Internal CSSThe <style> tag A single web page
External CSS The <link> tag The whole
website
<div style="background-color: black; height: 200px; width: 200px;"></div>
<head>
<style>
h1 {
color: indianred;}
p {
color: red;
}
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
40

Basmaa
Mostafa
HTML Color
Coloring your website is a part of CSS inline styling
Both HTML background color and color properties can take values defined in
names
<h2 style="background-color: brown; color: bisque;">
I am using a color name </h2>
RGB mixing red, green, and blue values.
<h2 style="color: rgb(255, 236, 139); background-color: rgb(143, 188, 143);">
I am using RGB codes </h2>
RGBA A stands for alpha and represents the opacity. It can be defined in a number from 0 (not
transparent) to 1
<h2 style="color: rgba(252, 156, 249, 0.75);">
RGBA values let you set custom opacity </h2>
HEX the code contains both numbers from 0 to 9 and letters from A to F The first two symbols
determine red intensity, the two in the middle - green intensity, and the last two - blue intensity.
<h2 style="color: #B0E0E6; background-color: #ACAFFF;">
I am using HEX codes </h2>
41

Basmaa
Mostafa
HTML Color
HSL Hue is defined in degrees from 0 to 360. On a color wheel, red is around 0/360,
green is at 120 and blue is at 240.
Saturation is defined in percentages from 0 (black and white) to 100 (full color).
Lightness is defined in percentages from 0 (black) to 100 (white).
<h2 style="color: hsl(38, 95%, 25%); background-color: hsl(38, 77%, 88%);">
I am using HSL codes</h2>
HSLA alpha and represents the opacity which defined in a number from 0 to 1
<h2 style="color: hsla(128, 95%, 25%, 0.75);">
HSLA values let you set custom opacity </h2>
42

Basmaa
Mostafa
iframe
You should use it to to display a webpage inside another webpage
<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%"
height="300px"></iframe>
Just like in a hyperlink, the URL of the page you are going to include
name attribute sets a name for the iframe element
<iframe src="page_URL"></iframe>
name attribute sets a name for the iframe element
<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm"
name="iframe_tutorial"></iframe>
sandbox attribute enables an extra set of restrictions for the HTML iframe's content,
meaning that it will disallow automatically playing videos and prevent the content from
using plugins
<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" sandbox></iframe>
43

Basmaa
Mostafa
Layout-Classes-Colors-Images-Multimedia…
HTML Visuals and Media
03
44

Basmaa
Mostafa
Images
alt attribute sets an alternate text to show if the image cannot be displayed.
src attribute defines the source from where the image is taken.
<img src="image.png" alt="Space Doggo" width="50" height="50">
<a href="your_link.html">
<img src="doggo.html" alt="HTML Image link" style="width: 75px; height: 75px;
border: 0;">
</a>
Image Dimensions
<img src="Style.jpg" alt="HTML5 Image style" style="width: 128px; height: 128px;">
<img src="WidthHeight.jpg" alt="HTML5 Image example" width="128" height="128">
Image Maps one image can also contain multiple clickable areas with different links.
<img src="https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true" width="500"
height="600" alt="Creatures" usemap="#creaturemap">
<map name="creaturemap">
<area shape="rect" coords="34, 44, 270, 350" alt="Doggo"
href="https://www.bitdegree.org">
<area shape="rect" coords="290, 172, 333, 250" alt="Gaming"
href="http://www.bitdegree.org">
<area shape="circle" coords="337, 300, 44" alt="Level up"
href="http://www.bitdegree.org">
</map>
45

Basmaa
Mostafa
Multimedia ,objects
HTML objects and plugins can also be called HTML multimedia.
<object> element specifies an embedded object in the document. It can be used to embed
multimedia files or another web page in HTML
<object width="400" height="300" data="example.ex">
<embed> tag can also be used for specifying embedded objects in web documents, mostly
HTML plugins and external applications
<embed width="400" height="300" src="example.ex">
video or audio, you can simply use <audio> and <video> tags
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
<source src="video-tag-sample.webm" type="video/webm">
<source src="video-tag-demo.ogg" type="video/ogg">
Video tag is not supported in this browser.
</video>
46

Basmaa
Mostafa
Player
Video Player
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
<source src="video-tag-sample.webm" type="video/webm">
<source src="video-tag-demo.ogg" type="video/ogg">
Video tag is not supported in this browser.
</video>
Audio Player
<audio controls>
<source src="audio-tag-example.mp3" type="audio/mpeg">
<source src="audio-tag-sample.wav" type="audio/wav">
<source src="audio-tag-demo.ogg" type="audio/ogg">
Audio tag is not supported in this browser.
</audio>
Autoplay Makes the audio start playing automatically
Loop Makes the audio start playing again when it finishes
Muted Makes the player muted by default
Preload Instructs the browser what to preload – the whole file (auto), its metadata
(metadata) or nothing at all (none)
47

Basmaa
Mostafa
Formats
Audio Formats
Format Media type
PCM audio/wav
MP3 audio/mpeg
AAC audio/mp4, audio/aac, audio/aacp
Vorbis audio/ogg, audio/webm
Opus audio/ogg, audio/webm
FLAC audio/flac, audio/ogg
Video Formats
Format Media type
Theora video/ogg
H.264 video/mp4
HEVC video/mp4
VP8 ideo/webm
VP9 video/webm
AV1 video/webm
48

Basmaa
Mostafa
YouTube Video
Understanding how to embed a YouTube video in HTML can save you a lot of trouble.
The trick is using an iframe instead of the <video> tags
As you click it, you will see a few sharing options, including various social media
platforms. The very first on the list is Embed. Click on it with your cursor:
YouTube will generate a code for you to use automatically. The <iframe> tag will have
the URL of the video source, height and weight of the player and a few more attributes
included
<iframe width="560" height="315"
src="https://www.youtube.com/embed/RuckLtuInNY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
49

Basmaa
Mostafa
< >
HTML tricks
04
50

Basmaa
Mostafa
HTML tricks
Make Scrolling or Falling Text
<marquee>I wanna scroll with it, baby!</marquee>
Make your Text Bouncy
<marquee behavior=alternate width="202″ scrollamount="8″ scrolldelay="95″
height="37″ bgcolor="#00FFFF">Make your Text Bouncy</marquee>
Calling and Texting Links
<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
<acronym> tag is a way to define or further explain a group of words
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym>
<abbr> tag is only used to define abbreviated words.
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite
album.
51

Basmaa
Mostafa
Do you have any questions?
basmaamostafa27@gmail.com
https://www.linkedin.com/in/basma-mostafa-06828a16a/
THANKS!
52

HTML - hypertext markup language

More Related Content

What's hot (17)

Similar to HTML - hypertext markup language (20)

Recently uploaded (20)

HTML - hypertext markup language