Use an external CSS & JS file, no internal or inline styles & scripts Please comment...

Use an external CSS & JS file, no internal or inline styles & scripts
- Please comment your JS to break down your understanding of what is happening
- You can use a CDN link for your jQuery (Links to an external site.) library reference
Create a web page that includes these HTML 5 semantic elements:
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- <header>
- <nav>
- <section>
Your web page should have at least 3 images and they should all use the figure/fig caption elements
All other content can be generated, but it would be more meaningful if you created content that meant something to you
Create 2 completely different styles for your web page based on your theme but only apply one
- Font, color, spacing and layout should be intentional and not default for all other elements on the page
- Use classes for styling
- As always no CSS frameworks all custom creations from your original self
Create a button that uses jQuery to toggle between the two styles for your web page
Confirm that the code is properly indented & formatted.
Validate your code, there should be no errors

Expert Solution

Here is the HTML code for UI. The UI is made with an assumption of hospital's website

<!DOCTYPE html>
<html>
<head>
        <title>Home work</title>
        <script src="theme_changer.js"></script>
        <link rel="stylesheet" type="text/css" href="theme 1.css" id="theme">
</head>
<body>
        <header>XYZ Clinic</header>
        <nav><a href="#">Home</a> | <a href="#">Contact Us</a> | <a href="#" onclick="change_theme()">Change Theme</a></nav>
        <section id="main_section">
                
                <aside>
                        we are delivering the quality services in the filed of hospitality and helth care.
                </aside>
                <article id="first_article">
                        <figure>
                                <h1>Cardiologist</h1>
                                <img src="image1.jpg"  style="width:30%">
                                <figcaption>Dr. John</figcaption>
                        </figure>
                </article>
                <article id="second_article">
                        <figure>
                                <h1>Neurologist</h1>
                                <img src="image2.jpg"  style="width:30%">
                                <figcaption>Dr. Alberto</figcaption>
                        </figure>
                </article>
                <article id="third_article">
                        <figure>
                                <h1>Dentist</h1>
                                <img src="image3.jpg"  style="width:30%">
                                <figcaption>Dr. Marita</figcaption>
                        </figure>
                </article>
                <footer>Thank you</footer>
        </section>
</body>
</html>

Explaination:

as mantioned we have putted

<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<nav>
<section>

along with external stylesheet and javascript.

Here is the them 1.css

header{
        text-align: center;
        background-color: #ccbbff;      
}

nav > a{
        text-decoration: none;
        color: white;
}
nav{
        background-color: #981267;
        color: white;
}

aside {
        width: 30%;
        float: right;
        background-color: yellow;
        font-style: italic;
        margin-left: 15px;
        padding-left: 15px;
}
#first_article{
        background-color: #982134;
}

#second_article{
        background-color: #986734;
}

#third_article{
        background-color: #981267;
}

figure{
        align-content: center;
}

section{
        background-color: #345677;
}

footer{
        text-align: center;
}

and the code for theme 2.css

header{
        text-align: center;
        background-color: #ccbbff;      
}

nav > a{
        text-decoration: none;
        color: white;
}
nav{
        background-color: #981267;
        color: white;
}

aside {
        width: 30%;
        float: right;
        background-color: yellow;
        font-style: italic;
        margin-left: 15px;
        padding-left: 15px;
}
#first_article{
        background-color: #986734;
}

#second_article{
        background-color: #981267;
}

#third_article{
        background-color: #982134;
}

figure{
        align-content: center;
}

section{
        background-color: #345677;
}

footer{
        text-align: center;
}

and here is the final functional code for changing them using Javascript theme_changer.js with explanation in with it.

//Fisr we have Define a function which will handle my themes 
//Lets consider it change_theme()

function change_theme() {

        //Now we have to find the link element in wich we have define our style sheet.
        element = document.getElementById("theme");

        //After that we have to check that which theme or style sheet our web page is using for that we will use the Ternary operator 
        //If our web page is using theme 1 then the variable elemet.p will be theme 2
        //If web page is using theme 2 the the variable elemet.p will carry the value theme 1
        element.p = 'theme 2' == element.p ? 'theme 1' : 'theme 2';

        // After that we have to set alternate style sheet to our web page 
        // For that we will use the value stored in elemet.p and append .css in it
        // and finaly assign the value to href atribute of link elemet.
        element.href = element.p + '.css';
}

venereology answered 1 year ago

What are inline styles, embedded styles, and external style sheets? Which would you use to define...

What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire Web site and why? Please type out in text so I can read. Also please be as detailed as possible. Thank you in advance!!!

Build a web page using an external CSS file based on the following specifications : a)...

Build a web page using an external CSS file based on the following specifications : a) The page must have a breaking point at 768px (desktop/mobile). b) The three sections contents (header, main and footer) must be full-width and no larger than 960px (horizontally centered block). Ma c) Header must be 80px high, full width and fixed and will show your name on the left /5 side. The burger icon should appear when the browser’s window is 768px or lower....

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.

1.What are the THREE (3) types of CSS? a) Internal, External and Online Style Sheets b)...

1.What are the THREE (3) types of CSS? a) Internal, External and Online Style Sheets b) Embedded, Outsider and Inline Style Sheets c) Embedded, Linking and Inline Style Sheets 2. The width, src and border are examples of an ______. * a) entity b) element c) attribute d) operation d) Internal, External and Inline Style Sheets 3. Which of the following codes best represents inserting image from folder named images? a) <p>Image:</p> <img src="/chrome/images.gif" alt="Google Chrome" width="33" height="32" /> b)...

5 html files minimum (does not include css file) Use of all three methods of css...

5 html files minimum (does not include css file) Use of all three methods of css (inline, internal, external). Have inline and internal css on all 5 html files and use one external css file that styles all 5 html pages Use div tags to section off part of the pages and add border radius the divs 1 paragraph on at least 5 html pages (1 paragraph must have at least 6 sentences) The following CSS properties must be used...

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a...

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a bulleted list and 3 paragraphs this can be loren ipsum. Have the information text fade in when the page is done loading. Stagger the animations so that the text that is higher up on the page fades in before. Add three more animations in addition to the ones above including an interval timer based animation, an event based animation click or hover, and an...

Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body> <form>...

Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body> <form> <table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;"> <tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr> <tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr> <tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td><label>Perimeter:</label></td> <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td colspan="2" > <center> <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/> <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>...

Create shell scripts, .sh file. Please include a shebang line at the top of the script...

Create shell scripts, .sh file. Please include a shebang line at the top of the script as well as appropriate comments through out. Write a script that plays a simple “guess the number” game with the user. It should select a random integer in the range [0 - 10], ask the user to guess the value, and provide feedback of the form “too high”, “too low”, or “congratulations” as appropriate. After the correct value is guessed, the script should terminate.

Please take the code below and add some javascript to it. Please use javascript inline. Please...

Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance HINT: add some fun widgets to the page index-css.html: <!DOCTYPE html> <html lang="en"> <head>  <title>Index-CSS Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...

Question