DOCSLIB.ORG

Markup Languages and HTML5

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Markup Languages and HTML5 Web Technologies VU (706.704) Vedran Sabol ISDS, TU Graz Oct 19, 2020 Vedran Sabol (ISDS, TU Graz) Web Technologies Oct 19, 2020 1 / 71 Outline 1 Markup Languages 2 Web Standards Model 3 Introduction to HTML5 4 General Markup Changes 5 Forms Markup Changes 6 Graphics with Canvas Vedran Sabol (ISDS, TU Graz) Web Technologies Oct 19, 2020 2 / 71 HTML5 - Part I Web Technologies (706.704) Vedran Sabol ISDS, TU Graz Oct 19, 2020 Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 3 / 71 Markup Languages Markup Languages Markup: additional information, how to interpret the text in a document In all text-processing applications Typically, invisible to the user E.g. in LaTeX: \section{title of section} In HTML: <p>new paragraph, blabla...</p> Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 4 / 71 Markup Languages Structure Structure defined as nested elements Element: tags, attributes, content Tags: start tag + end tag Attributes: inside start tag Content: Text + sub-elements Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 5 / 71 Markup Languages Generalized/Descriptive Markup Describe structure of documents only Presentation and/or behavior of documents defined elsewhere Separate content (structure) from presentation and/or behavior This principle has a number of advantages Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 6 / 71 Markup Languages Advantages Code efficiency: smaller files by separating content, presentation and behavior Presentation and behavior files stored separately and only once No overhead in markup files, saves network bandwidth Change them at a single place for all markup files Ease of maintenance and consistency in presentation and behavior Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 7 / 71 Markup Languages Advantages Device compatibility Easy to apply alternative presentations and behavior, e.g. handheld devices Web crawlers/robots: documents contain only markup and content No information that is hard for robots to crawl and parse Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 8 / 71 Markup Languages Standardized General Markup Language SGML: quite old ISO standard ISO8879 (1986) Meta - markup language: define other markup languages with it Does not define the markup, only provide the means to define it Defines the basic syntax How to distinguish content from markup (elements, attributes, entities) Interpration and semantics is defined by the processing application Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 9 / 71 Markup Languages Standardized General Markup Language Elements (nested) describe the structure of a document Element is delimited with a start-tag and an end-tag end-tag is not obligatory :-( Attributes describe properties associated with elements Entities: asociate a string with either a unique alias or reserverd words SGML based on ASCII: binary data and special characters coded as entities Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 10 / 71 Markup Languages Standardized General Markup Language Document type definition (DTD) file defines the markup Which elements are allowed, required, and how they are nested Which attributes an element may/must have The application understands the markup and knows what to do with it Syntactical check against the basic SGML syntax and the specific DTD syntax Well-formed document (markup-syntax only) vs. valid document (DTD) Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 11 / 71 Markup Languages Standardized General Markup Language Problems of SGML: Very complex, specification with 500+ pages In addition to that the DTD Omission of end-tags: hard for parsers Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 12 / 71 Markup Languages eXtensible Markup Language XML: a new meta-markup language (does not define tag semantics) Approx. 50 pages specification, easier to use :) Cleaner syntax, easier to write parsers Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 13 / 71 Markup Languages eXtensible Markup Language Required: end-tags, quotation marks with attributes, correct nesting If a markup does not have content: empty-tag (e.g. <empty/>) Names are case-sensitive XML strictly separates the content, presentation and behavior: need additional technologies for that Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 14 / 71 Markup Languages HyperText Markup Language The most well-known SGML DTD 1990 Tim Berners-Lee used an SGML DTD Added images, links, and created HTML DTD Original idea: a simple DTD, separation of content, presentation and behavior Application created to understand the HTML DTD: browser! Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 15 / 71 Markup Languages HyperText Markup Language Standardisation efforts by Web Consortium W3C: HTML 4.01 W3C recommendation since 1999 Problems creating a standard: \Browser Wars" (Netscape vs. Microsoft) Adding presentation specific tags (font, colors, center ...) Adding different scripting languages for behavior Mixture of presentation, behavior and content Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 16 / 71 Markup Languages (X)HTML eXtensible HyperText Markup Language (XHTML) http://www.w3.org/TR/xhtml1/ XHTML is redefinition of HTML in XML HTML 4.01 reformulated as an XML DTD (insted of SGML DTD) Decomposition into a number of modules Module is a set of elements used for the same purpose Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 17 / 71 Markup Languages (X)HTML Structure module: body, head, html, title Text module: headings, div, span, etc, Hypertext module: a Table module: table, tr, td, etc. Each module defined with an XML DTD Purpose: create an XHTML dialect by combining needed modules Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 18 / 71 Markup Languages Markdown XML criticized for verbosity (and complexity) Markdown language was created in 2004 Very easy to read and write plain text format Text-to-HTML conversion tool converts markdown to structurally valid XHTML or HTML Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 19 / 71 Web Standards Model Web Standards Model Web Consortium defines the Web Standards Model (X)HTML: markup Cascading Style Sheets (CSS): presentation/styles Javascript: behavior Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 20 / 71 Web Standards Model CSS Better control for formatting and layout of HTML elements Browsers implement default presentation, can be altered by CSS You can influence formats, fonts, colors, text alignment, spacings, positioning ... Specify in an external document - advantages of separating content and presentation Specifications (approved by W3C): CSS1 and CSS2 (completed), CSS3 (in development, divided into modules) Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 21 / 71 Web Standards Model Javascript JavaScript (JS) is an interpreted programming language (1995) Formalized in the ECMAScript standard since 1997, latest version is 10 (June 2019) JS embedded in HTML code or using external Javascript files External files: separation of content and behavior Works on the Document Object Model (DOM) Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 22 / 71 Introduction to HTML5 HTML development HTML5 is the next major revision of the HTML standard W3C Recommendation (since October 2014) The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in 2004 The group consisted of industry players - mainly browser vendors XHTML2 group developed further XHTML standard at W3C 2009 W3C stopped the work on XHTML2 and joined HTML Working group Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 23 / 71 Introduction to HTML5 HTML5 development Web Hypertext Application Technology Working Group (WHATWG) HTML Living Standard World Wide Web Consortium (W3C) Main international standards organization for WWW HTML5 first draft in 2007 Stable HTML5 Recommendation released in October 2014 5.2 Recommendation in 2017 Development on 5.3, first draft in 2017 W3C authority on HTML and DOM to WHATWG (May 2019) WHATWG's HTML Living Standard is now authoritative! Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 24 / 71 Introduction to HTML5 HTML5 Overview HTML5 is not only hypertext markup language It is a collection of various Web technologies Markup part Presentation part (CSS3) Behavior (Javascript) Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 25 / 71 Introduction to HTML5 HTML5 Overview HTML5 introduces new elements reflecting typical usage of websites E.g. replaces generic div and span elements with navigation and footer elements The canvas element for 2D drawing Ability to use inline SVG and MathML in text/html Multimedia elements such as audio and video for media playback Deprecated elements (e.g. font) removed - use CSS instead Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 26 / 71 Introduction to HTML5 HTML5 Overview Emphasis on DOM scripting Adjusted and new APIs for DOM scripting Browser history management Offline web applications (cacheing, local storage) Various storage mechanisms: Web SQL, File API, Indexed DB (key-value store) Drag-and-drop support Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 27 / 71 Introduction to HTML5 HTML5 Overview Microdata: nesting semantic metadata within content Geolocation API Backgroud threads: Web Workers Full duplex client-server communication: Web Sockets Cross-document messaging mechanisms Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 28 / 71 General Markup Changes General markup changes HTML5 is not
Load more

Recommended publications
  • CSS 3 Margins Divs
    VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 __________________________________________________________________________________ CSS 3 - LAYOUT BASICS A FUNDAMENTAL CONCEPT – WHAT IS MEANT BY CASCADING The cascade is how CSS resolves conflicts when more than one rule is applied to the same element 4 style sheets applying: Internal styles External styles sheet Internal styles Browserʼs default style sheet Inline will beat out all – WHY? It is lowest in the cascade. Order of CSS rules is important The later a rule appears in a style sheet the more weight it is given MARGINS, BORDERS, PADDING See Ch. 10 – Web Standardistas Book About spacing – the space around our elements The effect the relationship of one element to another. The all important BOX MODEL All elements treated as boxes. Some are block-level Some are inline-level Each box is comprised of a content area and optional margins, borders and padding Up to now these have all be set by the Browserʼs default style all these can be specified The width of an element includes all – e.g. Margin-left + border-left + padding left – element width + padding-right + border-right + margin right Applying margins borders and padding See short html page in Ch. 10 First pass – no margins – fits to left edge of page Second pass - add background colour so we can see the block-level paragraph element Third pass - Before we add margins we must remove margins set by the browserʼs default style sheet. Set margin on body and on p to margin: 0; Once this is done you can add margin: 40 px; This sets margin on all four sides to 40 pixels.
    [Show full text]
  • CSS 2.1) Specification
    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Editors Draft 26 February 2014 This version: http://www.w3.org/TR/2014/ED-CSS2-20140226 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/REC-CSS2-20110607 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Editors: Bert Bos <bert @w3.org> Tantek Çelik <tantek @cs.stanford.edu> Ian Hickson <ian @hixie.ch> Håkon Wium Lie <howcome @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1]. It supports media- specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface. CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented.
    [Show full text]
  • Advanced XHTML and CSS
    CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 4 Advanced XHTML and CSS Copyright © 2014 by Stephen Makonin Slides based on course material © SFU Icons © their respective owners 1 Learning Objectives In this unit you will learn the following. • Use XHTML to create valid web pages. • Design HTML so it can be easily styled with CSS. • Develop CSS rules to create particular appearances. • Understand CSS colour codes for a given colour. • Construct a CSS that implements a visual design. • Justify the separation of content and structure from visual appearance. • Select appropriate HTML tags to correctly describe the different parts of the page. Copyright © 2014 by Stephen Makonin 2 Topics 1. Validating XHTML 2. Common Mistakes Lecture 1 3. Block vs. Inline Elements 4. Character Entities 5. Generic Tags, IDs and Classes Lecture 2 6. Style Selectors Revisited 7. Positioning Elements Lecture 3 8. Steps in Webpage Creation Copyright © 2014 by Stephen Makonin 3 Valid XHTML Valid XHTML means your markup follows a set of rules: • Have a document type (DOCTYPE) at the top of the. • Specific the namespace in <html>. • Open tags must close in order. • Inline tags must be inside block tags. • Some tags such as <li> can only be in <ol> or <ul>. • Special characters (e.g. <) in content must be encoded. • Markup tags and attributes name are lowercase. If these rules are followed the a validator says: �� Otherwise: Copyright © 2014 by Stephen Makonin 4 �� Empty Valid XHTML Copyright © 2014 by Stephen Makonin 5 Document Type You MUST declare a document type as the 1st line in your XHTML document.
    [Show full text]
  • Document Object Model
    Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
    [Show full text]
  • Amazon Silk Developer Guide Amazon Silk Developer Guide
    Amazon Silk Developer Guide Amazon Silk Developer Guide Amazon Silk: Developer Guide Copyright © 2015 Amazon Web Services, Inc. and/or its affiliates. All rights reserved. The following are trademarks of Amazon Web Services, Inc.: Amazon, Amazon Web Services Design, AWS, Amazon CloudFront, AWS CloudTrail, AWS CodeDeploy, Amazon Cognito, Amazon DevPay, DynamoDB, ElastiCache, Amazon EC2, Amazon Elastic Compute Cloud, Amazon Glacier, Amazon Kinesis, Kindle, Kindle Fire, AWS Marketplace Design, Mechanical Turk, Amazon Redshift, Amazon Route 53, Amazon S3, Amazon VPC, and Amazon WorkDocs. In addition, Amazon.com graphics, logos, page headers, button icons, scripts, and service names are trademarks, or trade dress of Amazon in the U.S. and/or other countries. Amazon©s trademarks and trade dress may not be used in connection with any product or service that is not Amazon©s, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon. AWS documentation posted on the Alpha server is for internal testing and review purposes only. It is not intended for external customers. Amazon Silk Developer Guide Table of Contents What Is Amazon Silk? .................................................................................................................... 1 Split Browser Architecture ......................................................................................................
    [Show full text]
  • Webgl, Webcl and Beyond!
    WebGL, WebCL and Beyond! Neil Trevett VP Mobile Content, NVIDIA President, Khronos Group © Copyright Khronos Group, 2011 - Page 1 Two WebGL-focused Sessions Today • Industry ecosystem and standards for 3D and compute - What is 3D anyway – jungle survival primer - Khronos and open standard acceleration APIs for native apps - The evolution of pervasive 3D on mobile platforms - WebGL and WebCL as part of HTML5 - Web apps and use cases beyond games – augmented reality • Hands-On with WebGL - Steve Baker - Intific WebGL Reference Cards at end of session! © Copyright Khronos Group, 2011 - Page 2 What is Real-time 3D Graphics? © Copyright Khronos Group, 2011 - Page 3 3D Pipeline Basics • The art of “faking” realistic looking scenes or objects using heuristic techniques learned over the years • The objects making up a scene are held in a database • Surfaces of objects are broken down into a grid of polygons • The vertices of the polygons are located in 3D coordinate space - x,y,z • Each vertex has a “material” – color and reflective properties • Vertices are positioned in 3D space – matrix math zooms and rotates y x2,y2,z2 x1,y1,z1 z x3,y3,z3 x © Copyright Khronos Group, 2011 - Page 4 3D Pipeline Basics – Pixel Shading • Project each polygon onto the screen Interpolate colors - Determine which pixels are affected between vertices • Smooth Shading Lighting - Run lighting equation at each vertex equation each - Compute vertex color depending vertex on how lights interact with surface angles and properties - Interpolate colors between the vertices
    [Show full text]
  • Basics of HTML Canvas
    13/02/2017 Basics of HTML Canvas Material taken from http://www.w3schools.com CSCU9B2 CSCU9B2 1 We are going to cover • What HTML canvas is, and what it can do • Most commonly used canvas methods • Example of a simple animated application CSCU9B2 2 1 13/02/2017 What is Canvas? Canvas is a medium for oil painting, typically stretched across a wooden frame. What is HTML Canvas? • HTML canvas is about drawing graphics • There is a set of JavaScript methods (APIs) for drawing graphics (lines, boxes, circles, shapes). • HTML canvas is a rectangular area on a web page, specified with the <canvas> element. • The HTML <canvas> element (introduced in HTML5) is a container for HTML graphics. CSCU9B2 4 2 13/02/2017 What can HTML canvas do? • Draw colorful text • Draw graphical shapes • Can be animated. Everything is possible: from simple bouncing balls to complex animations • Can be interactive and respond to events • Offer lots of possibilities for HTML gaming applications CSCU9B2 5 Examples http://www.effectgames.com/demos/canvascycle/ http://hakim.se/experiments/html5/blob/03/ http://bomomo.com/ http://hakim.se/experiments/html5/magnetic/02/ http://worldsbiggestpacman.com/ CSCU9B2 6 3 13/02/2017 Canvas element Looks like this: <canvas id="myCanvas" width="200" height="100"></canvas> • Must have an id attribute so it can be referred to by JavaScript; • The width and height attribute is necessary to define the size of the canvas. CSCU9B2 7 Drawing on the Canvas All drawing on the HTML canvas must be done with JavaScript in three steps: 1. Find the canvas element 2.
    [Show full text]
  • Webgl: the Standard, the Practice and the Opportunity Web3d Conference August 2012
    WebGL: The Standard, the Practice and the Opportunity Web3D Conference August 2012 © Copyright Khronos Group 2012 | Page 1 Agenda and Speakers • 3D on the Web and the Khronos Ecosystem - Neil Trevett, NVIDIA and Khronos Group President • Hands On With WebGL - Ken Russell, Google and WebGL Working Group Chair © Copyright Khronos Group 2012 | Page 2 Khronos Connects Software to Silicon • Khronos APIs define processor acceleration capabilities - Graphics, video, audio, compute, vision and sensor processing APIs developed today define the functionality of platforms and devices tomorrow © Copyright Khronos Group 2012 | Page 3 APIs BY the Industry FOR the Industry • Khronos standards have strong industry momentum - 100s of man years invested by industry leading experts - Shipping on billions of devices and multiple operating systems • Khronos is OPEN for any company to join and participate - Standards are truly open – one company, one vote - Solid legal and Intellectual Property framework for industry cooperation - Khronos membership fees to cover expenses • Khronos APIs define core device acceleration functionality - Low-level “Foundation” functionality needed on every platform - Rigorous conformance tests for cross-vendor consistency • They are FREE - Members agree to not request royalties Silicon Software © Copyright Khronos Group 2012 | Page 4 Apple Over 100 members – any company worldwide is welcome to join Board of Promoters © Copyright Khronos Group 2012 | Page 5 API Standards Evolution WEB INTEROP, VISION MOBILE AND SENSORS DESKTOP OpenVL New API technology first evolves on high- Mobile is the new platform for Apps embrace mobility’s end platforms apps innovation. Mobile unique strengths and need Diverse platforms – mobile, TV, APIs unlock hardware and complex, interoperating APIs embedded – mean HTML5 will conserve battery life with rich sensory inputs become increasingly important e.g.
    [Show full text]
  • Brief Contents
    brief contents PART 1 INTRODUCTION . ..........................................................1 1 ■ HTML5: from documents to applications 3 PART 2 BROWSER-BASED APPS ..................................................35 2 ■ Form creation: input widgets, data binding, and data validation 37 3 ■ File editing and management: rich formatting, file storage, drag and drop 71 4 ■ Messaging: communicating to and from scripts in HTML5 101 5 ■ Mobile applications: client storage and offline execution 131 PART 3 INTERACTIVE GRAPHICS, MEDIA, AND GAMING ............163 6 ■ 2D Canvas: low-level, 2D graphics rendering 165 7 ■ SVG: responsive in-browser graphics 199 8 ■ Video and audio: playing media in the browser 237 9 ■ WebGL: 3D application development 267 iii contents foreword xi preface xiii acknowledgments xv about this book xvii PART 1 INTRODUCTION. ...............................................1 HTML5: from documents to applications 3 1 1.1 Exploring the markup: a whirlwind tour of HTML5 4 Creating the basic structure of an HTML5 document 5 Using the new semantic elements 6 ■ Enhancing accessibility using ARIA roles 9 ■ Enabling support in Internet Explorer versions 6 to 8 10 ■ Introducing HTML5’s new form features 11 ■ Progress bars, meters, and collapsible content 13 1.2 Beyond the markup: additional web standards 15 Microdata 16 ■ CSS3 18 ■ JavaScript and the DOM 19 1.3 The HTML5 DOM APIs 20 Canvas 21 ■ Audio and video 21 ■ Drag and drop 22 Cross-document messaging, server-sent events, and WebSockets 23 v vi CONTENTS Document editing 25
    [Show full text]
  • Pingmei Xu World Wide Web
    Web Programming Pingmei Xu World Wide Web • Wikipedia definition: a system of interlinked hypertext documents accessed via the Internet. image from http://www.syslog.cl.cam.ac.uk/ Web ≠ Internet World Wide Web: a collection Internet: a physical network of interlinked multimedia connecting millions of documents that are stored on computers using the same the Internet and accessed using protocols for sharing/ a common protocol (HTTP) transmitting information (TCP/IP) Web Programming user types in a url browser sends requests to server browser parses the returned server runs PHP, MySQL etc. response and displays then responds to browser with the output to the user HTML, CSS and JavaScript Web Programming Static • Web Document (HTML, CSS) Dynamic • Client-side programming (JavaScript …) can download program with Web page, execute on client machine • Server-side programming (PHP, CGI, Perl …) can store and execute program on Web server, link from Web page HTML What is HTML? HyperText Markup Language (HTML) is the core language of nearly all Web content. .html format HTML code webpage HTML: The Document Tree This hierarchical structure is called the DOM: the Document Object Model. head body HTML: Elements Elements: the basic building blocks which defne the semantic meaning of their content. "<p>" element indicates a paragraph the "<img>" element indicates an image HTML: Tags <h1>: opening tag <h1>: closing tag empty elements like <img> doesn’t need closing tag HTML: Attributes Atributes usually consist of 2 parts: An atribute name: e.g. width An atribute value: e.g. 200 HTML: <img> Tag The <img> tag defnes an image in an HTML page.
    [Show full text]
  • Introduction to CSS
    Introduction to CSS Chapter 4: CSS CS 80: Internet Programming Instructor: Mark Edmonds Intro to CSS • CSS = Cascading Style Sheet • What does HTML5 do? – Specifies the content and structure of the webpage • So far, we haven’t controlled the presentation of the webpage at all. • CSS allows us to control the presentation of the page Intro to CSS • Why not control the presentation within the HTML? – You can! – But in general, it’s better to separate! * Why? Because you can swap the style without changing anything in the HTML docu- ment Inline Style • Specify the style in the html tag through a style attribute – E.g. to change the font size, one might apply the attribute style="font-size: 45pt;" which would set the font size to 45pt. Inline Styles • Advantage: – Styling is applied solely to this instance of the tag (useful if we want custom styling for one particular tag) • Disadvantage: – Styling is applied solely to this instance of the tag (meaning it has no generality; we can’t change the style of every tag across the entire document. In our example, we may want to change every <h2> in the document Mark Edmonds 1 Introduction to CSS Example: inline_styles.html 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Inline CSS Styling</title> 7 </head> 8 9 <body> 10 <p style="font-size: 45pt">We can apply styling to one HTML tag</p> 11 <p>But take notice it doesn't persist in the document</p> 12 <h2 style="font-family: helvetica, tahoma, sans-serif; font-size: 10 pt; color: blue">We can overrride default settings for tags, notice the bold is still applied! </h2> 13 <p>Note: browser will attempt to use font-family specified in order of the comma-separated list.
    [Show full text]
  • Mitigating Javascript's Overhead with Webassembly
    Samuli Ylenius Mitigating JavaScript’s overhead with WebAssembly Faculty of Information Technology and Communication Sciences M. Sc. thesis March 2020 ABSTRACT Samuli Ylenius: Mitigating JavaScript’s overhead with WebAssembly M. Sc. thesis Tampere University Master’s Degree Programme in Software Development March 2020 The web and web development have evolved considerably during its short history. As a result, complex applications aren’t limited to desktop applications anymore, but many of them have found themselves in the web. While JavaScript can meet the requirements of most web applications, its performance has been deemed to be inconsistent in applications that require top performance. There have been multiple attempts to bring native speed to the web, and the most recent promising one has been the open standard, WebAssembly. In this thesis, the target was to examine WebAssembly, its design, features, background, relationship with JavaScript, and evaluate the current status of Web- Assembly, and its future. Furthermore, to evaluate the overhead differences between JavaScript and WebAssembly, a Game of Life sample application was implemented in three splits, fully in JavaScript, mix of JavaScript and WebAssembly, and fully in WebAssembly. This allowed to not only compare the performance differences between JavaScript and WebAssembly but also evaluate the performance differences between different implementation splits. Based on the results, WebAssembly came ahead of JavaScript especially in terms of pure execution times, although, similar benefits were gained from asm.js, a predecessor to WebAssembly. However, WebAssembly outperformed asm.js in size and load times. In addition, there was minimal additional benefit from doing a WebAssembly-only implementation, as just porting bottleneck functions from JavaScript to WebAssembly had similar performance benefits.
    [Show full text]