Embed Size (px)
Citation preview
XHTML and CSSSession 1
Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process,
basic XHTML elements
What is required?
• Plaint text editor, like Notepad• Web browser, like FF or IE• Commitment to learn something new• Problem-solving skills (which you’ll learn and
develop along the way)
What to expect?
• XHTML and CSS are strictly for presentational purposes only – no programming
• A lot of exercises and do-it-yourself required• The beginning, not the end
Web Development ProcessClient specify needs and
requirements
Design process
Code design into working website using XHTML/CSS
Programming
Testing
Debugging
Publish
What is (X)HTML?
• (eXtensible) HyperText Markup Language• Code used to ‘write’ webpages• XML + HTML = XHTML• A stricter, cleaner version of HTML
What is CSS?
• Cascading Style Sheet• Specify how a webpage should look like• HTML = content || CSS = style/looks
What is W3C?
• World Wide Web Consortium• Sets and develop standards for the World
Wide Web
What are internet browsers?
• Software that reads HTML document and convert the arcane codes into nice-looking webpages
• Firefox, Internet Explorer, Safari, Netscape, etc.
• W3C Standard compliance• Cross-browser compatibility
What is a webpage?
• A plain text document, consisting of codes with .html file extension
• Complexity varies – several HTML lines to complex with multiple languages
XHTML Document Structure<html>
<head><title>My first webpage</title>
</head>
<body><p class=“foo”>Hello, world!</p>
</body>
</html>
XHTML tags, elements, attributes<p class=“foo”>Hello, world!</p>
Start tag
attributeEnd tagElement content
Element
Element syntax• Starts with a start tag, ends with end tag, with element content in
between.– <p>This is a paragraph</p>
• Some HTML elements have empty content• Empty elements are closed in the start tag
– <img src=“foo.jpg” alt=“Picture of foo”></img>– becomes– <img src=“foo.jpg” alt=“Picture of foo” />
• Most HTML elements can have attributes– <img src=“foo.jpg” alt=“Picture of foo” />
Attributes
• Attributes provide additional information about the element
• Attributes are always specified in the start tag• Attributes come in name/value pairs like:
name="value"
