Learn HTML

HTML is the standard markup language for creating Web pages.

  1. HTML stands for Hyper Text Markup Language
  2. HTML describes the structure of Web pages using markup
  3. HTML elements are the building blocks of HTML pages
  4. HTML elements are represented by tags
  5. HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  6. Browsers do not display the HTML tags, but use them to render the content of the page

An HTML page is just a plain text file with .html extension that you can edit on any text editor.

Please be careful and use the correct tag for each case. If you want a paragraph use <p>, if you need to add a table use <table>, for every component that you want to add to the UI, search for the correct tag. Here you can see a list of all html tags.

We use the following style guide for HTML code, except for the indentation part where we use this syntax:

<html>
 <head></head>
 <body>
   <h1>Hello</h1>
   <div>...</div>
 </body>
</html>

Exercise

In the next 3 sections (HTML, CSS and JS), we are going to build a tool to create and control monthly tasks. The user can mark tasks as completed and the platform will send the user a reminder if the task hasn't been completed before end of month. At the beginning of each month the tasks will automatically get back to uncompleted.

We will start using GIT from now on, so please create a folder inside your repository each time you start a new section. You should end up with a folder structure similar to this:

html/excercise1.html
...
html/excercise3.html
css/plain_css
...
css/bootstrap
...

For this section, please build the following 3 web pages using only HTML (without CSS or Javascript). In order to check that the HTML you generated is valid, you can use this validator.

Important Note

When you create the first Pull Request for this repo, you will see that some strange files will appear in your git stage (for example .DS_Store files). These files should not be commited and can be ignored by having a .gitignore file that basically ignores whatever you tell git to ignore. You can take a look at this repo to see specific gitignore files for every language/technology.

For this section you could use a general macOS gitignore.