For starters, you need a simple text editor, such as Notepad or Textpad. I recommend Textpad because it has more features.
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.
The minimum structure of a web page is the following:
<html dir="ltr" lang="en">
Content of the web page ...
A html page starts with a header containing information about the Html version (in our case, Html5):
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.
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:
<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">
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:
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:
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:
It represents the body of the web page and all the elements contained are displayed in the browser.
The background of a web page can be a color or an image. For a color we will have:
For a background image, we will have:
However, Html5 recommends using the Css style to insert the background image as follows:
<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:
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)
However, these elements can be applied with a Css style to become more elegant. E.g:
It ranges between the <p> and </p> and defines a new line of text. And the paragraph can be modified using styles:
Describes the characteristics of the text used: font family, size, and color.
Also, a text can be formatted using other tags as well:
You can use a compact text block to insert a quote using the <blockquote> statement as follows:
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:
In Html, a space is normally entered using the , and the <br> tag is used to move to a new line:
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 -- >:
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.
The insertion of an image is done using the instruction:
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:
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).
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:
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):
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.
Lists are defined by the <ul> and <li> so:
They use the <select> to select an item from a drop-down list:
It is used to embed a web page within another web page as follows:
<iframe src="test.html" width="200" height="100"></iframe>
A web page can be divided into two or more frames:
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).
Use the <table> tag.
Element <tr> is used for lines, the <th> for columns and element <td> for the data in the table.
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.
Another example of using <div>:
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).
In the tutorial about Css, we will use the id and class attributes to select the <div> and <span> element.
<canvas id="testcanvas" width="200" height="100"></canvas>
Below are some of the more commonly used special characters:
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>
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>
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.
We can also create a template using the <div> and <span>:
And the result in the browser will be:
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">
Visit my websites:https://www.jwebsaints.com