A oferta de BLACK FRIDAY irá terminar em:
Paulo Barbosa
Paulo Barbosa28/09/2023 20:55

HTML - Resumo Iniciante

  • #HTML


1-Emmet Abbreviation in VS Code: Shift + 1 (!):

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

2-Basic Tags

Heading: <h1>Title</h1> (h1,h2,h3,h4,h5,h6)
Paragraph: <p>content</p>
Links: <a href="link OR .html/htm" target ="_blank"> textThatWillContainLink </a>

1 AND 2 Explanation:

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

 3- Meta Tags


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="pt-BR">


4 - Lists (ul, ol, li)

  <li>Unordered list item</li>
  <li>Another item in the list</li>


//Tip: <ol type="1/A/I">
  <li>Ordered List</li>
  <li>Another item in Ordered List</li>


5 - Tables (table, tr, th, td):**

//tr = table row(line)
//td = table data (th is a type of td, it's called th because it is on header)

<table border="1">
                <th>Cabeçalho 1</th>
                <th>Cabeçalho 2</th>
                <td>Cell 1, Line 1</td>
                <td>Cell 2, Line 1</td>

                <td colspan="2">Merged in 2 cells</td>

6 - Forms (form, input, label)

<form action="process.php" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Enviar">

Recommended WebSites:

HTML Tutorial-w3c

HTML Meta Tags: Entendendo o uso de Meta Tags


Padrão Digital de Governo - Guias e Boas Práticas - Acessibilidade no Código HTML

HTML: Boas práticas em acessibilidade - Aprendendo desenvolvimento web | MDN

What Is Semantic HTML and Why You Should Use It


Hi, connect with me on Linkedin

Follow me on DIO

Recomendado para você
  • Curso JavaScript Developer
  • Curso CSS Developer
  • Curso UX Designer
Comentários (0)
Recomendado para vocêblack-friday