Web Technologies I HTML Language: the Basics

Transcription

1 Web Technologies I HTML Language: the Basics Darja Solodovņikova adopted from Krišs Rauhvargers

2 HTML: a Language for Web Browsers HTML is a language web browsers understand not intended for reading in a book How to see it: A way of adding "thingies" to text document to make it look better A way to formalize the structure of text to make it look better 2

3 HTML: What is It? HTML is a text markup language HTML document = text document + markup * A demonstration I am a simple document without any formatting. I consist of several paragraphs. The first paragraph ought to be a title. Plain text document <h1>a demonstration</h1> <p>i am a simple document without any formatting.</p> <p>i consist of several paragraphs. The first paragraph ought to be a title.</p> Document with markup * - problem is, text documents withoutformatting don't make much sense 3

4 Types of Markup Languages "Macro" style languages Can be compiled down to "draw this letter here" commands Example: LaTeX, PostScript WYSIWYG languages Markup exists, it's hidden from the user Example: Microsoft RTF Structural markup languages Markup defines only structure Examples: HTML, XML 4

5 Tags in HTML Each "tag" has its meaning and place If you read between the "tags", you get readable text The computer uses "tags" to alter the display of text "Tags" mark the beginning and end of HTML elements and may contain attributes 5

6 THE ORIGINAL WEB 6

7 WWW the First Browser by Tim Berners-Lee Authoring tools included in browser. WYSIWYG! Most popular elements there since " day 1" headings, images, hyperlinks, lists 7 WorldWideWeb:

8 The Roots of HTML "HTML Tags" language defined by T.Berners-Lee in 1992" Has several elements that are still known in the current versions of HTML: TITLE, A, P, H1,.. H6, UL The idea is influenced by SGMLguid, an SGML based language used in CERN Many concepts are inherited from SGML

9 Example "HTML Tags" Document 9

10 EARLY YEARS OF WEB BROWSERS 10

11 18 WW ViolaWWW version of ViolaWWW First popular web browser client-side document insertion a simple stylesheet mechanism a scripting language a sidebar panel Some technologies patented Suing big companies (including Microsoft) decade after browser was dead

12 Mosaic Mosaic browser, Increase of World Wide Web popularity Multiple protocols The first browser to display images inline with text Many GUI features used nowadays by the popular browsers Commercial/paid web browser concept has died out 19

13 Internet Explorer Internet Explorer 1.0, tormenting web developers since 1995 Source code bought from Mosaic Initially paid add-on, quickly made free /Internet_Explorer 20

14 21 Netscape Navigator Netscape Navigator, very popular in the 90s JavaScript FRAME tag New life of Mosaic browser In 1999 released source code and created Mozilla, ancestor of FireFox browser

15 HTML CONCEPTS 15

16 Some Ground Rules Browser should try its best to display a document (even with syntax errors) If the document contains unknown elements, treat them as simple text Compatibility feature so older browsers can display newer markup (and vice versa) Also users make lots of mistakes Multiple white spaces collapse into a single one 16

17 White Spaces and Line Breaks HTML was designed to be pretty-formatted Line breaks are allowed to wrap long lines Additional white spaces can be added Rules are simple: Multiple whitespaces are treated as one Linebreak is treated as a whitespace <p>this is the most dull HMTL sample. </p> In code This is the most dull HTML sample. In the browser 17

18 Syntax of HTML Elements Most elements have an opening tag and a closing tag An opening tag is written like this: "<" + element name + ">" for instance, <p> A closing tag is written like this: "</" + element name + ">" for instance, </p> Content of the element (text, other elements) is written between the opening and the closing tags For instance, <p>an example sentence.</p> 12

19 Auto-Closing of Elements Browsers forgive missing closing tags in many cases <p>this is the first paragraph. <p> This is the second one. Obviously, a paragraph cannot contain a paragraph, hence the first paragraph is auto-closed by the browser But div can contain div Good practice always close your tags 19

20 Elements without Textual Content Some elements (ones that do not have textual content) do not need a closing tag Solutions for this case depend on which version of HTML is used: HTML4, HTML5: just use the opening tag: <img src="picture.jpg" alt="sample"> XHTML: manifest that the element is selfclosing: <img src="picture.jpg" alt="sample" /> <img src="picture.jpg" alt="sample"></img>

21 Attributes An element may need additional information for completeness Hyperlink: where does it link to Image: where to take the picture from Table: does it have a border Rules Attributes are written in the opening tag of an element Attributes should be enclosed in quotes Single or double does not matter, don't mix different together More than 1 attribute should be separated by space <p id= someid class= someclass > Examples <table border="1"> <img src='nomnom.gif'> 15

22 Inclusion of Elements An element may contain other elements (as per its specification/dtd) For instance, a paragraph (p) can contain an image (img). <p> Text of the paragraph. And an image here: <img src="pic.jpg" alt="bilde"> </p> Inclusion must be complete, start/end tags may not overlap: Wrong: <strong>this is bold, <em>this is italics and bold</strong>, the author hoped this would be just italics</em> Right: <strong>this is bold, <em>this is italics and bold</em></strong>, <em>the author hoped this would be just italics</em> 22

23 WEB AUTHORING 23

24 Web Authoring The initial release of "WWW" program was both a browser and an editor Editing was WYSIWYG It rendered "HTML Tags" markup behind the scenes One could write HTML using a plaintext editor 24

25 Two Approaches WYSIWYG Code editing 24

26 Two Approaches of Web Authoring The two approaches still remain: WYSIWYG use visual formatting tools, let the computer take care of markup no (not enough) control over what is generated Source code editing full control over what is generated author has to know syntax and semantics of HTML elements slower on large amounts of data In this course we use the latter approach We are the IT guys, we have to know how it works to fix it when it breaks 26

27 HTML STANDARDIZATION 27

28 Support of "HTML Tags" in Browsers In the early 1990s, specs were published on news groups, open to discussions; Software developers created first versions of browsers. Versioning was quite slow Typical installations lived on a floppy disk Some vendors added specific markup; For instance, ViolaWWW added "frames" support <INSERT SRC="a_quote.html"> And something similar to CSS: (H1 FGColor=white BGColor=red BDColor=black align=center) Other browsers did not understand such markup! 28

29 The Browser Wars Facts In 1994, Mosaic Communications was founded and started creating Netscape Navigator In 1995, Microsoft began developing Internet Explorer The first proposal for an HTML specification was published in the mid-1993 HTML 2.0 standard was published on November, 1995 Way too late! To attract developers and users, both vendors tried to implement as many features as possible Features that were different from other browsers Features that were not documented elsewhere and were "a bit different" than the competitor's way. 29 Result: part of web only working partway!

30 Standards Organizations: W3C A resolution in 1994 to start a World Wide Web Consortium, W3C ( Main aim: creation of generally available web development standards Web standards should be followed by browser developers as well as document authors 30

31 Clarifications Made by in HTML 2.0 Tags vs Elements An HTML document consists of separate elements Element is an "atomic particle" of a document To serialize an element, tags are used DOCTYPE HTML was designed with SGML in mind To conform to SGML standards, DOCTYPE must be used Separation of a document and its metadata HEAD and BODY elements Backwards compatibility "Bad" elements from previous standards are deprecated, but should be rendered by the browser "Do not break the web" 30

32 Doctype A line that identifies the standard used in the document Best copy-pasted, not remembered (syntax comes from SGML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " An XHTML Strict document <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " An HTML4 Transitional document <!DOCTYPE html> An HTML5 document 32

33 DTD example Fragment of HTML 3.2 definition: images 33

34 Document Examples HTML 4.01 Transitional 34

35 Document Examples (2) XHTML 1.0 Strict 35

36 Document Examples (3) HTML 5 36

37 W3C Standards/Recommendations HTML 2.0 (year 1995) Fixes SGML compatibility (DOCTYPE) Standardizes stuff which is already implemented HTML 3.2 (beginning 1997) Adds presentational markup (center, font, small) Adds CSS support HTML 4.0 (1999) Removes presentational markup Adds frames, iframes, new form elements XHTML 1.0 ( 2000) Same as HTML4, rewritten to XML HTML Tags HTML 2.0 HTML 3.0 HTML 3.2 SGML HTML XHTML HTML 5 XHTML 5 New features different serialization XML 1.0 XHTML 2 37

38 Timeline of Web Standards Image source: Harvard University Extension school, "Fundamentals of web development": 37

39 Different "Flavors" of HTML HTML4 introduced a lot of new elements span, button, fieldset, thead Meanwhile, other elements were deprecated Some common u, font, center To enable web developers use new features whithout completely re-writing the pages, "transition time" was allowed 39

40 Different "Flavors" of HTML Error tolerant transitional or loose allows using formerly popular "presentational" attributes and elements HTML 4.01 Transitional ( XHTML 1.0 Transitional ( Fully precise strict disallows use of presentational elements and attributes HTML 4.01 Strict ( XHTML 1.0 Strict ( 40

41 WHATWG Another Standards Organization? WHATWG (Web Hypertext Application Technology Working Group) a group of vendors and implementers interested in improving the current web one of the reasons formed:w3c's decision to abandon HTML in favor of XML-based technologies WHATWG started work on HTML5 which was later continued together with W3C 41

42 WHATWG vs. W3C When there are two versions of a specifications, what should programmers do? "Generally we tell developers to look at the WHATWG version, which tends to be developed with better technical accuracy" - Mozilla Chief Technology Officer Andreas Gal "If you want to see what's already implemented in browsers now, look at W3C spec" Opera Software, Bruce Lawson. "A spec that fails to take in the concerns of [browser makers], regardless of how much consensus it has among [non-browser makers], is a spec that isn't implemented" Google, Ryan Sleevi 41

43 How are Current Standards Different? HTML5 (and CSS3) are different than previous versions Modularity: allows defining the standard part by part as needed, e.g. HTML5 Canvas API CSS3 Backgrounds and Borders Module HTML5 is the first standard to define how to parse invalid markup additionally, trying to be backward-compatible HTML5 adds new elements and clarifies the use of existing ones 43

44 Additions in HTML5 Removed conformance to SGML SGML requires strict syntax, most HTML documents have errors Pretty much gave up on trying to force web developer to write valid code Simplification for commonly mistaken things DOCTYPE, charset, script inclusion Defines "global attributes" e.g., elements can be draggable 44

45 Global Attributes Used on Any Element ID shows that the element differs from antyhing else, assigns an identifier CLASS shows that the element is similar to others having the same class TITLE attribute describes the contents of an element. Technically, title text is shown when you put mouse cursor on the element Other global attributes: 45

46 Standards Support Browsers support standards to certain amount (different in each browser) Standards are ambiguous Browser developers sometimes still: "forget" something relevant partially implement something that will be included in the next versions of standards (HTML5 Canvas) do something on their own (-moz-border-radius) do something that "everybody does" 46

47 OTHER FEATURES OF HTML LANGUAGE 47

48 File Encoding As any text file, HTML files are written to disk in specific encoding It is a good idea to define the encoding in the document HEAD (must match the actual encoding!) HTML5 <meta charset="utf-8"> Earlier versions <meta http-equiv="content-type" content="text/html;charset=utf-8"> HTML allows other encodings, but It's 21st century, use UTF-8 everywhere 48

49 Why UTF-8? When did you last time do View Character encoding while browsing the Web? How often did you do that in 2005? Historical issues in 90s/00s Wrong encoding Undefined encoding using OS defaults Especially in then bilingual Latvian web Is there any (at least theoretical) drawbacks of using UTF-8? 49

50 Substitute Symbols If page text contains angle braces, these have to be substituted, when writing down: <p><look left Look right></p> does not work, no such element "Look" <p> <Look left Look right></p> lt = less than gt = greater than Substitute symbols are in the form "&" + entity name + ";" Another case: if an attribute value contains a quote symbol: <img alt=""like" and "Share" this"> - does not work <img alt=""like" it"> - OK quot = quotation mark 50

51 Substitute Symbols (2) Since the & symbol is reserved for substitutions, it has to be "escaped" as well The & symbol itself has to be substituted: & <img title="wiley & sons"> - sometimes not ok <img title="wiley & sons"> - OK amp = ampersand 51

52 Other Substitutes < < (less than) > > (greater than) " (quote) & & (ampersand)... (ellipsis) (non-breaking space) ü ü (any Unicode symbol) (m-dash, the real "domuzīme") Other: Raquo Laquo? Note: if you're using UTF-8 everywhere, you don't need the Unicode substitutes (except for < > " &) 52

53 Other Goodies from Unicode Large range of symbols allows to define all the world's used alphabets and plenty room left for commonly used symbols e.g., you want to make simple playing card game, let's start with Ace of Spades = Issues with small images with symbols You have to find/buy/draw them You need to host them, all the clients need to load them Drawbacks Different browser/os/font support makes some symbol ranges not work for some clients Users with different fonts (different OS/browsers) will have 53 different visual representation

54 When are Whitespaces not Welcome? Whitespaces can be multiplied/added nearly anywhere in textual content with some exceptions Do not put a space between the tag brace and the element name < table Do put a space after attribute quote and the next attribute name <table border="1"id="sampletable"> 54

55 At Home The history of Web ory_of_the_web The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) by Joel Spolsky Find an editor or IDE, install it, launch it, create skeleton HTML project Suggested IDE NetBeans HTML5 & PHP Installation and setup 55 _netbeans.pdf