Introduction to Linux
advertisement
Julien Thibault
Julien.thibault@utah.edu
HTML is the basic building-blocks of webpages
It is not a language!! (despite its name)
Structure text/media through tags (like
<html>…</html>)
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/
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>
<head><title>HTML Tutorial</title></head>
<body>
<h1>My First Heading</h1>
<p>Hello you!</p>
</body>
</html>
Save and open the file in your browser (right-click)
Voila!
Tag reference
http://www.w3schools.com/tags/default.asp
The ones you should know (at least):
List: <ul><li>item1</li><li>item2</li></ul>
Table: <table><tr><td>celltext</td></tr><table>
Titles: <h1>title1</h1> <h2>title2</h2>
Paragraph: <p>text in paragraph</p>
Text style: <strong>bold text</strong> <i>italic</i>
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: <h1 style=“color:orange”>My title</h1>
Embedded in the HTML in the <header> (see next slide)
Stored in a separate file (.css) referenced by the html page in the <header>:
<link href=“myfile.css” rel="stylesheet" type="text/css“/>
CSS reference: http://www.w3schools.com/css/css_reference.asp
Copy the code between the <style> tags and paste it
into your hello.html page (right after the <title>
tags)
<head>
<style type="text/css">
body {
background-color:#d0e4fe; }
h1 {
color:orange;
text-align:center;}
p {
font-family:"Times New Roman";
font-size:20px;}
</style>
</head>
Download a free template (HTML page +
CSS) from here:
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…
Reminder
Host:
Login:
Password:
sanddunearch.chpc.utah.edu
uNID
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.html
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
<?xml version="1.0"?>
<note id=“note12”>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
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
XSLT uses XPath to navigate through elements and
attributes in an XML document
▪ http://www.w3schools.com/xpath/xpath_functions.asp
