HTML Css

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  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 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="two"> </td>
<td rowspan="3" class="three"> </td>
</tr>
<tr>
<td rowspan="2" class="two"> </td>
</tr>
<tr>
</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>
value="CSS">CSS<br>
value="JavaScript">JavaScript<br>
value="aspnet">ASP.Net<br>
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>
value="Business">Business class <br>
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/

HTML Css

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

HTML Css

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css

Uploaded by

Copyright:

Available Formats

Hello, World!

What is the web?

How do we create these documents?

Documents contain certain pieces of information

The documents for a tree

HTML Document Structure

Four important structural tags

Attributes describe something about a tag:

Attributes have a name and a value

Go to your favorite website and examine the HTML

Create a small webpage about yourself. It should include

Four attributes are special:

Headings (h1, h2, h3, h4, h5, h6)

Line breaks (<br>)

Block vs. Inline

h1, h2, h3, h4, h5, h6, p, others

Inline elements do not have these blank lines

There are several ways to group items

Three different types:

Edit your webpage to include a list of facts about

Create a list that includes the ingredients of your

You've already seen several text formatting tags

It is also useful to put  in your code

Use the <a> tag

Must have href attribute

Email addresses should start with mailto:

In page links are called anchors

Anchors must have an id attribute

Include a links between your two pages

Images are added with <img>

Images can also be turned into links

Youtube provides all the code you need!

You can also embed videos (like mp4) directly with

Audio (like mp3) can be embedded with <audio>

Add some images to your website. Make at least one

Put your favorite Youtube video on your website.

Forms allow you to get input from the user

Forms are created with the <form> tag

Forms require two primary attributes:

Include a link to your quiz on your other pages.

Which elements are affected?

Links have several properties:

There are also a few pseudo classes:

Using the CSS reference website, create CSS for your

You might also like