HTML example

Minimal example of some HTML, CSS and JavaScript working together.

by Kamal Kumawat

HTML

<h2>Welcome to web development</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget est sagittis, gravida mauris quis, aliquet purus. Ut blandit aliquam mauris sed dictum. Donec sagittis tortor iaculis risus egestas, vitae imperdiet libero aliquam. Pellentesque nec ligula faucibus, fringilla diam a, tristique velit.</p>

<div id="aDiv">asd</div>

<p class="myClass">Ut laoreet mattis arcu eget viverra. Etiam fermentum vitae arcu quis adipiscing. Integer eu adipiscing ante. Nulla erat lacus, blandit nec vestibulum ac, dictum ac enim. Nunc commodo hendrerit velit. Fusce auctor, quam quis feugiat scelerisque, nisi nisl condimentum neque, in luctus nunc ante a justo. Nam malesuada ipsum a lorem rhoncus tempor.</p>

CSS

* {
    font-family: Arial, 'Sans Serif';
}
h2 {
    color: darkblue;
}
#aDiv{
    background-color: lightgray;
}
p {
    color: #20561E;
}
.myClass {
    font-size: smaller;
    border:1px solid black;
    padding:10px;
}

JavaScript

/* set a variable */
var text = "Some text";

/* get an element */
/* var myDivElement = document.getElementById('aDiv');

add an attribute
myDivElement.setAttribute('class', 'myClass');

add content
myDivElement.innerHTML = '<p>' + text + '</p>';
 */
 
 var element = document.createElement("img");
 element.src = "https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png";
 document.getElementById("aDiv").appendChild(element);
var e = document.createElement("div");
e.innerHTML = "Kamal";
document.getElementById("aDiv").appendChild(e);