HTML and CSS
Download
Report
Transcript HTML and CSS
HTML and CSS
SMT WEEKLY TRAINING
JAMES CAMIRE
STEVE ECKMAN
TIM STIFFLER
DANNY SAX
MARY SOWDERS
CHRIS MAHAN
LISA MAHAN
PAUL ISHAM
Introduction
COURSE OBJECTIVES
COURSE OUTLINE
PRESENTATION SCHEDULE
DETERMINE STRUCTURE AND APPROACH
Course Objectives
UNDERSTANDING OF COMPLEXITIES OF HTML
DEEPER UNDERSTANDING OF HTML/CSS
IMPROVE CUSTOMER COMMUNICATION
THIS IS WHAT WE DO.
Course Outline
HTML BASICS
BUILDING WEB PAGES
XHTML
CASCADING STYLE SHEETS
TABLES, FORMS AND ADVANCED TOPICS
Presentation Schedule
JAMES CAMIRE – CHAPTERS 1, APPENDIX
DANNY SAX - CHAPTERS 2, 9
STEVE ECKMAN - CHAPTERS 3, 10
TIM STIFFLER - CHAPTERS 4, 11
MARY SOUDER – CHAPTERS 5, 12
CHRIS MAHAN – CHAPTERS 6, 13
LISA MAHAN – CHPATERS 7, 14
PAUL ISHAM – CHAPTER 8
Chapter 1
THE LANGUAGE OF THE WEB
What Does HTML Look Like
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<img src=”drinks.gif”>
<p>
Join us any evening for refreshing elixirs, conversation
and maybe a game orE two of <em>Dance Dance
Revolution</em>. Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You’ll find us right in the center of downtown Webville.
Come join us!
</p>
</body>
</html>
How Does it Render?
Chapter 1
Creating our Page
USE TEXT EDITOR
SAVE BLANK FILE AS INDEX.HTML (NOTEPAD “)
ADD HTML
SAVE DOCUMENT
OPEN BROWSER
FILE -> OPEN
SELECT INDEX.HTML FILE YOU CREATED
VIEW OUTPUT.
UPDATE FILE AND SAVE
REFRESH BROWSER TO SEE CHANGES
Questions
AM I USING A SIMPLE TEXT EDITOR? AREN’T
THERE POWERFUL TOOLS LIKE
DREAMWEAVER, FRONTPAGE AND GO LIVE
FOR CREATING WEB PAGES?
I’M CREATING THESE FILES ON MY OWN
COMPUTER – HOW AM I GOING TO VIEW THESE
ON THE WEB/INTERNET?
I’VE NOTICED THE HTML IN SOME PAGES
DOESN’T ALWAYS MATCH OPENING TAGS WITH
CLOSING TAGS.
WELL, WHAT ABOUT THAT <IMG
SRC=”DRINKS.GIF”> TAG IN THE LOUNGE
EXAMPLE? DID YOU FORGET THE CLOSING
TAG?
More Discussion
AN ELEMENT IS AN OPENING TAG +
CONTENT + CLOSING TAG, BUT CAN’T YOU
HAVE TAGS INSIDE OTHER TAGS? LIKE THE
HEAD AND BODY ARE INSIDE AN <HTML>
TAG?
AN ELEMENT CAN HAVE AN “ATTRIBUTE?”
WHAT DOES THAT MEAN?
WHAT DOES THE <STYLE> ELEMENT DO?
#D2B48C DOESN’T LOOK LIKE A COLOR.
HOW IS #D2B48C THE COLOR “TAN”?
Remember …
Exercise
<html>
<head>
<title>Starbuzz Coffee’s Mission</title>
<style type="text/css">
body { background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>
To provide all the caffeine that you need to power your life.
</p>
<p>
Just drink it.
</p>
</body>
</html>
Exercise Output
Chapter 2
MEETING THE ‘HT’ IN HTML
The Lounge
REVIEW THE HTML
LOOK AT THE ANCHOR <A> TAGS
USE THE <A> ELEMENT TO CREATE A
HYPERTEXT LINK TO ANOTHER WEB PAGE.
THE CONTENT OF THE <A> ELEMENT
BECOMES CLICKABLE IN THE WEB PAGE.
THE HREF ATTRIBUTE TELLS THE BROWSER
THE DESTINATION OF THE LINK.
Questions
I JUST MAKE UP NEW ATTRIBUTES FOR AN
HTML ELEMENT?
HOW DO I KNOW WHAT ATTRIBUTES AND
ELEMENTS ARE SUPPORTED? OR, CAN ALL
ATTRIBUTES BE APPLIED TO ANY ELEMENT?
I’VE SEEN MANY PAGES WHERE I CAN CLICK
ON AN IMAGE RATHER THAN TEXT. CAN I
USE THE <A> ELEMENT FOR THAT?
Organizing the Lounge
HTML Document Paths
RELATIVE VS ABSOLUTE PATHS
../ WHAT DOES IT MEAN
WHAT’S A PARENT FOLDER? IF I HAVE A
FOLDER “APPLES” INSIDE A FOLDER “FRUIT”,
IS “FRUIT” THE PARENT OF “APPLES”?
WHAT DO YOU DO IF YOU NEED TO GO UP TWO
FOLDERS INSTEAD OF JUST ONE?
MY OPERATING SYSTEM USES “\” AS A
SEPARATOR; SHOULDN’T I BE USING THAT
INSTEAD OF “/”?
Bullet Points
Paths continued
Questions?
Chapter 2
GOING FURTHER WITH HYPERTEXT
<Agenda>
Adding text for the link in an <a> Tag Element
Understanding Attributes
Getting Organized
Linking to a Subfolder
Linking to a “Parent” Folder
Fixing Broken Images
Adding text for the link in an <a> Tag Element
Element used to create a link to another page
Content of the <a> element acts as a label for the link.
Appears with an underline in your browser. (Clickable)
Example <a>elixirs</a> and <a>driving directions </a>
In your browser, “elixir” will be underlined to indicate it is clickable.
For more information Click Here
Telling the Browser Were to Point.
Href attribute is how you specify the destination of
the link.
Implemented within an <a> tag
Example: <a href=“directions.html’>driving directions</a>
Directions.html is the URL you are linking to
Driving directions is the title that when clicked, will take you to the
directions.html.
What does the browser do?
Understanding Attributes
Attributes give you a way to specify additional information about an element.
<style type=“text/css”
Specifies which style language is being used. (CSS)
<a href=“irule.html>
Href attribute tells us the destination of a hyperlink
<img src=“sweetphoto.gif”>
Src attribute specifies the filename of the picture an img tag displays.
You are not able to make up new attributes because the browser would not know what to
do with them.
Getting Organized
Top level folder: Holds all files in the site
AKA- “Root” folder of the site
Linking to a Subfolder
Identify the source and the destination
Create an href to represent the path traced.
<a href=“beverages/elixir.html”>elixirs</a>
Beverages (source)
Elixir.html (destination)
/ separates all parts of the path
Now the browser will look for the
“elixir.html” file under the
“beverages” folder
Linking to a “Parent” Folder
Identify the Source and the Destination
Create an href to represent the path traced
Use “..” to go up a folder. This is because….
Use / to separate the path, enter the fole name after the /.
Example: <a href=“…lounge.html”>Back to the Lounge</A>
Fixing Broken Images
Was <img src=“drinks.gif”>
Remember…
Chapter 3
BUILDING BLOCKS:
WEB PAGE
CONSTRUCTION
Recap:
Tags start with < > and
end with </ >
Picture Names and
Page Names
surrounded by either “ “
or ‘ ‘
Available attributes
determined by tag type
Paths can be absolute ,
relative, or ??
<html> </html>
<title> </title>
<head> </head>
<body> </body>
<h1> </h1>
<p> </p>
<img src=“pic.gif”>
<a href=“page.html”>GoTo</a>
Web Construction Roadmap
Testing 1, 2, 3
Additional Common Elements
The quote element
HTML:
<q>To be or not to be </q>
Web view:
“To be or not to be”
Why??
Hint: Something to do with versioning…
Additional Common Elements
Inline
Block
element
What’selement
the difference?
When
to use?
…..
</p>
<p>
There is a quote from
Hamlet that begins
<q>To be or not to be.</q>
This famous quote has…
</p>
<blockquote>
Yesterday is ashes,
Tomorrow wood.
Only today does the
Fire burn brightly.
</blockquote>
<p>
<br> = linebreak
<br> is an empty element. Can you think of another
empty element?
Blockquote displays as if a <br> occurs before and
after it.
<li>, <ol>, and <ul>
<li> is the list element. Is it a block or an inline
element?
<ol> defines the list items as ordered.
<ul> defines the list items as unordered.
Are <ol> and <ul> block or inline elements?
What does <ol> add to the list items?
ALL list items are defined must be either ordered or
unordered.
Nesting
Elements To-Date
h1
block
a
inline
em
inline
ul
block
br
hm…
li
block
ol
block
img
inline
q
inline
blockquote
block