Placeholder Image

字幕列表 影片播放

  • 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 am Eli the computer guy, and in today's class, we're going to go over the basic syntax structure of HTML.

  • So html hypertext markup language is the basic language that you're going to be using in order to be able to build your websites.

  • The nice thing about HTML is that it's very relaxed in a lot of conventions, so it doesn't care about things like capitalization or white space.

  • But it does care about tags within an HTML document.

  • Everything has to be enclosed within tags.

  • And so today I'm going be showing you how that tag system works and why it's important.

  • So there's a bit of a warning warning for the class today, especially when you go to do further research to learn more about the syntax of how to design things in HTML, there've been two major versions of HTML over the past 20 years.

  • There was HTML four, and there's now HTML five.

  • What I'm going to be showing you today is very much in the old HTML for mold, and the reason is is because I feel that this is an easier way to teach HTML two new students.

  • The thing is with HTML five, some of the things that will be showing you today have been deprecate ID, but but but modern Web browsers are fully understand html four.

  • And so what I'm showing you today will work on any modern or old Web browser.

  • But it is important, understand, when you go out there and you start doing some further research toe, learn about HTML.

  • Syntax is you will see notations talking about the differences between HTML four and HTML five.

  • It is important, understand, there are two different versions of HTML, but this isn't like python.

  • This isn't unlike other programming languages, where when a new version came out, the old way was completely deprecate ID.

  • We're in this weird thing with HTML, where you can code in a cm afore you can code in html five and more or less browsers will understand what is going on.

  • So what?

  • I'm going to be showing you today like gonna be showing you things like the head tag.

  • So in html five, you don't necessarily need to use the head tag.

  • But I think this is an easy way of explaining to you how an HTML page is broken broken out on.

  • Then in the future, you can decide, You know, basically, which way you want a coat.

  • So that is just a bit of a warning.

  • What I will be showing you today is very much in the HTML for vain, but it's going to work for most of the things that you're going to need it for.

  • So really, the best way to start understanding html really is to dive right in again.

  • This is a very, very, very simple markup language.

  • What I'm gonna be showing you today is the basic layout of an HTML page.

  • I'm going to show you the head, the body and how do you close everything in HTML tags?

  • I'm then going to show you how tags works.

  • Basically, how to open a tag and how to close a tag.

  • And then I'm going to be showing you some certain things, such as the fact that capitalization does not matter came out.

  • So this is very important when you're dealing with HTML a lot of times again.

  • When you're when you're reading references, you'll you'll see things that are capitalized to see things that are lower case.

  • It is important to understand.

  • In the HTML, world capitalization doesn't matter.

  • This is kind of one of things that screws up old timers like me because back in the day are back in the day when I learned HTML.

  • Whenever you're creating tags, you capitalize those tags and easy way of understanding where the tags were as you capitalized all the letters and a tag, and so you could very easily be able to see that on a pig.

  • Now, in the modern world of the young, kids out there have decided they don't like capitalization on.

  • So now tags are all in lower case.

  • A CZ faras Web browsers are concerned.

  • Web browsers honestly don't care about this.

  • It's all just depends on what you decide to type out.

  • So this is kind of one of those things again.

  • It's a star.

  • It's your your decision.

  • What the style is, what whether you do capitalization, whether your lower case, the main thing is, is just stick with whatever you decide to do so that it's the same within an HTML page.

  • Ah, the other thing that's very important is that white space does not matter.

  • In the HTML world Onley tags do so basically, when the Web browser is reading your HTML document.

  • Basically, it's formatting everything based off of these tags.

  • Eso if you start putting things on different lines, but you don't have tags to show, these things should be on different lines.

  • The Web browser would just put everything onto a single line because again, it's looking for the tags.

  • All all the formatting with an HTML document is all based off of tags.

  • If you don't put a tag in, it will not be recognized by a Web browser, and the Web browser will simply reformat everything based off of how the tags are so that let's go over the computer and I can show you how basic HTML document works.

  • So here we are, on my lab computer again, I use a Mac book for my lab computer.

  • But in order to write out this HTML document, all you need is a basic asking editor.

  • Eso again in the Mac world, I'm using text at it.

  • If you're using Windows, you can simply use note pad.

  • If you're using Lennox, you can use G editor them or something like that.

  • The important thing is whenever you save the HTML document that you always use the extension of either dot HTM or dot html so that the computer knows how to open it.

  • So with this, basically, I have typed out this basic little Web page here.

  • I have saved it to my desktop here and says it has that dot html extension.

  • When I double click, it opens up, and now we can see what this particular Web page looks like again.

  • It's not very sophisticated, but it is a weapon, so just simply says, Hello, world.

  • This is a test Web page.

  • We can expand this up here.

  • We can see that the title.

  • The title of this page is test Web page eso All of this has been encoded with with HTML.

  • I can also show you that If I d'oh open with an open this with Google Chrome, we can see that basically, here again, we get that test Web page we get.

  • Hello World.

  • This is a test Web page, and so again, this is the important thing with HTML.

  • The fact that you can open up an HTML document in any Web browser and it will be able to interpret it.

  • That's what makes HTML so powerful, especially from people coming from my generation.

  • Now the first thing on here that I want to show you is this this doc type.

  • So this used to be a lot more important again.

  • One of the things have to be thinking about when you start dealing with HTML is that HTML again was created back in the nineties, really deployed back in the nineties and back in the nineties.

  • It was a massive mess.

  • There wasn't the standardization the way that we have now again, the concept the concept of HTML was, Hey, this is a way that we can co two documents, and then all of these different Web browsers will be able to read the same document.

  • And of course, when the major corporations came in jail hell type.

  • Try to make an open standard.

  • Proprietary.

  • You've probably heard this before with other technologies, and basically they failed.

  • They failed, but it took him a decade to fail.

  • You know, again, with all these major corporations, it's been a lot of time, money and energy toe to fail sometimes and eso during the process of failing, you had a lot of issues with HTML again, certain certain Web browsers would would be able to use specific tags.

  • So if you wanted to do something that Netscape Navigator would understand, you would have to use different tags than if you then if people are going to your website using Internet Explorer and that type of thing, they're also different markup languages like ex HTML, that type of deal that have kind of fallen by the wayside.

  • So what this up here, this doc type, I honestly, I never put this into my HTML documents.

  • The only reason that I'm showing you this here is I realized, as a good teacher, two new students.

  • I should show you that this exists.

  • This is not something that I personally ever put into my html pages because again, at this point, we're dealing with modern browsers.

  • They understand how to deal with the HTML, let him giving them.

  • But you should realize that putting a doc type here might be important.

  • Yet if you're working in an enterprise environment, if you're going to be selling stuff to the public, if you're gonna be taking a test in school, make sure put a doc type.

  • So what?

  • This what this does here is this Doc type says what you're going to be seeing now is an a T M L file.

  • So basically, what this is telling to the Web browser is everything that follows is HTML.

  • It's kind of like no crap, Sherlock.

  • But again, that's how the standards are.

  • If we go over to W three schools S O W.

  • Three schools talks a little bit about the HTML doc type declaration and it explains a little bit more.

  • It shows again for HTML five again.

  • If you're going to do this, all you do is you put the doc type html.

  • But if you look back into the old days, you can see that there were these different doc types that you would have to put in in order to tell the Web browser how to interpret what it was saying again, This is kind of one of those things from the old days.

  • You may see this currently just because of legacy things.

  • Personally, I don't generally worry about the dock type and again for the Web page to work in a modern browser.

  • You don't normally need to put it there.

  • But again, if you get tested, if you have to take a test, you wanna put this doc type than HTML at the top, then what we're going to do is we're gonna come down and we're actually going to open up the HTML Web page.

  • So basically what we're doing is we're creating this tag.

  • Here's there's HTML and we close the HTML page at the end, So we open html and then we do this float forward, slash close html.

  • So this basically says everything between here, these two is going to be in a team.

  • Alice is in HTML website.

  • The next thing that we dio is, then we're going to create the head tags.

  • We're going to create the head, a component of this of this web page and what happens in the head is basically you can put an information that relates to the entire Web page.

  • So you know how I showed you that title before test web page.

  • So if we go back here, we can see and see up here where it says test Web page.

  • Well, that title, we actually put that in the head so you can put the title in the head.

  • You can put metadata in the head.

  • You can put script, locations, CSS information.

  • That's basically formatting information basically within.

  • And the head is where you put everything that relates to the entire web page.

  • So this will This will not be printed out.

  • Like normally on the web page itself.

  • Obviously, it's not printed here again.

  • This is just information that pertains to the whole Web, eh?

  • So we open the head and then we close the head.

  • Then what we're going to do is we're going to go to the body.

  • And so the body is where you put everything that's going to be written on the web page itself.

  • And so we go.

  • When we take a look at the body, we can see that I used a couple of different tags here.

  • So I used the 8th 1 tag S o the H one.

  • And again we'll talk about these tags in a future class talking about the formatting no more.

  • But H one is called the heading one tag s So what this says is create heading at the top layer eso heading one is like the biggest, largest type of tag on a page so we can go here and let's see if I do it eight to and I say this is on a to tag And then I closed the age too, right?

  • I could do file, I can do save.

  • And if I go here, I can refresh.

  • And so you say This is an eight to tag and so it's a bit smaller than what that h one tag is.

  • And again, this is a way to do basic formatting on Web page so you can have an h one tagging it to tag in its three tag for tag.

  • It goes all the way down like six or something.

  • But basically these air just like heading tags So you would use this you might use h one is a title for the page and then an eight to is a title for a chapter.

  • And a three is a title for a section, Something like that.

  • So what we see here is ah, you know, we're going to be typing out hello, world.

  • And so whatever we're gonna be typing out is in between two tags, right?

  • Uh, so we opened the H one tag here.

  • Then we print out whatever you want to print out, and then we close the H one tax.

  • What?

  • This is telling the Web browser is basically print print this text using a certain format, and then the tag is over.

  • Then we come down here, we open the age to tag, and then it says, print this and we're gonna close the age to tag.

  • And then there's the P tag.

  • Soapy basically stands for, like, this paragraph font.

  • And so, p you know, this is a test web page, and then we close the p tag.

  • So that's what we have here.

  • Right?

  • Then all you're gonna do is you're gonna go down and your clothes, the body, close the body tag, and then obviously you're going to close the HTML tag Um And then this is the Web page that you get now.

  • I want to show you a couple of things with this.

  • The first thing is that white space and suck does not matter and formatting right.

  • So I just you know, I just put in a couple of enters.

  • But a couple of new spaces in here are new new lines in here.

  • I do file.

  • I do save.

  • And then when I do a refresh, what you'll see is on the Web page.

  • It doesn't matter, right?

  • The tag is what matters, not the white space.

  • So if I go back, I can go when I can put in a break tag.

  • There's something called a break tag, right?

  • So I simply put a brake tag in there.

  • Now do file save, you'll notice.

  • Everything here is on one line, but then when I go to refresh, you can see because of that tag, it now breaks to the new line.

  • So it's very important to understand when you're printing out in HTML, as far as the Web browser is concerned, it on Lee cares about tags, so this becomes very important.

  • So if your reason a back end scripting language such as PHP or python or ruby on rails, and you're going to be printing out reports.

  • Not only do you have to pull the information from the database and print it out on a page, but you actually have to print it out with all the appropriate tags s so that when people pull up the report on a Web browser, it will look appropriate literally.

  • If you just type out a whole bunch of text into essentially a text file without any of these thes tags, it will just be woman big, long, horrible, nasty line.

  • So that's the first thing to remember about with this s so I can go in, I can close, I get rid of the break, and then one of things I want to show you is Ian.

  • Capitalization doesn't matter.

  • So if I do a capital H one capital H to lower case H one lower case H two here I do file.

  • I do say, if we could go on, we do refresh, and we can see that enough.

  • Nothing has changed again.

  • Capitalization truly does not matter within the HTML world past that.

  • Then we're going to go.

  • I want to show you what happens if you forget to close a tags again.

  • Let's say you open the eighth to tag, and then for whatever reason, you're just, you know, fat fingering it.

  • And you forget to close three h two tags.

  • So we open the eighth to tag we go to the next line.

  • We opened the P tag.

  • So on and so forth.

  • What do you think will happen here?

  • Would you file?

  • We do save.

  • We go here and then we hit Refresh.

  • What we can see is everything that was written, supposed be written and simply being that paragraph on is now in a two.

  • And this is one of the problems that you can run into with what are called the Wiz.

  • E wig Editors for 80 miles make.

  • Basically, what you see is what you get where you type everything out, and it's supposed to encode everything to HTML.

  • One of the problems you'll find is many times those whiz e wig editors will simply forget to close tags properly.

  • And then your entire page will look like crap literally, because one tag was forgotten.

  • And if you don't know how HTML works, then you're not going to be able to know how to go to the source and be able to see what's going on.

  • So this is a basic idea of how ate the HTML structure looks when you're looking at an HTML document, but it is important to understand that again.

  • HTML WEB BROWSERS Web browsers are not very finicky, and you don't have to do all of this to make an HTML document works If I do file new, Um, let's just let's just strip out all so much for the formatting that I was using.

  • Let's just simply type out what I want to type out s I do.

  • Hello, world close h one on.

  • Then we do the pee like we did before, And I say if, uh, Footloose and fancy free.

  • All right, so here here, you'll notice I'm I'm not doing a document type.

  • I'm not opening up the html I'm not doing a title.

  • I'm not doing a body.

  • I'm not doing any of that.

  • But if I simply do go go to file, then they go to save, and then I can say, um, eggs example dot html.

  • So, again, I have to say, this is not a team.

  • L I'm gonna save it to my desktop.

  • I hit save.

  • So we have his example a female here.

  • If I double click on this, we can now see that it says hello, world.

  • So this is the test Web page, and this is the example that I just showed you.

  • So it is important, Understand?

  • You know, html is kind of one of those things where you don't have to write out all the fancy coding.

  • You don't have to write out the head.

  • You don't have to write out the body.

  • You don't have to do all of those things.

  • That just makes it easier for people coming behind you, understand?

  • But HTML itself is a very forgiving in a language.

  • And again, basically, you can type out things like this and actually have it make it work s o A lot of times, like when I'm showing you folks projects and demonstrations, I'm not gonna go through and format everything quote unquote correctly for things like when I create a form, I'm just gonna create a former.

  • It's gonna type out the information I need for a form and I'm going to say that I'm going to use that as the HTML document.

  • So that's just kind of one of those things just to keep in mind when you're dealing with HTML.

  • So there's a basic overview of how the HTML syntax works and how an HTML document structure should look again.

  • In many ways, HTML is a very forgiving a markup language.

  • But in other ways, it can be a bit nasty and finicky again wants you to wants you to open tags, and it wants you to close tags.

  • As long as you open tags and close tags, you'll be great.

  • If you open a tag and forget to close the tag.

  • All kinds of weirdness can ensue.

  • So well that I was showing you today means may seem very simple because again you're using a swan or pee or whatever else tags.

  • And so it seems pretty simple that okay, if I forgot to close that tag, I could pretty quickly figure out where that where the problem started.

  • But do you remember in the HTML world there are a lot of different tags that you might be using, and so when you use some of those tags, it can be a little bit more confusing to figure out where you forgot where you forgot to close.

  • A tag at it can end up taking a lot of time and again the important thing and why, I would argue most people should understand how HTML works is because so many of these Weezy wig editors out there You sit there, you type out a document, it supposed to look a certain way, and when you go to publish it, it doesn't look how it's supposed to.

  • And literally.

  • The reason is is because that editor, for some reason I forgot to take out a tag if we got to input a tag when you saved everything and that kind of screws everything up.

  • So if you can go back into the source and you can see where those orphan tags are, it's a lot easier to go back through and do some modifications again.

  • A big thing to understand with HTML is you don't have to do the full HTML document structure like I showed you.

  • You don't have to do the document type.

  • You don't have to do the head.

  • You don't have to do the body.

  • You don't have to open a female.

  • You don't have to close HTML.

  • That's the proper way of doing it.

  • You literally can't get simply write out.

  • HTML are text with the tags into a document.

  • Save it is dot HTM or HTML and Maur or less.

  • Most modern Web browsers will be able to deal with it.

  • But again, there's the important thing to understand the technology world is there's what you can do at home.

  • There's what you do when you're playing around, and then there's what what you do when you're typing something up when you're creating something for production environment.

  • And that's an important thing to understand with a team out like How I would write things in HTML if I was being paid by a client is different than how I'd write things just for projects that I'm doing my own, not because one is more functional than the other, but again, when people are going in behind you, try and understand what it is that you did.

  • It's a lot easier if you use the standard HTML structure versus just type everything out and hope other people can understand.

  • So that's a basic overview of the syntax and formatting for you.

  • As always, I enjoy doing this class and look for to seeing 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.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

HTML介紹--文法和格式化 (HTML Intro - Syntax and Formatting)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字