Download lecture02b

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Transcript
Lecture 2B:
HTML and CSS
IT 202—Internet Applications
Based on notes developed by Morgan Benton
For Today
HTML
CSS
Intro to HTML
HTML stands for Hyper-Text Markup
Language
It is a subset of SGML (Standard
Generalized Markup Language)
Historically HTML and SGML are
presentational styles and not well adapted to
interactivity
HTML Basics
HTML files are text files and can be created in
ANY text editor
Visual effects are created by the way that Web
Browser software interprets the text.
Effects are created by enclosing text with special
“tags”
The list of tags is relatively short and worth
learning—regardless of the HTML editing
software there are always times that you need to
tweak your HTML
HTML Basics (cont’d)
Tags resemble characters enclosed in pointy
brackets—e.g. <p>
There are opening tags, <b>, and closing tags,
</b>
In well-formed HTML you should ALWAYS use
closing tags, although many browsers don’t
require it
Well-formed HTML always nests tags
appropriately—e.g. <b><i></i></b> is correct
whereas <b><i></b></i> is incorrect
Creating a Web Page
Open a text browser
Type in your HTML text
Save the file with an “.html” extension
FTP the file to a directory located on a web
server
You’re done!
Test it by pointing a browser at the file
Let’s try it!
Creating a web page using HTML
HTML Validation
You can test to see if your HTML conforms
exactly to the HTML 4.0 specification
Somewhere in the body of your page
include the following code:
<p>
</p>
<a href="http://validator.w3.org/check/referer">
<img border="0" src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
Cascading Style Sheets
The problem: changing the look and feel of
a web site can be very tedious
CSS separates content from presentation so
that formatting for a site can be updated
simply by updating a single file
Requires careful planning, but on the whole
makes for a site that is much easier to
maintain
CSS Basics
CSS files are plain text files that can be edited
with ANY text editor
The rules and syntax are fairly simple
A good website is www.w3schools.com
Styles can be defined within the HTML document
or in a separate file that is referenced
CSS instructions are enclosed within <style> tags
within the HTML document
CSS Basics (cont’d)
Using style sheets is the preferred method
for handling all or most formatting
functions within web pages
The biggest problem is that all browsers
don’t process style sheets in the same way
so getting everything to work can be tricky
Let’s try it!
Let’s use CSS to modify our HTML. We’ll
use CSS in three ways:
Inline
 In the <head> section of the document
 As a separate file that is linked into the HTML
using the <link> tag

CSS Validation
CSS can be validated in exactly the same
way as HTML, by using the W3C CSS
Validator Service
One More Note
HTML and CSS have relatively simple rules
and a small amount of syntax and
terminology to learn. The absolute best way
to learn them is to create your own sites and
just play around with it. Don’t use a fancy
editor like FrontPage. Use something
relatively simple that requires you to type in
the code yourself.