HTML - Resumo Iniciante
- #HTML
Content:
1-Emmet Abbreviation in VS Code: Shift + 1 (!):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
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)
<ul>
<li>Unordered list item</li>
<li>Another item in the list</li>
</ul>
//Tip: <ol type="1/A/I">
<ol>
<li>Ordered List</li>
<li>Another item in Ordered List</li>
</ol>
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">
<thead>
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1, Line 1</td>
<td>Cell 2, Line 1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Merged in 2 cells</td>
</tr>
</tfoot>
</table>
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">
</form>
Recommended WebSites:
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
