Aprenda agora HTML e CSS!
HTML (Hypertext Markup Language) é a linguagem padrão para criar páginas web. É composto por tags que definem a estrutura e o conteúdo da página. Vamos começar com alguns elementos básicos:
1. Estrutura básica do HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Parágrafo de texto.</p>
</body>
</html>
- `<!DOCTYPE html>`: Declara o tipo de documento como HTML5.
- `<html>`: O elemento raiz que contém todo o conteúdo da página.
- `<head>`: A seção de cabeçalho da página que inclui metadados e referências externas.
- `<title>`: Define o título da página, que é exibido na barra de título do navegador.
- `<body>`: O corpo da página que contém o conteúdo visível.
2. Tags básicas:
- `<h1>` a `<h6>`: Cabeçalhos de diferentes níveis, sendo `<h1>` o maior e `<h6>` o menor.
- `<p>`: Parágrafos de texto.
- `<strong>`: Texto em negrito.
- `<em>`: Texto enfatizado (geralmente exibido em itálico).
- `<a href="link">Texto do Link</a>`: Cria um link para uma página ou recurso externo.
Agora vamos falar sobre CSS (Cascading Style Sheets), que é usado para estilizar a aparência dos elementos HTML. Aqui está um exemplo básico:
```html
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-size: 16px;
}
a {
text-decoration: none;
color: green;
}
</style>
</head>
<body>
<h1>Título Principal</h1>
<p>Parágrafo de <a href="https://www.example.com">texto</a>.</p>
</body>
</html>
```
- `<style>`: Define as regras de estilo dentro do elemento `<head>`.
- `h1`, `p`, `a`: Seletores de elemento para aplicar estilos a diferentes elementos.
- `color`: Define a cor do texto.
- `font-size`: Define o tamanho da fonte.
- `text-decoration`: Define a decoração do link (nesse caso, removendo o sublinhado).
Essas são apenas as noções básicas de HTML e CSS.
Aqui estão mais alguns exemplos de elementos e estilos em HTML e CSS:
Elementos HTML:
- `<img src="caminho-da-imagem.jpg" alt="Descrição da imagem">`: Insere uma imagem na página.
- `<ul>` e `<li>`: Cria uma lista não ordenada.
- `<ol>` e `<li>`: Cria uma lista ordenada.
- `<table>`, `<tr>`, `<th>`, `<td>`: Cria uma tabela com linhas e colunas.
- `<form>`, `<input>`, `<button>`: Cria um formulário com campos de entrada e um botão de envio.
Exemplo de tabela:
```html
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
</tr>
</table>
```
Estilos CSS:
- `background-color`: Define a cor de fundo de um elemento.
- `border`: Define a borda de um elemento.
- `margin` e `padding`: Define as margens internas e externas de um elemento.
- `text-align`: Alinha o texto dentro de um elemento (por exemplo, `text-align: center` centraliza o texto).
Exemplo de estilo CSS:
```html
<style>
table {
border-collapse: collapse;
width: 100%;
background-color: #f2f2f2;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
</style>
