Overview of HTML and CSS
advertisement
Overview of
HTML and
CSS
Terminology,
Function, and
Conventions
HTML
• HyperText Markup Language
o The language used to markup content so that it is viewable in a
web browser.
o NOT a programming language (such as Java, Perl, PHP, Ruby,
etc.)
o Consists of elements enclosed in tags that are used to assign
properties to content that tell that content what to look like on
the screen
o Developed originally by Tim Berners-Lee and Robert Cailliau in the
early 90s primarily as a way for members of the Eurpoean
Organization for Nuclear Research to share and use documents.
HTML versus XHTML
• In essence, they are very similar. XHTML is slightly
more strict in its syntax rules (the way the code
should be written)
o Closing elements
o Lower case
o etc.
• For our purposes, they are not all that different.
XHTML is a reformulation of HTML that attempts to
get programmers to write more standardized and
elegant code across the web.
o And it’s no longer being developed as a separate standard
HTML5
• HTML has gone through many versions that have all
added new functionality. The current version is HTML
4.01.
• HTML5 has been in the works for quite some time
now. Some key differences when it’s done will be
o Increased coding possibilities for mobile devices
o Increased multimedia commands as web pages grow more reliant on
embedding many different types of media
o New tags for structuring content beyond a <div>
Why All this Concern About
Standards?
• Like the English language, we can say things in
different ways and still be understood. Yet different
people will understand us differently based on who
they are.
• Likewise, different browsers will read code
differently. Some will allow certain types of markup
that others won’t.
• The more standardized the coding language, the
more chance for web pages to look the same
cross-browser (but we’re not there yet).
File Extension
• A file extension is what comes after the . in a file
name. For example, myhomework.docx has a file
extension of .docx which is the document file type
for recent versions of Microsoft Word.
• It is important to save documents (or find
documents) with the proper extension to make
them behave the way you want to- especially in
web design.
Common Extensions
• .html: this is the file extension for a web page itself. Every page
on the web is technically a file with the .html extension
• .css: extension for a style sheet. This page (usually one per site
though this can vary) tells the .html pages what to look like
• .jpeg: image extension for the most popular type of file used
for large images on web
• .gif/.png: also image types but often used for smaller images
like icons or buttons
• .flv: a popular video file type on the web.
Tags
• Tags are the key to marking up content.
• Tags consist of a less than sign (< )and a more than
sign (>). The term in-between is the specific HTML
element.
• Most tags have to open and close. The closing tag
includes a </> before the element title.
Tags
Opening Tag: <body>
Closing Tag: </body>
Opening Tag: <p>
Closing Tag: </p>
Think of these as the front and back
cover of a book. You need both to
hold it together and everything
between the front and back cover is
the content of the book itself.
Everything inside the opening and
closing tag will be defined (and
behave) according to the character
name. Since body defines what is
visible on the whole page, the opening
tag will be near the top of the page
and the closing near the very bottom.
There can be only one body tag.
<p> is the paragraph tag; therefore, it
will be used often throughout a
document whenever you need a
paragraph.
Nitpicky Terminology
<p>
Is a tag with the character name p (for
paragraph)
<p> </p>
With the opening and closing included,
the entire thing is technically an element
Common Tags
•
<body>: defines everything visible on the page
•
<h1>, <h2>, <h3>: defines level headers. H1 is usually the largest text on
the page (like a title), and each subsequent number is slightly smaller text
•
<a>: defines a hyperlink- the “a” is for anchor
•
<ul>: defines a bullet list—the “ul” is for unordered list
•
<li>: defines a line in a bulleted list- the “li” is for list item
•
<p>: defines a paragraph
•
<img>: defines an image
•
<div>: defines a page division or section
The Page Structure Tags
<html>: merely defines the
page as html code
<html>
<head>
<title>
</head>
<body>
</body>
</html>
</title>
<head>: where important
meta information is
placed
<title>: titles the page
(displayed in browser tab)
<body>: everything visible
on the screen
Tags are Pre-Defined
• You can’t make up tag names. There are
approximately 120 pre-defined tags in the HTML
toolbox.
o Though for our purposes, I’d suggest we’ll never use more than 20-30 of
them at most
• Think of them as words in a language. You *could*
make up new ones, but nobody is going to
understand you.
Pages as a Series of Tags
<html>
<head>
<title>My Page</title>
</head>
<body>
<b>Hello!</b>
<p>This is my page!</p>
<p>Isn’t it cool?</p>
<center>Dig
it!</center>
• </body>
• </html>
•
•
•
•
•
•
•
•
•
My Page (will display in browser tab
and search engine results)
Hello!
This is my page!
Isn’t it cool?
Dig it!
Forgetting to Close a Tag
<html>
<head>
<title>My Page</title>
</head>
<body>
<b>Hello!
<p>This is my page!</p>
<p>Isn’t it cool?</p>
<center>Dig
it!</center>
• </body>
• </html>
•
•
•
•
•
•
•
•
•
My Page (will display in browser tab
and search engine results)
Hello!
This is my page!
Isn’t it cool?
Dig it!
Parent/Child Tags
When tags open and close while inside a tag that opens
and closes around them, they have a parent/child
relationship.
<p>This is a paragraph where <b>this part is bolded, and
<i>this part is bolded and italicized</i></b>.</p>
On Screen:
This is a paragraph where this part is bolded, and this part is
bolded and italicized.
<p> is the parent tag
<b> and <i> are children tags to the <p>
Nested Tag Closing Rule
Child tags will always close in the reverse order that they
opened.
<p>This is a paragraph where <b>this part is bolded, and
<i>this part is bolded and italicized</b></i>.</p>
<p>This is a paragraph where <b>this part is bolded, and
<i>this part is bolded and italicized</i></b>.</p>
<p> is the parent tag
<b> and <i> are children tags
Order of opening: <b>, <i>
Order of closing: </i>, </b>
Self-Closing Tags
• Some tags “self-close,” meaning you don’t need
the closing tag
• You will remember which ones are like this with
experience and practice
• <img /> there is no </img>
• <br/> used to create a link break
Attributes
• Attributes give more info about an element
• They require an element to attach to, an attribute
name, and an attribute value
<img src=“picture.jpg” />
Img is the element for image and src is the attribute
name for source that grabs the value of the pic
named picture .jpg
Stacking Multiple
Attributes
<img src=“picture.jpg” alt=“descrip of picture” />
Note the format of attribute name, equal sign,
opening quotation, attribute info, closing quotation
<a href=“http://markdpepper.com” target=“_blank”>
Pep’s Site</a>
Attributes
• Certain attributes are only ever used with specific
elements
<a href=“http://markdpepper.com”>
The attribute href is only ever used with an <a>
<p href=“something”> would never happen
<img src=“picture.jpg” />
The attribute src is mainly only used with an <img>
Looking Ahead
• The Class attribute
o <p class=“stylized”> Content </p>
• All <p> tags will look the same way, but sometimes you
want a certain paragraph to look different. Assigning it
a class with different visual values accomplishes this.
• The values of the class “stylized” will be defined on the
CSS sheet.
Thus, the class attribute is one that can go
with virtually any element
Old Skool
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title>My Page</title>
</head>
<body>
<b>Hello!</b>
<p>This is my page!</p>
<p>Isn’t it cool?</p>
<center>Dig it!</center>
</body>
</html>
But this is pre-CSS web design.
Note how the content (hello, this is
my page, isn’t it cool, dig it) is
mixed in with tags that tell the
content what to look like:
the <b> makes the “hello” bold
and tags that tell the content where
to position itself
The <center> tells the “dig it” to
center itself in the browser window.
We don’t do this anymore.
CSS
• Cascading Style Sheet: a page that tells the various
markup elements how they should look and where
they should be positioned
• Can technically be embedded at the top of a web
page’s code but it is preferred to make them a
separate page that is internally linked to from the
html
HTML: content pages with mark up
CSS: style page that tells mark ups how to behave
Benefits of CSS
• Cleaner and easier to read code
o With the aesthetics and positioning placed on the separate CSS page, the
actual HTML content is far easier to sift through
• More options for positioning and complex layouts
o Pre-CSS, many websites were built with tables. These didn’t allow
designers pin-point placement, didn’t always print well, and were hard for
search engines to process
• A Table Site (they’re still around)
o Reveal the code and see the <tr> and <td> tags: a sure sign of a
table site (if the ghastly grids wasn’t enough to prove it)
• Site Wide Changes in an Instant
o If you define the font and color of a title each time on a page, then you
have to change them all individually when you change your mind. A CSS
page lets you make one change and that change instantly proliferates
across the whole site.
HTML
<h1>Hello</h1>
<p>This text will
have the font, size,
and any other
properties that are
assigned to the p
tag on the CSS
page.</p>
<h2>I hope you can
see </h2>
<p>that this is an
important benefit
of CSS.</p>
CSS
h1 {
font-family: arial;
color: red;
font-size: 16 px;
}
p{
font-family: times new
roman, serif;
font-size: 12px;
color: black;
}
h2 {
font-family: arial, sansserif;
color: red;
font-size: 14px;
}
ON WEB
Hello
This text will have the
font, size, and any other
properties that are
assigned to the p tag on
the CSS page.
I hope you can see
That this is an important
benefit of CSS.
Quick Intro to Layout
Pre-CSS design layout worked mainly with tables like the
one above. You could only insert content into the
individual cells. There was little ability to place elements
where you wanted them and sites almost always looked
like the boring grids they were built upon.
Div Tags
• Now most designers use DIV tags. These are areas
of page division that can be moved around with
precise pixel accuracy. Think of them as division
boxes with precise functionality. The CSS can assign
many features to them for more dynamic layouts
o Positioning commands like float and margin
o Precise sizing through width and height
o Precise amounts of space between edge and internal
content through padding
o Borders on any or all sides
o Aesthetics through background-color or backgroundimage
Simple HTML Layout
<div id=“banner”>
Banner content
Banner content
</div>
Navigation bar content
<div id=“navigation”>
Navigation bar content
</div>
Left column
Right column
<div id=“leftcolumn”>
content
content
Left column content
</div>
<div id=“right column”>
Right column content
</div>
Footer content
<div id=“footer”>
Footer content
Note the sizes, colors, and other properties of
</div>
these divisions are defined on the CSS page
The CSS
#banner {
width: 800px;
height: 200;
}
#navigation {
width: 800px;
height: 50px;
}
#leftcolumn {
width: 400px;
height: auto;
float: left;
}
Banner content
Navigation bar content
Left column
content
Right column
content
Footer content
Getting ahead of ourselves, but the height of
“auto” allows the column to scroll down as far as
it needs to. The float positions the column to the
left so we can place the right one next to it.
Nested Closing Again
<div id=“leftcolumn”>
<p><b><a href=“http://markdpepper.com”>Link</a></b></p>
</div>
<div> is a parent to everything
<p> is a parent to the <b> and the <a>
Opening order of children: <b>, <a>
Closing order of children: </a>, </b>
On screen, the bolded link:
Link
Your First Rules to Live By
• When first creating and naming .html or .css files, do
not use any caps, do not use any spaces, and do
not use any special characters. Keep them simple.
•
•
•
•
•
index.html
courses.html
autobiography.html
stylesheet.css
stylerules.css
Your First Rules to Live By
• In your text editor
o Elements and attributes are all written in lower
case
o Use only single spaces
o Learn where spaces are needed
o Caps are OK in-between <p> tags- this is the
paragraph text that appears on the page
o Remember that one piece of missed
punctuation can ruin everything
• <img src=“picture.jpg” alt=“description” />
Quick Quiz
1. An HTML charater, like p, is called what once it’s
enclosed between < > signs?
2. When I write </p> versus <p>, what am I doing?
3. Why is there no such thing as </img>?
4. <a href=“http://markdpepper.com”>Link</a>
1.
What is the href part of the above code referred to as?
5. What does CSS stand for and what does that page
do?
6. Is this right or wrong?
1.
<p><b>Some bolded text and some <i>some bolded and italicized
text</b></i></p>
7. What’s wrong with this file name?
1.
My Class Test* Page.html
