HTML5 Advanced Programing For Modern Web Developers | Somenath Sen | Skillshare

HTML5 Advanced Programing For Modern Web Developers

Somenath Sen, SkillShare Instructor Teaching 100+ Classes

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (2h 48m)
    • 1. Introduction To The Course

      2:03
    • 2. Setup Our Tools

      8:29
    • 3. HTML Comment

      2:37
    • 4. HTML5 DocType

      4:37
    • 5. File And Folder Structure For Websites

      2:20
    • 6. Head meta tag part 1

      4:24
    • 7. Head meta tag part 2

      2:58
    • 8. Title Tag

      2:20
    • 9. Style Tag

      2:19
    • 10. Link CSS File in the Head

      5:48
    • 11. Link Javascript File in the Head

      2:31
    • 12. Script Tag

      1:25
    • 13. Link favicon in the Head

      4:55
    • 14. Link Apple Touch Icons In The Head

      4:58
    • 15. Heading : H1 to H6

      3:25
    • 16. Paragraph

      1:35
    • 17. Hyperlink

      4:20
    • 18. Line Break

      1:46
    • 19. Linking Image

      4:31
    • 20. DIVS

      5:22
    • 21. Create Space in HTML

      2:39
    • 22. Span Tag

      3:35
    • 23. Phrase Elements

      6:34
    • 24. Font Markup Elements

      7:13
    • 25. Mark Tag

      3:10
    • 26. PRE Tag

      3:42
    • 27. HTML List : Order List

      4:34
    • 28. HTML List : Unorder List

      3:54
    • 29. HTML List : Definition List

      3:05
    • 30. HTML Table

      7:32
    • 31. HTML Forms : Text Input

      7:14
    • 32. HTML Forms : Password Input

      1:20
    • 33. HTML Forms : Radio Button

      4:02
    • 34. HTML Forms : Checkbox

      3:43
    • 35. HTML Forms : Dropdown List

      6:38
    • 36. HTML Forms : Submit Button

      3:14
    • 37. HTML Forms : Reset Button

      1:48
    • 38. Embed Sound Cloud Audio In HTML

      2:52
    • 39. HTML5 Video Tag

      4:07
    • 40. Embed Youtube Video In HTML

      2:26
    • 41. HTML Forms : Image Button

      2:35
    • 42. Iframe

      2:42
    • 43. HTML5 Audio Tag

      6:08

About This Class

HTML5 is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. In this course, you'll take an in depth look at HTML and learn its syntax and semantics. All while focusing on some of the best practices to use when writing and editing HTML. We'll start by exploring what HTML is and examining its basic syntax. Next, we'll move on to exploring basic document structure, how to properly section pages and how to use HTML to format page content using phage elements and font markup language.

After that, we'll explore how to properly create hyperlinks and lists. Finally, we look at html5 forms and table. And also explaning HTML5 Audio and Video tag and I give you some my greate resourse to start learning and exploring HTML imidiatly. I can't wait to show you how easy it is to begin writing HTML and how quickly that you're going to be authoring and editing your own HTML pages. Felling exsited, so then let's get started.

Topic Cover:

  • What is HTML ?
  • Important of HTML
  • Exploring an HTML document
  • Formatting content
  • Displaying images
  • Using Heading, Paragraph, and div elements
  • Exploring Table and Form elements
  • Creating lists (OL, UL, DL)
  • Controlling styling using Phrase elements and font markup.
  • Learn to using audio tag, video tag, iframe and more.

What are the requirements?

  • Internet Connection
  • Text Editor [Free Resource Include]
  • Passionate About Learning New Things

What am I going to get from this course?

  • Over 51 lectures and 3 hours of content!
  • Learn What is HTML
  • Learn Important of HTML
  • Learn how to exploring an HTML document
  • Learn how to formatting content
  • Learn how to displaying images
  • Learn how to use Heading, Paragraph, and DIV elements
  • Learn Table and Form elements
  • Learn how to creating lists (OL, UL, DL)
  • Learn How to Control styling using Phrase elements and Font markup
  • Learn how to using audio tag, video tag, iframe and more.

Who can take this class?

  • Total Beginners
  • Web Designers
  • Web Developers
  • Bloggers
  • Students
  • People Passionate About Web Design

Transcripts

1. Introduction To The Course: estimable stand for hypertext Markup language, which is the most widely used language on the Web to develop webpages. Esteem awards skirted by Ben Ali in late 1991 but estimates 2.0 was the first standard estimates. Specification, which was published in 1995 estimable Copan 01 was a major version office team, Ill, and it was published in late 1999. Thought estimate of 4.1 version is widely used, but currently we're having a steam L five version, which is an extension toe a steam l 4.1 version, and this version was published in 2012. In this course, you will take a in depth look at estimable and learn its syntax and some metrics, all the while focusing on some off the best practice to use win writing and editing HTML. We will start exploring what estimate is on examine its basic syntax. Next will move on to exploring basics document structure, how to properly section pages and how to use a stable toe, former pitch content using force element and horned markup language. After that, we will explore how to properly create hyperlink and list. Finally, we look at estimate five forms on a table and also explaining his team and five audio and video tech. And I give you some of my great resource to start learning and exploring estimable immediately. I can't wait to show you how is it is to begin writing esteem ill and how quickly that you are going to be operating and editing your own esteem pages, feeling excited? Then let's get started. 2. Setup Our Tools: before they started cording our estimate pages. We need some tools for doing, including First, we need a whip closer. If you are using Windows, then Internet Explorer will already install in your windows because Internet Explorer is the article frozen. But if you are using Mac Safari already installing your Mac, because so far he is a default browser in Mac. But in this course I recommended Google Crume because Google Chrome is pretty much lightweight fast on DSA Cure. But if you are familiar with Mozilla Firefox, you can download Mozilla Firefox as well. Firefox is also a damn good browser to start downloading Google Chrome Goto www dot google dot com On in the search box, type Google Big and click on the very first result. The Web address is www dot google dot com. Slask Room Now in the West Side, click on download in download page. You see a download Chrome Britain. Click on that button, click on Accept and Install Google com set up will downloading and after it download complete double click on it to install it. I'm skipping the step because I'm already installing Google Common using it, but believe me, it is very simple. Process to install Google Come in your mission. Just double click on the set of file on, Follow the instruction After downloading and install our brother. We also need a coordinator to read our core goto Not bad hyphen plus hyphen plus dot org. Or go to Google and I North Bad Plus Plus and click on the first result on the search in the note plus last was with Syed. First, let's check the North Plus Plus plus features. Click on the Features Link Over here. The very first creature is thin, just highlighting which is very important, not part plus plus. Also have features in user defined syntax. Ally Teen You I. Although competition what competition, function, competition and function Perimeters Hills Mighty documents. You can view multiple documents in not trust restless interface. Although there is option mighty view, you can view asthma's document as you can in no plus plus players. Also, you can ju mean and doom out your court. Multiple language support no matter what country, what religion you are, you can use note plus plus plus in your language. Also, you can record your macro and playback on also no prospects plus is lightweight and, of course, is 100% free and open source. So now click on the download button over here. In the download page, click on the very first link No plus plus plus in stroller. Download an installer in your machine. I'm just cancel it because I'm already download and install not for specialist, so I'm just keeping the step. But when you don't know, note plus plus plus installer does double click on it toe open the installer and follow the instruction to install new trustbusters in your machine. The second coordinator that I recommended is sub line text. Sublime text is pretty much good coordinator on support almost every type of programming language, but the blame takes is not free. You can download Sibling takes trial version by Click on this download for Windows Button over here, give you free 30 day stand. You can try it, and if you think supplying core editor is good for you, you can buy it as well. To buy sibling test, click on the piling on the top Sibling text cost $70 our license. You can buy multiple license as well by click on these the licenses for business. Burton, over here, choose your continuity. How many of license you want to buy? Here? You can get a discount for a Blunk purchase he fuel purchased 10 plus license. You can get $60 for license. You can buy 25 plus lessons. Then you can get. Then you get $55 per license. And if you buy 50 plus license, then you can get $50 for license. After explore your help. Your you can buy these if you want. The next quarterly dirt that I recommended is Komodo. Eric Humanoid is also a free and open source coordinator for Web developer, which also support of almost any type of programming language. You can click on this download button to download commemorated. You can download commander it and use it for free because it is open source and 100% 3 but co moderated. Also have upgraded version, which called Comodo i D. You can compare tomorrow idiot and comodo idee features over here as you can see Comotto idee or for more features than comodo ready. If you want to buy Comotto, I d click on the by and of great burden over here on in this page, you can see three type of licence for Comodo I d. Foster on his Commodore I. D. Personal, which costs $99 for license. Then the 2nd 1 is most popular and which called comodo I D. Which cost to $95 per license, which is pretty much costly on 31 is common Weide Core Team, which is $1615 far five. License, which is pretty much costly also. So if you want to buy Comotto, i d. Just to your license type and buy it. But I recommended Void the free one, which is Camano Idiot downloaded on. Use it. We know comfortable with it, then upgrade to Comodo i d version. The next quarter leader that I recommended is bracket goto brackets dot ru. So let's talk about bracket Bracket is another open source text editor on which is lovin bracket, is it understand? With design, as it say here, a modern open source text editor that understand what design What does that mean? That means you can open appears defile in bracket directly on bracket will generated sees this core for every layer in that year's different, which is pretty damn cool on. I love that feature. By downloading the bracket, click on this big download bracket button and don't know the bracket in your computer bracket. Also support Fiercest three processor Saxon List, which is a pretty damn cool creatures as well. All good support, Life preview and in Line a Leader, which is also good creatures. So if you're comfortable with bracket, you can download it and install it in your mission and use it. 3. HTML Comment: in this video, We're going to see how to write on esteem. L comment. Well, commenter Very useful. When you write thousands of thousands of line cords in a weapon, you can use this common features toe. Identify your various start off the court like this is the head part. This is the body part. This is the footer part. This is the paragraph. Is the heading something like this or you? When you handle what this witness to your client on when they can open this html five and 1/4 litre, they also find this is the head part. This is the body part is the heading. This is the paragraph. I go through the comment. So how to write this comment to right this comment? You want to type angle, bracket, then exclamation point, then Bish, then dash. Then write your common something like this is the body. Then dish this on closed angle record. It can little bit up Organize this so it can be more reliable. This give it up this on. Enter our make it more usable. Something like bodies start here and after the in deg we can copy this comment. Is this on just changes. Start toe end so we can clearly understand in hair body will start on in the stack, body will end, said the page and chicken in the browser. It was the page. As you can see, this comment is not visible in the Web browser. This is only visible when you open the HTML file in the coordinator. So as you can see, comments are extremely powerful features. You can separate each part off this page using comments so it can be helpful to you when you edit this page in later, you can find each and every section by read this comment line. 4. HTML5 DocType: in this video, we're gonna look at a steam and five doctor before we gonna look at a steel mill. Five. Doctor, First of all, I can tell you what it s team esteem. Ill stand for hypertext markup language. It's not a programming language. It's the Markab lingers program are Use this language toe at content, toe a webpage on, then use other programming languages like ruby or PHP or jealous cream to add functionality to read Whippets. So a steam l used for market estimate used for Ad Lundin For an example, You want that debut in a Whippet? You can do it using esteem. Then you can add any type of values. Are numbers or anything using any programming language like PHP or other programming language. So here you can see a steam and five document at the very top. We have Dr Declaration, which is Doctor, then space on estimate this line off. Good deal, brother. This is an ace Stephen five document. Then after that, we have ah faced Ameritech. Then you guys ducks need there is to estimate tech look like the same, but one bag have forced list because the world what is this. This is opening tag on. This is a closing tag, so opening and closing tech are look like the same. But closing stag have, of course, lest before the award. As you can see here, this is an estimable opening tag, which is angle bracket, then esteem. Ill andan angle bracket on this is in a steam. It'll cruising tech, which is the same angle bracket, then have a force less then the war esteem ill as like those same as opening tech, then have angle bracket. If you write an estimate tagging with days, you always wanted to close their tech because you don't want to close the tag. The page not worked perfectly. So remember this thing when you open a estimate tag when you regionalized email tag, you should have to close their tag after they steam attack. We have ah, hit deck, which I discuss it more in the later videos. But for this, keep it in your mind. Hit tag. Walk like a brain in a human body. It is the brain for this webpage. So all type of external things, like JavaScript, are middle tags are ceases, will go in the hitting after the hitech. We have a body day. Everything you see in a webpage are in the body. Take as you can see. For an example, we have a heading Don't body. We can discuss this. A stag. We can discuss this speed tag in the little videos, but for now, keep it in your mind. H tag is for heading and detect for Packer. So we have our h tec H one, which is heading one bag and a paragraph track in these body. So let's check this weapons in the Web browser how it looked like. But this is our webpage. This is the heading tag. And this is the pack attack as we can written in the body tag. So everything in this webpage everything are visible in a webpage are written in the port attack. So if I add another heading, we just copy this on based this after the spirit attack on let's where this is heading to serve it, go to our whitish, repress it on hair. It is our heading toe 5. File And Folder Structure For Websites: in this video, we're gonna see file and full of structure off our weapons. So in the previous video, we can create this in next door esteem. L file in our estimable project Cooler. No, we create some more. Fuller. First we create a series is fuller right leg on this fuller, then new fuller on limit. See, is this in the season's fuller all tables? Theis is which used to style of whip. Days are going to store here in the season's holder. We want one more colder which is called horned. Which continent? All the phones that are using in the webpage. So go to our estimate. Fuller again. Now we created holder for images. Name this cooler image are you can see Lotto, Other Web designer or developer named this cooler something like I am G which is shot from up image. But now we can use the full image word. So in this cooler we can store all the image that we including the Whippet. So go back to our A scheme will put a corner again Andi peered another fuller call Jif, which include all the javascript file are using in the Whippet. So this is the basic file and for the structure of our website, which include index dot a steam file, she's this cooler image holer and the JavaScript cooler on in the series of schooler also have 1/4 quarter. So all of your esteem l project file and cola structure are going to something like this. 6. Head meta tag part 1: Now we understand how a stream ill our work. So now look at this elements in detail. First we look at the head elements in digital. First of all, I go to the project file and copies index dot east email file on a visit here on really made toe heard hyphen Mitter Because we're exploring metal back in this video and I can create a copy off these index file for each part so it can be better understanding for you when you don't know this project file on it will help you to understand step by step process, which I can explain in this course. So right, click on this final him and open this on note. But plus, Chris, the meta tag is included within the head tag on it used to provide additional information about the website to the browser as well as the search engine search engine are actually read this met attack and indexed your site in the search engine. Let's see how the military is work on how great these metal, right? Suppressed inter prisoner Templeton on your keyboard Once on open a angle bracket on type mater, then give us space on by name Andi then given equal sign and open the condition and close the condition on in the condition with that key ward. After that, give us space, then type on, didn't then equal and then opened the condition and close the condition on In this condition, the content will be your keyword. As I stay here, the name off this mirror is keywords. The search engine will. I didn't require this mid attack as your site keyword so we can put our keywords in this content in here. Something like 80 and see. Is this a steam ill? If you to Rio, maybe something like this. And then we can close this angle bracket here on slave it when searching. You know what? Call your pages searching. You lowered. I didn't defy this meta tag as your side cured the side also have the description. So how we conclude that we use another meta tag for these description? I'm just copy this line maker enter and vested on instead, off this name 16 we removed this keyword on die description on in the content section. We put our side description So when's Virginian color pages? It can identify our side description from this metadata we put something like this is my first East something this meta tags will help searching your robot toe, find your site and help them toe indexed your site. Hopefully with the right key ward and description in the search engine. 7. Head meta tag part 2: another common use off meta tag used to use the specific how the brothers should control Lepage Junior level on dimension. We can do it by using deport. Attribute. Okay, first of all, I just copy this description. Middle bag over here. You enter based it over here on instead, off this description attributes I can put her zebo than in the continent Let's say again, Read equal toe 300 That mean with is 300 pixel on give a comma than space Then put atrial skill according Toa one and slivered. What this line say to the browser is maximum Vieux port with his 300 pixels on zoom level is one for an example you haven't image that is a 500 pixel with you will only see a portion off the image as the image with is larger than the report with you on Li see the cheering it pixel off this image on to see the rest of this image you have to school a page our little If you increase this view port with 2 500 pixels then you do not need toe Call the pitch to view this image you just want to view this image on the cool side in the browser. Or let's say, if you increase this view port with 2000 pixels, then you also feel the image in the brother birth in a small side. Because the report with is larger than no imagery on a little skill one, it said the ideal junior level toe Want X. If you increase this number toe five or maybe aid whatever number we want, it can increase the junior level off the page when it is first loaded by the browser. 8. Title Tag: the title. Dag is used for defining the title that the brothers who'd display on its title bar or on the beach death. So first of all, just copy this head made a dot estimate file on bested Click on it to rename this file on Rename This to Head Hi, friend Di Dio Door s demon Andi rightly going it on. Open it in note back crustless. As you can see, I already pulled the title tag in the weapons. When I create the index door esteem, a file title is a like the name off the webpages it helped tow identify each other pages. It also helped the searching in tow rank different pages using their title snow to write title that cost of all you open angle bracket. Then put the title, then close angle bracket On who? Your pitch title. Over here. As you can see, I can put the beach title as the speech title. You can change it toe as you like. Let's send you Let's say my first Stu. You know Andi, after your title, you can close the title tag and save the peace. So if you opened is in no way brother. Let's see what happening. As you can see my beach title. My first estimate pH is on the page 10 for best issue practice and forbid a search engine results. Put your title under 20 to 25 words and put some keyword in your title as well. It can help you, but ranking your Whippet in the search engine. 9. Style Tag: If you want to stylist with Page, there is two way you can do that. First of all, you can write internal seizes style this Web page or you can put on external seasons file toe style. His webpage in the little video. I can show you how to link external Sears a spiral in the head. But in this video, I'm gonna show you how to write Internal sees the style to style this weapon. First local. I go to the pool your colder on a copy of his head hyphen titled Out Esteem Ill on Mr Door on reanimate to head I've been style, not a steamer on right click on this Onda we need up on note. Fact restless. Oh, after that, I do given under on often angle bracket on Diab style Dag on rule the style deck give you the enter so it can be more readable to you on in the sold tag. Let's add some little style to demonstrate this style set in the brother. Okay, let's type body and then open Culliver kit and closing caliber kit on in the curly brackets . Let's dive, they're going color Onda, then Dave Rid said this on good or projects cooler, double click on head, hyphen style or esteem and file toe. Open this pile in Broza, as we expected it given ninth red color in the boarding. So in this way you can add internal style in the head using this style stack. 10. Link CSS File in the Head: in this video, we're gonna we learn how to link external CSS file into our head. So first off, all I'm gonna go to my project Fuller and create a workable copy for this esteem document. Just copy this head hyphen style dot It's Jamell. Andi misted over here on renamed it to head hyphen Link. I think this is on right Click on this file and open this up in no bad plus plus And we want to create another file. So just good or Project Fuller on Goto the ceases Fuller on into the season. Schooler, We now want to seize this file. So just right. Click on this colder and go to new. Then click on a text document on renamed the Stick Document toe Whatever name you want. For now, I just name it toe style and instead, off this dot Txt We just typed out CS is because this is a sister s file on hit Enter When you hit enter You see dialog box something like this And this is just ask you Are you sure you want to change it? Just click on ears on. Here it is. Here is our ceases file and we just right click on this season's while also and open this up in Not Bad Plus Plus. So now this is our empty seasons file, so go back to our head hyphen link Hyphen sees is not based email file. And what I do is just copy this season's style from hair Do This external sees is fun and said, This is a spread. Now go back to our estimate file and we just removed this internal sees this part. So what that does give us is the same effect. The same body color, which is red. If we have to link this'll Sofia's there's style properly into our head. So we just want to do that right now. So after this title, we just give some enter and we want to link this, styles it into our head. So of course I opened my angle bracket. Then we type link. Then give us this, then retype r E l RG ill stand for religion. This attribute will tell browser what type bubbling this are. So in this case, this is a style sit. So we just type style sit and then we give us a kiss on type H R E f. And then it will do condition fun in this attribute weaken type our park location for this Jesus file where this Jesus file is located. So in our case, the Seasons file, we'll look at it on Let this thesis fuller. So coast off all we just type the C s s, which is our colder name. Then we types last. Then we type our ceases file name, which is style dot c s this. Then after that, we just close the link back. This is a still closing stack, so we do not need to traditional way to close the tech like the head or the body. We just add the slash before we just closing the angle bracket. And that's really the sell clothing tag are immediately close. Save the file on good or put your cooler. Andi, don't look on this file to open this up in the brother to Let's see how it looked like if we Linda CSS file, hopefully it give us the same effect that we see in the previous video which give a nice red color in our body on If we don't link this thesis quite properly. It don't give us this in effect. So just double click on this file to open this up in the browser and let's see, you couldn't properly or not. Yes, it gives the same effect that mean we just letting the seasons quite properly. So in this way, we're linking an external sisters file into our head. 11. Link Javascript File in the Head: So in this video, we're gonna learn how blink external javascript file in the head. The first of all, goto our project Fuller on copies. Head hyphen link Dog ceases on Mr Door Hair on Reena Me toe head Hyper link hyphen Jealous . Grouped on in our genes cooler. Clear that doubles could find Go to new on six. Document men, Remove the door. Txt Extension on dot Juice for jobs. Group on. Yes, on our jobs. Good file is ready to use Back door. Estimable product cooler on a open up head. High pin link. Hyphen Jockey Bdart esteem Ill in not bread now festival Copy This CS is link line and give it a enter and festered over here on in the relation. Attribute instead off Stanciute we can add jobless group on in type attribute instead off picks less uses we can a fixed class script on in each are if we link our jobless kept our hair as like the season we link before. So in that case we can mention our jobs fuller cost, which is Jace then slash then our find them, which is men dot juice and said look fine. So we link of our external JavaScript files successfully in the head 12. Script Tag: in the previous video, we can see we can write internal seriousness using style tech. So in this video, I'm gonna show you how to write internal JavaScript using script IQ. So to start writing on internal javascript you want toe open the script ag faster corn. But you were put a cooler on. Copy this, vile and best it on release filed, too. Head hyphen. Java script door is de mille on. Open this in. No fare plus plus. I know. Give I enter on open the script check. First of all, we can open our angle bracket on, right script closed angle bracket on. Then we need to close the scripture. I just give some enter. So it can we look more clean on really well now, in the script AG, you can write your javascript directly and rather will read this JavaScript and displays a functionary off this Whippet in the browser 13. Link favicon in the Head: So in this video we're gonna be learned how to link Ferric on our lips. The icon asphyxiated toe this webpage the first of all the ministry wort is Fabrikant, actually is so go to our browser on goto google dot com. If you go to google dot com in the browser tab before the Google Ward, you can see a blue icon associative toe. This webpage, which is a fabric on this icon, will hold this google dot com I didn t tow their visitor. So in this video, we're gonna be see how to link this icon, our critic on indoor weapons. So first of all, I'm gonna go to my project holder. Andi, copy this head hyping link type in JavaScript or a steam will file and get a workable copy for the estimable document. Just copy and fisted. Or here on rename this to head High friend Link hyphen, heavy corn dog s German on a right click on this file on Open this up in Not bad plus plus And I'm also going to my project Fuller and I've wanted to see you. Something has gotta work Image fuller and in the image Fuller, I already. Curator icon in photo show, which size is 16 into 16 pixel. The standard American sizes 16 into 16. But you also can create a critic on with size 20 into 20 pixels. But in this video, I'm gonna follow that default size, which is 16 to 16. And I only create an icon with this 16 into 16 pixel in my photo shop on I'm gonna link this icon who are a steam and whip it. So go to our text editor. And after these Joe skip linked while I'm gonna just give some enter. And what I have to do is I just copy this line of JavaScript link and Mr Just straight up great on what to do is in the relationship. Attribute instead, off this JavaScript we just type Icahn because we just link icon into this. Rip it on into this type fix slash JavaScript instead off this takes place. JavaScript. We just type image slash BNG because this icon is the image on the former. Off this image is a peon. Gee, so we type image slash PNG. If your icon in gyp equipment, you can type image less Jim pick or whatever format. Your icon is just type the former after this image and slash and in each are If we just mentioned the part off the icon ease. So in our case, our icon is located in our image holer. So most awful, I'm gonna just type my folder name, which is image. Then I give a slash Andi. Then I die Icahn, which is the name off my image file on. I just put the extension, which is the N G and just Steve define and that's what it is. Good or Project Fuller on double click on this file. Open this up in the browsers. Let's the how it looked like on here it is. Here is the world fabric on as it created through this Web page, just like the Google our Perricone is no associate it to our Whippets. In this way we can add a fabric on or icon into a whitish 14. Link Apple Touch Icons In The Head: So in this video we're gonna be learning how to link at the Dutch icon. So apple touch I can are similar to the very gone. But with one changes it only display on the apple's product like iPhone iPad etcetera. To add this apple touch icon, you probably go to the apple Developer website on copy and paste this lineup Cordes do your head has gifts. Um STIs Andi is this line of court. Give some little tab over here, so it looked clean on readable. First of all, I just link up this stores to the right link image Icahn 60 to $16 piers. The 2nd 1 is the same but with the little changes. So I just hope it on a misted over here on just change 60 16 to 76 7 to 6 and the 3rd 1 is also the same. But we just a little changes 1 22 one granted same as the court one it doesn region it 1 50 Go 1 52 possible. I can goto the image holder off our project file. Then we came back here and explain this line off court Goto, our image holder on As you can see, there are different type up I concise format, I can say from Photoshopped Bostonian 16 to 60 2nd 1 is 76 into certain cities. Hard one is 1 22 1 20 court one is one cryptic 2152. This is apple touch Icon sizes. When you need toe, add apple icons in your website. You want your habit. Corn in this size is your default. American sizes 16 into 16. But when you want to put Apple Icahn Interview of what side you want this for different size for your icon, you easily created using photo shop or other imaginary things off like game so we can go back to our text editor on Now we can explain this line. Watts line eased for Apple iPhone So when someone is browsing your Web site using Apple iPhone, he can view this icon, which is this 1 16 to $60 BNG file. When someone is browsing your Web site using iPhone, they can view this icon. When the queen size is increasing to 76 into 76 which is probably our iPad. They can view your 76 into 76 icon, which is this one on when someone is browsing your Web site using Apple iPhone retina display, they can be your 1 22 1 20 the change icon, which is this one. So as you can see this line off court active when someone is browsing your Web site in different type of displaced, as you can see, when someone browsing your Web site using Apple iPhone previous version, which is a lie country or maybe before they can. Viv, you're this icon, which is icon 16 to 60 when someone blows in your website using Apple iPad previous version , they can video this icon, which is 76 into 76 on Wednesday morning, browsing your Web site using latest version off Apple iPhone taken video. This icon, which is like on one drinky, into 1 20 p and G. And when someone browsing your Web site using latest Apple iPad, they can view your this icon, which is one could to doing to one particular PNG. So this way we can add Apple Touch icon for different type of skin size into our heard 15. Heading : H1 to H6: now in the previous video will cover what any man going the head. And now take a look at what elements are go within the body. The first element that I explained here on, which is very important and useful in me and also which is heading a steam. L have six type of heading heading 12 heading six before we want to discuss more on this heading tag. Ah, possible goto Or put a cooler on Make a copy on rename it to body hyphen Hurting and ready . Going to spoil on openly on a note pad plus plus now within the body. Let's stay power hitting day. So in your body Open up angle bracket on died H extend for hitting then one. We have each one toe H six, which is heading 12 heading six on then most angle bracket on clothes, each one as well And in the heading one, we're gonna just a This is hurting one. We just copy and pasted for all of the other hoodies. No one little tree for 12345 on. We want one more six. We just change this. Did you want to? It's too. Change this to Htwe as well. This one is a tree, A steady as well. Here h four. Also it for as well. Here H five h climb here on the last one is fixed. His six year change This as well. It's true. Three or five on six civet on Goto our project folder double click on the quiet to open. Describing the browser on this is our H one toe. Which six have you got to be heading six? Phone size is much smaller than the others on H one Ponte sage, whose is heading one. Fun size is much bigger than the other. So in this way you can add this heading into your webpage. You can add H one to h six as far as your requirement are. 16. Paragraph: Now we know how to. We're heading. Now let's see how to add paragraphs into this Whippet. So, first of all, go to our project. Fuller. Andi, copy this. And is this rename this to body? Um, Tagro and, uh, that look on it and open it in. Not bad. Plus plus Now into our body. Opened the paragraph. Check first open angle bracket, then type E p. Stand for backup on a cruise angle bracket and then close the faggot tag as well on in the paragraph drag. Let's at some texts, I go to the loo or if someone said and copy some damn, it takes from here, unvested. Over here said the file. Go to our project Fuller on open this while in a browser by double click on it to open the file in the browser. So here it is. This is our backup. So in this way, we can add photograph into the whip pages 17. Hyperlink: Another important body element is hyperlink. We can put this hyperlink into the body using anchor. Text the first of all, good or predict cooler and copy and paste this quiet on. Rename it to body hyphen link dot system in on red. Click on it on. Open this file in no fact, plus plus get some enter. Do give it some more space. And now, to put hyperlink, we need to open the ANC attack. So open up our angle bracket and type A he stand for Ecotech, then closed angle bracket and close the ANC Attackers will in anger tag, Let's say Click her to goto google dot com, which, say, said this on. Go to our product file on a open this file into the browser. As you can see, this sticks will appear. But there is no hyperlink for click because we do not put any source link for the sticks. So good or text editor on. We need to add one more attribute in the attack, which is H R E. If equal do double condition, then in the condition type a student p it's less lis on No and I www dot you never know not . Come now. Save this while and go to the brother. Reload the page. And as you can see now, this takes are applicable. As you can see. If I'm out over here, it can. So the www dot google dot com in a bolo on. If I click on it, it can redirect me to the google dot com website. Now it goes. That asks me, as you can see here when someone click on this link, they can rely completely to the Google or come with side. But I want someone click on this link and they can stay on my website and they also can go to the Google It side. How I can do that. There is a solution for that. Go to our text editor and after this H R E f attribute, give us space and we can add another attribute called Target. I think it will do double condition on in the condition we can no under school on no new. It's mean when someone click on this hyperlink, they can redirect to this website using new tab. So let's say our file and go to the browser Rip is the page and let's click on this hyperlink. Let's see what happened. As you can expect it, it can go to the google dot com website using new tab. So in this way, user can stay on my pit as well as they can go to the google dot com website. 18. Line Break: So in this video, I'm gonna show you how toe line break in his demon. The first of all, goto our predict fuller and copy infested and rename it to body hyphen line Brick. Um, rec league on it and open it in North Bad plus Plus. Now, as we can see, this is a very long paragraph over here. So I want a line break after this coma. Soto add a line break. So you want to add break tech? So open my angle bracket, then cleared up slash aan den right B r on, then close angle bracket. If we want to put the line break, we just want to put this Bria Tech, which is self closing attack. As you can see, there is no opening tag here. We just write beer with closing tax. Save the fish on good war. Put a cooler on. Don't look on the file toe Open this while in the browser as we expected. After the comma, the line will break then the next war is starting from the next line. In this way, we can add a line break into Is Deimel 19. Linking Image: we learned how to wear heading out where paragraph outward hyperlink Also learn how to read the line Break. Now, in this video, we're gonna learn how toe ad he meets in tow s human. So first of all, good, we're pretty cooler on copy and paste it on a really me toe body hyphen image is Gemma. Right? Click on this file and open this on a note pad plus plus Give some spaces on. Let's open the angle bracket on I m G. I am just stand for image than space. Then we need to write if our c his assistant for source the source off this image and then give up. He called toe Double Coalition On close the stack image tag is self closing tag. So when we close the angle bracket, it will close automatically and we do not need to crawl this tag after that. So in the stores, we light our image cooler cost, then slash I have a image in image cooler which called image one door gyp IQ. So I want to put this image into that Whippet goto our text leader and type image one dot dip g save the file. Good or poor bowler would waste him up with a cooler on the double. Click on this Kyle to open this file in the closer on. As you can see, this is a more image where the immense size is pretty big. I want this image in my custom size. So how I can do that good or takes a leader on and we just want toe add height and with a tribute in here, we want height to one pixel on. We need we through she 50 pixel, Save the file, go to the browser and reload the browser. As you can see, image size is 200 pixel height and 3 50 pixels. With in this way, you can customize your image size as we want, and now we add one more attribute in this image tag, which is old a L. D. Do the condition in this all attribute, we can food this image name in this case in this day my that's done, which this Alltech is doing when your image link is broken. You could not see the image in the brother, but you still see the Imagine name in the brother. Let's just do this image cooler over here. So image link are now broken on. Let's check how it looked like in the browser page on As you can see, image are nor display, but still my custom image name will display in the browser. So in this way, if your website image link are broken, you're really door still See the image name when they are visiting your side so they can understand This is that image for article. This is the image for the blawg. This is the image for an animal or what kind of image this is whatever name you put on this all tag our display when the image linger broken. 20. DIVS: if we go to the browser. Andi, take a look at this. Elements here. As you can see, this hyperlink and this image are overlapping to each other. I don't want it. I want every element are stabilised a cost. I want my heading. Then I want my paragraph. Then I want my link. Then I want my image. So how I can do that? We need a division for each six in. So if we need to create division for each section, we need to create dips, dips, stand for division. So first of all, goto our project file and, uh, copy invested on renaming toe body. Hi, friend. Give not Is Jamil on open this up in North bet. Closeness? No. How you want Division four hitting our division or paragraph? Our division for hyperlink or anchor ticks on division for image as well. So most of phone open our angle bracket. Then the ivory derive it stand for division, which is Deve on DCruz angle bracket now closed that division after that heading because I want heading another one division. So I just close this division after this hurting now hitting in separated. Now I want a Duke or a division for this paragraph. So it's open or angle Bracket on died. Give on. Close this. Give after this better go bag here. No, I won't do for these. I got this. So open a angle bracket the and close this deep after this. Thank Dr on. I want to give for these images. Well, so open angle bracket and they do on on up that This instructors this deep when you retain the thousands of lines. Of course this deep, maybe confusing. Because when you written thousands of lines, of course you could not find What is the opening leave And what is the closing Lee for that section? So there is the easy way to identify this deep to each other is give it idee I give this deep is for these heading So give it a i d. The idea equals the condition on for heading. I used this day for despair occur so give me the i d level condition. I used these give for these anger, Tex So give me the I d on. I used these tv for this image to give you the i d toward image. Now you can easily find each deep for this Each section using this I d if you can look at this first, I use these give for this heading. So I used ah heading I d for this give so it can be easily identify. I used this deal for this heading. Then I use this gave for this paragraph so I can easily find this by Look at this idea also for this link on this image. So I can easily find this and even but this by look at their ID's now, save this file and good or pretty cooler dog on this file to open this up in the browser. Let's see how it looked like in the browser. Now, as you can see, each division are now separated on and no one can overlapping toe each other. As you can see, first we have heading. Then we have paragraph. Then we have our link. Then we have our image as we can written in this document post we have our heading. Then we have our paragraph. Then we have our link on. Then we have our image. So using this deep, we can separate each six and easily 21. Create Space in HTML: Okay, So in this video, we're gonna learn how to create spaces in HTML. First of all, I go to my project Fuller and copy this violent pasted over hair on really in this to body hyphen. This used space dot estimates on open this in no back plus plus. Now in this a stable peace. I want toe ad some spaces in this paragraph after this elite ward. So just add some spaces were here, said the file on. Go to my project folder and double click on this. Quiet. Open this up in the browser I June is a little bit so it can be really, really able to you guys. As you can see, there is nothing to wear after this. A light war, As you can see in our text. A leader, we add, Some spaces were here, but it will not be visible in the browser. So how to add spaces in a steam ill? So what is the solution for that? W literacy will provide us our estimate Entry toe at spaces in the A steaming pages. Most of all go to my text editor, Andi delete This pieces were here now heard and then, and the is be on at stomach alone and that's it. That's a little esteem. Ill entry will add a space after this elite world, so I want ah, through the four spaces over here. So I just copy this entry on fisted over here 2 to 3 times born two and three, and that's it. Save the file and Goto our brother on repeats the page, and now brother will display those spaces in front of us. So as you can see a steam ill, only record one spaces. So if you want to add multiple spaces, then you can add it easily using this estimate, five entry. 22. Span Tag: So in this video we're gonna learn how toe spandex. So, first of all, I go to my project folder Corporatist, Quiet infested Over here. Fernandes Toe body Ben. Nor is Jamil. And open it up in north back plus plus. So in this paragraph, I want to highlight it. This two word in rid. So how I can do that? The first thing strike in your mind is we want to add a gift. Then Assam's in line ceases toe add horn color to red. So let's do it first. Open angle record and I give. And he was then style element. They mentioned it before we use style Minto, inland cheeses in any properties style. Cool to condition. Here, Governor. Rid, then close angle bracket on. Close the debate Over here. See the fine on Let's goto our project, Fuller. And don't look on this file to open this up in browser and as we expected, color of the phone is done rid. But the line is broken from head toe here. I just do me a little bit, so it can me more reliable to you guys. So, as you can see, the line is broken from hair toe here because when we add the development give is created division give is not an Illinois elements, so it will break the line. But I do not want this line Break over here. I want this paragraph continuously, Bird. I want to highlight this to Ward Read. So in hair, the span element coming a span element is same as like the give but with a little twist Stan is inland is not break the line. So Goto, our text editor on instead off this deal, we just add span hair also so close the span. I'll save the fine on Goto our browser on refresh the page. As you can see, when we removed the Steven at the Stan Lehman, that line is continuously going The paragraph on the war distant red as we wanted. This is the power of this man. Lehman spent element as the same as like the Dave, but def, clear division and span is in line. So when you do a little work like this, you always do. The span element is walk like a div bird. It is in line 23. Phrase Elements: So in this video, we're gonna be learned frizz element before we went to type in any phrase element over here . Let's just go to war. Project Fuller. Copy this file and pasted over here on renamed this Quiet the body hyphen pres north html on open this in, Not back plus plus. First of all, I just released this thing from here so it can be give a clean space to write the court. And I also copy that each part off this video in our project Fuller. So don't worry. You will find every source cording the project's colder. So first of all, let's open a better Dag. And in the bad up bag, let's type our first for his element, which is e m stand for emphasize So close the yen on in the um Stripe plays in the next line. Let's go print Another paragraph Was the bag up Doug on in the para group open? Another sprays element, which is strong. Was this strong on in the strongest are then in the next line, hoping another for the demand trust in the bag up tech. I don't when our angle broke it on die the F and de even stand for defined this term. Do you find, Oh, Drome, Then in the next line and under put up tag. Close the backup tag on in the bag up bag open. Other favorite men called Cord Court stand for court listing. Yeah, yes, Then in, uh, next line when other broke up bag was, the better their quest fed up tag mistyped open a angle back across is and Curry is a and B for sample takes open the sample. He dive sample. Then in the next lane, open another better up bag. Who's the better day on in the bag up bag? Let's dive that open angle back a crust on Dave. Give B G. Give it to stand for keyboard and close that heavy, uh, keyboard. Then in the next lane of one another, better tag on. Close the parrot object first and in the paragraph tag one angle bracket and die. The RV here for very will. Now we have all our pres elements. Save the file on Goto Project Fuller. Double click on the file to open this up in the browser. Let's see how it looked like. First of all, I June it on a little bit. So the screen is clear to you guys. So as the first, as you can see, this is our emphasize This is our strong. This is the defining that term. This is our old listing. This is the number sticks. This is the keyboard on. This is the variable phase elements. So these are out of phase demand were using in a steam l it can be used to mark over text according to your project. So use this enemy and as far as is need also your full control to style is element using C asses. So use this element according to your needs and style is up you committed. 24. Font Markup Elements: So in this video, we're gonna be learnt formed markup elements. So first of all, I'm going to my project Fuller on copy and paste disquiet. Over here on in M, these two body hyphen formed her Sen mark up hyphen elements on rightly on this file and open this up in note. Back plus plus, First of all, I'm just cleared this course element over here. So it gives us a nice and clean a year to reach in our court. Now we're just open up our angle bracket and wait a minute up jag. Then close the better cup tag on in the pen it up Tech. We wouldn't our first formed markup element, which is be B stand for bull Close the B on in the the type border on in the next nine open , Another federal up bag blew the backup deck first on in the paragraph tag open our angle bracket on type I I e Stand for Italy on it. Lick is another corn markup element. Close the I on in the I di on in the niche line open another parag up tag rules that Bennett up bag on in the bag up dag open another phoned Markab elements, which is you. You stand for 100 line those that you on type Finally on in the next line open another pedagogue. Dag, Who's the backup tag on in the back up that were written? Our stop script formed Markab elements. So type something like this. This he is, um, script on. I want this subscript ward has subscript so before that we open over angle bracket on type this you be is you re stand for subscript on After this world, close the S Q b and close our finger bracket on in the next line Another pair up bag close the head of their cost on in the Gallup Tech we want to write our superscript formed the Markab element So type something like this This is ah, super script Andi, I want this superscript ward as super skip. So open our angle bracket on the I s u B s u p Stanfel superscript cruz angle bracket on close the soupy On in the next line open another product up. Dad rules the better. And in the protector, we want to write our small front markab element. So write something like this. This is small and I want this small world as small. So before this world, we we went over angle bracket and I small cruz angle bracket. And after this world close, the small filament does well on in the next line open another burger bag. It was the backup deck on independent up tag. Opening the angle bracket and type is its strength for strike up. Lose the case first on between the element strikeout and in the next lane open another better bag full the better the deck on in the betting up bag Open our angle bracket and type d e l g. It'll stand for dill it Close the deal. Attack first on between the dialectic days. Do it. Save the file on Goto our product. Fuller double click on this file. Open this up in the browser on Here it is. First of all, this is boy this is it a leak? This is Underline. This is the stop script. This is the superscript on. This is a small as you can see, the small world is a little bit of small in the other world and this is a strikeout on. This is the deal It you also have the option to style this element in the CSS. But when you written thousands of thousands of lines, of course this for mark up elements will help you to save your Lord's off time. 25. Mark Tag: estimate if I provide a new lead. Milliman called Mark Toe highlighted any text. And in this video, we're gonna be explained that Mark element. So first of all, good or project Fuller on copies and face this really in this vile toe body heist man Mark North East Yemen. Open this file in a note pad plus plus. First of all, I'm just do it. This form to Markham elements on goto our any previous a Stina file on. And copy this fed up give from here on vested over here. Now, I'm just removed his beer because we don't need this anymore. Possible, unjust. Removed this beer because we don't need it anymore. And now you're good to go. So in this panic up, I want this C ward highlighted. So how do that I have to do that using Mark Element. So, first off, all open our angle bracket and type mark on after this. T Ward disclosed the mark. Save the file. Good. Or put a cooler on. Don't look on this file to open this up in the browser. And here is the result. As you can see, I'm just Juman in a little bit so it can be clear to us now. As you can see, this three words are highlighted with this Eula color. So now I'm thinking, you know is good but I want this that gun color as red. So I'm going to my text editor, Andi. I just add my style attribute on this market element. Give us this on type strong equal to Kardashian on Then die my gun color Do read and sued the fine Go to our brother on repress the page. So as you can see our background color exchange grid also you have full control to customizing style Using external serious is. But as I said before, when you type thousands of lines of court, this little mark element can several lords off time. 26. PRE Tag: Now in this video, we're gonna be look at free tag. So first of all, I go to my project holder and copies and business file over here on name this file. Toe body hyphen pre. Not a city in the on. Rightly on this quiet and open this quiet in no bad plus plus no. So what is protect? Pre tag is seem as like Bagger, but pretty big will display the same format in the brother as you can written in this HTML file. So first of all, let's see how it looked like. First of all, I just removed this mark back from here. First of all, I'm just a little bit of modified this paragraph with some Deb, I want the line like this on I Wonder line like that on a little line like this. One of the lane like that. A little lane like this on like that. I just do it for the whole paragraph. We just give me some Frankie Chris coastline. Do it for the whole bagger on. Do one more, man. It's done. Save the fine and goto our put a cooler. And don't look on this quiet toe open this up in the browser. So as you can see, I just got down this paragraph like this Crisscross way. But brother will display this paragraph on a single in line. But I don't need this back up on this way. I just need my paragraph on this way. So how I can do that. So I need to use the pre tag over here instead off this parrot attacked. So remove this pitak and just type. We are even close the PR tag. Save the file and go to your brother on depressed, please. On Heritage here is our paragraph on the steam format that we can written into this demon local mint. So as you can see, this pre tag will display the same format off the text, which we can retain in this A steam it'll document this project will calculate the space, the calculate the tab are enter or anything that you can enter in the sticks will display as the same former in the browser. But when you use the p tech, it will be in line on display on a single line visit. Because that was a paragraph. You can see this pre tag It's pretty much helpful in those way that you can need to display the same format as you can written in the East email document. 27. HTML List : Order List: in this video, we're gonna be learned a steaming list. There is three kind of list in esteem in order list on order list on definition list. We'll start with one. Might have one. So first of all, go to my poetic holder and cos violent history over here on a rename this to body. Hi, friend list, hyphen. Well, because first of all, we're going to see order list. So we take well over here, right? Click on this, quiet and open this up in note. Back prospers. First of all on, just dilute this whole better go deep. Yeah, So it gives them nice and clean a year for type of list. Now, first of all, we need to open the angle bracket and type oil will stand for order list. Do you wonder so you're nice and clean. Space toe right. Your list. Eichin on. First of all, I'm just close this oil list on under this world list. We just had our list item. So open up our angle bracket on type ill I A list and for least item closed a light. And under this a light I've won create another early start in they do on. We need another list. I damn type tree. Save the file, going over pretty cooler and double click on this file to open this up in browser, I guess June on a little bit so it can be more readable to you guys. So, as I mentioned, because this is the order list. So as I mentioned before, this is the order list so it can order the list item like 123 But I don't like this 123 day booking. Let's say I knew something like EVC. So Goto, our text editor on in here. We need to add a attribute in our order lease, so give us fifth and on right at you type equal the condition on Let's dive a small A Save the quiet and good. Your browser recruits the page. As you can see, 123 is now through. Never and our list item were listed in smaller ABC. So let's go to our takes. The reader on remove this morley and type of capital in here, save the file the page and you can see smaller visi on autonomy, and we just live with the capital. ABC now I just try on what? Goto over text. The reader removed the capital and type I give a Rumanian style 123 to save the file and goto our browser refreshes the pace. As you can see, this is give us a Romanian style. 123 Let's try one more thing with your text. The reader removed this I and type of capital. I see the fine and go door brother and you can see it Give us a capitalized Romanian style . 123 In this way, you can customize your order list. Also, you have an option to customers Your order list to see Is this in estimate when you read intelligence of lines? Of course, this little directory will definitely save you a lot of time. 28. HTML List : Unorder List: So in this video, we're gonna be learned on order list. First of all, I go to my product, Hohler, on a copy. Disquiet. And is this over here and rename this to body hyphen list, my friend, you will on record on this. Quiet on. Open this up in no mat plus Plus So get some inter on typo or another list here Host of all opened up our angle bracket And you Il he will stand for on our list school that you're ill on under this evil Let's Taipower list item, which is l I was there. Lay our lives Do wanting Just copy this she listed him from well, list And this this in our list Sit describable on and goto our browser Repress the page. Oh, sorry, guys. I'm just replacing the wrong page Goto pull it cooler and double click on this file to open this up in the browser On hair it is There is our on our list. I'm just zoom it on a little bit so it can be more readable. Three ways. Here is our honora list. As you can see at the stop, this is our order list and at the bottom. This is our on our list. Orderly. Start with one boot free. This type of trains on another least started with these bullets. We also have the power to customizing these bullets as well. So Goto, our text editor on we also use the same type attribute in another list as well. Listen right type equal to double condition on in here. That type will be difference than the order list in here. First of all, let's type disk of the fine on good or browser repressive page. Nothing happened. This is just because this is already in the disc. Former The Bullets Already Aaron that explore meant the bike. People on a release type are in the disc. Former So go to our text editor on Let's Changes type Toe Square, said the fun on Go to the browser Pres. The pitch on hell it is. As you can see, our disc will now change to square. Let's try one more thing. Go to our text editor on change. That type square toe slogan said the page Good over browser on Rupert's a page. So as you can see, our bullet type square now changed to circle, But you also have the power to change this type attribute using external CS is. But as I mentioned before, when you written Holden's opponents of lines up scored in this esteem file, this little type attribute will really helpful and save your lots of lords off time. 29. HTML List : Definition List: Now we look at the definition list. First of all, goto my project cooler on copies and business over here on DNA. Now rename this to body. Have a list, hyphen. The L record on this file on Open this off in the note pad plus Plus, Now, after this, another list gets, um, enter on type our definition list. So open up our angle bracket. Andi type the L deal Stand for definition list. Close the definition list first. And under this deal, we need to type DT DT Stand for definition term. Close that, Dickie on under this duty, let's start the same thing one. And after this duty, we need toe type One more thing. Open up our angle bracket on Di di di. Did he stand for definition description because their duty on let's tape some description over here. Let's take thumb. This'll IHS one and let's copy on. Is this for another one thing? Okay, this is do on this. True Said the while. Go door project Foreigner, Don't click on this file. Open this off in the browser. Juman it a little bit. So as you can see, this is our definition list. This is their definition. Trump on this is the definition description definition list is different than the order list and honorable ist order list and honora list. We need just list item on in definition list. We do not need any list item, but we need definition term on definition description. So this is the tree list that we have in a sternal. Use this list accordingly. As for your project needs. 30. HTML Table: So in this video, we're gonna we learn how toe air tables in a Stina. The first of all, I'm gonna go to my project. Roller on copy this file and vested over hair and rename this to body hyphen. Stable door ace Deanna. Right. Click on this file and open this up in note. Pad plus plus. First of all, I'm just doing this whole list over here so it can be Give us a clean space to write our table. We need to open the table attack first to return our table. Now just open up angle, bracket and type. Do bill those angle brackets and close the table tag on in the table. We need toe open key art deg here. Stand for they will rule and we need to close the year tag in the the attack. First we need toe written our table head. So open up our angle bracket and type D h g h 10 for table head. Close that th tag. I just give it a more space so it can be clearly really well to you guys. Give some enter now. It looked clean. So in the th dead, we need to enter our first table head text. So let's say name. Okay. Now copy these the age over here and taste it two time because we need two more rows in our tables to more rose. Have two more hitting also. So in hair, we can add age on next d age. We can add Jenner Now, After this tier tech, we need to open another t attack. Need to open another. They will rule close this year. Tag on under this DEA tag. Now we add e d p d. Stand for table data. We have our table hitter. Now we have toe add some data into the table. So we end our first data close this TD tag. Here, write the name. John. Copy this studio tag on Based it again. The next table hitter is age. So we need to put this John character is in this to detect 25. Now copy this TV tag and bested again. Now we have the table hitter is gender, so we need to add the john gender over here. Male. Now we need to copy these whole They will grow from here on bested one more time and one more time is with So next Devil Road Data name would be Mike. Age is 29 years on. Also, his gender is male Now, next table road Didn't name will be giving a girl's name. Let's they and, uh and give her age is 19 year on her gender is female Save the webpage and goto our project cooler Double click on this file Open in the browser Now here is the work table. I just want a little bit so it can be more readable to you guys. So, as you can see under this name hitter, we have the names John Mike on Anna on under this age hitter, we have their age, which is 25 29 on 19 and under this gender hitter, we have their sex, which is male mill on humans. No, Let's that this table is look like a little ugly. So let's at some seriousness to pretty quietly stable a bit more. So I'm going to my text editor on I'm going to my head section and after this link elements we just open our style element style and close the style stack. So, as I mentioned before, we use this style attack to write internal series of style in the estimable head. So Close The Style Attack on Industry and Dag. Let's Stay Debut Comma Space DD Comma Space Beach on then open colored record on In the next line type border is to one p x p. Export picks ill, then space, then solid, then space, then black and stomach alone and close. The Colliver kid then saved a file and go to our browser on replace the pitch. And now, as you can see, we have a nice and clean one pixel black border in this devil and now the table look much professional than the previous one. So in this way we can add stables in general. 31. HTML Forms : Text Input: in this video, we're gonna be learned. External forms a steam. All forms are very, very important on extremely useful every Whippet in the browsers or at least have a one, a steam informs. So before we don't write our form enemy and Constable, I'm gonna go to my project folder on Make a Workable copy for this, a steaming pile Just copies and pasted over here on Rename This to Body Heiferman from Door s Demon and right Click on this file and open it in notepad plus Plus. So, first of all, I'm gonna remove this stable. Come here because we already have a body hype in table Lord EST email file in our project Fuller which includes the stable court. So we do not need this in hair on. Also, it was a nice and clean walk a year to write our calm element. So first of all, I'm gonna open a angle bracket. Then type form, then close angle bracket on throws the contact Now the home have some attribute. The first attribute is myth or what type of method this home will be used when user submit this home. So first of all opened this myth or attributes Type mitt hard. The actual design then opened the double condition on in here we have to type of homes the MIT MIT hard in a steam ill one is get and another one is post. When you learn a programming language in later or you already know open grabbing language. Then this myth hard attribute will be much more clear to you. But for now, keep it in your mind. Get midhar will crosses the form. Data will use this limit This calm using now you are ill. So when the user submit this warm And if we have the get made hard in this metal attribute , then form will be submitted so that you are in and data will be passing toe the e world to the date of is and when we're using the post a minute or the formerly process to the backbone and after users submit this form that either not able to see any data off any part of this website on in this to mitt hard, the Austin Midhar will the more secure way to submit the form. So in this case, we just type most here on. We need one more attribute, which is action. The action attribute defined the action Do we put home when the call me submitted? So, for example, with diaper Excellent script here which name submit dot beach. So when users submit this form the form data goto this form submit dot PHP script on this script will process the data and story it in our database table in the exact format that users submit this form, for example, built. Think this is a sign of form. And when the users the meat this data, their data like user name or password or email will store in the database in exact former like the name will store in the name did have a stable and the password will story. In the past, we did have a stable and the email will store in the imitative a stable or stolen something like that. Now we open our first form element every form have some input. So we've post open a text input. So first of all, open the input bag, open our angle bracket and type input, Then give us face and type type. What type of input disease. Then we right here. This is the text input. And now we need to add another attribute, which is call name so kind of name he called Do double condition on in the name field. Give this input on name. In this case, we're just keep this in. Put a name, which is called Takes one on close. The input tag input tag is a self closing tag, and we do not need toe. Close this tag with a traditional way. We just pulled the backslash and close the angle bracket and in protect will close immediately. Now let's just prettify this input type a little bit more. Just rub this in book type with a paragraph. So open a panic attack. Open our angle bracket and type B closed angle bracket and closed the paragraph. Attack right upto the input tag. And in the paragraph back, let's said this input is for name failed, so type name. And we also had a line brick right upto This name takes so it looked nice and clean. Just that beer tag. Beer for line breaking and save the file. Goto our product cooler and double click on this wild. Open this up in the browser on hair it is. There is a one name filled. Here is the name text on, then a line break. And in the next line here is our in book type. In this input type, we can add anything like John Oh, are and whatever name we want. Or what about six? We've won. So in this way we can add a form input type in a estimable peach. 32. HTML Forms : Password Input: So in this video, we're gonna be looking at how to create a password. Input. First of all, I'm just copy this whole name Benadryl from here on fifth Stewed where I doctorate. Just change this name toe possible on in this input type, we're just gonna be right. Password and also given name, password. Save the file and goto our browser on refreeze this speech. So as you can see now, we have two filled one for name and one for password. So first of all, just type a name. Let's say, John on type something in the possible field. So as you can see, if I write something in the past, but feel the character will be in scripted and we could not see the character for security purpose. So in this way we can create a password input type in a esteem form 33. HTML Forms : Radio Button: in this video, we're gonna be Look at the ready. Abundance. So, first of all, I'm gonna go to my project cooler. Andi, make a workable copy of the system and file. Just copied and pasted over here and rename it to body hyping form. I've been radio, not esteem, and rightly on this choir on open this up in note pad plus Plus. Now what I have to do is just copy this name Better girl from here and best it right up to the post. What? Field on change this name to age. So I want a different type of each field hair so user can select from multiple option. What have to do is just give some user some option. Using the ready evidence, the user can easily select their age type using this field. So first of all, I'm just changed in this input type. Trailed just instead off the sticks were gonna right radio Andi After this in Fort built just type ah, option Something like 18 to 25. Then give a beer for line break and we just copy this whole input for another to think and changed this age group to 26 2 35 on the next one is 36 do 50 and now save the file on Goto Project Roller and only growing Disquiet. Open this up in the browser. Let's see how it look like on here is our really evidence. As you can see, this is our H field, and this is the three option that we created. Using Radio Button one is 18 to 25 other warnings 26 to 35 on another one is statistics to 50. So user can easily select their age group using this tree option. Either he will select the 18 to 25 or maybe 36 to 35 or 36 to 50. Now, I want one auction from this three. Option is selected by default. So how I can do that? As you can see, if I refresh the page, the selection will go on. But I want one option selected by default. So how I can do that just good or what takes editor Andi Let's there. I want this 18 to 25 groups selected by tickle, so I just want to add another attribute. Hair, which is called checked on save the file. Go to our brother on Repress the page. Now, as you can see, our 18 to 25 group is selected by tickle. If I depress the paid, it will still selected. So in this way we can create radio buttons in a steam else comes 34. HTML Forms : Checkbox: in this video, we're going to look at how to create checks. Boxes in esteem inform. So first of all, I'm gonna go to my project cooler. Andi, copy this, Kyle. And pasted over hair. Really? In this quiet toe body hyphen form hype in check boxes on record on this file and open it in. Notepad plus plus. So first of home, I'm gonna give some ender after this. Each paragraph on copy this whole age backup include this radio inputs on bested or here and now instead, off this age. I'm right here, Ward. Hi. Huh, Andi? Now, in this input type radio insert off this radio, we're gonna type JIK books. And now here, instead of this age group, we're gonna be right, something like this. I have, um, vihk and give this input on name this. Copy the stakes and pasted over here because we've warned this checkbook in courts for this Bagram. So I just give this exact matter of name for this import name. And in this two paragraph, I also just copy these checkbook type name and instead of these radio just fits these chick box on her. We just removed this age group and something like Hi. Have Ah, God. Andi in here. I, um oh, on board. Now, save the file and go to our pre colder Don't work on this file to open this up in the browser to see how it looked like. So I'm gonna june it on a little bit so it can be more clear and reveal to you guys. Then head is our chick boxes. What? I have have a bike. I said I have a car and I also have a boat. Or you can select something like I'm a bike and I'm a boat or just have a bike. So if I praise the paid, as you can see, I have a bike. Chick box is by default. Selected. Why? Because we have this check attributes return on this important. So this chick box is default selected. If you don't want this check box surgical selected. Just go to our next leader on. Just remove this checked attribute and save the file and goto our browser and difference the page and hair. It is. As you can see, our default selected textbooks is no gun on. We can selected mentally by clicking on this chick boxes. So in this way we can add check boxes in any estimate pages 35. HTML Forms : Dropdown List: in this video, we're gonna be create a drop down list. So first of all, I'm gonna go to my project holer on, make a walkable copy for these aced email file. Just copied and pasted over here. And rename this while toe body hyphen, home hyphen. Drop down on red. Click on this while and open this up in note. Back trespass. First of all, I'm just open another bag. A bag goes the bad up there. Question on in this bird up check. I'm gonna be just right. Something like what is You're country. What is your country then? You were lined, Brick. And after that, we want to open a new attack called Select. So, Constable, I'm just open my angle bracket and type Select. Give the select attack on name isn't the leg country and close our angle bracket and close the select check first on in the select tech. We want some option which will be dropped down from this list. So we want to open the option tag. The first of all, I'm just a woman. My angle bracket and type option, then option. Have some value. Close the option. Check first soon on in our first drop down option. We want a country name here. Is there on in value? We just I want to put the same name you is there and we want some more options. And Toto three or maybe more option. So just copy and paste the same option for 2 to 3 times on. Just changed this name, toe something like UK. And in this value, we want to put Justin UK on another one is Canada. This is where you just put the same name can order on save the file on Goto our project Fuller double click on this while to open this up in the browser. I'm just Juman a little bit so it can be more clear and you're able to progress on Dhere is our top down list. As you can see, the first option is even say, as you can written in here cause often is, then we have ah, little arrows that it have a dog down. So when we click on this arrow, it have ah drop down. And now we have our tree country list, which is even say UK and Canada, as you can written over here, U s u K and Canada. If we have add more option, let's just at another one. India and in here off the India said the file on Go to your brother refreshes the page on in this drop down list Here is the India. As you can see in this way, you can add a drop down in any estimate home. So this got down is good, but I want something look like more professional. When I look at this drop down, I don't want to like this us they by default, selected from the country. I want something like select from your country from the top down. Then either will drop down this list and select their currently from the drop down. So how I can add the type of text in this drop down, So first of all, I'm gonna go to my text editor on I want to add another option before my country list and just removed this value from here. We don't want any very for this option. Just we want toe add attribute called did the will and we want to add another active you'd call selected on We removed this us A country in him From here on, just add something like elect you're country and said the file goto our brother on request the page. And as you can see here is our dog down with the text which called Select your country hair on when I click this arrow from hell and we can see our country list And as you can see, we could not select this takes form this drop down because we add a visible attribute for this option So districts will not selected from this option. Only this country list will be selected from this drop down which exactly what we needed in this drop down. So in this way we can add a drop down in esteem inform 36. HTML Forms : Submit Button: in this video, we're gonna may look at how to create a supping burden. So first of all, I'm gonna go to my project. Fuller on make a walkable copy for this esteem and file. Just copied and pasted in hair. And it's really too body hyphen form. Hi, friend. Submit and right Click on this file and open this up in note back customers. So most of all, I'm gonna give some enter after this drop. Don't better grow and open another paragraph. Core hours of mid burden. Close the back up the coast. Do you surrender on in the spirit? Hopeless opener. Input bag. Type on in this type attribute. We're gonna be type submit because this is a summit burden and we want when the user click on this button, the home will be submitted. So in the type attribute we type submit next, we're gonna be give this burden on name Britain on a last one. We had a value that's a commit in this value takes will be appear on the button. So whatever you type on this value attribute that will display as a burden text. So just close this input. Andi Steve, over fund Goto are pretty troller and double click on this pilot, Open this up in the browser on here is our burden. I'm just human early Liberte, so it can be clear and more relevant to us. Here is that was submit button. So as we take some name like John from false word select our age didn't select what I have on de select our country as UK. Then when I click on the submit button, that data will be submitted. As you can see, this is suing as a roar Just because off we don't have these homes of may dot PHP as we see on this previous video with it in this forms of Midhat PHP script into our form action hair it is. So when we click on the submit button, that data will be staying toe this forms of my dot PHP So we don't have this home submitted PHP into our project file. So it give us this error when you have this compliment PHP into the fuller, it will poses the data and submitted toe in order service. So in this way we can create a slum. It Burton, in a steam l form 37. HTML Forms : Reset Button: in this video, we're going to look at how to create a reset button. So, first of all, I'm gonna go to my project holer and create a walkable copy for the rest. Email document Just copied and pasted over here. And this. Rename it toe body hyphen form. Hi, friend. Rece it on Redlich on this crile and open this up in no pack plus plus. So first of all, I'm gonna copy this Whole include bag and vested right after it. And we just changed this type stuff May toe type. Where is it? Andi also changed the name toe reset button on value as Chris it Andi, that's it. Saved the file. Goto, put your cooler on double Click on this. Quiet! Open this up in the browser on Dhere is already said button. I'm gonna june it on a little bit so it can be more clear and readable to you guys on here is our visit Britain. So just types them. Name John. Some possible Lord Keep the ages on what I have. Just choose. Just do on what is our country? He was If you want to research this form, just click on this reset button on the formal, very said. So in this way you can create a reset button in any estimable reparations. 38. Embed Sound Cloud Audio In HTML: in this video we're gonna be Look at how toe en built Ah, soundcloud audio into our weapons using Iceman So first off, all I'm gonna go to my project folder and create a workable call before do they steal document Just copy and pasted over hair and renamed a two body hyphen Hyphen, hyphen song cloak that take on this file and open this up in north Back classless. After this YouTube video, my friend on just Gibson center on go to our browser and navigate to soundcloud dot com. And when you go to soundcloud dot com, click on this. Explored that and choose a music from here. Whatever you want to end built in your website, I'm gonna choose this one. So just click on this share button Onda, Click on this Enbrel tab it gonna be sure you some to option with visual inbuilt are a plastic in Bill. I personally like this classic inbuilt. So I'm just like on this classic and build button. And copy this. I've been scored from hair and good or text editor on misted over here on after this YouTube, my friend. I'm gonna just give a line break so it can be. Look much cleaner. Andi saved the file. Go to our project, Fuller and double click on this. Quiet. Open this up in the browser. On as you can see here is our YouTube video on Dhere is our soundcloud audio. If you click on this play button over here, it can be play our audio files. So in this way you can m built us unclothed audio in tow. Rip it. Also, you can adjust the height and wheat for this audio file, Give a height off wounded pixel on keep up with two 4 50 pixels and save the file Go door browser on repress the page. And as you can see, here is our soundcloud audio with our custom height and with if you click on this play button it can play are or you file So in this way you can invest some cloud audio into Whippet using my friends 39. HTML5 Video Tag: in this video, we're gonna be Look at how to emit video in any webpages using estimate five video attack. So, first of all, I'm gonna go to my project cooler and make a local copy for this esteem in a document. Just copy and pasted over hair and rename a toe body hyphen Video on right. Click on this file and open this up in note pad plus Plus. So now, after this audio tech, I'm gonna just give some enter, so it gives us a nice and please peace. Now open up our video tag here. Video on. Also, we need toe add the control. Actually, this carpet from hair and visit here closer angle bracket and cruised the video tag on in this video tag, we also gonna be add our sources as like or do you take So it's day course. Then type. It's ah, See, give the exact part off the video. Just media video dot And before then, you type Which type of video this is. This is the video and before and close this. So stack on. We're gonna be copied this source stack twice as like the old you on change this former for different type of Broza with them. So video with him on last morning or G video. Oh, gee, Andi, that's it. Saved the file Goto our project fuller and double click on this file opened is having the brother to see how it looked like just learning the video on. Here it is. There is our video file. Why this video will not playing Good War Dixit, editor on forward toe eg the video full and then radio. Then we have a video in before files do it or every source. And also we add a line break after this audio tag so video will appear just below the audio plant. I just did the file and good over browser and refresh The page on Dhere is our video. Just click on this play Burton and video will be played. So in this way we can add a video in a esteem a Whippet using estimate Clive video tag 40. Embed Youtube Video In HTML: And this is really gonna be Look at how toe in built a YouTube video using I fan in our weapons. So, first of all, I'm gonna goto our project roller and create a workable copy for this estimate. Documents is copied and pasted over here and rename eight to body hyphen. I fim hyphen. You do on red click on this file toe open this up in note pad crustless. So, first of all, I'm gonna just remove this item tag over hair on goto our browser on goto www dot youtube dot com. And when you go to youtube dot com, click on any videoing that you and milk on your website. So click on this movie Stiller Video. When the video is running this pause the video on Click on this share button on. Then click on this inbuilt Steph and copy the whole Iife in court on Goto Our takes editor and paste the whole life in court. Here, save the file Good over project cooler and double click on this file. Open this up in the browser on here is the video. If you can click on this play button, the video will be playing on your website. You also can adjust the height and width off this video. Just go to our text editor and give a width for it and pixel and give a height for 50 pixel and save the file good over brother and repress the page. And here's that YouTube videos with 800 pixel with on 4 50 pixel height. So in this way you can invent any YouTube videos in whip images using ice cream tag. 41. HTML Forms : Image Button: in this video, we're gonna be looking at how to create an image button instead off this traditional looking defiled Burton. So, first off, all I'm gonna go to my project holer and make a workable copy for this estimate document. Just copy and bested here and rename it toe body hyphen form hyphen. Umid hyphen Britain on rhetoric on this file and open this up in no back plus plus. So in this bag up, we have a submit button and we have our research burden. So now we use images. We use PND images instead off these traditional looking burdens. So I'm gonna go to my text editor, Andi in hair in this type. Attribute instead off the submit. I'm going to write image. Andi, give a source for this image. Is there? See well to condition Andi our image cooler since last and submit dot p and G. That's the loss. The mid Burton's of Midhat PNG on its look It under our image Fuller. So we dive her images last Midhat PNG also for reset. But then we do the scene instead off this reserve, we're gonna live here. You manage on give this image of source condition on image smash research dot is you save the file on Goto our project Holer double click on this. Quiet. Open this up in the browser. And here is our beautiful looking is Britain, as you can see instead off this traditional looking vehicle button. Now we can use thes beautiful PNG images as button. So in this way you can replace this tradition looking buttons with your beautifully designed PNG images. 42. Iframe: in this video, We're gonna be learned. I sin. So first of all, I'm gonna go to my project, Fuller and make a workable copy Corded based email file Just copied and pasted over here and just rename it to body hyphen. I've been on right laconic toe. Open this up in the note back. Classless. So, first of all, I'm just removed this whole form element here. So it gives us a nice and clean space to write our iPhone cords, My friend is usedto emit any content to any weapons. So first of all, I'm gonna show you how toe and male Ah weh pitch contento another Whippet using IFE in. So, first of all, I'm gonna open my eye from tag, Then give us peace and then we need to type. What is the source? So s a r c equal toe double condition. And in this source attributes we want tohave keep the source which we want to embed in this Whippet. So good war project fuller. And let's say we want to add this body happen for my been imaged that button or esteem ill file into weapons. So in the source, we're gonna be tired body hyphen form happen. Image hyping button dot estimates which is exactly the fine name is on clothes. I from Tak see the fun on Good or Project Fuller Double click on this filed open this up in the browser Here is our Iife in says you can see we're now in mill the whole continent from this way site into this website using I friend, This is our iPhone content area on into this content here the whole content from this week's that are being in build. So using IFM tag, you are unveiled Any website toe another website. Also you can emit media like videos and audios. I can cover those topic in our next videos, but for now in this where you can amend any website content into another website using this eye contact. 43. HTML5 Audio Tag: in this video, we're gonna be looking at how to end built audio in a weapon using estimable five or your back. So, first of all, I'm gonna go to my patroller on. Gonna be make a workable copy for this. A steamer document just copied and pasted over hair and renamed a tow barley hyphen. Or do you on right? Click on this while on open this up in note. Back plus plus. So first of all, I'm gonna delete this. I fame home here because we already have a copy off this esteem ill document in our project . Well, so we just removed this iPhone from here. So it was a nice and clean idiot, right? Or or your tag. So, first of phone in its open the audio tag open or angle bracket and type hard to you, then we need to add ah, attribute hair, which is control. Andi grows the audio tech first. So in this audio tag, we need to add the source off this audio files. So open up our source tag and then give the file part. We'll see. Girl, two double condition on. We have our files in media slash or do you slash so dot in a which is the extension of this audio. While we need to clarify this file or your type, which is or do you slash ex isi? This X hyphen A. C is the audio file type. We need to clarify this source for your time so brother will easily understand this audio Former Now those this source stag. It's also so self closing tag. We just close it by. Give up laxness on, then close the angle bracket. We need another two format off this audio client, so just copy and paste the line twice on change this comet. So MP three g, which is the type off this audio former and we need another former, which is, or G and in type. We need to type the audio file type just or G on stupid. So why I have to add this tree line instead off this one line? Because some brother will identify this aim for a former. So when the brother undignified this m for a former, they will play this game for a former and ignore these two former, and when the browser will not identify this in for a former. They will move on to our next former, which is entry tree and played. And when the brother will not underplay this in for a an MP three former, then they will play the GED. Former. So we need to add the different type of format for the audio file for a different type of brother. And now we have to add another line after the store stack, which is your bro's ER does not in the in Easton Little five. Do you creature? So why would write this line when a user use the older version off any brother which does not support this order your tank. This audio format could not be displayed on this brother, but this text will display those brothers so the user will. I didn't required. This is the audio section, but the audio files will not play in their browser because they have a older version of the browser that's does not support the aced email audio features. So just save the file and good or project colder. Don't get Candace filed. Open this up in the browser on here is our audio fine. So when we click on this play button it can play our audio files. So in this way we can add our audio file in a estimate Bridges using estimate five or your tag.