Web GUI Development CSE5544 We will focus on the client-side. • Client-side: HTML, CSS (Bootstrap, etc.), JavaScript (jQuery, D3, etc.), and so on. Background • Server-side: PHP, ASP.Net, Python, and nearly any language (C++, C#, Java, etc.)
• HTML – Structure/Content • CSS – Presentation/Style • JavaScript – Behavior Outline
• Recall HTML+CSS Basic (warm-up). • HTML element, attribute, style, selector (type, id, class). • HTML+CSS for Web GUI. • HTML layout and commonly used elements. • Bootstrap (HTML+CSS framework with design template). • JavaScript to make Web GUI (HTML pages) dynamic and interactive. • JavaScript basic: function, array, object, etc. • HTML JavaScript DOM: manipulate HTML contents. • jQuery: JS library to simplify HTML contents manipulation and so. • D3: JS library to visualize data using HTML+SVG+CSS. HTML Element
• HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. • HTML describes the structure of Web pages. • HTML elements are the building blocks of HTML pages, and are represented by tags (to render page contents by your browsers). • W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. HTML Attribute
• Attributes provide additional information about HTML elements, e.g., define the characteristics of an HTML element. • Attributes are always specified in the start (opening) tag. • Attributes usually come in name/value pairs, e.g., name="value”. • Both double quotes (more common) and single quotes around attribute values can be used. • In case attribute value itself contains double quotes, it is necessary to use single quotes. HTML Attribute cont.
• The four core attributes that can be used on the majority of HTML elements (although not all): • id: uniquely identify any element within an HTML page. • title: provide additional "tool-tip" information. • class: associate an element with a style sheet, and specify the class of element. • style: specify the styling (like color, font, size, etc.) within the element. • We will revisit these attributes soon later. • style: inline css styles. • class and id: HTML selector. CSS Style
• CSS (Cascading Style Sheets) describes how HTML elements are to be displayed, e.g., layouts, colors, fonts, etc. • CSS can control the style of multiple elements, pages, or sites all at once. The separation of HTML from CSS can save a lot of work. • CSS can be associated with HTML elements in 3 ways: • External - by using an external CSS file • Internal - by using a
This is a heading
3 Inline
https://internetingishard.com/html-and-css/hello-css/
This is a Blue Heading
HTML Class• The class is an important attribute of HTML elements. Elements with the same class can have equal styles. • The class name can be used (by CSS and JavaScript) to perform certain tasks for a group of elements with the specified class name. Notice the dot (.) prefixing the class name. This distinguishes class selectors from the type selectors and ID selectors. Class selector
Type selector
ID selector
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css HTML ID
• The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). • The id value can be used (by CSS and JavaScript) to perform certain tasks for a unique element with the specified id value. Notice the hash character (#) prefixing the ID value. This distinguishes ID selectors from the type selectors and class selectors. ID selector
Type selector
Class selector
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css More…
Descendant selectors Pseudo classes • Target only those elements that are inside of another • Mainly for links and buttons. element. For example, only phrases () in • For example - :link :visited :hover :active paragraphs of a class of .synopsis a:hover { • Note you can nest descendant selectors as deep as color: aqua; you want, but life gets confusing if too much. text-decoration: underline; .synopsis em { font-style: normal; } }
https://internetingishard.com/html-and-css/css-selectors/ And More…
CSS Specificity CSS Cascade • Specificity: which rules take precedence in CSS when • Generally, web-standard browsers will rank several rules could be applied to the same element . a style’s significance in this order: • Order matters for css rules: top-to-bottom and can result in overriding. • Some selectors will override other ones. For instance, ID selectors have higher specificity than class selectors.
https://cssway.thebigerns.com/special/master-item-styles/ HTML Layout
• Design your HTML pages and arrange the contents. • Websites often display contents in multiple columns (like a magazine or newspaper). • HTML layout techniques to create multicolumn layouts, e.g., • HTML tables (unrecommended), CSS float, CSS flexbox/grid (new), CSS framework (Bootstrap)
https://www.w3schools.com/html/html_layout.asp HTML Layout cont.
• Some web GUI design patterns (for your reference). (Useful) HTML Elements (1)
• The element indicates an input field where the user can enter data. Note that the tag has no end tag in HTML. • The element can be displayed in several ways, depending on the type attribute. • Syntax:
A one-line text First name:
input field Last name:
Radio buttons let a user Male
select ONE of a limited Other
Checkboxes let a user I have a bike
select one or more I have a car
options of a limited I have a boat
number of choices
A clickable button HTML Elements (2)
• More attribute values for • color – a color picker • date (or datetime-local) - date control (year, month, day) • file - a file-select field and a ”browse" button (for file uploads) • email - a field for an e-mail address • password - a password field • number - a field for entering a number (you can also set restrictions on what numbers are accepted) • range - a range control (like a slider control) • hidden - a hidden field (not visible to a user) • submit - a submit button (submit the form data to a form-handler) • reset - a reset button (reset all form values to default values) Notes about forms and PHP: • The HTML