Embed Size (px)
Citation preview
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 (") 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> 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 < <> greater than > >& ampersand & &" double quotation mark " "' single quotation mark (apostrophe) ' '¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥€ euro € €© copyright © ©® registered trademark ® ®
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
