Programming of web-based systems Introduction to HTML5

Size: px

Start display at page:

Download "Programming of web-based systems Introduction to HTML5"

Elizabeth Warner
5 years ago
Views:

1 Programming of web-based systems Introduction to HTML5

2 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities 9. Form and its elements 10. Important tips 11. Questions and discussion Literature: HTML and CSS by Jon Duckett, Wiley 2014 or newer 3. HTML & CSS Design and Build Websites by Jon Duckett, Wiley 2011 or newer 4. Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 2

3 HTML5 is XML 1. XML is well know format: extensible Markup Language 2. XML is structural language to exchange information it has many extensions (i.e. SOAP, HTML5, WSDL 3. Key elements of XML document: 1. Tag is a markup construct. We define start (opening) tags: <company> end (closing) tags: </company> and empty element tags: <employee/> 2. Attributes markup construct with name and value inside tag i.e.: <company id= PWR > - id is name, PWR is value 3. Elements tags, attributes and text elements inside tags Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 3

4 HTML5 is XML 1. HTML5 is extension of XML 2. HTML5 base consist of: 1. Doctype (just a simple keyword nowadays) 2. Head here comes data for browsers and search engines, this data does not appear on main screen 3. Body here comes everything you want to show to user <!DOCTYPE HTML> <html> <head> <title>my title</title> </head> <body> <a href= / >My link</a> <h1>my header</h1> </body> </html> Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 4

5 HTML5 basic body elements Headers <h1> -> <h6> used as headers in Word Paragraphs <p> - used as paragraphs in Word Images <img> - to insert image in content. Important attributes: 1. alt alternative text when image is not visible 2. src source path of an image (has to be in URL form) 3. width/height desirable dimensions of image Usage example <img src= test.jpg /> (put test.jpg in the same dir as index.html) Buttons <button> - used in forms and with JavaScript Lists: Unordered (with bullets): <ul>, elements: <li> Ordered (with numbers): <ol>, elements: <li> Description list: <dl>, elements: <dt> (term), <dd> (description of term) More about lists to read and learn: <ul> <li>element 1</li> <li>element 2</li> </ul> Normal list <ul> <li>element 1 <ol> <li>inner 1</li> <li>inner 2</li> </ol> </li> <li>element 2</li> </ul> Nested list Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 5

6 HTML5 basic body elements Horizontal line/rule: <hr/> Line breaks: <br/> Preformatted text <pre> - used to show text as it appears in editor Links <a>here goes clickable text or image</a>, with attributes: href where to link (URL form), #sometarget goes to page element named sometarget target with possible values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame title text displayed on hover Divisions <div> - divides page into sections. Usually comes with styles in CSS. <! comment here --> - to comment something in HTML (user can see those comments in source of web page) Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 6

7 HTML5 text formatting/blocks <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text <q> - element defines a short quotation. <blockquote cite= source > - long quotation <abbr title= text > - abbreviation title appear on mouse over <address> - block of address <cite> - citation <bdo dir="rtl"> - to change direction of text: noitcerid <pre> - shows text as it appears in source Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 7

8 HTML5 tables <table> - starting tag <caption> - title of table <thead> - header section <tbody> - body section <tfoor> - footer section <tr> - row <th> - header cell <td> - normal cell We always write tables, starting from declaration of table <table>, optional caption <caption>, optional section i.e. <thead> and then we write table rows in section using <tr> and then cells in that row in order of columns <td>. You can also nest tables. <table> <caption>desc</caption> <thead> <tr> <th>month</th> <th>savings</th> </tr> </thead> <tbody> <tr> <td>january</td> <td>$100</td> </tr> </tbody> <tfoot> <tr> <td>sum:</td> <td>$100</td> </tr> </tfoot> </table> Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR.

9 HTML5 blocks <div> - A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Other block-level elements: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video> <span> - An inline element does not start on a new line and only takes up as much width as necessary. Block elements: <div>line 1</div> <div>line 2</div> Result: line 1 line 2 Inline elements: <span>1</span> <span>2</span> Result: 1 2 Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 9

10 HTML5 file paths 1. <img src="picture.jpg"> picture.jpg is located in the same folder as the current page 2. <img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder 3. <img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web 4. <img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder 5. <img src=" picture.jpg is located on the given website 1-4 are called relative file paths, 5 is called absolute file path Remember that browser needs access to those images, if you re on website: browser will try to get image from: Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 10

11 HTML5 head elements These are elements that are part of <head> section <title> element defines the title of the document, and is required in all HTML documents. <style> element is used to define style information for a single HTML page (next lecture) <link> element is used to link to external style sheets (next lecture) <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata (used mainly by browsers and search engine, not visible to user). Important for SEO: <meta name="description" content= My website"/> <meta name="keywords" content="html, HTML5, Web programming"/> <meta name="author" content="john Doe"/> <meta http-equiv="refresh" content="30" /> <meta charset="utf-8"> - defines charset <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> element is used to define client-side JavaScripts (next lecture) <base href=" target="_blank"> - element specifies the base URL and base target for all relative URLs in a page Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 11

HTML5 layout <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent

12 HTML5 layout <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 12

13 HTML5 layout HEADER NAV SECTION ASIDE ARTICLE FOOTER Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 13

14 HTML5 layout <details> <summary>what has no end?.</summary> <p>only food has no end.</p> </details> DETAILS/SUMMARY SUMMARY DETAILS Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 14

HTML5 entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

15 HTML5 entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the character entity. non-breaking space < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' cent pound yen euro copyright registered trademark Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 15

16 HTML5 forms Forms are used to send data to the server. Start tag: <form> Sample form tag: <form action="/action_page.php" method="get" >, possible attributes: Action where form should be sent (default: self) Method get/post method of sending the form: Post data is placed in headers and not visible to user, can be as long as server defines. You can send files too. Get data is places in URL, visible to user. Not recommended when sending sensitive data. Use only in special cases. Only about 3000 characters. Target see target with links Enctype when sending files or very big forms you should us: "multipart/form-data. Different coding will give ability to send files. autocomplete if set to on browser will autocomplete form with stored data Every form has some form elements. These can be grouped using <fieldset>. Set of fields can have also header in <legend> tag. Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 16

17 HTML5 form elements <input> - the most used form element, possible types (type= ): Text standard text input Radio to define single choice by radio button Password text input with hidden letters Submit button to submit form Reset to clear form data Checkbox multiple choice checkbox Button to define any button Color to choose color (RGB format) Date to pick date text input with validation File to send a file Number text input with number validation Range to pick number from given range Search text field to search something Time to pick time Url to insert an url Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 17

18 HTML5 form elements Input can also have restrictions depending on type. Restrictions are defined as attributes: disabled - Specifies that an input field should be disabled max -Specifies the maximum value for an input fieldmax length -Specifies the maximum number of character for an input Fieldmin - Specifies the minimum value for an input fieldpattern - Specifies a regular expression to check the input value against readonly - Specifies that an input field is read only (cannot be changed) Required - Specifies that an input field is required (must be filled out) size - Specifies the width (in characters) of an input fieldstep - Specifies the legal number intervals for an input fieldvalue - Specifies the default value for an input field Other input attributes: value - attribute specifies the initial value for an input field autofocus - specifies that the input field should automatically get focus when the page loads multiple you can choose more than one element (file and only) name - defines a name (necessary to use identify element server-side) Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 18

19 HTML5 form elements Sample inputs below: <input type="text" name="username /> <input type="password" name="psw"/> <input type="radio" name="gender" value="male" checked/> Male <input type="radio" name="gender" value="female"/> Female <input type="radio" name="gender" value="other"> Other <input type="checkbox" name="vehicle1" value="bike"/> I have a bike<br> <input type="checkbox" name="vehicle2" value="car"/> I have a car <input type= date name= mydate /> <input type= file name= myfile /> Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 19

HTML5 form elements <select> - defines a drop-down list: <select name="cars"> <option value="volvo">volvo</option> <option value="fiat selected>fiat</option> <option value="audi">audi</option>

20 HTML5 form elements <select> - defines a drop-down list: <select name="cars"> <option value="volvo">volvo</option> <option value="fiat selected>fiat</option> <option value="audi">audi</option> </select> You can use multiple with select to allow multi-choice <textarea name="message" >- defines input with many rows <button> is newer version for <input type= button /> you can use several types: type= submit to send a form type= button clickable button, actions are usually defined in JS type= reset to reset a form <datalist> - gives a list of possible inputs to user: <input list="browsers /> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> </datalist> Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 20

21 Important tips 1. Use always lowercase tag names and lowercase attribute names 2. Use double quotes in attributes values 3. Always define encoding in meta tag (it should come before any text element) 4. Be aware of encoding in your editor always use UTF-8 without BOM 5. Check if used nesting is allowed by HTML standard i.e. <a href= # ><div>test</div></a> is invalid 6. Always use ending tags even if browser understand document without it 7. Always check your page on popular browsers and also on mobile 8. Check your syntax with W3C validator 9. If you have problem with correct elements distribution use Google 10. Using HTML frameworks usually helps a lot, check Bootstrap 11. HTML ignores more than one space in text elements except in <pre> 12. Use tools to check websites on many browsers and also check for SEO metrics Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 21

22 Discussion and questions 1. What is the root element for HTML5 document and what are 2 children of this element (most often)? 2. Name and describe 6 basic elements in HTML5 page layout 3. Name and describe any 5 text formatting elements 4. Name and describe what tags we use to contruct tables 5. What is the difference between block elements (like <div>) and inline elements (like <span>)? 6. What is the difference between post and get method and when we should use them give some examples. 7. You are on website: show 3 ways to give correct path to image inf.png which is in en directory 8. Write simple form with any 5 known form elements. Programming of web-based systems. Introduction to HTML5. Aleksander Marianski PWR. 22

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version