Downloaded 380 times
More Related Content
HTML/CSS Lecture 1
- 1. Introduction to HTMLand CSS Lecture 1
- 2. Who is thisguy? 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.
- 4. What are wegoing to talk about in this class? XML HTML foundation CSS foundation Website components
- 5. What will wenot cover in this class? Differences between HTML and XHTML Cross browser compatibility (including the mobile space) HTML 5 and CSS 3 Webpage Layouts
- 6. Todays Goals Integrated DevelopmentEnvironment (IDE) XML HTML / XHTML Introduction to CSS
- 7. Integrated Development Environments Oxygen XMLEditor http://www.oxygenxml.com/ Aptana http://www.aptana.com/ TextEdit (on Mac) TextPad (on Windows)
- 8. XML Definition: Extensible MarkupLanguage XML is a simple, very flexible text format derived from SGML W3C sets the XML standards Current version: 1.0
- 9.
- 10.
- 11. XML Cont.... Tag: Amarkup 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. 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. 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. LAB 1 Lets builda simple XML document together
- 15.
- 16.
- 17. What’s a Markup Language? It is a set of symbols and rules in a document that describe its structure and format.
- 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. HTML Tags are specialkeywords surrounded by angle bracket like <div> Most HTML tags come in pairs like <div></div> Consisting of an opening and closing tag
- 20. Basic Tags <a href=”http://www.google.com”>Thisis 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. 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. .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. Structure of anHTML 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. 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. <html> The <html> tagtells 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. <head> hidden from theuser can contain: meta information stylesheet references scripts title
- 27. <body> The content ofthe document text hyperlinks images tables lists etc...
- 28. Deprecated what? Basically, tryto avoid using things marked as DEPRECATED While they are supported in the current version there is no guarantee future versions will continue support
- 29. Good Practice HTML elementsshould 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. 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. Homework Make an HTMLpage 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