<a><button>HTML Tutorial</button></a>
				
			

Video Summary

This is the button element. This is where we’re going to be able to place a button to our website using the button tag. I do want to have a disclaimer on how we are setting this button up. We are setting this button up as a navigational button. So we can take people from one page to another. But the way we set it up is a little bit different because we are also using in a tag a link tag. So basically what we’re trying to do is we’re setting up a button element and then we’re wrapping that element in. The reason why we’re setting it up like that is because the button element is really made additional functionality. 

And that’s really for what high level developers are doing because they can add different tasks and functions to when someone clicks on that button. So if you think about if you go to a web page and you see a contact form, and they’re asking for your name, email and phone number, when you put that sign up button, you know, not only is your information getting stored but you’re getting the confirmation email to let you know that your contact form once through, there’s a confirmation email that gets sent to the business owner to make sure that they know that you’ve reached out and there’s a lot of different motions that go into just clicking that one button and that’s why there’s a lot of additional stuff that we were not going to go over and again this course is just to figure out just enough about, you know, web development to be able to build my high quality high internet website for you and your business. 

So our workaround with this is that we’re basically just going to use a button tag to be able to place a button on the left side, and then we’re wrapping that in a blink tag, first hop over to postman, and let’s start playing around with it. So right now I have in my HTML, the button tag just has HTML tutorial, and we have our closing just without any styling, and this is what our normal HTML now, if we click on this button, if we hover over it changes color a little bit that’s just built, very plain built in styling the HTML has, but what we want to do is we want to make sure this button goes and delivers us to a nother layer. So what we’re going to do over here is I have my h ref tag with just my nfl.com URL. 

We’re going to copy the ending tag right here where the button ends. And now the button still looks the same. But now if we click on it, we go to nfl.com so there might be some times where you want to have like your own unique buttons that you want to style on your own. And I do this a lot to where we you know, I can simply place a button and then wrap the link around it. There is when we do start getting into CSS stylings. 

The one cool thing is is that we might not use the button. We might just use our let’s say if we had to say if we don’t have the button. We just have our we just have a link here. But we could essentially use this and potentially put a border you can barely see it but let’s let’s take this and let’s take on and make this 15 pencils. Let’s think that a little bit larger for you. Let’s put some margin around it. Let’s just say now I’m going to go over all of this with you guys too. But as you can see, I can transform this into like a five. 

I don’t want to go through all of it. But this might be another way to go about it. Right so when we start getting into CSS, a lot of times I would rather take in a reference and make it look like a button then use an actual button tag. But either way works and when you’re starting off being able to just place a simple button into your site and then wrapping that the link is very helpful as well. So I hope this helps. And we go on to more of a couple more of our HTML elements. And these ones are really going to be how we can group and structure elements together. And then we’re going to move on to CSS and how we can start styling and we can do a lot of cool stuff that I just did. Alright, see you in the next lesson.