Categories
Web development

JavaScript HTML DOM/HTML

The HTML DOM allows JavaScript to change the content of HTML elements.

JavaScript HTML DOM/HTML

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML

This example changes the content of a <p> element:

<!DOCTYPE html>
<html>
<body>

<h4>JavaScript can change HTML.</h4>
<p id="example">Hello World!</p>

<script>
document.getElementById("example").innerHTML = "New text!";
</script>

<p>The paragraph above was changed by a JavaScript.</p>

</body>
</html>

Output:

JavaScript can change HTML.

Hello World!

The paragraph above was changed by a JavaScript.


Example explained:

The HTML document above contains a <p> element with id=”example“. We use the HTML DOM to get the element with id=”example”. A JavaScript changes the content (innerHTML) of that element to “New text!”

This example changes the content of an <h3> element:

<!DOCTYPE html>
<html>
<body>

<h3 id="example-2">Old Heading</h3>

<script>
var element = document.getElementById("example-2");
element.innerHTML = "New Heading";
</script>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

</body>
</html> 

Output:

Old Heading

JavaScript changed “Old Heading” to “New Heading”.

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax: 

document.getElementById(id).attribute = new value

This example changes the value of the src attribute of an <img> element:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="320" height="240" alt="cyclist">

<script>
document.getElementById("image").src = "https://lenadesign.org/wp-content/uploads/2020/02/css-doughnut.jpg";
</script>

</body>
</html>

Output:

cyclist

Example explained:

The HTML document above contains an <img> element with id=”image”. We use the HTML DOM to get the element with id=”image”. A JavaScript changes the src attribute of that element from “bike-animation.jpg” to “dougnut.jpg”.

Enjoy coding!

Read also:

JavaScript HTML DOM

JavaScript Introduction

JavaScript Math Object

Categories
HTML Web development

HTML SVG

The HTML <svg> tag is a container for SVG graphics. HTML <svg> is used to define graphics for the Web. SVG stands for Scalable Vector Graphics.

HTML SVG

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example1 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="60"
  stroke="#264653" stroke-width="6" fill="#2a9d8f" />
</svg>
 
</body>
</html>

Output:

SVG Circle

Example2 – draw a rectangle:

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="100">
  <rect width="300" height="100" 
  style="fill:#2a9d8f;stroke-width:10;stroke:#264653;" />
</svg>
 
</body>
</html>

Output:

SVG Rectangle

Example3 – draw a star.

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:#e9c46a;stroke:#e9c46a;stroke-width:5;fill-rule:#e9c46a;" />
</svg>
 
</body>
</html>

Output:

SVG Star

Example4 – SVG Logo

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(42,157,143);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(233,196,106);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#gradient)" />
  <text fill="#264653" font-size="40" font-family="tahoma"
  x="60" y="85">Logo</text>
</svg>

</body>
</html>

Output:

SVG Logo

Differences Between SVG and Canvas:

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with JavaScript).

SVG is XML-based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Note: Before you start to learn SVG you should have some basic understanding of the following: HTML and XML.

Enjoy coding!

Read also:

FAQ SVG

How to resize an SVG image?

Categories
Web development

HTML Canvas

If you want to start to learn JavaScript you need to know what HTML is.

The HTML <canvas> tag is used to draw graphics on the website.

The HTML <canvas> tag is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples:

Example1:

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas-example" width="200" height="200" style="border:1px solid #333;">
</canvas>

</body>
</html>

Output:


Example2 – draw a line:

<!DOCTYPE html>
<html>
<body>

<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
</script>

</body>
</html>

Output:


To learn more about HTML Canvas Paths click here.

Example3 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<canvas id="circleCanvas" width="200" height="200" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("circleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

Output:


To learn more about HTML Canvas Paths click here.

Example4 – draw a text:

<!DOCTYPE html>
<html>
<body>

<canvas id="textCanvas" width="250" height="100" style="border:1px solid #333;">
</canvas>

<script>
var c = document.getElementById("textCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Have a good day!",8,60);
</script>

</body>
</html>

Output:


Example5 – draw linear gradient:

<!DOCTYPE html>
<html>
<body>

<canvas id="square-3" width="200" height="200" style="border:1px solid #333;">
</canvas>

<script>
var c = document.getElementById("square-3");
var ctx = c.getContext("2d");
var createGradient = ctx.createLinearGradient(0, 0, 150, 0);
createGradient.addColorStop(0, "#e76f51");
createGradient.addColorStop(0.5, "#f4a261");
createGradient.addColorStop(1, "#e9c46a");
ctx.fillStyle = createGradient;
ctx.fillRect(50, 50, 100, 100);
</script>

</body>
</html>

Output:


To learn more about HTML Canvas Gradients click here.

Example6 – draw an image:

<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="dance" src="https://lenadesign.org/wp-content/uploads/2020/01/dance1-1.jpg" alt="Dancer" width="320" height="240">

<p>Canvas to fill:</p>
<canvas id="danceCanvas" width="640" height="480"
style="border:1px solid #333;"></canvas>

<p><button onclick="danceCanvas()">Click here</button></p>

<script>
function danceCanvas() {
  var c = document.getElementById("danceCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("dance");
  ctx.drawImage(img,0,0);
}
</script>
</body>
</html>

Output:

Image to use:

Dancer

Canvas to fill:

To read more about HTML Canvas drawImage() method click here.

Enjoy coding!

Read also:

HTML Canvas Reference

JavaScript Introduction

JavaScript Math Object

Categories
Web development

HTML id

In one of the previous posts, we were talking about the HTML class attribute which defines equal styles of elements, today we’ll focus on the second very important attribute which defines HTML element – HTML id.

html id

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute can be used on any HTML element.

The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value.

In CSS, to select an element with a specific id, use a hash (#) character, followed by the id of the element:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#header {
  background-color: #2a9d8f;
  color: white;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h4 id="header">Header</h4>

</body>
</html>

Output:

Difference Between Class and ID:

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

<!DOCTYPE html>
<html>
<head>
<style>

#header {
  background-color: #2a9d8f;
  color: white;
  padding: 40px;
  text-align: center;
}

.city {
  background-color: #e9c46a;
  color: #264653;
  padding: 10px;
} 
</style>
</head>
<body>


<h3 id="header">The Capitals:</h3>

<h4 class="city">London</h4>
<p>London is the capital of the United Kingdom.</p>

<h4 class="city">Brussels</h4>
<p>Brussels is the capital of Belgium.</p>

<h4 class="city">Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>

</body>
</html>

Output:

London

London is the capital of the United Kingdom.

Brussels

Brussels is the capital of Belgium.

Bangkok

Bangkok is the capital of Thailand.


Using The id Attribute in JavaScript:

JavaScript can access an element with a specified id by using the getElementById() method (you can read more about this method here):

<!DOCTYPE html>
<html>
<body>

<h4 id="header">Hello!</h4>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("header").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Output:

Hello!

Enjoy coding!

Read also:

HTML Attributes

HTML Form Elements

HTML tags

Categories
Web development

HTML Classes

The class is an attribute that specifies one or more class names for an HTML element.

HTML Classes

The class attribute can be used on any HTML element. 

The HTML class attribute is used to define equal styles for elements with the same class name.

So, all HTML elements with the same class attribute will get the same style.

Here we have three <div> elements that point to the same class name:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: #e9c46a;
  color: #264653;
  margin: 10px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="cities">
<h4>London</h4>
<p>London is the capital of the United Kingdom.</p>
</div> 

<div class="cities">
<h4>Brussels</h4>
<p>Brussels is the capital of Belgium.</p>
</div>

<div class="cities">
<h4>Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>
</div>

</body>
</html>

Output:

London

London is the capital of the United Kingdom.

Brussels

Brussels is the capital of Belgium.

Bangkok

Bangkok is the capital of Thailand.

The HTML class attribute can also be used on inline elements:

<!DOCTYPE html>
<html>
<head>
<style>
span.important {
  font-size: 125%;
  color: #e76f51;
  ;
}
</style>
</head>
<body>

<h4>My <span class="important">Important</span> Heading</h4>
<p>This is some <span class="important">important</span> text.</p>

</body>
</html>

Output:

My Important Heading

This is some important text.


In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:

Use CSS to style all elements with the class name “city”:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: #e9c46a;
  color: #264653;
  padding: 10px;
}
</style>
</head>
<body>

<h4 class="city">London</h4>
<p>London is the capital of the United Kingdom.</p>

<h4 class="city">Brussels</h4>
<p>Brussels is the capital of Belgium.</p>

<h4 class="city">Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>

</body>
</html>

Output:

London

London is the capital of the United Kingdom.

Brussels

Brussels is the capital of Belgium.

Bangkok

Bangkok is the capital of Thailand.

HTML elements can have more than one class name, each class name must be separated by a space.

Style elements with the class name “first”, also style elements with the class name “second”:

<!DOCTYPE html>
<html>
<style>
.first {
  background-color: #e9c46a;
  color: #264653;
  padding: 10px;
} 

.second {
  text-align: center;
}
</style>
<body>

<h4 class="first second">London</h4>
<h4 class="first">Brussles</h4>
<h4 class="first">Bangkok</h4>

</body>
</html>

Output:

London

Brussles

Bangkok

Different tags, like <h4> and <p>, can have the same class name and thereby share the same style:

<!DOCTYPE html>
<html>
<style>
.sameClass {
  background-color: #e9c46a;
  color: #264653;
  padding: 10px;
} 
</style>
<body>

<h2 class="sameClass">Paris</h2>
<p class="sameClass">Paris is the capital of France.</p>

</body>
</html>

Output:

Paris

Paris is the capital of France.

The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.

JavaScript can access elements with a specified class name by using the getElementsByClassName( ) method:

When a user clicks on a button, hide all elements with the class name “hide”:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Hide elements</button>

<h4 class="hide">London</h4>
<p>London is the capital of the United Kingdom.</p>

<h4 class="hide">Brussels</h4>
<p>Brussels is the capital of Belgium.</p>

<h4 class="hide">Bangkok</h4>
<p>Bangkok is the capital of Thailand.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("hide");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>

Output:


London

London is the capital of the United Kingdom.

Brussels

Brussels is the capital of Belgium.

Bangkok

Bangkok is the capital of Thailand.

Enjoy coding!

Read also:

HTML id

HTML Attributes

Understanding the HTML Layout

Categories
Web development

How to create an Image Gallery with HTML and CSS?

Setting up a CSS image gallery is quite simple. Image Gallery is used to store and display the collection of pictures. Today you can learn how to create an Image Gallery with only CSS, and later tabbed an image gallery with CSS and JavaScript and on the end how to use CSS media queries to create a responsive image gallery that will look good on desktops, tablets, and smartphones. 

CSS Image Gallery

I. The following image gallery is created with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" width="600" height="400">
  </a>
  <div class="desc">Cyclist</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
  </a>
  <div class="desc">Cake</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
  </a>
  <div class="desc">Coffee</div>
</div>

</body>
</html>

Output:




II. Create a tabbed gallery:

Step 1: Add HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" style="width:100%" onclick="myFunction(this);">
  </div>
</div>
</body>
</html>

Step 2: Add CSS

Create four columns and style the images.  

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

Step 3: Add JavaScript

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

Output (Click on the image to expand it) :

cyclist
cake
coffee
web developer
×

III. Responsive Image Gallery

Step1: Add HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
    </a>
    <div class="desc">Cake</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
    </a>
    <div class="desc">Coffee</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" width="600" height="400">
    </a>
    <div class="desc">Web developer</div>
  </div>
</div>

<div class="clearfix"></div>
</body>
</html>

Step2: Add CSS:

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Output:

Enjoy coding!

Read also:

CSS Fixed Sidebar Menu

Units in CSS

Web Safe Fonts

Categories
Web development

HTML Scroll Box

When the content of the box is too large to fit in, an HTML scroll box will make sure that the box grows scroll bars.

HTML Scroll Box

Usually, the scroll box is made using the HTML <div> tag and the scroll bars are defined using the CSS overflow property.

Example 1: Basic Scroll Box

<div style="height:150px;width:400px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.
</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.

Example 2: Colored Scroll Box

<div style="height:150px;width:400px;overflow:auto;background-color:yellow;color:black;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.

Example 3: Scroll Box Borders

<div style="height:150px;width:400px;overflow:auto;border:8px solid blue;padding:2%">Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here...</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here…

Example 4: Horizontal Scroll

<div style="border:1px solid black;height:100px;width:400px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here.. 
</p>
</div>

Output:

Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here. Add your text here..

Hope it helps!

Enjoy coding!

Read also:

HTML Checkbox

HTML Quotations

CSS Gradients

Categories
Web development

HTML Attributes

HTML Attributes

Each HTML element/tag can also feature attributes (and each element has a different set of attributes applicable to the element.


All we should remember about HTML Attributes are:


a) all HTML elements can have attributes


b) attributes provide additional information about an element


c) attributes are always specified in the start tag


d) attributes usually come in name/value pairs like: name=”value”


There are many attributes often used in HTML. Here are some attributes which you can use while designing your website:

1. href attribute
2. style attribute
3. title attribute

1. Href attribute

Below is an example of adding the href attribute to the <a> tag (which is used for creating a hyperlink to another website).

The herf attribute specifies the location of the website that we’re linking to.

HTML Attributes

Example:

<!DOCTYPE html>
<html>
<body>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.lenastanley.com">My blog.</a>

</body>
</html>

Output:

HTML links are defined with the a tag. The link address is specified in the href attribute:

My blog.

2. Style attribute

Another very commonly used attribute is the style attribute. The style attribute is used to provide various CSS effects to the HTML (like increasing font-size, changing font-family, or colouring).

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Style Attribute</title>
</head>
<body>
    <h2 style="font-family:Chaparral Pro Light;">Style Attribute.</h2>
    <h3 style="font-size:15px;">Style Attribute.</h3>
    <h2 style="color:#B22222;">Style Attribute.</h2>
    <h2 style="text-align:center;">Style Attribute.</h2>
</body>
</html> 

Output:

HTML Attributes

3. Title attribute

The next one is the title attribute. The title attribute is used to specify extra information about the tag/element. When the mouse moves over the element then it shows the information.

Example:

<!DOCTYPE html>
<html>
<body>

<p><abbr title="This is a title attribute">Title attribute </abbr>you will learn here:</p>
<p title="Web tutorials">www.lenastanley.com</p>

</body>
</html>

Output:

Title attribute you will learn here:

http://www.lenastanley.com

There are many different attributes in HTML like alt, disabled, id, src… but I would like to look into them closer in a different post in the future. In case you would like to know them faster I am posting them below with a short description. 

Edit: To see how to use these attributes click here.

alt– specifies an alternative text for an image, when the image can not be displayed.
disabled– specifies that an input element should be disabled. 
id– specifies a unique id for an element.
src– specifies the URL (website address) for an image. 

Enjoy coding!

Read also:

HTML Attributes

HTML tags

Categories
Web development

Understanding the HTML Layout

A website layout is very important to give your website a better look. Professional website layout can be achieved using a combination of HTML, CSS, and JavaScript but you can create at home a layout using HTML tags.

Today I will create a simple layout for a website using HTML and its attributes and we will move a bit further and start learning CSS to style our webpage and make our page looks good.  

HTML Layout Gif

To understand the HTML layout, we should know first, which information the webpage layout should contain. 

Websites display contents in columns (like in newspaper):

CSS Layout

Where: 

<header> Defines a header for a document or section. Typically contain the site logo or banner. 


<nav> The section which is dedicated to links, or navigation. For example the menu of the page. 

<main> Defines the main content of the webpage.

<article> Element defines a self-contained composition on the webpage. 

<div> Defines a division or a section on the webpage. 


<section> Definies section on the webpage. 


<aside> It holds additional information. 


<footer> Defines a footer for a website or section, and is always on the bottom of the webpage. 

HTML Layout example: 

<!DOCTYPE html>
<html>
<head>
   <title>The title of your website</title>
   <meta name="description" content="You can add description of your website here.">
   <meta name="author" content="author">
</head>
<body>
   <!-- HEADER SECTION -->
   <header>
   Your website logo or banner.
   </header>

   <!-- NAVIGATION BAR -->
   <nav>
    <a href="#">Main page</a>
    <a href="#">You can add link here</a>
    <a href="#">You can add link here</a>
   </nav>

   <!-- MAIN BODY -->
   <main>
    <!-- ARTICLE -->
   <article>
      <h1>Article Title</h1>

   <section>
      <h2>Section A</h2>
    You can add main text or informations here.
      <aside>Additional information.</aside>
   </section>

   <section>
      <h2>Section B</h2>
    You can add more contents here.
   </section>
   </article>

   <!-- DIVISIONS -->
   <div id="div-container">
     <div>Block 1</div>
     <div>Block 2</div>
   </div>
   </main>

   <!-- FOOTER SECTION -->
   <footer>
    FOOTER
   </footer>
</body>
</html>

Once we have done with basic HTML layout (inserted the upper code into HTML/text editor), we will receive this:

HTML CSS Layout

Previously, I planned to show you how to create columns using only HTML (table tag), however, I know now, and also from my experience, the <table> element was not designed to be a layout tool.

The HTML <table> element should represent tabular data. Using this element in your layout can later bring a mess in your code and not always this element displays properly in the browser.   

To avoid errors in our code, I added to the HTML document CSS code to create 3 columns.

As you can see below, I used the internal method to insert code CSS to the file (by using an <style> element in the <head> section, which you can see on the top part of the code.

<!DOCTYPE html>
<html>
<head>
  <style>
    #main {
      display: flex;
    }
    #first-col {
      width: 30%;
      background: #2a9d8f;
    }
    #second-col {
      width: 40%;
      background: #e76f51;
    }
    #third-col {
      width: 30%;
      background: #e9c46a;
    }
    @media all and (max-width: 800px) {
      #main {
        display: block;
      }
      #first-col, #second-col, #third-col {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- HEADER SECTION -->
  <header>
    Your website logo or banner.  </header>

   <!-- NAVIGATION BAR -->
  <nav>
    <a href="#">Main Page</a>
    <a href="#">You can add link here.</a>
    <a href="#">You can add link here.</a>
  </nav>

  <div id="main">
    <!-- LEFT SIDEBAR -->
    <div id="first-col">
      LEFT
    </div>

    <!-- CENTER MAIN -->
    <main id="second-col">
      <h1>Main</h1>
      <p>You can add main text or informations here</p>
    </main>

    <!-- RIGHT SIDEBAR -->
    <div id="third-col">
      RIGHT
    </div>
  </div>

  <!-- FOOTER SECTION -->
  <footer>
    Footer.
  </footer>
</body>
</html>

And it displays in the browser now like this: 

Your website logo or banner.
LEFT

Main

You can add main text or informations here.

RIGHT
Footer.

Enjoy coding!

Read also:

HTML List Tags

The basic structure of an HTML document

How to put an image into HTML code?

Categories
Web development

HTML List Tags

BLOCK ELEMENTS

addressinformation on the author
articleself-contained content
asidecontent aside from the content it is placed in
blockquotelong quotation
canvasis used to draw graphics, on the fly, via scripting
dddefinition description
divgeneric container (block)
dldefinition list
dtdefinition term
fieldsetform control group
figcaptionspecifies a caption for a <figure> element
figuredefines self-contained content, like illustrations, diagrams, photos…
footerspecifies a footer for a document
formcreate an HTML form for user input
h1-h6six levels of headings
headerrepresents a container for introductory content or a set of navigational links
hrhorizontal rule
maindefines the main content of a document
navspecifies a set of navigation links
noframesalternate content for non-frame-based rendering/ Not Supported in HTML5 / Use the <iframe> tag instead.
noscriptcontent when scripts disabled
olordered list
pparagraph
prepre-formatted text
sectionspecifies a section in a document
ulunordered list
videois used to embed video content in a document

INLINE ELEMENTS

a      anchor (or link)
abbrabbreviation
acronymacronym (UNO, NATO,…)
bbold text
bdoI18N BiDi over-ride
biglarge font
brforced line break
buttonpush button
citecitation or reference
codecomputer code
dfndefinition
ememphasis 
iitalic text
iframeinline subwindow
imgembedded image
inputform control
kbdtext to be entered by the user
labelform field label text
mapclient-side image map
objectgeneric embedded object
outputis used to represent the result of a calculation
qshort inline quotation
sampsample output from scripts
scriptscript statements
selectoption selector
smallsmall font
spangeneric container (inline)
strongindicates stronger emphasis
subsubscript
supsuperscript
textareamulti-line text field
timespecifies a specific time
ttteletype or monospaced text
varan instance of a variable or program argument

TABLE ELEMENTS

captiontable caption
coltable column
colgrouptable column group
table table element (block)                              
tbodytable body
tdtable data cell
tfoottable footer
thtable header cell
theadtable header
trtable row

OTHER ELEMENTS

<!–…–>comment tag
areaimage map area      
audioembeds sound content in a document
basedocument base URI                                
bodydocument body
datalistdefines a list of pre-defined options for an <input> element
deldeleted text
detailsdefines additional information that the user can open and close on demand.
framesubwindow/ Not Supported in HTML5 / Use the <iframe> tag instead.
framesetwindow subdivision/ Not Supported in HTML5 / Use the <iframe> tag instead.
headdocument head
htmlroot element
insinserted text
legendfieldset legend 
lilist item
linkmedia-independent link
metageneric metainformation
optgroupoption group
optionselectable choice
paramnamed property value
picturedefines image resources
stylestyle info
sourcedefines multiple media resources
summaryspecifies a visible heading for the <details> tag.
titledocument title

Hey, here’s something that might interest you:

HTML Attributes

HTML Form Elements

HTML Canvas