Tag: Design

(7 minutes of reading)


In 1991, Tim Berners-Lee designed HTML to make sharing documents easier and faster. With the creation of the World Wide Web, HTML became a tool used by everyone and everything.

As a result of the growth of HTML, CSS emerged, because the more HTML was used, the more developers used their creativity to make pages beautiful and stylish. However, all this aesthetic part was written in the same file as the structural part, making them gigantic and increasingly difficult to understand. Thus, in 1995, CSS was created to deal with the aesthetic part of the page, separately from the structure, that is, the role of HTML.


HTML

Its name comes from the English Hyper Text Markup Language, which means that HTML is not considered a programming language.

Imagine a web page, like the one on our blog that you are reading now. It is possible to notice that there are several separate elements, such as header, title, paragraphs, images, and many others. The entire organization of these elements is done by HTML. It is used to create the entire structure of the page, and, for that, it uses the famous tags to define where each type of element will be implemented.

For example, if you want to insert a paragraph on the screen, you can use the <p></p> tag for that, placing the desired text inside the element, as shown below:


<p>This is a paragraph</p>


In short, we can say that there are several tags of different structures to assemble the skeleton of the page.

HTML5 is an improved version of the original HTML standard (if you want to know more about HTML5 read this other article on our blog).

HTML5 was developed to meet the increasing demands presented by today's media, cross -device and mobile internet needs. It is an excellent tool for cross-platform mobile application development because many of its features have been adapted with consideration for access on low-powered devices, including Tablets and Smartphones.

HTML5 provides a common interface to make loading components simpler. For example, HTML5 does not require the Flash plugin because the element will run on its own.


HTML5

As stated earlier, HTML5 is the latest version of the markup language used to create websites. Although it is very similar to the previous versions, it has some new features that are super handy.

Below are the main benefits of HTML5:

- HTML5 has video and audio playback. In previous versions, developers were required to use third-party programs to play videos and audios. This ended up causing a lot of errors. HTML5 solved this problem with full support for video and audio.

- HTML5 offers offline caching, so visitors can load certain elements on a web page without an active internet connection (but they must have accessed the site before). If a visitor's internet connection is low, they can still load the main elements of the site.

Now, how is it possible to make this paragraph colored? Or change the font of the letter? That's where our next technology comes in: CSS.


CSS

Cascading style Sheet, better known as CSS, is a styling language that, like HTML, is not considered a programming language. It is responsible for separating the structural part of the application (which will be in the hands of HTML) from the aesthetic part. To use CSS, we use the following syntax:


strong {
	color: blue;
}

h1 {
	font-style : italic ;
}


The selector will be the element we are going to style (it can be a tag, a class, an identifier, etc.), the property is what we want to change (color, font-size, width, etc.) and the value is the change to be made done.

When using an HTML tag, like the one in the example above, you can style it like this so that the paragraphs are blue.


p {
color: blue;
}


One very interesting thing about CSS is that it can be written inside an HTML file, using style as a < style > element or as an attribute of some other <p style =””> element. It can also be written in a separate CSS-only file by importing it into the HTML document as follows:


<link rel =" stylesheet " href ="css_file_name.css">


It is important to point out that there is the possibility of using more than one CSS file at the same time, to style the application. Hence the word “cascade”. This allows for several different interactions, but care must be taken not to get lost and make the code confusing, always following the rules for this.


CSS3

CSS has always been an extraordinary tool, with which countless projects can be carried out easily, quickly, and efficiently. This new version, CSS3, is even simpler and has been very well accepted by web developers.

Below we list the main changes in CSS3:

- CSS3 is compatible with older versions of the language, that is, designers do not need to abandon the work they did with versions prior to CSS3. This new language can be reworked into old modules as well. However, there may be some speed issues during conversion.

- CSS3 is made up of small modules that make the application easier and simpler to use. Selectors, colors, backgrounds, borders, text effects and 2D or 3D transformations are some of the most useful modules that CSS3 offers.

- CSS3, being independent, loads much faster than its precursors. It is very compatible with all available browsers. The individual modules also help to save a lot of time during development, implementation, and end of production.


CONCLUSION

With the use of HTML5 and CSS3, companies are increasingly developing and expanding web content and applications with the purpose of creating well-defined and accurate pages and systems that can be accessed on different devices, browsers, and operating systems.

Therefore, knowing these two languages in depth will make you stand out in the job market. Not to mention that with them you save time, make your code shorter and reduce the chances of errors.

If you were in doubt whether it would be worth studying these two languages, you can play for sure you won't regret it.


What did you think of our article? Be sure to follow us on social media and follow our blog to stay up to date!

(8 minutes of reading)


HTML5 is the new version of HTML. But before we talk about this new version, let's talk a little about the history of HTML?


HTML

With the emergence of the internet, it was necessary to create a language that could be understood by different access points. Thus, Tim Berners-Lee developed HTML. In the 1990s, when the browser developed by Marc Andreessen, Mosaic, became popular, HTML gained strength and was adopted by other developers and browser manufacturers, sharing the same conventions.

HTML is an abbreviation of Hypertext Markup Language, it is the language used for publishing content (text, images, videos, audio, etc.) on the web.

HTML is based on the concept of hypertext, that is, sets of elements connected by connections, which can be words, images, videos, audio, documents, etc. that when connected, form a large information network. The connection made in a hypertext is something unforeseen that allows the communication of data, organizing knowledge and storing related information.

Between 1993 and 1995, new versions appeared (HTML+, HTML 2.0, HTML 3.0) where several changes were proposed to enrich the possibilities of the language, but it was still not treated as a standard. Only in 1997, the W3C working group, worked on version 3.2, causing it to be treated as common practice.

In 2004, the WHATWG (Web Hypertext Application Technology Working Group) was founded by developers from companies such as Mozilla, Apple, and Opera, where the work of writing the new version of HTML, HTML5, began.


HTML5 – WHAT IS IT?

As stated at the beginning of the text, HTML5 is the new version of HTML.

HTML5 is a hypertext markup language that presents and structures web content, and this new standard is for HTML, XHTML, and HTML Dom.

HTML 5 allows adding new elements and functions, such as video and audio tags and canvas elements. And its main objective is to facilitate the manipulation of its elements, making it possible to modify the characteristics of objects in a non-intrusive way, making this explicit for the end user.

If we compare HTML5 with its predecessors, we notice that it has a series of additional features, such as:

1) Support for offline media storage;

2) Element of more specific contents, such as footer, header, navigation;

3) Simpler doctype;

4) Audio and video embedding support.

Another interesting feature of HTML5 is that it provides tools for CSS, Cascading Style Sheets, (to know more about CSS read our article), and JavaScript (read our text to know more about JS) do their job in the best possible way, so the site manages to be light and functional.

In addition to the code in HTML5 being written differently, the organization of the page is also different. It became more semantic and with less code, increasing interactivity without the need to install plug-ins that often-caused loss of performance. The code has already become interpolable, that is, it is ready for future devices, facilitating the reuse of information in different ways.


HTML5 STRUCTURES

The basic structure of HTML was maintained in HTML5, the only change was in the doctype.

The purpose of HTML5 is to improve the web experience for its end users as well as the devs. Its greatest quality is that it now has high-level audio and video support, which did not exist in previous versions.

Now we list other differences between HTML and HTML5 versions.

1) SVG (scalabel vector graphics) – canvas and other vector graphics are supported in HTML5, while in HTML the use of vector graphics was only possible if used in conjunction with different technologies, such as: Flash, VML, Silverlight, etc.

2) HTML5 uses application cached web SQL database for temporary storage of data, meanwhile, HTML only uses browser cache.

3) HTML5 is not based on SGML (Standard Generalized Markup Language), allowing it to have improved parsing rules, which provide better compatibility.

4) In HTML5, MathML inline and SVG can be used in text, this was not possible in HTML.

5) Some elements that were left out in HTML5 are: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike and tt.

6) HTML5 supports new types of form controls like dates and times, email, number, range, TEL, URL, search, etc.


NEW ELEMENTS IN HTML5

Many elements of version 4.0.1 were deleted in version 5, some because they were never used, others because they were obsolete and, still, those that were used improperly. The new version brings innovations that provide the user with a better structure, design, and multimedia content.

The new features in version 5 are directly linked to the need for independent support for new multimedia content formats, new semantic features, and accessibility.

Among them we highlight the following:

1) Inclusion of the canvas that allows you to draw graphics on a web page. In the previous version, this task was performed using external plugins. With this, it is possible, via JavaScript, to control all pixels, in addition to drawing various graphic elements, such as circle, rectangle, ellipse, line, text, images, etc.

2) Inclusion of video and audio elements for multimedia playback. So once again there is integration of external plugins. With this inclusion of tags, HTML5 supports audio and video playback without the need to use external mechanisms.

3) Better support for local storage, HTML5 offers two new objects for storing data locally: SessionStorage, which stores data during an active session, and LocalStorage, which stores data without a time limit.

4) Inclusion of new elements of specific content, since many elements of version 4.0.1 were excluded from the new version, which brings new elements.

5) Inclusion of new form controls to make life easier for devs, unlike version 4.0.1, which had a scarce amount of form controls. Only the input element remained, but it gained new values for the type attribute, allowing greater control over data entry by the user.

6) Full CSS3 support. With this integration, web pages can receive the most varied types of styles such as shadows in texts and frames, transition effects, frame with rounded corners and several new features that CSS3 offers.


CONCLUSION

As previously mentioned, HTML5 comes with many new features, from video and audio incorporation to the use of the canvas element. The markup language also offers multiple new elements, bringing better compatibility with improved parsing rules.

Therefore, it is essential that programmers learn about HTML5 as soon as possible so that they can maximize the potential of modern browsers.


What did you think of our article? Be sure to follow us on social media and follow our blog to stay up to date!