0
Introduction to HTML and
CSS
Lecture 1
Who is this guy?
Lee Lundrigan
Soft ware Engineer
Blazing Cloud, Inc.

iPhone / iPad Applications in Objective-C
Javascrip...
Who are YOU?
What are we going to
talk about in this class?

XML

HTML foundation

CSS foundation

Website components
What will we not cover
in this class?
Differences between HTML and XHTML

Cross browser compatibility (including the mobil...
Todays Goals


Integrated Development Environment (IDE)

XML

HTML / XHTML

Introduction to CSS
Integrated Development
Environments
Oxygen XML Editor

  http://www.oxygenxml.com/

Aptana

  http://www.aptana.com/

Text...
XML

Definition: Extensible Markup Language

XML is a simple, very flexible text format derived from
SGML

W3C sets the XML ...
<node>
<node>
</node>
<node />
XML Cont....
Tag: A markup construct that begins with "<" and
ends with ">"

  Three different kinds of Tags

    start-ta...
XML Cont...
Attribute

  A name/value pair that exists within a start-tag
  or empty-element tag.

  <img src=”firefox.png”...
XML Example
<?xml version="1.0" encoding="UTF-8" ?>
<ship color=”blue”>
   <captain>Mr.McGee</captain>
   <crew>
      <me...
LAB 1


Lets build a simple XML document together
<HTML>




The
markup
language
used
to
describe
web
pages.
HTML
stands
for:

Hypertext
Markup
Language
What’s a Markup
       Language?

It
is
a
set
of
symbols
and

rules
in
a
document
that

describe
its
structure
and

format...
Who decides these
          rules?
        W3C (WORLD WIDE WEB CONSORTIUM)

W3C is an international standards body for bot...
HTML Tags

are special keywords surrounded by angle bracket
like <div>

Most HTML tags come in pairs like <div></div>

  C...
Basic Tags
<a href=”http://www.google.com”>This is a link tag to Google.com</a>

<p>This is a paragraph tag</p>

<div>This...
Basic Tags Continued

<br /> is a line break and can be used inside text-
nodes.

<ul> is an unordered list. It has childr...
.HTM, .HTML or .XHTML?
Document extensions

 .HTM is the same as .HTML

   .HTM is a remnant from the old days when file
  ...
Structure of an HTML
      Document
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xht...
Doctype (DTD)
                   Document type declaration


 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr...
<html>

The <html> tag tells the browser that this is an
HTML document.

The html element is the outermost element in
HTML...
<head>
hidden from the user

can contain:

  meta information

  stylesheet references

  scripts

  title
<body>
The content of the document

  text

  hyperlinks

  images

  tables

  lists

  etc...
Deprecated what?

Basically, try to avoid using things marked as
DEPRECATED

  While they are supported in the current ver...
Good Practice
HTML elements should be lowercase

  Why? The W3C recommends it and may require
  it in the future.

All ele...
Helpful documentation	

W3schools

  http://www.w3schools.com/tags/default.asp

  http://www.w3schools.com/html/default.as...
Homework

Make an HTML page using images and
paragraphs (include headers and sub headings)

Make a link on the page to a n...
Upcoming SlideShare
Loading in...5
×

HTML/CSS Lecture 1

4,406

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
4,406
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
201
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide































  • Transcript of "HTML/CSS Lecture 1"

    1. 1. Introduction to HTML and CSS Lecture 1
    2. 2. Who is this guy? Lee Lundrigan Soft ware Engineer Blazing Cloud, Inc. iPhone / iPad Applications in Objective-C Javascript HTML / CSS Wrote a cross browser CSS framework for iPhone, Android, Blackberry, and Windows Mobile. Wrote a book - Pro Smartphone Cross-Platform Development
    3. 3. Who are YOU?
    4. 4. What are we going to talk about in this class? XML HTML foundation CSS foundation Website components
    5. 5. What will we not cover in this class? Differences between HTML and XHTML Cross browser compatibility (including the mobile space) HTML 5 and CSS 3 Webpage Layouts
    6. 6. Todays Goals Integrated Development Environment (IDE) XML HTML / XHTML Introduction to CSS
    7. 7. Integrated Development Environments Oxygen XML Editor http://www.oxygenxml.com/ Aptana http://www.aptana.com/ TextEdit (on Mac) TextPad (on Windows)
    8. 8. XML Definition: Extensible Markup Language XML is a simple, very flexible text format derived from SGML W3C sets the XML standards Current version: 1.0
    9. 9. <node>
    10. 10. <node> </node> <node />
    11. 11. XML Cont.... Tag: A markup construct that begins with "<" and ends with ">" Three different kinds of Tags start-tags <tag> end-tags </tag> empty-tags <tag /> Declaration: Optional information about the XML document <?xml version="1.0" encoding="UTF-8"?>
    12. 12. XML Cont... Attribute A name/value pair that exists within a start-tag or empty-element tag. <img src=”firefox.png” alt=”Firefox Icon” /> The <img /> tag is an empty element tag with two attributes: src and alt.
    13. 13. XML Example <?xml version="1.0" encoding="UTF-8" ?> <ship color=”blue”> <captain>Mr.McGee</captain> <crew> <member>Joe</member> <member>Jane</member> </crew> <anchored value=”true” /> </ship>
    14. 14. LAB 1 Lets build a simple XML document together
    15. 15. <HTML> The
markup
language
used
to
describe
web
pages.
    16. 16. HTML
stands
for: Hypertext
Markup
Language
    17. 17. What’s a Markup Language? It
is
a
set
of
symbols
and
 rules
in
a
document
that
 describe
its
structure
and
 format.

    18. 18. Who decides these rules? W3C (WORLD WIDE WEB CONSORTIUM) W3C is an international standards body for both HTML and CSS Formed in October 1994 Founded by Tim Berners-Lee Has 356 members as of September 09’
    19. 19. HTML Tags are special keywords surrounded by angle bracket like <div> Most HTML tags come in pairs like <div></div> Consisting of an opening and closing tag
    20. 20. Basic Tags <a href=”http://www.google.com”>This is a link tag to Google.com</a> <p>This is a paragraph tag</p> <div>This tag represents a division in the page (called a “div”)</div> <img src=”C:Desktopimage.png” alt=”My Image” /> <h1>This is heading 1..the largest heading</h1> <h2>This is heading 2..the second largest heading</h2> Heading tags are defined h1-h6 Heading tags work just like headings in your favorite word processor
    21. 21. Basic Tags Continued <br /> is a line break and can be used inside text- nodes. <ul> is an unordered list. It has children known as <li> list items. Next to each list item will be a bullet. <ul> <li>Cat</li> <li>Dog</li> <li>Mouse</li> </ul>
    22. 22. .HTM, .HTML or .XHTML? Document extensions .HTM is the same as .HTML .HTM is a remnant from the old days when file extensions were only three letters .XHTML is the same as a .HTML document except an .XHTML document is a well-formed XML document
    23. 23. Structure of an HTML Document <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> </body> </html>
    24. 24. Doctype (DTD) Document type declaration Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML == Markup MUST be well formed XML Transitional == Contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like the <font> tag)
    25. 25. <html> The <html> tag tells the browser that this is an HTML document. The html element is the outermost element in HTML and XHTML documents. The html element is also known as the root element.
    26. 26. <head> hidden from the user can contain: meta information stylesheet references scripts title
    27. 27. <body> The content of the document text hyperlinks images tables lists etc...
    28. 28. Deprecated what? Basically, try to avoid using things marked as DEPRECATED While they are supported in the current version there is no guarantee future versions will continue support
    29. 29. Good Practice HTML elements should be lowercase Why? The W3C recommends it and may require it in the future. All elements should be closed. Close an element by either adding a forward slash to the start element <br /> or add a forward slash to the ending element like <div></ div>
    30. 30. Helpful documentation W3schools http://www.w3schools.com/tags/default.asp http://www.w3schools.com/html/default.asp http://en.wikipedia.org/wiki/XML http://en.wikipedia.org/wiki/HTML
    31. 31. Homework Make an HTML page using images and paragraphs (include headers and sub headings) Make a link on the page to a new page READ: Well-formed XML: http://www.developer.com/net/vb/article.php/ 797861/Well-Formed-XML.htm
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×