HTML5


Intermediate

Lists

Tables

Forms

HTML Colors

Advanced

Audio and Video

SVG

Canvas

HTML meaning and history

HTML stands for HyperText Markup Language. It was designed to format and layout hypertext documents published on the web, today it became the standard language of all website online together with the usage of CSS styles.

The first version of HTML was developed in the early 90s together with the HTTP protocol, the protocol we use nowadays for the transmission of the actual HTML documents and already in the 1993 this language had the first major commercial boom in the web.

In the October 2014 the W3C has released the 5th version of HTML. HTML5 solve the previous limitations of HTML4 that needed external plugins and and browsers extension like the old Adobe Flash to allow animations and a additional engagement in the modern web.

HTML5

Example of first webpage using Notepad

How to create a website?

HTML is a pretty easy language that can be learnt in fairly amount of time, in one week you can actually be able to understand enough of HTML code to start developing your own website using online tutorials and HTML editors that make your life easier.

At first to learn how to code in HTML you can use any text editor, the easiest and available on all computers is Notepad. In Notepad you can write the code and save the file in HTML format that can be reviewed in any browser.

See the example here, that's where everyone has started.

HTML elements

An HTML document is made of tags and attributes, these define the webpage you are actually looking at.

It all starts with <!DOCTYPE html>, this tells the webpage is written in HTML5 and the tag <html> gives the go to the code.

In the <head> section there are  all factors not visible in the webpage: scripts, metatags, the page title, the link to the css files and fonts. But it is in the <body> where all content is: text, images, navigation bars, phone numbers...

Most of elements need to be closed at some point to tell the page that actual part of code is completed, same is happening with the page structure tags, these elements are closed with the following </head> </body> </html>.

Think about the HTML elements as a sandwich that has tags on top and bottom (the bread) and the content in between.

<!DOCTYPE html>
<html>
<head>
    <title>
My page</title>
</head>
<body>
  All the content of my page....
</body>
</html> 

HTML tags, attributes and values

Attributes provide additional information to the tag and the value gives. In the first example following the tag <p> is used with the attribute align and the value center.

In the second example done with the tag <img> you can see how several attributes and values have been used, in first place the image needed to be found, so it was used src to select it, after it was aligned at the center of the page with align and given width and height using values in pixel and percentage.

<p align="center">Centered text</p>

<img src="photo.jpg" align="center" width="500px" height="30%">


Tools


Web development free apps

Web development

All softwares you need to design your websites. There are plenty of free tools that can be used to design a website.

Create a website
Coding apps for free

Coding

All you need to start coding. All free softwares that allow you to write your code and develop apps from scratch.

Create an app
Free Database tools

Databases

Create and query databases with these softwares. With these tools you can create, query and modify your own databases.

Query a database

Connect