Lecture 2B: HTML and CSS

1
Lecture 2BHTML and CSS

• IT 202Internet Applications
• Based on notes developed by Morgan Benton

2
For Today

• HTML
• CSS

3
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

4
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
  learningregardless of the HTML editing software
  there are always times that you need to tweak
  your HTML

5
HTML Basics (contd)

• Tags resemble characters enclosed in pointy
  bracketse.g. ltpgt
• There are opening tags, ltbgt, and closing tags,
  lt/bgt
• In well-formed HTML you should ALWAYS use closing
  tags, although many browsers dont require it
• Well-formed HTML always nests tags
  appropriatelye.g. ltbgtltigtlt/igtlt/bgt is correct
  whereas ltbgtltigtlt/bgtlt/igt is incorrect

6
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
• Youre done!
• Test it by pointing a browser at the file

7
Lets try it!

• Creating a web page using HTML

8
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 codeltpgt lta href"http//validator.w3
  .org/check/referer"gt ltimg border"0"
  src"http//www.w3.org/Icons/valid-html401"
  alt"Valid HTML 4.01!" height"31"
  width"88"gtlt/agt lt/pgt

9
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

10
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 ltstylegt tags
  within the HTML document

11
CSS Basics (contd)

• Using style sheets is the preferred method for
  handling all or most formatting functions within
  web pages
• The biggest problem is that all browsers dont
  process style sheets in the same way so getting
  everything to work can be tricky

12
Lets try it!

• Lets use CSS to modify our HTML. Well use CSS
  in three ways
• Inline
• In the ltheadgt section of the document
• As a separate file that is linked into the HTML
  using the ltlinkgt tag

13
CSS Validation

• CSS can be validated in exactly the same way as
  HTML, by using the W3C CSS Validator Service

14
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.
  Dont use a fancy editor like FrontPage. Use
  something relatively simple that requires you to
  type in the code yourself.