HTML Basics: Live Help Session

Keith McGuffey Author

02/17/2021 Added

41 Plays

Description

A discussion about the basics of using HTML code to build webpages.

Searchable Transcript

Search:

[00:00:02.160]All right. So welcome to HTML basics. I'm Keith McGuffey.
[00:00:05.790]I'm a web specialist with IANR media. I am recording this session.
[00:00:09.870]We'll put it up on our, our website afterwards. So if you miss something,
[00:00:12.510]feel free to go back into the recording. Um,
[00:00:15.900]I want to start this session by sharing the first lesson I learned
[00:00:20.820]when I started taking software development courses, uh,
[00:00:23.910]the instructor was Christopher Burke.
[00:00:25.560]He since won a distinguished teaching award.
[00:00:27.810]So I feel like this is an important lesson to learn. He came into class,
[00:00:32.660]he took attendance kind of standard procedure.
[00:00:35.730]And then he put up the first slide for the first lesson. It said,
[00:00:40.260]simply computers are dumb.
[00:00:44.250]The first lesson you should learn about computers is that they are dumb.
[00:00:48.420]They're only good at doing one thing. And one thing only,
[00:00:51.360]and that's doing exactly what we tell them to do exactly the way we tell them to
[00:00:55.590]do it. They can do no more, no less. So, as we're learning to code,
[00:00:59.700]remember that you are smarter than you than your computer.
[00:01:02.730]You are smarter than the code we're using.
[00:01:04.950]If the computer is not doing what you want it to it's because you haven't given
[00:01:08.250]it exactly what it needs in exactly the order that it needs it,
[00:01:11.790]and it can't fill in the blanks. So with that said, let's talk about HTML.
[00:01:16.890]HTML stands for hypertext markup language. Uh,
[00:01:20.720]there's not like a quiz at the end of this or anything,
[00:01:22.620]but that's basically the language that web browsers use to display content.
[00:01:27.270]Okay. So let me, let me start here by just, uh,
[00:01:32.100]typing a sentence, right? My name is Keith.
[00:01:37.050]So we as smart humans, we know that this is a sentence, right?
[00:01:39.900]It's got capital letters to start it period, to end it, subject, object,
[00:01:44.400]all that good stuff.
[00:01:45.990]A web browser doesn't necessarily know what to do with this, right?
[00:01:49.320]So we have to use HTML to tell it what to do with this.
[00:01:54.060]So HTML is composed of elements and most HTML elements
[00:01:58.920]have an opening tag and an end tag.
[00:02:01.710]It's very similar to writing in a sentence that starts with capitalization.
[00:02:05.310]It ends with punctuation.
[00:02:07.140]HTML starts with an opening tag, ends with a closing tag.
[00:02:10.400]So I'm going to tell the computer that I want it to make a new paragraph with
[00:02:15.390]this text as the text of the paragraph. So do that,
[00:02:19.350]I'll start with the opening tag. It starts with just a, uh,
[00:02:23.100]opening angled bracket. And then I have to define what the element is.
[00:02:28.050]So I want to this to be a paragraph. In HTML,
[00:02:30.690]that's just a 'p'. Now close the bracket. Okay.
[00:02:34.680]So there's my opening tag for this paragraph element.
[00:02:38.490]Then at the end of the paragraph, I need to close that element. And it's,
[00:02:41.610]it's a very similar tag: opening bracket that we're going to use a forward slash
[00:02:47.610]then the element that we're closing and then another angle bracket to close it.
[00:02:51.870]Okay. So here I said, start a new paragraph. Here's the text for that paragraph.
[00:02:57.630]And then we're going to close the paragraph. Okay.
[00:03:01.660]I'm going to tell the computer to make another paragraph.
[00:03:09.210]And close that paragraph.
[00:03:10.110]So let me show you what this looks like on a website. I'm going to copy this
[00:03:15.900]and add it to this test site I have set up.
[00:03:21.930]So by default, when you edit a page, your body editor is typically in this,
[00:03:26.730]uh, WYSIWYG, stands for what you see is what you get.
[00:03:31.080]That's kind of like a, a word editor, right?
[00:03:33.090]It's got all these options up top to, to define how the text looks and whatnot.
[00:03:38.010]We have switched that over to HTML. So now we just have a plain text editor.
[00:03:42.480]We don't have all the like bold options and stuff at the top,
[00:03:46.140]and this is going to take the HTMI I put into it and spit out what it should
[00:03:50.340]look like as, as it reads it. So I've got my two paragraphs there.
[00:03:55.170]Let's save this and see what it looks like.
[00:04:01.440]All right, there we go. So got one paragraph. My name is Keith.
[00:04:04.440]That paragraph ends and we start another paragraph. My last name is McGuffey.
[00:04:09.840]Any questions about that
[00:04:11.160]so far? Just HTML elements and how they open and close.
[00:04:15.420]I want to make sure we're not losing anybody and feel free to use the chat too.
[00:04:25.590]Okay. Hearing nothing. I'm going to go on,
[00:04:27.210]but feel free to interrupt me at any point. Now, uh,
[00:04:31.650]in HTML, we can,
[00:04:32.850]we can put HTML elements inside of other elements and that's called nesting.
[00:04:37.830]Okay. Um, so let's say, I want to make my name,
[00:04:42.330]a link. I can, within this paragraph elements,
[00:04:47.340]I can put another element for a link. In HTML, that's called an anchor,
[00:04:51.480]and the short for that is 'a'. So I'll do my opening tag here 'a',
[00:04:57.270]then I have to close the anchor as well,
[00:05:02.010]Let me move this down so we can look at this top bit a little better.
[00:05:05.700]Now it's important in HTML that we open and
[00:05:10.230]close things in reverse order. Okay. So I opened a paragraph.
[00:05:15.510]Then I open an anchor. Then I close an anchor.
[00:05:19.740]Then I close a paragraph. That, that order is important. If I had done
[00:05:25.440]this, remember computers are dumb. This is going to confuse the computer.
[00:05:29.580]Cause it says, okay, there's a paragraph. There's an anchor.
[00:05:33.240]The paragraph closes. So what is this for? Like, we,
[00:05:36.660]as humans can figure that out, but computers are dumb.
[00:05:39.150]We have to keep track of stuff like this for them.
[00:05:42.210]So paragraph, anchor, close the anchor, close the paragraph,
[00:05:47.100]open and close in reverse border. So
[00:05:53.880]I need to tell this anchor what to do. Right now, if I put this in the HTML
[00:05:58.520]it's not going to do anything if someone clicks on Keith, right? I have to,
[00:06:01.790]I have to tell this element what to do.
[00:06:05.160]I can do that with what's called an attribute. Okay.
[00:06:09.500]And for an anchor, that attribute is a hyperlink reference. It's,
[00:06:12.880]it's a shorthand 'href'. And for attributes,
[00:06:18.470]you say what the attribute is then an equal sign and then in quotations
[00:06:23.390]what it should do. Okay.
[00:06:26.150]So I want to tell this link to point to my contact information.
[00:06:30.890]Let me pull up,
[00:06:39.250]copy this URL and put it in these quotations.
[00:06:43.480]So now I have a paragraph.
[00:06:44.890]I have an anchor and when someone clicks or taps on this text,
[00:06:49.360]I told the computer to open this webpage. Then I closed the anchor.
[00:06:53.920]Then I closed the paragraph.
[00:06:57.670]Let's copy of this and put it into my test page and make sure it works the way I think
[00:07:02.590]it's going to work.
[00:07:10.420]Okay. So we see, we still got the two paragraphs, um, the text
[00:07:13.780]'Keith' is now a link. When I click that,
[00:07:17.080]I've told the computer to open this page, which it does. It's perfect.
[00:07:23.290]Any questions on that part,
[00:07:24.820]nesting elements and using attributes? I want to make sure we're not
[00:07:29.560]losing anybody.
[00:07:38.650]All right.
[00:07:43.000]Now, when we build a web pages, uh,
[00:07:45.610]we usually don't just have like paragraphs and links hanging out. Right?
[00:07:49.990]We have containers that we can put elements into. If you think like the,
[00:07:54.910]the metaphor I've heard is if you go fishing, you know,
[00:07:57.730]you don't just grab a bunch of lures and bait in your open hands,
[00:08:02.350]go to the lake and make sure, and just kind of hope it's going to work out,
[00:08:05.290]right? You put them in a tackle box within that tackle box, you have trays.
[00:08:09.460]And within those trays you have compartments for each lure.
[00:08:14.140]So in HTML, uh, the container we can use for other elements,
[00:08:18.670]one of the containers we can use the most common one, is called a 'div'.
[00:08:23.020]I think 'div' stands for 'division'. Uh, don't test me on that though,
[00:08:26.530]because I'm not entirely sure.
[00:08:28.180]So I'm going to wrap each of my paragraphs in a div. Okay.
[00:08:32.000]So I have my starting div up here. Paragraph starts paragraph ends,
[00:08:37.330]and then I'll close this div I'll do the same down here.
[00:08:47.710]Okay. So now each of these paragraphs is in a div. And when we do this,
[00:08:51.670]we can say that this paragraph is the child of this div
[00:08:56.820]and this div is the parent of this paragraph. It's parent-child relations. Okay.
[00:09:02.760]If I copy this and put it into my test page,
[00:09:09.060]we're not going to see much of a difference because the div is really just a
[00:09:12.330]container. I haven't told the div to do anything special yet. Right.
[00:09:17.460]But I can come in here and I can style this div so that it looks different from
[00:09:21.450]this div. I'm going to do that with another attribute called 'class'.
[00:09:26.250]Okay.
[00:09:28.110]And what I want to do is I want to give this div a light gray background.
[00:09:33.120]Okay. Um,
[00:09:34.550]I'm going to show you that this works and then I'll show you how it works right
[00:09:37.800]after.
[00:09:38.220]So I know the class for that is UNL background,
[00:09:44.490]lighter gray. Okay. So I'm telling them this first
[00:09:48.810]div to have a light gray background, let's see what that looks like.
[00:10:00.420]There we go. So we can see that first div has the light gray background,
[00:10:05.250]second div doesn't because I haven't told it to be styled any differently.
[00:10:10.290]What's happening there is we're using
[00:10:12.270]what's called CSS and CSS has kind of a sister, uh,
[00:10:16.410]language to HTML. It stands for cascading style sheets,
[00:10:20.280]and it lets you use the class attribute to style your HTML elements.
[00:10:24.960]Where we're we find those classes that are within the
[00:10:30.030]WDN, the UNL framework. Um,
[00:10:33.030]I'm going to go to wdn.unl.edu.
[00:10:37.200]And in here under documentation,
[00:10:39.210]I'm going to look at us 5.0 framework documentation.
[00:10:41.400]That's the most recent version.
[00:10:44.460]We're gonna look at the CSS off to the side here, 'cascading style sheets'.
[00:10:49.110]I usually use this a single page version just because it's a little easier for
[00:10:52.170]me to navigate. So
[00:10:56.760]we'll put this to the side here, look for UNL background,
[00:11:00.960]light gray.
[00:11:05.520]So this is the documentation for our CSS. And what this is saying
[00:11:10.350]is any element with the class UNL background, lighter gray,
[00:11:15.060]this little dot in CSS just means it has the class attribute
[00:11:20.490]anything with UNL background lighter
[00:11:21.870]gray is going to have this hexadecimal lighter gray box. You can see here, right?
[00:11:26.340]So this is I given this div the class of lighter gray,
[00:11:31.200]you know, background, lighter gray. It's going to have that,
[00:11:33.840]that lighter gray color. Right. Does that make sense?
[00:11:38.610]I know that's a big step from what we were doing previously.
[00:11:41.910]I just want to make sure we're not losing anybody. If anyone has any questions,
[00:11:46.320]please speak up or use the chat.
[00:11:56.610]All right. Uh, no news is good news I've been told. So I'm going to keep going.
[00:12:02.490]All right. So I have,
[00:12:06.990]I have my two paragraphs in my two divs here right.
[00:12:13.020]Now, much like a, that tackle box has trays that has compartments,
[00:12:16.470]I can put divs in divs in divs.
[00:12:18.600]So I'm going to put both of these divs into a larger div.
[00:12:36.670]Good. I'm just making sure what opens first closes last, right.
[00:12:43.200]Now, if I copy and paste this into
[00:12:47.310]my tests page here, I'm not going to see much difference, right?
[00:12:51.240]Cause I just added a container. The container's not doing anything special.
[00:12:55.350]What I can do is lay out
[00:13:00.240]these child divs in a,
[00:13:03.990]in a grid with two columns.
[00:13:06.180]I do that by modifying this parent div with
[00:13:11.010]a class attribute. Okay.
[00:13:14.310]Not great at typing and talking at the same time.
[00:13:17.910]So give me just a sec.
[00:13:35.820]Let's get all this off of the page and let's just look at what I just did.
[00:13:40.140]So I've given this div element,
[00:13:43.500]an attribute of class and I've given it three classes. Okay.
[00:13:47.100]And these are just separated with, with, uh, spaces.
[00:13:51.000]What these classes are saying is to set up a grid with two columns,
[00:13:55.980]each columns, half the size of your screen, right?
[00:14:01.020]If your screen is narrow enough to hit this medium break point, they call it,
[00:14:04.500]instead of being two columns,
[00:14:06.450]we're going to have them stacked on top of each other.
[00:14:10.890]This next class refers to a style that,
[00:14:14.820]that says the gap between columns should be what's called a VW,
[00:14:18.870]which is 'view width'. That basically, like, as the columns get wider,
[00:14:22.830]the gap gets wider. As the columns get narrow, the gaps get narrower.
[00:14:25.560]Or it's just,
[00:14:26.550]it's a mathematical thing that I don't have to worry about as put it in there
[00:14:29.610]and it looks good for me.
[00:14:31.350]And then when they break and become stacked on top of each other,
[00:14:36.180]the gap between the rows should be five and that, you can
[00:14:40.890]put a number between one and 10 in there.
[00:14:43.560]I found the five just looks good because it's kind of in the middle. Right?
[00:14:47.130]So what that's going to do
[00:14:50.160]is it's going to take it's child divs and put them
[00:14:54.980]into two different columns. Okay. Let's see how that looks.
[00:15:10.490]So there we go. Now,
[00:15:11.030]instead of having the gray all the way across with just the one line and then
[00:15:15.680]the second line below it, it's now two columns.
[00:15:18.980]And if I make this a little smaller,
[00:15:21.740]we'll see there's a certain point where they stack on top of each other. Now,
[00:15:29.540]if you look across university of webpages, let me bring up an example here.
[00:15:34.700]Um, on IANR that you know,
[00:15:36.110]on ianr.unl.edu let's look at this temporarily working from home page,
[00:15:42.530]look at this middle part here.
[00:15:45.560]This is really just a little more advanced version of what I just showed you.
[00:15:48.920]Basically, there's one big div around here. That's saying,
[00:15:54.530]put each child div into a grid.
[00:15:57.500]And each column of that grid should be a third of the page. Okay.
[00:16:02.150]Within that, within each div,
[00:16:04.490]there's then an image that has class attributes that style
[00:16:09.470]it to be this,
[00:16:10.700]this ratio and to have this nice little white border around it,
[00:16:15.530]then we have a heading and then we have a link that also has some classes that
[00:16:18.770]style it as a button. That div ends,
[00:16:21.530]we have another div with the same stuff. That div ends, we have another did with
[00:16:25.250]the same stuff. And the whole thing closes. That's,
[00:16:28.940]that's how we get that grid layout is by using attributes on,
[00:16:33.590]on HTML elements.
[00:16:40.790]All right.
[00:16:41.720]That is really all I had prepared and I'm
[00:16:46.470]out, I'm at a prepared remarks right now. So if we wanna open up to discussion,
[00:16:50.780]I know it went over a lot of stuff pretty quickly. So if you have questions,
[00:16:54.470]comments, specific examples you'd like to see, please let me know,
[00:16:59.120]feel free to use the chat.
[00:17:11.630]Anne, do you have anything you want to add?
[00:17:16.930]No, I think that sounded, sounded really good. Keith, um,
[00:17:20.380]does anyone have any specific things they've tried to do in HTML that maybe they
[00:17:25.030]ran into some trouble with, um, that they have questions on?
[00:17:35.860]Um, I have a question that may only benefit me at the moment that, um,
[00:17:41.950]has anything they want to ask. I did have a question.
[00:17:45.580]Yeah.
[00:17:48.130]You know, the problem been having with the word
[00:17:53.580]button, so the HTML and the CMS.
[00:17:58.030]So I'm on a Mac now. And
[00:18:02.250]my problem is,
[00:18:03.150]is that one drive still only wants me to use word to put
[00:18:07.890]together my articles.
[00:18:09.750]So then nothing is changing between
[00:18:14.340]one,
[00:18:14.820]using Word on Onedrive and then copying and pasting that into the,
[00:18:19.580]the Word button that you've got pulled up. So I'm wondering,
[00:18:23.130]do I need to switch to a different note pad or text note or what,
[00:18:27.880]what can I,
[00:18:28.500]cause I've looked at the applications on the Mac and I can't really find a,
[00:18:33.180]um, a word, a text editor, um,
[00:18:36.270]that Google thinks I should be using.
[00:18:39.570]I thought maybe you'd have a suggestion for me on what I could use.
[00:18:43.160]Gotcha. Yeah. So I've just been using a notepad for the, these examples.
[00:18:48.080]What I, what I use myself is a Dreamweaver.
[00:18:52.730]Um, and I don't know if you have access to that. I've got the full Adobe thing.
[00:18:57.240]So I use that, um, another one that we recommend,
[00:19:02.390]uh, let me see if I can find it here, media,
[00:19:06.560]this is linked under our web resources and I think it's under quick guide
[00:19:11.710]or correctly quick, just put a link to that DirtyMarkup editor. Yeah.
[00:19:16.490]That's what it was.
[00:19:18.680]I've got the dirt. Yeah. I had used DirtyMarkup a little bit. Um,
[00:19:22.490]and it didn't what is just making such a mess out of everything.
[00:19:27.380]And I do have Dreamweaver now and I was playing around with it today, but my,
[00:19:31.400]the problem is still there. My,
[00:19:33.200]my articles are originating from Word and Word is putting all of that
[00:19:37.400]HTML, just erroneous coding in there.
[00:19:42.260]So I,
[00:19:43.310]I need some way to save my articles onto, you know,
[00:19:48.200]onto our Onedrive within our folders. That isn't word,
[00:19:53.570]Katie you're on a Mac. Yeah. Do you use TextEdit at all?
[00:19:58.580]It's a built into, uh,
[00:20:00.410]it comes with the iOS and I looked for TextEdit and it
[00:20:05.180]wasn't on of, I mean, maybe I just shouldn't, it should be in your app folder,
[00:20:09.380]uh, your applications folder.
[00:20:11.810]Cause it comes built in and I use it for a lot of stuff and
[00:20:16.700]I actually, um,
[00:20:19.640]this one project they do cause I have a Mac at home. I,
[00:20:23.510]I typed the HTML in it and then before I posted,
[00:20:27.770]I take it to dirty markup, you know, uh, copy,
[00:20:32.330]pasted it into there so I could see if I have any, an open tag.
[00:20:35.960]And then I posted it to my webpage that I use,
[00:20:40.160]but I love texts. Uh, you could do things as a,
[00:20:43.850]save it as RTF for some basic formatting. Um,
[00:20:47.860]so it's a little bit more,
[00:20:50.530]has a little bit more than note pad, uh, windows,
[00:20:54.640]but it's not nearly as sophisticated as Word we could say things is, uh,
[00:20:59.440]plain text uh, format of text or however you want to do it.
[00:21:05.170]Okay.
[00:21:06.370]I looked while you were telling me I was looking at finder,
[00:21:10.240]but I guess I wasn't under applications and it wasn't pulling it up,
[00:21:14.080]but I have it, of course it's in there. Yeah.
[00:21:17.920]Maybe that's my problem. Then you can't, you can't do,
[00:21:22.180]you can't do things like assigned page breaks or anything like that to it,
[00:21:25.870]but if you're going to just put it on the web anyway,
[00:21:28.570]that probably doesn't matter. Um, so yeah,
[00:21:32.080]I use it for a lot of just basic stuff where I don't need all the
[00:21:36.850]bells and whistles of Word. Okay, good. Well,
[00:21:40.810]thank you for this suggestion.
[00:21:42.040]I'll I'll try to use that along with Dreamweaver and see if that
[00:21:46.870]circumvent Word.
[00:21:50.490]Yeah. I wonder if this paste as plain text would get rid of some of that.
[00:21:55.080]If you're using Text Editor instead of Word, but I don't have a lot of that.
[00:21:59.950]And that, that you and you and Jason had, those told me to use the Word button,
[00:22:04.500]so I didn't want to mess around and cause more problems. Yeah.
[00:22:08.160]Gotcha. And I'll admit, this is a blind spot on my radar. I don't,
[00:22:12.790]I don't hardly use the WYSIWYG myself.
[00:22:14.860]I almost never use these, uh, 'paste as' buttons.
[00:22:19.410]So anything that's wrong with them? I'm a little gun shy on.
[00:22:25.200]Yeah. Okay. Well thank you.
[00:22:27.150]I hopefully this this'll get me back to where I need to be with the,
[00:22:30.940]with the HTML. Awesome.
[00:22:37.410]Anne do you use a different, uh, HTML editor? Don't you?
[00:22:41.280]I use VB edit. Um,
[00:22:43.680]it's only for Mac and it is when you have to purchase. Um,
[00:22:48.480]that's not, it's not too expensive, but I would think, uh, um, but it will,
[00:22:53.010]you can check your HTML in there and indent, um,
[00:22:56.370]it'll find HTML errors. Um, it does a syntax highlighting,
[00:23:01.890]um, you know,
[00:23:03.780]can show you entities if you need to replace some entities and you don't know
[00:23:07.440]what the, the code equivalent is.
[00:23:10.620]So you might want to maybe ask Jason about that, Katie.
[00:23:24.270]All right. Any other questions? Comments, concerns, examples we can go through.
[00:23:29.010]Okay.
[00:23:29.370]Um, I find personally all the, uh,
[00:23:36.240]web pages for, you know, th the framework and the, and uh,
[00:23:41.550]documentation, all that. I find it really,
[00:23:43.800]really hard to come to myself. Like I was trying to find. Okay.
[00:23:48.680]Where do, when you were talking about grids, where do I find grids? Well, I,
[00:23:53.460]I know I've seen it. I know it's something maybe under objects,
[00:23:56.900]but if you go to the UNL EDU web framework version 5.0
[00:24:01.850]main page, and then you have the drop down on the side, it's just,
[00:24:05.690]where do I find this stuff? Right. Yeah. Okay.
[00:24:10.640]So I have to go to CSS then objects then grid.
[00:24:15.920]And honestly, I don't understand the grid thing at all, because it,
[00:24:20.540]you got a, on the, under the four point, Oh, you had like copies.
[00:24:24.980]If you want to do this, copy this and put it in your, on your website.
[00:24:30.110]But now it's just, you know, uh,
[00:24:34.580]it's just all columns and numbers,
[00:24:37.610]but it doesn't say where to put that information in the code or in your HTML.
[00:24:42.440]Right.
[00:24:43.090]So if we're looking at,
[00:24:44.430]and I'm on the documentation 5.0 framework here, um,
[00:24:49.240]under that CSS a couple down, there's a, there's a Bands option.
[00:24:54.670]And this is I, I use this more than any CSS documentation or anything,
[00:24:59.440]but if you scroll down a bit, uh, we go through padding options.
[00:25:03.520]Here's here's grid layout. Okay.
[00:25:05.560]And so here's a halves grid at the medium break point and
[00:25:10.240]down here, here's all the code for it to make,
[00:25:13.510]to make it look exactly like this up here. And it goes through halves,
[00:25:17.020]your thirds, it goes to fourths,
[00:25:21.970]halves and thirds.
[00:25:24.070]And then even if you want to do like two thirds on the left and a third on the
[00:25:27.880]right, here's how you use, how you lay that out. So this, uh,
[00:25:32.280]put this in the chat for everybody. This is,
[00:25:34.510]this is probably the most useful single page for,
[00:25:39.660]for doing layouts on, on the 5.0 framework.
[00:25:47.680]Okay. I mean, I've looked at it before,
[00:25:49.900]but it's something my brain breaks between the examples and the,
[00:25:55.660]when I look at the HTML code on my pages,
[00:26:00.340]I mean, seriously, it's like, you know,
[00:26:03.790]translating from Latin and Greek and then back into escrow.
[00:26:09.940]As long as you keep all these,
[00:26:11.800]all these divs opening and closing in the same order and making sure,
[00:26:16.720]you know, this is the 67% column,
[00:26:20.440]which is this side, two thirds,
[00:26:23.380]as long as everything you want in that two thirds column is inside
[00:26:26.800]this div it should display correctly.
[00:26:29.830]You just got to make sure you're keeping everything opening and closing in the
[00:26:32.050]same order, reverse order, or however I said it earlier.
[00:26:50.520]All right. Well, I have to go to another meeting, but thanks.
[00:26:53.730]I have a whole new subset of pages on our website I have to do so I'm
[00:26:58.650]working on,
[00:26:59.220]so I'm sure someone or Aaron or someone will be
[00:27:03.810]hearing from me soon. Sound great.
[00:27:09.240]Bye.
[00:27:16.690]All right. Anyone else have examples questions we can answer
[00:27:23.040]looking at your way, Marsha.
[00:27:36.480]All right.
[00:27:47.100]Let me show one more resource real quick. Um, there is
[00:27:52.590]a markup validator, um,
[00:27:55.360]and you can just kind of Google this markup validation service.
[00:27:58.830]And here you can copy and paste your, your code
[00:28:05.640]by this direct input paste code in there and check it.
[00:28:09.930]And this will tell you if you're missing an opening your in tag,
[00:28:13.380]if anything's out of order, things of that nature.
[00:28:16.380]So again, computers are dumb.
[00:28:19.660]It's expecting you to put a full webpage of HTML in there.
[00:28:22.920]So you're always going to have these first two errors that you don't have a doc
[00:28:26.160]type. You don't have a title, just ignore those,
[00:28:29.160]but it will show you any other kind of errors. So if I'm missing this tag,
[00:28:34.050]for instance,
[00:28:40.260]not check the message. Of course, it's not going to,
[00:28:45.060]it was like when you take your car into the dealership and it stops making the
[00:28:48.420]noise, right? Let's try this.
[00:28:54.180]There we go. See,
[00:28:54.930]it's saying I got a stray end tag and something's going wrong online eight.
[00:29:00.900]So if you have a, an editor like dirty markup,
[00:29:06.930]I know something is wrong on line eight. So
[00:29:19.110]let me put this in the chat for y'all as well.
[00:29:30.210]There we go.
[00:29:40.710]All right.
[00:29:41.260]I want to be cognizant of everyone's time, and we're a couple minutes over. Any last
[00:29:45.550]questions?
[00:29:52.860]I hope this was helpful. And I think Ann's taken over next month with, uh,
[00:29:56.850]had a transition from Box to SharePoint and/or Teams.
[00:30:00.000]Um, just for the website, part of it,
[00:30:03.900]not the whole transition, but just, um, yeah.
[00:30:06.990]Cause if there are new websites that are linking to Box files,
[00:30:11.580]those are going to break.
[00:30:13.680]And once that migration is done, you have four weeks to fix them.
[00:30:18.630]So I'm just kind of going to go through sort of a process and
[00:30:23.310]strategy for preventing having those broken links on your website.
[00:30:30.930]Okay.
[00:30:32.400]Well, I'm going to stop the recording here.

The screen size you are trying to search captions on is too small!

You can always jump over to MediaHub and check it out there.

Comments

0 Comments

HTML Basics: Live Help Session

Description

Searchable Transcript

Comments icon comment

Related Channels

Comments