More HTML
(And soon CSS)
More tags
Sets of tags in a document
are referred to as elements
Tags can have attributes
Attributes provide some sort of
info about the tag's contents
<tagname attribute="value"></tagname>
Three commonly used attributes that
will come in handy soon
id
id is a user-defined indentifier for a tag
<tagname id="myContent"></tagname>
A given id should only be used once in a doc
Usually reserved for big important tags
class
class is similar to id
It's used to identify tags
But classes can be used multiple times
And tags can be given multiple classes
<tagname class="mainParagraph fancy"></tagname>
Note: id and class names can't start with a number
style
style tells the browser how to style a tag's contents
<tagname style="background-color:#448844;"></tagname>
Styling something in this manner
is called in-line styling
The syntax for the style
attribute's value
is similar to CSS,
so more on that later
More tags
<div></div>
Structural, think of as a container
Versatile so you'll see them a lot
<p></p>
Paragraph
For blocks of text
<br/>
Line break
(Note it is one of the exceptions to
the "tags are paired" rule)
Let's take a look at
a more complex page
before we look at CSS
Part 2 HTML Code
Part 2 HTML Output
CSS
What is CSS?
Cascading Style Sheet
Describes how to style elements
Three ways to use
External file
In the head
In-line
Basic Syntax
selector {property:value;property:value;}
Selector identifies the tag
or tags to apply the style to
It can reference the tag, class/id, or both
(and a few other things)
i.e.
p {property:value;property:value;}
Selects all <p> elements
and applies the styling indicated
by the property-value pairs
Properties
There are many many many properties
We won't even remotely cover them all
But here's a reference.
Let's dive back in to the code
Part 2 HTML Code
Part 2 HTML Output
So there you have it
We talked about how HTML
uses tags to "mark-up" a document
Browsers interpret that
mark-up to render a webpage
CSS can be used to style an HTML document
CSS selectors find elements
and style them according to
property-value pairs
And that's the top of the tip of the iceberg!
Go forth and code!
Explore! Play! Learn!