Lesson: Web Programming(2) Omid Jafarinezhad Sharif University of Technology ● HTTP, JavaScript, CSS, HTML5, ReactJs, Flow, Progressive Web App ● Golang, NodeJs, MongoDB, PostgreSQL, Redis ● Docker, Git, YUIDoc, Jest, Materials WebPack, Gulp, Browserify, Locust ● (Optional/Research) Kubernetes, InfluxDB, RabbitMQ, gRPC, Ansible XML eXtensible Markup Language It was designed to store and transport data It was designed to be both human- and machine-readable XML Does Not Use Predefined Tags ● HTML works with predefined tags like <p>, <h1>, <table>, etc XML syntax XML Documents Must Have a Root Element The XML Prolog All XML Elements Must Have a Closing Tag XML Tags are Case Sensitive XML syntax (2) XML Elements Must be Properly Nested XML elements can have attributes in name/value pairs Some characters have a special meaning X XML syntax (3) Special character Comments XML Namespaces Element names are defined by the developer. This often results in a conflict when trying to mix XML documents from different XML applications A Uniform Resource Identifier (URI) is a string of characters which identifies an Internet Resource The namespace declaration has the following syntax. xmlns:prefix="URI" Document Object Model (DOM) DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document -- ch02-01.html XSLT, XPath, XQuery XSLT (eXtensible Stylesheet Language Transformations) standard ● It can transform an XML document into HTML ● It is a styling language for XML ● XQuery is the language for querying XML data ● XQuery is to XML what SQL is to databases ● XPath is a major element in the XSLT ● XPath can be used to navigate through elements and attributes in an XML document ○ XPath uses path expressions to navigate in XML documents XSLT example --ch02-02-css.xml --ch02-02.xml XPath example //*[@id="tsf"]/div[2]/div[3]/center/input[1] [@id="tsf"] div[2] div[3] center input[1] XML DTD An XML document with correct syntax is called "Well Formed" An XML document validated against a DTD is both "Well Formed" and "Valid" The purpose of a DTD is to define the structure of an XML document JavaScript Object Notation (Json) JSON is a lightweight text-based open standard designed for human-readable data interchange Web services and APIs use JSON format to provide public data JSON is language independent and filename extension is .json Data is represented in name/value pairs ● Curly braces hold objects and each name is followed by ':'(colon), the name/value pairs are separated by , (comma) ● Square brackets hold arrays and values are separated by ,(comma) JSON DataTypes Number, String, Boolean, Array, an object (JSON object), null HTML History 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1 Hyper Text Markup Language (HTML) HTML elements are the building blocks of HTML pages Browsers do not display the HTML tags, but use them to render the content of the page HTML tags are not case sensitive: <P> means the same as <p> ● but W3C recommends lowercase in HTM --ch02-04.html HTML Headings --ch02-05.html HTML Paragraphs --ch02-06.html Do Not Forget the End Tag Some HTML elements will display correctly, even if you forget the end tag Line break <br> is an empty element --ch02-07.html HTML Attributes Attributes provide additional information about HTML elements Double quotes around attribute values are the most common in HTML, but single quotes can also be used HTML Attributes (2) By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa. Authors may also use numeric character references to represent double quotes (") and single quotes ('). For double quotes authors can also use the character entity reference ". [ref] https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2 HTML Horizontal Rules --ch02-08.html HTML <pre> Element text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks --ch02-09.html The HTML Style Attribute --ch02-10.html HTML Fonts --ch02-11.html HTML Text Size --ch02-12.html HTML Text Alignment --ch02-13.html HTML Text Formatting Elements <b> Defines bold text; There is no semantic meaning <em> Defines emphasized text, with added semantic importance <i> Defines italic text; There is no semantic meaning <small> Defines smaller text <strong> Defines important text, with added semantic importance <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text --ch02-14.html HTML Quotation and Citation Elements <abbr> Defines an abbreviation or acronym <address> Defines contact information. displayed in italic. Most browsers will add a line break before and after the element <bdo> Defines the text direction <blockquote> Defines a section that is quoted from another source, usually indent the element <cite> Defines the title of a work, usually display in italic <q> Defines a short inline quotation --ch02-15.html HTML Comment Tags Conditional Comments HTML Images Images (including GIF) are defined with the <img> tag The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, etc.) width and height attributes, values are specified in pixels by default --ch02-16.html image-map is an image with clickable areas The <picture> Element HTML5 introduced the <picture> element to add more flexibility when specifying image resources The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fit the current view and/or device ● Each <source> element have attributes describing when their image is the most suitable Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched Resize browser HTML Links - Hyperlinks Links can be absolute URL (A full web address) or relative URL (link to the same web site) The target Attribute ● _blank: Opens the linked document in a new window or tab ● _self: Opens the linked document in the same window/tab as it was clicked (this is default) ● _parent: Opens the linked document in the parent frame (immediate) ● _top: Opens the linked document in the full body of the window ● framename: Opens the linked document in a named frame --ch02-17.html Unordered HTML List --ch02-18.html Choose List Item Marker disc bullet list item marker (default) circle circle list item marker square square list item marker none The list items will not be marked Ordered HTML List --ch02-19.html Ordered HTML List - The Type Attribute type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers HTML Description Lists --ch02-20.html Nested HTML Lists Horizontal Lists HTML Block Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can) Examples of block-level elements: ● <div> ● <h1> - <h6> ● <p> ● <form> HTML Inline Elements An inline element does not start on a new line and only takes up as much width as necessary Examples of block-level elements: ● <span> ● <a> ● <img> The <div> Element The <div> element is often used as a container for other HTML elements --ch02-21.html --ch02-21.html --ch02-22.html ● They are used to group together a chunk of HTML and hook some information onto that chunk (id, class, etc.) ● The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it and used to group larger chunks of code HTML Tables An HTML table is defined with the <table> tag Each table row is defined with the <tr> tag A table header is defined with the <th> tag ● By default, table headings are bold and centered A table data/cell is defined with the <td> tag The <caption> tag defines a table caption ● The <caption> tag must be inserted immediately after the <table> tag --ch02-23.html --ch02-24.html --ch02-25.html --ch02-26.html --ch02-27.html --ch02-28.html HTML head Elements The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag Metadata is not displayed Metadata typically define the document title, character set, styles, links, scripts, and other meta information ● <title>, <style>, <meta>, <link>, <script>, and <base> The HTML <title> Element defines