CIS 1130 Topic 7 Labs

HTML CSS and Javascript

Page Html desing Write the code  Html to view the next design in pic . using Html and Css    Note: 1st) Each link opens specific page, Click on the following link, (https://www.bau.edu.jo/elearning.aspx) to get the images and links needed to finish the design. . . 2nd) Using <finger>  and <fig caption> attribute, don't use table tag., after end the design save the file as "image_Lecture   3) The choice is for you to put any picture you have, and I'll change it later.

using flexbox css html coding

HTML

Activity 2: HTML Color Table This Activity's objective is to write the HTML code to display the following table. Feel free to add more colors. Den n Colour Show Transcribed Text 1 2 3 4 5 6 7 8 9 10 11 12 13 Salmor Name Gold Some HTML Colors hexidecimal Color Table table, th, td { border: 1px solid black; } FA8072 FFD700 RGB value 250-128-114 255-215-0

Q3: No hand writing: Using HTML5, create the following table by adding your courses and grades       Notes: You must copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot of your table and paste it as a part of your answer. The average is the sum of the grades divided by 6.

HTML PROJECT

web

Make a table in HTML format that works with your school's timetable. The column headers should indicate the time of day for each class, and the row headers should indicate the day of the week. The table numbers need to be labelled with the course name and instructor's name. Since it will be at the table's top, a fitting caption is required.

• Improve your script by plotting the graph of the File Edit View Insert Tools Desktop Window Help polynomíal equation. > Plot the curve in x-y space. > Display the equation on the graph. > Display the location and the value of the roots, if 120 100 there áre any real roots. Hints: 1x-2x-10-0 > Build your plot data as two vectors for x and y 40 values, respectively. > Use text (x, y,str) to display text on the graph. > Use sprintf to generate your strings for text 20 -2.32 4.32 function. > To display a left arrow, use \leftarrow. > You can get axis limits using xlim and ylim.

Create a web page using html Display the design specified here: (Enter the integer entered by the user in the Grade field)

Part 4: Build a html form with the following elements. The form must be within a table structure. Name: a text box where the content contains no special character (i.e. !, @, #, $, %, &, *). Number is allowed. The text box must not be empty. • Module code: a text box where the content must start with 3 lower case alphabets and follows by 4 digits. This textbox can be empty. • Current date: a non-editable textbox and should be in the format as shown (e.g. 12 October 2020 Monday 3:35 PM). The content is the current date or today's date which will change every day. • Message: a text area with 3 rows and 20 columns. The default text is "Hello 202204". The text area cannot be empty. • Find: a text box for the user to key in text he/she wants to find. Replace: a text box for the user to key in the replacement text. If the find text is empty, this element should be disable (i.e. user cannot key in anything here). • Find and Replace: This is a button, when click, it will go to the "Message"…

How to create a product table page:    To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary. • Modify the horizontal navigation menu so it indicates that the product list page is the current page. • Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row.  Create a new style sheet named summary.css for the product list page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the products/index.html file so it points to the correct style sheet. • Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…

Design HTML Form.javascraptApply the data validation as follows:1. Mobile number field data must be a numeric data and not less than 8 digits,2. The email field must accept the data which must contain the character '@' and dot (.). Andthe character @ must not be the first character and the last dot must at least be onecharacter after the @.On submitting the form, If all these validations are followed, another HTML page (value of theaction attribute of the above HTML page) must be displayed your data is submitted successfully.

Design  HTML Form in javascriptApply the data validation :1. Mobile number field data must be a numeric data and not less than 8 digits,2. The email field must accept the data which must contain the character '@' and dot (.). Andthe character @ must not be the first character and the last dot must at least be onecharacter after the @.On submitting the form, If all these validations are followed, another Html page.

1. create an input box to filter the table by name (for example, typing in “Billy” would filter out every entry except “Billy Goat ”) for a webapage. 2. A button to sort the animals by age

3. The jQuery Example This is first paragraph. This is second paragraph. This is third paragraph. pearson.com i) Answer following questions by utilizing JQuery methods inside a script tag using the HTML file above: a) Fetch title attribute of tag and enter the same value inside the div tag with id = divid. b) Select all the elements with the tag name p and turn the background of those elements to yellow. 2 c) Add a hyperlink using the element as last child which leads to google.com inside the div tag with class named linkOut.

Your completed assignment should contain all of the following: ■ Your color scheme's name should be set as the table's header. It should have one or more font styles applied to it to differentiate it from other text in the table. ▪ You should list each color name, with each cell having its color set as its background color. ■ Include cells that give each color's hex value. ■ Include cells that give each color's rgb value. ▪ Include cells that give each color's hsl value. ▪ Your HTML table should be logically and properly constructed.

using flexbox css html please have the first output not the list one

Jquery 09-- do

MCQ 201: Which coding element is generally omitted at the end of line? a. none     b. Whitespace

how do I create the following pages: Main Page (index.html) - This page will display the user's list with edit and delete options for each list item. "Completed" list items should be hyperlinks that take you do the View List Item page.The user should be able to add a new item to the list right on this page by providing just a title and description (then they can edit the list item to add more details later). Edit List Item (edit-item.html) - Once a user has completed a bucket list item, they can provide more information. You can choose what type of information they might want to record for completed items but at minimum you should have: Title (this was provided when the item was created, and in A3 will be populated from the database) Description (this was provided when the item was created, and in A3 will be populated from the database) Rating - eventually this should be a star system, but that typically requires a little (sometimes a lot) of JavaScript, so the star part would come…

Question 9 Program a CSS ruleset that will set the root font size for the HTML document to match the user's browser preference. Feedback Question 2 Program a CSS media query that is triggered if the screen is at least 900px wide, but use em as the size unit in the query. Within the media query, write a rule for an element with a id equal to header. That rule should set the font size to three times the current size. Note: You should assume the parent element's font-size is equivalent to 16px. @media screen and (min-width: 56.25em) { .header { font-size:300%; } }

Which code snippet will display an image named myimage.png that will be redirected to index.html when the link is selected. 1) <img href “index.html” src “myimge. Png”> 2) <a href “index.html” src “my imge. Png”  /></a> 3) <img href “my image.png”> index,html</a> 4) <a href “my image.png” ><img src “index. html”  /></a>

Links 2 Hyperlinks (links), are text or images you can click on a webpage that jump you to another page. Anytime you use a website, you are using links to get from one page to the next. You can add a link by using the anchor ( a ) tag. In order to make your link work, you need to add an attribute to your a tag. An attribute is extra information added to the inside of the opening tag to make it work properly. They follow this general pattern: For links, you need to add where the link goes using the href (hypertext reference) attribute. All together your link should look something like this: My Other Page Let's try linking to the secondFile.html to see links in action! Task = Add a link to secondFile.html around the "Click me" text in your paragraph, then try clicking on your link!

Give Authentic Answer: Design the following HTML form TablePrinting.html        Ask User to enter the No in the Text Field. When User Click the Print Table button, then table of the Input No must be displayed using PHP Script file named PrintTable.php as shown here Table of 5 Printed By 19-ARID-1149 RUWISH ZAHOOR

Create a PHP script to generate multiplication table. Use html tags. The user will enter the number of rows and columns in a text box. The user will then click the Generte button to generate a multiplication table. The user will then search for a value in a text box and highlight the value being searched.

Visit the following webpage: https://archive.org/details/National_Geographic_Wallpapers This webpage hosts a collection of 506 images from National Geographic Magazine with most of these images previously being part of an international photography contest. Your task is to randomly choose 5 images and identify the objects within those images using Google’s vision API. Submit your iPython notebook code, and screenshots of output as shown below(no need to submit the images separately)   You may need to reactivate your Google vision API account (or billing information for trial cycles) if you haven’t used it recently.

language: HTML   Create a responsive webpage for food items. there are three requirements 1: when the user hovers over the item name ('item 1') the details of the item should be displayed. the text should return back to the original (aka from the food description to the food name ) after the mouse pointer moves away   2. When the user clicks 'add to cart' for an item, the 'cart total' is updated, and the button to add the item to the cart is disabled so that it cannot be added twice. 3. the user can input an amount into the 'confirm purchase' section and click the button. If the amount is less than the 'cart total', the following alert should be shown:  "payment amount is less than cart total" otherwise: "payment complete"

Question 5 Program a CSS media query that is triggered on all media types if the media is at least 400px wide, but use em as the size unit in the query. Note: The media query does not need any rules inside it's brackets. You should assume the parent element's font-size is equivalent to 14px. @media all (min-width:28.571em) {} Feedback Incorrect Question 6 Program a CSS media query that is triggered if the screen is at least 400px wide, but use em as the size unit in the query. Note: The media query does not need any rules inside it's brackets. You should assume the parent element's font-size is equivalent to 24px. @media screen and (min-width: 16.667em) {}

Design a contact form using HTML and CSS that resembles the one shown in Figure 1. Ensure placeholders are used as well.