Career path with HTML & CSS

Published on Slideshow
Static slideshow
Download PDF version
Download PDF version
Embed video
Share video
Ask about this video

Scene 1 (0s)

[Audio]Hello everyone! Today, I'm here to discuss product tutorials, and I'm excited to share some helpful information with you. We are going to be exploring different types of HTML lists and how they can help you organize and group related items. Let's get started!.

Scene 2 (17s)

Content. HTML Lists Unordered List Ordered List Description List Div Element Class Attribute HTML Iframes HTML Forms HTML Media.

Scene 3 (33s)

[Audio] Ordered lists are created using the tag. The list items are then added using the tag. Numbers are used to mark each item by default, as demonstrated in the example. This is useful when attempting to present information that has a particular order or sequence, such as a list of instructions. Orderly lists give web developers an effective way to structure their content..

Scene 4 (59s)

[Audio] Creating an unordered list requires a pair of tags and between these tags we can create individual list items. We use a pair of tags for each item we would like to add to our list. For example, a shopping list is an unordered list where we can add items between the tags for each item we need. An ordered list is very similar, except we use tags. We need an opening tag and a closing tag. By default each list item is going to be numbered. For a to-do list, we need to use a pair of tags. For example, a schedule of what we have to do in the morning could include eating breakfast, taking a shower, and leaving for work. An ordered list is numbered and in descending order..

Scene 5 (6m 2s)

[Audio] The type attribute of the tag enables you to choose the numbering style of the list items when constructing ordered HTML lists. The accessible values for the type attribute differ based on the marker you want to employ for the list. This table shows the available type values and a description of each. To designate the marker type, just add the type attribute to the tag, and set the preferred value. And that's all there is to it..

Scene 6 (6m 30s)

[Audio] An unordered list in HTML is indicated with the tag. List items within the list are specified with the tag. By default, these items will be marked with bullets. For example, an unordered list containing the items 'Coffee', 'Tea', and 'Milk' might look like this: Coffee Tea Milk . This is how to create an unordered HTML List..

Scene 7 (7m 5s)

[Audio] The CSS list-style-type property allows you to personalize the marker of an unordered list. For example, you may choose to use a circle rather than the standard bullet. This can be done by setting the list-style-type property to "circle". Consequently, each list item will be marked with a circle. You can also use a square or no marker at all. Therefore, the CSS list-style-type property enables you to personalize the marker of an unordered list according to your needs..

Scene 8 (7m 40s)

[Audio] HTML lists can be nested, meaning that a list can be included within another list. For instance, an unordered list could include entries such as Coffee, Tea, and Milk. To provide a further breakdown of types of Tea, an ordered list can be placed within the unordered list of items. This nested list could potentially include Black Tea and Green Tea. This nested structure can be useful when organizing similar items..

Scene 9 (8m 10s)

[Audio] A Description List is a good way to show a set of elements with their respective descriptions. HTML provides the tag to start a Description List. The tag defines the elements or terms of the list and the tag explains each term. For example, for a list of beverages the tag could be Coffee and the related tag could be a black hot drink. Combining the two creates a Description List..

Scene 10 (8m 42s)

[Audio] The element is a powerful tool for organising different elements on an HTML page. You can use it to combine items like page sections, titles and paragraphs and apply styling to them simultaneously. There are no required attributes for the element, but style, class and id are regularly used for extra styling and customisation. For instance, you can use the style attribute to specify the width of a element, or the class attribute to assign the element to a particular style which can be employed on the entire page. Additionally, you can employ the id attribute to identify a particular element for further customisation..

Scene 11 (9m 24s)

[Audio] The element is one of the most important HTML elements used for web page layout. It provides a container for other HTML elements and can be used for styling, alignment and other layout related tasks. The example above illustrates how you can group related information together and style it with the use of CSS. You can also use CSS to center align a element on a page. By setting theCSS margin property to auto, the element's content will be centered within its container no matter its size. This can be seen in the example above. Using the element is a great way to easily create complex layouts and can help you to organize and structure your web pages..

Scene 12 (10m 10s)

[Audio] The class attribute is a powerful tool for HTML web developers, allowing them to group and style multiple elements on the web page. As an example, here we have three elements all with the same class attribute value of 'city'. With this class attribute and its associated style definition in the head section, all elements with the 'city' attribute will be styled uniformly. This means that changing the style of the 'city' class will cause all elements with this attribute to look the same across the page, making the web page much more powerful and visually appealing..

Scene 13 (10m 45s)

[Audio] Let's take a look at how we can use classes and ids in HTML. An id starts with a hashtag like '#lockers' while classes start with a period like '.lockers'. We can use this to specify certain elements that we want to have a certain style. For example, we can define an HTML block with the class '.lockers'. We'll add a heading one, heading two, and heading three. If we save the file, open it in a browser, and refresh, we can see the headings with the class '.lockers' underneath. Then, we can open the style sheet and use the class 'lockers' to set the color to blue, font family to 'Arial', and background color to white. If we refresh the page, we can see that the style has been applied. We can also use another example of a different class name. For example, let's name it 'flats' and use the class '.flats' to set the color to steel blue, and font family to 'Arial'. If we refresh the page, we can see that the style has been applied. In summary, classes and ids are useful for applying specific styles to elements in HTML. This allows us to organize our content, enhance usability, and make our design look more organized and professional..

Scene 14 (21m 33s)

Class Attribute. Output:.

Scene 15 (21m 44s)

[Audio] Voiceover Script: "The HTML tag is used to embed external content into your existing HTML document. It allows you to include content from different websites or sources without having to leave your webpage. The syntax for an tag is simple and easy to understand. You just need to provide the URL of the external content you wish to include, followed by a description of the content. Having a title attribute for the is also recommended as it allows screen readers to read out what the content of the iframe is..

Scene 16 (22m 20s)

[Audio] "Iframes are a powerful tool that allow us to embed another website into our current webpage. We can do this by using the HTML iframe tag, which looks like this:. Here, we can specify the source of the website we want to embed. This source can be a link to a valid HTML document, or a valid website. For example, we can embed this about.html document, which is located in the same folder as our index.html document, by typing the relative filepath starting with a dot, then a forward slash, then the name of our file. We can also specify a title attribute in the iframe tag, which is a short description of what we are displaying in the iframe..

Scene 17 (33m 6s)

[Audio] When adding an iframe to a web page, set its size by specifying the height and width attributes in pixels. For example, setting height to 200 and width to 300 will size the iframe 200px by 300px. A style attribute can also be added and use the CSS height and width properties to specify its size. For example, 'style="height:200px;width:300px;" will also create an iframe of size 200px by 300px..

Scene 18 (33m 41s)

[Audio] This slide provides information on how to edit HTML iframes. By default, an HTML iframe has a border around it, but you can remove it by adding a style attribute and setting the CSS border property to "none." To turn an iframe into the target frame for a link, the target attribute of the link must refer to the name attribute of the iframe. This allows for a creative and interactive way to navigate through websites..

Scene 19 (34m 10s)

Iframe - Target for a Link.

Scene 20 (34m 22s)

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

Scene 21 (34m 37s)

[Audio] HTML forms are a great way to let website visitors interact with the website. They are used for gathering information, creating accounts, troubleshooting and more. Forms are not built with generic span elements, but rather with specific types of semantic form elements, like input, textarea, and select. These elements are powerful and offer full-featured support even on older browsers. It's important to have a plan in place before creating a form. This plan can be a quick sketch of where different elements will go. For instance, a simple form with two fields (for a user's name and email address) and a submit button can be put together easily. The form element is used to start a form, and it has an opening and closing tag. In the browser, the form is invisible until elements are added..

Scene 22 (45m 59s)

[Audio] The element is a fundamental element for creating an HTML form. It houses several input elements that allow users to input data into the form, such as text fields, checkboxes, radio buttons, and submit buttons. All of these elements are placed within the element, which acts as the base for the HTML form..

Scene 23 (46m 22s)

[Audio] The element is a widely-used form element when creating webpages. It can display a range of form elements like text inputs, radio buttons, checkboxes and submit buttons. These elements enable you to build forms tailored to the needs of your users since each attribute has a specific function. For instance, the type="text" attribute will generate a single-line text input whereas the type="submit" will generate a submit button. The type="button" will produce a clickable button, while type="radio" and type="checkbox" will generate radio buttons and checkboxes, respectively, to choose one of many options or select none or more of many choices. It is essential to remember that every form element should have a purpose and be utilized with its respective intent..

Scene 24 (47m 10s)

[Audio] The tag defines a single-line input field for text input. An example of this is a form with two input fields for text: one for First name, and the second for Last name. When creating a form, text fields should be used when the user is expected to type in the information, as opposed to selecting an item from a list. This helps make sure the user is providing the precise information needed..

Scene 25 (47m 38s)

[Audio] The element is an essential tool in web development. It can help provide a label for form elements, which is important for accessibility so that screen-reader users can have the label read out to them. Moreover, clicking on the text inside the element can activate a checkbox or radio button. The element is bound to the element using the 'for' attribute, whose value has to exactly match the 'id' attribute of the associated element. This ensures that the label and input are connected correctly. Using the element properly in your web development can enhance accessibility and interactivity for your forms..

Scene 26 (48m 19s)

[Audio] The element defines a radio button which allows users to select one option from a set of predetermined options. Radio buttons are utilized when there are two or more options to select from but only one can be chosen. As an example, we have three possibilities: HTML, CSS, and JavaScript. Through selecting one of these, the user can show their preferred web language..

Scene 27 (48m 46s)

[Audio] Checkboxes are a useful way to let people pick several items from a few choices. It is a good way to give your visitors forms or surveys that are tailored to their preferences. The example above has three checkboxes that ask if they have a bike, car, and boat. People are allowed to select as many as they want. Each checkbox should be labeled so that people know what they are selecting. To learn more about HTML checkboxes, look at our full tutorial..

Scene 28 (49m 19s)

[Audio] The element defines a button that can be used to submit form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. It is specified in the form's action attribute. This element is also commonly used to refer to the button itself. For example, the code snippet above uses the element inside of a to create a Submit button. Therefore, this element and its attributes make it easy to create a Submit button for use in forms..

Scene 29 (49m 56s)

[Audio] When creating an input field, it is important to include a name attribute in order for the data from the field to be submitted to the server. Omitting this attribute will result in the value of the input field not being sent at all. For instance, the code sample provided does not have a name attribute for the "First name" input field, hence its value will not be submitted when the form is submitted..

Scene 30 (50m 20s)

[Audio] When the submit button is clicked on a form, the action attribute is used to tell the browser which file should handle the form data. For example, if it is set to 'action_page.php', the form data will be sent to the action_page.php file for processing. The action attribute can also be used to specify the URL or path of the file that should handle the form submission, which is important for forms that are hosted on multiple servers or paths. Additionally, the action attribute can be used to specify a specific server-side script or program to handle the form data, ensuring that the form data is sent to the intended recipient and can be handled properly..

Scene 31 (51m 3s)

[Audio] The target attribute in a form can be used to define where the response to a form submission should be opened. The default behavior is that the response will be shown in the same window. However, the attribute's value can be set to "_blank", "_self", "_parent", "_top" or the name of an iframe, enabling the user to decide to open the response in a new window or tab, in the parent frame, in the named iframe, or in the full body of the window. The syntax to specify a target is where the [value] is the desired action..

Scene 32 (51m 48s)

[Audio] Forms are a key element of any website, allowing users to submit data. The method attribute for submitting a form can be either URL variables or an HTTP post method. GET is the default method used when submitting form data, but this is not secure for sending confidential information as the data is visible in the URL. If you want to be able to bookmark the result, GET can be used, but for longer form data, the safer option is the POST method..

Scene 33 (52m 19s)

[Audio] An HTML form is a key component of Hypertext Markup Language and is used to present values to a server. Submission of forms can be done through either the GET or POST method. Choosing the correct method depends on the type of data being sent. For data that does not contain sensitive material, the GET method is more suitable as it is visible in the URL. However, the POST method is recommended for larger amounts of data and data that contains sensitive information, as it does not appear in the URL. It's important to be aware of these methods when dealing with HTML forms in your projects..

Scene 34 (53m 0s)

[Audio] In this slide, we'll talk about two attributes related to forms in HTML; the autocomplete attribute and the novalidate attribute. The autocomplete attribute, when present, enables a form to remember values entered by the user, and will auto-complete those values when the user visits the form again. An example of a form with the autocomplete attribute set to "on" looks like this: . The novalidate attribute, when present, prevents the form data from being validated when submitted. An example of a form with the novalidate attribute can look like this: . With these two attributes, you can add helpful features to your forms to help make user experience smoother and easier..

Scene 35 (53m 59s)

[Audio] The slide you are looking at lists the attributes of the element. You can use the element to create a variety of forms on your web page. In this slide, we have listed all of the HTML attributes and their descriptions. The attributes are accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, and target. You can use them to customize the form to meet your needs. The accept-charset attribute specifies the character encodings used for form submission. The action attribute specifies where to send the form-data when a form is submitted. The autocomplete attribute specifies whether a form should have autocompleted on or off. The enctype attribute specifies how the form-data should be encoded when submitting it to the server (only for method="post"). The method attribute specifies the HTTP method to use when sending form-data. The name attribute specifies the name of the form. The novalidate attribute specifies that the form should not be validated when submitted. The rel attribute specifies the relationship between a linked resource and the current document. Lastly, the target attribute specifies where to display the response that is received after submitting the form..

Scene 36 (55m 19s)

[Audio] The element is an incredibly useful and versatile tool for creating forms. By specifying the input type, you can control how the element looks and functions within the form. The most commonly used types include "text," "password," "radio," "checkbox," and "submit." The element also has various attributes that allow you to easily customize its behavior, such as the "required" attribute, which makes it mandatory for the input to be filled out before the form can be submitted. Additionally, the "maxlength" and "minlength" attributes can be used to control the length of user input. Finally, the element helps to increase accessibility by providing a description of the input field which can be read by screen readers..

Scene 37 (56m 5s)

[Audio] The element is a useful tool for creating drop-down menus. It enables us to specify a list of options for a user to choose from. This is done by providing an element for each option and assigning it a value and label. Users can select the option that best suits their requirements. Additionally, we can define a pre-selected option by adding the selected attribute to an element, which will be the default option when the drop-down menu is displayed..

Scene 38 (56m 36s)

[Audio] The 'size' attribute can be used to specify the number of visible values in an element. In this example, the size attribute is set to three, showing how to create a list of three visible options. Additionally, the 'multiple' attribute can be employed, so that users are able to select more than one option. Here, the size attribute is set to four, and the multiple attribute is included, allowing the user to select multiple values from the list..

Scene 39 (57m 4s)

[Audio] The element is a multi-line input field that can be used to collect data from the user. It functions similarly to the regular element. The 'rows' attribute of the element specifies the visible line of text the textarea should have, while the 'cols' attribute specifies the visible width of it. For example, in the code shown, the element has a value set to "The cat was playing in the garden." and this is what would appear in the browser..

Scene 40 (57m 35s)

[Audio] Both the and the elements are essential for creating interactive HTML forms. The element can be used to generate a clickable button, allowing users to take action when clicking on it. For instance, a "Submit" button on a form. On the other hand, the element permits defining a text box within which users can enter a greater amount of content. An example of its usage would be for providing feedback or for writing a blog post. These elements are essential for making forms thatlet users to interact with a website..

Scene 41 (58m 12s)

[Audio] The and elements can be used to group related elements in a form. The element will create a box around those related elements, while the element will provide a caption for that group. For example, the element can be used to group the first name and last name inputs, with the element defining the caption to identify those two elements. Without using these elements, it can be difficult to tell which inputs are related to one another..

Scene 42 (58m 45s)

[Audio] The element provides a convenient way for users to choose from a range of predefined options. It allows the creation of a dropdown menu when users fill out an input field. The list attribute of the element must be consistent with the ID attribute of the element to enable the user to choose from a particular list. For instance, an HTML form can be designed with a list of the common web browsers. The element can then be used to generate the list of browsers for the user to choose from. This reduces the amount of typing and makes sure that the user only inputs data in the list..

Scene 43 (59m 25s)

[Audio] The element is a versatile tag that can be used to represent the result of a calculation. By combining it with other elements, such as , it can be used in the context of a form to provide a user-friendly way to interact with and display the result of calculations. In this way, users can adjust the input fields and see the result displayed in the element. This element is very powerful and can be used in many settings, making it worth familiarizing yourself with how it works and how to use it in HTML projects..

Scene 44 (59m 59s)

[Audio] An overview of the most commonly used HTML form elements is provided in this slide. These elements are , , , , , , , , , , , and . It is important to have an understanding of the purpose of each element and their attributes in order to create effective forms..

Scene 45 (1h 0m 35s)

[Audio] We are examining the variety of input types HTML offers, such as buttons, checkboxes, colors, dates, datetime-locals, emails, files, hidden inputs, images, months, numbers, passwords, radios, ranges, resets, searches, submits, tels, texts, times, URLs, and weeks. These can be used to construct various forms and user interfaces within HTML code..

Scene 46 (1h 1m 7s)

[Audio] The HTML element allows you to create a password input field which masks the characters entered into it, preventing the user's input from being viewable. As an example, the following HTML code creates an input form with a username field and password field: Username: Password: . This form demonstrates that the input type password creates a hidden field which masks the user's input from view..

Scene 47 (1h 2m 3s)

[Audio] The tag defines a reset button which can be used to reset all form values to their default values. For example, the reset button will restore the form values to their initial setup - First Name with a value of "John" and Last Name with a value of "Doe". Having this feature available allows users to quickly reset their forms back to their original values after they have made changes..

Scene 48 (1h 2m 30s)

[Audio] The HTML input type color allows you to specify an input field in which a user can pick a color with a graphical color picker. When this input type is used, a color picker may be given to the user depending on browser support. For example, if you include the following code in your HTML, it will generate an input field with a color picker: Select your favorite color: . When this code is run, it will generate an input field in which a user can choose a color with the picker. This can be a great tool for adding that extra bit of flair to your website..

Scene 49 (1h 3m 19s)

[Audio] The tag is used for input fields that should contain a date. This tag uses a special date picker to make it easy for users to enter a valid date. Here is an example of how to use it: in a form, include a label for "Birthday" and an . This will produce an input field in which the user can click a date picker to select a date from the calendar..

Scene 50 (1h 3m 48s)

[Audio] This slide provides a practical example of how the min and max attributes can be employed to add restrictions to dates when using the date input type. Labels for two different inputs have been created with the date field set to have a maximum date of 1979-12-31 and a minimum date of 2000-01-02. Utilizing the min and max attributes is a key element for developing secure and dependable forms for users..

Scene 51 (1h 4m 16s)

[Audio] The HTML tag is used to create a date and time input field in your web page. It does not require the user to specify a time zone. Depending on the browser's support, a date picker may also be displayed in the corresponding field. An example is shown as a label "Birthday (date and time)" and the input tag . This code allows users to easily select a date and time to use for any form field. This is all for the Input Type Datetime-local..

Scene 52 (1h 4m 54s)

[Audio] Email address fields can be included in HTML forms using the input type email element. Browsers can use this field to validate the email address and provide an extra key on the keyboard for faster entry. As an example, the following code can be used to create a simple form with an email address field: Enter your email: This makes it quicker and easier for users to provide their email address to a website..

Scene 53 (1h 5m 35s)

[Audio] The tag defines an image as a submit button, allowing you to create an image for your website's submit button rather than using a text button or other input type. The path to the image is specified in the src attribute. For example, the following HTML code will render an image of a submit button with dimensions of 48 by 48 pixels: . In summary, the input type image enables you to create an image submit button rather than a text-based submit button..

Scene 54 (1h 6m 19s)

[Audio] The tag enables users to upload files to a web page. It involves a file-select field and a "Browse" button which opens a file browser, allowing selection of the file to be uploaded. As an example, the code Select a file: generates a file select field. This is a useful feature for gathering information in a straightforward and convenient manner..

Scene 55 (1h 6m 58s)

[Audio] This slide presents an HTML table showing attributes used to limit user inputs in HTML forms. The table has nine attributes, with descriptions on the right side. The 'checked' attribute is used to select an input field by default when the page loads. 'Disabled' disables an input field. 'Max' sets the maximum value for the input field, and 'maxlength' sets the maximum number of characters allowed. 'Min' sets the minimum value, and 'pattern' sets a regular expression for input value validation. 'Readonly' makes an input field non-editable, while 'required' ensures that an input field is mandatory. 'Size' adjusts the width of an input field, and 'step' determines the legal number intervals for an input field. Lastly, 'value' specifies the default value for an input field..

Scene 56 (1h 7m 58s)

[Audio] Input type week enables users to select a week and year. Depending on the browser, a date picker may be visible in the input field. For instance, a form can be created with a label for week, along with an input type week, an id week and a name week. This makes it easy for users to pick a week to fill in the form..

Scene 57 (1h 8m 20s)

[Audio] The value attribute plays an important role in creating HTML forms. Its main purpose is to provide the initial (or default) value of an input field. For instance, in the example given above, both input fields are given initial values of 'John' and 'Doe' respectively. This means when the form is loaded, the user will see these values already filled in the text boxes. This can be useful when the user wishes to enter a pre-defined value without typing it out. Additionally, the value attribute can be used to pre-select a checkbox or a radio button in an HTML form..

Scene 58 (1h 9m 3s)

[Audio] The readonly attribute can be used to create a text field with a predetermined value that can not be edited by the user, while still allowing the value to be submitted when the form is submitted. This can be useful when providing information that should not be altered, such as profile information or a product name in a form. The value of the readonly field will be included when the form is submitted, alongside any other form data..

Scene 59 (1h 9m 29s)

[Audio] The attribute "disabled" can be applied to an input element of an HTML form to prevent it from clickable and its value from being sent when the form is submitted. In the example code mentioned, the input field for the first name has been disabled so its value won't be sent to the server. This is helpful in situations when a user should be prohibited from entering data in a field. It's essential to be aware that the disabled attribute should only be used when necessary, as it can have a great influence in the user's experience with the form and its data..

Scene 60 (1h 10m 3s)

[Audio] The size attribute allows you to specify the visible width, in characters, of an input field. The default value is 20, and it applies to text, search, tel, url, email, and password input types. To set a width for an input field, you can use the size attribute. For instance, setting a width of 50 characters for the first name, and 4 characters for the PIN, optimises the user experience by fitting the size of an input field to the expected input..

Scene 61 (1h 10m 36s)

[Audio] Setting the maximum number of characters can be done using the maxlength attribute of an input field. This attribute helps to prevent too many characters from being entered and can be used to ensure only the necessary data is collected. For example, if you are collecting a personal identification number (PIN) or a credit card number, you can use the maxlength attribute to limit the user input. However, this attribute does not provide any feedback to the user. For this purpose, you must write custom JavaScript code..

Scene 62 (1h 11m 11s)

HTML Forms. The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Tip: Use the global title attribute to describe the pattern to help the user. Tip: Learn more about regular expressions in our JavaScript tutorial. Example An input field that can contain only three letters (no numbers or special characters): <form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]" title="Three letter country code"> </form>.

Scene 63 (1h 12m 22s)

The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password. Example An input field with a placeholder text: <form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]-[0-9]-[0-9]"> </form>.

Scene 64 (1h 13m 5s)

[Audio] The input type element has two attributes, height and width. This example demonstrates how to use these attributes in HTML code to define the size of an image used as the submit button in a form. By using the width and height attributes, it is possible to precisely define the dimensions of the image, thereby allowing for the desired look and feel of the form..

Scene 65 (1h 13m 28s)

[Audio] An Attribute List is an HTML feature that allows you to input a pre-defined list or values for an element. This is done with an input list attribute and a datalist element. The datalist element contains options predetermined for the input element. For instance, an input element with the list attribute relating to a datalist and the datalist with values such as Edge, Firefox, Chrome, Opera and Safari pre-given. This allows for users to quickly be able to input determined values in the input element..

Scene 66 (1h 14m 3s)

[Audio] The HTML element is essential for adding videos to webpages. This code snippet shows how to include a video with the necessary source elements. The controls attribute displays the play and pause video buttons. The width and height attributes define the size of the video displayed on the page. The source elements give the path to each video file so the browser can show the video correctly. Make sure the path and type of each video is correct to ensure better compatibility across different browsers..

Scene 67 (1h 14m 35s)

[Audio] This tutorial covers how to include audio and video files in HTML. Start by opening the HTML demo folder and locating the 'audio video demo file'. Inside the HTML tag, add in the title of the HTML file, which is 'Audio Video Demonstration'. Then, inside the body tag add in the audio tag. This tag is used to add music or audio to the HTML file. The tag requires the controls attribute, which will add play, pause, and volume buttons. Then, the source of the music is identified with the src attribute followed by the associated audio file. Lastly, include a line instructing the browser to display an 'audio element' message in the event the browser is not compatible with the audio file. After that, look at the video tag. This tag requires the type attribute which specifies the type of media file. Then, the source of the video file is identified with the src attribute followed by the indicated video file. Finally, include a break tag which is used for breaking a single line. That is all for adding audio and video files to HTML..

Scene 68 (1h 20m 3s)

[Audio] The attribute "controls" can be added to video elements to display video controls, such as play, pause, and volume. Including the width and height attributes is essential to prevent the page from flickering while loading the video. The element can be used to specify alternative video files that the browser may choose from. The autoplay attribute enables a video to start playing automatically. If a browser does not support the element, the text between the and tags will be displayed instead. These features make it possible to integrate video content into HTML easily..

Scene 69 (1h 20m 45s)

[Audio] "The element allows you to define different video formats to be used in HTML documents. Supported types include MP4, WebM, and Ogg, all with the corresponding media type designation. The HTML DOM also gives you access to methods, properties, and events related to the video element. Using this, you can load, play, and pause the video, as well as set the duration and volume. In addition, there are DOM events that can notify you when a video begins to play, is paused, or ends. All of these provide great control over your HTML video..

Scene 70 (1h 21m 22s)

[Audio] The element is the basic tool for playing audio files on HTML pages. It accepts audio formats such as .mp3, .ogg, .wav, etc. This element has attributes such as controls, autoplay, and loop which provide the ability to customize the playback of the audio files. The elements can be used to include multiple audio files of various formats for cross-browser support..

Scene 71 (1h 21m 47s)

[Audio] Audio elements allow you to insert sound files into HTML documents. This makes it possible to add sound effects, music, and sound bites to your website. In order to ensure compatibility with different browsers, the autoplay and controls attributes can be utilized. Autoplay will start an audio file automatically, while controls will provide audio controls such as play and pause, as well as volume. The element can be used to denote alternative audio files for the browser to select, and the text between the and tags will only appear on browsers not supporting the element. HTML audio makes it possible to easily insert an audio file on your website and adjust the presentation and behavior as you wish..

Scene 72 (1h 22m 33s)

[Audio] We have gained a better understanding of how HTML works and how to make use of its features. We have seen how HTML elements are displayed and linked, how images can be employed to improve the user experience, and how tables can be utilized to display data. Thank you all for your attention..