In our first recording this week, we’re going to take a look on how to create your first web page, how to add text to that page, how to format that page and how to add an image. So first thing, I’ve created a folder for the project today. I’ve called it CIS363, and inside of that, I have an image that we’ll be using later on in the video. So, first thing I want to do is start up a basic text editor such as Notepad or Notepad Plus Plus and I want to then save my file inside of that folder. So, I’m going to go to ‘File’, choose ‘Save As’ and I’m going to change my ‘Save As’ type from ‘.text’ to ‘all files’ and then I’m going to call it ‘Index.html’. So, I can give it my own extension, which in this case is ‘.html’. The basic file name is ‘Index’. It’s standard to name your homepage something like ‘Index.htm’, ‘Index.html’, ‘Default.htm’ or ‘html’ so that when the user goes to your website, the web server knows to look for that default page. And then, make sure you’re saving it in the proper folder. I’ve all ready got mine set to that location and I’m going to go ahead and click ‘Save’.
Now, if I open up my folder, I can see that file there and by the icon, I can tell that it’s an ‘html’ document. I can right-click on it and open it up in one of my browsers. I’ll open it up in Internet Explorer. And, you can see right now, there’s not a lot of content to that page as I haven’t added anything to it, but that’s what we’re going to do next. So, first thing we’re going to do is start to structure our page. So, where going to go into our text editor and I’m going to do some copy/paste, ‘cause I can talk faster than I can type. First thing we’re going to add in is the doc type and the doc type tag is a tag. So, first of all a tag—we have these—is the information encoded by these brackets. So, we have the less than and greater than symbol around whatever else is in between that denotes a tag. And, the doc type tag is the first thing we’re going to put in our ‘html’ file and it’s going to tell the browser what version of ‘html’ the page is written in. In this case, the doc type that we have used with just the ‘html’ tells the browser this is an ‘html’ five document.
After that, we’re going to tell the browser that we are in fact, creating an ‘html’ document with the ‘html’ tag and we are going to have a pair of these. So, most ‘html’ tags come in pairs with an open and closing tag. So, you can see here, I’ve got the open tag here and then the closing tag with that slash tells the browser that we’re at the end. Within the ‘html’ tags, we’re going to create two sections. We have the head section, which includes things like the title for the document, any scripts that we might be using on the document, any styles for CSS or Meda Information for search engines, things like that. So, that’s the head section.
We also have a body section and again, these are going to come in a pair of opening and closing tags. Then, the body section is where the content, such as text, images, list, hyperlinks, all of those types of things go into there. Alright. So, there’s the basic structure and I’m going to go ahead and save this and then refresh. Now, of course, there’s no change ‘cause even though I’ve set up the structure, I haven’t added any content. So, first thing I’m going to do is go into the head section and set up a title for the page. This is one of the things that we can do in the head section. You can see here, I have an opening title tag and the closing title tag and then the content in between. So, I’m going to save my page. You have to save each time and when you refresh it in the browser, you’ll see the differences.
Now, you’ll notice right now the title of the tab or the document indicates the pathway, because last time I didn’t have a title. Now, if I refresh with that title, it actually gives me that title. So, whatever you put between these two title tags, is what shows up there. Now, in the webpage itself, we’re going to add some content. So, the first content—I’m just going to type in some text here or add some text which is going to say, “My First Webpage”. I’m going to save this. Refresh. And now, we can see that text over there.
Now, we’re probably going to want to format that text, so this is going to be the ‘Header’ on my page, so I’m going to use the heading tags. These are H1 through H6, so I’m going to start with H2 and these come in pairs again. So, we have the opening and the closing. So, you put the opening tag before whatever you’re formatting and the closing tag after it. I’m going to then save this. Refresh my page. And you can see now, the formatting has changed a bit. It’s larger text. It’s bold. And, it’s actually got a line break before and after it. The options again are H1 through H6. H6 is actually the smallest so if we were to do this in H6, you would see it’s very small. H1 is the largest and that will give us the largest option that we have with the header tags. And, we can refresh and that’s now larger. Now, I’m going to want to separate out my header on my page from the content and I’m going to do that with the horizontal rule—a line going across. The HR tag, for Horizontal Rule—this does not bracket any other content, so there’s no open or closing, so we both indicate open and close in the tag itself by including the slash before that final symbol. So, I’m going to go ahead and save, refresh, and now I’ve got that line going across the top.
Now, I can start to add some additional content to the page. So, we’re going to want to look at how we can make text bold. So, we can do this using the strong tag right there. We may want to put some text in italics so we’re going to use the ‘EM’ tag for emphasis to put things in italics and I can save this, refresh, and you can see the text that is bracketed by the strong tags is bold over here. The text that is in “EM” is in italics here. Now, you’ll notice that even though I had a line break there and I can add as many line breaks as I want, the browser doesn’t recognize those line breaks. So, if you want to have a line break, you’re going to need to tell the browser that you want that. So, you can do that using the “BR” tag and like the “HR”, it’s just a single tag, so we’re going to put in that extra slash and if I save this and then refresh, now I’ve got a line break. If you actually want a blank line, you would need two “BR” tags to do that.
So, if I duplicate that and then ‘save’, I get two line breaks, gives me a blank line. So, that’s how we can set that up. Additionally, you can create a whole paragraph of text using the ‘P’ tag and this will have a line break, both before and after it. So, you can see here, I’ve got my ‘P’ tags with the ‘P’ here and then the closing ‘P’ here, and then this is just text taking out of our course shelves. So, I’m going to go ahead and save, refresh and now I’ve got a paragraph there and you’ll notice before that ‘P’ tag, it did a line break, so that’s how we can create a paragraph of text.
For the lab this week, you might also want to do some list of items. You might want a numbered list or a bulleted list and we can do that using the ‘OL’ and ‘UL’ tags. So, the ‘OL’ tag stands for Ordered List and here’s an example here—you can see I’ve given it a label just before it and then I’ve got the ‘OL’ opening tag and the closing ‘OL’ tag. And then, each item inside of that, I’m going to use a pair of ‘LI’ tags to create the individual items in the list. So, I’m going to go ahead and save this here, refresh and now you can see my ordered list here with the 1, 2, and 3. If you wanted bullets instead of numbers, just use ‘UL’ for Unordered and then save, and then refresh and we can see that updated on the page.
The last thing that we’re going to do in this video is add an image to the page, and we do that with the ‘IMG’ tag. Just like the others, we’re not bracketed anything here. We’re not bracketed text so we’re going to have it self-closing with that slash there, but we are going to need to specify some information. We’re going to need to tell it the source of the image. So, basically, what’s the name of the file that we’re loading? So, you can see here, we have DevryLogo.png. If you don’t know your extension and you don’t see it like it is here, you may need to turn those options on, on your computer. So, in this case, on this windows computer that I’m using, I can go to organize, folder insert options, then view and you’ll notice it says, ‘Hide extensions for known file types’. That’s by default check. I’ve unchecked it so that I can see the extensions.
So, if I check it, click ok, the extensions go away. If I go back to folder insert options view and uncheck it, then those come back. So, you may need to know your extensions when you’re creating your files, ‘cause that’s important. So, that’s Devrylogo.png, so I’m going to add some information to that ‘IMG’ tag with the source equals Devrylogo.png. And, you’ll notice the value of that source is in double quotes, so you need to have those quotes there. And I can save this, refresh over here, and that image will show up. We actually want to include a couple more pieces of information with those images. So, you’ll notice here, when I look at that image, it gives me the dimensions of 82 width and 52 height. We want to include that information in the tag as well and I’m going to copy and paste from my source.
So, I’ve got width equals 82, height equals 52 and that will denote the width and height. You don’t want to change the file size with those. You want to make sure that the width and the height actually match. And, finally, we might want to include some alternate text so if the image doesn’t load or if somebody’s on a screen reader instead and wants to be able to see what the page actually says, we can use the ‘ALT’ tag with ‘ALT’ equals Devrylogo in this case and that will tell the reader what it actually is. So, I’m going to go ahead and save this here. Refresh. Again, no difference but we have that extra information in there.
One last thing I want to show you on the screen or on the images here is it’s common practice to actually put your images in a subfolder called ‘images’. So, I’m going to create a subfolder, call it images, and I’m going to move my image into there. So now when I go back to my page and refresh, it’s not going to be able to locate that image ‘cause I didn’t tell the browser where to find it. I told the browser it was in the same place at the ‘html’ file, but it’s actually in a subfolder. So, you can see here, the use of the ‘ALT’ text, it’s telling me Devrylogo, but I need to indicate to the browser that it needs to check that images subfolder. So, you put in the name of the subfolder and then a slash and then—let’s go ahead and save this. Refresh. And, it can now locate that image.
So, that is the last piece for this video here. That should help you out a lot with the lab this week. You can set up headers, set text to be bold or in italics, add some paragraphs with the ‘P’ tag, add in some lists and some images. I hope you enjoyed creating your first webpage and I’ll see you in the second video where we look at how to add hyperlinks.
[End of Audio]