HTML Tutorial For Beginners - 2025 [NEW]

what's going guys welcome to this tutorial on  html where i'm going to teach you the essentials of HTML. HTML is the foundation of the web and i've  seen lots of videos recently of people saying that you know they just make money with html and there's a lot more people now getting into tech and uh yeah so html it's uh its core it's the  foundation especially if you're moving into you know css or if you're doing stuff with react as  well as tailwind css html is a must so this is my first time teaching HTML actually and on our  brand new website we actually have a brand new road map in here that focuses mainly on front-end  development so we have courses on linux github and this one is the HTML essential so if you want to  gain a certificate for this course for free go and enroll to this course where you have access to the  entire curriculum and we have CSS as well which i'm going to post very soon we have javascript  typescript react and uh we are launching as well TailwindCSS very soon if this is your first time  on the channel go ahead and subscribe smash the like button and without further ado let's get  started before we start let me just show you that if you take this course within our platform  we actually have in here a few things so one we have the core slides so you can have access  to the slides in here and the other one is so every single section you can go and then basically  complete the sections and then you you basically get a certificate uh towards the end we also have  quizzes so end of each section we have quizzes in here to help you solidify the uh content that you  learn and also towards the end in here we have four exercises so we have exercise one two three  where at the end you learn how to build websites including so i think uh yeah so you'll build your  own portfolio as well and basically everything that you learn within these section in here we  just want to make sure that you actually learn by doing and not just by watching the course all  right without further ado let's get started let's begin our journey in terms of learning exactly  what is html html was written by bernest lee in 1993 this was the very first version and it stands  for hypertext markup language which is a language used to create and design the structure of a  web page so this is very important because it's the building block of web development allowing  developers to organize and present content on the internet the primary purpose of html is to  structure the content of a web page it provides a set of predefined elements that describe the  different parts of a document such as headings paragraph lists and tables so you'll see how this  will come together but html is a markup language and not a programming language so bear that in  mind all right so also we have something called hypertext and uh these are basically links so  hyperlinks in here or simply links are connections between web pages allowing users to navigate  between different pieces of content html has gone through several versions html 5 is the latest  and mostly widely used and each version includes new features and improvements ensuring the  language evolves to meet the changing needs of web development html is the backbone used to create  structure and link documents and it serves as the foundation for web pages working in conjunction  with other technologies such as css for styling and javascript for interactivity so you'll cover  both of these later but let's just focus on html next let me show you the structure of a html page  all right now let's learn about the structure of html so to begin with so this right here is a  simple web page that says hello world and i'm going to cover everything that you see in here so  let's begin with the doc type or the declaration so this is not an html tag but it's an information  to the browser about what document type to expect in our case html then moving on we have the html  root element so this right here is a tag and i'll come back to these tags how they work in a second  but you have the root element of an html page and it's like this so basically you have the less sign  html greater sign and then you also have the exact same thing but you can see that here it has a less  sign and then forward slash so this is the closing tag then inside of the root tag you have the head  so the head in here contains metadata about the html document and inside we have let's just cover  the meta so meta defines metadata about an html document so for example in here we have the char  set and this sets the character encoding to utf8 which supports almost all characters and symbols  globally we also have in here meta name viewport and then content width device width initial scale  one and this tells the browser how to control pages dimensions and scaling on different devices  so in here with device width makes the page width match the device screen width and initial scale in  here sets the initial zoom level to 100% so don't worry too much about this so this is actually uh  metadata and it's not included within the actual web page you'll see this in a second and for  example if you are doing stuff with search engine optimization or seo you'd include everything  within the head tag so basically metadata about the page itself cool then we have the title so  this is the title of the html document displayed in the browsers title bar or tab and next we  have the body so this is pretty much the most important tag in here and it contains the content  of the html document all right and uh inside you can see here we have the p tag or the paragraph  which is used for defining paragraphs so this is it awesome let's go ahead and create our very  first html page in order for us to create our very first html we need to download a text editor that  allows us to do so so for this course we're going to use visualstudio code which is the most popular  text editor for web development so navigate to code.visisualstudio.com and in here you can  download visual studio for your operating system so here if i say download and it knows that  i'm on mac os so just download and then save it on the desktop all right perfect so in here now  let me extract vs code so in here this is my desktop and i'm going to unzip there we go and if  i delete this zip file this is visual studio code now i'm going to click on it and voila this is  visual studio code so if it doesn't come up with a dark theme so what you can do is go to settings  and then here you can say themes and then click on color theme and then here you could choose so i  think it's because i already had the dark one but if you want the white one which i don't recommend  so i think this is the uh default you could use this one but i'm going to use the dark theme and  i'll also recommend you to use dark theme so that it doesn't damage your eyes so here let's just  go back click on the clog in here and then go to themes color theme and then choose dark visual  studio this one here and you can play around and choose the one that you like and this is it all  right perfect now that we have visual studio code we can create our very first html page all right  so now let's go ahead and create our very first html page so click on new file and then here just  use text file in here there we go and i'm going to type less sign and then exclamation mark and then  doc and then type so all caps actually so doc type and this is going to be html so this tells the  browser that this is an html file and then here we can say html just like this and you can see that  we actually get autocomp completion with visual studio code which is nice so if i show you so in  here see if i type the less sign and then html and then close this with the greater sign you can see  that it completes the statement for me so this is the opening tag and this is the closing tag don't  worry too much about this all right now inside remember we said that we have the head in here and  within the head tag we can define few things so let's just say title and then the title for this  will be hello and inside of the html tag so this is the root we have the head tag so here i want  to press enter and we can specify some metadata if we want to but we don't have to at the moment  so what i want to specify is the body so i'm going to say body there we go and then close it and  you can see that we get auto completion there press enter and inside of the body let's have one  p tag so let's sign p and close this and then i'm going to say hello just like that and this is it  so this is our very first html page all right now what i'm going to do is create a new folder and i  want to name this folder as html and we're going to save this file now all right so you can press  command s or control s if you're on windows or you can go to file in here and then save and you can  see the keyboard shortcut right here and now i'm going to save this under the html folder that  i've just created so for the file name in here we're going to name this as my dash first and then  page and then make sure that this is html so the same file extension that you have for example  for dot and then docs for word documents or csv or any programming language for java is dot  and then class for example for python is py for html the file extension is html and then save all  right perfect this is your very first html page now let's navigate into the html folder and in  here you can see that we have my first and then page.html so what i'm going to do is i'm going  to open this with any web browser for this course we're going to use google chrome so just make  sure that you have google chrome installed and rightclick and then open with so i've got a bunch  of different web browsers so here i do have google chrome so just click on it or you can just click  this file so if i click on it and there you have it so this is your very first html page or your  first web page which simply says hello and the title of it in here also is hello have a look the  title in here so if i go back and in here so if i show you so remember so let me just close this  so in here remember we said hello so this is the page title so if i say for example amigos code and  then save this and then go back and if i refresh the page you can see that we have amigos code in  here but the content of it still hello so if i go back and in here for the content i'm going to say  hello and then world save this go back and then if i reload the page you can see that we have hello  and then world perfect this is pretty much it if you have any questions drop a message otherwise  catch me on the next one what i want to talk to you in this video is how do you access your web  pages so you saw that we could just go to the file in here open the folder and then this is the file  and then here you could just double click and then we have this but if you look at the web address  so this is not www.amigoscode.com for example www.amigoscode.com right so if i do this this  takes me to the amigoscode website but in our case if i go back have a look this is a file  and this right here is the location of the file so file column/ slash and then forward  slash is the folder so root and then users amigos code desktop html and then  the name of the file which is my-first-page.html so if i also change this to  let's say my first html you can see that there's no file that we can access so if i go back in here  and just put the dash and then page html this is how you access now obviously when you deploy this  to a real server and then you can map this to your domain so maybe jila.com or johnontech.com but  we're not there yet so everything that we're going to do is going to be locally and for you  this is how you access your html documents all right if you have any questions drop me a message  otherwise catch me on the next one all right so when working with chrome or any other web browser  we have something called the inspector tools so here what i want you to do is within chrome  right click and then click on inspect so when you do this you get access to the inspector tool  now this sometimes it might be so if i close this so this sometimes it might be in here right at  the bottom so let me just close this as well so it might be right at the bottom but what i've done  in my case is and in fact if i press ctrl+ so it's bigger so in my case in here i can click on these  three dots and then dock side and then on the right side so this is what i prefer so in here  you can see that this allows us to have access to a bunch of things so one is the element so it  means that we can inspect any html page so you can see i can see the exact html code that we produce  so have a look html and then inside of the head tag we have amigos code and then inside of the  body we have hello world and if you want you can click on it or double click and then say hello and  then bar for example and you can see that you can modify the content of any web page but obviously  this is not uh permanent so if i refresh the page you can see that this goes back to hello world the  other thing that we have here is console so this allows us to write some javascript code so if you  say console.log or better let's just say alert so alert and then hello and then just make sure you  have double quotes there we go so i'm missing an o here so alert and then open parenthesis double  quotes type hello and then double quotes close parenthesis press enter you can see that we  have hello so this is an alert box so this is javascript which we're not going to touch in this  course and we have a bunch of other things in here that um you can have a look but for now all you  need to know is about the elements tab in here so this is cool because if you want to inspect  any html document so say that we go to so in here google.com so in here if you want to analyze  the html code behind this page rightclick inspect and then have a look we have html so have a look  doc type you've learned about this so html and then here we have the head tag a bunch of meta in  here so char set origin and then images and then styling in here so script as well which you'll  see later and then have a look we have the body so here so this is what's inside of the body so if  you look at so here we can actually rightclick on this button and then go to inspect and this takes  us straight into this element in here right so here this is an input and you can see the value is  google search so here i'm going to change this to amigos search for example press enter and you can  see that if i zoom in on the web page so on the web page in here have a look we changed this from  google search to amigo search so if you want to inspect any web page and see their html code you  can so if i go to let's just go to amigoscode.com and then here i'm going to rightclick inspect  and then you can see all the elements so here say that i want to see this element so just put  your mouse in here right click inspect and it takes me straight into this let me just close  this and you can see that this is a span with a class text accent and then developers so maybe i  want devs and you can see that now i temporarily changed my web page but you can see that this  contains a bunch of code in here and if you want to learn how i've put this page together you can  inspect the page so this is about the inspector tools which is really powerful and if you want to  inspect how a page is constructed this is how to do it all right let me close this for now and i'm  going to leave it here so one thing that i want to talk to you about is the indentation of an html  page so let me actually put this full screen just like this and what i'm going to do is i'm going to  zoom in so i'm going to press command plus there we go and one thing that i want you to notice  is the following so in here have a look we have so basically we have dog type and then html and  then head and whatnot so you'll see that if i for example let's just say here i'm going to delete  this and then i'm going to press enter so you see when i press enter the cursor comes here and if  i say in here body just like this press enter you can see that if i say p again enter what you'll  notice is that visual studio code is indenting our code for us and what this means you can see  that under the head tag there's one two three four spaces or so if i delete in here i'm going to  press tab there's a tab for it so this allows our code to be organized so you can see that for html  everything under it has exactly one tab for head everything under it one tab so on and so forth so  here body everything under it is spaced out by one tab so here if i create another p tag for example  so p tag you can see that it is under it right so under body so this keeps our code organized now  you can see for me i do have in here colors so i have an extension in here called rainbow brackets  that allows me to visualize this even better so if i go to so in here click on extensions and  then search for rainbow go rainbow so or indent rainbow so you can see that it is installed so if  i disable for now go back to my first page html and i think i need to restart the extensions there  we go click on it yes there we go so you can see that now i don't have enter any color coding all  right so i love this extension because it allows me to see how things are indented so let me just  go back in here so command z so what we had was hello world right so if i install the extension  again let me just go back and then here extensions and then search for rainbow and then install  this one indent rainbow 10 million downloads so click on it and then just say install for me  it's already installed i'm going to enable and then i can close this and you can see that now it  is colored so say that i want to put this word so in here i want to press enter you can see that now  this is a different color paste it and you can see that things are indented cool so let me go back  and leave this under the same line so it doesn't really make a difference but it's something that  i want to talk to you because obviously it's very important that you indent your html code now  one thing here which is very important is so if i basically let's say i mess this up and you can  see that this becomes red this also becomes red and let's just say that we have indentation like  this right so this is completely messed up and you have a bunch of html now obviously i can go and  fix this manually or go to view and then command pallet and then here say format so just say format  document and then this will tell you right so there are multiple formatterers just configure  and then just use html language in here so if you have prettier just use prettier if you have  dino so i think i've installed this one before but just use html it should have html by default  there we go and you can see that this takes care of everything for us let me show you once more so  say that we have something like this there we go and then maybe we have let's just say in here a  div and inside we have another div and inside we have a p t tag there we go so this is not really  valid formatting so what we could do is go to view and then command pallet and then here you can say  format document or format with choose html and you can see that it fixes the formatting for us so  very very crucial moving forward all right so for now i'll see you in the next one so the other  thing that i want to show you is one really nice extension that allows us to preview our web page  right within vs code so instead of opening a web browser and then view our code that way what we  can do is so if you navigate to extensions in here click on extensions and then here i'm going to  remove rainbow and then search for html and then preview so this will come up with few extensions  but the one that i want you to install is this one here live preview by microsoft click on it and  then install there we go and if i close this now what we have so if i click on the extension tab  once more to hide that now what we have is this icon in here so show preview i'm going to click on  it and check this out so what we have is a preview of our web page so let me just close this and the  exact same thing that you saw within google chrome it's now right within visual studio code so this  actually spins up a web server and you can see http and then colon/ localhost and then the port  3000 and then users amigos code desktop html my first page so you've seen this before so it means  that so in here if i make this smaller so command and then minus so you see everything so if i say  hello world and then full and you can see that it updates automatically so if i delete this you can  see that it updates automatically so if i in here keep hello world put smiley face and then maybe  i want to have in here another tag so just press less sign type h1 in here and you can see that  it updates so if i say hello for example so this is another tag that you are going to learn later  you can see that it's slightly different than ap tag so this is heading and this is paragraph all  right so let me see if i can zoom in in here no i cannot zoom in uh on the page itself but this  is quite good all right so if you want to stop the server in here click on the port so port 3000  and then you can stop server in here show preview on external browser if you want show debugs so  on and so forth but for me basically i'm going to leave it running and if i close this if you  want to access again just click on the button in here and you can see that it opens the exact same  preview so this is quite good because obviously we can keep everything under vs code and not  having to switch between web browsers all right it's all for now i'll see you in the next one one  last thing that i want to cover is you saw that before when we created this very first html page  i basically so if i delete all of this in here and i manually typed less sign and then underscore  dock type there we go and then html and now i need to say html and then close and then i need to say  title so on and so forth so what we are going to do in this course we're not going to type every  single command and instead in here if you type exclamation mark in here you can see that you have  the emit abbreviation so if you choose the second one in here it gives you dock type straight away  if you in here if you say exclamation mark and then just choose the first one check this out it  gives you a black canvas for an html page which is kind of nice so here you can go and then change  few things so if you want to change the content if you want to change the title here you can say  my first page and then within the body you could basically start writing html so this is one way so  here another way that you could do this is if you type html so you have all of these abbreviations  so this is html there we go and the other one is html 5 so this will give you the exact same thing  as before okay so in here if i change this to my first and then page so what i want to show you  is within the body itself now instead of saying less sign and then p and then you can see that  we have the opening and closing tag i could just in here i could just say p for example and now i  can choose any of these autocomp completions so here p is for a p tag there we go if i want an h1  h1 there we go if i want for example an image img there we go and you can see that it gives me the  image as well as the attributes associated with the particular tag which is an image in this case  right if you want i frame for example which we'll cover later you can see that we have an iframe if  you want a video just like this and many of other tags which are available to us so here we said p  and then i can say hello and then world there we go and before that if you want an h1 just type h1  there we go and then my site for example save this and there we go so we're going to use autocomp  completion quite a lot in this course but um as you see html there's not many tags that you should  know and i'll give a cheat sheet that you can have for reference but this is how you're going to  work with html most of the time so you don't have to memorize none of this all right so none  of this if i want meta for example just type meta in here and you can see that we have different  types all right so if i say meta and then this one you can see that we have the attribute for  this if i want another one i could just say meta but also one thing which i forgot to mention is if  you press control space in here this will give you auto completion so here if i say less sign and  then control space or escape and then control space you can see that i do get auto completion  in here you can see that i do get auto completion in here all right so this is pretty much it i'll  see you on the next one before we move on to the next chapter what i want to do is i want to make  sure that we have the correct setup so in here you can see that we only have one file but as we  go through this course i'm going to be creating lots of files so what i want to do is you see that  we have this folder right here called html so what we're going to do is let's just close everything  that we have in here and so i'm going to close this and what we're going to do is we're going to  drag this folder inside of vs code voila now this basically opens the folder but now we have access  to all the files that we create inside of this folder so here we have my first page and if i go  and create let's say to html you can see that we have the file in here and if i open the explorer  we have the file in here which is empty so you can create subfolders and everything so i'll basically  keep all the examples in here so that you can have access to it so here let me just close this and  i'm going to delete this file so right click and how do i delete i think it's just pressing the  delete tab and then here delete move to trash there we go and if i basically close this so this  is how we access the explorer right here and you can see all the files in here so if i close that  and then put this full screen and i think our file was let's just say hello and then this was  i think it was a p tag before so p tag my first page it doesn't really matter all right so moving  forward so for all the other examples what i'll do is i will create a brand new file and then we'll  access that file instead of reusing this file in here cool this is pretty much it and next let's  go ahead and learn about html tags in this section let's learn about html tags so tags are elements  used to structure and define the content within the html page or document each tag consists of  a pair of angle brackets so you have the angle brackets like this so this is the less sign and  greater sign and it's used to mark the beginning so this one is used for the beginning and we also  have the end so the end is the exact same tag but with a forward slash before the element name and  here's a breakdown so we have the opening tag so let's say that this is the opening tag and the  tag name is tag name then we have the closing tag so is the exact same thing so less sign and then  forward slash tag name and then close and then we have the content the content is the actual data  the actual text so you saw with a paragraph so this is how we've done it before so we have less  sign p close and then this is the data this could be anything and then the closing part in here all  right so we have common tags so we have the html tag we have the head tag title body h1 to h6 p  anchor tags images ul for an ordered list ordered lists the list item itself div for division and we  also have span tables trd form br hr and a bunch of others so these are just few examples but there  are many other tags and each serving a specific purpose in defining the structure and content of  your web page so to give you an example here let me just close this and then open and i'm going to  duplicate this command c command v and then here i'm going to rename this to tags html and then  close this and essentially so in here all these tags basically they have to be inside of the body  so the body contains the main content of the web page if i for example say let's just use age so  this is the heading so h1 press enter you can see that this in here is the opening and this is the  closing tag so if i zoom in so you can see better so opening and then closing and inside we have the  data so here if i say heading for example and then save this command s and then we can preview this  and you can see that we have the heading in here close this the same for the title in here you  can see that we have title opening closing and then we have the data if you look at the html tag  so this is the opening tag and we'll talk about attributes in a second so opening tag closing tag  and anything within is the data so the data is the head tag in here so this is the data and the body  as well so i can actually collapse this so you can see everything have a look so within the html  tag the data is these two other tags head and then oops and then the body right so if i put a mouse  in here you can actually read what this tag does so this is the documentation for it this is  it and it's not the case for the doc type so remember this is not an html tag but it's just for  the browser to understand the document type which is html all right so for tags you have opening  closing and then within you have the data cool next let me talk to you about attributes now  now that you know what tags are we also have tag attributes so these in here they provide  additional information about an html element and are always including in the opening tag they  enhance the functionality or provide additional details about the element affecting its behavior  or appearance here's an example with an image for example so this the image tag so you basically  say less sign img and then this right here is the attribute so src equals and this is the data  that we pass and then alt equals and then here this is the text in case the image does not load  all right cool we also have common tag attributes so in here we have class which is used to  assign one or more classes to an element id src href alt so this is basically used for  hyperlinks in here and i'll show you in a second and then we also have alt describes the content of  an image for accessibility purposes and there are others but most of the times you're going to be  using these ones the most cool let me show you an example right so right within visual studio code  or vs code let me just expand these so within the heading in here if i was to create an a tag so  in here a just say a and then close this and then inside we can have few things we can have dhref so  here i can say www.amigoscope.com amigoscode.com and then if i say visit my site so let me just  put this on a new line like so so here we need to add http so http colon slash slash and then www  amigoscore.com if i save this and if we preview this you can see that we have heading and then  visit my site you can see right at the bottom we have the target which is the amigos code website  and this right here so this is an anchor tag which means a link right so we said that whenever we  click on this just navigate to another web page which is amigoscore.com so if i click on it i  don't think that we can navigate to another web page from the extension that we just installed so  open up chrome so let me just close this and then in here before we had the first page but for us we  renamed the or actually we have a new file called tags and then press enter and you can see that we  have heading and then visit my site so if i click on this have a look we navigate to amigoscode.com  now let me give yet another attribute to this so in here i'm going to give it another attribute i'm  going to say target and then underscore and then blank so what this will do is the following so if  i save this go back and if i go back in here to my page reload so now you can see that before it  just replaced this exact same page with my site amigoscow.com but now if i click on it what it's  going to do is open a brand new tab so you can see that now i do have access to the original page so  you can see the effect of attributes this is for a tags but you have for images and you can provide  id as well which you will see but this is the gist of attributes if you have any questions drop me  a message otherwise i'll see you on the next one right now let me go ahead and um talk to you  about tags and uh you'll see their usages so if i expand this in here and then let's create a  new file i'm going to say heading html and here i'm going to hide this and then type colon press  enter or sorry exclamation mark and then press enter and then here i'm going to say headings and  basically headings allows us to create heading text similarly with a word document you have the  title and then you have subtitles and then you have the paragraphs you can actually achieve the  same thing with html so here if i say h and then one press enter so this is the h1 tag so if  i say for example ja and then save this let's preview and you can see that we have jamila in  here so it's actually bold and big and we can have also h2 so this goes all the way to h6 if  i'm not mistaken so here i'm going to say h and you can see that we have age one to age six so  if i say h2 and i'm going to leave jame as well so you can compare have a look so this one is a  bit smaller and let's duplicate this so i'm going to take this line or i think i could just press  option or shift and then option and then i can duplicate a couple of times and then this will be  h three and you can see the beauty is if i change here it also changes on this side h4 age five and  then age and then six so this is five actually so five there we go and age six so you can basically  compare and let me just put paragraph in here so p so you've learned about this jame all right so  this is the difference between h1's all the way to h6 so this is bigger and then smaller and then it  just keeps on decreasing in size right so when you have a web page and you have for example a blog  right you want to use the appropriate headings to define the structure of your page right so maybe  h14 titles so maybe a blog how to learn and then html and then you have the subheading which is  h2 for example html in 10 minutes for example or um the subheading basically and then you have the  blog itself which is using a bunch of paragraphs all right i'm going to leave it here but let me  actually revert this and just keep jamila so you know the differences between h1 and h6 all right  so for now i'll see you in the next one all right so you've seen the p tag but let me go over and  um again just um talk about the p tag and we'll have a much more structured html page in a second  but you've learned about h1 h2 all the way to h6 so here let's say that this will be so let me just  put this slightly smaller so here i'm going to say html course and then learn the backbone of web and  then development all right right so this is the subtitle and then h1 really it just allows us to  define text and you've seen this right so this is not really like previewing because i need to open  this file so i've just copied and i didn't show you actually i'm creating these files in here but  i don't have to show you every single time because you already know so if i basically preview this  and you can see that now we have html course learn the backbone of web development so now here if i  want to have some text so here i could say p so that's a p tag and then i think i could just say  laurum or laurum and then this will give me random text just say l o and then e rm just press enter  and then here you have random text so i can keep on saying here p oh actually sorry yeah p there  we go and then lauram and i think with lauram we can say lauram and then 50 and then it gives you  like 50 characters but this is fine and you can see that here we are creating a blog about html  so you can see that the p tag or the paragraph is mainly for text all right so you see we have the  h5 in here which is used for the title subtitle in here and then we have the article itself if  you look at any blog this is how it's been done all right make sure to use the correct tags when  creating blogs because for seo purposes so search engine optimization google looks at how structure  is your web page and if you have a poor structured web page for example you're using h1 instead of so  maybe here you are using another h1 right so for the text itself this is no good all right usually  you just have one h1 which is a title and then a bunch of sub headings and then the actual text  itself cool so this is pretty much p tags and you should know by now what they are but i felt like  i had to include them straight after h tags so for now i'll see you in the next one now let's talk  about lists in html so lists are much like bullet points if you've written a document for example  you've used um lists or bullet points and you can have uh you know the dots and then text or you can  have ordered bullet points this allows you to get the exact same result so for lists is as follows  so the lists actually they are used within a another tag called the o or l or ul and i'll show  you the difference in a second so here i'm going to create an h1 so h1 i'm going to say ordered  and then lists so here within the o if i save this and then show you so this gives me nothing  all right so what we need to do is we need to use this in conjunction with the l so li with the  list itself so here if i say for example jame and now i have a second one alex and then here let's  just say tommy for example or tommy with two m's and you can see that how this gives you 1 2 3  so even though i'm not specifying 1 two three in here so this is ordered lists now if you want  unordered lists so let me just duplicate this so copy everything and then paste and then here i'm  going to say un and then ordered so ordered lists and instead of o you just say ul so an ordered  list this is ordered list and you can see the difference in here so here you have the bullet  points so quite simple but but one that you use all the time so for now i'll see you in the next  one now let's learn about links which allows you to navigate between different web pages so in  here you've seen actually we use the a tag and this is how you create a link so you saw that we  have amigoscode.com for example and inside we have to pass couple of attributes so here i can say  href and this is where so https or http so this is the protocol/ amigoscode.com and we can have  another link in here so let's just say in here a and we say age and then ref and then here let's  say lists.html so this is the file that we have right within the html folder right so i'm keeping  track of all of the files that we are creating and here i'm going to say lists example all right and  then here for this link i want to say target and i want to open a blank new page so if i zoom out  so you can see everything and then save this now if we preview this you can see that we have links  in here so we have two links so amigoscore.com and then lists example so if i click on this one it  doesn't really work so links does not work with this plug-in so let's just open up chrome and in  here we have links.html there we go if i zoom in so you can see that we have two links list example  as well as amigoscope.com if i click on this one you can see that this opens a new tab and it takes  us to the ordered lists as well as an ordered lists example that i've given you and it opens a  new tag because of the target attribute if i go back to links in here if i open up amigoscode.com  this will not open a new tab and we'll go straight into the amigos code website and there you have  it this is how you work with links so for now i'll see you in the next one in this video let's learn  about html buttons so if you went to any website you've seen that sometimes you have a button  whether it's to save a form or submit the form actually or when you click on the button it does  something so if you want to have a button is quite straightforward so i could just say button in here  and i basically have all of these templates that i can use so if i use the first one you can see that  this is a normal button if i use the second one so button so button b you can see that this is a  button and the type is button and this is because a button sometimes can be used to submit a form  right so here i just want a normal button and i want to say click me we can also have a button so  if i say button and then here you can see that we have a disabled button in here de disabled or let  me just say click me in here and if i save this if we preview this you should see that we have an  empty button in here that has nothing one that says click me in here and another one which is  disabled so you cannot even click the button so this is it this actually is a html button there's  no styling so if you want to style you have to use css and to use css let me quickly show you so we  haven't learned much about css but here let's say that for the first button you want to say style  so this is another property and then i can say background color and then let's just say red for  example and you can see that the color has changed so let me just put this smaller again actually  let me just put this on new line like this all the attributes there we go and then there we go so now  i can increase the font you can see that we just use the style and this is one way of many ways  of styling a button but don't worry we haven't learned much about css this course is more on html  the other way that we can create buttons are as follows so you can have an input so input and for  this input so i could just say input actually and you can see that we have a button have a look so  input and then button so here i have type equals to button and i can just say click me again and we  have a button now this button in here is slightly different because it's mainly to be used within  forms and it doesn't have a closing tag so this actually is a self closing tag because the data  that goes inside of the tag itself it's through a property like this one in here whereas the data  that goes inside of this button in here is not through a property but within the tag itself in  here so you have the opening and then the closing tag all right this is it and if you want to touch  for example a bit of javascript so when you click to do something so maybe when you click you  want to change the background color to green for example so let's just try and do this quickly so  here let's just use so i'm on a new line in here so on a new line like this we can say on and  then click and on click in here we want to invoke change color so this is the function all right  so let's define this function and don't you worry too much about this because we haven't covered  javascript so within the head tag have the script so script tag like this and i'm going to have a  function so function and the name of the function is change color so just take that and then have  the parenthesis like so open and close brackets now in here we can say document dot get and then  element by id and the id is going to be b3 and we need to specify the id because obviously we have  various elements in here so the id of this will be id so this is a property and then i'm going to  say b3 so this is button three all right so now what i want to do so here i want to say dot and  then style and we want to change the dot and then background and then color and here equals to and  we can say green for example there we go so you can grab all of this from under the description of  this video and as i said don't you worry too much about this because we haven't covered javascript  nor css but now if i click on this button you can see that it changed to red but what i wanted to  do was to change this one actually so it means i need to change the id so the id should be on so  not on this one let's just put it on this one on the disabled one there we go so like this and then  indent this with tab so things are organized new line in here new line if i now save if i click on  this button and you can see that this one now is green all right this is pretty much buttons in  html obviously there's way more to it in terms of so if i say in here button you can see that we  have reset we have disabled which you've seen what is this d oh yeah that's disabled that's just an  alias but they're quite simple but very powerful so for now i'll see you in the next one in this  video let's go ahead and learn about html tables to work with tables is quite straightforward we  need to use the table tag and within table we have table rows headings and the data itself so  here we need to say row so we first need a row so tr just like this and within a row we have the  headings so th h press enter and here let me just say id and i'm going to duplicate this few times  and here i'm going to say name and then age all right so if i preview this this is our table so  these are the headers now i want the data itself so maybe two people let's in here say another row  so tr so tr and now i can provide the td for data so here i want one for example duplicate this and  i want to have james let's say duplicate this and then age 29 let's take this exact same thing in  here and then paste this will be two and then this will be anna and then anna she's i don't know 44  for example and you can see that this is our table now at the moment this table in here is not nice  right so it doesn't look like a proper table but it is a table so what we can do is we can add some  styling around if you want to style this table and this is using css and we haven't covered css so  don't you worry too much about this so here under the head tag i'm going to create style there we go  and within this style tag i'm going to target the table comma as well as the th so t headers comma  as well as the data td and inside i want to change the border to be one pixel and then solid and you  can see that it's already taking shape if you want to change the color maybe red you say red if you  want blue for example you just say blue and then end this with semicolon you can see how beautiful  it is now for the table also if i want the table to take 100% of the width i can just say table  in here and we want to say width so width 100% so 100% and you can see that now it looks like  a proper table all right so obviously there's a lot more that you can do but don't worry too  much about this this is css and you can grab all of this and then paste it so we'll cover css  later but the gist really is tables so you have rows and for the first row is the heading and you  could put your mouse in here and it tells you so the element represents a header and then we have  rows again with the data so td represents data in a cell all right if you have any questions on  tables feel free to let me know otherwise i'll see you on the next one in this video let's learn  about html images so how do we display images so what i want to do here is let's create a  brand new file i'm going to say images.html html and i'm going to close this as well as this  and this as well and then i'm going to say html there we go and i'm going to leave everything as  is change the title to images and then h1 and then images all right so to display images is quite  straightforward we have to use the img tag so here just say img press enter and we have two things  we have the source as well as alt this right here is an attribute that defines the alternative text  description of an image so browsers do not always display the image referenced by the element so if  that's the case then what do you want to display instead so here let me just say html now for the  source in here this is the location of the image so if you have an image which is locally stored  within your file system then you can point to it so let's go to google and go to images in  here and then search for html right click on this image and then what we're going to do is copy  image address go back and in here paste the image address so you can see that this is a very long  link which it's okay to be honest and the image is a b 64 encoded image which is fine so save that  and then preview and you can see that we have the image right here let's go back and in here let's  go to pixels so i'm going to say pixels in here and click on the first link and then here just say  coding html for example and literally just take any picture that you see in here so let's just  take for example i don't know this one and let's download and save it within the html folder so  here i'm going to say man and then working all right i'm going to save this and you can see that  this is a jpeg jpg so if i go back and in here let's add the image straight after the html image  so here i want to say img and you can see that the image is right here so man working so if i click  on it this is the image so let me just close this and then the source will be man working jpeg and  the alt in here i'm going to say man working for example perfect so you can see that we have the  image so obviously it's quite big and we can fix this so in here what i'm going to do is for this  image so on a new line just like this i'm going to say width and then we can give a width of in  here let's just say 100 for example and you can see that now it's much smaller so let's just say  200 and there we go now obviously you can adjust this according to your liking so if i say 300 for  example slightly bigger but you can see that this is how we work with images so let's say that this  image could not be loaded so if i say s you can see that the all text is man and then working in  here but obviously you'd have a better description in here but this is what happens to this alt text  in here perfect so if i undo that and this is pretty much the gist of images obviously you can  style your images and also if you don't want to specify the width like this you can do it through  css but if you look at the other attributes so you can say hide you can say height you can also  say hidden for example so the image is gone and there's plenty of others in here for us let's  just uh keep width because it auto calculates the height so if i was to say height for example  to i don't know 50 you can see that basically the image is quite blurry and it lost a lot of quality  let me just keep as 300 and we're good to go now this value in here is actually pixels so i didn't  mention but 300 and then pixels and this is how you work with images the other thing also actually  so you see that this this is actually an image itself so this icon but sometimes it can actually  refer to images on a particular website so if i show you in here let's go to amigoscode.com so  let's go to amigosco.com and then let's go to i don't know courses and let's find the html course  or any course dependence linux for example and then here i'm going to right click inspect and i  want to grab the image all right so the image is this one so this is the image and if i click on  it you can see that we have the source so just take this so i just put my mouse in here and i  have the source oops the source and then if i go back so here let's just have yet another image  so img and then paste that and you can see the source is https amigos.com assets thumbnails and  then linux fundamentals and here i would say linux funamentals cover for example and width let's just  say 200 there we go so you can see or let's just make it bigger 400 there we go and you can see  that we have an image so this is actually pointing to my website whereas this one so it's slightly  different so this one is a b 64 image and this is the actual image itself so this long text that  you see here is the actual image all right so this is pretty much it on images if you have any  questions feel free to let me know otherwise i'll see you oops otherwise i'll see you on the next  one in this video let's talk about the division tag or simply div and it allows us to group html  elements or tags together so let's say that we we have a paragraph and then here i'm going to say  laurum and then say that we have another paragraph in here so p and then i'm going to say laurum  there we go so if i show you what we have so in here we have two divisions now say that i want to  increase the font of this paragraph or this one or maybe in fact let's just create a another one so  let's just say p in here and then lower them there we go so we have three paragraphs so if i show  you so in here say that we want to group this and this paragraph together and then maybe give  it a pink background or an orange background and this one maybe you want to give it a different  color so divisions or divs allows us to group these elements together so it's quite simple  you just say div and now you can take whatever elements that you have and put it inside just like  this so what i want to do in fact let me just say p in here i'm going to say content and then i'm  going to duplicate and then just keep it simple there we go so you can see everything easily now  let's have another div and i'm going to say p and then content perfect so if i save this and then  preview nothing will change but the cool thing now is that say that we want to apply a background  to this division so we could just say style and then i could say background color and then you  could choose any color that you see in here so let's just say aqua for example save this and if  you look carefully only the elements within this div are affected but this one is not untouched  so if i close that i can also give a style to this and this is css don't worry too much about  this so here maybe you want to give a border for example so here you want to say maybe one pixel  solid and then maybe i don't know blue violet save this and then preview and you can see  that this division in here has a border this one doesn't and the background is just filled this  is pretty much the gist of divs and they are very very important because obviously it helps us to  structure the page into sections headers footers sidebars and um yeah so you'll use them quite a  lot to be honest and it's quite simple the concept is just a way for you to group elements together  all right so i'm going to leave it here if you have any questions on divs feel free to let me  know otherwise i'll see you in the next one in this section let's learn about html forms which  is a fundamental tool for user interaction on websites forms are crucial in terms of collecting  diverse data from simple text images or files it's one that you see in every single website here's  an example so you've most likely seen a form that looks like this where you have username password  and then sign in so this is done by using an html form so the basic structure involves enclosing  the form elements within the form tag in here and for example in the login form example that you  saw before so we have name and email in here or password so we have the input tags within the form  container and here's the actual example so you can see that we have a form and then within the form  we have two inputs so you can see here is a text input the username and then we specify the id  username and then this is the password so you can see that there's different types and then we name  this as password as well as the id password and then we have a button in here so type submit and  you've learned about buttons and this basically says that whenever you click on this button take  the information that you have here and then send it somewhere so i'll show you this in a second  as well with forms we have a bunch of types so here you can see text for single line text email  validates and accepts email addresses password number checkbox radio dates files submit reset  and i think there's few others but these are the most common ones the same way that you've learned  tags attributes we have form attributes in here the action attribute determines the destination  where the form data is sent we have the method specifies the http type get or post we have name  attribute which assigns unique identifier to the form for referencing purposes and then we have  required attribute so this mandates the completion of specific fields ensuring essential data is  captured before submission so this is the gist next let me go ahead and show you how to build  this simple html form all right let's go ahead and create a form that allows a user to login so  in here inside of the body tag what i'm going to do is simply to create a div and inside of this  div it's not needed but i just feel like let's just use whatever we've learned from previous  sections and uh start to group things because maybe you might have two forms for example and  you can group things together within this div you might have another div which is for the form  and maybe another one which is for uh i don't know faqs for example so in here let's just create a  form and i'm going to say h1 and i'm going to say form or let's just say login for example and what  we need is to have the form so here remember we said that we need the form so in here the form  and this has to be indented like so so we have to have the form with an action and then inside  of this form in here we can have all the inputs now before i do this let me just show you that if  i type form you can see that we have form get and then post so this right here is the most used form  type that you're going to have so action so the uri and then the method is post in here this right  here is what you're going to use most of the times not get but post so don't worry too much about  this in here essentially this tells whenever you submit a form send the data to whatever  location so here maybe i have http slam amigoscode amigoscode.com for example right but obviously  currently this url is not existent in terms of accepting form data now we need to have inputs so  here i'm going to say input and you can see when we say input we have button we have checkbox we  have color we have file in here we have text so the one i want is text so just say input type  and then the text and then name in here let's just say user name and then id so this is going  to be also username the type in here so if i put my mouse in here so the type is basically the type  of the form so allows for text input then we have name so this allows us to reference this later  and then id in here is the unique identifier so if i b mouse in here defines a unique identifier  which must be unique in the whole document its purpose is to identify the element when linking  using scripting or styling this is for javascript and css whereas this one in here name so this  identifies each piece of data when the form is submitted all right now let's create yet another  input so i'm going to say input and one thing also that you should see that here there's no  closing tags all right so this just opening and um i think this should be like this so for slash  so this is a self-closing tag but actually i think this also should work so in here if i say input  and now what i want so i want a password right so it's basically the exact same thing so let me  just uh get rid of this and let me just do this without autogenerating so type equals to and then  password and then name is going to be password and then id is going to be password there we go so  you can see that it's quite straightforward if i put this smaller and we also need a button so  the button in here is going to be type and then submit and then let's say login and there you have  it this is our form so if i save this and then let's preview the form there we go and you can  see that we have login here i can say for example hello@gmail.com and in here i want the password  and you can see that because the type is password i don't actually see the password so one  thing which actually so we should do is so for the form in here so the first input so  the username oh this is username yeah so we're not even saying email we just said username so  if you want for example email so we could just say email now if i try to do this in here and  then log in you can see that it says please include an at because it's validating the form  so for us in here let's just keep this as text and another attribute that we can pass within  the input there's many but what we could do is we can say right so if i put this on new line like  this so things are easy for you to see there we go so here that's the input just like that so  i can also say placeholder in here and then here i can say username or enter your username  and also i can say required this input in here is required for it to be submitted for the form  to be submitted actually so we could do the same for the password so let me just put this on a new  line like this and here i can say now placeholder and then enter your password and this is also  required so required perfect so if i preview this you can see that now we have the placeholder  so enter your username so here if i was to let's just say my username and then try to log in you  can see that it doesn't let me log in because i need to fill this in so if i do and then log in  you can see that this goes somewhere basically but obviously this is not configured basically  the action in here is not configured to take the form but this is pretty much your very first  html form in action if you have any questions feel free to let me know otherwise i'll see you on the  next one let's go ahead and continue to explore forms where in here i want to show you how to use  some other input types so let me just type form in here and for this i'm not going to bother with  an action or anything like that i'm just going to say form and inside of this form let's say that  we want to have a register uh form for example so allows users to register so here i'm going  to say uh h1 and then i'm going to say register for example and we need few things so we need the  input type so here we want text so input and then text so or actually sorry it's going to be yeah  so let's just say text and this was going to be name and then name all right so here i'm going  to show you that we can have the email as well let's just take this and then i'm going to change  this to email and then the name in here so name this is going to be email so the exact same thing  basically so this is the identifier when the form is sent so we can have access to the value this is  for the identifier within the html page and then this is the type so if i show you quickly so here  not this play button but this one here so you can see that we have register and then we have the  form in here if you want to put this input type on the next line so what we could do is we could  use the so in here i could just say less sign and then so i don't know why this is uh trying to be  smarter than me but let me just say br in here so this is breakpoint or is it breakpoint yeah  line break basically so if i show you now have a look so we have the input fields but we need more  spacing so let's just close this and we can have another br so br obviously there are better ways  of doing this so if i show you now have a look we have better spacing so there are better ways of  doing this with css but here let's just focus on html now let's take the two brs that we have in  here add a space and now we're going to have in here let's just have a label and i'm not going to  have four but i'm going to say gender and for the gender we can have the input type so input type  as radio in here so the name we want to have this as male and then the id as male so this should be  gender actually because it allows us to group the selections now we need to specify the value as  well so this is the value of whenever this is selected so for us it's just male there we go  and put this smaller like this and we can also have another label and this will be for male so  this right here so if i show you the id of this one in here which is male so let's also add two  brs in there and i think now we can just take all of this and then duplicate this is going to  be female and then here is going to be gender so this should be the same but the value and the id  should be different so this should be female and then the value is female all right cool the name  in here has to be the same because it allows us to group all right so if i show you now if i preview  you can see that we have gender oh actually i need to save this oh no it doesn't all right so what  happened here oh yeah so we have a label but we haven't specified the value so the label for we  said male and then here inside female so with capital f all right save this and then let's just  preview and now you can see that we have gender male or female and we can choose between all  right so this is beautiful next i want to show you a checkbox so maybe you want to say right  so you want to subscribe to our newsletter so let's just have br br for two line breaks and then  here let's just say label for newsletter and then subscribe to our newsletter and then here we're  going to say input and the type is going to be check the name is going to be subscribe and then  the same with the id it's going to be subscribe all right so oh actually sorry this should be  four and then id let's just say newsletter for all of these perfect now what we need is so  let's just take this right here paste it here and then obviously we need the button to submit so  button and this is going to be submit so submit or register there we go save this if i preview have  a look at our beautiful form so obviously we can make things as required so you can see here i  can select and tick choose the gender and then basically we can have in here placeholders right  so let's just say placeholder this is the name we said there we go so name and you can have better  messaging in here so let's just take this paste it here and also let's say required so required  there we go if i put this smaller and then in here for the email let's say placeholder this going  to be email and then also required there we go then we also need require for the radio button  and we have to do only for one of them because they are grouped for the checkbox as well let's  just say required and i think we also missed the value so the value for this is true so in here  or you can say yes if you want cool so let's just preview this and have a look at our beautiful  form all right all right so if i try to register you can see that things are required and u i need  to submit every single thing so here if i now try to register this is needed at ngmail.com and then  if i say register you can see that please select one of these options in here and then you can see  that i can register and it worked cool so in here let me just say close and if you want to make this  as required so the checkbox you can say required feel free to do it so just required as well and  there you have it you can grab this form from the description of this video and uh play around with  it and uh yeah i think it was more complicated this one but you can see that it's just using all  of these different input types so for now i'll see you in the next one here i do have a more complex  form which i'm not going to go through everything in here but is very straightforward and you  can see that we have checkboxes in here and uh it's actually a comment we have a select text  areas in here and uh i think we also have a file so where you can have a file picker i think yeah  this is the file one it's the exact same thing but really you just change the type in here to  the appropriate one so if you want to know the type if i delete for example file and then press  control and then spacebar you can see that we have all different types so button checkbox color in  here hidden month number password range search url i think this is for a phone number text week  so in here i'm going to leave as file and if i show you the form itself have a look so this is  a more complicated form but using you know few other selections including a date select in here  age for numbers you can see that it's working if you want to choose a file for example you see  that you can select a file and this is a radio button this is a check box in here select and  text area and you can see email address password so one other one is actually so let's just say  in here let's just say br as well i forgot this one and we want so we want a label let's just  take label uh and then here i'm going to say favorite color so favorite so f can't type today  favorite and then color there we go and then we want i don't think i want the br in so and then we  want an input so input and then color there we go and then i'm going to say color id color as well  so color there we go and then label four and then color all right perfect so you can see right here  so i can select the color in here so i'm going to leave this form in here where you can basically  check it out but uh let me also add in here so i'm going to say so command and then i'm going to  add a comment so i'm going to say color perfect so i'm going to leave this form in here so you can  basically explore but obviously you can create the form according to your needs but i think by now  you should have a pretty good understanding about html forms even though it looks ugly cuz obviously  you would style this with css but as we said html is a backbone all right so for now i'll see you  in the next one in this section i want to show you how to work with media so how do we have a video  for example as well as audio and even embedding content from other websites so if you navigate  to pixels and really just search for anything so before we search for coding and then html we  have some photos so here just click on videos for example and you can see that we have a couple of  videos in here so what i want you to do is just take any video literally any video so let's just  take for example this video in here so quite nice so i'm going to take this video and i'm going to  download so let's just download this video and save this so within the html folder i've actually  organized things so into forms fundamentals semantic html and then we have media in here so  let's just put inside of media so create a folder called media and then here i'm going to say html  so this is the name or uh coding in html so just put it inside of media in here all right so i  want to do that and inside of media i actually have the video.html for the example all right so  i'm going to save this and then go back to visual studio code and inside we can basically have an h1  let's just say video yeah all right so i'll have a separate html for each of the examples so here  video and inside if you want to so let me just preview this at the same time so if you want to  embed a video we can use the video tag so just say video like this and then we can pass the source so  you can see we have the source so this is one way of doing it and if i show you so here the source  is basically from the directory that i'm in i'm going to say dot forward slash and then coding in  html.mpp4 so you can see that we have the video so if i put this smaller so what i want to show  you is that we can have control so the same way that you've seen before we can say in here width  so width and then maybe 300 so this is the video now you can see that the video does not really is  not really playing basically right so if you want this to play what we need to do is let's just  say controls in here and now we have the video controls so i can just play the video and you can  see that it is working perfect so if i reload this you can see that basically the video loads we  have the controls and if i want this to autoplay just say auto and then play so now if i reload it  should play automatically well i was expecting it to play automatically uh but maybe i think it's  because the video has to be muted so let's just say muted and yes so you can only autoplay if  it's muted have a look so now it is autoplaying and if you want to in here so let's just remove  the controls if you don't want the controls there but now you can see that there are no controls  now one thing in here is that whenever this video ends you might want the video to loop for example  so you can see that it has stopped but it's not looping so you could just say in here loop and  you can see now it will loop forever and um you know some websites they actually use this feature  within the video itself perfect the other thing is maybe you want a poster so you can have a poster  and this is basically a location of a given image that you want so for example let's just say here  i'm going to say dot dot backslash and i think under fundamentals we had man working jpeg so here  if i remove autoplay so let's just remove autoplay you can see that this is the poster for our video  and then i want to have controls and this is the initial image or the poster for the video now if i  want to play this you can see that the video does play all right so in here let me just uh comment  this out in here or not comment but remove the poster so just take literally any image that you  have stored and then you can use that but for me i want this to be so let's just keep controls and  maybe autoplay in here and the last thing that i want to show you is that here we can have this  as a self-closing tag like this in here or so if you have different file types different file  types i.e mp4 web m or og what you could do is you can remove the source from here so remove  the source from here just like this and then you basically close the video and inside you can  say src or source my bad source and then for the source this is where you specify the video so src  and then paste that and now i can have multiple sources so maybe webm and we actually have to  say type in here and then this is mp4 and we also have type in here and this is video slash web  m so actually this also so this guy right here is video video slash and then if i put this smaller  so you can see that this is it and then you could have the default which is like your browser does  not support for example just like that the video all right so this i forgot mp4 here all right so  you can see that this is pretty much how you could have different file types for the exact same  video so obviously in here if i remove this so it's not going to work because i don't have this  file type in here but if i did then it would work but there you have it so this is how you work  with videos cool so for now i'll see you in the next one all right now let me show you how to  get up and running with audio which is almost the same thing as video so in here i'm within pixabay  and uh i'll leave a link where you can search any audio that you like really but if i play this  you can see that this is some nice motivational um classical music so let's just take this and  download and i'm going to download so let's just say motivation and then audio for example there  we go and let's go back to visual studio code and in here it's quite simple so the way we do it  is say audio and is going to be the same thing so here if you have just one audio so just one type  you could basically use a self-closing tag like this and then you say dot slash and then the audio  in here so motivational- audio.mpp3 all right so here if i show you the preview so you can see  that i was expecting to see the audio in here but we don't have anything all right so i think  it's because we need the controls so let's just say controls and fair enough oops so sorry this is  src and then controls so you can see now we have controls and then src so very similar to the way  that we've done with the so in here with the video so it's going to be the exact same thing so if i  can get this right so we have controls then maybe you want this to in here auto play for example  you just say auto play yeah auto play let's see there we go it works and then i can stop this and  i think it's going to be the exact same reason so here this has to be muted for it to auto play  actually so and there's other ways that you can basically have a button and then when you click on  it you can basically auto play maybe like a hidden button but this is pretty much it so let me just  remove the muted here and what else can we use so if i press ctrl enter so in here we can also say  loop for example there we go so this will loop and um i think this is pretty much it so there's other  ones that you should work that you can use but this is pretty much the gist if you have different  file types for the exact same audio same way that we've done before so you can remove that and then  here this is going to be audio like so and then you have a source so exact same thing in here so  oh actually sorry source is um is self-closing in here and this should be audio just like this and  then in here you say src src and then oops the exact same thing actually so paste that and then  here you say type and then the type is audio slash m b3 just like this so if you have i don't know a  different file format you could just have them in here and then here you can say type and the type  in here is going to be audio forward slash and then mg like so so m just like this and the reason  why you want to use different sources in here the same for videos is that different browsers support  different audio formats so to make sure everyone can play your audio you can provide multiple  formats and then the browser automatically picks the first format it supports so you don't choose  the format manually all right so this is just for different browsers and to be honest this is the  gist so this is pretty much how you work with audio so here i can play this you can see that  it still works i can download playback speed and whatnot all right this all for now i'll see you in  the next one in this video i want to talk to you about i frames which stands for inline frame and  it's used to embed another web page or document inside of your current page you can embed websites  you can embed youtube videos google maps pdfs and any other html files it's like opening a little  window inside of your page so say that we go to my youtube channel and i've just published a video  on spring boot road say that we want to embed this video in here within any web page so what we can  do is if you go on youtube you can go on you could you can click on share and then in here you can  see that you have different ways of sharing this but one is embed click on embed and this will give  you an i frame in here so literally so you can see that you can have a few toggles and whatnot but  just click on copy and then go back to vs code and in here what we're going to do is paste now the i  frame is quite easy to be honest it's just using the i frame tag in here and then you can pass  the width the height and then this is the source so this is where the content is coming from we  can specify the title whether has a border allow and then auto play clipboard right and all of  these other things in here including full screen so if i save this and let's preview this and  you can see that we have the video and if i want to i can play this video all right so this is  youtube video now obviously usually you just take the iframe so most providers they'll just give  you the iframe and then you can export that and then use it within your html page so i've got an  example here of a google map iframe so here let me just paste this code and you can grab this from  description of this video so here is an example with google map so let me just put this like this  and here let me just say youtube or actually i frame and then here i'm going to say h2 youtube  and then let's have in here h2 and then google maps all right so if i preview this you can see  that we have the youtube video in here but also we have the google map and this is interactive so  this is in france the eiffel tower and you can see that we have the controls i can navigate around  but you can see how we are able to embed other piece of content into our web page so we didn't  write none of this and we're just reusing code and we are just embedding other pieces of content  within our web page cool this is pretty much iframes in action very straightforward and you can  go through some of these other attributes in here and uh learn more about them but you can see that  they're quite straightforward but i'm going to leave it here if you have any questions feel free  to let me know otherwise i'll see you in the next one in this session let's talk about semantic html  which involves using specific html elements that directly describe the meaning and purpose of their  content rather than just its appearance so if you want to for example create a website previously  we would use a bunch of div tags so you've seen that a div is a a tag that allows us to group  certain elements together so maybe this would be the header in here then we have the hero section  maybe and then we have the site content the main content and then the footer itself in here so  this is using a bunch of div tags now semantic html in here involves using specific html elements  that directly describe the meaning and purpose so instead of using divs it goes like this so we  have specific tags that describe the meaning so we have a tag for header another another one  for nav another one for section another one for aside and another one for footer and a bunch  more now the beauty with this is that it improves accessibility as well as seo so this one is very  important to improve your search rankings as well as readability so there's a huge gain when you  use semantic tags now obviously there are a bunch of these tags so header defines the header section  nav for navigation links main for the main content section for grouping within a document article  this for independent piece of content aside footer uh figure contains self-contained content such  as images diagrams uh fig caption time as well and i think there's a few others but these are the  most important ones all right let me go ahead and demonstrate this to you how it works in here i do  have this html page in here that contains a bunch of divs so one for the header another one for  the nav another one for the main content with a hero with services and then a footer so quite  simple and if i show you this you can see that this is a very simple website so obviously  it doesn't look beautiful but that's because we're not even using css but this is a simple  website now you can see and actually sorry you can also grab this entire html from under the  description of this video so that you can follow along so in here what we want to do is we want  to switch from using div tags to semantic html so the way to do it is instead of saying div in  here so let's just start from the very first div which is the header in here we just say header so  let's just say header and you can see that this reads better so header in here and by just doing  this we are improving accessibility as well as seo for our website also in here we have nav so this  is for the navigation so here we could just remove this and we can say nav all right let's move on  to the next one so in here you can see that the uls and everything stays the same but we have the  main content so in here just remove this and say main now when you do this actually it replace  the bottom as well all right cool then we have the hero section in here so for the hero section  we could just use header as well so this is the header for the content within the main content and  we have services so for the services instead of a div we can say section so this is a section cool  and then we have articles so this is our services and if you want to you can also change you can  also add this in here as a header for this section so you could say in here header like this and  then put this inside if you want to so also for articles in here so section and in here we have  article so here this will be an article and this also will be an article so there we go so article  cool now obviously you can still use divs within these sections but whatever makes sense such as  the top level container it's best to use semantic html so maybe inside of this article for example  if you want to group this in here you can group with a div so there is nothing wrong with it you  can just group it like that because maybe within each article it's more complex and uh you want to  have a better structure so you can definitely use divs along with all of these other semantic html  tags perfect now let's go to the footer so for the footer in here so this will be what you guess it  right footer and there you have it so in here just put whatever year that you want for your copyright  but now if i preview this website you can see that it stills look the exact same thing but we have  improved the structure and mainly accessibility as well as seo for our website so search engine  optimization cool this is pretty much for this section if you have any questions on semantic  html feel free to let me know otherwise i will see you on the next one hopefully you had fun  learning html and uh as i said if you want to get the certificate for this course go ahead and  enroll on our brand new website i look forward to see you there and if you have any questions or  suggestions feel free to comment down below this is pretty much all don't forget to subscribe smash  the like button and i'll see you on the next one

Master HTML from scratch in this full HTML tutorial! Whether you're just starting out or brushing up your skills, this course covers everything you need to build clean, structured, and accessible websites using modern HTML. 🚀 What You’ll Learn: - What is HTML and how it works - Setting up your environment (VS Code, live preview, inspector tools) - Core HTML fundamentals: tags, attributes, headings, paragraphs, lists, images, tables, links, and more - How to build and style forms: login, register, and complex forms - Working with multimedia: embedding videos, audio, and iframes - Understanding semantic HTML and why it’s crucial for SEO and accessibility - Building real-world projects with exercises and solutions - Best practices for writing clean and maintainable HTML ➡️ Full course available here: https://bit.ly/4koJNBy ➡️ Frontend Roadmap - https://amigoscode.com/roadmaps/frontend Don't Forget to =========================================== 💯 Subscribe to Amigoscode - http://bit.ly/2HpF5V8 💯 Courses Available for free here - https://amigoscode.com/courses 💯 Join Private Facebook Group and Discord - https://amigoscode.com/p/join-community ⭐ Table Of Contents ⭐ =========================================== 00:00 - Intro 02:16 - Getting Started with HTML 33:10 - HTML Fundamentals 01:09:56 - HTML Forms 01:29:10 - HTML Videos Audio and Iframes 01:43:29 - Semantic HTML 01:49:12 - Outro P.S =========================================== 💯 Don't forget to subscribe | http://bit.ly/2HpF5V8 💯 Join Private Facebook Group and Discord - https://amigoscode.com/p/join-community 💯 Follow me on Instagram | http://bit.ly/2TSkA9w ❤️ Thanks for watching #html #html5 #htmltutorial