Bill Rosener: Well, this is Doctor Bill. Welcome back in this video you learned how to create a mobile responsive web page. When a website is responsive. The layout or the contents responds or adapts based on the size of the screen that is presented on a responsive website automatically changes to fit the device you're reading. Let's go ahead and start by taking a look at what you learn how to create, and then we'll go ahead and create it. So here's our browser, and here's our kind of a responsive web page. Notice the size of the browser is decreased. What happens to the content?
Bill Rosener: It's always readable.
Bill Rosener: And if I keep on going down, there we go. So as I increase the size, more and more of those letters become visible.
Bill Rosener: let me show you what kind of an example of a correct use and incorrect use of tables, and then also of responsive web page here. So here would be a correct use of tables, which is what the previous video focused on. And in that case, if
Bill Rosener: my browser was resized, I've got this table and it's like, okay, if I wanna let me make this a little bit further. If I wanna get to Saturday or Sunday, I've got a scroll.
Bill Rosener: Okay, that is acceptable within that table.
Bill Rosener: The bottom one, though, would not be in this case. I've got this in a table. So now what happens? As
Bill Rosener: I'm going to have to scroll back and forth in order to read the text.
Bill Rosener: rez
Bill Rosener: down a little bit further. I've got to correct. This is a mobile, responsive design. And now take a look, you can see the text, and that image
Bill Rosener: keeps repositioning and resizing
Bill Rosener: to make it always visible. So again, when you're dealing with the table, sometimes it's okay, because you want it in a very rigid format. And if I don't want Saturday and Sunday kind of going down to the next line there.
Bill Rosener: Okay, let me resize that a little bit
Bill Rosener: and come right over here. And here is what we're gonna start creating here.
Bill Rosener: Okay, so very 1st step I'm gonna do is I'm gonna open up visual studio code. I'm gonna come right up here to a file.
Bill Rosener: I'm gonna go to new file.
Bill Rosener: And I'm going to call this one assignment
Bill Rosener: 4 dot HTML and hit enter.
Bill Rosener: And Craig.
Bill Rosener: Okay, the very 1st step I'm gonna do is I'm gonna create a did tag.
Bill Rosener: And if I wanted to, I'll tell you I'm gonna go ahead and increase the font size just a little bit here.
Bill Rosener: and I'm gonna go with 20 pixels.
Bill Rosener: and if you wanted to, you can make yours a little bit larger.
Bill Rosener: and there we go. So I've got. I'm going to start my did. This is just for that top portion there with that image.
Bill Rosener: and then here in a little bit, we'll be working with those ladders there.
Bill Rosener: So at the top. If I take a look at that.
Bill Rosener: there was an image, and I want that image way over on the right
Bill Rosener: something go image
Bill Rosener: source equals.
Bill Rosener: and rather than
Bill Rosener: try to memorize all this, or type it all out. The easiest way be to go to assignment for
Bill Rosener: press on. Here's my son before. Press on the Simon 4 folder.
Bill Rosener: and here it is. Nsu dot png. So I'm just going to grab this
Bill Rosener: yeah, URL, copy it.
Bill Rosener: Come right back and paste.
Bill Rosener: Then, if I wanted to, I could put a width here and a height.
Bill Rosener: Let's put a width equals
Bill Rosener: 200,
Bill Rosener: and then this trick here is, I'm going to put style equals
Bill Rosener: float
Bill Rosener: to the right
Bill Rosener: and let me get
Bill Rosener: put this on a separate line here.
Bill Rosener: I mean, eventually, I need to close this if I wanted to, I actually could put an Alt tag here
Bill Rosener: and some description.
Bill Rosener: Okay, so here's what I've got. I'm gonna start a div tag.
Bill Rosener: I'm gonna increase the font size to 20 pixels.
Bill Rosener: I'm going to insert an image.
Bill Rosener: And then this image is going to float way over on the right. I've got an Alt tag, so help visually impair people, and I've got a width.
Bill Rosener: and I'll tell you what, at this point
Bill Rosener: I don't really care what text you use here. I'm just going to grab some text here and go to the initial web page and grab some text. I'm just going to grab some text if you got.
Bill Rosener: I don't care. Find some text there, and I'm just gonna paste that below.
Bill Rosener: And if I wanted to, I could put some hard returns here.
Bill Rosener: look at.
Bill Rosener: So I'm gonna start
Bill Rosener: my dib tag. I'm gonna close the division tag on increase the font size. I've got an image here. It's been floated to the right, and then I've got some text, and again, just go ahead and copy and paste any text you can find there and this one I'm going to come along and save it.
Bill Rosener: I'm now gonna right click open in default, Browser.
Bill Rosener: And there we go.
Bill Rosener: so I can see right now that logo is going to be off on the right. And my text is going to float.
Bill Rosener: Okay. So now, what we're gonna be working on
Bill Rosener: is inserting these letters and making them float as well.
Bill Rosener: Okay. So I'm gonna come on down here.
Bill Rosener: If you want. I'm gonna put a
Bill Rosener: dv style clear.
Bill Rosener: Okay? And
Bill Rosener: close. The did tagged.
Bill Rosener: And what was happening is we were floating stuff off to the right. We're now going to say, Okay, stop that we're going to stop clear or start fresh.
Bill Rosener: Now we're going to start another did tag.
Bill Rosener: This is going to get flow to the left.
Bill Rosener: and I'm going to put a with
Bill Rosener: of a hundred 60
Bill Rosener: pixels there.
Bill Rosener: Okay?
Bill Rosener: And at this point I'm gonna close that close the did tag.
Bill Rosener: Then I wanted it to say.
Bill Rosener: H, 2, I'm gonna put a line equals
Bill Rosener: center
Bill Rosener: letter. And
Bill Rosener: now we need to actually insert the letter a image
Bill Rosener: source equals.
Bill Rosener: And again, what you can do is
Bill Rosener: you've already got
Bill Rosener: the URL. But what you could do is get this 1st one here. So again, here is assignment, for I'm going to press on assignment for folder. I'm going to press on a dot. P. And G, and I'm going to simply copy that yeah, URL
Bill Rosener: and paste.
Bill Rosener: And I'm not gonna worry with
Bill Rosener: adding any alt tags or with on this one, etc. here.
Bill Rosener: So let's go ahead and save this.
Bill Rosener: Take a look at in the browser
Bill Rosener: and refresh.
Bill Rosener: And there we go. So I've got the letter A, and I've got it
Bill Rosener: right there.
Bill Rosener: Okay, at this point it's just a matter of a bunch of copying and pasting.
Bill Rosener: I'll change this to a P
Bill Rosener: and a B.
Bill Rosener: And if you wanted to, you could push those all over
Bill Rosener: and to see.
Bill Rosener: and the same.
Bill Rosener: and let me grab a few more.
Bill Rosener: I pasted that a few times here. So let's take a look here,
Bill Rosener: a BC,
Bill Rosener: d.
Bill Rosener: d
Bill Rosener: you
Bill Rosener: e
Bill Rosener: f
Bill Rosener: F.
Bill Rosener: It looks like we went to H.
Bill Rosener: G.
Bill Rosener: Angie Anne's
Bill Rosener: last one here. H
Bill Rosener: and H,
Bill Rosener: and I can. Yeah, next one. I'm gonna delete it.
Bill Rosener: Okay. So let me go ahead and save this
Bill Rosener: file, save
Bill Rosener: come back to my browser.
Bill Rosener: Sure, I'm on the right one and refresh.
Bill Rosener: Okay, let's take a look at the contents there. And sure enough, as I resize that.
Bill Rosener: I can see it's mobile, responsive.
Bill Rosener: The text is always visible.
Bill Rosener: And there we go.
Bill Rosener: Okay, well, in this video you learned about the did tag and creating a page that's mobile, responsive. And again, maybe taking a look at
Bill Rosener: an example, an incorrect. So tables
Bill Rosener: that's fine to make those. They're not maybe maybe mobile, responsive. But we don't want that Saturday and Sunday
Bill Rosener: kind of met whoops jumping around on us.
Bill Rosener: So here yes, I am going to have to scroll back and forth to view that.
Bill Rosener: whereas here would have been an incorrect use of tables. I've just got some text and an image, and now you can see, in order to read that I would have to scroll, whereas the bottom one, the correct, mobile, responsive, we can see that was being resized.
Bill Rosener: Well, hopefully, in this video, we again you learn a little bit about the Iv tags and more responsive. And I'll catch the next video next slide.