Categories
CSS Web development

CSS Opacity / Transparency

The opacity CSS property sets the opacity of an element. The opacity property can take a value from 0.0 to 1.0 (default 1).

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: red;
  opacity: 0.5;
  filter: Alpha(opacity=50); /* IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The following div element's opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:</p>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</div>

</body>
</html>

Output:

When using opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you don’t want to apply opacity to the child elements, use RGBA color values (more about colors in HTML/CSS you can here and here.)

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
  filter: alpha(opacity=10); /* For IE8 and earlier */
}

div.second {
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
}

div.third {
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Output:

Example 3, with RGBA colors value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

</body>

Output:

The opacity property is often used with the : hover selector to change opacity on mouse-over:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>

Output:

To create the text in transparent box, first, create a <div> element (class=”background”) with a background image, and a border. Then we create another <div> element (class=”transbox”) inside the first <div>.  The <div class=”transbox”> have a background colour, and a border – the div is transparent. Inside the transparent <div>, we can add some text inside a <p> element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(14.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Float Property

Float is a CSS positioning property. The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. 

The float property can have one of the following values:

Left (the element floats to the left of its container).
Right (the element floats to the right of its container).
None (the element does not float).
Inherit (the element inherits the float value of its parent).

Example, let an image float to the right:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<h1>The float Property</h1>

<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>

<p><img src="picture.jpg" alt="banner" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>

Output:

The clear property can have one of the following values:

None (allows floating elements on both sides).Left (no floating elements allowed on the left side). Right (no floating elements allowed on the right side). Both (no floating elements allowed on either the right or the left side).Inherit (the element inherits the clear value of its parent). 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>

Output:

You can use float property to create a homepage with a header, footer, left content and main content:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.header, .footer {
  background-color: pink;
  color: green;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

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

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>

Output:

Hope it helps 🙂

Enjoy coding!

Categories
HTML Web development

HTML Text Formatting And Styles

HTML provides the ability for formatting text just like you can do in MS Word, or any other text editing software.

Formatting elements were designed to display special types of text:

bold <b>

italic <i>

underline <ins>

marked <mark>

superscript <sup>

subscript <sub>

small <small>

deleted <del>

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p><b>The text can be bolded.</b> </p>
<p><i>The text can be italic.</i></p>
<p><ins>The text can  be underlined</ins></p>
<p><mark>The text can be highlighted</mark></p>

<p>The normal text
<sup>This text will be super scripted</sup>
The normal again</p>

<p>The normal text
<sub> The text can be subscripted </sub></p>
<p>Normal Text <small> Smal Text </small></p>
<p><del> The text can be deleted</del></p>

</body>

</html> 

Output:

What else you can do with the text?

HTML Styles

Setting the style of the HTML element can be done with the style attribute (more about style attribute you can find in my previous post). 

a) Changing colour (to see more about HTML colours click here and here.) 

b) Changing font family (the CSS font-family property specifies the font for an element. The HTML <font> tag is not supported in HTML5. You should use CSS instead.)

c) Changing the text size.

d) Changing the text position.

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p style="color:blue">The text can be blue. </p>

<p style="font-family:Arial"> The text can be in Arial </p>

<p style="font-size: 55"> The size can be changed by style tag. </p>

<p style="text-align:center">

This position is changed by style tag.</p>

</body>
</html> 

Output:

Enjoy coding!

Categories
HTML Web development

HTML Colours

The colours are applied to an HTML tag/ element using CSS. You can pick which part of the element to apply colour to (background color, text color, border color and more). 

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

1. Colour names

In HTML, a color can be specified by using a color name (to see more HTML colour names click here.) 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Coral;">Coral</h1>
<h1 style="background-color:Crimson;">Crimson</h1>
<h1 style="background-color:Cyan;">Cyan</h1>
<h1 style="background-color:Skyblue;">Skyblue</h1>
<h1 style="background-color:Indigo;">Indigo</h1>
<h1 style="background-color:LawnGreen;">LawnGreen</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:DarkCyan;">DarkCyan</h1>

</body>
</html>

Output:

2. Background colour

You can also set the background colour for HTML elements. 

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:mistyrose;">Hi, how are you ?</h1>

<p style="background-color:lightgreen;">
Hope is everything good and you'll learn a lot :D

</p>

</body>
</html>

Output:

3. Text colour 

You can set the colour of the text as well. 

Example:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:salmon;">Hi, how are you?</h3>

<p style="color:sienna;">Hope is everything good and you'll learn a lot :D.</p>

<p style="color:plum;">Did you try to change a text colour? Try :) </p>

</body>
</html>

Output:

4. Border colors 

You can set the color of the borders.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid salmon;">Hi, how are you?</h1>

<h1 style="border: 2px solid palegreen;">Hi, how are you?</h1>

<h1 style="border: 2px solid powderblue;">Hi, how are you?</h1>

</body>
</html>

Output:

5. Colour Values

In HTML, colours can be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values as well:

Same as color name “Olive”:

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Olive":</p>

<h1 style="background-color:rgb(128, 128, 0);">rgb(128, 128, 0)</h1>
<h1 style="background-color:#808000;">#808000</h1>
<h1 style="background-color:hsl(60, 100%, 25.1%);">hsl(60, 100%, 25.1%)</h1>

<p>Same as color name "Olive", but 50% transparent:</p>
<h1 style="background-color:rgba(128, 128, 0, 0.5);">rgba(128, 128, 0, 0.5)</h1>
<h1 style="background-color:hsla(60, 100%, 25.1%, 0.5);">hsla(60, 100%, 25.1%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Output:

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

HTML Basic Elements part.1

To complement a previous post today we will get to know in detail of HTML basic elements, which will make it easier planning your own website. As we know now, all HTML documents consist of nested HTML elements and, the most common used by beginners elements of an HTML page are:

1) Headings <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

2) Paragraph <p>

3) Horizontal rule <hr>

4) HTML Links <a>

5) HTML List <ul>,<ol>,<dl>

1) Headings

There are six different types of text headers. It’s important to use headings to show the website structure. <h1> should be used as a main heading, followed by <h2> headings, and then the less important <h3>,<h4>,<h5>,<h6>. 

Example:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Once you inserted this code in your HTML editor, you will see in the browser this:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Importance of Headings: Search engines use headings for indexing the structure and content of the website.

2) Paragraph

The HTML <p> element defines a paragraph. So, anything mentioned within <p> and </p> is treated as a paragraph. 

Example:

<!DOCTYPE html>
<html>
<body>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>

</body>
</html>

You can see these paragraphs in your browser as:

3) Horizontal rule

HTML tag <hr> is used to declare a thematic break for content. The <hr> tag is empty, so it does not require an and tag.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>HR Tag in HTML</title>
    </head>
    <body>
        <p>The horizontal rule tag below.</p>
        <hr>
        <p>The horizontal rule tag above.</p>
    </body>
</html>  

You can see it the browser as:

4) HTML Links

The tag <a> (anchor element), is used to create a hyperlink to another website, or another location within the same website. The hyperlink created by the tag <a> can be applied to the text, image or other HTML content nested between the opening and closing <a> tags. 

The link’s destination is specified in the href attribute. 

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.lenastanley.com">This is a link.Click here!</a>

</body>
</html>

Output:

5) HTML Lists 

Lists are used to group related pieces of information (people’s names, a shopping list, or things to do). There are three lists types in HTML:

a) An unordered (bulleted) list <ul> is used to group related pieces of information in no particular order. 

b) An ordered list <ol> is used to group related pieces of information in a particular order. 

c) A definition list <dl> is used to represents the description list. This tag is used with <dt> tag and <dd> tag. 

Example of an unordered list and an ordered list:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List</h2>

<ul>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>

<h2>This is an Ordered HTML List</h2>

<ol>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

a) An unordered HTML list starts with the <ul> tag, and each list item starts with the <li> tag. In case of an unordered HTML list, you can change the bullet (small black circles) to one of several default styles, use an image, or display the list without bullets.

The CSS list-style-type property is used to define the style of the list item marker: disc, circle, square or none. 

Example – Circle bullets:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List with Circle Bullets</h2>

<ul style="list-style-type:circle">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>
</body>
</html>

Output:

b) An ordered HTML list starts with <ol> tag, and each list item starts with the <li> tag. An ordered HTML list can be displayed with several sequencing options. The default in most browsers is decimal numbers, but also are available:

* Letters 
type=”a” lowercase letters (a,b,c…)
type=”A” uppercase letters (A,B,C…)

* Numbers
type=”1″ numbers (1,2,3…)
type=”i” lowercase Roman numerals (i,ii,iii…)
type=”I” uppercase Roman numerals (I,II,III…)

Example – Uppercase letters:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Ordered HTML List with Uppercase letters</h2>

<ol type="A">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

c) Thy <dl> tag is used to represents the definition list (in HTML4.1) or the description list (in HTML5). This tag is used with <dt> (a term name) tag and <dd> (a description of each term) tag.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>This is A Description HTML List</h2>

<dl>
  <dt>Sugar</dt>
  <dd>- 500 gr</dd>
  <dt>Milk</dt>
  <dd>- 1 litre </dd>
</dl>

</body>
</html> 

Output:

In the next post, I will try to add a description of the rest basic HTML elements (like element div, span, images, and button). 


As a bonus, I am posting an example of a horizontal list styled with CSS, which you can use in your layout to create a navigation section.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: red;
}

li {
  float: left;
}

li a {
  display: block;
  color: green;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #333333;
}
</style>
</head>
<body>

<h2>Your website Menu</h2>
<p>You can create your own a navigation menu with CSS.</p>

<ul>
  <li><a href="#home">Landing page</a></li>
  <li><a href="#news">About author</a></li>
  <li><a href="#contact">Informations</a></li>
  <li><a href="#about">Contact</a></li>
</ul>

</body>

Output:

That’s all for today.
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. 

Categories
JavaScript Web development

JavaScript Output

JavaScript Output defines the ways to display the output of a given code. JavaScript can “display” data in different ways:  

a) Writing into an HTML element, using innerHTML.

b) Writing into the HTML output using the document.write()

c) Writing into an alert box, using a window.alert().

d) Writing into the browser console, using console.log().

a) Using innerHTML

To access an HTML element, JavaScript can use the document.getElementbyId(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html> 

Output:

Changing the innerHTML property of an HTML element is a common way to display data in HTML.

b) Using document.write()

For testing purposes, it is convenient to use the document.write():

Example:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 

Output:

The document.write() method should only be used for testing. 

c) Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 

Output:

d) Using console.log()

For debugging purposes, you can use the console.log() method to display data: 

<!DOCTYPE html>
<html>
<body>

<h2>Activate debugging with F12</h2>

<p>Select "Console" in the debugger menu. Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html> 

Output:

Enjoy!

Categories
JavaScript Web development

How to add JavaScript to HTML?

In some of my previous posts started appearing JavaScript, so why today I would like to explain more how to nest the code into HTML. You will learn more about JavaSript in later chapters, but today in a short introduction to post you need to know what JavaScript is and what JavaScript do. JavaScript is the programming language for the web and can update and change both HTML and CSS.

You can place any number of scripts in your HTML document. You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want Java Script to load. 
In this example, a JavaScript function is placed in <head> section of HTML page. The function is invoked (called) when a button is clicked: 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html> 

Output:

Hope you find it helpful.Enjoy coding!

Categories
CSS HTML

Starting with HTML and CSS

My journey to becoming a web developer started from revising and learning HTML and CSS. 

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

It went smoothly, as I mentioned in one of my previous post I was attending in HTML & CSS course a few years ago and also I was using these languages at work from a graphic designer point of interest. 
HTML and CSS are considered the easiest entry points into the coding, and there are mainly useful for developing basic websites, however in my opinion HTML and CSS is definitely the place to start for beginners learning to code. 

What is HTML and what is CSS?

Let’s start with a short definition of HTML and CSS.  


HTML (HyperText Markup Language) is it authoring language used to write Web Pages. 


CSS (Cascading Style Sheet) is used to define styles for Web Pages, including the design, layout, and variations of display for different devices. 


Once you have practiced for a while of HTML, you will notice quickly that you will need to learn CSS to style it (for example using fonts, colors on the page). Without using CSS your web page will look not really good with the default HTML styling, so CSS is the obligatory next step after HTML. 


I prepared a simple image, which can show you how the CSS works on HTML websites. 

I hope it will help you to understand more of HTML and CSS and you will like it. 


Enjoy coding!