Question

In: Computer Science

Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style> body{ text-

Question

Block elements v.s. inline elements.

<!DOCTYPE html>

<html>

<head>

<style>

body{

text-align: center;

}

.textdiv {

background-color: LightSlateGrey;

width: 50%;

}

.imgdiv {

background-color: PapayaWhip;

width: 30%;

}

</style>

</head>

<body>

<h2>Center Me</h2>

<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

</div>

</body>

</html>

Step 1. Review the difference between block element and inline element from the reference (Links to an external site.).

Step 2. The CSS text-align property is used for aligning the inner content of a block element.

To align content center, use text-align: center;
To center align a block element itself, use margin: auto; which evenly set the right and left margin of the element.

To do: Uncomment line 6 in center-ex1.html. Check if all the Lorem Ipsum text on page is centered. Can you explain why some text is not centered. Fix this problem and center all text by adding a single CSS rule in the CSS class selector textdiv.

Step 3.

To center align an <img> element, which is an inline element, you can use different approaches.

Approach 1: Use text-align: center; to center the image within its parent container.

Approach 2: Turn the <img> into a block element by changing its display property from the default inline value to block: display: block; and then use margin: auto; so the image is centered within its parent container.

To do: Add a single rule in the CSS class selector. imgdiv to center the "number two" image on the page.

Expert Solution

Step 1:

Every HTML element has a default display value depending on what type of element it is. The default display value fo rmost elements in block or inline.

Inline Element: it is a element which does not start on a new line and only takes up as much width as necessary. the inline element following tags include:

span
a
select
button
b, strong
input
sub,sup

Block Element: it is a element which always starts on a new line and takes up the full width available. the block level element following tags include:

Div
P
H1-H6
UL,OL

let us identify block element and inline element from the given html code:

 <h2>Center Me</h2>

    <p>"<big>N</big>eque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

    <div class="textdiv">

                  Lorem ipsum dolor sit amet, <span>consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    </div>

    <img src="imgs/one.png" >

    <div class="imgdiv">

        <img src="imgs/two.png" >

    </div>

From the code, <img>, <span> & <big> are inline element, where as <p>, <div> are block element.

Step 2: The class textdiv on the center alignment but in the css for texdiv the width is assign 50% for this reason text is in center but align on left on the page, here the code of css:

 .textdiv {

       background-color: LightSlateGrey;

       width: 50%;

    }

to need to be center alignment, remove the width from css textdiv then display will be at center of the page. here the final code of css

 .textdiv {

       background-color: LightSlateGrey;

    }

Step 3: the img tag which is inline block display at center of page because in CSS, the center alignment is defined but the image two is not display at center because the image two is define in block element for that need to be define css for center alignment, here the css which was define:

  .imgdiv {

                     background-color: PapayaWhip;

                  width: 30%;

    }

for block element to be center element then need to add css margin to auto & width: 50%,

  .imgdiv {

                     background-color: PapayaWhip;
                  margin: auto;
                  width: 50%;

    }

The final html code with all changes is:

<!DOCTYPE html>

<html>

<head>

<style>

    body{

                     text-align: center;

    }

    .textdiv {

       background-color: LightSlateGrey;
    }

    .imgdiv {

                     background-color: PapayaWhip;
                     margin: auto;
                     width: 50%;

    }

</style>

</head>

<body>

    <h2>Center Me</h2>

    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

    <div class="textdiv">

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    </div>

    <img src="imgs/one.png" >

    <div class="imgdiv">

        <img src="imgs/two.png" >

    </div>

</body>

</html>

venereology answered 1 month ago

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;"/>...

<!DOCTYPE html> <html> <body>   ...

<!DOCTYPE html> <html> <body>    <title> TYPE YOUR NAME HERE</title> <script> // // A bug collector collects bugs every day for five days. Write a function that keeps // a running total of the number of bugs collected during the five days. The loop // should ask for the number of bugs collected for each day, and when the loop is // finished, the program should display the total...

<!DOCTYPE html> <html> <body>   ...

<!DOCTYPE html> <html> <body>    <title> name </title> <script> // // Write a function that calculates the amount of money a person would earn over // a period of years if his or her salary is one penny the first day, two pennies // the second day, and continues to double each day. The program should ask the // user for the number of years and...

<!DOCTYPE html> <html> <head>   <!-- * Do not change...

<!DOCTYPE html> <html> <head>      <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .btn{border:1px solid black; padding:5px;display:inline-block} </style> </head> <body>     <!-- ***************************************************************************************...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */ #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ } header h1 { text-align: center; } nav { text-align: center; background: rgb(175, 196, 206); } address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...

HTML mark-up text know the following HTML tags: · <html> · <body> · <head> · <p> ·...

HTML mark-up text know the following HTML tags: · <html> · <body> · <head> · <p> · <h1>, <h2>, <h3>, etc… · <a> · <img> · <br> · <hr> · <pre> · <i> · <b> · <em> · <sub> · <ins> · <strong> · <mark> · <cite> · <address> · <abbr> After you have reviewed these HTML tags and developed a sense of how they manipulate the presentation of the mark-up, write a sample page of HTML that briefly goes over...

BEFORE html <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p>

BEFORE html <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p> I'm a paragraph, what color am I ? </p> <ul> <li id = "fix"> I'm a list item;what color am I? </li> </ul> <div class = "central1"> <p class ="above"> I'm a paragraph; what color am I? </p> <p> I'm another paragraph, what color am I ? </p> <ol> <li id = "fix1"> I'm another list item;what...

Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...

Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body> <main> <h1>Fishing Images</h1> <p>Click on an image to enlarge.</p> <ul id="imageLinks"> <li><a href="images/release.jpg" title="Catch and Release"> <img src="thumbnails/release.jpg" alt=""></a></li> <li><a href="images/deer.jpg" title="Deer at Play"> <img src="thumbnails/deer.jpg" alt=""></a></li> <li><a href="images/hero.jpg" title="The Big One!"> <img src="thumbnails/hero.jpg" alt=""></a></li> <li><a href="images/bison.jpg" title="Grazing Bison"> <img src="thumbnails/bison.jpg"...

<!DOCTYPE html> <html lang="en"> <head> <title>Form Display Example</title> <script type="text/javascript"> function display() {...

<!DOCTYPE html> <html lang="en"> <head> <title>Form Display Example</title> <script type="text/javascript"> function display() { dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200') message = "<ul><li>NAME:" + document.form1.name.value; message += "<li>ADDRESS:" + document.form1.address.value; message += "<li>PHONE:" + document.form1.phone.value; message += "</ul>"; dispWin.document.write(message); } </script> </head> <body> <h1>Form Display Example</h1> <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p> <form name="form1" method="get" action=""> ...

Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...

Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...