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

,

, , 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:

means the same as

● 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

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

 Element text inside a 
 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
 Defines bold text; There is no semantic meaning  Defines emphasized text, with added semantic importance  Defines italic text; There is no semantic meaning  Defines smaller text  Defines important text, with added semantic importance  Defines subscripted text  Defines superscripted text  Defines inserted text  Defines deleted text  Defines marked/highlighted text --ch02-14.html HTML Quotation and Citation Elements
 Defines an abbreviation or acronym 
 Defines contact information. displayed in italic. Most browsers will add a line break before and after the element  Defines the text direction 
 Defines a section that is quoted from another source, usually indent the element  Defines the title of a work, usually display in italic  Defines a short inline quotation
--ch02-15.html HTML Comment Tags
Conditional Comments HTML Images
Images (including GIF) are defined with the  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  Element
HTML5 introduced the  element to add more flexibility when specifying image resources
The  element contains a number of  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  element have attributes describing when their image is the most suitable
Always specify an  element as the last child element of the  element. The  element is used by browsers that do not support the  element, or if none of the  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:
● 
 ● 
 - 
 ● 
 ● 
 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:
●  ●  ●  The 
 Element
The 
 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 

tag

Each table row is defined with the

tag

A table header is defined with the

tag defines a table caption

● The

tag must be inserted immediately after the tag --ch02-23.html --ch02-24.html --ch02-25.html --ch02-26.html --ch02-27.html --ch02-28.html HTML head Elements

The element is a container for metadata (data about data) and is placed between the tag and the tag

Metadata is not displayed

Metadata typically define the document title, character set, styles, links, scripts, and other meta information

●

tag ● By default, table headings are bold and centered A table data/cell is defined with the	tag The