Categories
CSS Web development

CSS Opacity / Transparency

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

CSS opacity property

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #e76f51;
  opacity: 0.5;
}
</style>
</head>
<body>


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

The following div element’s opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

When using the 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: #2a9d8f;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<p>Note: 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:

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

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1 (default)

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>

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

Output:

10% opacity

30% opacity

60% opacity

default

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

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/cycling-animation.jpg" alt="bike" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" alt="computer" width="170" height="100">

</body>
</html>

Output:

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

bike cake computer

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

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:

CSS opacity property

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. 

CSS Float Property

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

CSS Float Property

Example (let an image float to the right):

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<h1>CSS 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="https://lenadesign.org/wp-content/uploads/2019/12/untitled9.gif?w=640 alt="float-property" style="width:320px;height:220px;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>
</html>

Output:

CSS Float Property

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

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.


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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.e-1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #2a9d8f;
}

.e-2 {
  border: 1px solid #e9c46a;
}

.e-3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #2a9d8f;
}

.e-4 {
  border: 1px solid #e9c46a;
  clear: left;
}
</style>
</head>
<body>

<h4>Without clear</h4>
<div class="e-1">example-1</div>
<div class="e-2">example-2 - Notice that example-2 is after example-1 in the HTML code. However, since example-1 floats to the left, the text in example-2 flows around example-1.</div>
<br><br>

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

</body>
</html>

Output:

Without clear
example-1
example-2 – Notice that example-2 is after example-1 in the HTML code. However, since example-1 floats to the left, the text in example-2 flows around example-1.


With clear
example-3
example-4 – Here, clear: left; moves example-4 down below the floating example-3. The value “left” clears elements floated to the left. You can also clear “right” and “both”.


You can use the CSS 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: #2a9d8f;
  color: white;
  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: #e76f51;
  color: #ffffff;
}

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

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

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 5</li>
    </ul>
  </div>

  <div class="column content">
    <h1>Text</h1>
    <p>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.</p>
  </div>
</div>

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

</body>
</html>

Output:

Header

Text

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.

Footer Text

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.

HTML Text Formatting

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 bold.</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:

HTML Text Formatting

The text can be bold.

The text can be italic.

The text can be underlined.

The text can be highlighted.

The normal text This text will be super scripted The normal again

The normal text The text can be subscripted

Normal Text Smal Text

The text can be deleted


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:

HTML Text Formatting

The text can be blue.

The text can be in Arial.

The size can be changed by style tag.

This position is changed by style tag.


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.

HTML Colors

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:

HTML Colors

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:

HTML Colors

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:

HTML Colors

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:

HTML Colors

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:

HTML Colors

Enjoy coding!

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

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!

Categories
HTML Web development

HTML Basic Elements part.1

To complement a previous post today we will get to know in detail HTML basic elements, which will make it easier to plan 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>

HTML Elements

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:

HTML Basic Elements

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:

HTML Elements

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:

HTML Basic Elements

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:

HTML Basics

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 you can use:

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

HTML Basic Elements

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:

HTML Basic Elements

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: #e76f51;
}

li {
  float: left;
}

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

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

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

Output:

Menu

You can create your own a navigation menu with CSS:


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

HTML basic

Once you have decided on 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>.

HTML Basics

Open a 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.

HTML Basic

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:

HTML Step by Step

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 :). 

HTML basic
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().

JavaScript output

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>

<h4>This is an HTML heading.</h4>
<p>This is a paragraph.</p>

<p id="js-1"></p>

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

</body>
</html> 

Output:

This is an HTML heading.

This is a paragraph.


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>

<h4>This is an HTML heading</h4>
<p>This is a paragraph.</p>

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

</body>
</html>    

Output:

This is an HTML heading

This is a paragraph.

11

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

<h4>This is an HTML heading </h4>
<p>This is a paragraph.</p>

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

</body>
</html> 

Output:

JavaScript Output

d) Using console.log()

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

<!DOCTYPE html>
<html>
<body>

<h4>Press F12</h4>

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

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

</body>
</html> 

Output:

JavaScript 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 JavaScript in later chapters, but today in a short introduction to the post you need to know what JavaScript is and what JavaScript can do.

How to add JavaScript to HTML?

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("example").innerHTML = "Text changed.";
}
</script>
</head>
<body>

<h4>JavaScript in the Head Section</h4>

<p id="example">Click on the button to change the text.</p>

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

</body>
</html> 

Output:

JavaScript in the Head Section

Click on the button to change the text.


Hope you find it helpful.

Enjoy coding!

Read also:

JavaScript Introduction

HTML DOM

Categories
CSS HTML

Starting with HTML and CSS

What is HTML and what is CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) are two of the core technologies for building websites. HTML is the foundation of all websites. HTML defines the structure of the web page, while CSS defines its style.

html and css

Example:

HTML

<p>This is a paragraph.</p>

This is a paragraph.

HTML + CSS

<p style="color: red;">This is a paragraph.</p>

This is a paragraph.

Note: Adding the CSS to HTML, we can easily change the colour and the font (or any other property) of the paragraph.


Enjoy coding! 

Read also:

CSS Introduction

How to start coding?

What is a Web Developer?