Scribd
Upload
80 views

HTML

<SUMMARY> The document provides information about full stack development module 1. It covers HTML markup language topics like formatting, fonts, commenting, anchors, backgrounds, images, hyperlinks, lists, tables, forms, audio, video, tags and more. The module will be taught in semester 3 of a computer science course by Assistant Professor Deepak H G in the department of computer science. </SUMMARY>

Uploaded by

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

HTML

<SUMMARY> The document provides information about full stack development module 1. It covers HTML markup language topics like formatting, fonts, commenting, anchors, backgrounds, images, hyperlinks, lists, tables, forms, audio, video, tags and more. The module will be taught in semester 3 of a computer science course by Assistant Professor Deepak H G in the department of computer science. </SUMMARY>

Uploaded by

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

FULL STACK DEVELOPMENT

Year: 2023-24
Semester: 3 Course Code: 22CS2305

Module 1
Markup Language (HTML5): Introduction to HTML and HTML5 - Formatting and Fonts -Commenting

Code – Anchors – Backgrounds – Images – Hyperlinks – Lists – Tables – HTML Forms, Audio ,Video

Tag

DEEPAK H G

ASST. PROF.

DEPT. OF CSE
INTRODUCTION

• HTML stands for Hyper Text Markup Language.


• HTML is the standard markup language for creating web pages.
• Markup languages are computer languages used to structure, format, or define relationships
between different parts of text documents using symbols or tags.
• Markup is used to control the display of the document.

• HTML describes the structure of a web page.


SYSTEM REQUIREMENTS

• Text Editor
• Notepad - Windows
• Notepad++ - Windows
• TextEdit – Mac
• Web Browser
• Mozilla Firefox
• Google Chrome
• Microsoft Edge
• Safari
HTML PAGE STRUCTURE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>
HTML PAGE STRUCTURE

• <!DOCTYPE html>
• Defines that the document is an HTML5 document.
• <html>
• Root element of an HTML page. Defines the whole HTML document.
• <head>
• Contains meta information about the HTML page.
• <body>
• Container for visible content.
HTML ELEMENT

• Element
• The HTML element is everything from the start tag to the end tag.
• <tagname>content</tagname>.
• Elements can have attributes.
• Attributes provide additional information about the elements.
• Always specified in the start tag.
• Come in name /value pairs: name = “value”

• Empty Element
• Elements with no content.
• Do not have an end tag.

• Nested HTML Elements


• Elements can contain other elements.
NOTE

• HTML tags are not case sensitive. Recommended to use lowercase in HTML.
• Never skip the end tag.
• Recommended to use quotes around attribute values.
• Double quotes around attribute values are the most common.
• Single quotes can also be used.
• When attribute value itself contains double quotes, it is necessary to use single quotes.
FIRST HTML PAGE – OPEN TEXT EDITOR

• Windows
• Open the Start Screen. Type Notepad. Click to open.

• Mac
• Open Finder > Applications > TextEdit
• In Preferences > Format > Plain Text.
• Under Open and Save, check the box that says "Display HTML files as HTML code instead
of formatted text".
• Open the new document.
FIRST HTML PAGE – WRITE HTML
FIRST HTML PAGE – SAVE THE FILE

• Create a folder Workspace > HTML.


• Select File > Save as.

• File extension can be .html or .htm


FIRST HTML PAGE – VIEW IN BROWSER

• Double click on the .html/.htm file OR right-click > Open with


HTML HEADINGS

• Headings are titles or subtitles to be displayed on a web page.


• HTML headings are defined with <h1> to <h6> tags.
• <h1> defines the most important heading.
• <h1> to be used for main heading followed by <h2>, <h3>, <h4>, ,h5> and <h6>.
• <h6> defines the least important heading.
• Browser adds a margin before and after a heading.
• Search engines use headings to index the structure and content of the web pages.
• Each HTML heading has a default font size and can be changed using CSS.
• Don’t use HTML heading to make text Big or bold.
HTML HEADINGS
HTML PARAGRAPHS

• A paragraph is a block of text and always starts on a new line.


• <p> element defines a paragraph.
• Web browser adds a margin before and after a paragraph.
HTML PARAGRAPHS
HTML DISPLAY

• We can’t be sure how HTML will be displayed.


• Large or small screens, and resized windows will create different results.
• Display can’t be changed by adding extra spaces or extra lines in the HTML code. The
browser automatically removes any extra spaces and lines when displaying.
HTML DISPLAY
PREFORMATTED TEXT

• The <pre> element defines the preformatted text.


• The element preserves both spaces and line breaks.
HTML HORIZONTAL RULES

• <hr> element is used to display a horizontal rule.


• It is used to separate content in an HTML page.
HTML HORIZONTAL RULES
HTML LINE BREAKS

• The <br> element defines a line break (a new line), without starting a new paragraph.
HTML TEXT FORMATTING

• To display special type of text.

• <b> to display bold text.

• <strong> to display important text.

• <i> to display italic text.

• <em> to display emphasized text.

• <mark> to display marked text.

• <small> to display smaller text

• <del> to display deleted text.

• <ins> to display inserted text.

• <sub> to display subscript text.

• <sup> to display superscript text.


HTML TEXT FORMATTING – BOLD TEXT

• The HTML <b> element defines the bold text.


• No additional importance to the text.
HTML TEXT FORMATTING – IMPORTANT TEXT

• The HTML <strong> element defines the text with strong importance.
• The text is displayed in bold.
HTML TEXT FORMATTING – ITALIC TEXT

• The HTML element <i> defines the italic text.


• It defines the text in alternate voice or mood.
HTML TEXT FORMATTING – EMPHASIZED TEXT

• The HTML <em> element defines the emphasized text.


• The text is displayed in italic.
• A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
HTML TEXT FORMATTING – MARKED TEXT

• The HTML element <mark> defines the text that is marked or highlighted.
HTML TEXT FORMATTING – SMALLER TEXT

• The HTML <small> element defines the small text.


• It is used to make the text one font size smaller (from medium to small, from x-large to
large).
• Used to mark up cautions, legal restrictions, disclaimers, copyright notice or license
agreement.
HTML TEXT FORMATTING – DELETED TEXT

• The HTML <del> element defines the text deleted from a document.
• Browser strike a line through the deleted text.
HTML TEXT FORMATTING – INSERTED TEXT

• The HTML <ins> element defines the text that has been inserted into a document.
• Browser underline the inserted text.
HTML TEXT FORMATTING – SUBSCRIPT TEXT

• The HTML <sub> element defines the subscript text.


• Subscript text appears half a character below the normal line.
• Subscript text is sometimes rendered in a smaller font.
HTML TEXT FORMATTING – SUPERSCRIPT TEXT

• The HTML <sup> element defines superscript text.


• Superscript text appears half a character above the normal line and sometimes rendered
in a smaller font.
• Used to display exponent, ordinal numbers.
HTML QUOTATION AND CITATION ELEMENTS

• The HTML <blockquote> element defines a section that is quoted from another source.
• Usually browsers indent the <blockquote> elements.
HTML QUOTATION AND CITATION ELEMENTS

• The HTML <q> element defines a short quotation.


• Browsers normally insert quotation marks around the quotation.
HTML QUOTATION AND CITATION ELEMENTS

• The HTML <abbr> element defines the abbreviation or acronym.


• Use the global title attribute to show the description for the abbreviation/acronym.
HTML QUOTATION AND CITATION ELEMENTS

• The HTML <address> element defines the address for the author/owner of a document
or article.
• The contact information can be an email, URL, physical address, phone number social
media handle etc.
• The text is usually rendered in italic, and the browser always add a line break before and
after the <address> element.
HTML QUOTATION AND CITATION ELEMENTS
HTML QUOTATION AND CITATION ELEMENTS

• The HTML <cite> defines the title of a creative work like a book, a poem, a song etc..
• The text in the <cite> element is rendered in italic.
BI-DIRECTIONAL OVERRIDE

• The HTML <bdo> element is used to override the current text direction.
• BDO stands for Bi-Directional Override.
HTML COMMENTS

• HTML comments help to document the HTML source code.


• HTML comments are not displayed in the browser.
HTML LINKS - HYPERLINKS

• An hyperlink is an interface to navigate from one document/web site to another.


• User need to click the link for navigation.
• When the mouse is moved over a link, the mouse arrow turns into a little hand.
• A link can be any HTML element. Need not be a text or image.
HTML LINKS - HYPERLINKS

• The HTML <a> element defines a hyperlink.


• The most important attribute of the <a> element is href. It indicates the link’s
destination.
HTML LINKS - HYPERLINKS

• Appearance of a link in the browser


• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
• An active link is a hyperlink that is currently being interacted with the user.
HTML LINKS - HYPERLINKS

• The target attribute:


• By default, the linked document. is displayed in the current browser.
• The target attribute specifies where to open the linked document.
• The target attribute can have the following values:
• _self – Default. Opens the linked document in the current window or tab.
• _blank – Opens the linked document in a new window or tab.
• _parent – Opens the linked document in the parent frame.
• _top – Opens the linked document in the full body of the window.
HTML LINKS - HYPERLINKS
HTML LINKS - HYPERLINKS

• URLs
• Address indicating the location of a file or resource on the World Wide Web.
• Absolute URL
• The complete address of the document on the internet.
• Relative URL
• Address of the document relative to the current document or directory.
HTML LINKS - HYPERLINKS
HTML LINKS – LINK TO AN EMAIL ADDRESS

• Use the mailto: inside the href attribute to create a link that opens the user’s email
program.
• This lets the user to send an email.
HTML LINKS – LINK TO AN EMAIL ADDRESS
HTML IMAGES

• The HTML <img> tag is used to attach an image in a web page.


• Loading large images takes time, and can slow down the web page. Use images carefully.
• The <img> tag has 2 required attributes:
• src – To specify the path (URL) to the image
• alt – To specify an alternate text for the image, if image is not displayed for some reason.
HTML IMAGES
HTML LISTS

• Lists refers to collection of items.


• Lists are best ways to represent information.
• Three ways to represent lists:
• Ordered lists
• Unordered lists
• Description lists
HTML LISTS – UNORDERED LISTS

• To represent items that are not in any particular order.


• An unordered list starts with <ul> tag. Each list item starts with the <li> tag.
• By default, list items will be displayed with bullets.
HTML LISTS – UNORDERED LISTS
HTML LISTS – ORDERED LISTS

• To represent items that are in a particular order.


• An ordered list starts with <ol> tag. Each list item starts with the <li> tag.
• By default, the list items will be numbered.
HTML LISTS – ORDERED LISTS
HTML LISTS – DESCRIPTION LISTS

• A description list is a list of items, with a description for each item.


• The <dl> tag is used to define the description list.
• The <dt> tag is used to define the list item/term.
• The <dd> tag is used to describe each item/term.
HTML LISTS – DESCRIPTION LISTS
HTML TABLES

• Table is used to organise the data into rows and columns.

Name Physics Chemistry Mathematics Total


Abhishek 60 87 59 206
Anirudh 63 80 45 188
Aditi 55 40 86 181
Prakash 64 90 85 239

• A HTML table consists of table cells inside rows and columns.


HTML TABLES

• The HTML <table> tag is used to create a table.


• Each table row starts with a <tr> and ends with a </tr> tag.
• tr stands for table row.

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


• td stands for table data.

• To define the table cells as header cells, use <th> and </th> tag instead of <td> and
</td> tag.
HTML TABLES
HTML TABLES – BORDER ATTRIBUTE
HTML TABLES – TABLE CAPTION

• Add a caption that serves as a heading for the entire table.


• The HTML <caption> tag is used.
• The <caption> tag should be inserted immediately after the <table> tag.
HTML TABLES – COLSPAN AND ROWSPAN

• HTML table can have cells that span over multiple rows and/or columns
HTML TABLES – COLSPAN AND ROWSPAN

• To make a cell span over multiple rows, use the rowspan attribute.
• The value of the rowspan attribute represents the number of rows to span.

• To make a cell span over multiple columns, use the colspan attribute.
• The value of the colspan attribute represents the number of columns to span.
HTML TABLES – COLSPAN AND ROWSPAN
HTML CHARACTER ENTITIES

• Some characters are reserved in HTML.


• If we use < or > signs in a HTML document, the browser might mix them with tags.
• Character entities are used to display reserved characters in HTML.
• Character entity format:
• &entityname; OR &#entitynumber;
• Ex. &lt; OR &#60 – To display < character.
• Browsers may not support all the entity names. But support for entity numbers is good.
• Entity names are case sensitive.
HTML CHARACTER ENTITIES

• Useful HTML Character entities:


Entity Name Entity Number Description Result
&nbsp; &#160 Non-breaking space
&lt; &#60 Less than <
&gt; &#62 Greater than >
&amp; &#38; Ampersand &
&quot; &#34; Double quotation mark “
&apos; &#39; Single quotation mark ‘
&copy; &#169; Copyright ©
&reg; &#174; Registered Trademark ®
HTML CHARACTER ENTITIES
HTML BLOCK AND INLINE ELEMENTS

• Every HTML element has two types of display values:


• Block level
• Inline
HTML BLOCK ELEMENTS

• Block-level Element
• Always starts on a new line and takes up the full available width of the browser.
• Browser adds a margin before and after the element.
• Commonly used block elements are:
• <p>
• <div>
HTML BLOCK ELEMENTS
HTML INLINE ELEMENTS

• An inline element doesn’t start on a new line.


• An inline element takes up only the required width.
• An inline element cannot contain a block-level element!
WORKING OF A WEB APPLICATION

Client Web Server

HTTP Request

HTTP Response
HTML FORMS
HTML FORMS

• An HTML form is used to collect user input.


• The user input is most often sent to the server for processing.
• The HTML <form> element is used to create an HTML form.
• The <form> element is a container for different types of input elements: text fields,
checkboxes, radio buttons, submit button etc.
HTML FORM ELEMENTS

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

• Most used form element is <input>.


• Important attribute:
• type – Type of the <input> element to be displayed. Default is text.
• id – Unique identifier of the HTML element.
• name – Used to identify the form element and is used to submit the data to server.
• value – An initial value for an input field.
HTML FORM ELEMENTS – INPUT TYPE TEXT

• <input type=“text”> defines a single-line text input field.


HTML FORM ELEMENTS - LABEL

• The <label> element defines a label for the form elements.


• Important attribute for.
HTML FORM ELEMENTS – INPUT TYPE TEXT

• <input type=“text”> defines a single-line text input field.


HTML FORM ELEMENTS – LABEL FOR ATTRIBUTE

• Set the for attribute of the <label> element equal to the id attribute of the <input>
element to bind them together.
• Click on the label text in the browser.
HTML FORM ELEMENTS – INPUT TYPE PASSWORD

• <input type=“password”> defines a password field.


• The characters in a password field are shown as asterisks or circles.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The value attribute


• Specifies an initial value for an input field:
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The readonly attribute


• Specifies that the input field is read only (can’t be modified).
• Can tab, highlight and copy text.
• The value of the read only field will be sent to server on submitting the form.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The disabled attribute


• Specifies that the input field should be disabled.
• A disabled input field is unusable and unclickable.
• The value of the disabled field will not be sent to server on submitting the form.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The size attribute


• Specifies the visible width, in characters, for an input field.
• Default value is 20.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The maxlength attribute


• Specifies the maximum number of characters allowed in an input field.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The placeholder attribute


• Specifies a short hint that describes the expected value for the input field.
• The short hint is displayed before the user enters a value.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The required attribute


• Specifies that the input field must be filled before submitting the form.
• Works with the following input types: text, search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The autofocus attribute


• Specifies that the input field should get auto focused on page load.
HTML FORM ELEMENTS – INPUT ATTRIBUTES

• The autocomplete attribute


• Specifies whether a form or an input field should have autocomplete on or off.
• Autocomplete allows the browser to predict the value. When a user starts to type in a field,
the browser should display options to fill in the field, based on earlier typed values.
HTML FORM ELEMENTS – INPUT TYPE RADIO

• <input type=“radio”> defines a radio button.


• Radio buttons allows user to select only one option from a list of options.
• Use the same value for the name attribute to group the radio buttons together.
HTML FORM ELEMENTS – INPUT TYPE CHECKBOX

• <input type=“checkbox”> defines a checkbox.


• Checkbox allows a user to select none or more options from a list of choices.
INPUT TYPE RADIO, CHECKBOX - ATTRIBUTE

• The checked attribute


• Indicates that this radio button/check box is the default selected one.
HTML FORM ELEMENTS – INPUT TYPE BUTTON

• The <input type=“button”> defines a button.


HTML FORM ELEMENTS – INPUT TYPE SUBMIT

• The <input type=“submit”> defines a button for submitting the form data to a
form-handler.
• The form-handler is typically a page at the server with a code for processing the data.
HTML FORM ELEMENTS – INPUT TYPE IMAGE

• The <input type=“image”> defines an image as a submit button.


• The image path is specified in the src attribute.
HTML FORM ELEMENTS – INPUT TYPE RESET

• The <input type=“reset”> defines a reset button that resets the form values to their
default.
WORKING OF A WEB APPLICATION

Client Web Server

HTTP Request

HTTP Response
HTML FORM ATTRIBUTES

• The action attribute


• Defines the action to be performed when the form is submitted.
• Usually the form data is sent to a file on the web server when the user submits the form.
• The action attribute contains the name of the file on the web server.
• If the action attribute is omitted, the action is set to the current page.
HTML FORM ATTRIBUTES

• The method attribute


• Specifies the http method used when submitting the form data.
• The http method can be get or post.
• The default method is get.
HTTP METHODS

GET POST
Appends the form data to the URL in name=value Appends the form data inside the body of the
pairs. HTTP request.
NEVER use GET to send sensitive data as Always use POST if the form data contains
the data is visible in the URL. sensitive or personal information.
The length of a URL is limited (2048 characters). POST has no size limitations, and can be used to
send large amounts of data.
Useful for form submissions where a user wants Form submissions with POST cannot be
to bookmark the result. bookmarked.
HTML FORM ATTRIBUTES

• The autocomplete attribute


• Specifies whether a form should have autocomplete on or off.
• When on, the browser automatically complete values based on values that the user has
entered before.
HTML FORM ATTRIBUTES

• The novalidate attribute


• Is a Boolean attribute (value = true/false)
• When present, specifies that the form data should not be validated when submitted.
HTML FORM ELEMENTS – INPUT TYPE COLOR

• <input type=“color”> is used for input fields that should contain a color.
• A color picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE DATE

• The <input type=“date”> is used for input fields that should contain a date.
• Depending upon the browser, a date picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE DATE

• Use min and max attributes to add restrictions to date selection


HTML FORM ELEMENTS – INPUT TYPE DATETIME
LOCAL
• The <input type=“datetime-local”> is used for input fields that should contain a date and
time, with no time zone.
• Depending upon the browser, a date picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE MONTH

• The <input type=“month”> allows user to select a month and year.


• Depending upon the browser, a date picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE TIME

• The <input type=“time”> allows the user to select a time (no time zone).
• Depending upon the browser, a time picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE WEEK

• The <input type=“week”> allows the user to select a week and year.
• Depending upon the browser, a date picker shows up in the input field.
HTML FORM ELEMENTS – INPUT TYPE EMAIL

• The <input type=“email”> is used for input fields that should contain an e-mail address.
• Depending on the browser support, the e-mail address will be validated on form
submission.
• Smartphones may recognize the email type and add ".com" to the keyboard to match
email input.
HTML FORM ELEMENTS – INPUT TYPE FILE

• The <input type=“file”> defines a file-select field and a Browse button for file uploads.
HTML FORM ELEMENTS – INPUT TYPE FILE

• The multiple attribute


• Specifies that the user is allowed to enter/select more than one value in the input field.
• Works with email and file input types.
HTML FORM ELEMENTS – INPUT TYPE HIDDEN

• The <input type=“hidden”> defines a hidden (not visible to user) input field.
• It is visible using browser’s developer’s tools or View Source functionality.
• To include data that can’t be seen or modified by users.
HTML FORM ELEMENTS – INPUT TYPE NUMBER

• The <input type=“number”> is used for input fields that should contain numerical value.
• Use min and max attributes to add restrictions on what numbers are accepted.

• Use step attribute to specify the interval between numbers.


HTML FORM ELEMENTS – INPUT TYPE RANGE

• The <input type=“range”> defines a control for entering a number whose exact value
is not important (Similar to slider control).
• Default range is 0 to 100.
• Restrict the range using min, max and step attributes.
HTML FORM ELEMENTS – INPUT TYPE SEARCH

• The <input type=“search”> is used for search fields.


• The input field behaves like a regular text field.
HTML FORM ELEMENTS – INPUT TYPE TEL

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

• The pattern attribute is the JavaScript regular expression that the input value must match.
• Required Format in the example: 123-45-678
HTML FORM ELEMENTS – 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.
• Smartphones may recognize the url type, and add ".com" to the keyboard to match url
input.
HTML FORM ELEMENTS – SELECT ELEMENT

• The <select> element defines a drop-down list.


• The <option> element defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
HTML FORM ELEMENTS – SELECT ELEMENT
ATTRIBUTES
• The selected attribute
• Defines a pre-selected option.
HTML FORM ELEMENTS – SELECT ELEMENT
ATTRIBUTES
• The size attribute
• Specifies the number of visible values.
HTML FORM ELEMENTS – SELECT ELEMENT
ATTRIBUTES
• The multiple attribute
• Allows to select more than one value.
• Hold down ctrl button to select multiple options. For Mac, command button.
HTML FORM ELEMENTS – TEXTAREA ELEMENT

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


HTML FORM ELEMENTS – TEXTAREA ELEMENT
ATTRIBUTES
• The rows and cols attributes
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
HTML FORM ELEMENTS – 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.
HTML FORM ELEMENTS – DATALIST ELEMENT

• The <datalist> element specifies a list of pre-defined options for an <input> element.
• User sees a drop-down list of the pre-defined options as they input the data.
• The list attribute of the <input> element must refer the id attribute of the <datalist>
element.
HTML FORM ELEMENTS – OUTPUT ELEMENT

• The <output> element represents the result of a calculation.


HTML AUDIO

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

• The controls attribute adds audio controls like play, pause and volume.
• The source element specifies the audio files which the browser may choose from. The browser use the
first recognized format, if there are many.
• The text between <audio></audio> will only be displayed if the browser don’t support <audio> element.
HTML AUDIO

• The supported audio file formats

File Format Media Type


MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
HTML AUDIO

• The autoplay attribute


• To start an audio file automatically.
HTML AUDIO

• The muted attribute


• Add muted after autoplay to let your audio file start playing automatically, but muted.
HTML VIDEO

• The HTML <video> element is used to show a video on the browser.

• The source element specifies the video files which the browser may choose from. The browser use the first
recognized format, if there are many.
• The text between <video></ video > will only be displayed if the browser don’t support <audio> element.
HTML VIDEO

• The controls attribute


• Adds video controls like play, pause and volume.

• The width and height attribute


• Specifies the width and height of the display area. It is better to include the attributes as the page
might flicker while the video loads.

• The autoplay attribute


• To start the video automatically.

• The muted attribute


• Add muted after autoplay to let your video file start playing automatically, but muted.
HTML VIDEO
HTML VIDEO

• The supported video file formats

File Format Media Type


MP4 video/mp4
WebM video/webm
Ogg video/ogg

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy