Hello World!

By admin •March 15, 2017

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
  <h1 class="title">Hello, <span class="js-greeting"></span>!</h1>
  <p class="subtitle">Welcome to my first web site.</p>
  <script src="main.js"></script>
</body>
</html>

CSS

.title {
  background: DeepSkyBlue;
  border-radius: 5px;
  color: blue;
  color: white;
  font-size: 3rem;
  font-style: italic;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  text-align: center; 
  width: 75%;
}

.subtitle {
  color: LightSlateGray;
  font-size: 2rem;
  font-style: italic;
  text-align: center; 
}

JavaScript

function greet(name) {
  var element = document.querySelector('.js-greeting');

  if (element) {
    element.innerHTML = name;
  }
}

greet("World");

PHP

<?php
  function greet($name) {
    echo $name;
  }
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Hello, <?php greet("World") ?>!</title>
  <link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
  <h1 class="title">Hello, <span class="js-greeting"></span>!</h1>
  <p class="subtitle">Welcome to my first web site.</p>
  <script src="main.js"></script>
</body>
</html>