Html tutorial

Next >>

Introduction

Html (Hypertext Markup Language) is the language used to create web pages. It is made up of a set of instructions added by tags. The current version is Html5.

For starters, you need a simple text editor, such as Notepad or Textpad. I recommend Textpad because it has more features.


Html editor

After typing the html code and saving the page with the .html extension, you can see the result in the browser by clicking> View and then> In Web Browser. A browser is an application used to display web pages (extension files: html, php, asp, jsp). The most popular browsers are: Google Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari.


Html editor

The minimum structure of a web page is the following:


<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
Content of the web page ...
</body>
</html>


Html minimal

A html page starts with a header containing information about the Html version (in our case, Html5):

<!DOCTYPE html>

Another instruction that follows the header refers to the direction of the text display (left to right or right to left) and to the language used. Basically, the html page starts with the <html> and ends with </html>:

<html dir="ltr" lang="en">

The following section, which starts with <head> and ends with </head>, is a container for the elements it contains. The browser does not display anything in the <head> section.
Using the <meta charset = "UTF-8" >, the browser will be able to display almost any character or symbol in the world. Html5 only uses UTF-8 (Unicode).
This coding system is the follow-up of the 128-character ASCII code and 256-character ISO-8859-1 code (used by Html4).

The following section, which starts with <body> and ends with </body>, is the body of the page. The items in this section: images, text, media, will be displayed in the browser.


Html <head> section

In this section, place the items: <title>, <meta>, <style>, <link>, <script>, <base>
The title of the page is placed between the <title> and </title>, as we have shown above.
Between the <meta> and </meta>, there are meta data or meta elements that have information about the page description, search words, author, viewport or other data used by crawlers or browsers.
An example of <meta> instructions is shown below:


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="JWeb - free tutorials">
<meta name="keywords" content="Web design, Programming languages, Microcontrollers">
<meta name="author" content="Dan Cojocariu">
<meta name="robots" content="index, all">
</head>


Element <meta> viewport gives the browser directions how to display the viewport (the visible side of the web page) and scale it so that the page is displayed correctly in the browser, regardless of the size and resolution of the device being viewed: pc, laptop, tablet, mobile phone.
Elements <meta> description, keywords, author, robots, are used by crawlers for page indexing.
The style of displaying page components is described in the <style> from the <head> section. The result of element styling can be seen in the <body> section, in the following figure:


Html style

In the <link> tag, from the <head> section, it's not about links to other webpages, but about links to some files the browser will use to display the web page correctly.
Example elements <link>:


<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png" type="image/x-icon">


In the first case, the style of web page elements is described in an external file called style.css.
In the second case, a link to a small image called favicon (favorite icon), which may have the extension ico, png or gif, is created and will be shown to the left of the page title as in the following figure:


Favicon Html

In the <script> tag, from the <head> section, it indicates the location of an external javascript that will be used by the browser in the webpage display.
In our case the javascript file named jquery.js is called. The correct code is:


<script src="jquery.js"></script>


In the <base> tag, from the <head> section, it will specify a URL (Universal Resource Locator), which will be the target of any link on the page to an image.
So if the images in the site are in the path: https://www.jweb.ro/img/ and if we specify:


<base href="https://www.jweb.ro/img/" target="_blank">


then when displaying the "test.jpg" image, we will not write:


<img src="https://www.jweb.ro/img/test.jpg">


but only:


<img src="test.jpg">:


Html <body> section

It represents the body of the web page and all the elements contained are displayed in the browser.


Html background:

The background of a web page can be a color or an image. For a color we will have:


Bg color Html

For a background image, we will have:


<body background="photo.jpg">

However, Html5 recommends using the Css style to insert the background image as follows:


Bg image Html

Html <hr> element:

<hr> is a horizontal rule that separates certain sections of the web page. In the Css section we will see how to change its style: (length, thickness, color, image). A simple <hr> rule is inserted as follows:


Hr Html

Html <h1>, ... , <h6> (headings):

These elements are predefined text sizes (fonts). These are:


h1 : 32px (2em)
h2 : 24px (1.5em)
h3 : 20.8px (1.3em)
h4 : 16px (1em)
h5 : 12.8px (0.8em)
h6 : 11.2px (0.7em)


Headings Html

However, these elements can be applied with a Css style to become more elegant. E.g:


Headings Html

Html paragraph element: <p>

It ranges between the <p> and </p> and defines a new line of text. And the paragraph can be modified using styles:


Html paragraph

Html font element: <font>

Describes the characteristics of the text used: font family, size, and color.


Html font

Also, a text can be formatted using other tags as well:


Html text formatted

You can use a compact text block to insert a quote using the <blockquote> statement as follows:


Html blockquote

Also for text formatting is used <pre> tag. This is used to make the text displayed in the browser the same as the one in the <pre> and </pre> including spaces and line breaks: Pre tag Html

In Html, a space is normally entered using the &nbsp; , and the <br> tag is used to move to a new line:


Br tag Html

In the source code of the web page, comments can also be included, which help to better understand the code or delimit some code blocks. These comments are not displayed in the browser and they are between the characters: <! -- and -- >:


Html comment

Html links

Links are used to navigate from one webpage to another. They use the <a> tag as follows:


<a href="https://www.jweb.ro/test.html">Text link</a>


The after-href address is the address of the page that will be displayed when the link is accessed. Each link has a target attribute, which tells the browser how to display the requested page.
This attribute can be:
_blank - when the linked page is opened in a new window;
_self - when the linked page is opened in the same window;
_parent - when the linked page is opened in the parent frame;
_top - when the linked page is opened in the full body of the window;
framename - when the linked page is opened in the specified <iframe>
Also, a link can be accessed through an image.
The visible text for a link is normally underlined, but applying a style, it can easily change its features.


Html link

Using images in Html

The insertion of an image is done using the instruction:


<img src="test.jpg">


To set the image size, set the width and height as follows:


<img src="test.jpg" width="280px" height="130px">


To set the image positioning from the top and left margin, we will set vspace and hspace:


Html images

In any inserted image, a short description must be set within the <alt> element, which will be displayed if the image does not exist or is not found, and a label within the <title> item that will be displayed when the mouse overlaps image (tooltip).


Html form element

This element, defined by the <form> and </form> host the <input> elements, which are inputs from the user. These can be: text fields, text areas, radio buttons, check boxes, buttons:


Html form

The elements of these forms, after completion, will be sent to the web server. The most important attributes of forms are: action, target and method.
The action indicates the process that will be performed when you submit the form (form) to the web server.
The target will indicate in which type of window the result of the process execution is presented.
The method, which can be get (request data from the server) or post (sends data to the server):


Html forms

In our case, when you submit the form, by pressing the form button, the test.php file will run on the web server and the result will be displayed in a new window.


Html lists

Lists are defined by the <ul> and <li> so:


Html lists

Html <select> tag

They use the <select> to select an item from a drop-down list:


Html select tag

Html <iframe> element

It is used to embed a web page within another web page as follows:


<iframe src="test.html" width="200" height="100"></iframe>


Html iframe element

Html <frame> element

A web page can be divided into two or more frames:


Html frame element

Html colors

In html, the colors are defined by: color name, color represented by RGB, or color represented in hexadecimal (HEX). You can also use HSL colors, RGBA colors or HSLA colors.
If we use color names, they will be: red, green, yellow, blue, brown, ...
The RGB colors (red, green, blue) define the intensity of the 3 shades between 0 and 255. The white color is: rgb (255,255,255) and the black color is: rgb (0,0,0).
HEX colors represent the hexadecimal values: #rrggbb (eg # 0000FF is displayed as blue).
HSL (hue, saturation, lightness) colors use values ??in percent (e.g., hsl (0, 80%, 45%)).
RGBA colors (red, green, blue, alpha). Alpha is used for transparency and has a value between 0.0 and 1.0.
HSLA colors (hue, saturation, lightness, alpha). Example: hsla (7, 5%, 48%, 0.3).


Html colors

Html tables

Use the <table> tag.
Element <tr> is used for lines, the <th> for columns and element <td> for the data in the table.


Html tables

Html blocks

Html blocks include the <div> and <span> elements.
Element <div> is used as a container for other items and starts a new line on the web page.


Html div element

Another example of using <div>:


Html div element

Element <span> is used to impose a certain style on a piece of text, and continues the same line of text (does not start a new line).


Html span element

In the tutorial about Css, we will use the id and class attributes to select the <div> and <span> element.


Html5 canvas element

Element <canvas> is used to insert graphics into the web page using javascripts. It is used as follows:


<canvas id="testcanvas" width="200" height="100"></canvas>


Html canvas element

Html special characters

Below are some of the more commonly used special characters:


Html special characters

Html multimedia

Multimedia means music, video, movies and animations. Multimedia items are stored in files with different extensions, such as: .mp3, .mp4, .wav, .mpeg, .swf, .svg.
Audio files can be inserted and played back on web pages using the & lt; audio & gt; so:


<audio src="sound.mp3" controls="true" autoplay="true"></audio>


Html audio

Video files can be inserted and rendered in webpages using <video> so:


<video width="240" height="200" controls><source src="movie.mp4" type="movie/mp4"></video>


Html video

Html templates

Templates are predefined web page layout sketches. For example, we can use the <iframe> to divide the main web page into 3 sections, each embedding another html page.


Html layout

We can also create a template using the <div> and <span>:


Html layout

And the result in the browser will be:


Html layout

Protect Html Pages

Simple protection can be achieved by disabling the right click and associated menus (contextmenu).
This way, you can not display the source code of the page, you can not select text for copying, you can not download the images on the page. These are done using the instruction:


<body oncontextmenu="return false">


Next >>

Visit my websites:

https://www.jwebsaints.com
https://www.jwebplants.com