QuestionQuestion

Part 1 – Create the web page.

Open your text editor. Create a basic web page using the code below. You may copy and paste it into your text editor. Save the page as Discussion1-2.html. This sample is in the sample class files web site.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<title>Discussion 1-3</title>
<style type="text/css">
/* Put your CSS styles on the line below this comment */

</style>
</head>

<body>
<!-- Put your first HTML element/tag on the line below this comment -->

<!-- Put your second HTML element/tag on the line below this comment -->

<!-- Put your third HTML element/tag on the line below this comment -->

</body>
</html>

Pick one of the tags listed.

P
DIV
UL and LI
SPAN
Heading
H1 through h6
Insert the element into your web page below the first HTML comment.

<p>Hello World</p>

Copy the code below the second and third comments.
Add the code ID=”second” to the element after the second comment.
Add the code class=”third” to the element after the third comment.

Part 2 – Create the Embedded Style Rules

Using your book as a reference, create a style rule for the first element. For my sample I picked the <p> tag. So, in my style rule, I list it, p, followed by the curly braces. Insert at least 6 different style properties for that element. Provide comments for each style rule describing that the rule does. Below is an example. Insert your entire code snippet just below the comment after the opening style tag.

Repeat for the ID and class. An example is shown below. Do not simply copy this code! Choose your own values and properties.

p {

          margin: auto 10px;                                              /* I’ll let you all look this one up! */

          padding: 10px 0;                                                 /* I’ll let you all look this one up! */

          font-size:36pt;                                                    /* Makes this a very large text! */

          font-family: Helvetica, Georgia;                              /* Set the font type characteristics */

          background-color:#DDDDDD;                                 /* Dark blue in hexadecimal form */

          color: #000;                                                      /* Black in RGB format*/

}


#second {

            margin: auto 10px;                                              /* I’ll let you all look these up! */

            padding: 10px 0;                                                                              

            font-size: 12pt;                                                                                 

            font-family: Verdana,Arial,Helvetica,sans-serif;                  

            background-color:#FF0000;                                                         

            color: #FF0;                                                                                          

}

.third {

             margin: auto 10px;                                              /* I’ll let you all look these up! */

             padding: 10px 0;                                                                              

             font-size: 18pt;                                                                                 

             font-family: Verdana, Catull;      

             background-color:#000000;                                                         

             color: #FFF;                                                                                          

}

Create either a rule for a class or an ID. Configure at least 6 different style properties for that element Please use different values and properties from the previous example. Provide comments for each style rule describing that the rule does.


body {

             margin: auto 10px;                                                    /* I’ll let you all look this one up! */

             padding: 10px 0;                                                       /* I’ll let you all look this one up! */

             font-size: 48pt;                                                       /* Makes this a very large text! */

             font-family: Verdana,Arial,Helvetica,sans-serif;               /* Set the font type characteristics */

             background-color:#042841;                                        /* Dark blue in hexadecimal form */.

             color: #000;                                                             /* Black in RGB format*/

}

Figure 1-3 Sample. Webpage that has 3 horizontal stripes with the word - hello word. The first strip is gray with large black text, the second is red with small yellow text and the third is black with medium white font. Save the file. Preview the web page in different browsers.

In your post, attach your web page. Discuss any difficulty you had in creating or viewing the web page in different browsers.

Solution PreviewSolution Preview

This material may consist of step-by-step explanations on how to solve a problem or examples of proper writing, including the use of citations, references, bibliographies, and formatting. This material is made available for the sole purpose of studying and learning - misuse is strictly forbidden.

/* Put your CSS styles on the line below this comment */
       #second{
          color: red;
          margin: 20px auto;
          text-transform: capitalize;
       }
       .third{
            color: palegreen;
            background-color: darkgoldenrod;
       }...
$28.00 for this solution

PayPal, G Pay, ApplePay, Amazon Pay, and all major credit cards accepted.

Find A Tutor

View available Web Development (HTML, XML, PHP, JavaScript, Adobe, Flash, etc.) Tutors

Get College Homework Help.

Are you sure you don't want to upload any files?

Fast tutor response requires as much info as possible.

Decision:
Upload a file
Continue without uploading

SUBMIT YOUR HOMEWORK
We couldn't find that subject.
Please select the best match from the list below.

We'll send you an email right away. If it's not in your inbox, check your spam folder.

  • 1
  • 2
  • 3
Live Chats