creating first website page with an html editor : TextWrangler

Al right, let’s make a new folder. We’re gonna name it web1. [SOUND] Let’s open Text Wrangler. I don’t have it on my dock here,
so if I go to my finder, click on applications right here. Go down to text wrangler,
I can double click and open it, or I can put this on my dock. Just drag it and drop it down here, okay. And now we can click it, it will open up. I’m gonna show you how
to open up an index, or I should say a website file as html or a web page, cuz you can open up
the document two different ways. And some students or
some people get confused about that. So here’s my,
I’m gonna write my code in here. And here’s my web page. That I’m going to view it in. All right so if we’re in here,
we’re gonna write our html chat tag. We’re gonna close the html tag. We’re gonna have. A head tag and close the head tag. This is where the title goes for
our website, We can come down here and
make our body tag. Let’s close the (inaudible). Whatever I want to write is going
to go inside the body tag here. I could write P tag for paragraph and
then close the paragraph tag. Inside those two tags I am going to
write Hi, this is my first website. Smiley face. [LAUGH] Okay, and up in our head section, we can do a tail tag, close the tail tag. Make sure you spell everything
correctly or it will not work. Details in organization
is key to web design. I’m gonna write my name, For the title. So, Title is for
search engine optimization. It’s for Google or Bing or Yelp or
whatever those things are. So when I save this,
I’m gonna go to file, save as. It’s off the screen, you can’t see it. I’m waiting for it to go,
you see my little spinning circle. We’re going to call it index at html,
hyper text markup language. Index is your home page all the time
whenever you make a web site. I need to click on the little
drop down arrow here. And find my desktop. Find my web1 folder. And I’m gonna save my
index.html right here, save it. Now I’m gonna open my Web 1 folder. I can drag and
drop this right into my Chrome browser. See it’s loading. There it is, hi this is my first website. See this is my first website and
the title shows in the tag on the top. If you right click, and view page source on your website,
you’ll see that the html. So you can go to anybody’s website and
see their html. Okay, so if I close this one and
try to open up TextWrangler again. I could bring this open and I can drag and
drop this into TextWrangler. Or I can drag and drop it into
Chrome to view it as a website.

6 thoughts on “creating first website page with an html editor : TextWrangler

  1. Short video, but of great value for beginners like me who are struggling to find a clue about how to get to that first website page. thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *