Lesson: Web Programming(2)Omid Jafarinezhad

Sharif University of Technology

Materials

● HTTP, JavaScript, CSS, HTML5, ReactJs, Flow, Progressive Web App

● Golang, NodeJs, MongoDB, PostgreSQL, Redis

● Docker, Git, YUIDoc, Jest, WebPack, Gulp, Browserify, Locust

● (Optional/Research) Kubernetes, InfluxDB, RabbitMQ, gRPC, Ansible

XMLeXtensible 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 syntaxXML 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 NamespacesElement 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]

div[2]

div[3]

center

[@id="tsf"]

input[1]

XML DTDAn 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 DataTypesNumber, String, Boolean, Array, an object (JSON object), null

HTML History1989 Tim Berners-Lee invented www1991 Tim Berners-Lee invented HTML1993 Dave Raggett drafted HTML+1995 HTML Working Group defined HTML 2.01997 W3C Recommendation: HTML 3.21999 W3C Recommendation: HTML 4.012000 W3C Recommendation: XHTML 1.02008 WHATWG HTML5 First Public Draft2012 WHATWG HTML5 Living Standard2014 W3C Recommendation: HTML52016 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 TagSome HTML elements will display correctly, even if you forget the end tag

Line break<br> is an empty element

--ch02-07.html

HTML AttributesAttributes 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 (&#34;) and single quotes (&#39;). For double quotes authors can also use the character entity reference &quot;.

[ref] https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2

HTML Horizontal Rules--ch02-08.html

HTML <pre> Elementtext 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 ImagesImages (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> ElementHTML5 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 - HyperlinksLinks 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 Markerdisc bullet list item marker (default)circle circle list item markersquare square list item markernone The list items will not be marked

Ordered HTML List--ch02-19.html

Ordered HTML List - The Type Attributetype="1" The list items will be numbered with numbers (default)type="A" The list items will be numbered with uppercase letterstype="a" The list items will be numbered with lowercase letterstype="I" The list items will be numbered with uppercase roman numberstype="i" The list items will be numbered with lowercase roman numbers

HTML Description Lists--ch02-20.html

Nested HTML Lists

Horizontal Lists

HTML Block ElementsA 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 ElementsAn 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> ElementThe <div> element is often used as a container for other HTML elements

--ch02-21.html

--ch02-21.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

--ch02-22.html

HTML TablesAn 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 ElementsThe <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> Elementdefines a title in the browser tabprovides a title for the page when it is added to favoritesdisplays a title for the page in search engine results

The HTML <style> And <link> Element

For HTML4:

For HTML5:

The HTML <meta> ElementThe <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata

Metadata is used by browsers (how to display content), by search engines (keywords), and other web services

<!-- Refresh document every 30 seconds -->

Setting The ViewportHTML5 introduced a method to let web designers take control over the viewport

The HTML <script> Element

The HTML <base> ElementThe <base> element specifies the base URL and base target for all relative URLs in a page

Omitting <html>, <head> and <body>?According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted

does not recommend omitting the <html> and <body> tags

● errors in older browsers (IE9)

Useful HTML Character Entities< less than &lt; &#60;> greater than &gt; &#62;& ampersand &amp; &#38;" double quotation mark &quot; &#34;' single quotation mark (apostrophe) &apos; &#39;¢ cent &cent; &#162;£ pound &pound; &#163;¥ yen &yen; &#165;€ euro &euro; &#8364;© copyright &copy; &#169;® registered trademark &reg; &#174;

The <form> Elementused to collect user input

The action attribute defines the action to be performed when the form is submitted

The <input> ElementThe <input> element is the most important form element

The <input> element can be displayed in several ways, depending on the type attribute

● <input type="text"> a one-line text input field● <input type="radio"> a radio button ● <input type="submit"> a submit button (for submitting the form)● <input type="password"> defines a password field● ...

Text Input

Radio Button Input

The Submit Button

Input Type Password

Input Type Resetdefines a reset button that will reset all form values to their default values

Input Type Checkbox

HTML5 Input Types● Color● Date● Datetime-local● Email● month● number

● Range● search● Tel● Time● Url● week

Input Type ColorDoes not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions

Input Type DateDoes not supported in Firefox, or Internet Explorer 11 and earlier versions

Input Type RangeDoes not supported in Internet Explorer 9 and earlier versions

Input Type EmailDepending on browser support, the e-mail address can be automatically validated when submitted

Does not supported in IE9 and earlier

Input RestrictionsHere is a list of some common input restrictions (some are new in HTML5)

Example

The Method AttributeThe method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data

does not supported in Internet Explorer 9 and earlier versions, or in Safari

The list AttributeHTML5

The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari

When to Use GET?The default method when submitting form data is GET

submitted form data will be visible in the page address field

GET must NOT be used when sending sensitive information!

GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too

When to Use POST?Always use POST if the form data contains sensitive or personal information

● The POST method does not display the submitted form data in the page address field

POST has no size limitations, and can be used to send large amounts of data

The Name AttributeEach input field must have a name attribute to be submitted

● If the name attribute is omitted, the data of that input field will not be sent at all

This example will only submit the "Last name" input field

Grouping Form Data with <fieldset>

The <select> Element (drop-down list)The <option> elements defines an option that can be selected

● To define a pre-selected option, add the selected attribute to the option

The <textarea> ElementThe rows attribute specifies the visible number of lines in a text areaThe cols attribute specifies the visible width of a text area

The <button> Element

HTML LayoutsHTML5 offers new semantic elements that define the different parts of a web page

● <header> - Defines a header for a document or a section● <nav> - Defines a container for navigation links● <section> - Defines a section in a document● <article> - Defines an independent self-contained article● <aside> - Defines content aside from the content (like a sidebar)● <footer> - Defines a footer for a document or a section● <details> - Defines additional details● <summary> - Defines a heading for the <details> element

section elementThe section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content

The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element

A Web site's home page could be split into sections for an introduction, news items, and contact information

Note[https://www.w3.org/TR/html5/sections.html#the-article-element] … Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element

… The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline

Note(2)...Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary

HTML MediaMultimedia comes in many different formats. It can be almost anything you can hear or see

MPEG● .mpg● .mpeg

Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4)

AVI and WMV● .wmv● .avi

AVI (Audio Video Interleave) and WMV (Windows Media Video) Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers

HTML Media

Flash● .swf/.flv

Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers

QuickTime● .mov

Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)

RealVideo● .rm/ram

Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers

HTML Media

Ogg● .ogg

Developed by the Xiph.Org Foundation. Supported by HTML5

WebM● .webm

Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5

MPEG-4/MP4● .mp4

Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers

HTML5 AudioThe <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format

HTML5 Video