 Good morning and welcome to this week's edition of Encompass Live. I am your host, Krista Porter, here at the Nebraska Library Commission. Encompass Live is the commission's weekly webinar series where we cover a variety of topics that may be of interest to libraries. We broadcast the show live every Wednesday morning at 10 a.m. central time. But if you are unable to join us on Wednesdays, that's fine. We do record the show and it is then posted onto our website for you to watch at your convenience. And I'll show you at the end of today's show where you can access all of those archive recordings. Both the live show and the recordings archives are free and open to anyone to watch. So please do share with your friends, family, neighbors, colleagues, anyone you think might be interested in any of the topics we have on the show. Here in Nebraska, the Nebraska Library Commission is the state agency for libraries. We're like the state library for all our libraries in the state. And this is for all types of libraries. So you will find things on our show in our archives for public libraries, academics, K-12, universities, corrections, museums, it's just all over the place, which is a good thing. Any type of library, there could be something on our show as long as it's something that is going to do with a library or something libraries are doing. We have shows about services and programs we offer here through the Nebraska Library Commission to our libraries and library staff in the state. Services and things, resources you might have access to news, new programs, new ideas from libraries. We have library staff that come in and do, we have guest speakers that come in to do presentations and shows where sometimes talking about they're doing cool things, they're doing in their libraries reporting on them from both in Nebraska and across the country. We, and then we also have on Nebraska Library Commission staff that sometimes do presentations, which is what we have this morning going on here. So we do, and there'll be a mixture of things on the show too. Sometimes it is demonstrations of these actual services and products, book reviews, just web tours of websites and services, it's all over the place. Really, our only criteria is that it's something to do with libraries. And before we get into today's show, I am going to talk briefly about the Nebraska Library Commission and our response to what's going on right now in the country as far as the COVID-19 virus, the pandemic going on. For our Nebraska libraries, we actually have those of you who are logged in here from Nebraska, we have on our website blog post here, right? It is pinned to the top of our main page for resources for libraries that'll always be at the top even as we post new items to our blog. This will always be pinned here. We also have a link to any libraries that's reported to us that we have heard about who are closed or accommodations they're doing, whatever they're doing in their libraries, what their services are at the moment. On the post about the pandemic resources for libraries is, there's information here about, we can get to the list where you can submit to us if you're in Nebraska Library what your situation currently is. We have some maps showing where services are modified around the state. So if you're wondering what libraries are doing, based on this information they submit to us, there's a map of that and a map of where you can get Wi-Fi where libraries are sharing their Wi-Fi out into the parking lot or wherever near the library. So if you're looking for a connection, that's a place to go to. On our specific pandemic page, we have lots of different information depending on what your situation is, business, health, what do I do with my kids, et cetera, et cetera. The specific they'll highlight here are our page for our libraries. We're constantly adding new things here, so please do keep checking up on it. We have an orange by resources, different topics here about library closings. We've just recently released our own example of a phased plan for reopening libraries. That is something that may come up, you know, soon. We don't know when each library, you can determine yourself how you would do it, but we have put some, you know, we had people were asking us for help and assistance and just, you know, what do we do? So we did, other states have come up with some of these as well. So using theirs, we have maids modified and put up our own. So this is just an example, a way you could do it. We don't have any, there's the Nebraska Library Commission here in Nebraska. We do not dictate to our libraries when they can be opened or closed or how any of that works. But we did post this as an example of something that you could use for your own purposes if you need to figure out how am I going to reopen, if I'm going to be able to reopen as things change. And then we're always adding if there's been webinars or sessions or information from ALA or IMLS or CDC or whoever, anything that may be useful to libraries, what we post on here as well. Also, right, something I want to highlight too, there's something new that's happening right now in Nebraska, our regional library systems have gotten together and purchased an account with a reader zone to run summer reading programs this summer. So if you're trying to figure out how am I going to do summer reading here in Nebraska, we have a statewide set up for that. There's a form you can use just to sign up for it and become part of it and be able to use that. They do training regularly, so definitely sign up on that form. If you want more information, you can reach out to your regional library system in Nebraska and get more information about it too about what trainings and things would be coming up for that. So I just want to make sure you guys knew we have those resources out for you for our libraries in Nebraska. If you're joining us not from outside Nebraska from another state, check and see what your state library is doing or your state library association. They may have similar pages out there with similar information specific to you and where you are. So let's get into today's show then. Amanda, I'm going to switch over to you so you can get your page up while I do whatever you want to have on the screen up. Today's show is HTML. Has anybody done it? When's the last time you did HTML? I do it every day, but today's show is our pretty sweet tech. Our technology innovation librarian Amanda Sweet. Hi, Amanda. Hello. Joining us from home. And she does once a month, usually the last Wednesday of the month, she comes on and does her pretty sweet tech session. This is so if you're a techie librarian or you're into more of the tech side of librarianship, definitely one of the shows to keep an eye on and to sign up for. And she comes on once she does regular blood posts for it on different technology related topics. But then once a month, she does a webinar for us to whatever she wants to talk about. And today we're going to talk about the basic building blocks of the web, each HTML5 and CSS3 and how you can use that to build your websites. I've been using and I don't remember I was thinking about this. I know you're also listening to talk about you're doing some more in depth training as well that you're creating Amanda for us. Yeah, and I was trying to think I've been in libraries for over 20 years, 25. I don't can't remember exactly I'm going to give that away. But I don't think I ever actually took an HTML class or an official training or workshop at all how to use it. It was just what it was before we had that very nice and easy to use. You know, just, you know, busy week type things, use WordPress. It's easy. You don't have to think about it. I just had to kind of learn on the job, I think. Yeah, that's pretty much what I did, too. And I'm there may have been. I don't recall anything when I was in library school, when I got my master's degree, if there was any classes in that either back then. But it was all new to library worlds then. But I do use it as I mentioned every day here and there a little bit. I still have to dig, you know, there are easy, easy editors you can use. But I always have got to dig in behind the scenes and fix things sometimes because they just don't work the way I want them to. So I'm glad to have an actual real training for this because I've never been through anything official myself. So I think this would be great. So I would just hand it to you. And for everyone knows, there will be a link later with all of these resources and documents. As you can see, she's using Google here, Google Docs. When the recording is available in the archive, it will have that link for you available as well. So you can have access to all of this after the fact. So don't try and scribble down all the things she's got written on here. You'll have that for your own use later. So I'll just hand it over to you, Amanda, to tell us all about HTML and CSS. So can everyone see the HTML, CSS webinar sheet on your screen right now? Yes, I am seeing that. So this I just linked into the chat and go to meeting. So if you open this, you'll have all this on your station right now. This sheet has a link to all the different resources and everything that I'm going to go over in this presentation right now. So you definitely don't have to scribble everything down. So right now we're going to go over more or less what HTML and CSS is and put that into a larger context because you can walk into a library and say, I want to learn HTML and CSS. Then the librarian might give you a resource packet and say, go to town. But what do you do with that after it? I'll give you an example. I was in a maker space that we're putting together in a library and a teenager that was maybe 15 or 16 years old walked over to me. And she said, I really, really want to learn how to code. Tell me how to code. And I for a second I was like, OK, cool. This is awesome. But then I said, well, what do you want to code? What do you want to do? And she said, I don't know. I just I was told I really, really, really had to code. And I said, OK, cool. Well, what are you interested in? What do you like to do? And she said, I guess science. And I found I talked to her for a while and I found out that this was something that she had learned from her parents and from her teachers. We had been pushing STEM so much that it lost all meaning for her. And all she knew was that she had to code and she had to stem. And so how can we as librarians step back from the need to code and step back from the need to stem and give that meaning? So that's why instead of just launching into HTML and CSS, the basic skills simmer down a little bit. Just step back and we're going to look at web design and development team roles. How was a website actually made? And who are the people behind it? Focus on the people. I sat that girl down. I pulled up an infographic that I had made and I showed her the people behind a web development team. I showed her user experience designers and web developers and front end web developers and back end web developers and full stack. And then I showed her the project analyst and I showed her all the different people that are behind a website. And then I said, well, do you want to learn how to talk to the different company that's trying to make a website? And do you want to be able to get the requirements of that website and then communicate it to the rest of the team? Or do you want to be able to get the graphic designs and do you want to be able to communicate with that project analyst and show people what that website is supposed to look like? Do you want to get the graphics and the content and everything all together and then pass it off to a web developer who will bring it to life and code? Do you like the art side of it? Do you like the code part of it? And the HTML and CSS is more for a front end web developer. So that front end web developer. And I will open this here. This is a skill set that's growing. It's fluid. And because the internet has grown so rapidly, every single company and every organization thinks about this role differently. So if we're going to be helping to connect these learners instead of just shoving STEM and coding down their throat and put a face and a name to it, how do you help them navigate the chaos of the internet and try to organize their thoughts as they're trying to figure out what they want to do and who they want to be? So this is why I put together this sort of infographic that says, okay, so I want to start learning this, but how? And we have the look at the big picture here. Learn the people. What do you actually need? This is one person's opinion, but it's a good launching point. So don't start with this. Start with why? This is shoving STEM down people's throats. I think that's a big problem. Yes, in general, I mean, it's such a big buzzword, but like I said, what do you really need? What do you really mean? And the kids just like what you said, they're just getting confused. They don't know what they really need because they've just used the phrase and what is that? Yeah, what does that really, really mean? Yeah. So I'm going to pause here and ask, why do you want to learn HTML and CSS? And you can just put it into the chat. Yeah, you can type into the question section there if you want to. Why are you here today? And I can... Because this is something we don't really think about too often. We're told this is the big thing and this is what we're supposed to do. We're supposed to know it, but why? Yeah. Let's see, we've got want to help support tech teachers and students. Oh, love that. Communicate. Having some to build and design and manage a website. There you go. Absolutely. Let's see, someone says, I have some skills, but I always like to brush up on skills. Absolutely. I have worked on our website at past libraries. I've worked at... No, to edit our library page more than the default editor allows for. So to be able to do other things. Yeah. To brush up on my skills, I'm a front-end web person for our library. I also teach these skills to others. I'm here because I wanted to build a new skill set and I am using Google Sheets and our programming, our studio for course reserves. Brush up on skills. A lot of them are coming in, so I'm trying to get you all to see what they're all there. Some of my younger co-workers talk about it, so I feel I need to know more about it. Yeah. To enhance library programming and move into the future of tech programming. To help with content for the website, to learn how to build a website. A lot of this, yep. This is something that's very similar. I used to know 20 years ago, much has changed working on a new project. Yep, you need to update your skills. To improve and promote our library. Oh, and here's one that sounds similar what you're talking about. I'm told I should teach adults coding, but I really don't know what that means. That's exactly what you just said, yep. I learned programming in the 80s. So did I. I learned programming when I was in high school, what it was back then. Today, I want to understand the building blocks and see how I can learn for myself and to see what skills are needed to help the public. To learn other programs to code, to add content. So this person says I'm a new librarian. I just thought this might give me some info to update and jazz up our site. Sweet. Yeah. So a lot of, somewhat of what you were talking about and a lot of people are just, yeah. So since this is at the end of my sheet and would be at the end of the presentation, I'm just going to touch on this quickly now. This is a set of learning paths that you can take using HTML and CSS basics. So if you want to learn more about using HTML and CSS in your existing content management system like WordPress or possibly Drupal, whichever, whatever you happen to be using, then you can use something like this. If you want to learn more about how you can become better in a specific role or how you can learn more about the web development and design process, there are resources here. That'll tell you the differences between the major development roles and it'll tell you some different guides and how the teams are parsed out. And then it'll tell you some different kind of off the wall things that you can use. HTML and CSS as a launching pad because right now augmented in virtual reality and a whole mess of other things are being embedded into websites. So if you want to be a web developer, that can be something that'll set you apart from other people that are also trying to do the same thing. So this is an option if you want to start building your skills beyond. And these are options if you want to start incorporating new activities into the library. So the people that wanted to build a workshop or teach people how to use coding, you can use the teach HTML and CSS in the library. I developed a workshop system that'll help you teach HTML and CSS to adults and teenagers that are 16 or older. Sometimes younger kids are good with it too, it's up to you as to whether they're ready for that. And there's also a whole mess of resources to teach kids specifically and to be able to teach things that are related to it. So like I was saying with the augmented in virtual reality, being able to embed mini game style systems into your websites will also set you apart from the whole slew of other people that are also trying to do the same thing. So what we're going to do right now is I will show you what's new with CSS and HTML. So we have the resources to learn HTML and CSS and web design and development. We're going to do this in the format of that workshop because the way that you learn HTML and CSS right now is the way that you would also teach it, which also comes in handy. So I'm going to open up our workshop here and you can use that workshop sheet as a basic resource sheet as we go through this webinar. And let me just open my worksheet here. I think I closed it. What happens when you have a million things open? It's a problem. I have it saved in another spot and I'm going to start closing things. OK, so this is our workshop guide. And so I recommend that before this class that you have people watch just a basic tutorial for how all this mess works. And this Learn Code Academy will give people just a quick preview. And there are links to the handout so you can use them in your own library. So now we're going to open up a text editor. I use Adam as a text editor and a text editor is basically what you would use to type code and then you would save that as a .html file and you would open it up in a basic web browser. There are more difficult ways to code a website, but this is the best way to learn for beginners. So this is just a basic website document. And this will look like a mess of information that if you have never seen HTML CSS before, it'll look like a foreign language. So this HTML is a tag. This tag right here is the start tag. And it goes inside these two little brackets on the side. And then at the bottom, HTML is your end tag. You know that it's an end tag because it has this little slash at the end of it. And this tag represents a general element in an HTML document. This specific element is denoting that this is an HTML sheet. And that's what this doc type up here is. So now your head over here, you see these two end tags here. This is where all of your main document information goes. So when you go into a website, this title is what shows up in this little tab up here. And in this head, you can also indicate which characters you're using and you can indicate your metadata, what you want Google to be able to find when they're searching for the website. And you can put a little mess of information in there. And I'm just going to fix my indenting here. And then in your body, this is what everything would show up on the actual screen itself. So when we run this website, and I did that really quickly because I'm using a package that's used in Atom, it's called the live server. And the live server automatically opens up a tab in your default web browser and it will show everything that's in your screen right now. So now you can start matching this. Here it says this is a heading and it's inside of these H1 tags. And it's because this is a top level heading. And you can see that here. And then these in the P tags, these P tags are a paragraph. And it just says this is a paragraph. So you can have up to six different size headings. And they just go H1, H2, H3, H4, H5, H6, third level. And the reason I like to use this package is because if I didn't have it, I would have to save my document in my text editor, which is Atom in this case. Then I would have to go over here and refresh this. And when you're making a million changes like this and you want to find out immediately what it looks like, that package comes in handy a lot. And inside the workshop resources, there is a link to download Atom with a tutorial that shows you how to install that package. So I'm not going to go over it now because it's there for you. And then another common thing that you'll probably want to be able to do is make a list. So now you'll see on this that every time I add something new, I start with the beginning tag and then end with the end tag. And if you've done HTML and CSS before this, this will look really familiar. This part hasn't changed much. And then on the inside, we're going to do Li, which is the tag for a list item. And item one. And there's also shortcut keys that are built into a lot of these different text editors. But I'm not going to go over them now because we're just going to start learning the basics right now. We'll save this and this is how you get a list. So I'm going to go into the chat here and I'm going to check and make sure that... So is everyone kind of getting a basic understanding of how this document is working? Are there any parts that are unclear? We have some comments coming in the question section. So this is great. Yes, it makes sense. Yes, Uso wants to know what is the UL, that tag? That's the one that they didn't catch with you. That one was unordered list. That's what it stands for, yep. So you have unordered list and you have an ordered list. And the ordered list would basically look like the exact same thing, but it would say one, two, three, four. And we'll use L, item one. And I have an extra bracket in here. Actually, I'll show you what that looks like. It'll help. So a lot of times when you go to a website, you see that floating bracket in here. This is why. And it's because I just accidentally typed one extra bracket. So those accidental things that you see on websites, they're there for a reason. And you can also add additional headings on here, just to break things up a little bit. So you kind of get that. Thanks for clearing that up. Oh, sorry, what was that? Someone said, did I wondered about that? Thanks for clearing that up. Oh, yeah. So then when you want to start adding different symbols in here, too, there's also a special way that you can do that. So did you ever notice that sometimes the and symbol doesn't show up correctly in a lot of different web pages? Yes. And that is because so let's just try to put a regular and in the second level heading, of course, it actually works. But you're supposed to put AMP, which stands for ampersand. Because and this is because of the different way that web browsers interpret your code, each different web browser renders this code differently. I'm using Mozilla Firefox, but the font might look a little bit different and the spacing might look a little bit different on Chrome or on Edge. And so on a lot of the different resources that are out there to teach you how to code, the HTML resources, a lot of them came from the early 2000s or maybe mid 2000s. And some of those are still using Internet Explorer. Internet Explorer is no longer a recommended developers tool. Microsoft isn't supporting it anymore. So if you do still have IE as a web browser, maybe don't. That sounds harsh, but if you have a professional web developer that you develop primarily for IE, they will laugh you out the door. You need to have you need to be realized. There's so many other ways that people are accessing your sites now. Yeah. And when you do build these websites, test them across multiple different browsers because they they will look a touch different. So now you get the basic idea that every single element needs a start tag and an end tag. That start tag will indicate to the computer what kind of element it is and how it should render it in the page, as you've seen here. And if you don't have this end tag, chaos ensues because the computer doesn't know that you just tried to end this. So now it thinks that all the world is ahead is a heading. So it changed it automatically by default, changed everything to a heading because we didn't close that end tag. But when we put that tag back in, it fixes itself. So now let's go to where you can learn a whole bunch more about this because you're not going to learn everything in this one webinar. I'm going to go to a website called W3Schools. And W3Schools is kind of the ultimate reference source for all things current and all things HTML and CSS. So we go to their main site, go into learn HTML. I'm going to maximize the screen here. And you'll see links to a lot of the things that we just covered here. So you have your lists are down here. You've got your headings up here and your paragraphs. And you can start to learn all of the different things that there are to learn with this. So the best way to use this resource is to actually physically try it. So you're going to read through this and learn how this actually looks. And then you'll go to the first example and try it yourself. So this is their internal. It's an online text editor. And you'll see that it looks exactly the same as the text editor system that I just had set up with Adam and our regular Firefox web browser. And the best thing that I can recommend is that you get used to learning from different text editors, just because it looks different on your screen, the information is the same. You see that this whole format exactly the same and the way that this refreshes and we run it. Exactly the same. And then we go into we can change when you dissect apart this different list, this link here, this link is inside of a paragraph tag. It's inside of that paragraph tag so that it renders correctly on that web page. And if I take out this P tag right now, it will indeed look exactly the same. But if we were to try to add other elements inside of that paragraph and other text, it would start to look a little wonky. So that's why W three schools just recommends that we nest this inside of that other tag. And you'll see this a h ref will indicate that you're linking over into a different source. In this case, it's linking over to a specific web page. So this is going to link us over to the W three schools HTML tutorial set. And this inside the bracket inside here will indicate what shows up on our screen. So if we were to change this and run it, this changes. So if you want the physical part to change, you change the stuff that's outside of the brackets. And then you make sure that this a tag is closed. If this a tag is not closed. Then everything after this. We'll also appear to be a link. And so we only wanted this to be the link, but because we didn't change, we didn't close that tag. The system is rendering everything after that as a link. So we put that back in. And now this is corrected and we can click on it. And it goes to W three schools like it's supposed to. So this is actually the best, quickest way to learn HTML that I found. And you can also grab from this. And a lot of you might actually already use this already. It's a really popular resource. It's awesome, isn't it? Yep. It seems to come up when I just when I'm like scrambling and struggling for something and I just Google. And I just Google, how do I make it look like this? And it always seems to come up in the top and other results anyway. So it's a great resource, absolutely. Right. And so this is how you would start learning. Everything. And so this is kind of where we start to kind of draw the line here. We say, OK, so you can learn all the things on here. But how much do I really need to know before I just start making other things? And I always ask, would you memorize the entire dictionary before you try to speak? And probably not. I mean, never say never, but probably not. So this is why I put together the HTML skills cheat sheet. And so you go to your regular W3 schools and it gives you the world, which is awesome. But this will just tell you how to start. It'll tell you just the basic essentials that you need to make just your standard website. We went over these headings, the paragraphs. We covered links in W3 schools. And we would go over, we went over the lists and pretty much everything. Video is kind of a cheat sheet because a lot of YouTube does it for you already. So while you're looking at that, someone does have a specific question. And I know this is something I'm sure that a lot of people will look for themselves as well, because this is what images and pictures and graphics on your website. Where do you add graphics? What tags were used for doing adding images to a website? So the images, it's the image source here. And actually, one good valuable thing that you can learn from W3 schools is how to effectively use the code from here and plunk it into your own code because the image source, it's not going to change whether you copy and paste it or whether you physically manually type it yourself. It still looks exactly the same. So we go into the try it yourself. And you can just grab this copy. So this picture, this is why it's important to know file paths. And where this picture is being pulled from. So right now, and I'll just show you this, if we copy this and plunk it into our code and our text editor, and I'll put it right under this top paragraph, then we'll save it. And I'm going to go back into our live server here. So we save this, but you'll see that nothing showed up. So. Well, technically, something did show up. This truly showed up right here. And that's because this is our alternate text. The alternate text is what screen readers would read if a visual impaired person were accessing your site using a screen reader. And it's also what the site would access if it can't find your file inside of your file system. So this picture is being stored on W3 school's internal file system. It's not available on our file system. So we actually need to plunk this image into our file system. So I'm going to go into Pixabay, which is a good website that I use for free images. I'm partial to Frog, so I'm just going to search for that. Oh, this little dude looks cool. So I'll download him. Hey, it didn't ask if I was a robot. That never happens. It knows you. It knows you. OK, so now I'm going to go into... I opened it. I wanted to go to the file path. So this is in our download folder right now, and I'm going to rename it to Frog. And it'll be important to know that it is a JPEG. So I'm going to cut it and pop it into... Now we need to know what this file path is, which is up here. Desktop and Index. Oh, I just saved it straight on the desktop. I never do that. So we're just going to put this right on the desktop here. I must have been in a hurry because that's not regular practice. It's supposed to be inside of a folder. So now we go in here and we can update our picture. So now our frog showed up. There it is. And so we specified, like in here, it specified the width and the height inside of our HTML. That's one way you can do it, but you can also do that using CSS. And if you use that, if you do that using CSS, CSS stands for Cascading Style Sheet. And if you've been programming for a while and I know that some of you said that you'd been introduced to it 20 or so years ago. So you might not have been used to the CSS as it is today because there is inline CSS and there is external CSS. So inline CSS would show up in the head up here and it would be in a style. And then you would put in your rules in here. And so you would say image. With but we're not going to do that because this is already in here. And this is not recommend recommended practice to be able to put it in the inline here. Instead, you would want to make an external sheet. So you would go into file, new file. And you'll say file. Save as. And style.css. So this dot CSS, that file extension indicates that it's a Cascading Style Sheet and it's in this sheet that we're going to put all of the. Any kind of color changes or any kind of size changes or anything like that that will be associated with this index dot HTML file. And this is also where the file path structure comes in handy to because the best way to learn this and you'll learn it more thoroughly than what I'm talking about right now. Is by going back into our tutorials here. So we're going to go into W3 schools. You'll click on the CSS and you want to go into. The CSS how to and it'll tell you the ways that you can insert CSS into your document. And it's this line right here that's going to be most important. So we'll just grab this. Mostly, I was just lazy and I didn't want to manually type the entire thing out. But it works. Copy and paste. Absolutely. So this link relative, it means that you are linking this HTML sheet over to your style sheet. And this is saying that the website, the web browser should render this link as a style sheet and that this is a text slash CSL. This is our file type and this is the link to the file path. So I just called this style. And we'll give this a save. And now we want to test and make sure that our style sheet is talking to our HTML file correctly. So we're just making sure I didn't screw something up. So the quickest way to do that is to just change the color. And I'm going to go back in here because I want to show you the different ways that you can add color to a page. I usually use the hex value. So if you've ever seen a little hashtag with six with a combination of six letters and numbers after it, that is the hex value to a color code. But HTML, they will also accept the physical they typed out written word. So if you go into try it yourself and you'll see this on here, this is in the and this is where it starts to get tricky because in here they use the HTML style and not the external style. So in these examples, these are really valuable and you'll learn all the different names that you need and you'll know how to reference colors and how to make the change. But you want to start making that mental shift that says, OK, I know the general way that CSS can be linked into a document. I know that I'm using the external style sheet. I know that then you want to start asking yourself what's going to stay the same and what's going to change in the formatting. So what's going to stay the same is this tag. I hate tomatoes, but we're going to use it. And then we're going to pop on over into. I was just hoping against hope that they would have one that. Uses the external and they don't. OK, so we're going to change the color of the H one. So what I did there was in the example, they were using a background color of tomato for the heading. But I wanted to change the actual color of the title. So I just took color colon, the word tomato and a semicolon. If you don't have the semicolon, it will still work. But you it will kind of mess with the rest of this document. So if you try to add anything else under here, it won't work. I'm actually not going to. So we know that our style sheet is talking to your index file and no, a border never actually showed up on there because I didn't save it. So then the major things. I'm starting to hesitate a little bit because I just looked at the clock and it's already 1054. That's OK. We can go as long as is needed. If we go a little over, that's fine. Just so everyone know, yes, officially our show is scheduled from 10 to 11 a.m. Central Time. But if we have a lot of questions that you want to ask or, Amanda, if you want to share some, you know, whatever else you want to share, we can go as long as is necessary to get through it all. If you as an attendee need to leave at 11, that's OK. That's all you allotted for this. We are recording the whole show and you'll be able to watch the rest of the recording at your leisure later. So. So here's what I can do just to speed this up a little bit. I do have one question that came in about images since we're on that right now that I'll throw at you right now. So I want to know if an illustrator wanted to add an image from a camera roll, how would it compare with using pixabay.com? It depends on what quality of pixel it's being saved in and if it's being converted into a scalable vector or if it's just a JPEG. So a JPEG, when you try to resize it beyond a certain size, it'll start to pixelate and it'll look terrible on a website. And if you want to have it fitting into a certain size box, you want to be able to manually crop that because if you try to change this, if we were to try to change the width smaller without affecting the height, you're going to get a weirdly distorted frog. So you want to try to when she when they save that file from their camera roll, they want to save it at the highest pixel that's possible with their camera. And if possible, you'd want to take it into an external software and convert it into an SVG, which stands for Scalable Vector Graphics so that you'd be able to shift it and shape it without distorting the pixels. If you know that you want it to be a smaller image and that you are not using it for a background, then the size doesn't matter as much. So honestly, it depends on how you're planning to use it. If it's a card, if it's a thumbnail on a card, it doesn't matter as much. Is there any specific thing that anyone wanted me to cover before I go into my quick cheat sheet? If you have any questions, go ahead and type in the questions section. I can see those and read them out to our presenter. For anyone who is also wondering about the archive recording, yet we're recording the entire show today and it will be posted onto our website. And when it is ready, I will let everyone know when it's available as well. And you also just keep checking our Encompass Live page. And Pixabay was the web page that Amanda was talking about. P-P-I-X-A-B-A-Y. You can just search for that. It's a place for free copyright available pictures. And it is free for commercial and non-commercial use. So go to town, but double check and make sure it applies to every photo that you're using. Yeah, pay attention to each one as you decide to use it, yeah. So what I'm doing right now is I am opening up a... This is the project file that I'm using for the HTML CSS workshop. And since I've already put it together, it's easier for you to see what the completed thing looks like, including file structure. So normally what it would look like is you would have one file that would contain all the files for your website. In this case, I called it portfolio. And then you would have a file for the CSS, a file for the images to keep them all contained so you don't have a mess of files down here. And then you would have one file for each of the main pages. So we have a contact page, index page, products page, and services page. There are standard naming practices for this. If it's one word, it's usually all just lowercase. And then there's also an upper camel case and a lower camel case. I usually use lower camel case, which means that the first word is lowercase, but the second word is uppercase. The first letter of the second word is uppercase. And you can see that in some of my CSS here, if we find a photo. Okay, so I have one on the index here. So this is what I'm talking about. The first word is lowercase. The second word, the essence storybook is uppercase. So this is kind of what it, when it all starts to come together because this is our index page. The index page is always generally going to be your home page. So that's how I have this mapped out. And if this is a little bit disjointed to you, I'm sorry. Usually I would teach this a lot more slowly than I am right now, but timing. Yeah, this is just a one hour on average session. And I think that's as good of a basics intro, getting to see it. And then having that research, the document that's available afterwards is really where a lot of the learning can happen, your own experimentation and practicing with it. And honestly, adjusting and manipulating existing clean code is probably one of the best ways you can learn because I just taught you a lot of the elements as they are in a disjointed separate way, but then translating that into a website is a different thing. So this portfolio site is kind of the basic building block of the initial practice of a website. And one of the major reasons that people give up web design is because they spend a year learning all this stuff. And then they say, well, why can't I make perfect websites and websites that look like BBC or Amazon? And one, it's because those websites are usually made by teams. And if you are building a website on your own and writing your own content and finding your own images and your own, you are your own user experience designer. It's going to take a lot longer than places like Amazon that have, I don't even want to know how many people are on their team. And how much they get paid specifically to do that, yeah. So when you're trying to find design inspiration, don't compare your skills as you're learning to people that have been doing it for years because that's the best way to give up. And we have a question that came in earlier that is kind of related to that, which I think is a good general question. Would you consider learning HTML easy, intermediate to learn or difficult to learn? HTML on its own, I would consider easy. When you combine it with CSS, I would probably bump it up to intermediate. When you combine the whole thing with JavaScript, it tips over into the intermediate hard. And again, that's relative to the person too. I think a lot of it is trial and error and experimentation. No. Yeah. Just thanks, Amanda, for answering that. Yes. All right. So I think the best thing that I can do for you right now is give you a walkthrough of what this HTML document means. I won't go through the whole thing, but I'll go through the main points. And then I'll show you how it interrelates with the CSS file that's on here. So you already know the doc type is indicating that it is an HTML file. This HTML element is where all of your HTML code is going to go. So this is always going to be at the start. And the end tag is always at the end. The head is where your general meta information is going. So we have writing portfolio, which is what's showing up in this main tab. So people know what they're looking at. The link is, as we saw before, what's linking over into the CSS. And then we have our body, which is everything that is on the page. So our navigation menu, our content, if we had had a sidebar and our footer is all inside of our body. So now this is probably going to look a little bit unfamiliar. So this div class is what we are using to indicate on the HTML file that we want, that we want to link it over to the CSS. So let's go into our CSS here. So on here, you see we have div class and I called it white. You can call it pretty much anything, but that just happens to be what I used. So now we go into our CSS and then you go down and find white. So now we're learning how to read the code. Because if you join a web development team, you're going to spend a lot of your first amount of time reading the existing code and finding out the lay of the land and what happened. And you want to be able to link everything on here and understand what it means. So now we go down to our nav. And this is a tag that just indicates the element that is on the page because HTML five is what initially introduced the nav, the section and the footer and different tags like that to indicate how the website will render different areas of the page. And this nav is the link of menu, like the menu link system that we use to get around our page. And so this there's two ways that you can two major ways that you can make a navigation menu. One is using an unordered list and you would just style it so that the links would kind of float out to the right. And they would instead of going straight down, they would go across. And the other way is by using just a straight list of links. So when you're reading the code here, you want to find out if there are any classes and those classes would indicate that you're you want to find a CSS document. And you also want to read and find the file paths and the file paths you want to make sure that if you're using clean code, everything in your file system will have a corresponding file path, otherwise you're dealing with dead code. And as you're changing out code, you might change the files or you might meet with a team and you say, well, we're not going to put a products page on there. We're just going to do this. So you might have, you might be able to clear out some of that old code with save your versioning. And so we go into our active. We just found an active. We'll go into our CSS. And then we scroll down until we find. Active on here. And I'm going to cheat and just search. There. So now you see that this looks a little bit different. And it's because this active is also. This active only applies to the a tags that are inside of that top nav. So that's let's go in here. So this is how the CSS starts to get a little messy here. And it's because if we had. This active tag. We don't want it to apply to everything and all the text that is available on here. We only want it to apply to the actual link. So that's why we're tying the active class to the a link. And we don't want it to apply to all the links on the entire website. So we have to add in and say that it only applies to anything within the class of top nav. And we know that the class of top nav. It starts with here. And it ends here. If we hadn't had this closing tag. It would think that this top nav would apply to everything on this page. And then you would get an error at the bottom. Down here that says that. One div wasn't closed before. The end. Your page will still render, but it'll probably render incorrectly. And that's why we have this indenting here. And it's because. This is our clean code because when you start getting a longer document like this, you want to be able to match up your start tag with your end tag to make sure that everything is where it's supposed to be. And to help you troubleshoot because. If you've been coding late into the night. You might have missed a semi colon or a bracket or a slash. And you will bring your forehead against a wall for 20 minutes and then smack your forehead when you realize that all you missed was one. Yes. I've been there. So now let's go into our CSS here. So what's going on here is in our top nav. And. I commented out the CSS so that you know. All the CSS that belongs to the top navigation. And so that you would know to match this up with everything in this section. Some coders don't do that. And it's because most coders aren't teaching. But. This is the document for learning. So in this top nav, the overflow is hidden. So that when we resize. You don't get that spillover and it doesn't lead this page isn't responsive. That would be the next thing that you would want to learn after you learn the basics of HTML and CSS is how to make this responsive so that you want to change your sizing. Everything shifts size and is still able to be viewed on that single size screen. And the background color. This is our hex color. So this is. That coloration that. I guess I would call it a teal. I got that from. So there's this awesome website. Called coolers.co. And it is a hex color generator. Cool. And it will eventually load. So this is where I got that color. If you already have one color that you're really attached to you can type it in here. And then you can lock it in place. And then when you hit the space bar. It'll choose a bunch of matching colors. So. Complementary colors. Right. So. It's terrifying. So I use this for pretty much everything. And so that's where that hex color came from. And so now the top nav a. It's floating to the left. So it's kind of. I didn't cover floats in here, but you can learn about it on W3 school. So instead of going. Straight down. They're kind of. Up into the right there. And so the text align, you would think that since it says text align center, most people think that it would be in the middle of the page, but it's actually text aligned in the center of this little box. Right here. And so the color black is the text color. And the padding is this kind of empty space that's on the left and right here. So if I were to change this. To 20. Then it would change our spacing there. And I'll make it a little more obvious. There. So we kind of that padding is what changes that spacing on that block. So this is 40. We'll drop it back down to 20. And now these got narrower. And if we want to make it a little bit taller of a box. Then you can change that padding. On the top and bottom. So that's what kind of impacts that. Text decoration none. If you had had an. Ordered list or an unordered list. That little bullet point that's at the front. So if you add text decoration none, that bullet point will disappear. And that's why on a lot of these navigation menus, you'll see that just by default, but some of the new versions don't need that anymore. And font size. You can change it and indicate it by pixel or by. And. Pixel is kind of an older way to do it, but it still helps to know. If we were to change it to 25, we have a giant one. And now the, you can also add hover states. So the, remember that top nav is impacting only the links that are in this menu. So when you hover over it, this is our hover state. The background color is the school shade of purple, which is complimentary. And the. Actually, I don't really need this because. So this is where I was playing around with it. I used to have a lighter color. And then I had the color that was going to turn white. One hover, but I don't need that anymore because it's going to be black. And black. So this is a code redundancy. If I get rid of this, nothing will change. Except my keyboard isn't working. So I had a keyboard go wonky. And absolutely nothing changed because it was just a code redundancy. And this is our active state. So this is the page that we're currently on. And it's this, I made it the same color as our body background. And the color is also black, which is also redundant. Because it's already black up here. And we're already at 1116. But you kind of get the general idea. And one general question that sounds like, you know, I think it's very. Useful to other people too. Someone is saying, I am from the generation that did everything on HTML. What is the advantage of adding CSS? It makes it easier to update your versions and you don't have to. So that was probably from when you had to do all the inline styling within HTML itself. And they also didn't have a CS3 or CSS3 CSS3 open the page. Open the pathway for a lot more CSS frameworks. So CSS frameworks makes it easier to bundle HTML and CSS together. And if you don't use the CSS. Itself, then you won't be able to go into the more modern web design. And the more modern, modern web design, it lets you. Say, for example, you wanted to code about 15 different websites. And you know that you really liked your navigation menu system and you really liked your footer system, but you might want to change just small things on each different thing. You'd be able to code that web snippet that you already did. You'd be able to keep the HTML and the CSS and you'd be able to bundle it as a component and put it into that CSS and HTML framework. So it just makes your life easier. Yeah. Easier, more modern, kind of like a modernization of website design. Yeah. They're always coming up with something new. Yeah. Yeah. And so I'm going to have one specific question. I'm not sure if it's something you could quickly show or not, or show where it is on the 003 schools page. How do you insert a mailing list feature within the index page? Do you want to do it as a database? Do you want to do it as a... I guess I'm not sure exactly what a... Yeah, I'm not sure. And the person had already logged off. So if someone does want to ask Amanda that specifically, you can reach out to her on our web page if the person watching this recording can clarify. I wasn't exactly sure what they meant either. Because you probably need SQL or a database system or a PHP form to do that. So I'm not sure you'd be able to do that with just HTML, CSS. It's like an extra thing. Yeah. Yeah. Something separate. And then once I have a little clarification about... I'm still not clear on the relationship between HTML and CSS. Is CSS nested within the HTML or are they two different platforms? Do some people just use CSS? No. So HTML is necessary for CSS to exist. So HTML is the language behind it. Yeah. So technically they're both related languages. HTML is the basic building block system. So it's the paragraph, the heading, the list, and everything that would appear on the screen. But if you didn't have any CSS, it would just be black text on a white screen. CSS is what adds color, style, and layout to the page. So back in the day when the internet was first being born, that's where you saw like a whole bunch of just boring black text on a white screen. And that was all it was. Yeah. And HTML and CSS, it added color to the world. Mm-hmm. So it has a good metaphor for us. HTML is the room and CSS is the floor plan. This is true. Yeah. Some is awesome. And then the original questioner says, awesome, I get it now. One is the structure. Yep. Yep. Yeah. And they work pretty well together. I think so. And there is, that actually did remind me of one more resource that is, it's a series of free HTML and CSS websites that you can use and manipulate on your own. And that's a good way to learn. And that is on the practice HTML and CSS sheet. And it's called color live. So this one will help you practice reading code and finding out how it all works together. So if we were to download one of these, we're just going to preview it. And you can kind of see how it all works together. And my computer just decided to go really, really slowly. But you can download the HTML CSS files from this. And I won't go through that whole thing because that's going to take a second. That's a great place to go yet to see how it all works. Yeah. Yeah. And the link to that is in the sheet that I gave at the beginning. Which is also linked from our session page and you'll have that in the archive. We'll see that. Yeah. Do we have any other pressing HTML and CSS questions? Yes. If you have anything desperate you want to ask Amanda right this minute, you can type it in the questions section. I can read that after her. Otherwise, you guys reach out to her later. Because we should probably wrap things up here in a bit. Anything, any last minute things you want to wrap up with Amanda too? Pretty much it. I think that most of what you'll probably need is in the resource pack. And the, if you want to teach HTML CSS, a lot of that is in the workshop that it put together or the, and the activities in the library sheet that's on your handout. And here's that, you know, demo class that you can use. And you can download this and it'll just walk you through it matches up with the workshop sheet that is also in that handout. I'm going to start closing things because there's quite a few things on here. Yep. So lots of thanks. Thank you so much. It's been great. So I want to know how can they best contact you? Amanda, just your email. I can put in my email address. For those of you listening, Amanda's email here in, for everyone here in Nebraska Library Commission, Amanda dot sweet at Nebraska dot gov. And if you forget, then, if you go to the library commission's main website, all of our staff contact was on there. Yep. Okay, I'm going to pull back presenter control to my screen to so we can, I can show you all of this here. Yeah. So thank you. That was very helpful. It was a lot. It's a lot for one hour. Yeah, so we ran a little over and that's fine. But I think all those resources will be really helpful to everybody. That's, that's mainly what it was all about. So this is our main and compass live webpage. And here is the session for today, which I've already added a link right here to the session notes, everything that she's been talking about it will open up. Go to Google where you can see everything that was in that packet all the links to everything that she's been talking about all the resources and the tips and everything. So this is already as part of our session page. And when this becomes our archive, that link will be there as well as well as a link to the recording of today's show. And our archives, I'll show you here, this is our upcoming shows, but here at the very bottom of the page is our archives. If you don't have the link to our show, if you just Google or use your search engine of choice and type in and compass live, that's the only thing that's called that on the internet so far. So you'll be able to find us pretty easily. Here's a link to our archives. This is all of our archives here. The most recent one will be at the top of the page. So today she'll be there. Should be done and ready by the end of this week as long as go to webinar and YouTube cooperate with me and with getting the recording up there. It will be added there. Everyone who attended this morning and registered for today's show will get an email from me letting you know what's available. And we also pushed out on our various social media. But you can also just check here and see when it comes up. And this is our full archives of the show. If you're interested in watching any of our other shows, there's a search feature here. You can search the entire archives or just the most recent 12 months. This is a very long page. I'm not going to scroll through the whole thing. This is the full archives for and compass live. We premiered the show in January 2009. So we have all going on 10 years worth of recordings and archives here. So as you are watching any of the recording shows, just pay attention to the original product broadcast date. Some of the things here may be outdated, old information. Links might not work anymore. Some services or products might not exist anymore from 8, 9, 10 years ago. But certain things will always be useful. Reading lists, how to do HTML, things like this. So just pay attention when you're watching something in our archives if it might be old. Both are all of the archives are free and open to anyone to watch. You can just like here's less weeks. You can skip chip click on it. You click on the recording. It opens up the YouTube recording right here. Pause that. And you can watch that. Nothing is hidden. There's no charges. It's just out there free. Also links to any presentations. This is the one from last week. Her slides are available there for people to look at as well. And today's show will be there too. So thank you, Amanda. Thank you everyone for attending today's show. We also have a Facebook page where you can see I've got some links to here. So if you are a big Facebook user and like to use that, give us a like over there. I post reminders. Here's a reminder about logging in today's show. When the recordings are available I post on here. Updates about here's our presenter for the next show. Meet our speakers. So anything encompass live two or three times a week. Not a huge amount. But if you'd like to use Facebook to keep up on things, give us a like over there. We also have a hashtag for encompass live and comp live that we use. We post things onto Twitter or Instagram. So you can look for those out there as well. So that does wrap it up for today's show. Help me join us next week when our topic is Nebraska Access, a library branch for your patrons living room. This is something specific to Nebraska libraries. So it would not be available to people outside for Nebraska citizens. Not available to people outside of, we're not in Nebraska. This is a program the Nebraska library commission has with funding from the state of Nebraska where we provide access to certain databases for Nebraska citizens. So if you are a Nebraska library or a Nebraska resident, take a look at next week's show and we'll hear all about that. You may have the same kind of thing in your community, in your life, in your state. So check in to see if your state library may be offering something similar in your area. The way things are considering certain times we are in right now. This is a good resource for people that have some online virtual access to information and resources they may need. And you can see all of our upcoming shows here. I'm actually just working on getting that May dates schedule. June is all booked up and I'm already getting some July things narrowed down. So keep an eye on our schedule here and sign up for any of our other upcoming shows. And Compass Live will keep going throughout all of whatever's happening now. One of the benefits of being an online show is that we can broadcast from anywhere. As you saw, I'm here. Amanda is at her home and we can keep having these educational trainings going as long as we need to. So we got some more thank yous coming through, Amanda. Thanks for, I'm very motivated to learn HTML and CSS now. Yes. I'm glad to hear it. Yeah, success. And thank you for making all this free. Yes, we are happy to have this be free out there for anyone to watch. It's not specific to just Nebraska libraries or Nebraska people. It's open to anybody. All right. So thank you so much. Good to see you, Amanda. And camera person. We're doing a lot of working from remotely and from home here in our Nebraska Library Commission agency. As in for many other people are so it's nice to see people's faces sometimes. All right. So thank you everybody for attending. Thank you, Amanda. And hopefully we'll see you on another time on Compass Live. Bye-bye.