[clique aqui para português]

What is HTML?

HTML is the acronym for Hypertext Markup Language (HyperText Markup Language). This means that using HTML codes you will be able to visually format (mark) the content of a page.

History of HTML

In 1945, Vannevar Bush proposed in an article the idea for an information storage system which he called MEMEX. Bush devised a machine that would have the capacity to store textual and graphic information, information with the ability to be linked through dynamic links or links to any other information.

Until then, the term “hypertext” did not exist. It was in 1965 that Ted Nelson, in an article published in the book “Literary Machines”, coined this term. The first hypertext-based system was developed in 1967 by a team led by Andries van Dam at “Brown University”. The research was coordinated by IBM and the first hypertext implementation, Hypertext Editing System, was performed on an IBM / 360 mainframe. In 1987 Bill Atkinson created Hypercard, a hypertext system designed to facilitate the creation of hypertext applications. Among its implementations were bitmap graphics, form fields, script and quick text search.

In 1989, at CERN laboratories, Tim Berners-Lee and Robert Caillau launched the ideas for a system that could be accessible by different computer platforms, a reality that existed at that time at CERN. Then the conception of HTML was born, as well as its use together with the HTTP protocol.

The language was defined in formal specifications in the 1990s, inspired by Tim Berners-Lee’s original proposals.

The initial purpose was to make it possible to access and exchange information and research documentation between scientists from different universities. The initial project became a success never imagined by Tim Berners-Lee. In inventing HTML he laid the foundation for the Internet as we know it today.

Tim Berners-Lee created the original HTML (and other associated protocols like HTTP) on a NeXTcube station using the NeXTSTEP development environment. At the time, language was not a specification, but a collection of tools to solve Tim’s problem: the communication and dissemination of research between him and his group of colleagues. His solution, combined with the then emerging public Internet (which would become the Internet) has gained worldwide attention.

Creating an HTML file

A website is basically made up of HTML files. Each page of the website is usually an HTML page, for example if you access a website and click on a link you will be redirected to another HTML file, and if a website has 10 pages then it has 10 HTML files.

How to create an HTML file?

It’s very simple. You can create an HTML file using Windows Notepad or MAC, or Linux TextEdit. See the step by step:

1. Open the notepad and click on the top menu “File”.
2. In the “File” menu, click on the “Save As” option.
3. Save your file with the .html extension. For example: site.html

You can give any name to your file, however it must contain the .html extension at the end.

Index file

It is common to find files with the name index.html, the name index is used to be the first page of the site as most servers search the index file by default.

In Portuguese index means index, or summary, because normally on the home page we have the links to the internal pages. This is where we start browsing pages.

Tools

To work with html you need two important tools, the first is the browser (browser) because it will display the page you are creating and the second is an editor, although we can work with a standard file editor (notepad and etc) the better the tool the faster we create our page.

Browsers:

• Chrome;
• Firefox;
• Microsoft Edge;
• Opera;
• Internet Explorer;
• Safari;
• etc…

Editor:

• Notepad++;
• Sublime Text;
• Atom;
• Brackets;
• CodeAnywhere;
• Visual Studio Code;
• DreamWeaver;
• etc…

TAG

Every HTML document has bookmarks (in English: tags), elements in angle brackets (chevron) (< and >); these elements are the language formatting commands.

Most tags have their closing counterpart:

<h1>Olá</h1>

When we open an HTML file in the browser, it presents us with the content inserted within this file. What the browser does is read the code that is written inside the HTML file, interpret that content and render (show the result visually) on the screen. When it comes to text only, the browser will simply render the same text on the screen. However, in an HTML file we can give the browser some commands to make visual changes to the content we put there. These commands are called TAGs.

We usually use TAGs in pairs. The first tag we call the opening tag. The opening TAG is the TAG that connects the remote. From there, the command starts to work and only stops when we write the closing TAG. Note that we indicate the closing TAG with a forward slash (/) after the less than sign (<), thus </command>. In other words, the closing TAG shuts down the command, causing it to stop working.

<startcomand></finishcomand>
<strong>Text in bold</strong> text normal

Attributes

Attributes are used to customize tags. What does that mean? Somehow, someday you want to resize an image or table or change the font color. All of this is possible with the help of attributes.

Most tags have their own attributes.

Ex.:

<img src="image.jpg" alt="My image" />

Comments

Many markup, style or programming languages have a command that allows comments to be made within the code, without it being rendered in the browser or other rendering platform. and html is also possible.

Ex.:

<!-- your comments go here -->

DOCTYPE

Doctype is the DTD of the html file, Document Type Definition

All HTML documents must begin with a DTD declaration. The declaration is not an HTML tag. It is “information” for the browser about what type of document to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html>

Deprecated HTML versions

Version 2.0–1995

The first version that emerged after the creation of pure HTML was 2.0. Its objective was to formalize all the characteristics of HTML that were already used. Its appearance took place at the first worldwide event on the Web, called the World Wide Web Conference.

Version 3.2–1997

In addition to fixing compatibility issues in version 2.0, this version of HTML provided the creation of tables, applets and floating text around images.

Version 4.01–1999

Its feature was to provide backward compatibility, but also add support for multimedia options, style sheets and improve programming practices.

XHTML 1.0 Strict is the same as HTML 4.01 Strict, but following the rules of XML syntax.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Title</title> 
 </head> 
 <body>  
  <h1> Hello World!</h1> 
 </body>
</html>

HTML version 5–2014

The latest version of HTML was developed to enhance the World Wide Web experience for developers and end users.

<html> 
 <head>  
  <title>Título</title> 
 </head> 
 <body></body>
</html>

HTML

The HTML element (or HTML root element) represents the root of an HTML or XHTML document. All other elements must be descendants of that element.

HEAD

The <head> element provides the browser with very useful information. You can enter other codes like JavaScript or CSS, define a title, etc.

META

The HTML <meta> element defines any metadata information that cannot be defined by other HTML elements.

<!-- No HTML5 -->
<meta charset="utf-8">
<!-- redirect after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

TITLE

The HTML <title> element defines the document’s title, shown in a browser’s title bar or on the page tab. It can contain only text and any markings contained in the text are not interpreted.

<title>Title awesome</title>

BODY

The <body> element is what defines the beginning of the content of the page itself (titles, paragraphs, photos, music and any other content).

Block and Inline Elements

All HTML elements can be separated into two groups, in terms of CSS visual behavior: block elements and inline elements. Being block or in line changes the visual behavior of the element, in addition to other characteristics. Although we can change the display mode of each element with CSS, each tag by default belongs to one or the other group.

Block elements occupy all the available horizontal space and start a new line in the document. New elements will start on the next free line.

<div>
<hr>
<p>
...

Inline elements occupy only the space used. New elements will start next.

<span>
<strong>
<em>
...

Titles (h1 — h6)

There are 6 different types of html titles classified by font size and range from <h1> to <h6>:

<h1>title 1</h1>
<h2>title 2</h2>
<h3>title 3</h3>
<h4>title 4</h4>
<h5>title 5</h5>
<h6>title 6</h6>

Anchor Element

The HTML <a> element (or anchor element), with the href attribute, a hyperlink is created on web pages, files, email addresses, links on the same page or URL addresses. The content within each <a> will need to indicate the destination of the link.

<a href="https://www.mozilla.com">Mozilla</a>

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊