HyperText Markup Language and Cascading Style Sheets Web and Apps 1) HTML - CSS Introduction � Forms and Input � Emmanuel Benoist Tables Spring Term 2020 Headings and Styles Sheets � CSS Basic formating � Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 1 2 HTML is a Markup Language Tags: Introduction A command can be composed of two tags: <h1> and </h1> Or one single tag: <img src="blank.gif"> XHTML Syntax: In XHTML (like in any XML), tags must be written in lower case, they must always terminate, arguments must be enclosed in " Single tags must be written like: <br /> (self closing). Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 3 4
Structure of an HTML document Optimize Header Content Title: Appears in the window status bar HTML Structure Encoding to be used <html> Program used to generate the file <head> ... </head> CSS and JavaScript to be integrated in the page. <body> ...</body> <head> </html> <meta charset="UTF − 8"/> <title>My Web Site</title> Content of the head: Meta-information <link href="style.css" type="text/css" rel="stylesheet"> Title, Author, Keywords, Abstract, Javascript and CSS files <meta name="generator" content="MediaWiki␣1.31.0 − wmf.20"/> Content of the body: Information to be displayed <script> ...</script> ... </head> Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 5 6 Content of the Body Everything that needs to be displayed (almost everything) Forms and Input Headings, paragraphes, texts, images, tables, The basic Document Object Model (DOM) Represents a tree, each tag (pair) is a node, texts are leaves. This Tree can be manipulated in Javascript (deletion, insertion or modification of nodes), Contains place holders (not displayed unless activated by javascript) Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 7 8
Forms and Input Example <form method="GET" action="forms.php"> Input Fields have to be incorporated in a form tag There is here a hidden input, which is not displayed: A Form has: a method (GET or POST) an id (to be manipulated by javascript), an action (where to send the <input type="hidden" name="somethingsecret" value="yes"/> request). Input type text: Input fields Hidden: are not viewable (neither modifiable normally) <input type="text" name="textfield1" value="1" size="9"/> Text: To input text on one line Input type password: Password: to input text that can not be displayed ( ***** ) Radiobuttons: choose one button from a list (enabling one <input type="password" name="pwdfield1" value="123" /> disable the others) Checkbox: Can be checked or unchecked (independently). Input type Radiobutton: Other Fields 1:<input type="radio" name="radio1" value="1" checked="true"/> 2:<input type="radio" name="radio1" value="2" /> Selection Box (select one amoung many) 3:<input type="radio" name="radio1" value="3" /> Textarea: Type any text (more than one line) https://www.benoist.ch/WebApps/examples/html-css/forms.php Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 9 10 Example (Cont.) Example (Cont.) Selection Box: <select name="selectionfield1"> Textarea <option value="7">Tous</option> <textarea name="textareafield"> <option value="1">Gare/Arrêt</option> <option value="2">Lieu,rue,numéro</option> This is the default value <option value="4">Tourisme</option> </textarea> </select> Buttons (for Javascript) and submit (to send the Another Select (in a scrolling list) request) <select name="select2" size="5" > <option value="6">Auto</option> <input type="button" value="test" name="btn1" /> <option value="3">Autor</option> <input type="submit" value="OK" name="send" /> ... </select> Image (the coordinates of the click are sent) A multi-select (all the values are transfered to the server) <input type="image" src="imgmap.gif" name="img"> <select multiple="1" name="multiselect" size="3"> <option value="Less␣than␣1␣year.">Less than 1 year.</option> <option value="1 − 5␣years.">1 − 5 years.</option> Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 11 12
Tables A table contains rows and columns Two sort of rows: Headers <th> and normal rows <tr> Data are stored in columns: <td> Standard table Tables <table> <tr><th>Year</th><th>Warmest Month</th><th>Temp.</th> ց → </tr> <tr><td>2006</td><td>June</td><td>24</td></tr> <tr><td>2007</td><td>August</td><td>27</td></tr> <tr><td>2008</td><td>July</td><td>31</td></tr> <tr><td>2009</td><td>June</td><td>29</td></tr> </table> https: //www.benoist.ch/WebApps/examples/html-css/tables.php Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 13 14 Tables Cont. Table with CSS One can merge cells One can define classes in a table colspann merges the cells on multiple columns rowspann merges the cells on multiple lines <table class="colored"> <tr><th> </th><th colspan="2">Result</th></tr> <table> <tr><th>Year</th><th>Warmest Month</th><th>Temp.</th> ց <tr><th> </th><th colspan="2">Result</th></tr> → </tr> <tr><th>Year</th><th>Warmest Month</th><th>Temp.</th> ց <tr><td rowspan="2">2006</td><td>June</td><td>27</td> ց → </tr> → </tr> <tr><td rowspan="2">2006</td><td>June</td><td>27</td> ց <tr><td>August</td><td>27</td></tr> → </tr> <tr><td>2007</td><td>July</td><td class="red">31</td></ ց <tr><td>August</td><td>27</td></tr> → tr> <tr><td>2007</td><td>July</td><td>31</td></tr> <tr><td>2008</td><td>June</td><td>29</td></tr> <tr><td>2008</td><td>June</td><td>29</td></tr> </table> </table> Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 15 16
Recommend
More recommend
