Build Your Own Business Website header image

Introduction to Basic HTML Syntax

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member asks for a brief introduction to HTML and its basic syntax. I discuss what makes an HTML page, the HTML, head and body tags. Then I discuss the primary HTML elements, heading, paragraphs, lists, links, images, divs and others.

Video Transcript

Good evening everybody and welcome to the Wednesday evening live call in answer session. Thursday morning for those of you down under and tonight, we are going to start off with a question that I got from Jared about sort of basic HTML terminology.

And so, I’m going to just give you a short little run down of HTML and HTML structure. And it starts off with an HTML file. I’m going to create a new HTML file here in this dummy project using NetBeans. If I say new HTML file, name it after Jared. You’re going to see it’s going to create this thing for us.

Okay and so, this is sort of the basic structure of an HTML file. This little piece of comment text here was placed there by the template that created this and it’s not a necessary part. The doc type HTML is a method of describing what version of HTML is being used on this page and what the standards are supposed to be. And then you have the HTML proper. Now an HTML file is a file of code that is wrapped in HTML tags. So this file here starts off with an HTML tag and closes with an HTML tag and everything inside of that is HTML code.

Now generally speaking, it is… there are 2 elements to the HTML page. The first one is the head and the head tag and the 2nd one is the body. Inside the head is all of the preliminary stuff that you put into a page before it gets displayed. So for example, here’s a meta tag for content type. There’s a place for the meta title. You know, there’s all kinds of things that go inside of the head tag and then inside of the body tag is everything that is supposed to be displayed. So that is an HTML page.

Now I’m going to show you a more complicated version of this. In the real world, we’re going to look at this page and if you view the source of it, which you do by right-clicking and then selecting View Page Source, this is the HTML that is generated to create this page. So WordPress and Thesis work together to create this HTML here which is rendered as the page. And so, there’s your doc type up at the beginning and here’s your opening HTML tag with some other information there. And down here at the very bottom is your closing HTML tag. And then back up here at the top, you have your head tag and again, there’s some more information, profile information. And then you have meta tags like content type and title and robots and the description. And then you have all this little links that get it out in for style sheets and then you have… well actually, there aren’t any here but if there was javascript that would be added to that page, it would be added here. Stuff like that.

So that is the head tag and then you have the body tag. And the body starts just below the closing head tag and it ends just before the closing HTML tag. And so, and everything that is inside of this body tag, from here…from the closing body tag to the opening body tag up here is what is being displayed, okay.

So now, an HTML element is a piece of HTML code that starts with an opening tag and ends with a closing tag. So for example, this… yeah, here’s an example. This is a list item. It starts with an opening tag LI and then it’s got all of its class and id information and then it wraps a link and then some text in the closing link tag and then the closing LI tag. So you’ve got this LI item which is the whole thing. Inside of that LI item is a link item starts with the opening a tag, it has this content and it has closing a tag. Each one of those 2 things is an HTML element.

And HTML elements have a whole bunch of different pieces to them but most of them, you’re probably already familiar with…for example, heading tags. Heading tags either start with either h1, h2, h3, h4, h5, or h6. Those are the standard headings. And so, you have an opening h1 tag here and then the closing h1 tag there. This is the heading 1 and this is the content of that heading right here, in between the tags. So you have h1 with an id of tagline and then there’s the closing h1 with the content in between those 2 HTML tags.

Okay so then, same thing is true for paragraphs. Paragraphs start with a P and so here’s for example, a paragraph tag. It’s P with a class and then it’s got content in it and then it closes with a P. And so, most of an HTML page that you would create in WordPress is you know, series of P tags or paragraph tags wrapping around text.

The next thing is the links tag. A link is something… it’s a hyperlink. It takes you from one place to another. This is an example of a hyperlink. It’s the a tag so this is a with…there’s the link it’s going to and then it has the content of the a tag which is comment or one comment. And then it has a closing a of the a tag. Everything between the opening a and the closing a is a content of the link and that’s the part you would actually click on to go to a link. That’s a link tag.

You have images which we don’t have any in this page but the images are an HTML element. You have lists that are HTML elements. There are 2 different kinds of lists. There’s the unordered list and there is the ordered list. Unordered lists usually have the bullets. Ordered lists usually have numbers. And almost all menus that you are familiar with are actually unordered lists. So for example, right here, that’s what we’re looking at right now. These LI items all start off with the class of menu. So UL id menu, main menu. This is an unordered list from here down to there. Yeah, I think it is right to there. From here to there… no, it keeps on going. Pardon me. Keeps on going all the way down to here as the menu which is the UL tag and then the LI tag’s inside of it.

And then we have divs.Divs are something we’ll work with a little bit tonight probably. A div is just a like box, it’s a structure. So it doesn’t actually display but it contains stuff. So you’ve got div id header, it’s the structure of your header. It opens here and it closes here and this stuff is contained instead of div id header. And then you various other HTML elements like forms and tables and inputs and things like that.

But that’s sort of the basic HTML terminology or the basic way in which HTML elements are created. And you can… if you want a good reference, I strongly suggest w3schools.com. If you watch me very often, you will notice that I refer to this all the time. And w3schools.com is a very good reference for bits of code and if you’re looking for a one page reference, you could go to learn HTML and scroll down here at the bottom where they have… oh pardon me. I’m sorry, you go down over here to the references and you go to HTML A-Z, I think. HTML references… well, you know, I guess they don’t actually have an A-Z as a reference list. But you know, you can see, looking at the basic tags and you can wander around through this to get a sense of you know, how HTML works and what those different things mean. So if you have questions about definitions of things, w3schools is the place to go and I use it for both CSS, HTML. I don’t use it for php because the php that’s in it is focused on wild php and we use WordPressphp which is sort of a confined version.

And so… oh Jared says w3schools does have a quick list at the bottom… oh yeah, look at that. There it is. So… shoot. I could have used this as my outline. Anyway, so that’s a little introduction to HTML and this is HTML 4. There’s actually an HTML 5 which is in the process of being adopted and we’ll talk about that another time.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment