Hello, World!
HTML/CSS
What is the web?
Documents!
How do we create these documents?
What do they look like?
HTML
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<h1>About Google</h1>
<p>Google is best known for its search engine, although
Google now offers a number of other services.</p>
<p>Google's mission is to organize the world's
information and make it universally accessible and
useful.</p>
<p>Its founders Larry Page and Sergey Brin started
Google at Stanford University.</p>
</body>
</html>
HTML
Documents contain certain pieces of information
Tags
Opening
Closing
Elements
The documents for a tree
Parents
Children
Siblings
HTML Document Structure
Four important structural tags
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
HTML Attributes
Attributes describe something about a tag:
<a href="http://www.google.com/">Click here to
visit Google's Web site.</a>
Attributes have a name and a value
Always inside opening tag
Examining HTML
Demo
Exercises
Go to your favorite website and examine the HTML
Explain what you see
Create a small webpage about yourself. It should include
your name and a couple of sentences about you.
Attribute Groups
Four attributes are special:
class
id
style
title
Text Formatting
Headings (h1, h2, h3, h4, h5, h6)
Paragraphs (<p>)
Line breaks (<br>)
Block vs. Inline
Block level elements appear as if there is a blank line
before and after them
h1, h2, h3, h4, h5, h6, p, others
Inline elements do not have these blank lines
<b>, <i>, <u>, etc.
<h1>Block-Level Elements</h1>
<p><strong>Block-level elements</strong> always
start on a new line. The <code><h1></code> and
<code><p></code> elements will not sit on the
same line, whereas the inline elements flow with the rest
of the text.</p>
Grouping
There are several ways to group items
<div>
<header>
<nav>
<article>
<hr>
<blockquote>
<footer>
Lists
Three different types:
Ordered (<ol><li>)
Unordered (<ul><li>)
Definition (<dl><dt><dd>)
Exercises
Edit your webpage to include a list of facts about
yourself
Create a list that includes the ingredients of your
favorite recipe
Text Formatting
You've already seen several text formatting tags
Like what?
A full list can be found here:
http://www.w3schools.com/html/html_formatting.asp
It is also useful to put <!-- comments --> in your code
Links
Use the <a> tag
Must have href attribute
Can also include title
Email addresses should start with mailto:
Directories
Three flavors:
Root
Subdirectory
Parent Directory
URLs
URLs
Absolute URLs
Relative URLs
Same directory
Subdirectory
Parent directory
In-page Links
In page links are called anchors
Have you seen these before?
Anchors must have an id attribute
Link to this id with #
Exercises
Create a second page with links to some of your
favorite websites
Include a links between your two pages
Include an email address (it doesn't have to be
yours!)
Images
Images are added with <img>
Must include src attribute
Other attributes
alt
height
width
Images can also be turned into links
Video
Youtube provides all the code you need!
You can also embed videos (like mp4) directly with
<video>
Audio (like mp3) can be embedded with <audio>
Exercises
Add some images to your website. Make at least one
of them a link.
Put your favorite Youtube video on your website.
Tables
Tables
<table border="1">
<tr>
<td>Row 1, Column
<td>Row 1, Column
</tr>
<tr>
<td>Row 2, Column
<td>Row 2, Column
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
Grouping Cells
<table>
<caption>Spanning columns using the colspan attribute</caption>
<tr>
<td class="one"> </td>
<td class="two"> </td>
<td class="three"> </td>
</tr>
<tr>
<td class="one"> </td>
<td colspan="2" class="two"> </td>
</tr>
<tr>
<td colspan="3" class="one"> </td>
</tr>
</table>
Grouping Cells
<table>
<caption>Spanning rows using the rowspan attribute</caption>
<tr>
<td class="one"> </td>
<td class="two"> </td>
<td rowspan="3" class="three"> </td>
</tr>
<tr>
<td class="one"> </td>
<td rowspan="2" class="two"> </td>
</tr>
<tr>
<td class="one"> </td>
</tr></table>
Exercises
Add a table to your website that contains what you will eat
for breakfast, lunch, and dinner next week.
Forms
Forms allow you to get input from the user
Text boxes
Combo boxes
Radio buttons
Push buttons
Check boxes
Forms are created with the <form> tag
Forms
Forms require two primary attributes:
Action
Method
get
post
Text Input
Two types:
<input>
<textarea>
<form action="http://www.example.org/search.aspx"
method="get" name="frmSearch">
<p>Search:<br>
<input type="text" name="txtSearch" value="Search
for" size="20 maxlength="64"></p>
<p><input type="submit" value="Submit"></p>
</form>
Text Input
<form action="http://www.example.org/feedback.asp"
method="post">
<p>Please tell us what you think of the site and then
click submit:</p>
<textarea name="txtFeedback" rows="20" cols="50">
Enter your feedback here.
</textarea>
<p><input type="submit" value="Submit"></p>
</form>
Buttons
<form action="http://www.example.org/feedback.aspx"
method="post">
<p>
<input type="submit" name="btnVoteRed" value="Vote for reds">
</p>
<p>
<input type="submit" name="btnVoteBlue" value="Vote for
blues">
</p>
<p>
<input type="reset" value="Clear form">
</p>
<p>
<input type="button" value="Calculate" onclick="calculate()">
</p></form>
Buttons
<form action="http://www.example.org/feedback.aspx" method="post">
<p>
<button type="submit">Submit</button>
</p>
<p>
<button type="reset"><b>Clear this form</b> I want to start
again</button>
</p>
<p>
<button type="button"><img src="submit.gif" alt="submit"></button>
</p></form>
Checkboxes
<form action="http://www.example.com/cv.aspx"
method="get" name="frmCV">
Which of the following skills do you possess? Select all that
apply.<br>
<input type="checkbox" name="chkSkills"
value="html">HTML <br>
<input type="checkbox" name="chkSkills"
value="CSS">CSS<br>
<input type="checkbox" name="chkSkills"
value="JavaScript">JavaScript<br>
<input type="checkbox" name="chkSkills"
value="aspnet">ASP.Net<br>
<input type="checkbox" name="chkSkills"
value="php">PHP
</form>
Radio Buttons
<form action="http://www.example.com/flights.aspx"
name="frmFlightBooking"
method="get">
Please select which class of travel you wish to fly: <br>
<input type="radio" name="radClass"
value="First">First class <br>
<input type="radio" name="radClass"
value="Business">Business class <br>
<input type="radio" name="radClass"
value="Economy">Economy class <br>
</form>
Combo boxes
<select name="selColor">
<option selected="selected" value="">Select
color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Labels
<form action="http://www.example.org/login.aspx"
method="post" name="frmLogin">
<table>
<tr>
<td><label for="Uname">User name</label></td>
<td><input type="text" id="Uname"
name="txtUserName"></td>
</tr>
<tr>
<td><label for="Pwd">Password</label></td>
<td><input type="password" id="Pwd"
name="pwdPassword"></td>
</tr>
</table>
</form>
Tabbing
<form action="http://www.example.com/tabbing.aspx" method="get"
name="frmTabExample">
<input type="checkbox" name="chkNumber" value="1" tabindex="3"> One<br>
<input type="checkbox" name="chkNumber" value="2" tabindex="7"> Two<br>
<input type="checkbox" name="chkNumber" value="3" tabindex="4"> Three<br>
<input type="checkbox" name="chkNumber" value="4" tabindex="1"> Four<br>
<input type="checkbox" name="chkNumber" value="5" tabindex="9"> Five<br>
<input type="checkbox" name="chkNumber" value="6" tabindex="6"> Six<br>
<input type="checkbox" name="chkNumber" value="7" tabindex="10"> Seven<br>
<input type="checkbox" name="chkNumber" value="8" tabindex="2"> Eight<br>
<input type="checkbox" name="chkNumber" value="9" tabindex="8"> Nine<br>
<input type="checkbox" name="chkNumber" value="10" tabindex="5"> Ten<br>
<input type="submit" value="Submit">
</form>
Exercises
Create a new page that contains a quiz for your users to take.
Your quiz should contain:
A text box
A button
Some check boxes
Some radio buttons
A combo box
Include a link to your quiz on your other pages.
CSS
CSS
<body>
<h1>Basic CSS Font Properties</h1>
<p>The following table shows you the basic CSS font properties that allow
you to change the appearance of text in your documents.</p>
<table>
<tr>
<th>Property</th>
<th>Purpose</th>
</tr>
<tr>
<td class="code">font-family</td>
<td>Specifies the font used.</td>
</tr>
<tr>
<td class="code">font-size</td>
<td>Specifies the size of the font used.</td>
</tr>
<tr>
<td class="code">font-style</td>
<td>Specifies whether the font should be normal, italic or oblique.</td>
</tr>
<tr>
<td class="code">font-weight</td>
<td>Specifies whether the font should be normal, bold, bolder, or lighter</td>
</tr>
</table>
</body>
</html>
CSS
/* Style sheet */
body {
color:#000000;
background-color : #ffffff;
font-family : arial, verdana, sans-serif;
}
h1 {
font-size : 18px;
}
p{
font-size : 12px;
}
CSS
table {
background-color : #efefef;
border-style : solid;
border-width : 1px;
border-color : #999999;
}
th {
background-color : #cccccc;
font-weight : bold;
padding : 5px;
}
CSS
td {
padding : 5px;
}
td.code {
font-family : courier, courier-new, serif;
font-weight : bold;
}
CSS
<link rel="stylesheet" href="../CSS/interface.css">
http://www.w3.org/style/css/
CSS Selectors
Which elements are affected?
Universal (*)
Type (h1, h2, h3, etc.)
Class .
Id (#)
Child (>)
Descendant (table b)
Adjacent sibling (+)
General sibling (~)
CSS Lengths
Relative
px
em
Ex
Absolute
pt
in
cm
mm
Percentages
Box Model
Box Model
<h1>Thinking Inside the Box</h1>
<p class="description">When you are styling a web page
with CSS you must start to think in terms of
<b>boxes</b>.</p>
<p>Each element is treated as if it generates a new box.
Each box can have new rules associated with it.</p>
<p>As you can see from the diagram above, each box
has a <b>border</b>.
Between the content and the border you can have
<b>padding</b>, and outside of the border you can have
a <b>margin</b> to separate this box from any
neighboring boxes.</p>
Box Model
body, h1, p, img, b {
border-style : solid;
border-width : 2px;
border-color : #000000;
padding:2px;
}
h1, b {
background-color : #cccccc;
}
CSS Links
Links have several properties:
Color
Background-color
Text-decoration
There are also a few pseudo classes:
Visited
Hover
active
CSS Backgrounds
Exercises
Using the CSS reference website, create CSS for your
webpage. Be creative!
Be sure to mess around with text formatting, colors, box
padding, box margins, box borders, layouts, and your
form!
http://www.w3.org/style/css/
