Um dos componentes básicos do HTML são os parágrafos. Use tags "<p>" e "</p>" para definir parágrafos. Por exemplo:
<p>Este é um parágrafo. </p>
Um hiperlink é um link para outra página ou site. Use as tags "<a href=''>" e "</a>" para criar hiperlinks, onde o atributo href especifica a URL do link. Por exemplo:
<a href="https://www.jb51.net">Este é um link</a>
As imagens podem aumentar o impacto visual de uma página e transmitir mais informações. Insira imagens usando a tag "<img src='' alt=''/>", onde o atributo src especifica o caminho para o arquivo de imagem e o atributo alt contém texto alternativo que é exibido quando a imagem não pode ser exibida. Por exemplo:
<img src="image.jpg" alt="Uma bela imagem">
As tabelas são a principal forma de apresentar dados em páginas da web. Use as tags "<table>", "<tr>" e "<td>" para definir tabelas, linhas e células respectivamente. Por exemplo:
<tabela> <tr> <td>Primeira linha, primeira coluna</td> <td>Primeira linha, segunda coluna</td> </tr> <tr> <td>Segunda linha, primeira coluna</td> <td>Segunda linha, segunda coluna</td> </tr> </tabela>
Use as tags "<ul>" ou "<ol>" para criar uma lista não ordenada ou ordenada e, em seguida, use a tag "<li>" para definir os itens da lista. Por exemplo:
<ul> <li>Item 1 da lista</li> <li>Item da lista 2</li> </ul> <ol> <li>Item 1 da lista</li> <li>Item da lista 2</li> </ol>
Formulários são componentes usados para coletar informações do usuário. Use a tag "<form>" para criar o formulário e a tag "<input>" para definir os campos de entrada. Por exemplo:
<form action="submit.php" método="post"> <label for="nomedeusuário">Nome de usuário:</label> <input type="text" name="nome de usuário" id="nome de usuário"> <label for="senha">Senha:</label> <input type="senha" nome="senha" id="senha"> <input type="submit" value="Enviar"> </form>
CSS pode ser usado para controlar a aparência e o layout de páginas da web. Os estilos CSS podem ser adicionados a documentos HTML usando a tag "<style>". Por exemplo:
<estilo>
corpo {
cor de fundo: #f2f2f2;
}
h1 {
cor: azul;
alinhamento de texto: centro;
}
</estilo>O trecho de código acima é apenas a ponta do iceberg na linguagem HTML. No entanto, eles podem ajudá-lo a construir a estrutura e o estilo básicos da página da web e fornecer inspiração para mais aprendizado. Agora tente criar seu próprio site usando esses códigos HTML!
Declaração de documentação HTML5
<!DOCTYPEhtml>
O bloco de código acima é uma declaração de documento HTML5, informando que a página da web atual foi escrita de acordo com os padrões HTML5.
Ao escrever uma página da web, certifique-se de escrever a declaração do documento HTML5 no topo da página da web. Se você não escrever uma declaração do documento, alguns navegadores entrarão em um modo estranho. Depois de entrar no modo estranho, o navegador irá analisar a página e a página não será exibida normalmente. Portanto, para evitar entrar neste modo, você deve escrever uma declaração de documento.
Declarações de documentos comumente usadas
HTML5
<!DOCTYPEhtml>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nota: <!DOCTYPE> não é uma tag HTML. Ele fornece ao navegador informações (uma declaração) sobre qual versão do HTML foi escrita.
Para ser compatível com algumas páginas antigas, o navegador definiu dois modos de análise:
Modo Padrões Modo Padrões
Modo Quirks modo estranho
Os modos estranhos produzirão algum comportamento imprevisível ao analisar páginas da web e devemos evitar a ocorrência de modos estranhos.
Tipo de arquivo <HTML></HTML> (colocado no início e no final do arquivo)
Título do documento <TITLE></TITLE> (deve ser colocado no bloco "Cabeçalho")
Cabeçalho <HEAD></HEAD> (informações descritivas, como "tópico")
Estilo <BODY></BODY> (corpo do documento)
Título <H?></H?> (de 1 a 6, existem seis níveis de escolhas)
Alinhamento do título <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Distinguir <DIV></DIV>
Alinhamento diferenciado <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Bloco de citação <BLOCKQUOTE></BLOCKQUOTE> (geralmente recuado)
Ênfase <EM></EM> (geralmente mostrado em itálico)
Ênfase especial em <STRONG></STRONG> (geralmente mostrado em negrito)
Citação <CITE></CITE> (geralmente mostrada em itálico)
Código <CODE></CODE> (para exibir o código-fonte)
Amostra<SAMP></SAMP>
Entrada de teclado<KBD></KBD>
Variável<VAR></VAR>
Definir <DFN></DFN> (não fornecido por alguns navegadores)
Endereço<ADDRESS></ADDRESS>
Caracteres grandes<BIG></BIG>
Letras pequenas<SMALL></SMALL>
Negrito<B></B>
itálico<I></I>
Conclusão <U></U> (alguns navegadores ainda não fornecem isso)
Tachado <S></S> (alguns navegadores ainda não o fornecem)
Subscrito<SUB></SUB>
Sobrescrito <SUP></SUP>
Máquina de escrever <TT></TT> (exibida em fonte de espaço simples)
Formato predeterminado <PRE></PRE> (preserva o tamanho dos espaços no arquivo)
A largura do formato pré-formatado <PRE WIDTH=?></PRE> (em caracteres)
Alinhe-o com <CENTER></CENTER> (texto e imagens são aceitáveis)
Shine <BLINK></BLINK> (a tag mais ridicularizada de todos os tempos)
Tamanho da fonte <FONTSIZE=?></FONT> (de 1 a 7)
Alterar tamanho da fonte <FONTSIZE=+|-?></FONT>
Tamanho base da fonte <BASEFONTSIZE=?> (de 1 a 7; o padrão é 3)
Cor da fonte<FONTCOLOR="#$$"></FONT> ($$ é o código da cor)
1) Imagem: <img src="endereço da imagem">
2) Cadastre-se no link: <a href="Endereço relacionado a ser conectado">Escreva as palavras que deseja escrever</a>
3) Abra o link em uma nova janela: <a href="Endereço relacionado" target="_blank">Escreva as palavras que deseja escrever</a>
4) Fonte móvel (marquee): <marquee>Escreva as palavras que deseja escrever</marquee>
5) Fonte em negrito: <b>Escreva as palavras que deseja escrever</b>
6) Fonte em itálico: <i>Escreva as palavras que deseja escrever</i>
7) Sublinhado da fonte: <u>Escreva as palavras que deseja escrever</u>
8) Tachado na fonte: <s>Escreva as palavras que deseja escrever</s>
9) Aumente o tamanho da fonte: <big>Escreva as palavras que deseja escrever</big>
10) Controle de tamanho da fonte: <h1>Escreva as palavras que deseja escrever</h1> (o tamanho da fonte pode ser de h1-h5, h1 é o maior, h5 é o menor)
11) Altere a cor da fonte: <font color="#value">Escreva as palavras que deseja escrever</font> (o valor está entre 000000 e ffffff (hexadecimal de 16 bits)
12) Elimine o sublinhado da conexão: <a href="Endereço relacionado" style="text-decoration:none">Escreva as palavras que deseja escrever</a>
13) Postar música: <embed src="Endereço da música" width="Width" height="Height" autostart=false>
14) Cole o flash: <embed src="flash address" width="width" height="height">
15) Cole os arquivos de vídeo: <img dynsrc="file address" width="width" height="height" start=mouseover>
16) Quebra de linha:<br>
17) Parágrafo: <p>Parágrafo</p>
18) Estilo do texto original: <pre>Texto</pre>
19) Alterar o plano de fundo da postagem: <body background="background image address">
20) Corrigido o fundo da postagem que não rolava com a barra de rolagem: <body background="Endereço da imagem de fundo" bodybgproperties=fixed>
21) Personalize a cor de fundo da postagem: <body bgcolor="#value">(veja 10 para valor)
22) Poste música de fundo: <bgsound="Endereço da música de fundo" loop=infinite>
23) Publique a página da web: <iframe. src="Related Address" width="Width" height="Height"></iframe>