Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
What are commands and comments in PHP
Where did the page content go? The line that we deleted contained the following code:
require('components/company_info.php');The require command added information about the company to the main page. We deleted the command, and the information disappeared.
A command is an instruction to a program to perform some action. During the course we will learn about various commands.
Since you already had a go at the main page, let’s add another version of the content and check to see whether we have increased sales on the site.
And here is the boss! His name is Dumpo the little elephant, who is one of the senior programmers at Muffin’s web design studio. As you know, Muffin is the best boss in the world. Dumpo will give you your assignments and help you learn the material.
Let’s get down to work on the assignment. Include a file with different markup on the main page. This file has been commented out, and we need to remove the comment from the code.
Comments provide an explanation in natural language. Programmers leave them for other developers in order to explain their software code. Code that is enclosed in a comment is not executed and does not affect the output.
// I am comment text. I do not affect the program
// like the code below
// require('path_to_file.php');
You can make a single-line comment in PHP by writing two forward slashes //. Code on the same line after these characters will be commented out. In order to remove a comment, you need to delete //.
Files
<?php
require('components/header.php');
// Uncomment the line below
// require('components/company_info_detail.php');
require('components/footer.php');
?>
<section class="intro">
<div class="container">
<h1 class="intro-title">Comfort and coziness in <b>your</b> apartment</h1>
<p>A variety of home furnishings with delivery worldwide</p>
</div>
</section>
<section class="popular-products">
<div class="container">
<h2 class="visually-hidden">Top sellers</h2>
<ul class="products-list">
<li>
<a class="product-card" href="product.php?product_id=1">
<h3>Mseyulida</h3>
<p>floor lamp</p>
<span class="price"><del>$289</del> $288</span>
<img src="img/item-mseyulida.jpg" width="156" height="120" alt=""Mseyulida" floor lamp">
</a>
</li>
<li>
<a class="product-card product-card-new" href="product.php?product_id=2">
<h3>Rmaeribi</h3>
<p>three-seat sofa</p>
<span class="price">$5870</span>
<img src="img/item-rmaeribi.jpg" width="156" height="120" alt=" "Rmaeribi" three-seat sofa">
</a>
</li>
<li>
<a class="product-card" href="product.php?product_id=3">
<h3>Bletub</h3>
<p>ceiling chandelier</p>
<span class="price">$1360</span>
<img src="img/item-bletub.jpg" width="156" height="120" alt=""Bletub" ceiling chandelier">
</a>
</li>
</ul>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="features-title">What <b>sets</b> us apart from our competitors?</h2>
<ul class="features-list">
<li class="feature-unique">Our unique products are unlike anything else on the market</li>
<li class="feature-organic">We use only natural materials</li>
<li class="feature-protected">Our furniture is resistant to cat teeth and claws</li>
</ul>
</div>
</section>
<section class="intro-alt">
<div class="container">
<div class="intro-text">
<h1 class="intro-title">Save 50%</h1>
<p class="intro-description">On a yellow two-seat sofa</p>
<p class="intro-info">Use the promo code <code>bmoopk</code></p>
</div>
<div class="intro-item">
<img src="img/hero-image-bmoopk.png" width="272" height="120" alt="Bmoopk two-seat sofa">
<p><b>Bmoopk</b>, two-seat sofa</p>
<span class="intro-price"><del>$2999</del> $1498</span>
</div>
</div>
</section>
<section class="services">
<div class="container">
<h2 class="services-title">Our services</h2>
<ul class="services-list">
<li class="service-cleaning">We will remove your old furniture from your apartment</li>
<li class="service-placing">Let's arrange our beautiful and new furniture</li>
<li class="service-decorating">Let's add a ficus bush to make things even more beautiful</li>
</ul>
</div>
</section>
<section class="popular-products">
<div class="container">
<h2 class="products-title">Our best sellers</h2>
<ul class="products-list">
<li>
<a class="product-card product-card-wide" href="catalog-item.html">
<div>
<h3>Mseyulida</h3>
<p>Floor lamp</p>
<span class="price"><del>$289</del> $288</span>
</div>
<img src="img/item-mseyulida-small.jpg" width="100" height="111" alt=""Mseyulida" floor lamp">
</a>
</li>
<li>
<a class="product-card product-card-wide" href="catalog-item.html">
<div>
<h3>Bletub</h3>
<p>Ceiling chandelier</p>
<span class="price">$1360</span>
</div>
<img src="img/item-bletub-small.jpg" width="100" height="111" alt=""Bletub" ceiling chandelier">
</a>
</li>
</ul>
</div>
</section>
<footer class="site-footer">
<div class="container">
<ul class="navigation-list">
<li><a href="catalog.php">Catalog</a></li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
<ul class="social-list">
<li>
<a class="social-link-twitter" href="https://twitter.com">
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li>
<a class="social-link-instagram" href="https://instagram.com">
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li>
<a class="social-link-facebook" href="https://facebook.com">
<span class="visually-hidden">Facebook</span>
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online store for home furnishings</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="site-navigation">
<a class="logo-link" href="index.php">
<img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo">
</a>
<ul class="navigation-list">
<li><a href="catalog.php">Catalog</a></li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
</nav>
</header>
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
body {
min-width: 550px;
padding: 0;
margin: 0;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 13px;
line-height: 18px;
}
a {
text-decoration: none;
color: inherit;
}
.container {
width: 510px;
padding: 0 20px;
margin: 0 auto;
}
.site-navigation {
display: flex;
width: 510px;
padding: 0 20px;
margin: 0 auto;
justify-content: space-between;
}
.site-header {
position: relative;
z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.logo-link:hover,
.logo-link:focus {
opacity: 0.5;
}
.logo-link:active {
opacity: 0.3;
}
.logo-link img {
margin: 10px 0;
}
.navigation-list {
display: flex;
margin: 0 -15px 0 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
justify-content: flex-end;
}
.navigation-list a:hover,
.navigation-list a:focus {
opacity: 0.5;
}
.navigation-list a:active {
color: #ff8a00;
}
.navigation-list a {
display: block;
padding: 12px 15px 11px;
color: #845927;
}
.intro .container {
z-index: -1;
min-height: 150px;
margin-bottom: 20px;
padding: 15px 0 0;
box-sizing: border-box;
background-image: url("img/index-background.jpg");
background-repeat: no-repeat;
background-position: top right;
}
.intro-title {
width: 240px;
padding: 0;
margin: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.intro-title b,
.features-title b,
.delivery-text b {
font-weight: 400;
color: #ff8a00;
}
.intro p {
width: 210px;
margin: 8px 0 10px;
padding: 0;
line-height: 20px;
}
.quote {
display: block;
position: relative;
padding: 0 0 0 33px;
margin: 20px 0 20px;
font-family: "Georgia", "Times", serif;
font-style: italic;
}
.quote p {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 24px;
quotes: none;
}
.quote::before {
position: absolute;
content: "«";
top: 0;
left: 0;
font-size: 36px;
color: #ff8a00;
}
.author {
display: block;
padding: 0;
margin: 4px 0;
}
.popular-products {
margin: 0;
background-color: #fff3e5;
}
.delivery,
.custom,
.contacts,
.catalog,
.item {
margin: 15px 0 10px;
}
.delivery-title,
.custom-title,
.contacts-title,
.catalog-title,
.item-title {
padding: 0;
margin: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.custom-columns {
display: flex;
flex-grow: 0;
}
.custom-columns img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 20px 30px 0;
min-height: 200px;
}
.custom-columns div {
margin: 5px 0 20px;
}
.products-list {
display: flex;
padding: 20px 0 0;
margin: 0 0 0 -20px;
flex-wrap: wrap;
flex-shrink: 0;
list-style: none;
}
.products-list li {
display: flex;
}
.product-card {
position: relative;
display: flex;
width: 132px;
margin-bottom: 20px;
margin-left: 20px;
padding: 124px 12px 12px;
flex-direction: column;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-new {
position: relative;
}
.product-card-new::after {
position: absolute;
content: "new";
width: 34px;
height: 15px;
top: 8px;
right: -2px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px 0 0 4px;
}
.product-card:hover,
.product-card:focus {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.product-card:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.product-card img {
position: absolute;
top: 0;
left: 0;
order: -1;
}
.product-card h3 {
margin: 0 0 2px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 15px;
line-height: 18px;
font-weight: 400;
}
.product-card p {
margin: 0 0 8px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-size: 13px;
line-height: 16px;
}
.price {
margin-top: auto;
font-weight: 700;
font-size: 15px;
color: #ff8a00;
}
.price del {
margin-right: 2px;
font-weight: 400;
font-size: 13px;
color: #000000;
text-decoration: line-through;
}
.map-link {
display: block;
margin-top: -20px;
margin-bottom: 30px;
color: #845927;
}
.map-link:hover,
.map-link:focus {
opacity: 0.5;
}
.map-link:active {
color: #ff8a00;
}
.contacts img,
.item img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
}
.contacts-info {
margin: -10px 0 30px;
}
.contacts-info p {
position: relative;
padding-left: 16px;
margin: 12px 0;
}
.contact-phone::before {
position: absolute;
content: "";
width: 10px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-phone.svg");
}
.contact-address::before {
position: absolute;
content: "";
width: 9px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-pin.svg");
}
.delivery-background {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
background-image: url("img/delivery-background.jpg");
background-repeat: no-repeat;
background-position: center left;
}
.delivery-text {
width: 210px;
margin-left: auto;
padding: 16px 20px 20px;
background-color: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.delivery-text p {
margin: 8px;
padding: 0;
}
.features {
padding-top: 20px;
padding-bottom: 10px;
}
.features-title,
.services-title,
.products-title {
margin: 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 20px;
line-height: 24px;
font-weight: 400;
}
.features-list {
display: flex;
padding: 0;
margin: 14px 0 0;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.features-list li {
position: relative;
width: 142px;
margin-bottom: 10px;
}
.features-list li::before {
position: absolute;
content: "";
top: 2px;
left: 0;
}
.feature-unique {
padding-left: 22px;
}
.feature-unique::before {
width: 16px;
height: 12px;
background-image: url("img/feature-unique.svg");
}
.feature-organic {
padding-left: 25px;
}
.feature-organic::before {
width: 19px;
height: 12px;
background-image: url("img/feature-organic.svg");
}
.feature-protected {
padding-left: 16px;
}
.feature-protected::before {
width: 10px;
height: 12px;
background-image: url("img/feature-protected.svg");
}
.site-footer {
background-color: #847462;
}
.site-footer .container {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
.copyright {
margin: auto 0;
flex-shrink: 0;
color: #ffffff;
}
.site-footer .navigation-list {
margin-right: 15px;
margin-left: -15px;
justify-content: left;
}
.copyright + .navigation-list {
justify-content: center;
margin-left: 15px;
}
.site-footer a {
display: block;
margin: 0;
padding: 14px 15px;
color: #ffffff;
}
.social-list {
display: flex;
width: 110px;
padding: 0;
margin: 0 -10px 2px;
justify-content: end;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.social-list a {
display: block;
width: 14px;
height: 14px;
padding: 10px;
background-repeat: no-repeat;
background-position: center;
}
.social-link-twitter {
background-image: url("img/icon-twitter.svg");
}
.social-link-instagram {
background-image: url("img/icon-instagram.svg");
}
.social-link-facebook {
background-image: url("img/icon-facebook.svg");
}
.social-list a:hover,
.social-list a:focus {
opacity: 0.5;
}
.social-list a:active {
opacity: 0.3;
}
/* Additional styles for an alternate homepage */
.intro-alt {
min-height: 145px;
margin-bottom: 20px;
color: #ffffff;
background: linear-gradient(#ffad4c 0%, #ea9b3e 80%, #ffad4c 100%);
}
.intro-alt .container {
display: flex;
justify-content: space-between;
}
.intro-text {
flex-shrink: 0;
padding: 20px 0;
}
.intro-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 272px;
padding-top: 58px;
flex-shrink: 0;
}
.intro-item img {
position: absolute;
top: 14px;
right: 0;
}
.intro-item p {
margin-bottom: 2px;
z-index: 2;
}
.intro-alt .intro-title {
margin: 0;
padding: 0 0 4px;
font-family: "Georgia", "Times", serif;
font-size: 32px;
line-height: 36px;
font-weight: 700;
}
.intro-description {
margin: 0;
padding: 0 0 16px;
font-size: 15px;
font-weight: 700;
}
.intro-info {
margin: 0;
line-height: 22px;
}
.intro-alt code {
display: inline-block;
vertical-align: baseline;
margin: 0 8px;
padding: 1px 8px;
font-family: inherit;
color: #000000;
font-weight: 700;
letter-spacing: 0.5px;
background-color: #ffffff;
border-radius: 4px;
}
.intro-price {
z-index: 2;
font-size: 15px;
font-weight: 700;
}
.intro-price del {
margin-right: 2px;
font-weight: 400;
font-size: 13px;
color: #000000;
text-decoration: line-through;
}
.services-list {
display: flex;
padding: 0;
margin: 14px 0 0;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.services-list li {
position: relative;
width: 156px;
margin-bottom: 20px;
padding: 122px 0 0;
}
.services-list li::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 156px;
height: 114px;
background-repeat: no-repeat;
}
.service-cleaning::before {
background-image: url("img/service-cleaning.jpg");
}
.service-placing::before {
background-image: url("img/service-placing.jpg");
}
.service-decorating::before {
background-image: url("img/service-decorating.jpg");
}
.products-title {
padding-top: 20px;
}
.product-card-wide {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100px;
min-height: 81px;
margin-bottom: 30px;
margin-left: 20px;
padding: 15px 25px 15px 120px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-wide p {
margin-bottom: 10px;
}
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
An error has occurred
due to a lack of resources or an error in the program, try to fix the code to restart it
100%
Console
Console
Comments