Introduction
welcome to your very first tutorial on beginning HTML. HTML is the bedrock of the world wide web and if you're going to do anything even in other languages involving the web it is highly important you know HTML.So let's take a look as some of these bullet points and again this is an introductory discussion in the next article we'll actually start doing some code.
- HTML
- HTML is a document that contains text
- Web browsers read HTML documents
Now as you can see in that first bullet point HTML stands for hypertext markup language and you might say wow what is that but it's actually very easy to use HTML. HTML is a document that contains text that's it it's very easy to read. So it's not like Java which kind of reads like hieroglyphics. HTML is just a document that contains text so it's similar to like Microsoft Word or even notepad or Word-pad. So again it's very easy to read now once you've create your HTML document web browsers can read and display documents that contain HTML. So Firefox Google Internet Explorer they all do the same thing. They're going to take that document and display it to the user.
So let's move along to the next section. So it's all about tags in HTML.
- <>- Angel brackets contains tags of HTML
- <Body> something inside here </Body> - Markup Element
- <BR> this is line break - Empty Element
As you can see in that first bullet point all tags have angle brackets so in that next bullet point this is a body tag right here with its two angle brackets and so that by itself is a tag. Now every tag has a closing tag which is right here and then we put something inside those tags. So it's like the yin and the yang of the universe. If you have an opening tag you got to have a closing one and the closing one right here is identified by this slash. So it's that simple there's a start and an end. So one's a start tag and the one with the slash is the end tag. Now together with all the tags and whatever we put inside those tags they are called in markup element and so basically a markup element is a set of tags that has something that goes inside of it. Now I also want to point out here is we're just using the body tag as an example we'll be going over many other tags in the other various topics. Now most of the HTML code that you'll be doing always has an opening tag and an end tag but there are a few tags where you don't need to have an end tag and those are called empty elements and we can see this in the next bullet point. So if you look at this particular type of tag it has BR there and that stands for a line break so that means you're basically putting spaces between your lines. That's all that does but we don't need to put anything inside that it's just creating a line break so it doesn't need an end tag so that's why it's called an empty element. So that's basically it. It's those two type of elements that we're going to be dealing with. What do I need to download for this series and the answer is nothing all you have to use is no pet remember an HTML document is simply a text file. So all we really are going to need for this series is no pad. Now if you want to use another type of text editor that's certainly fine you can use notepad plus plus if you want to follow along now if you want to go ahead and use other solutions such as visual studio or Dreamweaver to follow along in the entire series you can certainly do that as well but I'm just going to be using notepad.
Creating the first web page
We discussed about what you needed and I said that all you need is notepad. So so you should go ahead and open up notepad that's all you really need to follow this series. Now if you have other editors you can go ahead and use those as well. So in this section we're gonna create our very first web page using HTML. Now web browsers can display a lot of different documents. It's not just HTML they can display SVG files XML files. So the very first thing we have to do is tell the browser what type of file this is and we do that by using the doc-type declaration. So this really isn't a HTML section it's just a declaration and we're telling the browser exactly what to open here and so let's go ahead and type in doctype HTML and we put an exclamation point there we've type in doctype and we type HTML and it's that simple. So the browser moves in a top-down manner so it'll hit this first it'll realize that this is HTML and that's the language that it's going to use to render the web page. Now it used to be in previous versions of HTML such as 4.01 you actually had to type out the version here and while that might not seem like a huge pain. It becomes a pain if you have hundreds of web pages every time there was a new version you had to go out here and put the new version in so if there was a you know 4.5 you would have to come in here and go ahead and update that and that became a real pain. So somebody came up with a brilliant idea that if you put HTML there it'll load the most current version and the current version is 5. So yes we're going to be using HTML 5 in this tutorial and what's nice about this is if an HTML 6 or an HTML 7 or 8 or 9 comes out in the future you won't have to come back here and change this. You'll be using the very current version of HTML. Right now we're going to be using the current version and if there's an HTML this code will still be relevant it'll still using HTML 6. Now the very first thing that comes after the doctype declaration is the HTML element and we create that by typing in HTML and then if you'll remember from the intro this is the opening tag and we need a closing tag. So we put a slash here now this really is not a section of our HTML document it's more like a wrapper and that is everything in our document. We'll go between this HTML element between this opening tag and this closing tag but you really can forget about this because this I like to think of this as kind of a behind-the-scenes thing is not really something you need to be concerned about. It's just kind of like a starting and ending point that tells the browser where the HTML starts and where the HTML ends but again you can kind of forget about it. Let's just create some spaces here and there it is okay so there's not a lot of action going on there. We just need those and that's that and again it's really not a
section it's more of a wrapper where we put all of our code into.
First real section that we need that comes after HTML is called the head section and you guessed it we need a head tag and we need a closing tag which will make up the head element and so we put our usable slash here and now we've got our first real section. Now this is also not a huge section that you need to be concerned about we'll be using this section a little bit more in the future but this isn't again a real critical section but we will do one thing today here. Now the head section contains a lot of information about the page itself and so this is stuff like the title of the page that's actually the only thing that you'll really display here is the title of the page that goes in the top menu and we'll do that in a few minutes but also can be used to identify the language of the page like if it's in Swedish or French German and so on. Now there are also some other areas that we'll get to in the future we don't need
to be worried about these right now but there are something called meta tags. We'll get to that at a later time you also put in some of your JavaScript references here but we'll get into that later as well but for now we're just gonna put the title element inside our head section and again the title element is what shows up in the title bar of the web browser and we'll see that when we render this page a little bit later and so within our head element we're going to embed another element and you guessed it it's called title and we're gonna go ahead and just say my web page whatever that is and then yes we need a closing tag and now we've got our title element and we've got our title that will be displayed.If this was the web browser would be displayed up here and we'll see that in a few moments so that's all we need to be concerned about right now and let's move on to the body section and this is where all of the action takes place. This is really the heart and soul of your web page and it needs also a closing tag as well and so again it all happens right in here. This is the primary section of your web page and pretty much everything that's between these two tags in the body element will show up on your web page with a few exceptions of course. This title up here will actually be displayed on the menu bar but everything else that's displayed to the user will be done within the body element. Now we need to insert something within our body tags we're just gonna insert some simple headings and some simple text that's all now. Obviously later on we'll get to images and hyperlinks and a lot more but now we're just gonna insert some simple text along with some simple headings. So the first thing we need is a heading and you use the H tag for that and it's h1 and then we're gonna close that tag as well. What this does is we'll create larger text because this is gonna identify a section of our website. So we're gonna call this the fish website. Again that's the text for our header and so all the text will be contained in there for our header.
Now we want to say what this website is about and so let's use the P and to create that go ahead and create a P tag and we'll create an ending P tag and what the P element does is it creates a paragraph and obviously it stands for paragraph for any text that we want to put in a paragraph. So we're gonna say welcome to the fish website everything you want to know about fish is in this website. Again this ending tag says that the paragraph ends here and it'll go on to the next tag which is going to be actually another header because we're going to identify another section of this website so we're going to go ahead and use the H tag but in this case you make this h2 and what this tag does it's text is a little bit smaller because this isn't the main section it's just another section under this section.
So you'll notice that the text within this element this h2 element will be a little bit smaller so we're gonna say this is a section on bass fish and then we'll go ahead and just go ahead and close this out with h2 and then we're gonna go ahead and create another paragraph head and create another paragraph with text. Now let's go ahead and render this and see how these headers and paragraphs are displayed in our first web page. So you want to go ahead and hit save as and we're gonna call this test dot HTML and then we'll go ahead and minimize this. Now all you have to do is go ahead and double click our HTML file and there you see we have our first web page and you can see here the h1 tag formatted it with the largest text and then here is our paragraph and you can see it made it just regular size. Now I'll show you how we can adjust the font size here it creates a standard font size for this paragraph and then we created our second header which is right here and you'll see that it's a little bit smaller than the text up here right the text size up here it's a little bit smaller and then we had our other paragraph in which we said bash fish live in lakes and so this is the very first webpage. Now we're going to explore many more HTML tags this is just a bare-bones site but I hope you get the idea. Now how then structure works in HTML that's the basic structure and if you can understand that you're well on your way to understanding HTML now I will point out that this is a good way to test your HTML. Now we can just double click on the HTML file on our desktop and do the testing here and that's a great way to test your HTML to see if it works. Now I just want to make a couple more points before we close this out you'll notice that under the header sections here the H tags will format the text with bold so you can see that right here this text is in bold both headers do that and of course you can see the title that we added my web page.
No comments:
Post a Comment