Web Programming 1 HTML Initiation PDF

Web Programming 1 Opening Teaching : HTML Initiation HTML is NOT a programming language ! Unlike Javascript, PHP, … which are dynamic languages HTML is a markup language : HyperText Markup Language, it means : tags, which sometimes encapsulates text Text , browsers...

Web Programming 1 Opening Teaching : HTML Initiation HTML is NOT a programming language ! Unlike Javascript, PHP, … which are dynamic languages HTML is a markup language : HyperText Markup Language, it means : tags, which sometimes encapsulates text Text , browsers will render it with bold font but, even more that a simple tag : a sementic markup Text , a namely a given specific role, a special meaning text to speech service will speak it more loudly from now on, consider HTML elements instead of tags ! Justifed through Javascript HTML element  Javascript Object that can be manipulated, transformed HTML Versions : HTML4  xHTML  HTML5 Strict rules as XML (eXtensible Markup Language) 1999 2000 2014 Still in use today Web Programming 1.0 - Eric Christoffel - Unistra 1  Anatomy of an HTML element Additional information useful for the browser. The value can be single or double quoted. Starting tag possible mixed content text and / or elements Ex. Hyperlink from one web document to another one : Ending tag Unistra Particular case : elements having no content, neither text, nor element, these are known as empty elements (singleton, void element) Ex. image included in a web document : in HTML5 in xHTML Nesting HTML elements Elements can be nested, but the last element opened should be the first closed. Nested elements Web Programming 1.0 - Eric Christoffel - Unistra 2  Document Object Model viewer : https://software.hixie.ch/utilities/js/live-dom-viewer/ HTML Structure HTML code Browser rendering D.O.M. , tree view https://lipsum.com/ Text generator declaration  instruction to the web browser on HTML version of the web document , DTD : Document Type Definition Single root element Document Metadata, contains information such title, encoding, links to stylesheet and Javascript scripts,… Loaded before the document body! Containt which will be rendered in the browser window Web Programming 1.0 - Eric Christoffel - Unistra 3 HTML Semantic Content Markup headlines level 1 to 6 paragraphs document’s hierarchical outline structure, images mainly for structured contents list (ordered, unordered) and list items tables for tabular data hypertext link Text semantic elements, also strong, em, b, i called inline elements or Superscript and subscript phrasing content elements to be machine readable never choose an HTML element base on how it looks Semantic content markup approach is useful for efficient web coding, search engine visibility, improving accessibility, display flexibility (desktop, mobile device), help for robots / crawlers to understand which content is important,… Web Programming 1.0 - Eric Christoffel - Unistra 4  Method of working : for each new HTML element Document the element and its attributes Understand how to use it (context of use) Identify its semantics Try given examples and display them in a browser. Analyse them with a reverse engineering tool Apply it to your web document HTML reference of commonly used semantic content markup, for a hierachical structured web document Headings 6 levels of headings : to To be used in a hierarchical order Paragraphs Paragraphs are represented as blocks, separated by a default blank line. You can add a carriage return (break) with Think of a structured document written with a word processor software, with titles, subtiles, paragraphs, … Web Programming 1.0 - Eric Christoffel - Unistra 5 Comments Ignored by the browser. Possibly, use it to explain your code! Images img is an empty element, useful informations are defined with attributes. alt is for accessibility. Links Links to other web pages (possibly in a new window) Relative links to local resources (path must be written according to your web site tree) Avoid link with mailto protocole : href="mailto:[email protected]" SPAM bots Web site tree view Web Programming 1.0 - Eric Christoffel - Unistra 6 Anchor Link and jump to a specific section of a web document. Use the sharp # to define the anchor label. The section to be reached is declared with an id attribute of value the anchor label. The element is than display at the top window browser (window scrollbar is moved). Lists and list items ordered list and unordered list (bullets), with list items. Be careful, the attributes for adjusting the appearance of a list are now deprecated! Often used to create web menu. Web Programming 1.0 - Eric Christoffel - Unistra 7 Description list A description list element, and two nested elements, respectively the description term element, and the description detail element. Useful for a glossary. Possible combinations : Multiple terms and sigle description, Single term and multiple description, … Instead of blocks, inline elements don't begin HTML elements behave like either block or inline on a new line, and may contain only text or other inline elements. Inline elements for phrasing (text) content ≡ text semantic elements strong is more important semantically than b (bold), especially in text to speech services. See also em and i. To indicate fragment of code For small print, including copyright and legal text. Use of HTML entities for special characters or accented characters. Syntax &xxxx; See also : mark, sup, sub, cite, time, var, … with a meaning for readable machine. Web Programming 1.0 - Eric Christoffel - Unistra 8 HTML tables for tabular data Use tables only to show data (tabular data). The table structure corresponds to the Table Object Model (T.O.M.), like the Document Object Model, with : Table header, table footer Table body Table row, table data cell Attributes to merge cells : rowspan, colspan Chrome extension HTML Tree Generator, used with Wamp localhost Web Programming 1.0 - Eric Christoffel - Unistra 9  Web Programming 1.1 HTML Semantic Content Markup / in-depth study Check for W3C HTML5 Validation : https://validator.w3.org/nu/ Question : is it easy to code HTML ? your CV created during the first Pratical Work Complete the Moodle survey… Why starting learning with HTML Semantic Content Markup Example of CSS ZenGarden : (see introduction class LC_PW_Init_before WebProgramming1Course and Pratical Work A single HTML file, but  CSS designs PW0_WebProgramming1.0) A document with a well-structured content Objectives : Main Title Where each HTML element is chosen Subtitles according to what the content means Paragraphs List ≡ SEMANTIC Tabular Data Semantic, what does that mean ? Definition list (glossary) time is used to help search engines to understand the content is a period in time, datetime translate your date in a machine-readable format. The more semantical detail you provide to bots, then the better search engines will be able to understand and index your content. Web Programming 1.1 - Eric Christoffel - Unistra 1  W3C Validator xHTML : https://validator.w3.org/ HTML5 : https://validator.w3.org/nu/ While coding, compliant with the W3C technical specifications, recommendations For a well-formed and structured content web document, with a careful choice of semantic elements xHTML hierarchical elements Technical specification, from xHTML to HTML5 HTML5 Model Content Our learning approach MDN Web Docs In-depth semantic analysis W3C Specifications xHTML hierarchical element dictionary : http://xhtml.qanuq.com/ MDN Cross-Browser documentation : https://developer.mozilla.org/en-US/docs/Web/HTML/Element , https://mzl.la/2QuVw47 W3C Spécifications : https://www.w3.org/TR/html53/semantics.html#semantics Web Programming 1.1 - Eric Christoffel - Unistra 2 Usage statistics : 16% 74% xHTML  , but… HTML5 Easier to understand, for Beginners. More complicated, to become an Expert (our objective) x stands for XML : rigor in writing the code opening / closing tag Nesting elements Inline / block Model What does it mean ? Content Model : flow, heading, https://youtu.be/yOXfs7KH1fg sectioning, phrasing Hierarchical elements dictionary : parent / child HTML Elements : categories relationship document metadata section grouping content Permitted parents : context of use text-level semantics Permitted content embedded content links tabular data forms … Web Programming 1.1 - Eric Christoffel - Unistra 3  How to manage your learning? For beginners : xHTML first approach… using the Hierarchical Elements Dictionary http://xhtml.qanuq.com/ Block / Inline Model Example : simple block and inline element, like p and b + parent / child relationship Permitted hierarchy of elements Question : is it allowed to have text as a child of the body element ? xHTML : https://validator.w3.org/ To answer this issue : W3C Validation in xHTML, then in HTML5 HTML5 : https://validator.w3.org/nu/ xHTML Validation Failed ! HTML5 Validation Successfull Is it a good practice ? content placed within containers of meaning SEO : Machines reading your content Conclusion with careful examination of the Content Model of HTML5 Accessibility : Assistive software Web Programming 1.1 - Eric Christoffel - Unistra 4  Changes from xHTML to HTML5 No ending tag for empty element https://developer.mozilla.org/fr/docs/Web/HTML/Element/tt Some deprecated elements tt : Teletype Text element http://xhtml.qanuq.com/tt.html Deprecated attributes : the global attribute align for https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p some elements. Use semantic tags wherever it makes sense For machine readable (formated to be New elements to structure the content of your page processed by a computer), screen readers and organize it using CSS layout (see chapters WP 1.3 and 1.4) and Text to Speech services, search bots, SEO, Accessibility, … Web Programming 1.1 - Eric Christoffel - Unistra 5 Case Study for a well formed and structured web page content : Can a list (ordered ou unordered) be nested in a paragraph ? xHTML : https://validator.w3.org/ To answer this issue : W3C Validation in xHTML, then in HTML5 HTML5 : https://validator.w3.org/nu/ xHTML Validation Failed ! HTML5 Validation Failed ! The validation does not give the same error, depending on whether you are in xHTML or HTML5 careful reading of the documentation and error interpretation Web Programming 1.1 - Eric Christoffel - Unistra 6 Tabular Data : Table and Table Object Model To be used to show data only, Not for designing your web page ! Example : big data, stats, company phonebook, … Deprecated attributes for tables xHTML  HTML5 https://www.w3schools.com/browsers/default.asp Parsed Emmet expression to produce HTML T.O.M. Code Use caption for accessibility (description of the table which help to decide whether or not to read its content) colspan and rowspan attributes to merge cells  Exercise Web Programming 1.1 - Eric Christoffel - Unistra 7 Web Programming 1.2 CSS applied to HTML Semantic Content Markup / CSS initiation We used HTML to structure and semantics the content, … now CSS is used to style your content Outline 1. How to apply CSS ? style attribute at element level style element in the head section of your document link to an external CSS file 2. Basic Selectors : element, class, id, inheritance 3. Styling Text : text and font, web font, lists, links 4. Styling Boxes : box model (margin & padding), borders, background, styling Tables 5. Complex selectors : Child selectors, Attribute selectors, pseudo-classes, pseudo-elements, … Web Programming 1.2 - Eric Christoffel - Unistra 1  Anatomy of a CSS Rule Colon separator property : value pair CSS declaration Property name Value, with possible units How to apply CSS ? a. Style declared at element level : the style attribute for quick styling, testing purpose Sets of pairs property:value, separated by a semicolon b. Style element declared in the head section property : value pairs between curly bracket The selector define the HTML code concerned selector {property: value; property:value;… } with the CSS ruleset c. CSS declared in an external file, linked to the current web document Why an external file ? Case study : a web site