Placeholder Image

Subtitles section Play video

  • Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

  • Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

  • So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

  • Welcome back.

  • As you know, I'm Eli, the computer guy, and in today's class, and when you give you a brief overview of what HTML is hypertext markup language, so HTML is a very necessary a language in order to be able to create websites and Web applications.

  • Basically, one of the things that you have to think about is that if you're going to be building a website or a Web application, you're going to need to know multiple different languages.

  • Eso To create a basic Web application, you'll need to know HTML.

  • You'll need to know CSS.

  • You're most likely need to know Java script, and you'll need to know what's called a server side scripting language, something like PHP or ruby on rails.

  • All of these languages together will then create your web application.

  • This is important thing to understand a lot of new people when they get in detecting technology world of coding world, They always want to know what language or want technology they need to know to be successful.

  • And what I keep trying to explain to people is not one language, right, basically for any of these types of things.

  • In order to actually create a product anybody can use, you probably need to know five different languages.

  • And when we're talking about creating a Web application again, you'll be dealing with a came out CSS Java script, most likely something like PHP or Ruby on rails.

  • To think about it, just you understand what's going on.

  • We're talking about html hypertext markup language you use as language basically to create the structure of the Web page that people are looking at eso.

  • If you're thinking about a building metaphor, let's say you're going to be building a building.

  • HTML would be the rafters for the building.

  • It would be the roof for the building will be the floors for the building will be the foundation for the building.

  • Basically, HTML is what would what makes your website look like a website and gives structure in order to put the other programming languages onto CSS, something called cascading style sheets.

  • Essentially, this is what makes your website of your Web application look pretty.

  • So it's It's what allows you to modify the fox change font color change font sizes?

  • Do that types of things put shapes put shapes on your Web page or when your Web application, where you're going to be placing things like icons and all that kind of stuff.

  • You'll be using something called cascading style sheet in order to do that.

  • Uh, when you think about JavaScript.

  • So Java script is what gives you the real time interactivity on a Web page or Web application.

  • So when you scroll over a menu when you get that automatic drop down that's actually being done by Java script, then you go to the back end programming languages that something like Python are something like python PHP ruby on rails on.

  • Basically, when you create a form in HTML when you hit the submit button, the information that form is then submitted to one of these other scripting language is that that then takes that information and does something such as puts it into a database or stores stores data on a server somewhere.

  • It was very important.

  • Understand, when you're thinking about building a Web page or Web application, you're going to be dealing with multiple languages.

  • Each one of these languages is used in order to complete a certain task on the task.

  • For HTML is basically just to give you the overall structure of the website that people are going to be interacting with so that you can then put CSS you and then put Java script.

  • You can then have that connect that back in programming language, toe, actually create something that is useful to the end user.

  • Now, I'm gonna have to put a warning in here.

  • I'm gonna have to put a warning warning.

  • Will Robinson.

  • If you're hanging around a lot of you know, a freshman in college kids freshman cops.

  • I folks be careful about calling html a programming language.

  • I have a video from like a decade ago, I called an introduction to HTML programming, and it's amazing.

  • 10 years later, I'm still just getting blasted with people saying how ridiculous it is to call html programming language.

  • Don't you know that HTML isn't a programming language.

  • So if you're you're wondering what I'm talking about with this, basically, when you're dealing with html, html is something called a mark up language.

  • There's HTML.

  • There's exam l.

  • There are a lot of other markup.

  • Language is back in the day, and basically again, these markup language is essentially allow you to format documents that will be viewed through things like Web browsers.

  • It is important.

  • Understand, though, that HTML itself doesn't have any of the requirements of a really programming language.

  • Doesn't have functions it doesn't have.

  • If l statements, he doesn't have loops.

  • It doesn't have any of the things that are required in order to be a real programming language.

  • Why some of us old timers?

  • I guess a HTML programming is because HTML is so vital for creating Web applications that do use real programming languages, so Java script is a real programming language.

  • PHP, python, ruby on rails.

  • These are real programming languages.

  • Here's a thing you're going to use HTML forms to submit data to python, PHP or Ruby on rails, right?

  • You are going to create a Web page with HTML that will have Java script embedded in that Web page when you're going to look at a report.

  • So let's say you want to pull a report out of your Web application sales or something like that.

  • Python PHP Ruby on rails that back end that server language is going to pull the information and that it's actually going to be presented to the end user and a Web browser and basically will get printed out in HTML on that is going to be the website that end user is going to see.

  • And so it's kind of one of those things.

  • Just so you know, when people are losing their minds.

  • Diem Al isn't a programming language to be clear.

  • To be clear, HTML is not a programming language.

  • And if you ever get this, you ever get this question on the test say no.

  • It's not the reason a lot of old timers say things like HTML programming.

  • Is it so integral to creating an overall Web application that at the end of the day, it's kind of one of those things.

  • If you're worried about you know whether somebody calls html programming language, you don't have enough to dio eso again for me being an old timer in this doing technology since 1996 back in the late nineties, people used to just say, HTML programming is just what was said right again is not technically correct.

  • But at the end of the day, if you're arguing about it, if that's if that's all you have to argue about, you probably need to start studying and doing a little bit more.

  • So to really understand the power of HTML hypertext markup language, it is good.

  • Understand a little bit of the history that got us to actually have HTML back in the day.

  • One of things you have to understand.

  • So if you're if you're if you're young, especially if you're young or if you're new in the technology world, one of things you may not realize is back before HTML.

  • Whenever anybody or wrote a document using something like a word processor, there was no way most of the time to open that document in another word processor.

  • Basically, the only way to export a document of a word processor was literally to print it out, and then too, imported into another word processor, somebody had to sit there and basically type out what was written eso back in the days again when I was a kid during the eighties.

  • If you had something called Word Perfect if you had StarOffice word way back in the day.

  • Basically, if you type something up in word Perfect, the only way to read that document was to either print it out or literally open that document.

  • And we're perfect again.

  • Remember, back in the day, a piece of software like WordPerfect costs about $100 I was back in the 1980.

  • So nowadays I'll be two or $300.

  • And so one of the really issues there is if I wrote something on by simply wanted to to give that book or give that document to somebody else for them to be able to read, they had toe have the same word processing software to be able to open it up and simply even be able to read the document.

  • Obviously, this was a big problem.

  • S o.

  • The value of HTML was HTML was a way to code documents to be able to write documents and then tow have different vendors, be able, create browsers, their own browsers that were then able to open up those documents so that you could read a document using different people software.

  • So whether you had Netscape Navigator back in the day, whether you had Internet Explorer, whether you had fire Fox, whatever else, if somebody writes a document in HTML, that HTML document can be opened up in different vendors, Web browsers and people are actually able to read the document.

  • That was an incredibly valuable thing.

  • Now again, you know current current day.

  • That may seem like just something that's absolutely common in normal.

  • But again, you go back to the early nineties and there was a big problem.

  • Somebody wrote a document if you didn't have StarOffice cause I had a friend of mine.

  • His father, for some reason, bought star Office.

  • So he wrote all the stuff in Star Office.

  • Nobody could ever read his stuff because it was all in star office.

  • We all had word perfect, right, that that was a big problem.

  • Uh, the other valuable thing with HTML was again back in the day when you're dealing with word perfect.

  • A lot of these old word processors is there is no easy way to do things such as ad images, images, gifts, J pegs, especially not video or any of that kind of thing.

  • And so what HTML allowed people do, is they?

  • It allowed people to be able to create these multimedia documents.

  • So not only in the document could you have it written out in text, but you could have pictures again.

  • Macy may seem like who the hell cares now, 20 some years ago, having pictures like real pictures and documents was a big deal.

  • Also being able to do things such as below play videos or be able to play music or podcast again, having all of that embedded in one single document and then having other other vendors browsers be able to see and interpret that document was a very valuable thing.

  • So that's That's why HTML was valuable from a historical context on dhe, why it really took off and became important.

  • So now with that history, let's start explaining some of the problems that came from that history so that you understand some of the issues that you might be running into if you if you're developing an HTML and you're dealing with different Web browsers.

  • So one of the big problems in the technology world is whenever there is an open standard that comes out all the major vendors trying to re close that standard.

  • Basically, you know, you have these thieves, social justice people out there and they're like, OK, we're going to create a free, open standard that anybody can use And then all these major corporations come in.

  • Basically, they take the standard, and then they start adding their own weird little bits to then try to make it proprietary again.

  • We had this problem back in the mid to the late nineties, when you're dealing with HTML and when you're doing a live Web pages.

  • So when you're dealing with a female, basically, how you form at the document is using something called Tags.

  • We'll talk about this later.

  • H one tags P tags.

  • You know, image tags, that type of thing.

  • Well, one of the issues that we ran into in the nineties is many of these larger corporations.

  • They would start creating Web browsers on, and then they would have their Web browser be ableto understand certain tags that other Web browsers didn't understand.

  • So if you wanted.

  • If you want to text a blink.

  • Oh, thank golly it's over.

  • The nineties were horrible.

  • Web development in the nineties just made some of the worst, worst Web sites in the world.

  • But if you wanted your your your text to blink or if you wanted your text to scroll, if you're wanting your text or things to do, do specific things.

  • It was very interesting.

  • Was back in the day.

  • Netscape Navigator would use specific tags and order to allow those things to happen.

  • Internet Explorer would use a specific tags to let those things that happen.

  • And when Firefox came out fire, Fox would would understand specific tags.

  • And so you ran into a problem.

  • Were these different Web browsers would understand different tags.

  • And so that's why it was important whenever anybody was creating a Web application or a website that they would open the website and multiple different browsers to verify that the HTML that they had written would actually show up in each of the Web browsers the way that it was expected.

  • Not only that, but one of the problems is when you're thinking about formatting right.

  • Basically, when you format in HTML.

  • Again, you're just using these basic tags.

  • H one ties H two tags, 83 tags, Pete tags, that type of thing, right?

  • There's no additional format in basic h came out.

  • There's no or very little additional formatting that goes along with those tags.

  • And so basically, all that formatting is actually built on the Web browser itself.

  • So, again won.

  • The problems you can run into is you can have Netscape Navigator interpret and 81 tag differently.

  • Then how Internet Explorer would interpret in a nature won tak, which may be differently than how Firefox would interpret in h one tag And now how safari and how chrome and how all these different browsers may interpret in H one tag.

  • And so one of the things you have to be thinking about when you create a Web application or when you create a Web page is realize that when these different browsers are opening up the exact same HTML document, they may be interpreting that HTML document differently.

  • Based off of how, however, the Web browser was coded.

  • So this is a very important thing.

  • Now again in current time, modern modern times.

  • It's not nearly as significant as it was again in the mid nineties was really horribly.

  • It was so bad, literally certain browsers came up with their own tags, and things wouldn't work literally wouldn't work on other browsers.

  • That's not the same world that we're dealing with today.

  • But it is important to know that when you open up a Web the exact same Web page, whether it's if you open it up in safari whether you open up in chrome, Internet Explorer or whatever else, you may actually be looking at a document.

  • The end user may be looking at a document that looks slightly or even possibly significantly different, simply based on how that that that Web browser interprets the HTML that it's reading.

  • So that's something to be thinking about whenever gonna be creating Web pages or Web applications.

  • This is where people talk about having virtual machines on their computer, so if they're they're Web developers, they may actually run multiple virtual machines on their computer.

  • They may have multiple versions of things like browsers, so I don't know.

  • Let's say we're dealing with Google Chrome 20 now, so they may have Google Chrome 20 and Google Chrome 19 Ang Google Chrome 17 and group, Google Chrome 16 and Safari 10 and Safari eight and Safari nine.

  • And so on so forth.

  • They may have all of these different versions and types of Web browsers simply to verify that once they've designed the Web page that they designed, that will actually show up in the Web browsers that in the way that they're expecting one of the problems you can run into real world is you have your default Web browser.

  • You have the Web browser you prefer again, whether it's ah, Firefox or Chroma safari or whatever else one issues you can run into is, if you're developing in HTML page, you're developing your overall Web application.

  • If all you uses whatever your default browser is in order to see and interact without Web page there, maybe major problems that you're not seeing that are showing up if people try to use chrome or some other Web browser in order to view or interact with Web page.

  • So that's something that you need be thinking about when you're dealing with HTML and these Web technologies.

  • Now, one of the nice things about learning HTML is you need nothing fancy.

  • Nothing fancy at all to learn.

  • Hmm.

  • Oh, this is the poor man's coding language, I suppose.

  • Eh?

  • So if you want to be able to write HTML, all you need is a basic text editor s.

  • So if you're in oh, the Windows world will be note pad.

  • If you're in the Mac, where will be text at it?

  • If you're in Lenox World of BG Editor them or something like that?

  • Basically any text editor?

  • Well, d'oh, you're just going to simply be typing typing out text in order to form at that text, you're going to be using something called tags.

  • We'll talk about Maur later in a different class s.

  • So in order to write HTML, all you need is a basic text editor, and you can learn a team out beyond that in order to actually be able to view the results.

  • The other good part is you do not need a server.

  • You don't need to share it.

  • Hosting plan.

  • You don't need to spin up a Lennox box.

  • None of that basically remember HTML documents are simply documents just like pdf, um, or, you know, image files or anything else.

  • s O.

  • What's cool about HTML documents is literally you can co you can write out your HTML using text, a note pad or text edit.

  • You can then save that file as a dot HTM or dot HTM l file, and then you can simply double click.

  • And that document will then open up with whatever your default Web browser is, so you can see what the results are.

  • S Oh, that's one of the nice things with HTML.

  • And again some of these other Web programming languages, such as Java script and CSS, is that you need nothing fancy in order to learn these languages.

  • Basically, all you need is a text editor, uh, and again to be basically, save save the file with dot HTM or dot html.

  • So with that, let's go over to the computer so I can actually give you a demonstration.

  • Give you an idea of how HTML looks a little bit of how HTML works, how you will save an HTML document and then how you'll be able to open up in your Web browser.

  • So here we are at my computer again.

  • I have a Mac book, but you could be doing this on Windows or Lennox or whatever else again.

  • All we need is a basic asking editor note pad text that it g et it.

  • Whatever you want, eh?

  • So I'm simply going to open up text at it here, and I'm simply going to do a new document.

  • And here I've just got a blank document.

  • So in order to understand how HTML works, just realize that HTML essentially uses tags to explain what information within an HTML document ISS s O.

  • If you want to get fancy about it, basically can open up attack.

  • So this is opening up the HTML tag.

  • Then we're going to open up what's called the head tag.

  • We don't need the head tag, so we're just going to close the head tag.

  • Then we're going to go down.

  • We're going to open what's called the body.

  • So basically, the body, this is where your actual document will be once the body is opened.

  • Basically, we'll just simply d'oh uh, h one tags is called a heading one tag.

  • We'll talk about this later and will simply say hello, world.

  • Uh, exclamation, Where's my exclamation mark?

  • Exclamation, exclamation, exclamation!

  • And then we're gonna close the H one tag.

  • So basically, when this opens up in a web browser, this will be big and bold and will say a hello world or pretty big and bold big in Boldon.

  • Then we're gonna go down and we're gonna use something called the P tag.

  • This is just a paragraph tag for some other information.

  • And we're just going to say, Isn't this cool?

  • Couple more exclamations than we're going to close the P tag.

  • Then we're gonna go down.

  • We're going to close the body tag.

  • So this is the end of the body part of the document.

  • And then we're going to close the PML tag to say that this HTML document is done.

  • So basically, just just to give you a basic understanding of how HTML works, what you're doing is you're using these tags.

  • And so what you're gonna do is you're going to open a tag and then you're gonna close attack.

  • So html tags for the entire document, the head tag basically within the head of the HTML document.

  • This is where you put information that pertains to the entire HTML documents.

  • You can put things like the title there's a title of a Web page would actually be up in the head.

  • There's some other things.

  • Then you come down to the body.

  • The body is the actual document that people will be reading.

  • So when they open up this Web page, this is what they'll see on.

  • Then we can see again.

  • There's different formatting tags for the text.

  • There's H one times 828384 There's Pee tags.

  • There's other tags.

  • And so basically, this is a heading tag.

  • It's going to say hello world, and then under that and pretty normal type type, it's going to say, Isn't this cool from this point?

  • We just simply go up.

  • We do file, and then we're going to do save.

  • Now.

  • It's very important.

  • It's very important at this point.

  • You don't fat finger it, and you actually give the extension that it's supposed to half.

  • So with this, we're just going to call it a test document, and they're going to test dot and it can either be a T M or HTML.

  • So a GM or HTML.

  • Basically, those extensions are opened by whatever your default Web browser is past that you go down, you can say where it's going to be stored.

  • We're just gonna dump it on our desktop to make life easier.

  • One of things you need to look at is depending on what text editor that you're using.

  • It may try to add a dot t x t at the Esso.

  • I had this problem back in the day again trying to learn HTML.

  • And so I do like test dot html and I'd save it.

  • And then I'd have problems because because basically the text editor that I would using would save it as a task dot html dot t x t.

  • So that happens to you.

  • You need to get rid of that dot t x t The end of it needs to be dot HTM m a ke m or dot html.

  • Then we can hit save.

  • Oh, and when we hit save, we can see it now has shown up here on my desktop again.

  • No server software.

  • I don't have any special things installed from there.

  • I can then simply double click and open it up.

  • So it is now opened up in safari.

  • And so what we can see is it says in big and bold Hello World.

  • And then in smaller paragraph, it says, Isn't this cool again?

  • We can open this up in different Web browsers.

  • So if I go so basically I'm doing a right click here I can do open with and so I can open with in Google Chrome and we can see in Google Chrome.

  • It basically looks the same.

  • And so this is what you would be doing if you're building a Web application or an HTML Web page, what you would do is you would open it up and multiple different Web browsers just to verify that it looks the same.

  • So this is a basic idea of what HTML isn't kind of sort of.

  • How it works again in the rest of these classes will go Maur into what all these different tags dio on really teach you how to build a basic HTML Web page.

  • Now they have a bit of an understanding of what 8 p.m. L.

  • A.

  • Isn't why it's important.

  • One of the cool things to know about HTML is that it's a very simple coding language, so basically everything you're going to be doing in HTML is going to be related to tags again.

  • So tags for whether text is going to be heading big and bold, or whether it's going to be normal size.

  • Whether text is going to be a hyperlink, whether something is going to relate to an image file or something like that.

  • Basically, everything within the camel world is simply done through tags.

  • So the important thing to understand is that if you're trying to figure out how to do something with an HTML document, most likely all you need to do is figure out what tags you need to use and so you can simply go to Google, type in a Google search and try to see if there was a tag that allows you to do whatever it is that you're trying to dio.

  • And then you can go and figure out what the tag is and what the sin taxes, one of the websites that I like to go to for a basic references.

  • Something called W three schools.

  • So let's go over to the computer for a second just to show you this Web page because, especially in the beginning, I think W three schools is a great resource to go to and just see what all your options in a key mlr So this is w three schools dot com Basically, this is their HTML section.

  • So if you've never been to w three schools dot com before I highly suggest you go, they have a Kim L.

  • C s s JavaScript, python, blah, blah, blah.

  • And it's all free and it's all open.

  • They even allow you to try things for yourself and play around.

  • But for this particular Siri's will be looking html and so what you can see here is they have a lot of the different things that you could do an HTML again that I may not be talking about in my Siri's of classes.

  • So they talk about the baby basic introduction here they talk about again that had the html, the head, the title body, so on and so forth.

  • But if you go through, you can take a look and you can see how to do different things.

  • So html comments s o.

  • If I haven't taught you about how to do comments and eight e mail, which I probably won't, you can come here and again.

  • Basically, you see how the HTML comet tags work.

  • HTML lists.

  • It shows you how the different lists work in different options that are available to you.

  • If you want to do I frames, that's there.

  • If you want to do blocks that's there, and basically what you can see is in the HTML world, all you're dealing with is you're dealing with these tax.

  • You open up a tag and then you close attack, and then whatever is in the middle s so you can come and again they've got information for forms.

  • Html.

  • Five.

  • We'll talk about later graphics, video files, AP eyes, all that type of thing.

  • So if you're trying to figure out how Thio build something into your Web page and I haven't talked about it, definitely come to W three schools to take a look.

  • Because again, there's a lot of interesting things nowadays that you could do, such as geo location that's actually built into HTML five Now, to really be able to give your application a lot of functionality.

  • So there you go.

  • There's a brief overview of what HTML is and why it matters to you again.

  • HTML is one of those languages I would argue everybody needs to know.

  • There's a lot of folks out there.

  • There's a lot of politicians out there that say everybody needs to learn to code and I would say is a technology professional?

  • I would not agree with that.

  • I don't understand why everybody needs to know Java script or everybody needs to know PHP.

  • I really don't understand why everybody needs to know if else statement.

  • But what I will say is everybody probably does need to know.

  • Html HTML pops up in a lot of ways in the modern world again A lot of times when you're dealing with a Web documents, now you're actually looking at an HTML Web page, even for things when you're writing Web documents.

  • So if you're going to go into WordPress, right?

  • So a lot of people use WordPress.

  • There's a what's called a busy wig editor.

  • What you see is what you get editor, and you can type out your document.

  • But what you have to understand is that was the wig editor is basically turning what you're typing out into a T.

  • M.

  • L on the back end, one of the issues you can run into some of those Wiz e wing editors.

  • They forget Thio close tags or they leave tags in.

  • And basically, sometimes those with the wig editors can actually make a mess of the back end code.

  • And when you go to look at the document, what you see is not what you get your you look at what you typed and you look at what you're doing out on the Web browser, and those two are not the same.

  • The reason is that was your wig editor screwed up when it was creating the tags or deleting tags for the back end.

  • And so, if you go when you take a look at the source and you know how they came out works, you can look at the source for that age, came out and see where one tag wasn't close or a tag was an open or where these little snippets of HTML have been left and they need to be removed.

  • Literally.

  • You could just go in.

  • You can clean that out on your document, will look how it's supposed to again for me knowing how HTML works many times actually easier for me to go take a look at that HTML code and modify the HTML code directly, then try to deal with that.

  • Was the wig editor trying to figure out what blood and I'm supposed to click on what I'm supposed to highlight and all that that can actually end up being a lot more complicated than time consuming versus simply going to the source finding finding the paragraph that I'm being Lee with, make my little modifications there and be done with it.

  • So HTML is important.

  • I would argue for almost anybody again, especially working in the business office technology world.

  • And so we're going to be teaching you the basics of HTML in this particular track.

  • So has always enjoyed doing this video and look for D.

  • C on the next one.

  • If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

  • Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.

  • Example.

  • All of that is freely available and in front of the pay wall.

  • But if you want to watch opinion videos, or if you want to be able to comment, you do need to become a member.

  • Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.

  • If you don't want to become a member, you just want to give a one time donation.

  • There is also a donate button where you can do that.

  • Please understand.

  • In order to provide the education that I am.

  • It does cost money, servers, cost money, equipment costs, money, travel costs, money.

  • All of these things cost a reasonable amount of money.

  • And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to.

  • So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it