Scribd
Upload
24 views43 pages

HTML

Uploaded by

soniaatman2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views43 pages

HTML

Uploaded by

soniaatman2006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>


<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

HTML Links
HTML links are defined with the <a> tag:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">This is a link</a>

</body></html>
HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

<img src=" " alt=" " width="104" height="142">

</body>

</html>

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:

<a href="https://www.w3schools.com">Visit W3Schools</a>


The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:

<img src="img_girl.jpg">

The width and height Attributes


The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute, or if the user uses a screen
reader.

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

<html>

<body>
<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>

</html>

HTML Text Formatting


HTML contains several elements for defining text with a special meaning. HTML
Formatting Elements

Formatting elements were designed to display special types of text:


 <b> - Bold text
 <b>This text is bold</b>
 <strong> - Important text
 <strong>This text is important!</strong>
 <i> - Italic text
 <i>This text is italic</i>
 <em> - Emphasized text
 <em>This text is emphasized</em>
 <mark> - Marked text
 <p>Do not forget to buy <mark>milk</mark> today.</p>
 <small> - Smaller text
 <small>This is some smaller text.</small>
 <del> - Deleted text
 <p>My favorite color is <del>blue</del> red.</p>
 <ins> - Inserted text
 <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
 <sub> - Subscript text
 <p>This is <sub>subscripted</sub> text.</p>
 <sup> - Superscript text
 <p>This is <sup>superscripted</sup> text.</p>
HTML Quotation and Citation
Elements.
we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,
and <bdo> HTML elements.

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver innovative
solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
</body>
</html>

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
</body>
</html>

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation
systems and search-engines.</p>
</body>
</html>

HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a
document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

HTML <cite> for Work Title


The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
</html>
HTML Favicon
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own
favicon on sites like https://www.favicon.cc.

To add a favicon to your website, either save your favicon image to the root
directory of your webserver, or create a folder in the root directory called
images, and save your favicon image in this folder. A common name for a
favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title> element,
like this:

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Table Cells
Each table cell is defined by a <td> and a </td> tag.

Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.

<!DOCTYPE html>
<html>

<body>

<h2>HTML Table</h2>

<table border="solid">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>

HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

The <form> Element


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

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <label> Element

The <label> tag defines a label for many form elements.


The <label> element is useful for screen-reader users because the screen-
reader will read out loud the label when the user focuses on the input element.

The <label> element also helps 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.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

<input type="radio" id="html" name="fav_language" value="HTML">


<label for="html">HTML</label><br>

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

The HTML <form> Elements


The HTML <form> element can contain one
or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element


One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on


the type attribute.

<label for="fname">First name:</label>


<input type="text" id="fname" name="fname">

The <select> Element


The <select> element defines a drop-down list:

<!DOCTYPE html>
<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form>

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<input type="submit">

</form>

</body>

</html>

The <option> elements defines an option that can be selected.

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 value="fiat" selected>Fiat</option>


Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Selections</h2>

<p>Use the multiple attribute to allow the user to select more than one
value.</p>

<form>

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select><br><br>

<input type="submit">

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple
options.</p>

</body>

</html>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<form>

<textarea name="message" rows="10" cols="30">The cat was playing in the


garden.</textarea>

<br><br>

<input type="submit">

</form>

</body>

</html>

The <button> Element


The <button> element defines a clickable button:

<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body>

</html>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

<!DOCTYPE html>

<html>

<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend
element defines a caption for the fieldset element.</p>

<form>

<fieldset>

<legend>Personalia:</legend>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.

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 <datalist> element.

<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input


element.</p>

<form>

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version
12.1.</p>

</body>

</html>

HTML Input Types


Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

 Input Type Text


 <input type="text"> defines a single-line text input field:

 <form>
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"><br><br>
 <input type="submit" value="Submit">
 </form>

Input Type Password


<input type="password"> defines a password field:

 <p>The <strong>input type="password"</strong> defines a password


field:</p>

 <form action="/action_page.php">
 <label for="username">Username:</label><br>
 <input type="text" id="username" name="username"><br>
 <label for="pwd">Password:</label><br>
 <input type="password" id="pwd" name="pwd"><br><br>
 <input type="submit" value="Submit">

 </form>

input Type Submit


<input type="submit"> defines a button for submitting form data to a form-
handler.

The form-handler is typically a server page with a script for processing input
data.

The form-handler is specified in the form's action attribute:

 <form action="/action_page.php">
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname" value="John"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname" value="Doe"><br><br>
 <input type="submit" value="Submit">

 </form>

Input Type Reset


<input type="reset"> defines a reset button that will reset all form values to
their default values:
<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

<input type="reset">

</form>

Input Type Radio


<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

<p>The <strong>input type="radio"</strong> defines a radio


button:</p>

<p>Choose your favorite Web language:</p>

<form action="/action_page.php">

<input type="radio" id="html" name="fav_language"


value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language"


value="CSS">

<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">

<label for="javascript">JavaScript</label><br><br>

<input type="submit" value="Submit">

</form>

Input Type Checkbox


<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a


checkbox:</p>

<form action="/action_page.php">

<input type="checkbox" id="vehicle1" name="vehicle1"


value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2"


value="Car">
<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3"


value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Input Type Button


<input type="button"> defines a button:

<input type="button" onclick="alert('Hello World!')" value="Click


Me!">

Input Type Color


The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

<p>The <strong>input type="color"</strong> is used for input


fields that should contain a color.</p>

<form action="/action_page.php">

<label for="favcolor">Select your favorite color:</label>


<input type="color" id="favcolor" name="favcolor"
value="#ff0000">

<input type="submit" value="Submit">

</form>

Input Type Date


The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

<p>The <strong>input type="date"</strong> is used for input


fields that should contain a date.</p>

<form action="/action_page.php">

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">

<input type="submit" value="Submit">

</form>

Input Type Datetime-local


The <input type="datetime-local"> specifies a date and time input field, with
no time zone.

Depending on browser support, a date picker can show up in the input field.

<p>The <strong>input type="datetime-local"</strong> specifies


a date and time input field, with no time zone.</p>
<form action="/action_page.php">

<label for="birthdaytime">Birthday (date and time):</label>

<input type="datetime-local" id="birthdaytime"


name="birthdaytime">

<input type="submit" value="Submit">

</form>

Input Type Email


The <input type="email"> is used for input fields that should contain an e-mail
address.

Depending on browser support, the e-mail address can be automatically


validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.

<p>The <strong>input type="email"</strong> is used for input


fields that should contain an e-mail address:</p>

<form action="/action_page.php">

<label for="email">Enter your email:</label>

<input type="email" id="email" name="email">

<input type="submit" value="Submit">

</form>

Input Type Image


The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.

<form action="/action_page.php">

<label for="fname">First name: </label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name: </label>

<input type="text" id="lname" name="lname"><br><br>

<input type="image" src="img_submit.gif" alt="Submit"


width="48" height="48">

</form>

Input Type File


The <input type="file"> defines a file-select field and a "Browse" button for
file uploads.

<form action="/action_page.php">

<label for="myfile">Select a file:</label>

<input type="file" id="myfile" name="myfile"><br><br>

<input type="submit" value="Submit">

</form>

Input Type Hidden


The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified
by users when a form is submitted.
A hidden field often stores what database record that needs to be updated when
the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is
visible (and can be edited) using any browser's developer tools or "View Source"
functionality. Do not use hidden inputs as a form of security!

<form action="/action_page.php">

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<input type="hidden" id="custId" name="custId"


value="3487">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> The hidden field is not shown to


the user, but the data is sent when the form is submitted.</p>

Input Type Month


The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

<p>The <strong>input type="month"</strong> allows the user


to select a month and year.</p>

<form action="/action_page.php">

<label for="bdaymonth">Birthday (month and year):</label>

<input type="month" id="bdaymonth" name="bdaymonth">


<input type="submit" value="Submit">

</form>

Input Type Number


The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a
value from 1 to 5:

<form action="/action_page.php">

<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1"


max="5">

<input type="submit" value="Submit">

</form>

Input Type Range


The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes:

<form action="/action_page.php" method="get">

<label for="vol">Volume (between 0 and 50):</label>

<input type="range" id="vol" name="vol" min="0" max="50">

<input type="submit" value="Submit">

</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like
a regular text field).

<form action="/action_page.php">

<label for="gsearch">Search Google:</label>

<input type="search" id="gsearch" name="gsearch">

<input type="submit" value="Submit">

</form>

Input Type Tel


The <input type="tel"> is used for input fields that should contain a telephone
number.

<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-
9]{3}">
</form>

Input Type Time


The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Input Type Url


The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically validated


when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to
match url input.

<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Input Type Week


The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML Media

HTML Video
The HTML <video> Element
To show a video in HTML, use the <video> element:

<!DOCTYPE html>

<html>

<body>
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

HTML <video> Autoplay


To start a video automatically, use the autoplay attribute:

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>
</body>

</html>

Add muted after autoplay to let your video start playing automatically (but
muted):

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" autoplay muted>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element


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

<!DOCTYPE html>

<html>

<body>

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

HTML <audio> Autoplay


To start an audio file automatically, use the autoplay attribute:

<!DOCTYPE html>

<html>

<body>

<audio controls autoplay>


<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

HTML YouTube Videos


Playing a YouTube Video in HTML
To play your video on a web page, do the following:

 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
 Add any other parameters to the URL (see below)

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345"


src="https://www.youtube.com/embed/tgbNymZ7vqY">

</iframe>
</body>

</html>

YouTube Autoplay + Mute


You can let your video start playing automatically when a user visits the page,
by adding autoplay=1 to the YouTube URL. However, automatically starting a
video is annoying for your visitors!

Add mute=1 after autoplay=1 to let your video start playing automatically (but
muted).

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345"


src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=
1&mute=1">

</iframe>

</body>

</html>

YouTube Loop
Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.


Value 1: The video will loop (forever).

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345"


src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tg
bNymZ7vqY&loop=1">

</iframe>

</body>

</html>

YouTube Controls
Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

<!DOCTYPE html>

<html>

<body>

<iframe width="420" height="345"


src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=
0">
</iframe>

</body>

</html>

HTML <dd> Tag


Definition and Usage

The <dd> tag is used to describe a term/name in a description


list.

The <dd> tag is used in conjunction with <dl> (defines a


description list) and <dt> (defines terms/names).

Inside a <dd> tag you can put paragraphs, line breaks, images,
links, lists, etc.

<!DOCTYPE html>

<html>

<body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description


list:</p>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>
<dd>White cold drink</dd>

</dl>

</body>

</html>

HTML <dl> Tag


<!DOCTYPE html>

<html>

<body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description


list:</p>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

</body>

</html>
HTML <dt> Tag
Definition and Usage

The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> (defines a


description list) and <dd> (describes each term/name).

<!DOCTYPE html>

<html>

<body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

</body>

</html>

HTML <figcaption> Tag


The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure>
element.

<!DOCTYPE html>

<html>

<body>

<h1>The figure and figcaption element</h1>

<figure>

<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>

</body>

</html>

HTML Canvas Graphics


The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor
text.

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#000000;">

Your browser does not support the HTML canvas tag.

</canvas>
</body>

</html>

HTML SVG Graphics


 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation

The HTML <svg> Element


The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.

<!DOCTYPE html>

<html>

<body>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"

stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

You might also like