Question

In: Computer Science

Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...

Task 1: HTML and CSS

Create a website using HTML5 and CSS3 only. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious.

Part 1: Content (HTML)

After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The content is placed in the HTML files, and the layout and style will be defined using CSS (see part 2). Your website must include (at least):

  • 3 html pages:
    • index.html: this is the landing page (must be named index.html). The landing page is the first page a visitor will see when visiting your website.
    • another html page (any name)
    • yet another html page (any name)
  • a typical layout using semantic tags (header, nav, footer, article...)
  • page titles for each html page (titles show on the title bar/tabs)
  • different size headings
  • images:
    • at least 5 images in one html page,
    • the other pages may have any number of images (or none).
    • make sure all image paths are relative (not absolute)
  • internal links:
    • links from index.html to the other html pages you created
    • links from all the other pages back to index.html
    • make sure all internal links are relative links (not absolute)
  • external links:
    • at least two links to external websites (pages that you did not create).
    • external links should open in a new tab/window.
  • a list (ordered or unordered)
  • a table (with some relevant data)
  • your copyright info at the footer (with the © symbol).
  • classes and id's as needed (for styling with css)

Do not forget to make your pages accessible. You should double-check your code to make sure you are not missing closing tags, etc. and test it using different browsers. Focus on making your pages syntactically and semantically correct.

Part 2: Style (CSS)

You'll create an external stylesheet (css) to style the html pages you created in part 1. Name this file main.css.

All html pages should link to the same main.css file. You must use a variety of selectors and properties presented in chapters 4 and 5, including:

  • font family, size, color, background color of text and headings, font color for links (make sure visited and unvisited links are displayed in different colors)
  • positioning elements
  • special effects or animations
  • a navigation menu

Part 3: An alternate style (CSS)

You'll create a different CSS file, with different style and layout rules, to make your HTML pages look completely different (without making any changes to the HTML files).

  • Name this css file alternate.css.
  • Do not create new html files. You may change the name of the css linked in the html <head> section back and forth (while testing).
  • Before submitting, make sure all html files link to main.css (we'll change it when testing).

Solutions

Expert Solution

Part 1

<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Food Recipe</title>
</head>
  
  <!----- https://www.w3schools.com/css/default.asp ----->
  
<body>
  <header>
   <!--------   Greeting   ----->
    <h1>Food <em>Recipe</em>!</h1>
       <script>
       document.write("")
       </script>
       <noscript>Your browser does not support JavaScript!</noscript>
    
    <div class="greeting">
     Hello foodies...
    </div>
    
    <p>Dosa is a one of the favourite <span class="red">south</span> <span style="color:white">Indian</span> breakfast which is very <span class="green" style="color:green">healthy</span> and tasty food with the combination of chutney or potato curry.</p>
    <p>I <span style="color:purple">love</span> it and it's my favourite when it's crispy and it tastes yummy with butter!</p>
   
    
  <!--------   About   ----->
    <h4>Welcome to my blog where you'll know how the most loved <em>Indian dish</em> is made and before I reveal it, please let me know what's your favourite food.</h4>
    
    <form>
     <label for="name">Name:</label><br>
     <input type="text" id="fname" name="fname"><br>
     <label for="food">Favourite food:</label><br>
     <input type="text" id="lname" name="lname"><br>
     <button type="button">Submit!</button>
    </form>
 
    <!--------   Details    ----->
  <section>
    
    <section  id="ingredients">
   
      <h2>Dosa ingredients</h2>
  
      <!------- unordered list    ----->
      <ul class="image">
         <li>3/4 cup Parboiled Rice (idli-dosa rice)</li>
         <li> 3/4 cup Regular Rice</li>
         <li>1/2 cup Whole Urad Dal (without skin) or Split Urad Dal (black lentils)</li>
         <li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
         <li>1/2 tablespoon Chana Dal (gram lentils), optional</li>
         <li>Water, as needed</li>
         <li>Salt to taste</li>
         <li>Oil, for shallow frying</li>
      </ul>
      
    </section>
    
    <section id="directions">
  
      <h2>Directions:</h2>
  
      <!--------   ordered list    ----->
      <ol>
         <li>Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients. Chana dal is used for getting a golden color for Dosa.</li>
         <li>Rinse both types of rice (regular rice and parboiled rice) together in water for 3-4 times and soak them in 2 cups of water for 4-5 hours – (Place both types of rice in a medium-size bowl and fill it with water till 3/4th height. Rinse the rice by rubbing them between your fingertips; the water will turn cloudy. Drain the water and repeat the process 3-4 times).</li>
         <li>Rinse urad dal and chana dal together in water, add fenugreek seeds and soak in 1 cup water for 4-5 hours.</li>
         <li>Drain water from urad dal in a small bowl and reserve it (it will be used in the next step while grinding the dal). Add drained urad dal, chana dal and fenugreek seeds mixture in the medium jar of a mixer grinder or blender.</li>
         <li>Add water as needed and grind until smooth and fluffy batter (use water reserved in previous step, approx. 1½ cups water will required to grind 1/2 cup dry urad dal).</li>
         <li>The batter should be fluffy and not very thick. Transfer it to a large container.</li>
         <li>Drain water from rice and add them to the same mixer grinder jar. Depending on the size of the jar, you can ground the rice in multiple batches.</li>
         <li>Add water as needed and grind until smooth texture. Don’t add too much water in a single go; add 1-2 tablespoons water at a time (approx. 1/2 cup water will required). Rice requires less water compared to urad dal while grinding. Rice batter will be little grainy and will not be as smooth as urad dal batter. Transfer it to the same container having urad dal batter in it.</li>
         <li>Add salt and mix both batters well using spoon. The final batter should not be too thick or too watery. Cover it with plate and leave it at room temperature for 8-10 hours or overnight for fermentation. During cold weather, keep the batter in warm place (or inside the oven with oven light on) for fermentation.</li>
         <li>During fermentation, the batter volume would increase and the tiny bubbles would appear on the surface when you stir it with a spoon. Stir the batter with a spoon. If it looks too thick, add few tablespoons water and mix well until it has attained pouring consistency (little watery than idli batter).</li>
         <li>Heat non-stick tava or iron tava (skillet or griddle) over medium flame. Sprinkle few drops of water on the surface. If water drops sizzle and evaporate within few seconds, tava is hot enough to cook. Apply 1/2-teaspoon oil on the griddle and spread it evenly with a spatula or a clean wet cloth. Take a ladle full of batter, pour it over the surface of tawa, swirl it as thin as possible in a spiral motion by rotating ladle and make it into round shape of approx. 7-8 inch diameter circle.</li>
         <li>Apply 1-teaspoon oil (or ghee / butter for crispy dosa) around the edges of dosa (or spread oil/ghee/butter evenly with brush for crispy dosa).</li>
         <li>Cook until the bottom surface turns light brown and the edges start to come upward, it will take around 2-minutes.</li>
         <li>Flip it and cook for a minute. If you are making thin dosa (as shown in the photo), you do not need to cook the other side. Transfer it to a plate. Wipe tava with clean wet cloth before making next dosa (this is to prevent dosa from sticking to Pan) and repeat the process from step-11 to step-13 for remaining batter. Hot and crispy plain dosa is ready.</li>
      </ol>
  
   </section>
  
  </section>
    
    <p>The <span style="color:blue">final</span> outcome is as shown below. Like I said, it tatses yummy like no other dish and it has a wonderful aroma</p>
  
  <img src="https://i.imgur.com/ZZkidGL.jpg"  width="400" height"300">
  
  <!---- Other dishes I like --->
  <h3><em>Similar best dishes:-</em></h3>
  <ul>
    <li><a href="https://www.wearesovegan.com/loaded-tornado-potato/">Tornado Potato</a></li>
    <li><a href="https://www.vegrecipesofindia.com/medu-vada-recipe-medu-vada/">Sambar dipped Vada</a></li>
    <li><a href="https://hebbarskitchen.com/guliyappa-recipe-paddu-recipe/">Paddu</a></li>
    <li><a href="https://www.youtube.com/watch?v=cqM7MQ7r7Kg">Gulab Jamun</a></li>
    <li><a href="https://www.indianhealthyrecipes.com/mysore-bonda-recipe/">Bhajjis</a></li>
  </ul>
  
  <h2><em>Thank You &#128516; </em></h2>
  
</body>
</html>

Part 2

 body { 
       background-color: gold;
      }

       div.greeting {
                   background-color: yellow;
                   padding: 20px;
                   margin: 20px;
                   border: 8px solid goldenrod;
                  }
    
        h1 {
             text-align: center;
             text-decoration: underline;
             padding: 20px; 
           }

        p {
            font-size: 20px;
            color: grey; 
          }
     
       span {
             font-style: italic;
             font-weight: bold;
            }
         
      .green {
               text-decoration: underline;
             }

      .red {
             font-style: normal;
             color: red;
           }
       
      .image {
              list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
             }

        ol {
               list-style-type: upper-roman;
            }

        li {
            font-size: 15px;
            color: grey;
          }

        h4 {
            padding: 10px;
          }

        h2 {
            padding: 10px;
          }

        h3 {
             padding: 10px;
           }
 
        h2 {
           padding: 10px;
         }


    @media screen and (max-width: 400px) {
        body {
                background-color: khaki;
                font-size: 10px;
             }   
        div.greeting {
                      display: none;
                     }
        p {
           font-size: 15px;
          }
        li {
                  font-size: 10px;
                 }
       }

    @media screen and (max-width: 750px) {
        body {
                  background-color: yellow;
              }
            }

venereology answered 2 days ago
Next > < Previous

Related Solutions

Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems...
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems amazing, but it never did what it should do – make my website look better. Also, my page should have a blue theme that was provided in the CSS folder. This also didn’t work. My website is supposed to look like what is shown in Figure 1 (see below). Someone told me that there are exactly 10 errors on index.html, 10 errors on contact.html,...
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems...
Dear Colleague, Earlier today I built my seventh website using HTML5, CSS3, and Bootstrap4. Bootstrap seems amazing, but it never did what it should do – make my website look better. Also, my page should have a blue theme that was provided in the CSS folder. This also didn’t work. My website is supposed to look like what is shown in Figure 1 (see below). Someone told me that there are exactly 10 errors on index.html, 10 errors on contact.html,...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
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...
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...
Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and JavaScript # Sign in/SignUp page should work # CSS HTML and javaScript should be in separate files # Add images # post a picture of your output and code as well
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g, freshman,junior). Place the optional survey question in a details element that the user can expand to see the question.
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT