Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1
Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like HTML, CSS and XML. Revise the basic structure of an HTML document and find out how to apply simple formatting to a Web page. Revise XML, the reasons for using XML and basic XML structure. 2
Introduction View source!! 3
How the web works Client/Server architecture. Web page request 4
HTML Introduction to HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language It is a Markup Language, not a programming language A markup language is a syntax and/or set of rules to manage content and structure of a document or object (http://www.w3.org/wai/lexicon/) A markup language is a set of markup tags HTML uses markup tags to describe web pages, usually called HTML tags 5
HTML Document HTML documents: describe web pages contain HTML tags and plain text Every HTML document comprises just a single outer element - the <html> element The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. 6
HTML Document Example: <html> <body> <h1>my First Heading</h1> <p>my first paragraph</p> </body> </html> Let s create our first HTML document!! Example explained: The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph 7
HTML Elements HTML documents are defined by HTML elements. All commands that specify the layout of the Web page are provided in the form of elements, or tags. HTML element syntax: HTML element starts with a start tag / opening tag. HTML element ends with an end tag / closing tag. The element content is everything between the start and the end tag. Some HTML elements have empty content. Most HTML elements can have attributes. 8
HTML Elements The following example contains three HTML elements <html> <body> <p align= justify > </p> </body> </html> Example Explained: The <p> element: This is my first paragraph<br /> This is a different line! defines a paragraph in the HTML document has a start tag <p> and an end tag </p> The element content is: This is my first paragraph <br/> This is a different line! 9
HTML Elements <html> <body> <p align= justify > </p> </body> </html> This is my first paragraph<br /> This is a different line! Example Explained: The <body> element: defines the body of the HTML document has a start tag <body> and an end tag </body> The element content is another HTML element (a paragraph) 10
HTML Elements <html> <body> <p align= justify > </p> </body> </html> This is my first paragraph<br /> This is a different line! Example Explained: The <html> element: defines the whole HTML document has a start tag <html> and an end tag </html> The element content is another HTML element (the body) 11
HTML Elements Don't forget the End Tag. The following example will work in most browsers, but forgetting the end tag can produce unexpected results or errors. <p>this is a paragraph Empty HTML Elements <br> is an empty element without a closing tag. Adding a slash to the start tag, like <br />, is the proper way of closing empty elements. HTML Tips Use Lowercase Tags. HTML tags are not case sensitive. BUT World Wide Web Consortium (W3C) recommends lowercase. 12
HTML Attributes HTML elements can have attributes. Attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value. Attribute values should always be enclosed in quotes. Example: HTML links are defined with the <a> tag. The link address is provided as an attribute <a href="http://www.w3schools.com">this is a link</a> 13
HTML Attributes Below is a list of some attributes that are standard for most HTML elements: Attribute Value Description class class_rule or style_rule The class of the element id id_name A unique id for the element style style_definition An inline style definition title tooltip_text A text to display in a tool tip Let s have a real example! 14
HTML Text Formatting HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags. Text Formatting Tags example list: Tag <b> <big> <em> <i> <small> <strong> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text 15
HTML Text Formatting Example <html> <body> <p><b>this text is bold</b></p> <p><big>this text is big</big></p> <p><em>this text is emphasized</em></p> <p><i>this text is italic</i></p> <p><small>this text is small</small></p> <p>this is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> 16
HTML Text Formatting Example explained: <b>this text is bold</b> <big>this text is big</big> <i>this text is italic</i> <small>this text is small</small> This is<sub> subscript</sub> and <sup>superscript</sup> This text is bold This text is big This text is italic This text is small This is subscript and superscript 17
HTML Table Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. Each row is divided into data cells with the <td> tag. td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. 18
HTML Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Results: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 19
HTML Table Border attribute To display a table with borders, you will have to use the border attribute. <table border="1"> Headings in a Table Headings in a table are defined with the <th> tag <th>heading</th> Empty Cells in a Table Table cells with no content are not displayed very well in most browsers. Add a non-breaking space ( ) to empty data cells <td> </td> 20
HTML Table Example <table border="1"> <tr> <th>heading</th> <th>another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 Q: How can I add more columns in this table? 21
HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The URL points to the location where the image is stored. <img src="url" /> 22
HTML Images The Alt Attribute Used to define an "alternate text" for an image. Tells the reader what he or she is missing on a page if the browser can't load images. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document. <img src="boat.gif" alt="big Boat" /> Let s see an example! 23
HTML Links Hyperlinks A hyperlink is a reference (an address) to a resource on the web. A hyperlink can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a>, is used to define hyperlinks. <a href="url">link text</a> The element content doesn't have to be text. You can link from an image or any other HTML element. 24
HTML Links The href Attribute defines the link "address". The following example defines a link to W3Schools: <a href="http://www.w3schools.com/">visit W3Schools!</a> The target Attribute defines where the linked document will be opened. The following example will open the document in a new browser window. <a href="http://www.w3schools.com/" target="_blank">visit W3Schools!</a> Q: How can I create a link that refers to the UniS website, using an image instead of text? 25
HTML Links The name Attribute When the name attribute is used, the <a> element defines a named anchor inside a HTML document. The following is an example of a named anchor inside an HTML document: <a name="tips">useful Tips Section</a> A link to the Useful Tips Section from the same document: <a href="#tips"> Jump to the Useful Tips Section</a> A link to the Useful Tips Section from another document: <a href="http://www.w3schools.com/html_tutorial.htm#tips"> Jump to the Useful Tips Section</a> 26
HTML Forms and Input Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. <form>. input elements. </form> 27
HTML Forms and Input Input The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are listed below. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. 28
HTML Forms Other form elements textarea The <textarea> tag defines a multi-line text input control. The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. Required attributes: cols, rows (define the visible area) Optional attributes: readonly, disabled, name Example: <textarea rows="2" cols="20 > This text area can expand up to 2 rows and up to 20 columns </textarea> 29
HTML Forms Select list <select> tag is used to create a select list (drop-down list). The <option> tags inside the select element define the available options in the list. Example: <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> 30
HTML Forms and Input Example <form> First name:<input type="text" name="firstname" /> <br /> Last name:<input type="text" name="lastname" /> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female I have a bike: <input type="checkbox" name="vehicle" value="bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="car" /> </form> Let s insert the textarea and select elements in the form of the above example. 31
HTML Divs The <div> tag defines a division or a section in an HTML document The <div> tag is often used to group block-elements to format them with styles. Example: <div style="color: green"> <h3>this is a header</h3> <p>this is a paragraph.</p> </div> Q: How can I define another division but with a different colour? 32
HTML Styles Formatting can be moved out of the HTML document and into a separate style sheet. Cascading Style Sheets (CSS) create and apply style rules to HTML documents. When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: External Style Sheet Internal Style Sheet Inline Styles 33
HTML Styles External Style Sheets Ideal when the style is applied to many pages. You can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 34
HTML Styles External Style Sheets The CSS syntax is made up of three parts: a selector, a property and a value selector {property:value} Example: h1 { } color : red; font-family : Arial Q: How can I define the font size for element h1? 35
HTML Styles Internal Style Sheet Should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Let s have an example. 36
HTML Styles Inline Styles Should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. <p style="color: red; margin-left: 20px"> This is a paragraph </p> Let s have an example. 37
Summary We have talked about HTML: HTML document HTML elements HTML attributes Text formatting HTML Tables, Links, Images HTML forms and input Stylesheets (CSS) Next XML 38
XML XML stands for EXtensible Markup Language. XML is a markup language much like HTML. XML tags are not predefined. You must define your own tags. XML is designed to be self-descriptive. 39
Differences between XML and HTML XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is. HTML was designed to display data, with focus on how data looks. HTML is about displaying information, while XML is about carrying information. XML is a software- and hardware-independent tool for carrying information. 40
Why XML? XML Simplifies Data Sharing XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data. This makes it much easier to create data that different applications can share. XML Simplifies Data Transport Data can easily be exchanged between incompatible systems. Data can be read by different incompatible applications. XML Simplifies Platform Changes XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data. 41
XML Structure XML documents form a tree structure that starts at "the root" and branches to "the leaves". XML documents must contain a root element. This element is "the parent" of all other elements. All elements can have sub elements (child elements). <root> <child> </root> </child> <subchild>...</subchild> 42
XML Elements With XML you invent your own tags. That is because the XML language has no predefined tags. XML allows the author to define his own tags and his own document structure. All XML elements must have a closing tag. <p>this is a paragraph without a closing tag XML tags are case sensitive. <Message>This is incorrect</message> <message>this is correct</message> XML Attribute Values Must be Quoted <note date="12/11/2007"> <to>tove</to> <from>jani</from> </note> 43
XML Example <?xml version="1.0" encoding="iso-8859-1"?> <breakfast_menu> <food> <name>belgian Waffles</name> <price>$5.95</price> <description>two of our famous Belgian Waffles with plenty of real maple syrup</description> </food> <calories>650</calories> </breakfast_menu> 44
Summary We have talked about XML: What is XML Differences between XML and HTML Why to use XML XML structure XML elements 45
References W3Schools Tutorials http://www.w3schools.com/default.asp World Wide Web Consortium (W3C) http://www.w3.org/wai/lexicon MSc Induction Tutorials http://www.computing.surrey.ac.uk/msc/tutorials/ 46
Questions 47