The Hypertext Markup Language (HTML for short) is used to structure text-based contents of a web document. Not only contents are marked up in it, but also meta-information describing these contents. HTML documents also have the ability to direct to other text passages via Hyperlinks.
The end user can access stored files via the browser on the website. Upon the client's request, the web server returns the requested files. These are displayed by the client in the browser window. To enable the display, the browser must be able to read the files HTML pages. Fortunately, this is the case with all common browsers. The content and structure are defined in the individual HTML files.
Structure in HTML
The structure in HTML documents is generated by tags (<>) in the code. They can be used to create the structure, content and formatting of the digital document.
Documents that are recognized as HTML documents start with the following document type declaration: <!DOCTYPE html>. The declaration is used to tell the browser how to display the web pages correctly.
The entire content of the document is captured in the <html> and </html> elements.
The basic HTML structure consists of a body and a head. In the program, these are represented by <head>, </head> and <body>, </body>.
Elements
Headings
The structures listed below are used to display headings. The smaller the attached number, the larger the heading is displayed. In this way, a hierarchy of headings can be created. The used browser interprets the headings and displays them in a browser-specific manner, if no other specifications are available. The smallest heading is number 6.
Paragraph
The paragraph element can be used to represent a paragraph of text, or it can be used to group paragraphs of text together
Title
The title element represents the title of the document.
Tags must be closed once the content has been placed in it. This is done with / in the hashtag. The exceptions are comment tags and images. All the information the browser needs is contained within the tag itself.
info: Comments
Single-line comments are marked with //.
Multiline comments are marked with /*...*/.
Pictures
The element is used to insert an image into a document. The src attribute specifies the URL of the image to be displayed. The alt attribute provides alternate text for the image, which is displayed if the image cannot be displayed. The width and height attributes specify the dimensions of the image. Here's an example:
HTML Hyperlinks
To create a hyperlink, use the <a> tag and the href attribute. The text between the <a> and </a> tags will be displayed as the hyperlink. The href attribute is used to specify the URL of the page you want to link to. The reference can be a URL of an external page on the Internet or a file on the local end device.The target attribute is used to specify the frame or window that the link should open in. Here's an example:
This will create a hyperlink that says "Google" and links to the Google website.
Structure Websites
The HTML folder structure consists of four main folders. These main folders are:
Images
CSS
HTML
JavaScript
The Images folder can be used to store all of the images for your website. The CSS folder contains all of the stylesheets for your website. The HTML folder contains all of the HTML files for your website. The JavaScript folder contains all of the JavaScript files for your website.
However, you can determine the structure and content of the folders yourself, it only serves to keep an overview. The first or top folder, however, always serves as the start page.
This technique makes the creation of a website much easier.
Relative paths
With the help of relative paths, one can define the position of images and other elements within an HTML file relative to the current path. This means that you no longer have to define the position of images and other elements based on their absolute address in the file, but can set them relative to the current path.
The advantage of relative paths is that it is easier to edit and adapt the file without having to change the image or element addresses. It is also easier to copy and move the file without changing the image or element positions.
Example from w3words.com.
To link to the parent directory, use "...". First redefine the starting point and destination, then start describing the route.
Special Elements in HTML
The HTML <q> element represents a short quotation that is inline with the surrounding text. It is typically used to mark up short quotations within a paragraph, and should be accompanied by a citation that identifies the source of the quotation. The <q> element is intended to be used for quotations that are less than a sentence in length, and it should be used within a block of text rather than as a standalone element.
For longer quotations, you should use the <blockquote> element instead.
The <br> element should be used to indicate a line break in text.
The <li> and <ol> elements are used to create lists.
The <li> element is used to create a list item.
The <ol> element is used to create an ordered list.
The <ul> element is used to create an unordered list.
Special characters in HTML
Some characters have to be described with Meta descriptions in the code so that the computer is able to display them correctly. There are many websites that capture those special characters in Tables, one example you can find here: https://www.wolfgang-frank.eu/hc.php
