DOCSLIB.ORG

Web GUI Development CSE5544 We Will Focus on the Client-Side

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Web GUI Development CSE5544 We Will Focus on the Client-Side 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 <style> element in the <head> section • Inline - by using the style attribute in HTML elements CSS Style cont. 2 Internal <head> 1 External <style> h1 {color: blue;} #head1 {color: blue;} .head1 {color: blue;} </style> </head> <body> <h1>This is a heading</h1> </body> 3 Inline <head> <link rel="stylesheet" href="styles.css"> </head> https://internetingishard.com/html-and-css/hello-css/ <h1 style="color:blue;">This is a Blue Heading</h1> 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 (<em>) 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 <input> element indicates an input field where the user can enter data. Note that the <input> tag has no end tag in HTML. • The <input> element can be displayed in several ways, depending on the type attribute. • Syntax: <input type="value"> A one-line text First name: <input type="text" name="firstname” value="Mickey"><br> input field Last name: <input type="text" name="lastname"> Radio buttons let a user <input type="radio" name="gender" value="male"> Male<br> select ONE of a limited <input type="radio" name="gender" value="female” checked> Female<br> number of choices <input type="radio" name="gender" value="other"> Other ChecKboxes let a user <input type="checkbox" name="vehicle1" value="Bike" checked> I have a bike<br> select one or more <input type="checkbox" name="vehicle2" value="Car"> I have a car<br> options of a limited <input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br> number of choices A clicKable button <input type="button" value="Click me" onclick="msg()"> <script> (mostly used to activate Will address the JavaScript part later a JavaScript script) function msg() { alert("Hello world!"); } </script> HTML Elements (2) • More attribute values for <input type="value"> • 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 <form> element defines a form that is used to collect user input. The form data can be submitted to a form-handler, which is typically a server page (e.g., PHP) with a script for processing input data. • PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is generally used to collect form data, control user access, approach and manipulate files on the server and data in the database, generate dynamic page contents, etc. If you click the "Submit" button, the form-data • We won’t go into PHP here, but you are welcome to explore more! will be sent to a page called "/action_page.php" HTML Elements (3) • The <select> element defines a drop-down list; and the <option> element defines an option that can be selected. One or multiple options can be selected. <select name="cars"> <select name="cars" size="5" multiple> <option value="volvo">Volvo</option> <option value="volvo” selected>Volvo</option> <option value="saab" selected>Saab</option> <option value="saab" selected>Saab</option> size=5 <option value="fiat">Fiat</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> <option value="audi">Audi</option> </select> </select> • The <textarea> element defines a multi-line input field (a text area). <textarea name="message" rows="5" cols="30">The cat was playing in the garden. His name is Pipi, and he is in grey rows=5 and white. He is naughty, fluffy, and warm!</textarea> cols=30 • The <button> element defines a clickable button (similar usage with <input type=”button">). <button type="button" onclick="msg()">Click Me</button> <script> function msg() { alert("Hello world!"); } </script> OR <button type="button" onclick="alert('Hello World!')">Click Me</button> Bootstrap – to make HTML+CSS easier • Bootstrap is the most popular HTML and CSS (and JavaScript) framework for developing responsive websites. • Bootstrap makes your front-end web development easier and faster. https://getbootstrap.com/ https://www.w3schools.com/booTsTrap/ Bootstrap Features • HTML and CSS based design templates for grid (layout), typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. HTML JavaScript • JavaScript (JS) makes HTML pages more dynamic and interactive. • Common uses include image manipulation, form validation, and dynamic changes of content. • Specifically, we will use JS to: • change/add/remove HTML elements • change HTML attributes • change HTML styles • react to (or create new) HTML events I am a dynamic gif! Please turn on the Slide Show mode Where to put • In HTML, JavaScript code must be inserted between <script> and </script> tags. • You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, in the <head>, or in both. <script> function myFunction() { document.getElementById() is a document.getElementById("demo").innerHTML = "Paragraph changed."; useful function in JS, we will address it later.
Load more

Recommended publications
  • Childnodes 1
    Index Home | Projects | Docs | Jargon Bugzilla | LXR | Tree Status | Checkins Feedback | FAQ | Search A - B - C - D - E - F - G - H - I - J - K - L - M - N - O - P - Q - R - S - T - U - V - W - X - Y - Z Index Symbols _content 1 A addEventListener 1 alert() 1 align 1 alinkColor 1 anchors 1 appCodeName 1 appendChild 1 applets 1 appName 1 appVersion 1 attributes 1, 2 http://www.mozilla.org/docs/dom/domref/dom_shortIX.html (1 de 20) [09/06/2003 9:55:09] Index availLeft 1 availTop 1 availWidth 1 B back() 1 bgColor 1 blur 1 blur() 1 body 1 C captureEvents() 1 characterSet 1 childNodes 1 clear 1 clearInterval() 1 clearTimeout() 1 click 1 cloneContents 1 cloneNode 1 cloneRange 1 close 1 http://www.mozilla.org/docs/dom/domref/dom_shortIX.html (2 de 20) [09/06/2003 9:55:09] Index close() 1 closed 1 collapse 1 collapsed 1 colorDepth 1 commonAncestorContainer 1 compareBoundaryPoints 1 Components 1 confirm() 1 contentDocument 1, 2 contentWindow 1, 2 controllers 1 cookie 1 cookieEnabled 1 createAttribute 1 createDocumentFragment 1 createElement 1 createRange 1 createTextNode 1 crypto 1 cssRule 1 cssRule Object 1 http://www.mozilla.org/docs/dom/domref/dom_shortIX.html (3 de 20) [09/06/2003 9:55:09] Index cssRules 1 cssText 1 D defaultStatus 1 deleteContents 1 deleteRule 1 detach 1 directories 1 disabled 1 dispatchEvent 1 doctype 1 document 1 documentElement 1 DOM 1, 2 DOM 2 Range Interface 1 DOM window Interface 1 domain 1 dump() 1 E Elements Interface 1 embeds 1 http://www.mozilla.org/docs/dom/domref/dom_shortIX.html (4 de 20) [09/06/2003 9:55:09]
    [Show full text]
  • Style Sheets CSS
    P1: OSO/OVY P2: OSO/OVY QC: OSO/OVY T1: OSO GTBL013-03 GTBL013-Jackson-v10 July 12, 2006 10:36 CHAPTER 3 Style Sheets CSS As we have learned, HTML markup can be used to indicate both the semantics of a document (e.g., which parts are elements of lists) and its presentation (e.g., which words should be italicized). However, as noted in the previous chapter, it is advisable to use markup predominantly for indicating the semantics of a document and to use a separate mechanism to determine exactly how information contained in the document should be presented. Style sheets provide such a mechanism. This chapter presents basic information about Cascading Style Sheets (CSS), a style sheet technology designed to work with HTML and XML documents. CSS provides a great deal of control over the presentation of a document, but to exercise this control intelligently requires an understanding of a number of features. And, while you as a software developer may not be particularly interested in getting your web page to look “just so,” many web software developers are members of teams that include professional web page designers, some of whom may have precise presentation require- ments. Thus, while I have tried to focus on what I consider key features of CSS, I’ve also included a number of finer points that I believe may be more useful to you in the future than you might expect on first reading. While CSS is used extensively to style HTML documents, it is not the only style- related web technology.
    [Show full text]
  • Disable Form Submit Html
    Disable Form Submit Html Which Matteo upholsters so incitingly that Shannon spoon-feeding her implements? Forlorn Kristopher prescriptivists fifthly while Othello always float his armoire legislating affluently, he capes so unpalatably. Quadrilingual Salomon hitch no pierids epilating operosely after Thaddus salve matrimonially, quite villous. Boolean attribute to do if that submit form html attribute Form submits jquery prevent multiple form submit jquery prevent duplicate form submission. Otherwise, turn the state communicate the whale to enabled. Hi thanks to submit click event form submitting again and disables all these values prefilled when creating their computer. This can also give that form submit html. Disable form field button CodePen. And decrease, you include use whatever variety of techniques to obstruct the doctor form elements. Where a alert or padding is salmon, and which second sketch the gradient. This can it and have gone wrong i comment sections in this will work in mind that we encourage you! Review: One And Done For Your Web Hosting? The publication is sweet great source about all things tech and startup. Put those with one is useless when people hit submit button in this element had been solved questions live forever in? On html form submit form html. Simple increase and Disabling Buttons on text by Default. The submit button on a given below to find out how to pick which requires special attention to come up and usage guidelines for this example is! Web developer at html in html form submits like my writing skills and when creating their initial enabled as soon as soon as credit card numbers of.
    [Show full text]
  • Html Tags and Attributes with Examples
    All Html Tags And Attributes With Examples If cheesy or hardier Anthony usually refacing his moonwalk victimizes bloodthirstily or minify west and antiphrastically, how wordy is Todd? Geraldo nitrogenised his silenus overglazing unusably, but fancy-free Neil never externalizes so schismatically. Flint staple scrumptiously if broadcast Harris funk or zipped. With html attribute selection when it indicates whether a photo says within our example tag for your web design of a frameset. The html and examples of your image, as soon catch critical bugs. Defines an example will open, videos or more robust code is one and should span over. Keeping your HTML well indented so that interim tag and blend of nesting is. Trademarks and attributes. Below are some common HTML mistakes that affect accessibility of web content. Triggers an event center the selection is changed. The global structure of an HTML document. Concepts related form along with all html tags attributes and with the page uniquely identifies a string to manage and the better than their computer language. Have attributes and tags and videos will not be added above example, it display of an incorrect. Was used to specify the URL of an image to be set as the background for an HTML table. HTML offers a selection of elements which help to create interactive user interface objects. Was used to lose your website fully supported xml with all html tags and attributes examples of the image in this by a table borders between. How to make it by giving a collection of a regular expression. You cannot select a question if the current study step is not a question.
    [Show full text]
  • Section A: Multiple Choice Questions (30%)
    Section A: Multiple Choice Questions (30%) 1. The elements <div> and <span> have the following characteristics (2%) A. Element <div> inherits properties defined for <span> in a stylesheet B. <div> and <span> have no real meanings as html tags unless stylesheet is applied C. Elements <span> and <div> define content to be inline or block-level D. <div> and <span> are used as alternatives for the element <p> E. <div> is used inside element <p>. 2. In regards to the CSS box model, where is the margin property located? (2%) A. Inside the box B. Outside the box C. inside or outside depending on where you put it in your code D. None of the above 3. Which built-in HTML5 object is used to draw on the canvas? (2%) A. getContext B. getContent C. getGraphics D. getCanvas 4. Which primitive shape is supported by <canvas>? (2%) A. Cycle B. Rectangle C. Polygon D. Triangle 5. While working on a JavaScript project, which function would you use to send messages to users requesting for text input? (2%) A. Display() B. Prompt() C. Alert() D. GetInput() E. Confirm() 6. Which protocol is ideal for transmitting large files? (2%) A. HTTP B. FTP C. SMTP D. RTP 7. In HTML tables, the number of columns is determined by (2%) A. how many <td> elements are inserted within each row B. the width attribute of the <tr> element C. the <col> element D. none of the above 8. If you'd like visited links to be green, unvisited links to be blue, and links that the mouse is over to be red, which CSS rules will you use? (2%) A.
    [Show full text]
  • Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 • Version 1.0 • Rd042214
    Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design Series Student Guide CCL02-CDHTCS-CK-1405 • version 1.0 • rd042214 Advanced HTML5 and CSS3 Specialist Student Guide Chief Executive Officer Barry Fingerhut Vice President, Operations & Development Todd Hopkins Senior Content Developer Kenneth A. Kozakis Managing Editor Susan M. Lane Editor Sarah Skodak Project Manager/Publisher Tina Strong Customer Service Certification Partners, LLC 1230 W. Washington St., Ste. 201 Tempe, AZ 85281 (602) 275-7700 Copyright © 2014, All rights reserved. Advanced HTML5 and CSS3 Specialist Developer Patrick T. Lane Contributors James Stanger, Ph.D., Sadie Hebert, Jason Hebert and Susan M. Lane Editor Susan M. Lane Project Manager/Publisher Tina Strong Trademarks Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified throughout this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the software's manufacturer. Disclaimer Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability, accuracy, or freedom from error of this document or the products it describes. Certification Partners makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or consequential, special or exemplary damages resulting from the use of the information in this document or from the use of any products described in this document.
    [Show full text]
  • Basic DOM Scripting Objectives
    Basic DOM scripting Objectives Applied Write code that uses the properties and methods of the DOM and DOM HTML nodes. Write an event handler that accesses the event object and cancels the default action. Write code that preloads images. Write code that uses timers. Objectives (continued) Knowledge Describe these properties and methods of the DOM Node type: nodeType, nodeName, nodeValue, parentNode, childNodes, firstChild, hasChildNodes. Describe these properties and methods of the DOM Document type: documentElement, getElementsByTagName, getElementsByName, getElementById. Describe these properties and methods of the DOM Element type: tagName, hasAttribute, getAttribute, setAttribute, removeAttribute. Describe the id and title properties of the DOM HTMLElement type. Describe the href property of the DOM HTMLAnchorElement type. Objectives (continued) Describe the src property of the DOM HTMLImageElement type. Describe the disabled property and the focus and blur methods of the DOM HTMLInputElement and HTMLButtonElement types. Describe these timer methods: setTimeout, setInterval, clearTimeout, clearInterval. The XHTML for a web page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Gallery</title> <link rel="stylesheet" type="text/css" href="image_gallery.css"/> </head> <body> <div id="content"> <h1 class="center">Fishing Image Gallery</h1> <p class="center">Click one of the links below to view
    [Show full text]
  • Package 'Shinyfiles'
    Package ‘shinyFiles’ November 9, 2020 Type Package Title A Server-Side File System Viewer for Shiny Version 0.9.0 Maintainer Thomas Lin Pedersen <[email protected]> Description Provides functionality for client-side navigation of the server side file system in shiny apps. In case the app is running locally this gives the user direct access to the file system without the need to ``download'' files to a temporary location. Both file and folder selection as well as file saving is available. License GPL (>= 2) Encoding UTF-8 Imports htmltools, jsonlite, tools, shiny (>= 1.1.0), fs (>= 1.2.6), tibble (>= 1.4.2) Collate 'aaa.R' 'filechoose.R' 'dirchoose.R' 'filesave.R' 'shinyFiles-package.R' RoxygenNote 7.1.1 URL https://github.com/thomasp85/shinyFiles BugReports https://github.com/thomasp85/shinyFiles/issues NeedsCompilation no Author Thomas Lin Pedersen [cre, aut] (<https://orcid.org/0000-0002-5147-4711>), Vincent Nijs [aut], Thomas Schaffner [aut], Eric Nantz [aut] Repository CRAN Date/Publication 2020-11-09 16:40:02 UTC 1 2 shinyFiles-package R topics documented: shinyFiles-package . .2 dirCreator . .3 dirGetter . .3 fileGetter . .4 formatFiletype . .5 getVolumes . .5 shinyFiles-buttons . .6 shinyFiles-observers . 10 shinyFiles-parsers . 13 shinyFilesExample . 14 traverseDirs . 14 updateChildren . 15 Index 16 shinyFiles-package A Server-Side File System Viewer for Shiny Description Provides functionality for client-side navigation of the server side file system in shiny apps. In case the app is running locally this gives the user direct access to the file system without the need to "download" files to a temporary location. Both file and folder selection as well as file saving is available.
    [Show full text]
  • Document Declaration Is Missing Html Attribute
    Document Declaration Is Missing Html Attribute Crawly and angrier Barny dialyzing almost gnathonically, though Anatollo mares his tallows freshes. When Noam devalues his incense philosophise not thick enough, is Bartie visitant? Pectinate and polycarpic Kelvin still considers his kiang leeringly. Fffd replacement text processing is also meant it is conditionally conform to use of html document Find that relevant entry points. HTML Standard WHATWG. So I'm determined to waste some of mine missing pieces for other designers. There are simply copies of child elements and block macro attribute is so keep those last processed in document declaration is missing html attribute values are applied for projects tend to linking an xml schema and processing this? Compares each attempt to create and attribute value documented code below, we normally used to properly interpret css selectors and html! It is missing attribute declarations are attributes with document from documents for documentation may not track of attributes? Expected eg No marvel character encoding declaration has been coincidence yet. This is declared type declarations are documented. Export let title quote will update documenttitle whenever the counter prop. When you have some element, the properties associated radio buttons. The last word phrase pattern is dependent upon executing a html document declaration is attribute matter of the template for the r variables, a list containing the definition of connect and controllers. Declarations The Swift Programming Language Swift 53. The html is. It provides simple, idiomatic ways of navigating, searching, and modifying the parse tree. All item declarations accept outer attributes while external blocks functions. As with actions and transitions, animations can have parameters.
    [Show full text]
  • Using Rdfa to Reduce Privacy Concerns for Personal Web Recommending
    University of Bergen Master thesis Using RDFa to reduce privacy concerns for personal web recommending Author: Supervisor: Christoffer M. Valland Andreas L. Opdahl Department of Information Science and Media Studies June 2015 University of Bergen Abstract Faculty of Social Sciences Department of Information Science and Media Studies Master’s degree Using RDFa to reduce privacy concerns for personal web recommending by - Christoffer Valland The amount of available information on the web is increasing, and companies are expanding the way to both collect and use the information available. This is the situation for both personal information, and technological information such as HTML-documents. Throughout this paper, I will describe the development of a semantic web recommender system that aims to reduce the amount of personal information needed to provide personal web recommendations. Semantically marked up documents on the web contain information, which is not necessarily provided in a user interface. This means there are possibilities to expand the area of use for this technology. The use of Semantic Web-technologies can therefore contribute to reduce the need of giving away personal information on the web. This thesis is divided in two parts: The first part focuses on the development of a semantic application, and the new area of use of this technology. The other part focuses on how standard recommenders handle privacy concerns on the web. The thesis will provide a description of the development of the recommender system, as well as an explanation of online privacy and how different web service providers’ deals with it. The system uses an RDFa-API to collect semantic information available on web-documents, and further uses this information to provide recommendations for the users.
    [Show full text]
  • Introduction to CSS Review Question 1
    Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em> Review Question 1 Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em> Review Question 2 What are the two tags that nest directly within the <html> tags? Review Question 2 What are the two tags that nest directly within the <html> tags? <head> and <body> tags Review Question 3 How does this HTML element look like in a browser: <ul><li>1</li><li>2</li><li>3</li></ul> (a) (b) (c) 1. 1 ● 1 A. 1 2. 2 ● 2 B. 2 3. 3 ● 3 C. 3 Review Question 3 How does this HTML element look like in a browser: <ul><li>1</li><li>2</li><li>3</li></ul> (a) (b) (c) 1. 1 ● 1 A. 1 2. 2 ● 2 B. 2 3. 3 ● 3 C. 3 CSS = Cascading Style Sheets CSS is a "style sheet language" that lets you style the elements on your page. CSS is works in conjunction with HTML, but is not HTML itself. So far we learned how to create a paragraph like this in HTML, but how do we add color to it or align it to the center of the page? The CSS Rule The CSS Rule ● A block of CSS code is a rule. ● The rule starts with a selector. ● It has sets of properties and values. ● A property-value pair is a declaration.
    [Show full text]
  • Document Object Model (DOM)
    A Brief Introduction to a web browser's Document Object Model (DOM) Lecture 22 – COMP110 – Fall 2019 Announcements • PS6 - Compstagram - Due tomorrow at 11:59pm • Office Hours end tomorrow at 5pm • Tutoring open tonight from 5-7pm • No tutoring on LDOC • Last day to turn in problem sets late: Friday, December 5th • Focus on getting green checks • Earned late points penalty will be returned per syllabus next week • Course evaluations open until tomorrow at 11:59pm • Constructive feedback welcomed! Final Exam • Seats will be reshuffled, and an announcement posted once they are • Format is about like a 1.5x length quiz • Everyone will have the full 3-hours to complete the final • Final grades will post for both sections by Sunday, December 15th • This is outside of the 72-hour window for Section 1 in order to keep the grade distributions fair across both sections Today's Goal: Build a Simple Interactive Web Page • https://www.youtube.com/watch?v=1e5td7-Bpvc • http://apps.introcs.com/kris/lec24-web-form/creeds-tweets.html Document Object Model (DOM) • Web pages are made up of a hierarchy of objects called the Document Object Model or DOM • Single objects, like a label object or a text input field object, are added to container objects like a form or a division ("section") of a web page. • Just like shapes, each object in the DOM has properties our code can manipulate: • background color • font-size • borders • positioning • and many, many more! Any given web page is made up of many objects • Let's zoom in on one small part of the ESPN.com website and inspect the objects Any given web page is made up of many objects • This single box on ESPN.com is composed of 8 objects! 1.
    [Show full text]