LIS 2360
Internet of Things
(abbreviated as IoT) is the global collection t of Things of communicating devices that sense and control technology on behalf of humans. IoT devices range from a simple temperature sensor to a satellite-based laser scanner used to discover archaeological sites hidden by vegetation. IoT devices display one or more of the following characteristics: -Gather information about the physical world using sensors. Ex: temperature, voltage, images. -Share the sensor data with control systems. Ex: A sensor may report a room's temperature to building control system, or air ozone and water pollution sensors reporting air quality data to urban environment monitoring systems. -Interact with hardware to execute commands sent by control systems. Ex: Speed up fan moving hot air to part of a building where the sensed temperature is below the target temperature.
What's in an HTML5 document template?
1. The <!DOCTYPE html> declaration instructs the web browser about what type of document follows. 2. The <html> opening and closing tags enclose everything but the <!DOCTYPE html> declaration. <html lang="en"> indicates that the document's language is English. 3. The <meta> tag specifies metadata, which is data that describes the document's data. <meta charset="UTF-8"> describes how characters are represented in the HTML document. Additional <meta> tags may be used to indicate when the document was saved, who the author is, etc. 4. The <title> opening and closing tags enclose the name of the document. The title is usually displayed in the titlebar of the browser, is used by search engines, and is used for bookmarking. 5.The <body> opening and closing tags enclose all elements and content to be rendered in the browser.
Block vs. Inline tags
A block tag's content tries to fill the width of the tag's parent container and can contain other block tags, inline tags, and text. Block tags include <h1>, <table>, and <p>. Some block tags cannot be contained within certain other block tags when the semantics are unclear. Ex: The <p> tag cannot contain another <p> tag. A block tag is typically displayed starting and ending on new lines. Ex: The <ol> tag is a block tag that fills the entire width of the parent container, and each ordered list starts on a new line separate from previous and following blocks. An inline tag's content tries to fill the minimum space possible in the tag's parent container and can only contain text or other inline tags. For example, the <a> tag is an inline tag that creates a hyperlink container as big as the link's internal content; a hyperlink does not fill the width or height of the link's parent paragraph. The <span> tag is the generic tag for creating inline containers to facilitate managing content on the page. Unlike other inline tags, such as <a> and <em>, the <span> tag has no semantic meaning.
What is a widget?
A widget is an interactive component (usually graphical) that the browser uses to interact with a user. Ex: Buttons, drop-down menus, and data entry field
Common audio formats
AAC (Advanced Audio Coding) .aac Designed to be the successor of the MP3 format with better sound quality. MIDI (Musical Instrument Digital Interface) .midi .flv Main format for electronic music devices that store notes; does not contain sound. MP3 .mp3 The sound portion of an MPEG file. Most popular format for music players. MP4 .m4a .mp4 Developed by the Moving Pictures Expert Group. m4a is audio only, but mp4 may contain video. Ogg .ogg Open container format developed by Xiph.Org Foundation. Wave (Waveform Audio File Format) .wav Developed by Microsoft and IBM, mainly for storing uncompressed audio on Windows. WMA (Windows Media Audio) .wma Developed by Microsoft for Windows music players.
What is a comment and how to write HTML comments?
An HTML comment is a portion of the document that is not displayed by the browser. A comment begins with the <!-- character sequence and ends with the --> character sequence. Web developers sometimes use comments to leave notes for themselves or others, or to tell the browser to ignore part of the document. A common error is trying to put a comment inside of another comment.
What is an entity and how to add special characters
An entity is a mechanism for writing special characters or symbols in HTML, such as mathematical symbols, characters in most languages, and many other symbols. Entities can be specified using the three formats shown in the table below. Entity name © © HTML5 defines names for common well-known entities. The entity names are typically abbreviations of the English name for the symbol. Decimal number © © Each HTML entity has a unique number, which can be specified as decimal value. Hexadecimal number © © Each HTML entity has a unique hexadecimal number, which is the hexadecimal equivalent to the entity's decimal number.
How to create lists (unordered and ordered)
An unordered list is a collection of items, usually indented and shown using bullets, surrounded by the <ul> opening and closing tags. Each list item is surrounded by <li> opening and closing tags. A nested list is a list within a list item of another list. The entire nested list is indented and uses a different bullet. An ordered list is a sequenced collection of items, usually indented and shown using numbers or letters, surrounded by the <ol> opening and closing tags. As with an unordered list, each list item is surrounded by <li> opening and closing tags. The <ol> tag's numbering scheme is specified with the type attribute. type ="1" numbers type="A" uppercase letters type="a" lowercase letters type="I" upper case Roman type="I" lowercase Roman
CSS -How is CSS used in a webpage?
Cascading Style Sheets (CSS) is a textual language for describing how a web page is styled for visual presentation. CSS controls the look and layout of web page content. A CSS rule selects specific HTML elements and specifies styling properties for the element. Styling can occur within style tags in the HTML file's header part. Each style rule indicates the element to be styled like h1 (header1) or p (paragraph), followed by a list in braces { } of property:value items like color:blue. (ZYBOOK 2.6)
Showing YouTube videos (<iframe>)
Developers may host a video on YouTube to display in a web page. Including a YouTube video in a web page requires the <iframe> element. The <iframe> element allows a web page to be embedded in a rectangular area of the current web page. The <iframe> element uses the src attribute to specify the URL of the web page to display and the width and height attributes to define the width and height in pixels of the rectangular iframe.
Domain name levels
Domain names are hierarchical. A domain name belongs to one of numerous top-level domains (TLD) -----> such as .com, .net, .org, .edu, and .gov. (each country is assigned a unique two-letter country code top-level domain (ccTLD) like .uk (United Kingdom), .ru (Russia), and .de (Germany)) Immediately after a top-level domain comes a second-level domain, ----->such as wikipedia in wikipedia.org. A second-level domain is commonly an organization's name as in Stanford.edu, or indicates the purpose of a website as in DoPython.org. Third-level and further level domains refer to sub-computer systems local to an organization, ------>as in cs.stanford.edu where the cs is for Stanford's Computer Science department. A common third-or-deeper-level domain ------->is www, short for World Wide Web, usually referring to an organization's web server. Many organizations use www optionally, so stanford.edu by default goes to www.stanford.edu.
Common video formats
Flash .swf .flv Developed by Macromedia. Requires a plug-in to play. MPEG-4 or MP4 .m4a. .mp4 Developed by the Moving Pictures Expert Group. m4a is audio only, but mp4 may contain video. Supported by HTML5. Ogg .ogg Developed by Xiph.Org Foundation. Supports audio and video. QuickTime .mov Developed by Apple. Plays in Macs, but plug-in support for Windows has been dropped. WebM .webm Open media format developed by Mozilla, Opera, Adobe, and Google for the web. WMV (Windows Media Video) .wmv Developed by Microsoft for storing video on Windows.
HTML -Common HTML tags
HTML:(hypertext markup language) is a textual language for creating web pages. COMMON TAGS: h1, h2, h3: Headers. h1 is largest. <h2>Puppies are cute</h2> p : Paragraph <p>Humans seem designed to see puppies as cute.</p> em, strong: Emphasis, strong emphasis <p>"When in <strong>doubt</strong>, tell the <em>truth</em>" -Mark Twain.</p> img: Image <img src="https://resources.zybooks.com/WebProgramming/ducativ1.jpg> Note: src is the image's URL source. a: Link <a href="https://www.wikipedia.org/">Click Here</a>
Common HTTP response status codes
HTTP response is a message sent from the web server back to the web browser in response to an HTTP request. Often the response contains the requested web resource. 200 - OK - Standard response for a successful request. 301 - Moved Permanently - The resource should always be requested at a different URL. 302 - Found - The resource should temporarily be requested at a different URL. 304 - Not Modified - The resource has not been modified since the last time the resource was requested. 403 - Forbidden - The web server does not have permission to access the resource. 404 - Not Found - The resource could not be located. 500 - Internal Server Error - Something unexpected happened on the web server.
What is HTML and how is it used?
HyperText markup language (HTML) is the standard markup language for web documents. Hypertext is text that has links to other text (and today to images, videos, and more). Document markup is special markings in the document that provide additional information about links, formatting, and images. HTML also permits adding metadata like search engine keywords, author information, and language.
Trends:
Internet of Things and examples of technologies; Cognitive computing; Big data
JavaScript -How is JavaScript used in a webpage?
JavaScript is a programming language that runs in a browser, enabling web pages supporting actions like responding to a button click. JavaScript can be included in the HTML file's header part.
Quirks mode vs. standards mode
Omitting the DOCTYPE from an HTML document or placing any characters before the DOCTYPE causes the web browser to render the document in quirks mode. Quirks mode is a browser rendering mode that renders a web page using non-standard layout rules emulating older web browsers. A web page with the DOCTYPE is rendered using standards mode, which uses the HTML5 standard.
How to create forms and its two primary attributes
The <form> tag allows the web browser to send information from the user to the server. The <form> tag has two primary attributes: 1. The action attribute indicates the URL where the form data should be sent. 2.The method attribute indicates the HTTP request type the browser will use to communicate with the server. The method is either GET or POST. GET is the default method and is used if no method is specified.
How to add images to a page
The <img> tag displays an image in a web page. The <img> tag does not enclose any content and consequently does not have a closing tag. The image tag contains two attributes: The src attribute specifies the URL location of the image file to display. The alt attribute provides a text description to use as an alternative to displaying the image. Ex: <img src="http://example.com/family.jpg" alt="Smith family reunion"> displays the image family.jpg, but the text "Smith family reunion" displays if the image cannot be displayed. The src and alt attributes are required for all images.
The <input> tag andits attributes
The <input> tag allows the user to enter information into a web page. The <input> tag cannot enclose any additional page content, and thus does not have a closing tag. The <input> tag has five primary attributes: type, name, id, placeholder, and value. The type attribute indicates what type of widget to display. The default type is "text" if type is not specified. A text box widget is an input element with the type attribute of "text" that allows users to enter a single line of text. The web browser displays a submit button widget for an <input> tag with the type attribute of "submit", which sends the associated form's data to the server when clicked. A submit button uses the value attribute to specify the button's text.
How did the internet begin?
The Internet began as four networked computers in 1969 but is today the largest and most popular computer network, spanning the entire globe Early versions of the Internet looked and acted similar to today, but in a much simpler way. Documents were plain text: no images, no formatting, and no interaction. FTP (File Transfer Protocol) was an early way for transferring files over the Internet. Users used FTP programs to connect to servers, look at listings of available documents, and download documents of interest.
How to add links to a page
The anchor tag <a> defines a hyperlink in a web page. A hyperlink, or link, specifies where other information is located and what action the web browser should perform when a user clicks the hyperlink. A hyperlink action may tell the web browser to go to another web page, to go to a location in the same web page, to download a file, or to send an email. A hyperlink has three parts: the opening <a> tag with the href attribute, the content displayed for the link , and the closing </a> tag. The href attribute specifies the hyperlink's URL. Ex: <a href="https://wikipedia.org/">Wikipedia</a> displays the hyperlink
HTML5 widgets
The new widgets include input pickers. An input picker is a widget that allows the user to interactively pick a choice using a popup or other guided selection method. date, color, number, range, combo,
Role of World Wide Web Consortium and the web
W3C (the World Wide Web Consortium) is the international standards organization that controls web standards. Web involves 3 things: 1) text files (HTML files) containing links to other texts files 2) a program aka browser for viewing HTML files 3) set of rules aka the HTTP protocol for transferring HTML files among computers called the www bc LEE envisioned a logical collection of globally distributed webpages linking to each other web page: document viewed ina web browser website: collection of related webpages organized and stored on a web server web server: program that serves webpages to web browsers the webs role: spread of info on the internet, played role in polarization of the internet
What is an IP address?
a computer's unique address on the Internet (like a house's unique address in the world), usually represented numerically like 198.51.100.7. A typical IP address is 32 bits, divided into four 8-bit groups, each group often written as a decimal number.
Common widgets
checkbox is a widget for input elements with the type attribute of "checkbox", which allows users to check, or select, a value. A checkbox initially appears selected if the "checked" attribute is set. For each checkbox selected, the browser sends the checkbox's name and value to the server. If the value attribute is not specified, the default value of "on" is sent. If a checkbox is not selected, the browser does not send anything to the server. A common error on the server is failing to record all checkboxes in the form as the browser doesn't report any values for checkboxes not selected by the user. A radio button is a widget for input elements with the type attribute of "radio", which allows users to select exactly one value from possibly many values. The web browser groups radio buttons together with the same name attribute, where each possible value in a group has an associated input. When submitting a form, the browser sends the selected radio button's name and value attribute. Ex: If the radio button <input type="radio" name="movie" value="ET"> is selected, "movie=ET" will be sent in the HTTP request. The <select> opening and closing tags create a drop-down menu (or drop-down list), which allows users to select one of several predefined values. The <option> opening and closing tags create a value, or option, the user can select within a drop-down menu. When the user is not interacting with the menu, the drop-down menu usually displays the selected option. A list box widget is created by specifying a size with the select element's size attribute. Ex: <select size="4"> creates a list box that shows four options at a time. If the list box contains more than size options, the browser adds a vertical scrollbar so the user can scroll through the list of options. A button widget can be created using the <button> opening and closing tags or with <input type="button">. The <button> element allows text and images to be displayed in a button, but an <input> button only allows text. A password field is a widget for input elements with the type attribute of "password", which allows users to enter a password without the password contents being displayed on-screen. Web browsers usually provide facilities to remember passwords at various websites to help users. The <fieldset> tag groups related form widgets together and draws a box around the related widgets. The <legend> tag defines a caption for a <fieldset>.
Common HTML containers
container is any part of a web document body that has opening and closing tags. Web developers typically create many containers as a convenience to assist in organizing and formatting content. For example, containers can be formatted by applying styles to adjust margins, padding, horizontal and vertical alignment, and other visual presentation attributes. <header> Container for introductory content <footer> Container for content descriptive information about the web page like author, copyright, or date modified <address> Container for person's or organization's contact information <main> Container for the document's primary content <section> Container for distinct parts of a document, such as a chapter <article> Container for self-contained content that can be reused independently, such as a news article <nav> Container for content relating to website navigation <aside> Container for content not directly related to the main topic of a document <div> Generic tag for creating block containers <span> Generic tag for creating inline containers
Domain names vs. DNS?
domain name is a name for an IP address, such as the name wikipedia.org for the IP address 198.35.26.96; the name is easier to remember and type. Capitalization doesn't matter: Wikipedia.org, wikipedia.org, and WIKIPEDIA.ORG are treated the same. When a computer sends a packet using a domain name over the Internet, the first step is to contact a DNS server to convert the domain name to an IP address. DNS is short for Domain Name System; phonebook of the internet directly names that/ IP # each named site can correspond w more than one IP address *domain name is an alphabetical form of an IP address *DNS server converts the domain name to an IP address
Basic networking concepts (HTTP, TCP/IP, DNS lookup)
domain names most commonly seen as URLS(uniform resource locator) URL: location of a web resource on the web ex: http://www.cdc.gov/alcohol/faqs.htm web resource: any retrievable item ex: photo, HTML file, etc URL has 3 parts: 1) scheme: characters at beginning of a URL followed by :// (http) 2) host name: complete domain name in the url (www.cdc.gov) 3)path: all characters following the hostname in the URL (/alcohol) special characters: "?" the part after the ? provides a parameter HTTP: hypertext transfer protocol; networking protocol that runs over TCP/IP & governs communication between web browsers & web servers TCP/IP: transition control protocol/internet protocol governs how packets of data are transferred over the internet from one machine- to another DNS lookup: sending the domain name to the local DNS and getting back the IP address of the webb server
Basic HTML5 tags
em <em>emphasis</em> emphasis Emphasized text cite <cite>cite</cite> cite Title of a work strong <strong>strong</strong> strong Important text mark <mark>mark</mark> mark Marked or highlighted text var <var>variable</var> variable Definition of a variable in a computer program kbd <kbd>keyboard</kbd> keyboard Keyboard input code <code>code</code> code Computer code samp <samp>sample</samp> sample Sample output from a computer b <b>bold</b> bold Bold text i <i>italic</i> italic Text of an alternate voice or word from another language u <u>underline</u> underline Text that is rendered differently from normal text
How to create tables
table is an HTML structure surrounded by the <table> opening and closing tags that allows data to be organized in rows and columns. A cell is a location in the table at a specific row and column. A table row is surrounded by the <tr> opening and closing tags and contains all the cells within a table row. The <th> opening and closing tags create a new table cell containing table header information about the data. Usually, the browser will display the table headers centered with a bold font. The <td> opening and closing tags create a new table cell containing a table datum. Every cell in a table is contained within a table row.
Cognitive Computing
use of artificial intelligence techniques and access to vast amounts of data to simulate human problem solving in complex situations with ambiguity, changing data, and even conflicting information. IBM Watson is the symbol of this trend to create intelligent software systems that process massive numbers of web pages in order to extract information and address challenging problems in areas such as medical treatment, increasing retail sales, and improving the quality of call center help.
An HTML _____ is a program that indicates whether a document follows the HTML standard.
validator
