Build a Website - Design and Development Terminology

Kevin Frey: Hi! I'm Kevin Frey from Trans Effect LLC. Today we're talking about how to create a website. The first thing I'm going to talk about is what a website is and then I'm going to give you an overview of some terms that you'll need to know along the way. First a website is a collection of webpages. Website and webpages are often used interchangeably but technically a website is made up of a series of webpages. Each page is programmed in a language called Hypertext Markup Language or HTML. HTML is essentially tags that describe the elements of a document and while that may sound complicated I'm going to show you what I mean here. The tags to which I'm referring are highlighted in green, the head is an example of a tag, we have an opening tag here and a slash in front of the tag name indicates that it's a closing tag. In HTML all your tags need to be closed. When I mentioned before that a tag represents an element in document, what I mean is, an example of an element would be paragraph. The paragraph tag is simply a P enclosed in brackets. This is an example of an opening paragraph tag and a closing paragraph tag and you can see that the contents of a paragraph tag is in fact a paragraph. That's an example of how HTML tags work. We'll get more in depth later. The next major term you'll need to know is Cascading Style Sheet or CSS. CSS is a way of describing how you want your HTML to look. For example I've put a CSS notation in the HTML file that we were using as an example earlier. CSS is made up a selector, a property and a value. The selector represents the HTML tag that you want to modify, I've highlighted it here; the property is the attribute you wish to change which is here and here; and the value which is obviously a value that you'd like to set. So what we're doing here is we're changing the paragraph tag if you remember from earlier, we're giving the paragraph a background color of black and color which represents text color of white. Your properties and values will always be surrounded by these little braces here, the curly braces as they're commonly known. So if we look at the result of this style, you'll see that the paragraph has a background of black and a text color of white.

Now you hear a lot about web design and web development and the terms are often used interchangeably but really there is a difference; and in analogy the values that covers HTML, CSS, design and development is building a house. When you're building a house you start with a foundation and a frame. HTML acts as the frame of your website; CSS sort of covers up that frame. I mean it's like applying dry wall to the frame of the house. Design is painting the walls and moving in your furniture and setting up your rooms. Development is like wiring up a speaker system throughout the house and then setting up a complicated entertainment system. It involves a lot of extra work but provides extra functionality. That about covers it for the basic terms that you'll need to know. Next we're going to talk about getting your domain and setting up hosting.