Arduino from scratch
Hello! Welcome
We are going to discover the world of HTML from scratch.
What is HTML?
HTML stands for HyperText Markup Language, and it is a language for writing formatted text.
HTML is the basic language for building web pages. It allows you to say “here I put a text, here an image”.
It’s like building the structure of a house: you need the walls and the roof!
Installing a text editor
To write HTML, you only need a text editor. You can use a simple one like Notepad!
However, it is common to use a code editor like Visual Studio Code. It’s free, provides aids to make writing HTML easier and more organized.
Write your first page
It’s time to write your first HTML code! Open your editor and write the following:
Now save it as index.html and open it in your web browser to see it in action.
Start by creating a simple page with a title, a paragraph, and an image. It’s a great first step to learning HTML!
You’re doing great!
Now let’s talk about hardware
Basic structure of HTML
Every HTML document follows a basic structure. These are the key parts that a web page must have.
<!DOCTYPE html>: Defines the document type<html>: The root of the document<head>: Information about the page<body>: The visible content of the page
HTML tags
HTML uses tags to mark and organize content. Tags are indicated between < > and </ >.
For example like this:
<p>This is a paragraph</p>Each tag has a specific purpose. In this case, <p> is defining a paragraph.
Common tags
There are many tags in HTML. For example, some of them are:
<div>: To create sections<p><h1>to<h6>: To define paragraphs and headings<span><strong><em>: To format text<ul><ol><li>: To create lists
Although in the “real” world only about 20-30 are commonly used, it’s not that many!
Tag attributes
Tags can have attributes that give them additional characteristics. For example, the src attribute defines the source of an image, or the href attribute indicates which page the link will take you to.
<a href="https://www.google.com">Go to Google</a>Two very common attributes are id or class, which are used to select an element from CSS or JS.
You’re almost there!
We just need to see how to program your Arduino
Forms in HTML
Forms allow users to input information that will then be sent.
We use tags like <form>, <input>, and <button> to create interactive forms. They can be a bit complicated, but you’ll get the hang of it!
Adding styles with CSS
CSS and HTML work together to create attractive websites. You can add your CSS file to your website like this:
<head>
<link rel="stylesheet" href="styles.css">
</head>HTML creates the structure, and CSS adds the style (typography, colors, layout). By combining both, you can create amazing websites!
Adding programming with JavaScript
You can also add JavaScript to make your page interactive. Here’s how you can add your JavaScript file to your website.
<head>
<script src="script.js"></script>
</head>With JavaScript, you can do almost anything. Make your pages come to life!
Well done!
You have learned the basics of HTML! Keep practicing and experimenting!
