In this video, I'm going to show you how to create web pages using a computer language called “HTML” which stands for Hyper Text Mark up Language.
So, what is Hyper Text Mark up Language? Well, it’s a like a foreign language that only computer speak and that web browsers like Internet Explorer, Firefox translate into our language. So just imagine if you will that I'm teaching you a foreign language. [Foreign Language]
Just like every other language in the world, HTML has a set of Grammar rules that it has to follow in order to be understood. Without theses rules or protocols it would be just gibberish. [Foreign Language]. So, here’s today’s Grammar lesson for HTML. To get started, I've created a folder on my desktop called “my web page” and inside that I've got another folder called images so where I'm going to keep all the images for the web page.
Now, what want to do is open up notepad if you have Windows or Type pad if you have a Mac. I'm actually going to be using notepad plus, plus which you can download for free at the URL below. This is little bit better for programming because it keeps the code organized and color coordinated and things like that. But the first thing you want to do is got to filing and Save As and Save this as an HTML document in your project folder.
And you want to call it index.html and make sure to Save As type to set to all types and click Save. Now just go into your project folder and double click on index.html and it should open up a blank web browser. Just site this over to the right hand side of the screen and put the notepad on the left hand side of the screen.
Now, the first thing you want to know about coding an html is that everything has to be tag so that the web browser knows what its looking at and to tag something, it takes basically the same format for everything. And that format is less than sign, whatever you wanting to tag and then a greater than sign and the closing tag is less than sign a forward slash whatever you wanting to tag and then a greater than sign. So I just did one for an html to tell the web browser this is an HTML document.
I'm also going to create one for a header which is the header of the web page gives information about the web page. And I'm going to also create tags for the body of the web page and this is where all the links and pictures would go. Now, if you in between the header tags. You could put title tags so that you can title your web page. And in between the title tags, just type whatever you want to call your web page in between those tags.
Now, in between the body tags is where we’re going to put the content of the web page and what I just created was a paragraph tag which is just the letter P and in between those paragraph tags, I'm just going to type a sentence that I want to appear on the web page. Now, if you click save and refresh, it should show not only the sentence that you type. But if you look at the top of the web browser it should have the title of the web page. If you go to View in Page Source it will show you all the HTML that you just type out.
So, the next thing I'm going to do is I'm going to copy this sentence three more times. Then I'm going to show how to format them. To format in bold, you want to use the Bold tag which is simply the letter B, for Italics it’s the letter I, and for Underline it is the letter U. So if you put those tags around any tags, it’s going to format them. So if you say even refresh your browser. You should see the formatting.
The next thing I'm going to show you heading tags which it is portrayed by H1 through H6. H1 creates the largest font header, H6 is the smallest. So I just did for those headers and you can see the different size fonts. This is a break tag. Notice that it doesn’t have a closing tag. It is just BR and that creates a line break—break in between two texts. The next thing I'm going to do is center all the text, to do that just you use the tag center and put - create a closing tag whatever you want it to end and that will center the text in the middle of the web page.
Next thing I'm going to do is create lists. So, I'm typing out a couple of things that I want in the list and I'm going to create an organizer lists so that denoted by the tag OL and for each item in the list, you need to put the List Item tag which is LI. Put that -- put those around each item that you want listed and if you click saving and refresh. You’ll notice that it creates a numbered list. If you don’t want it numbered just change the OL to UL for Unorganized List and that will create a bullet for it.
Now to create a table, just use the table tags and the table has to have two things, a row and a column. The row it denoted by TR for Table Row and column is denoted by TD for Table Data column. And the table has to have at least one of those and you can copy and paste the columns for how or many you want or you can copy and paste the row and column to create a second row. So, that’s what I'm going to do. I'm going to take this list information and put the header in the first row column and I'm going to put the list information to the second row column. So I'm going to save it and refresh it.
Notice that it looks the same. We don’t have any attribute added to the table yet. Attributes gave you a way to customize each tag and to find out what attribute goes to a tag. You can go to HTML help.com and just do a search for whatever tag you want to find to attributes for. So here's all the attributes that can go with the table tag. You can do alignment, background color, with things like that. So, I'm going to align it to the center, change the border with the one and change the table with to three hundred. So now if we save it and refresh the page, now the table has an outline and it centered.
So, the next thing that I'm going to do is go to Youtube and I'm going to copy paste a couple of videos as a post to using the list. So there's one video and I'm going to copy this entire row and create a third row and paste the different video in here. So now if we save it and refresh the web page, I got the title of the list and two videos beneath in separate rows. So that’s how you can add Youtube, a videos to your web page.
Now, I'm going to add some attributes to the body and I'm going to add a background color, and when you do with colors in HTML. It’s best to use the HEX value. So if you go to colorpick.com, you can choose what color you like and it will give you the corresponding HEX value that you can then paste into your HTML. So, we’re going to use a background color of gray in a text color of white and now I'm going to add a link. To do that you want to use the anchor tag which is the letter and then space HREF equals and then in quotation you want to put the link that you're linking to. And then use the greater than sign to close up the first part of that tag and then type the text that you want linked. And then close out the anchor tag by using forward slash A.
Now, if you save it and refresh your web page, you should now see all the changes that we made as well as working link. The next thing I'm going to show you is how to add an image. To add an image, you need to use the image tag which is IMG for image. And then you want to use the source attribute, SRC and set that equal to the picture location. If it’s on the web, it will be HTTP: whatever.
But if it’s in a generalize location. If it is in a specific location, you want to find a way to web pages and then use the picture location in correspondence with where the web page is. So in correspondence with the web page, my picture located in the images folder, and then the name of the picture, so that’s where I'm going to put as the location. And you want to make sure you get the folders exactly right and just like the break tag, image tag does not require a closing tag. And now I'm going to go back to the body attribute to add a background image. And again, you want to make sure you have the folder to directory correct within the image of location. Now, if we save it and preview our web page, it should have all the pictures.
Now, what you want to do it upload this to the internet. There's several free website hosters out there. My favorite is the wordspace.com because it doesn’t use any ads. So, you can sign up for free account with them and once you do and you go to the member’s area. You should see a page like this and you want to go to FTP manager and create an FTP account. FTP stands for File Transfer Protocol and what we’re going to use that for is to transfer our files from our computer to the web page.
So now—now we’ll need an FTP client to do this since we have an FTP account. Alright and you want to go to filezilla-project.org and download filezilla. And once you start filezilla up, just add a new site and I'm going to call this tinkernut FTP. And your host name will be the user name you created .awardspace.com. And you want to set the log on type to normal and change the username to the FTP username you created as well as the password that you created. And then when you can click connect it would -- should connect to your website.
And now, all you have to do is drag your index start HTML file there and drag your images folder there and now when you visit your username on that website it should show up. So, I'm—mine was tinkernut.awardspace.com. If you don’t like that, if that’s too long, for a new want top level domain. The best way to get a free version of that is to go dot.tk which is this website and sign up for a free URL with them. So instead of tinkernut.awardspace.com, it’s going to be tinkernut.tk, alright. And that makes it very short. Alright, well that’s it for this tutorial for more to the tinkernut.com.
Transcription by:
Scribe4you Transcription Services