Lesson #1
OVERVIEW + HTML
LESSON #2
CSS
LESSON #1
OVERVIEW + HTML
Where does programming come in?
Where does html come in?
...and what about the browser?
What html looks like
<div>
<h1>Khurram Virani</h1>
<p>
<em>Bio:</em> Khurram is the head instructor at Lighthouse Labs in Vancouver.
<em>Email:</em> kvirani@lighthouselabs.ca
</div>
These are called angle brackets: <>.
Text inside of angle brackets is HTML.
Everything else is just normal text.
A pair of angle brackets (with HTML inside) is a tag.
<div>This is normal text surrounded by HTML tags .</div>
Here, we're surrounding normal text with a "DIV" tag.
Notice how you indicate a closing tag by prefixing its name with /.
The tag and the text combined are referred to as an HTML element.
There are many types of HTML tags, including:
<div>, <p>, <a>, <h1>
Each type of tag affects the text inside of it in a different way
Some tags, including <div> and <span> hardly affect their inner text. We use them for organizational and reference purposes, such as separating a piece of text from its surrounding text so that we can style it (e.g. make it blue).
Let's pick apart the example
<div>
<h1>Khurram Virani</h1>
<em>Bio</em>: Khurram is the head instructor at Lighthouse Labs in Vancouver.
<em>Email</em>: kvirani@lighthouselabs.ca
</div>
<div>: Separates a block of text from the rest of the page.
<h1>: Makes text large, like the text in the title of a blog post.
<em>: Makes text bold.
We've learned about the concept of tags
Now you only have two more concepts to learn before you can code HTML:
NESTING + ATTRIBUTES
NESTING
Nesting is the act of placing an HTML element inside another HTML element. You can nest tags infinitely -- as your project requires it.
In our previous example, our <em> tags were inside our <div> tag. Our <h1> tag was also inside our <div> tag. Accordingly, this will be how the resulting web page is structured.
Therefore, there's a 1-for-1 relationship between what you code in HTML and what you get on the page.
ATTRIBUTES
Attributes give tags superpowers.
Here's a normal DIV element:
<div>A sentence.</div>
And here's a DIV tag with a title attribute:
<div title="This is a DIV.">A sentence.</div>
ATTRIBUTES (CONTINUED)
Attributes are placed inside an element's first tag.
They are placed after the tag name.
They are structured as follows:
attribute="value"
You're assigning (=) a value to an attribute.
Notice how the value goes inside quotes.
TAGS CAN BE USED WITH EVERY type of ELEMENT
But some tags only work with specific elements.
We're going to learn the two most fun tags:
SRC + HREF
HREF ATTRIBUTE
HREF attributes can only be used with the <A> element.
An <A> element is what defines a link.
Thus, <A>Click me!</A> turns the "Click me!" text into a link.
The HREF attribute is what defines the location that a link takes you to:
<A HREF="http://google.com>Click me!</A>
SRC ATTRIBUTE
The SRC attribute is pronounced "source."
It can only be used with the <IMG> element, which is the element you use to insert an image onto a page.
The IMG element is special because you don't use a closing tag with it -- since you're not associating it with any text (just an image).
When you use an element that doesn't have a closing tag, it's good practice to indicate as much by appending a forward slash before the tag's closing angle bracket, e.g. <IMG />.
SRC ATTRIBUTE (CONTINUED)
<IMG SRC="http://funnyimages.com/dog.jpg" />
This will insert an image (of a dog, apparently) on the page at whatever location the <IMG> element is located.
Notice how you pass the SRC attribute a "URL" -- this is the text you see in your browser bar when you're browsing the web.
HTML defines the elements on a webpage, and CSS defines the design of those elements.
Let's break that concept apart:
Structure: Telling the web page that there's a block of text that should go underneath another block of text. Oh, and that we want a series of links beneath all of that text.
Design: Telling the web page exactly how those pieces of text (and those links) should actually look: what color they are, how they're relatively positioned, how big they are, and much more.
CSS is simply the name given to a list of styling properties that you apply to an HTML element.
A CSS property is just like an HTML attribute: You use them to give HTML elements superpowers.
Here are some popular CSS properties:
color, font-size, text-align
We have two goals now:
1) Learn how associate CSS properties with particular HTML elements. (Because, unlike attributes, CSS properties are not typically placed inside of HTML tags).
2) Learn a few fun CSS properties.
Step #1:
In order to assign CSS properties to an HTML element, we must first have a way of referencing the HTML element; we need a way to tell CSS which of the many elements on our page we want to style.
We pull this off by using an HTML attribute that assigns a name to an HTML element. The attribute that does this is conveniently called "ID".
Example: <div id="about">About me.</div>
We are calling this particular DIV element "about".
Step #2
We go into the CSS "style sheet" (a separate text file that contains all the CSS for our web page) and list the properties that we want to associate with our named HTML element.
Advanced Note: On every web page, you must tell your HTML document which external text file you want to act as your CSS style sheet. HTML500's template HTML files have already done this external linking for you. (In the template, you will learn the specifics of linking style sheets if you wish to dive deeper).
inside the css style sheet
In our CSS style sheet file, we have a series of rules.
CSS rules are really simple. They look like this:
#about {
PROPERTY: VALUE;
COLOR: GREEN;
}
The pound-sign tells CSS that the name of an HTML element we want to target is about to follow. Then, just like with HTML attributes, we simply assign values to properties.
#about { <---- Opening curly bracket.
text-align: center; <---- We use ":" instead of "=".
color: green; <---- We don't put the value inside quotes.
} <---- Closing curly bracket.
#contact {
font-size:
20
;
color: blue;
}
We place sets of CSS rules one after another. In this way, each rule is like its own paragraph.
Alternatively, when we leave off the pound-sign, instead of telling CSS to apply a set of properties to an element with a given name, we tell CSS to target elements with a given tag:
a {
font-size:
20
;
color: blue;
}
Here, we're telling CSS to assign these rules to every single element with an A tag.
In summary: We use pound-sign naming to target individual elements, or we leave out the pound-sign in order to target all tags of a stated type.