Web Design 101: Understanding How HTML, CSS, and JavaScript Fit Together on the Web

Hi. Welcome to the Vidya tutorial Web Design
101. As you might have guessed from the name, this
tutorial is for people brand new to web design who haven’t done
anything more complicated on the web than tag their friends
on Facebook. We will explore the basics of three technologies HTML, CSS, and JavaScript and how they fit together to form the backbone
of the web. So let’s get started. The files used in
this tutorial are available on Github at the link provided.
Please download them if you would like to follow along. You’ve probably heard of HTML. Every web
page is a bunch of HTML tags, also known as elements, in angle
brackets where you define all the stuff–like the text, images,
links, text boxes, drop downs, buttons–that is going to be on
your web page. The tags are nested to define logical sections
of the page, and the tags are usually intuitively named
so you don’t have to guess what they do. For example, this top tag tells the browser
that this is HTML. You might be thinking “Wow…really?”
but this is to distinguish from something different like XML, which is
the format for the newsfeeds you see on every blog site. The
whole rest of the page is just more tags. We will take a look
at the head tag in a second, but for now let’s focus on the
body tag. Inside the body tag is where all our user interface elements
are. The header tag, shockingly, defines the header
of our web page where in real life you might find a navigation
bar. But to keep things simple we just have an image. This
IMG tag is how we add images–in this case, the Vidya logo.
Outside the header, these h1 and h3 tags are for headlines where
text is bigger and bolder. These p tags for paragraph are where
we put text. Let’s scroll down a bit. The A tags are for anchor, which is another
term for a hyperlink to another page. And finally, the input tag
is how you create textboxes and buttons. As you can see, we have a button
at the bottom of the page that says “Show me something.” There are two important things to keep in
mind. First, all we have done is define the stuff that’s going
to be on the page. We havent said anything about colors, fonts,
dimensions, margins, or anything else that will make the
page pretty. Second thing, HTML is NOT code. Although a lot of
people say it is. Code is instructions you’ve written in a programming
language that will actually DO something. All we have done with
the HTML is lay stuff out. So let’s take a look at the web page
in a browser. OK! Well, everything is there–the image,
the headlines, the text, the button–but it is not pretty. The image
is huge; the text is all over the place and with a lame font. There
are no colors. The button looks bland, and when I click it, nothing
happens. CSS is how we make our web pages pretty. In
a stylesheet, you list what are called selectors representing
HTML elements, and then we describe the styles we want to see
whenever the browser encounters an element that matches that selector.
If that sounds confusing, hold on. We are going to use three stylesheets to solve
all the problems on this web page, but the cool thing is we
only need to write one. As a web designer, you will learn to borrow
from the great open-source work others have done to make
your life easier. The first stylesheet we will use is from Google
to give us the Droid Sans font to apply to our page. The second stylesheet
is from the Twitter Bootstrap project, which was created
by two guys at Twitter to provide web designers with a lot
of goodies out of the box. For our purposes, Bootstrap adds some
basic formatting to our page and some flair to the button. The
last stylesheet is a custom one we’ve created with some simple
selectors. Let’s take a look at that. As you saw earlier, every web page has an
HTML body element, and this body selector at the top of our stylesheet
defines the style for our body element. In this case,
it applies the Droid Sans font to the body–and therefore to everything
on the page since it is all nested inside the body element.
The header selector says that any time you find an HTML element
called header, which we do have as you saw earlier, give it the
Vidya red background color and center everything inside of it.
The IMG selector says anytime you find an IMG tag (Remember our
web page only has one image, the logo), give it certain dimensions,
background color, some space around it, and rounded corners. The other selectors work in similar fashion,
but let’s take a closer l ook at the A selectors. Remember, the A element
in HTML is how we define hyperlinks. With CSS, we can define
the color of our links in any situation–when the link has never
been clicked, when you hover your mouse over the link, and when the
link has been visited meaning it was clicked before and is now part
of your browser history. To apply all the styles in our three stylesheets,
we just need to add them to our web page. When we looked at the HTML in our web page
earlier we skipped the head tag, but that’s exactly where we add
link elements to let the browser know where it can find our stylesheets
and apply them accordingly. Now lets take a look at the same web page
with CSS styling of our original HTML. Now that looks a LOT better. We have some
nice colors and spacing. The rounded corners on the image are a nice
touch. The Droid Sans font from Google is a nice improvement over the
browser default, and the Twitter Bootstrap style applied to the button
is nice. The button style even changes when I hover over it. We get
that for free from Boostrap. But the button still doesn’t work. In order to make a web page do things, you
have to write code. HTML and CSS aren’t programming languages
you code in, but the programming language of the web is JavaScript.
In order to make our button do something, we need to write
a little JavaScript code and add it to our web page. We won’t get into detail, but this code
uses the beloved JQuery library, another great open-source project, to make
it very simple to find the button and tell it to change the color of the text
of the page from the default black to the color Vidya blue when it’s clicked.
Not the most exciting thing ever, but it gets the point across. Just as with our CSS from earlier, we need
to add the JavaScript code to our web page. Again we do so inside the
head element–the same place where we added our CSS. Once we do that, we
can return to the web page. Let’s click the button. Now it actually
does something. It turns the color of the text Vidya blue just as we wanted. And
with that we have a complete web page integrating HTML, CSS, and JavaScript. Let’s summarize. Every web page is built with HTML, and you
create HTML tags to lay out the structure of your page. You use CSS to
define how all the HTML is going to look. And you write JavaScript code
to bring your web page to life and make it do things. If you haven’t already,
dont forget to download the files used in this tutorial from Github and
explore these technologies for yourself. You will never learn technology
listening to someone talk. Getting your hands dirty is the only way to do it. We really hope you enjoyed this tutorial and
learned enough to get started on your own web design work. We just scratched
the surface here. HTML, CSS, and JavaScript are all rich topics,
and we will explore all of them in greater detail in future tutorials
and blog posts on the Vidya website. We hope you will check those out too. Thanks for watching. This has been Web Design
101 by Vidya.


Add a Comment

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