FULL STACK DEVELOPMENT
Year: 2025-26
Semester: 3
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
What you will build!!
HTML(Hyper text markup language)
INTRODUCTION
• HTML is the standard markup language for creating web pages.
• HTML describes the structure of a web page.
• It’s basically the skeleton of the webpage.
📍 "HTML is the foundation of every webpage you’ve ever seen.
Whether it’s a news site, social media, or your favorite blog — it all
starts here."
HTML5(the latest version)
HTML5 is the latest version of HTML, introduced in 2014 with major
improvements.
It’s not a completely different language — it’s an evolution of HTML.
SYSTEM REQUIREMENTS
• Text Editor - Web pages can be created and modified by using professional HTML editors.
• Notepad - Windows
• Notepad++ - Windows
• TextEdit – Mac
• Web Browser - The purpose of a web browser is to read HTML documents and display them
correctly. A browser does not display the HTML tags but uses them to determine how to display
the document.
• Mozilla Firefox
• Google Chrome
• Microsoft Edge
• Safari
HTML ELEMENT
• Element - HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• An HTML element is defined by a start tag, some content, and an end tag:
• <tagname>content goes here…. </tagname>
IMP. Points regarding syntax iof html
• Elements can have attributes.
• Attributes provide additional information about the elements.
• Always specified in the start tag.
• Come in name / value pairs: name = “value”
• 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 – 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 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. It must only appear once, at the top of the page (before any HTML tags).
• <html>
• Root element of an HTML page. Defines the whole HTML document.
• <head>
• This element contains meta information about the HTML page.
• <title>
• This element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
• <body>
• This element is a container for visible content, it defines the document’s body.. The content inside the <body> section will be displayed in a
browser.
FIRST HTML PAGE – WRITE HTML
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.
A quick challenge!
Hint:-What comes after 1?
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(some white space) before and after a paragraph.
HTML PARAGRAPHS
Quick Exercise!
HTML HORIZONTAL RULES
• <hr> element is used to display a horizontal rule.
• It is used to separate content in an HTML page.
• The <hr> tag is an empty tag, which means that it has no end tag.
HTML HORIZONTAL RULES
HTML LINE BREAKS
• The <br> element defines a line break (a new line), without starting a new paragraph.
• The <br> tag is an empty tag, which means that it has no end tag.
HTML TEXT FORMATTING - To display special type of text.
• <b> to display bold text. • <small> to display smaller text
• <strong> to display important text. • <del> to display deleted text.
• <i> to display italic text. • <ins> to display inserted text.
• <em> to display emphasized text. • <sub> to display subscript text.
• <mark> to display marked 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 – 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 markup 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. but retained to
show the history of modifications made to the document.
• Browser strike a line through the deleted text.
A quick challenge!!
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
• <blockquote> element defines a • <address> tag defines the contact
section that is quoted from another information for the author/owner of
source. a document or an article.
• <q> tag defines a short inline • <cite> tag defines the title of a
quotation. creative work
• <abbr> tag defines an abbreviation • <bdo> tag is used to override the
or an acronym. current text direction
HTML QUOTATION AND CITATION ELEMENTS –
<blockquote>
• The HTML <blockquote> element defines a section that is quoted from another source.
• Usually browsers indent the <blockquote> elements.
HTML QUOTATION AND CITATION ELEMENTS
<q>
• The HTML <q> element defines a short quotation.
• Browsers normally insert quotation marks around the quotation.
HTML QUOTATION AND CITATION ELEMENTS –
<abbr>
• 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 –
<address>
• 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 –
<address>
HTML QUOTATION AND CITATION ELEMENTS –
<cite>
• 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.
A Quick challenge!!
<h1>
<blockquote>
<abbr>
<address>
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.
• The link text is the part that will be visible to the reader. Clicking on the link text, will send the
reader to the specified URL address.
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.
A quick Challenge!
task:-When you click the link it should open in new tab?
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 embed 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.
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• Syntax :- <img src=”link”>
Quick Challenge!
Add an image of mars from the web!
HTML IMAGES
HTML IMAGES
• To use an image as a link, put the <img> tag inside the <a> tag:
HTML LISTS
• Lists refers to collection of items in structured format.
• Lists are best ways to represent information.
• Ex: Menu Options, Step-by-step instructions, Product Listings, To-do list etc
• Three ways to represent lists:
• Unordered lists
• Ordered lists
• Description lists
List in HTML!
Challenge:
Create an ordered list inside the <body> tag.
Fill it with your top three favourite foods.
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.
• In HTML by default, table data is defined in rows, each table row starts with a <tr> and
ends with a </tr> tag.
• tr stands for table row.
• There are two types of table cells: header cells and data cells.
• Header cells refers to a table cell which is used to define the heading or title of a column or a
row in a table and created using the <th> (table header) tag, is styled in bold by default, ends
with a </th> tag.
• th stands for table header.
• Data cell is defined by a <td> and ends with a </td> tag.
• td stands for table data.
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
• 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 table can have cells that span over multiple rows and/or columns
HTML TABLES – COLSPAN AND ROWSPAN
HTML CHARACTER ENTITIES
• Character entities are special codes used to represent characters that either have
reserved meanings in HTML (like < or >) or are difficult to type on a standard keyboard
(like foreign letters or special symbols).
• Character entities start with & and end with ;.
• Character entity format:
• &entityname; OR &#entitynumber;
• Ex. < OR < – 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
  Non-breaking space
< < Less than <
> > Greater than >
& & Ampersand &
" " Double quotation mark “
' ' Single quotation mark ‘
© © Copyright ©
® ® Registered Trademark ®
€ € Euro Symbol €
HTML CHARACTER ENTITIES
HTML BLOCK AND INLINE ELEMENTS
• In HTML, elements are classified into two main categories:
block elements and inline elements.
• The difference between them lies in how they are displayed on a webpage.
HTML BLOCK ELEMENTS
• Block-level Elements
• Always start on a new line.
• Take up the full width of the container.
• Can contain other block elements and inline elements.
• Browser adds a margin before and after the element.
• Examples of block elements:
• <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <section>, <article>, <nav>, etc.
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!
• Examples of inline elements:
• <span>, <a>, <img>, <strong>, <em>, <label>, <br>, <input>, etc.
Challenge!!
HTML INLINE ELEMENTS
WORKING OF A WEB APPLICATION
Client Web Server
HTTP Request
HTTP Response
A web application is a combination of client-side and server-side components that work
together to provide dynamic and interactive experiences. The client-side handles user
interactions and displays content, while the server-side manages data processing, logic,
and storage.
HTML FORMS
HTML FORMS
• Forms are a fundamental part of web applications, allowing users to interact with a
website by entering information, selecting options, or submitting data.
• HTML forms are used to collect user input and submit data 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:
• <input> • <fieldset>
• <label> • <legend>
• <select> • <datalist>
• <textarea> • <output>
• <button> • <option>
• <optgroup>
HTML FORM ELEMENTS - INPUT
• Most used form element is <input>. Used for various types of user input, such as
text fields, checkboxes, radio buttons, and submit buttons.
• 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 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 maxlength attribute
• Specifies the maximum number of characters allowed in an input field.
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 autofocus attribute
• Specifies that the input field should get auto focused on page load.
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 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 BUTTON
• The <input type=“button”> defines a button.
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 PASSWORD
• <input type=“password”> defines a password field.
• The characters in a password field are shown as asterisks or circles.
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 ATTRIBUTES
• The value attribute
• Specifies an initial value for an input field:
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 – 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 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 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 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 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 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 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 – 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 – OUTPUT ELEMENT
• The <output> element represents the result of a calculation.
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 SEARCH
• The <input type=“search”> is used for search fields.
• The input field behaves like a regular text field.
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 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 – 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 – SELECT ELEMENT
• The <select> element defines a list of predefined options.
• 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 – 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 – 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 – INPUT TYPE RESET
• The <input type=“reset”> defines a reset button that resets the form values to their
default.
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 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 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 novalidate attribute
• Is a Boolean attribute (value = true/false)
• When present, specifies that the form data should not be validated when submitted.
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
PREFORMATTED TEXT
• The <pre> element defines the
preformatted text.
• The text inside a <pre> element is
displayed in a fixed-width font (usually
Courier), and it preserves both spaces
and line breaks: