_ html, xhtml & css

_

HTML, XHTML & CSS

Sami Niemelä | [email protected]

Module 1: Introduction to digital media: Day 02

What is HTML?

• HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup

tags • The markup tags tell the Web browser how to display

the page • An HTML file must have an .htm or .html file

extension. • An HTML file can be created using a simple text

editor

Module 1: Introduction to digital media: Day 02


Basic html file structure

<html> <head>

<title>Title of page</title> </head>

<body> <p>Hello world! <b>This text is bold</b> </p></body>

</html>

Module 1: Introduction to digital media:


Tags + elements

• HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the angle brackets • HTML tags come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag

is the end tag. These have to be nested properly.• The text between the start and end tags is the

element content • HTML tags are in general not case sensitive, but

HTML 4.01 & XHTML specs require writing lowercase tags.



Tags & attributes

• HTML tags can have attributes that display aditional information

• <tag attribute="value”>foo bar</tag>

• Attributes can for example define a value to an element, identify it



Basic HTML elements

• Required document elements: <html>, <body>, <head>

• Headings: <h1></h1>...<h6></h6>• Paragraph: <p></p>• Line break <br> • Comment: • HTML 4.01 Spec at

http://www.w3.org/TR/html401/

Text formatting

• <b> Defines bold text• <big> Defines big text• <em> Defines emphasized text • <i> Defines italic text• <small> Defines small text• <strong> Defines strong text• <sub> Defines subscripted text• <sup> Defines superscripted text



Hyperlinking

• <a href="http://www.hkkk.fi/">Click</a>

• ”target” - attribute defines where the link points

target=”_blank”target=”_top”target=”_self”target=”frameName”etc



Hyperlinking cont’d

• Linking an image:<a href=http://www.hkkk.fi/ target=”_blank”><img src=”button.gif” border=”0” alt=”HKKK”></a>

• Anchor tag<a name=”page_top”></a>...<a href=”#page_top”>Go to the top</a>



Frames

• Can be used to display more than one page at the time

• Can cause usability & accesibility issues

• Always remember <noframes>-content



Frames

<html><frameset rows=”50,*"> <frame src=”top_frame.html"> <frame src=”content.html"><noframes><body>Your browser does not handle frames! Enter the

content here</body></noframes></frameset></html>



Tables

• Designed to diplay tabular data but are commonly used also as a layout tool

<table border="1” width=”600”><tr>

<td>100</td> <td>200</td> <td>300</td>

</tr></table>



Tables cont’d

• Problem: table cells with no content are not displayed very well in most browsers.Solution: pixel.gif or

• Useful attributes:cellpaddingcellspacingborder, width, height



Cascading Style Sheets

• Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a

problem; separating the diplay from the content itself

• External Style Sheets can save you a lot of work

• External Style Sheets are stored in CSS files http://www.w3schools.com/css/demo_default.htm



CSS Cont’d

• Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a

problem; separating the display from the content itself

• Usign CSS will save you a lot of work • External Style Sheets are stored in CSS files

http://www.w3schools.com/css/demo_default.htm



CSS Syntax

• The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

p {

text-align:center;color:red

}



CSS Syntax

• Grouping:

selector1, selector2, selector3 {property: value}

h1,h2,h3,h4,h5,h6 { color: green }



CSS Syntax

• Class selectorselector class {property: value}.class {property: value}

p.right {text-align: right} p.center {text-align: center}...<p class=”right”>foo!</p><p class=”center”>bar!</p>



What is XHTML?

• EXtensible HyperText Markup Language • is aimed to replace HTML • almost identical to HTML 4.01, exceptis a

stricter and cleaner version of HTML • XHTML is HTML defined as an XML

application • XHTML 1.0 became an official W3C

Recommendation January 26, 2000.



XHTML vs HTML?

• XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.

• XML was designed to describe data where HTML was designed to display data.

• XHTML combines the strenghts of XML & HTML while staying accesibl to current browsers



XHTML vs HTML?

The Most Important Differences:• XHTML elements must be properly nested • XHTML documents must be well-formed • Tag names must be in lowercase • All XHTML elements must be closed,

including the empty elements like <br />



XHTML vs HTML?

• Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden • The id attribute replaces the name attribute • The XHTML DTD defines mandatory

elements

http://www.w3schools.com/xhtml/xhtml_syntax.asp



_ html, xhtml & css

Documents