PHPSQL 0 HTML Introduction HTML Rendering HTML Tags

MVC • Model – View – Controller : separated layers • HTML: format to

HTML • HTML is used to describe the content of webpages • HTML =

HTML • The HTML tags are sorrounded by < and > letters, e. g.

HTML <html> <head> <title>Page title</title> </head> <body> <h 1>My First Heading</h 1> <p>My first

HTML • HTML entity: & entity_name ; OR &#entity_number ; – < >

HTML • HTML vs. XHTML: different level of strictness, different complexity and behavior of

ACID 1: HTML+CSS 1 (1998) V 1. 0 Szabo. Zs 10

ACID 2: HTML + CSS 2. 1 + PNG V 1. 0 Szabo. Zs

ACID 2 (2005) and the browsers • Safari 2. 0. 2 (Webkit, 31/OCT/2005), Konqueror

ACID 3: HTML + DOM + JS V 1. 0 Szabo. Zs 14

ACID 3 (2008) and the browsers • • Safari 4 (8/JUN/2009), Chrome 4 (25/JAN/2010)

ACID 4? • More SVG, CSS 3; less JS • Multicol layout, special backgrounds

… And Chrome Rules All • https: //www. w 3 schools. com/browsers / •

COLORS V 1. 0 00000033 000066 000099 0000 CC 0000 FF 003300 003333 003366

HTML ATTRIBUTES V 1. 0 Attribute Value Description class_name The class of the element

HTML 4 (HTML 5) Tag <b> <big> <em> Description Defines bold text( strong) Defines

LISTS <ul> <ol> <dl> <li>Coffee</li> <dt>Coffee</dt> <li>Milk</li> <dd>Black hot </ul> </ol> drink</dd> <dt>Milk</dt> <dd>White

V 1. 0 Tag Description <form> Defines a form for user input <input> Defines

FORMS <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" />

FORMS <form> I have a bike: <input type="checkbox" name="have. Bike" value="Bike" /> I have

FORMS <form> I have a bike: <input type="checkbox" name="vehicle[]" value="Bike" /> I have a

FORMS <form> I have a: <select name='vehicle'> <option value='bike'>Bicycle</option> <option value='car'>Shiny shiny car</option> <option

FORMS <form name="input" action="submit. php" method="GET"> Username: <input type="text" name="user" /> <input type="submit" value="Submit"

TABLES V 1. 0 Tag Description <table> Defines a table <th> Defines a table

TABLES <table border ="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>

TYPICAL WEBPAGE STRUCTURE V 1. 0 Szabo. Zs 31

THE GOD OF <DIV> V 1. 0 Szabo. Zs • Easier to design/change •

STYLE (only copypaste into project) • HTML 3: several tags to affect the style

STYLE • <link rel="stylesheet" type="text/css" href="mystyle. css"> • <style type="text/css"> body { background-color: red

CSS BOX MODEL • Weakly supported in the beginning (especially IE 5, IE 6,

Practical example. . . • Instead of small CSS/HTML snippets … • Create a

Checker 0 – 1765 bytes V 1. 0 Szabo. Zs 38

Checker 1 – 1215 bytes V 1. 0 Szabo. Zs 39

Checker 2 – 357 bytes V 1. 0 Szabo. Zs 40

Checker 3 – 307 bytes V 1. 0 Szabo. Zs 41

Checker 4 – 241 bytes V 1. 0 Szabo. Zs 42

JAVASCRIPT(not required at all) • Clientside program (executed by the browser): <html> <body> <script

EVENTS Attribute Value Description onchange script Script to be run when the element changes

DOM ELEMENT ACCESS • document. name vs document. get. Element. By. Id() • var

TYPING • Weakly/loosely/dynamically-typed language function wl(what){ document. write(what); document. write( "<hr>" ); } var

SELF REFERENCING var obj = { a: 5, b: 6, arr: [ 4, 5,

REVEALING MODULE PATTERN • Lack of proper OOP in JS • Workarounds: Prototype inheritance,

REALTIME ASYNC COMMUNICATION • Not possible in original HTTP • Many possible workarounds –

j. Query • „Write Less, Do More” • Main features: – Normalize vendor-specific javascript

j. Query example • Instead of simple snippets… Let’s build a tree! • Typical

Problems with trees • Typical solution from programs is using recursion or sql CONNECT

$Style. tree_over { background-color: #fff; }. hidden { display: none; } . tree_wrapper {$

$Set-Up function myscroll(){ $('html, body' ). animate( { scroll. Top: $( ". tree_clicked" ).$

Algorithm • $(window). load( function (){ Loop Through Every Node, put to its good

Loop Through Every Node, initialize var nums= new Array(); $("#treediv" ). children(). each( function

When we click… then, we should scroll … $('. tree_name' ). css( "cursor" ,

Show only the good nodes $(". subtree" ). children( ". tree_elem" ). hide(); var

EXERCISE • Let's create a basic HTML+CSS combination • Header: some image, Nav: Menu

Slides: 62

Download presentation

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples (source: w 3 schools. com) V 1. 0 Szabo. Zs 1

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples V 1. 0 Szabo. Zs 2

MVC • Model – View – Controller : separated layers • HTML: format to describe content shown in browsers • HTML 3: content + style together • HTML 4: mixed (chaos) • HTML 5: only content + CSS: style „The Right Way” V 1. 0 Szabo. Zs 3

HTML • HTML is used to describe the content of webpages • HTML = Hyper Text Markup Language • HTML is NOT a programming language, but it is a markup language • A markup language's tokens are markup tags, the different language's are different in the possible tags and the different rules and restrictions: XML , SGML, HTML, SVG V 1. 0 Szabo. Zs 4

HTML • The HTML tags are sorrounded by < and > letters, e. g. <html> (which marks the starting point of the document) • The HTML tags usually come in pairs, like <html> and </html> (starting and end point of the document, opener and closer tags) • Comments:  • Most of the HTML tags can include other HTML tags and/or attributes (inline vs. block elements) • <head>: Meta tags (invisible content) SEO, Pagerank • <body>: Displayed content V 1. 0 Szabo. Zs 5

HTML <html> <head> <title>Page title</title> </head> <body> <h 1>My First Heading</h 1> <p>My first paragraph</p> <a href="http: //www. w 3 schools. com">This is a link</a> <br > <img src="w 3 schools. jpg" width="104" height="142"> <hr/> </body> V 1. 0 Szabo. Zs 6

HTML • HTML entity: & entity_name ; OR &#entity_number ; – < > & © • References: – Absolute (<img src=‘/path/to/file. jpg’>) – Relative (<img src=‘path/to/file. jpg’>) – External (using protocol definition) (<img src=‘http: //index. hu/path/file. jpg’>) – The trailing slash can be important: <a href=‘path/to/dir’> vs <a href=‘path/to/dir/’> small things can affect the performance V 1. 0 Szabo. Zs 7

HTML • HTML vs. XHTML: different level of strictness, different complexity and behavior of the browser (XHTML is better and simpler to render – documents are not expected to be valid now [ valid vs. well-formed ]) • There are several approaches and ways to do the same thing (e. g. align to center: HTML 3: <center> HTML 4: <p align=‘center’> <p style=‘textalign: center’> HTML 5: ONLY style/CSS) • Various browsers interpret and implement the standards in different ways ? ? ? V 1. 0 Szabo. Zs 8

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples V 1. 0 Szabo. Zs 9

ACID 1: HTML+CSS 1 (1998) V 1. 0 Szabo. Zs 10

ACID 2: HTML + CSS 2. 1 + PNG V 1. 0 Szabo. Zs 11

ACID 2 V 1. 0 Szabo. Zs 12

ACID 2 (2005) and the browsers • Safari 2. 0. 2 (Webkit, 31/OCT/2005), Konqueror 3. 5 (KHTML, 29/NOV/2005), Chrome 1 (Webkit/KHTML, 11/DEC/2008) ? ? • Opera 9 (Presto, 20/JUN/2006) • FF 3 (Gecko, 17/JUN/2008) ? ? ? • IE 8 (Trident, 19/MAR/2009) V 1. 0 Szabo. Zs 13

ACID 3: HTML + DOM + JS V 1. 0 Szabo. Zs 14

ACID 3 (2008) and the browsers • • Safari 4 (8/JUN/2009), Chrome 4 (25/JAN/2010) Opera 10 (01/SEP/2009) FF 4 (22/MAR/2011) IE 8 (20/100), IE 9 beta: 32/100 (18/NOV/2009) , 95/100 (04/AUG/2010) • IE 9: 17/SEP/2011 (100 points, but incorrect shadow) • From the browsers above, ONLY the Webkit-based browsers (Chrome, Safari, Epiphany/WEB) fulfill the performance requirement (continous animation without breaks and stops) V 1. 0 Szabo. Zs 15

ACID 4? • More SVG, CSS 3; less JS • Multicol layout, special backgrounds (e. g. transients, background-combinations) • Subpixel/Sub-line accuracy Wa. SP dismissed as of 2013, future doubtful. . . è What can we learn from the ACID tests: every browser ****! è But the user/client will NEVER blaim the browser, only the programmer… è It is not enough to know the standards, we must also be familiar with the browsers V 1. 0 Szabo. Zs 16

… And Chrome Rules All • https: //www. w 3 schools. com/browsers / • Rendering engines: Webkit (Safari), Gecko (Firefox), Blink(Chrome, Edge, Opera) V 1. 0 Szabo. Zs 17

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples V 1. 0 Szabo. Zs 18

COLORS V 1. 0 00000033 000066 000099 0000 CC 0000 FF 003300 003333 003366 003399 0033 CC 0033 FF 006600 006633 006666 006699 0066 CC 0066 FF 009900 009933 009966 009999 0099 CC 0099 FF 00 CC 00 00 CC 33 00 CC 66 00 CC 99 00 CCCC 00 CCFF 00 00 FF 33 00 FF 66 00 FF 99 00 FFCC 00 FFFF 330000 330033 330066 330099 3300 CC 3300 FF 333300 33333366 333399 3333 CC 3333 FF 336600 336633 336666 336699 3366 CC 3366 FF 339900 339933 339966 339999 3399 CC 3399 FF 33 CC 00 33 CC 33 33 CC 66 33 CC 99 33 CCCC 33 CCFF 33 FF 00 33 FF 33 33 FF 66 33 FF 99 33 FFCC 33 FFFF 660000 660033 660066 660099 6600 CC 6600 FF 663300 663333 663366 663399 6633 CC 6633 FF 666600 666633 66666699 6666 CC 6666 FF 669900 669933 669966 669999 6699 CC 6699 FF 66 CC 00 66 CC 33 66 CC 66 66 CC 99 66 CCCC 66 CCFF 66 FF 00 66 FF 33 66 FF 66 66 FF 99 66 FFCC 66 FFFF 990000 990033 990066 990099 9900 CC 9900 FF 993300 993333 993366 993399 9933 CC 9933 FF 996600 996633 996666 996699 9966 CC 9966 FF 999900 999933 999966 999999 CC 9999 FF 99 CC 00 99 CC 33 99 CC 66 99 CC 99 99 CCCC 99 CCFF 99 FF 00 99 FF 33 99 FF 66 99 FF 99 99 FFCC 99 FFFF CC 0000 CC 0033 CC 0066 CC 0099 CC 00 CC CC 00 FF CC 3300 CC 3333 CC 3366 CC 3399 CC 33 CC CC 33 FF CC 6600 CC 6633 CC 6666 CC 6699 CC 66 CC CC 66 FF CC 9900 CC 9933 CC 9966 CC 9999 CC 99 CC CC 99 FF Szabo. Zs 19

HTML ATTRIBUTES V 1. 0 Attribute Value Description class_name The class of the element id (vs. name) id_name A unique id for the element style_definition An inline style definition title tooltip_text A text to display in a tool tip Szabo. Zs 20

HTML 4 (HTML 5) Tag <b> <big> <em> Description Defines bold text( strong) Defines big text( style) <i> <small> Defines emphasized text Defines italic text( em) Defines small text( style) <strong> <sub> <sup> <ins> <del> <u> Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text ( strike) Underlined ( style) V 1. 0 Szabo. Zs 21

LISTS <ul> <ol> <dl> <li>Coffee</li> <dt>Coffee</dt> <li>Milk</li> <dd>Black hot </ul> </ol> drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> V 1. 0 Szabo. Zs 22

V 1. 0 Tag Description <form> Defines a form for user input <input> Defines an input field <textarea> Defines a text-area (a multi-line text input control) <label> Defines a label to a control <fieldset> Defines a fieldset <legend> Defines a caption for a fieldset <select> Defines a selectable list (a drop-down box) <option> Defines an option in the drop-down box <button> Defines a push button Szabo. Zs 23

FORMS <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> </form> <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female </form> V 1. 0 Szabo. Zs 24

FORMS <form> I have a bike: <input type="checkbox" name="have. Bike" value="Bike" /> I have a car: <input type="checkbox" name="have. Car" value="Car" /> I have an airplane: <input type="checkbox" name="have. Airplane" value="Airplane" /> </form> V 1. 0 Szabo. Zs 25

FORMS <form> I have a bike: <input type="checkbox" name="vehicle[]" value="Bike" /> I have a car: <input type="checkbox" name="vehicle[]" value="Car" /> I have an airplane: <input type="checkbox" name="vehicle[]" value="Airplane" /> </form> V 1. 0 Szabo. Zs 26

FORMS <form> I have a: <select name='vehicle'> <option value='bike'>Bicycle</option> <option value='car'>Shiny shiny car</option> <option value='airplane'>Flying airplane</option> </select> </form> V 1. 0 Szabo. Zs 27

FORMS <form name="input" action="submit. php" method="GET"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> GET vs POST HTTP vs HTTPS ID vs name V 1. 0 Szabo. Zs 28

TABLES V 1. 0 Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer Szabo. Zs 29

TABLES <table border ="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> V 1. 0 <table border ="1"> <tr> <td>row 1, cell 1</td> <td colspan=‘ 2’>cell 2</td> </tr> <td>row 2, cell 1</td> </tr> </table> Szabo. Zs 30

TYPICAL WEBPAGE STRUCTURE V 1. 0 Szabo. Zs 31

THE GOD OF <DIV> V 1. 0 Szabo. Zs • Easier to design/change • Easier to separate the style and the content using CSS • By default a blocklevel element, but this can be changed • float: none, left, right • clear: both • THE MOST IMPORTANT HTML TAG! 32

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples V 1. 0 Szabo. Zs 33

STYLE (only copypaste into project) • HTML 3: several tags to affect the style , HTML 4: those tags are now deprecated • HTML 5: those tags are now removed, ONLY CSS AND THE STYLE ATTRIBUTE should be used! • We will not explicitly use HTML 5, but tags (<center>, <b>, <u>) and attributes (align, color, bgcolor) that affect the look of a page are discouraged • Rules for tag, class, id V 1. 0 style="text-align: center; font-weight: bold; font-decoration: underline; color: white; background-color: green; font-family: Times; font-size: 10 px” Szabo. Zs 34

STYLE • <link rel="stylesheet" type="text/css" href="mystyle. css"> • <style type="text/css"> body { background-color: red } p { margin-left: 20 px } </style> • <p style="color: red; margin-left: 20 px"> This is a paragraph </p> V 1. 0 Szabo. Zs 35

CSS BOX MODEL • Weakly supported in the beginning (especially IE 5, IE 6, IE 7 (till 2009)), multiple CSS files were used • The new IE versions are a lot better, de pixel-correct webpages are difficult to create • Less, Sass, Stylus V 1. 0 Szabo. Zs 36

Practical example. . . • Instead of small CSS/HTML snippets … • Create a checkerboard – ONLY HTML+CSS (no js or images) • Aim: smallest possible size V 1. 0 Szabo. Zs 37

Checker 0 – 1765 bytes V 1. 0 Szabo. Zs 38

Checker 1 – 1215 bytes V 1. 0 Szabo. Zs 39

Checker 2 – 357 bytes V 1. 0 Szabo. Zs 40

Checker 3 – 307 bytes V 1. 0 Szabo. Zs 41

Checker 4 – 241 bytes V 1. 0 Szabo. Zs 42

JAVASCRIPT(not required at all) • Clientside program (executed by the browser): <html> <body> <script type="text/javascript"> document. write("Hello World!") </script> </body> </html> V 1. 0 Szabo. Zs 43

EVENTS Attribute Value Description onchange script Script to be run when the element changes onsubmit script Script to be run when the form is submitted onclick script What to do on a mouse click onkeydown script onkeypress script onkeyup script V 1. 0 What to do when key is pressed and released What to do when key is released Szabo. Zs 44

DOM ELEMENT ACCESS • document. name vs document. get. Element. By. Id() • var obj=document. get. Element. By. Id(‘xxx’); obj. style. display=‘none’; • The commands and properties are now more or less the same • Huge differences in the performance (chrome++, IE--) • Old technology, almost extinct AJAX !!! • Frameworks: j. Query, prototype, mootools, YUI, Ext. JS • New Frameworks: React, Vue, Angular V 1. 0 Szabo. Zs 45

TYPING • Weakly/loosely/dynamically-typed language function wl(what){ document. write(what); document. write( "<hr>" ); } var a=5; wl(a); var b=a+5; wl(b); var b=b+"5"; wl(b); var c=function (){ alert( "HELLO" ); }; wl(c); c(); var d=b+c; wl(d); var e=parse. Int(d); wl(e); V 1. 0 Szabo. Zs 46

SELF REFERENCING var obj = { a: 5, b: 6, arr: [ 4, 5, 6, 7], str: "Bela" , init: function () { this. c = this. a + this. b; return this; } }. init(); wl(obj. str ); wl(obj. c ); V 1. 0 Szabo. Zs 47

REVEALING MODULE PATTERN • Lack of proper OOP in JS • Workarounds: Prototype inheritance, Revealing pattern V 1. 0 Szabo. Zs 48

REALTIME ASYNC COMMUNICATION • Not possible in original HTTP • Many possible workarounds – Forever Frame (push into hidden iframe) – AJAX, Long polling – Server Sent Events (Event. Source, not in IE) – Web. Sockets • Possible alternative: Signal. R in. NET – uses Web. Sockets, fallbacks to other solutions in case of failure • We write too much javascript code, browsers are different, implementations are different… We need a soluton! V 1. 0 Szabo. Zs 49

j. Query • „Write Less, Do More” • Main features: – Normalize vendor-specific javascript language elements (e. g. e. which, e. keycode) – Use CSS (and CSS-like) selectors to specify target element(s): tag, class, id, : even, : not, [attr=val] – Define events/execute code for target element(s) – Chain up multiple operations for same element(s) – Easier AJAX manipulation V 1. 0 Szabo. Zs 50

j. Query example • Instead of simple snippets… Let’s build a tree! • Typical task: menus, toolbars, structured multi-level lists V 1. 0 Szabo. Zs 51

Problems with trees • Typical solution from programs is using recursion or sql CONNECT BY/WITH • We do not like recursion… • CONNECT BY is not supported by mysql, for example (and the syntax of the WITH clause is horrific) • Finding errors in a recursive function or a recursive html element is hard • Alternative solution – Build the tree as a sequential list from DIVs – Every div should have two attributes: ID and PARENT – Additionally: NAME and CONTENT – Loop through the list using j. Query, build the tree in V 1. 0 Szabo. Zs 52

$Style. tree_over { background-color: #fff; }. hidden { display: none; } . tree_wrapper {$

Style. tree_over { background-color: #fff; }. hidden { display: none; } . tree_wrapper { min-height: 50 px; border: 1 px dotted gray; background-color: #ddd; }. tree_elem { padding-left: 20 px; min-height: 50 px; border: 1 px dotted gray; background-color: #eee; } V 1. 0 Szabo. Zs 53

$Set-Up function myscroll(){ $('html, body' ). animate( { scroll. Top: $( ". tree_clicked" ).$

Set-Up function myscroll(){ $('html, body' ). animate( { scroll. Top: $( ". tree_clicked" ). offset(). top- 20} , 800); } $(window). load( function (){ $(". tree_wrapper" ). mouseover( function (){ $(this). add. Class( "tree_over" ); }). mouseout( function (){ $(this). remove. Class( "tree_over" ); }); V 1. 0 Szabo. Zs 54

Algorithm • $(window). load( function (){ Loop Through Every Node, put to its good location Show initialized state of the tree IF we click on a tree element Hide all tree parts Show sub-tree for clicked element Show root elements Scroll to clicked element IF ends }); V 1. 0 Szabo. Zs 55

Loop Through Every Node, initialize var nums= new Array(); $("#treediv" ). children(). each( function (index, element ){ // OR: We could use. attr() var parentid=$(element). children( ". tree_parentid" ). first(). html( ); var nodeid=$(element). children( ". tree_nodeid" ). first(). html(); $(element ). detach(); $("#subtree_" +parentid). append($(element)); if (nums[parentid] == null) nums[parentid]= 0; nums[parentid]++; $("#subnumber_" +nodeid). html( 0); $("#subnumber_" +parentid). html(nums[parentid]); }); $(". tree_elem" ). hide(); $(". parent_0" ). show(); Szabo. Zs V 1. 0 56

When we click… then, we should scroll … $('. tree_name' ). css( "cursor" , "hand "). css("cursor" , "pointer" ). click( function (obj){ var $clicked_elem=$( this). parent(); $("#subtree_0 "). find( '. tree_clicked '). remove. Class ("tree_clicked" ); //$('. tree_clicked') vs find() vs children () $clicked_elem. add. Class( "tree_clicked "); [. . . Show only good tree nodes. . . ] myscroll(); }); V 1. 0 Szabo. Zs 57

Show only the good nodes $(". subtree" ). children( ". tree_elem" ). hide(); var num=0; var $akt_elem=$clicked_elem; do { $akt_elem. children( ". subtree "). children( ". tree_elem" ). show(); $akt_elem=($akt_elem. parent()); num++; if (num== 10) { alert( "ERROR: TOO DEEP WHILE CHAIN" ); return ; } } while ($akt_elem. attr( 'id')!="subtree_0" ); $(". parent_0" ). show(); V 1. 0 Szabo. Zs 58

PHP+SQL 0. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples V 1. 0 Szabo. Zs 59

EXERCISE • Let's create a basic HTML+CSS combination • Header: some image, Nav: Menu with links, Footer: information about the creator, Main: Lorem ipsum V 1. 0 Szabo. Zs 60

V 1. 0 Szabo. Zs 61

Szabo. Zs 62