1. Julien Thibault Julien.thibault@utah.edu

2.  HTML is the basic building-blocks of webpages  It is not a language!! (despite its name)  Structure text/media through tags (like … )  Your browser reads the HTML and renders nice pictures and text accordingly  First specifications date from early nineties  Everything you need to know can be found here:  http://www.w3schools.com/html/ http://www.w3schools.com/html/

3.  Create an empty text document with notepad or similar text editor (no Word!!)  Save it as hello.html or hello.htm  Copy and paste the following HTML code: HTML Tutorial My First Heading Hello you!  Save and open the file in your browser (right-click)  Voila!

4.  Tag reference  http://www.w3schools.com/tags/default.asp http://www.w3schools.com/tags/default.asp  The ones you should know (at least):  List: item1 item2  Table: celltext  Titles: title1 title2  Paragraph: text in paragraph  Text style: bold text italic

5.  Cascading Style Sheet (CSS)  Used to apply a style (color, size,…) to each tag (basically to make you page look pretty)  Example: defining the style for your title (orange, and centered) h1{ color:orange; text-align:center; }  CSS can be  Directly applied to a tag: My title  Embedded in the HTML in the (see next slide)  Stored in a separate file (.css) referenced by the html page in the :  CSS reference: http://www.w3schools.com/css/css_reference.asphttp://www.w3schools.com/css/css_reference.asp

6.  Copy the code between the tags and paste it into your hello.html page (right after the tags) body { background-color:#d0e4fe; } h1 { color:orange; text-align:center;} p { font-family:"Times New Roman"; font-size:20px;}

7.  Download a free template (HTML page + CSS) from here:  http://www.freewebtemplates.com/popular http://www.freewebtemplates.com/popular  Have a look at the HTML page then the CSS file  Modify the HTML to enter your own title/text  Modify the CSS to change font size / colors…

8.  Reminder  Host: sanddunearch.chpc.utah.edu  Login: uNID  Password:uNID password 1. Create a public_html folder in your home directory 2. Copy your web page to that folder (scp command) 3. Now you can access your webpage at: http://inscc.utah.edu/~[uNID]/[page_name] Ex: http://inscc.utah.edu/~u0668260/index.htmlhttp://inscc.utah.edu/~u0668260/index.html

9.  XML (eXtensible Markup Language )  Designed to transport and store data  No predefined tags like in HTML  Define the tags for your own requirements: schema definition Tove Jani Reminder Don't forget me this weekend!

10.  XSLT  eXtensible Stylesheet Language Transformations  Used to transform XML into HTML, before it is displayed by a browser  Mix of HTML and XSL functions used to reach particular XML nodes and transform them  Example: ▪ http://www.w3schools.com/xml/tryxslt.asp?xmlfile=simple&xsltfile =simple http://www.w3schools.com/xml/tryxslt.asp?xmlfile=simple&xsltfile =simple  XSLT uses XPath to navigate through elements and attributes in an XML document ▪ http://www.w3schools.com/xpath/xpath_functions.asp http://www.w3schools.com/xpath/xpath_functions.asp