Lesson 2 - XHTML Tutorial – Creating our First Webpage

Lesson 2 - XHTML Tutorial – Creating our First Webpage

Hello guy’s this is TutsTech Author and welcome to your second XHTML tutorial. Now before you start to what a white do is open a new file and you can do this in one of three ways. You can go to menu bar and press File and then click New. You can press CTRL+N.

Or you can just click this new icon right there in this can open up a new blank file. So once you do that your program or file should look blank just like mine basically. So go ahead and before start typing a way slam your fingers against keyboard listen up because I'm enticed him that's very important.

All the websites are made from something called tags. Now tags are pretty much the pieces of the website. So for example if you wanted to put a picture on your website you need a picture tag, if you wanted to put a link on your website you need a special link tag, if you want a greater button on your website and you need a tag for your button and so on and so on so pretty much all the website is a bunch of little tags combined into something that make you know a complex website. So in order to make a tag here's the basically out of it you press less than “<” and then you write the name of your tag like on the paragraph tag is “P” in and you're right the greater than “>” sign. So it's a < (less than) and > (greater than) sign and something in the middle in this case “P” for paragraph on “IMG” is for image for pictures.

Example:

For Paragraph “<p>”

For Images or pictures “<img>”

Anyways you get the idea. So let's go ahead and career first tag now. Now check it out. I'm not in me going in depth about this first tag but you needed for every webpage it's a special tag that you only use once per webpage and is called the doc type tech now go had < and > and inside press ! Or explanation is above the one so anyways after that press DOC to you why he press space and press HTML.

Exampl:

Full Code “<!doctype html>”

Now again like I said I'm not can be going in depth about what this tag means. It's basically telling your browser what type of document it's trying to look at by anyways. It's just a formality of technical things almost will be going back to it later but for now just put in your file and don't worry about it. Now go ahead and give her social spray said and are end less go ahead and start typing some real tags that we can understand. Now the basics of any website is pretty much the HTML tag your entire website is going to go in between your HTML tags so go ahead impressed less than “<”and make a tag that says “HTML” and press greater than “>” now go ahead and press enter couple spaces and make another tag that says less than “<”and now you want put “/” input “HTML” nice you can see I have two HTML tags slightly different nursing are right what the heck is going on.

Example:

<html>

</html>

Well first of all HTML tag pretty much tells your browser are a browser I'm about to make website anything I put him between here is can be in my websites. So this tag means I'm going to start here in this tag with a little “/” means I'm been finished here. So that is the basic structure for a beginning and an ending tag it's pretty much less than the name greater than and for ending its less than “<” “/” same name like “html” greater than “<”.

Example same name:

<html>

</html>

So that is a basic HTML tag now anything that goes in here like I said is can be part of your website so let's start in a little deeper. Every website you see every single webpage you've ever been to be made up of two parts the first part is called the head the second part is called the body. So what is a head and was a body the head is were all the browser information the technical stuff that you don't see when you go to webpage and this includes keywords for search engines, the title of the webpage may be some browser info all of this crap it goes in the head. Now the stuff that you see the pictures that images the paragraphs of text this goes in the body so whatever you say. I'm been make a head in the body you note all the technical stuff and that in all the cool stuff in the body by the way for these tutorial return be working with mostly the body because you know wrong word search engines over at the house we are website looks. So anyways let's go ahead and create head tag right now so let's go ahead and press less than “<” greater than “>”in an inside press “head”. Now under it was go ahead and make the ending “head” in now anything you type in between here is can be in head of your webpage.

Example of head:

<head>

</head>

So if your member about 30 seconds go I said that one of the things that you can put in the head of your webpage is the title so let's go ahead and inside the head between opening and closing let's go ahead and make to title tags title to open and title to close and make sure you put that “/” to signify the closing.

Example of title:

Tag title to open: <title>

Tag title to close: </title>

Now anything you ring between here is going to show up in the title so just go ahead and type. This is the TutsTech Blog.

Example:

<title>

This is the TutsTech Blog

</title>

Now first thing on one point now is this. I know I have all my tags on separate lines but you can also have two tags on one mind I just put all my tags on separate lines generally to make everything easier to read but if you wanted to put on the same line you can another thing is that you might notice that everything is kind of going inside one another like a sandwich title goes inside head in all this is inside HTML this is because you need to embed tags within another you can have on you know HTML head HTML head title HTML title HTML it can't crisscross everything needs to be with in one another is that way your browser knows write your title goes inside your head in that entire thing.

Go inside the webpage so every put this outside the webpage about our right what the heck phone on your probably going to get error message. So anyways that is how you make ahead in the title tool websites so on I wasn't the guys about body in this tutorial about the midway for next tutorial for that sort. First was go ahead and improve you this title and soon got in order to save a website you need to do this go ahead and press file and save as and when you're save as box. Just save file into desktop in saviors anywhere go ahead and name your file index. Now index is pretty much the main name for you know it's pretty much the homepage. So let's go head and say that is index and make sure you don't save his text which want to save as is a special file type called HTML. So scroll down until you see something called hyper text markup language as HTML.

That's pretty much the type of file is for to much the website file so whenever you're always go-ahead and save this first and look here's my HTML are here so whenever your computer opens in HTML file it automatically knows that's post be a website in that your browser stores open this. So is double-click this in my browser opens. So you can see Microsoft Word open all Photoshop then open your computer knew that this was website. So that's why it took a browser to open it nicely see we have not thing right now.

Because if I open Notepad again you see we don't have a body so that's why we don't have anything. All we have is titles that check this out on our website we have a title that says. This is the TutsTech Blog. So we do that by making to title tags and typing “This is the TutsTech Blog” right there.

So if we change it so says “This is the title Steve” right there in save this again now when we refresh our page you can see her title change it. This is the title Steve.

So that tags Basic webpage with the basic title. In the next tutorial I’m going to be doing is creating the body and you actually making some stuff that you can see on the actual webpage right here.

Thanks for reading my tutorial. I’ll see you guy’s later.