1 / 22

_ HTML, XHTML & CSS

Module 1: Introduction to digital media: Day 02. _ HTML, XHTML & CSS. Sami Niemelä | sn@neocite.com. Module 1: Introduction to digital media: Day 02. What is HTML?. HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags

angelo
Download Presentation

_ HTML, XHTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Module 1: Introduction to digital media: Day 02 _HTML, XHTML & CSS Sami Niemelä | sn@neocite.com

  2. 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 Sami Niemelä | sn@neocite.com

  3. Module 1: Introduction to digital media: 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> Sami Niemelä | sn@neocite.com

  4. 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. Sami Niemelä | sn@neocite.com

  5. Module 1: Introduction to digital media: 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 Sami Niemelä | sn@neocite.com

  6. Module 1: Introduction to digital media: Basic HTML elements • Required document elements:<html>, <body>, <head> • Headings: <h1></h1>...<h6></h6> • Paragraph: <p></p> • Line break <br> • Comment: <!-- meh! --> • HTML 4.01 Spec athttp://www.w3.org/TR/html401/ Sami Niemelä | sn@neocite.com

  7. Module 1: Introduction to digital media: 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 Sami Niemelä | sn@neocite.com

  8. Module 1: Introduction to digital media: Hyperlinking • <a href="http://www.hkkk.fi/">Click</a> • ”target” - attribute defines where the link pointstarget=”_blank”target=”_top”target=”_self”target=”frameName”etc Sami Niemelä | sn@neocite.com

  9. Module 1: Introduction to digital media: 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> Sami Niemelä | sn@neocite.com

  10. Module 1: Introduction to digital media: Frames • Can be used to display more than one page at the time • Can cause usability & accesibility issues • Always remember <noframes>-content Sami Niemelä | sn@neocite.com

  11. Module 1: Introduction to digital media: 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> Sami Niemelä | sn@neocite.com

  12. Module 1: Introduction to digital media: 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> Sami Niemelä | sn@neocite.com

  13. Module 1: Introduction to digital media: Tables cont’d • Problem: table cells with no content are not displayed very well in most browsers.Solution: pixel.gif or &nbsp; • Useful attributes:cellpaddingcellspacingborder, width, height Sami Niemelä | sn@neocite.com

  14. Module 1: Introduction to digital media: 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 Sami Niemelä | sn@neocite.com

  15. Module 1: Introduction to digital media: 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 CSSwill save you a lot of work • External Style Sheets are stored in CSS files http://www.w3schools.com/css/demo_default.htm Sami Niemelä | sn@neocite.com

  16. Module 1: Introduction to digital media: 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} Sami Niemelä | sn@neocite.com

  17. Module 1: Introduction to digital media: CSS Syntax • Grouping:selector1, selector2, selector3 {property: value} h1,h2,h3,h4,h5,h6 { color: green } Sami Niemelä | sn@neocite.com

  18. Module 1: Introduction to digital media: 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> Sami Niemelä | sn@neocite.com

  19. Module 1: Introduction to digital media: What is XHTML? • EXtensible HyperTextMarkup 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. Sami Niemelä | sn@neocite.com

  20. Module 1: Introduction to digital media: 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 Sami Niemelä | sn@neocite.com

  21. Module 1: Introduction to digital media: 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 /> Sami Niemelä | sn@neocite.com

  22. Module 1: Introduction to digital media: 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 Sami Niemelä | sn@neocite.com

More Related