HTML.pdf

HTML This content is protected and may not be shared, uploaded, or distributed. Copyright © 1999-2024 Ellis Horowitz 1  What are We Talking About Today? Introduction to HTML – HTML: Markup language for web content – Evolution: From Tim Berners-L...

HTML This content is protected and may not be shared, uploaded, or distributed. Copyright © 1999-2024 Ellis Horowitz 1  What are We Talking About Today? Introduction to HTML – HTML: Markup language for web content – Evolution: From Tim Berners-Lee to HTML5 HTML Structure – Elements & Tags: , , , etc. – Attributes: Define element properties (e.g., src, href) Advanced HTML Features – Forms, Tables, Multimedia: Enhanced content – Validation: Ensuring code quality with tools like W3C Validator © Ellis Horowitz & Marco Papa 1999- 2 2024  What is HTML? HTML stands for Hypertext Markup Language – It is a markup language, which means it is used for processing, definition, and display of data HTML is a tag-based language, similar to XML – HTML tags are already defined though Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2014 Copyright © 1999-2024 Ellis Horowitz 3  What is HTML?(cont’d) Hypertext Markup Language (HTML) is a language in which one can describe: – The display and format of text – The display of graphics – Pointers to other html files – Pointers to files containing graphics, digitized video and sound – Forms that capture information from the viewer HTML was developed by Tim Berners-Lee of CERN around 1990 HTML is supported by Web browsers (e.g., Internet Explorer, Firefox, Chrome, Safari, many others)as well as other applications (such as mail clients, etc) — which interpret and display the output to the viewer Copyright © 1999-2024 Ellis Horowitz 4  First Web Page The first web page ever displayed by Tim Berners- Lee at CERN Copyright © 1999-2023 Ellis Horowitz 5  First Web Site The original web site of the “WWW Project” is still available at CERN http://info.cern.ch/hypertext/WWW/TheProject.html Includes documentation on the original browsers and servers Copyright © 1999-2023 Ellis Horowitz 6  World Wide Web Motivation Originally created in 1989 at CERN (the European Organization for Nuclear Research) for sharing research in a faster manner than journal publications allowed Copyright © 1999-2023 Ellis Horowitz 7  Text Browser – Lynx Developed by Distributed Computing Group within Academic Computing Services of the University of Kansas Team of students and staff with initial release in 1992 https://en.wikipedia.org/wiki/Lynx_(web_browser) Copyright © 1999-2023 Ellis Horowitz 8  First Graphical Browser – NCSA Mosaic Developed at the National Center for Supercomputing Applications (NCSA) at the University of Illinois at Urbana–Champaign Marc Andreessen, lead student developer. NCSA released it in 1993 http://www.ncsa.illinois.edu/ Copyright © 1999-2023 Ellis Horowitz 9  First Commercial Browser – Netscape Netscape Navigator was a proprietary web browser, and the original browser of the Netscape line Co-written by Marc Andreessen, with initial release in Dec. 1994 http://home.mcom.com Copyright © 1999-2023 Ellis Horowitz 10  First Free Commercial Browser – IE Microsoft Internet Explorer (IE) killed Netscape Navigator as it was bundled with Windows 95 Licensed from NCSA, with initial release in August 1995 https://microsoft.com/ie Copyright © 1999-2023 Ellis Horowitz 11  Web Browsers Timeline http://en.wikipedia.org/wiki/List_of_web_browsers Copyright © 1999-2024 Ellis Horowitz 12 Garner Hype Cycle Copyright © 1999-2024 Ellis Horowitz 13  Garner Hype Cycle (cont’d) Innovation Trigger – A potential technology breakthrough kicks things off. Early proof-of-concept stories and media interest trigger significant publicity. Often no usable products exist and commercial viability is unproven. Peak of Inflated Expectations – Early publicity produces a number of success stories — often accompanied by scores of failures. Some companies take action; many do not. Trough of Disillusionment – Interest wanes as experiments and implementations fail to deliver. Producers of the technology shake out or fail. Investments continue only if the surviving providers improve their products to the satisfaction of early adopters. Copyright © 1999-2023 Ellis Horowitz 14  Garner Hype Cycle (cont’d) Slope of Enlightenment – More instances of how the technology can benefit the enterprise start to crystallize and become more widely understood. Second- and third-generation products appear from technology providers. More enterprises fund pilots; conservative companies remain cautious. Plateau of Productivity – Mainstream adoption starts to take off. Criteria for assessing provider viability are more clearly defined. The technology's broad market applicability and relevance are clearly paying off. Source: https://www.gartner.com/en/research/methodologies/gartner- hype-cycle Copyright © 1999-2023 Ellis Horowitz 15  Versions of HTML Version 0, 1990, was the original, minimum set of HTML Version 1 adds highlighting and images Version 2, November 1995, all V.0 and V.1, plus forms Version 3.2, January 1997, released by W3CW, tables HTML 4.01, December 1999 Recommendation: http://www.w3.org/TR/html401/ HTML5, October 2014 Recommendation, vocabulary and APIs: http://www.w3.org/TR/html5/ HTML5, December 2017 HTML 5.2 Recommendation: https://www.w3.org/TR/html52/ HTML Living Standard, December 2019: https://html.spec.whatwg.org W3C and WHATWG Agreement https://www.w3.org/blog/news/archives/7753 “W3C stops independent publishing of a designated list of specifications related to HTML and DOM and instead will work to take WHATWG Review Drafts to W3C Recommendations“ NOTE: some of the examples shown here are extracted from the HTML4.0 specification. This document is copyrighted according to: "Copyright © World Wide Web Consortium. All Rights Reserved. http://www.w3.org/Consortium/Legal/" Copyright © 1999-2023 Ellis Horowitz 16  Elements, Tags and Attributes An HTML file contains Elements, Tags and Attributes HTML Element – Basic HTML node that adds semantics – Can be of two types: Without content: self-closing start-tag With content: start tag, content, end tag HTML Tag – Composed by the name of the Element surrounded by angle brackets – End Tag has a slash after the opening angle bracket (required in HTML5) Attribute – Specified inside Start Tag – Controls element properties / behavior or provides metadata self-closing tag Copyright © 1999-2024 Ellis Horowitz 17  My First HTML 1 2 3 4 5 My First HTML 6 7 8 Hello CSCI 571! 9 10 Copyright © 1999-2024 Ellis Horowitz 18  General Structure HTML documents have a head and a body – head contains title and other metadata – body contains page content (paragraphs, etc…) A leading line indicates which version of HTML this document conforms to The Solar System The nine planets of the solar system are... Copyright © 1999-2023 Ellis Horowitz 19  Adding Some Markup The nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto. The very nearest star is about 7,000 times farther away than pluto is to our sun. Copyright © 1999-2024 Ellis Horowitz 22  Browsers Are Tolerant Browsers follow the rule of being tolerant of mistakes in the input – They ignore markup they don’t understand Edge, Safari, Firefox, Chrome are tolerant browsers – They do not insist that the HTML document begin and end with and contain doctype – and/or tags are not required – But there is no guarantee that this behavior will be the same for all browsers and across different versions Copyright © 1999-2023 Ellis Horowitz 23  Browsers are Tolerant (examples) Suppose the entire document is one line, such as: Text placed between HEAD markers is not normally displayed. Firefox Chrome Internet Explorer Copyright © 1999-2023 Ellis Horowitz 24  HTML Elements Each element consists of: – a start tag, – content (optional), – an end tag (optional). E.g., some text A slash (/) after the “ Comments cannot be nested – White space is permitted between the -- and the closing angle bracket, – It is not permitted between the opening angle bracket, exclamation point, and the -- E.g. But this will be displayed Copyright © 1999-2023 Ellis Horowitz 27  Complete Set of tag attributes id, assigns a unique name to an element e.g., This is my starting paragraph... class, assigns one or more names to an element lang, a language code that identifies a natural language spoken, written, or otherwise used title, a short description of the body style, inline display information bgcolor, background color Events include onload, onunload onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress onkeydown, onkeyup Deprecated elements in include: background, text, link, vlink, alink See http://www.w3.org/TR/html4/struct/global.html#edef-BODY Copyright © 1999-2023 Ellis Horowitz 28  Using Style Sheets Deprecated example... document body... Using Style Sheets