Categories
JavaScript Web development

JavaScript HTML DOM/HTML

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

JavaScript HTML DOM/HTML
Do you like this gif? Check more gifs in the store.

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>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

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

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

</body>
</html>

Output:

Example explained:

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

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

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

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

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

</body>
</html> 

Output:

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="smiley.gif" width="160" height="120">

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

Output:

Example explained:

The HTML document above contains an <img> element with id=”myImage”. We use the HTML DOM to get the element with id=”myImage”. A JavaScript changes the src attribute of that element from “smiley.gif” to “landscape.jpg”.

Enjoy coding!

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

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="blue" stroke-width="4" fill="red" />
</svg>
 
</body>
</html>

Output:

Example2 – rectangle and rounded rectangle.

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</br>
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>
 
</body>
</html>

Output:

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:yellow;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

Output:

Example4 – SVG Logo

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="purple" font-size="45" font-family="Verdana"
  x="50" y="86">Logo</text>
</svg>

</body>
</html>

Output:

Differences Between SVG and Canvas:

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a 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!

Categories
HTML JavaScript Web development

HTML Canvas

If you want to start to learn JavaScript you need to know what is the HTML . The HTML <canvas> tag is used 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="myCanvas" width="300" height="200" style="border:1px solid #000000;">
</canvas>

</body>
</html>

Output:

Example2 – draw a line:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:2px solid black;"></canvas>

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

</body>
</html>

Output:

Example3 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

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

</body>
</html>

Output:

Example4 – draw a text:

<!DOCTYPE html>
<html>
<body>

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hava a good day!",10,50);
</script>

</body>
</html>

Output:

Example5 – draw linear gradient:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"lightblue");
grd.addColorStop(1,"grey");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Output:

Example6 – draw an image:

<body>
<p>Image to use:</p>
<img id="dance" src="dance.jpg" alt="Dancer" width="320" height="240">

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

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

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

Output:

Enjoy coding!

Categories
HTML 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.

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, write a hash (#) character, followed by the id of the element:

Example:

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

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

</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>
/* Style the element with the id "myHeader" */
#header {
  background-color: pink;
  color: white;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: green;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>

<!-- A unique element -->
<h1 id="header">The Capitals</h1>

<!-- Multiple similar elements -->
<h2 class="city">Brussels</h2>
<p>Brussels is the capital of Belgium.</p>

<h2 class="city">Madrid</h2>
<p>Madrid is the capital of Spain.</p>

<h2 class="city">Lisbon</h2>
<p>Lisbon is the capital of Portugal.</p>

</body>
</html>

Output:

Using The id Attribute in JavaScript:

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

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Output:

Enjoy coding!

Categories
CSS HTML JavaScript Web development

HTML Classes

The class is an attribute which specifies one or more class names for an HTML element. The class attribute can be used on any HTML element. 

HTML Classes

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: lightgreen;
  color: blue;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

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

<div class="cities">
<h2>Madrit</h2>
<p>Madrit is the capital of Spain.</p>
</div>

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

</body>
</html>

Output:

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

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: green
  ;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

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: lightblue;
  color: green;
  padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

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

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Output:

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

Style elements with the class name “city”, also style elements with the class name “main”:

<!DOCTYPE html>
<html>
<style>
.city {
  background-color: lightblue;
  color: green;
  padding: 10px;
} 

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

<h2>Multiple Classes</h2>
<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

</body>
</html>

Output:

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

<!DOCTYPE html>
<html>
<style>
.city {
  background-color: lightblue;
  color: green;
  padding: 10px;
} 
</style>
<body>

<h2>Same Class, Different Tag</h2>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

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

</body>
</html>

Output:

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 “city”:

<!DOCTYPE html>
<html>
<body>

<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>

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

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

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

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

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

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

How to create 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 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. 

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="1.jpg">
    <img src="1.jpg" alt="1" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="2.jpg">
    <img src="2.jpg" alt="2" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="3.jpg">
    <img src="3.jpg" alt="3" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="4.jpg">
    <img src="4.jpg" alt="4" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

Output:

II. Create a tabbed gallery:

Step 1: Add HTML

<!-- The grid: four columns -->
<div class="row">
  <div class="column">
    <img src="1.jpg" alt="1" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="2.jpg" alt="2" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="3.jpg" alt="3" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="4.jpg" alt="4" onclick="myFunction(this);">
  </div>
</div>

<!-- The expanding image container -->
<div class="container">
  <!-- Close the image -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <!-- Expanded image -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text -->
  <div id="imgtext"></div>
</div>

Step 2: Add CSS

Create four columns and style the images.  

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; }

.column img:hover {
  opacity: 1;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;}

Step 3: Add JavaScript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

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

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>
</head>
<body>

<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="1" alt="1" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="2.jpg" alt="2" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="3.jpg" alt="3" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="4.jpg" alt="4" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

<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>

</body>

Output (Click on your image to expand it) :

III. Responsive Image Gallery

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="1.jpg">
      <img src="1.jpg" alt="1" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="2.jpg">
      <img src="2.jpg" alt="2" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="3.jpg">
      <img src="3.jpg" alt="3" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="4.jpg">
      <img src="4.jpg" alt="4" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

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

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>

</div>

Output:

Enjoy coding!

Categories
CSS HTML 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.

Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property.

Example 1: Basic Scroll Box

<div style="height:150px;width:150px;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. 
</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 2: Colored Scroll Box

<div style="height:150px;width:150px;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..</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 3: Scroll Box Borders

<div style="height:150px;width:150px;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:140px;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!

Categories
HTML Web development

HTML Attributes

Today I am posting the short note about HTML Attributes, which I was mentioning them a few times in my previous posts so far. To go further with HTML code and making our website more functional, we need to understand what the HTML attribute is.

We know now what is HTML tag, so 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 projecting your website:

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

1. Href attribute

Below 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 web site that we’re linking to.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<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:

2. Style attribute

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

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:

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:

There are many different attributes in HTML like alt, disabled, id, scr..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 the 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.


scr- specifies the URL (website address) for an image. 

See you soon 🙂

Enjoy coding!

Categories
HTML 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 JavaSript but you can create at home now 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
Do you like this gif? Check more gifs in the store.

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

Websites display contents in columns (like in newspaper):

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> Definesa 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:

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 HTML document CSS code to create 3 columns. If you completely do not know anything about CSS do not worry, I will try to post in the next few days tutorial about CSS too. Today you can just use ready code with columns. 

As you can see below, I used the internal method to insert code CSS to the file (by using a <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: green;
    }
    #second-col {
      width: 40%;
      background: yellow;
    }
    #third-col {
      width: 30%;
      background: red;
    }
    @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: 

Hope it helped you to understand more HTML Layout and you are ready now to start creating your own amazing layout. You can start with this what I created today and modify in your own original way. 

Enjoy coding!

Categories
HTML Web development

HTML Basic

Today let’s concentrate on HTML. HTML is not a programming language. It is a basic markup language for Web pages. With HTML you can create your own website but before you write any code you should decide on HTML editor (for example Notepad++, CoffeCup, NetBeans, Kompozer, etc.) or you can use to write simple text editors like Notepad (PC), or TextEdit (Mac). I have chosen the TextEdit, and personally, I think it is a very good choice for very beginners.

Do you like this gif? Check more gifs in the store.

Once you have decided an HTML editor you are ready to begin creating an own page. Start by creating a file named “index.htm” (it will be your main page of a website). 


Once you have created the “index.htm” file and it is open in your HTML editor insert code below into your page.

<!DOCTYPE html>
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
     You can write something here.
  </body>
</html>

All HTML documents need to have a doctype declared. For HTML5 documents we will use <!DOCTYPE html>. It has to appear once and should be at the top of your document.


Next up in the HTML document is <html> element. The document should starts with <html> and ends with </html>. The visible part of the document is between <body> and </body>.

Open saved HTML file (double click on the file) in your browser (Safari, Chrome, Firefox, etc.) The browser doesn’t display HTML tags but uses them to determine how to display your document. What you can see in the picture below.

Writing HTML documents is pretty much-writing tags, attributes, and content. What is then the difference between tag and attribute?


Tags and attributes are basic of the HTML. They work together but featuring different functions. 


Tags begin with the less-than (<) and end with greater-than (>). These symbols are called “angle brackets”. Tags must be opened <tag> and closed </tag> with the element information such as a title or different text between the tags.

For example <h1>This is a header.</h1>
                    <p> This is a paragraph.</p>

To see full HTML List Tags click here.

Most of the tags can have attributes. Attributes are additional values that configure the elements or adjust their behavior in various ways. 


Example. I added to our HTML document three possible values of align attribute: left, center and right. 

<!DOCTYPE html>
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
     You can write something here.
  <p align= "left">Left side</p>
  <p align= "center">Center</p>
  <p align= "right">Right</p>
  </body>
</html>

and this will display on your browser:

With this information, you can start projecting your own website, however before you will do the next step think first, how your website should look like and what it should contain. You can take a look below and plan your own HTML layout. You will enjoy it :). 

More about HTML Layout I will try to put in the next post.