00:00hello today we're gonna talk about how to make a simple HTML old-school
00:08technology that still work who this video for anyone who want to learn HTML
00:17anyone who have no computer knowledge I remember I learned HTML when I was 19 or
00:2720 that was in the 90s and it gave me a little bit of a boost that I had you
00:36know like a young person I guess more young people have low self-esteem and you
00:46know my friends were in college but I was you know just working two jobs and it
00:53allowed me to do something on the side that you know allowed me to tell to to
01:00confirm that oh I can do stuff I can you know I'm not as dumb as everybody else as
01:08everybody as I thought I was so it is a very simple language and that can work
01:18for anyone anyone who want to to create a simple page for his or her own or family
01:25members the instruction will talk about only will apply to static web pages but
01:37these pages are often more than you and more than you need to for a single-use
01:49or small business before we start let's talk about what you need you need a
01:59simple text editor some pictures information information what I mean here is
02:05like you need to brainstorm you need to know what you want to say a new way by
02:10one website or web page let's say we have a simple restaurant and we want to
02:18create a web page for the restaurant that and we only gonna create one page here
02:25restaurant address and hours we might put a picture in so this is a simple template
02:33and let's talk about the black text first we have between the two brackets and
02:40this is how HTML work there's two brackets and usually come in pairs but
02:47sometimes you have HTML commands let's call them commands even though HTML is not a
02:55complete or a full programming language it's a declarative language but let's call them
03:03you know elements or whatever they are we have doc type HTML and you see the
03:11exclamation mark before and if you are doing this they copy these exact those are
03:18the skeleton of the HTML you need to be copied exactly the same way HTML you
03:25really don't have to you actually can write them in a capital verse verse you know you
03:36know small script but they it's not like it's not a capital you know case sensitive
03:43language but for this since we're learning we're gonna do it the same way as has been
03:51written so we have docu type HTML and now we have the HTML tag we have the HTML tag and the
04:02first HTML tag I have lang equal en for English and in the bottom of the document I
04:14have slash HTML tag that is to close the HTML document the head this next we have the
04:23head and the head the close head tag and in the head tag the meta char I'm not
04:32gonna go into it you it will your your website is static website will work without it
04:38but it is it's a good idea to put it in the title this is the title that can I go in
04:48the you you will this is the only thing you probably will see in the in this in the
04:56header section but it will be when you open the browser if you look on the top of
05:01the browser the browser sometimes have a name that on that top most people don't
05:07watch that but we put the golden walk title there and you we gonna put this
05:14later on we're gonna put the styling section here so we're gonna start the
05:20page but in general in the head tag there is no that you're when people who view
05:31site will never see it the body tag we have a body and the closing body and in
05:38the body tag we will write the full page and every page will start with each one
05:47mostly which is the header the title and the paragraphs are the P tags bracket P and
05:56the footer usually you have contact information you have we might put an
06:14email here and we but that's that is the skeleton of the web page and now let's
06:24write the web page in the body between between the opening body tag and the
06:30closing body tag we have the each one tag and we can put our title will come to the
06:37golden walk restaurant we have paragraphs the first paragraph we we are
06:46located at one to three a street you know this is our fictional location our hours are seven to five and if you see here I have a between in the black text I have the bracket will be R and the
07:14PR is think of it as the the enter the enter key when you're like the second line when
07:23you like writing a document but I'm still in the same paragraph because I want to put
07:29Monday to Saturday the bottom of the second on a separate line but I'm in still in the
07:38same paragraph it's helpful especially if you if you are typing in a text editor in
07:43Texas that there is narrow it's very helpful to do that and I have here this is this is
07:58the I want to put what is it I want to put a link to the next page so I will say a
08:12paragraph equal I have quotation mark between the quotation mark I put the menu page and and every page you have to save it
08:27this page and the second page you have to save it at ht dot html and I have let's say I have a I'm gonna make another page I'm gonna call it menu dot html and I will save it in the same folder if I have a different separate folder I have to put the folder name slash slash until I reach the
08:51the the the name of the document but it it's always easy even whatever if you are novice or if you are a professional programmer you can you it's recommended that you save all your file related file in the same folder and we say next page menu this was gonna show the blue color for people to click on
09:20click on and I will have a closing a tag the tag again is a link tag the footer contact us I might put email here you know but it's not really not this is not the scope of this small video oh I look I did put an email but anyway so
09:46this is how it looks like it looks like it looks like it looks like not very appealing website web page but we will go ahead and we do small tricks and style it so it will look like a professional page
10:03so let's go up in the header tag and we have an open style the closed style and in that style I will put the we gonna style the body and we actually gonna style the image later we will insert the image but we gonna put the style for the image since we are in this section
10:27the body the body and I have this squiggly bracket open and closed text align I want it to be center
10:36you see text dash align you write it exactly the same way two dots center and then the semicolon it's for the second thing in the same for the second command think of it this way in the same section which is the body so we have
10:56we have background slash color two dots black so we want it to be black and two dots color color that mean the text color two dots white very simple but it actually will this is a very simple way to make a website but actually your website will look professional and I'm gonna I and the image
11:23image with I said 40% I you can use the pixels or the EMS but we just gonna do percentage to make it simple because we are new to this and when you actually do the width it will your computer will not just the height as well
11:45as well and and that is it for the styling so I'm gonna put where I'm gonna put my my my image I imagined I want my my restaurant my header and I want my image after it and I want my contact information underneath
12:11so what I'm gonna do so what I'm gonna do I have the header I put my image here and the image you start the image is only one bracket one tag you don't have to put an opening closing tag so open the bracket you know image see CRC that is for the location of the image equal quote and you write the image
12:39and you write the image I have my image called food dot png the png is what is it saved as and I have here the alt equal and the same food image I have here the alt is for people who are blind or using assistive technology
13:04usually usually you know it's recommended to do that just in case let's say somebody wanna search your restaurant but they are blind
13:13they can you know you know get notified there is an image maybe they can ask what's the image for you know you can of course specify more what the image will be
13:27it will be but and then so let's look how our website look like and look doesn't look that bad for a very very short time we didn't spend a lot of time on it doesn't look bad at all
13:48and this is I actually you know and you know it is and you can definitely find let's say you created one for yourself for for fun or one for family member
14:07you can you can upload these websites especially static websites you don't you can find the place places like github or wordpress
14:22that can give you free space to upload them you can
14:30of course you can there's a lot of youtube videos that show you how to do that and you can find the domain name link it to that uploaded file
14:49and just a reminder this page this was the first page if you want to upload it you save it as index dot
14:59html index dot html index dot html this is what you always save the first page second page is you can name them whatever you want but like the first page
15:11index dot html and put all your file in one you upload them you upload them at once you know and you will have yourself a page
15:24and of course let's say we are doing this for real I can go and create a second page for the menu and that's it I have a page for my restaurant
15:36I didn't have to pay a programmer to do it and the page is informative enough that will fulfill all the needs I need
15:46and I hope this is helpful and I hope you find find it entertaining and you have a great day
15:56you
Comments