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 what I mean, like a computer guy, and in today's class, we're going to be doing a basic text formatting with HTML.

  • So as I've shown you before with a female, you use tags to say what certain text is until we're going to be four matting the text within the Web page document using HTML tags today.

  • Now it is important.

  • Understand, as I talked about before, that HTML is basically the building blocks of a website.

  • So think about it as the beams, the floor, the foundation of a website, and then you use other coding languages to make the website actually be responsive.

  • Be pretty all of those types of things.

  • So when we think about formatting text with age, Tim help, basically all we're doing is we're laying out what type of text that the Web page is going to be presenting eso things such as headings.

  • So you have 81 all the way through a six, and basically these are for things like titles of a page.

  • So if you have a title page and then you have a chapter on a page that you have a section of the page all the way six levels down, you would use something called a tag.

  • So basically, these are these air titling tags for the content that's going to be in a page.

  • Then you use Pitak.

  • Soapy tags are the actual paragraphs.

  • Whenever you're gonna be writing out a paragraph on the page and then you would be using the P tag.

  • Beyond that, what I'm gonna be showing you to do today is things like how to bold.

  • So if you want a bold a certain word or set of words, I'll show you how to use that tag.

  • I'll show you how to italicize.

  • I'll show you how to underline, and I'll show you how to do a line break but is important, understand, in the modern world, when you're looking at actually formatting text to any larger degree than what I'm going to be showing you today.

  • You would use a language called CSS CSS.

  • It's called a cascading style sheets.

  • That's what you'll be using in order to modify the size of Fox or to modify the colors of fonts or to modify other visual aspects of your website.

  • Basically, how the fonts, layout, spacing, that type of thing.

  • You would actually use CSS for that.

  • So HTML again, what you're gonna be using is you're going to be using a came out for the broad brushes of what the Web site is gonna look like again, you're gonna be saying what, what, where the heading tags are.

  • What size those heading tags Are you gonna be saying where the paragraphs are gonna be?

  • Bolding?

  • Some words are underlined in some words.

  • You're going to be doing very basic things.

  • Using eight came out, and then when you want to make it more pretty more sophisticated, then you will go to see SS to do that, additional tweaking to things like fonts.

  • So today I'm going to show you this basic formatting and text with HTML, uh, should be pretty easy for you.

  • So as with everything in HTML, basically, when you're gonna be doing basic formatting of text, all you have to do is use tags.

  • Can you open a tag and you close attack.

  • Always make sure you close the tag.

  • But beyond that, everything else is basically memorization, knowing what tag to use s.

  • So why don't we go over to the computer?

  • I will show you how these basic formatting tags work because that'll probably easier than just simply trying to talk at you.

  • So here we are, back at my demonstration machine again, I'm using a Mac book pro, but all you need is a text editor to write this basic HTML code.

  • So if you're in the Windows world, you can use no pad.

  • If you're in the Mac world, you can use text edit like I have.

  • If your analytics world you can use g et it or nano or bam or whatever else it is you want.

  • Uh, the main thing is is make sure when you save the file, make sure you say the final is a dot HTM or dot html file that shows the computer that this is a Web documents.

  • So then when you double click on it, it will try to open it with a Web browser versus just opening like a text editor.

  • You getting to see this now?

  • Beyond that, all I've done today is I have written out all the basic HTML tags that I want to show you as a demonstration.

  • You will notice that there is no head attack here.

  • There's nobody tag here.

  • There's no HTML tag here.

  • This isn't a full, fully formatted HTML document like you quote unquote should if you're putting this out into the production world or giving us to a client.

  • But again, as I've told you before in the HTML world, it is very forgiving from a technical standpoint, so I don't actually have to put in all those additional tags for this Web page could work.

  • So when I'm showing you a lot of these types of examples, I'm going to strip out those that that additional html code simply because I want you to focus on what I am trying to show you.

  • And so here I'm just basically trying to show you that this basic text formatting eso at the top here we have the eighth tags.

  • So H one, uh, then we say this is heading one, and then we close the H one tag.

  • So H one is like the biggest, boldest type of thought that you're normally goingto have.

  • So this this is again this is the tag you would use for maybe the name of Web page or maybe the name of a book.

  • You know, the highest level, then you have 8 to 10 you have 83 then you have a four.

  • Then you have a five, and you can go all the way down to 86 to go past age six.

  • There is no formatting rule, so nothing happens to it.

  • So you have 81 all the way through 86.

  • And again, you can use this for, let's say, the title of a book in the title of a chapter in the title of a section of the title of a subsection that the title of an article in the sub section Title of Something Below That right.

  • So when you're using these heading times, you're not gonna be writing on the whole document and heading times these air look, they're heading tags that's that's what therefore right?

  • So again, think about captors.

  • Think about blawg.

  • Post page names.

  • Think about that.

  • Think that type of thing that we're going to be using the heading for that I'd be on that.

  • They were gonna come down to the P tag.

  • And so the P tag is simply p uh, and this is the standard tag that you're going to be using in order to write paragraphs in your document.

  • So every time you have a paragraph in your document, it's gonna be enclosed by the P taxi.

  • Type out a whole paragraph When you get to the end, you're gonna close a p you got in the next paragraph, you're gonna open a p e clothes a p open p close p open at the close of p open a p closed people.

  • So what this does is remember, in the HTML World Web browser doesn't read things based off of white space.

  • So if I did this, everything would still show up on the same line.

  • It modifies everything based off of these tags.

  • And so basically what the P tag generally does is it breaks the line and then gives you a space between the different paragraphs.

  • Then we're gonna go down here.

  • So we have another P tag, and then I'm going to show you a bold example or a strong example on.

  • So with this, basically, if you're going to bold something, if you're going to a talent size, something from one underlined something within the P tag, they're going to do another tag.

  • So this is strong.

  • So the strong tag is for bold, and then we're simply going to bold the word strong.

  • And then we're gonna close the strong tab.

  • Uh, tag.

  • Then we're going to continue on with whatever we were saying.

  • And then we're going to close the paragraph tag, eh?

  • So basically, this is how you can you come bold one word in a sentence or in a paragraph.

  • So you're going to be using a strong tag in order to bold a word or a line.

  • Something like that.

  • Then we go down here.

  • There's another P tag than for italics.

  • Used the e m.

  • A tag e m.

  • Then whatever you want italicized.

  • Then you close the e m tag.

  • Continue saying whatever going to say and then close the p tag for underlying you use you so with the you tag and so in this underlined is going to be underlined and then we're gonna close the you tag.

  • Then everyone continue on with whatever you're saying in the paragraph and you're gonna close the P tag, then if you want a lying break.

  • So again, let's save your your typing something but you But you want when you want to break a line, but you don't necessarily want it to be in additional paragraph.

  • Basically here you simply use the B R tag.

  • So there's no slash with it.

  • It simply to be our tag, and this will break the line.

  • We go over here and we double cluck on the fonts dot html.

  • So I've called this font dot html.

  • We can see how this opens up.

  • So if we open this up, this opens up in safari.

  • Since that's my default Web browser.

  • And so what we can see here is the H one tag is heading one.

  • The eighth to tag is heading to a three, is heading 384 is heading 485 is heading 586 is a tiny little ape sex, right?

  • So this is how these heading tags look.

  • You'll see they're big and they're bold again.

  • It's for titling pages, titling things with within a Web page.

  • They were going to come down to a simple P tag example.

  • So this is a P tag example here, and this is just what is going to look like when you close the P tag again, it breaks the line and then it gives you a space.

  • And then we come to the strong example, and then, with a strong example, we can see that Strong is in bold because it's within those strong tags.

  • But example the rest of the sentence isn't on Lee.

  • What is within the tags is modified for the italics.

  • The same thing.

  • What is between the E.

  • M tags is ah, italicized.

  • Nothing else is with EU, with the underlying tag we can see Underlined is ah is underlined.

  • Nothing else is.

  • And then for the line break, we can see line, break an example, and so basically we can see it just goes.

  • It breaks the line there and on the next line keeps going, so you can see when you end the p tag.

  • Not only does it break the line, but it gives you a space between the paragraphs where if you use the b R tag for just a line break, it breaks the line and then immediately starts typing underneath.

  • So it's not like double spaced or anything like that.

  • So, again, we can go here just to kind of Oh, just to kind of show you That, you know, is just simply whatever is within the tags is what gets modifying.

  • So we'll do that there.

  • Don't do that.

  • Here s O.

  • This just is going to show you.

  • So now strong example, both of those words are going to be in bold and underlined example.

  • Both of those words are now going to be underline, Whereas everything else is the same, I simply do file you save.

  • We go back to the web page and we just simply hit refresh.

  • And okay, so now we can see the entire sentence now is bold id on.

  • We can see the entire sentence now is underlying so again, basically anything within that the tags is formatted.

  • Anything outside of the tags is not, uh, again, again, Any time you're gonna be creating a Web page.

  • One of things you want to think about doing is opening up the Web page and multiple browsers just to make sure how it looks we're going to open with, Let's say we're gonna do Google chrome now and we take a look at Google Chrome.

  • Google Chrome is more or less identical, but it is a valuable thing is to be thinking about whenever you're going to be creating Web pages.

  • Open up the Web page.

  • It's in multiple different browsers, I guess, to see how it looks.

  • This is going to become more important when you start using CSS cascading style sheets.

  • When you start using Java script, that type of thing.

  • That's when you're going to start to no notice.

  • More and more differences between the different Web browsers.

  • When they're doing basic HTML tags, it should be more or less identical.

  • S.

  • O.

  • This is basic example of how to use tags for text formatting again.

  • You have 81 through age six, these air for these Air four titles.

  • Basically the headings we have the P tag.

  • This is for the different paragraphs again within your blog's post or whatever else thes strong tag allows you to.

  • Bold World's GM tag allows you to italicize worlds.

  • The you tag allows you to underline words, and then they be are tagged.

  • This allows you to do a line breaks.

  • So for whatever reason, you can break the line.

  • And instead of having a double spacing between between the next thing, it'll just go single space to the next line.

  • And so that's a basic example of how HTML funk tags work.

  • So there you go.

  • Now you have a basic understanding of how the HTML tags work for basic text formatting, so you have heading one through six.

  • So H one through 86 those air again.

  • Those were for headings, titles, sections of subsections, that type of thing when you go to actually write out the full information on a Web page who would then use the P tag?

  • That's four paragraphs.

  • Then, when you want thio bold, bold words, use the strong tag when you want to underline words, use the you tag.

  • When you want to italicize worlds, you use the E.

  • M tag, and then when you want to do a line break, you simply use that be our tag?

  • So that gives you the basic ability to do text formatting now to be clear again when you start getting into changing the color of text.

  • When he started to get into changing the fonts of text, the specific fought size of text, that type of thing, that's where you're going to be using something called cascading style sheets.

  • You can actually do some of that with an HTML, but that's kind of like the old deprecating way of doing it.

  • So I'm not going to show you that again.

  • At this point in time, we're going to be doing any of that kind of font modification.

  • It is much better to actually do it in C.

  • S s on.

  • So that is the way that we're going to do it today again, what I showed you today and the example that I've given, I did not have the HTML tags.

  • They didn't have the head tags that have the body tags.

  • I didn't have all the additional tags that would be required for a normal Web page simply because I want you to focus on specifically what I'm showing you.

  • This is just something to keep in mind.

  • So if you're going to actually be writing out a Web page again to put into a production environment for a customer client, something like that, make sure you put the HTML, then you put the head, then you put the body, then you feel everything else out.

  • But to be clear, if you're just trying to type up some simple page, you don't actually need all of those additional tags just one of those kind of things to be thinking about.

  • So, as always, I enjoy doing this class and look forward to 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 - Basic Text Format Tags)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語