HTML significa Hyper Text Mark-up Language
Usado para: criação de páginas web (documentos) que são exibidas na World Wide Web (websites). As páginas podem ser uma mistura de texto, imagens, vídeos, e outros elementos. Pode ser criada com: bloco de notas, TextPad ou qualquer editor de texto.
Salvado como: .html files
HTML Cheat Sheet
Aqui estamos nós a partilhar consigo a Cheat Sheet HTML completa:
Basic structure
<!DOCTYPE html><html> <head> <title></title> </head> <body> body tags and main content </body></html>
Os principais elementos em HTML são as tags. A estrutura das etiquetas e apresentar os dados em diferentes formas.
Cabeça
<h1>Heading 1</h1><h2>Heading 2 </h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6 </h6>
Parágrafo
Span
Etiqueta depanha é utilizada para estilizar elementos em linha.
<span style = "color:green”> Address </span>
– imprime a palavra ‘Endereço’ na cor especificada (aqui verde). O atributo de estilo é utilizado para estilizar elementos HTML.
Caracteres
Formatação
Corpo
<corpo> – o conteúdo principal encontra-se no corpo. Dentro de < corpo> pode haver muitas secções. Atributos –
Metadata
<meta> tag é uma parte de <head> e descreve informação sobre dados. A utilização mais comum de metadados é por motores de busca para palavras-chave. <meta charset = “UTF-8”> – conjunto de caracteres mais comum Atributos –
- nome = “” – pode ser nome como palavra-chave, autor, descrição etc…
- conteúdo = “” – o valor correspondente aos nomes acima indicados
Exemplo – <meta name=”keywords” content=”What is HTML, Como aprender HTML”>
Seções e divisões
- <div></div> nova secção; as etiquetas de mergulho aninhadas são muito comuns quando são necessárias múltiplas subsecções
- <hr>> – linha horizontal
<hr> tem os seguintes atributos –
- <hr tamanho = “” largura = “”/largura = “%” cor = “” alinhamento = “left/center/right”>
- tamanho – espessura da linha em pixels
- largura – em pixels ou percentagem (qualquer um)
- cor – cor em valor hexadecimal
- alinhamento – alinhamento; esquerda, direita ou centro
Tabelas
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>
- <tabela> – cria uma tabela,
- <tr> – cria uma linha,
- <div>> – cria uma coluna,
- <th> – cria colunas de cabeçalho
<table> attributes –
<td> atributos
Exemplo –
<colgroup> <col span="1" style="background-color:green"> <col style="background-color:blue"></colgroup>
A primeira coluna será destacada como verde, enquanto outras colunas serão destacadas como azuis.
Forms (HTML Cheat Sheet)
Maior parte do conteúdo dinâmico como as entradas do utilizador, submeter uma página, preencher um formulário acontece dentro desta etiqueta. Trata-se de um grupo de entradas relacionadas.
<form> <input> <select><option></option></select> <textarea></form>
<form>> tag attributes –
<input tag attributes –
<select></select> – Seleccionar opções da lista pendente <select> tag Attributes:
<opção></opção> – itens individuais da lista pendente <opção> tag Attributes:
- valor=”” – Valor da opção seleccionada ou valor por defeito definido
- <textarea>lot de texto como descrição </textarea> – Grande área para entradas de texto
<textarea> Tag Attributes:
iframe
- <iframe src=””></iframe> – inserir outro documento dentro do documento actual (página) numa moldura.
- Atributo “src” – localização do documento a inserir
Links
ligações HTML, também chamadas como hiperligações são definidas por ‘a’ tag – <a></a> Atributos –
- href = “” – a url a ser visitada quando o link é clicado
- target = “” – especifica onde abrir o link – _blank (novo separador/janela), _self (mesma janela/tab), _parent (na moldura mãe), framename – aberto numa moldura em particular.
- título = “” – dá informação sobre o elemento
- id = “” – para criar marcadores na página que podem ser utilizados como valor no atributo href.
Exemplos –
Estilos
Para o estilo, há muitos atributos a serem utilizados com várias etiquetas. Os atributos são –
<style> text-align= "” – align text; left, right, center background-color = "” – background color of the element color=”” – for color of texts font-family = "” – for various fonts font-size = "” size of the font border = "” – border thickness and color for a table</style>
Estes elementos de estilo são agrupados num CSS.
Listas
Existem dois tipos de listas – ordenadas e não ordenadas. <ol></ol> – lista ordenada Atributos –
- type=”” – a numeração da lista – A, a, I, 1, i
- start = “” – valor inicial
- <ul></ul> – lista não ordenada
Atributos –
- tipo = “” – tipo de bala – quadrado, círculo, disc
- <li></li> – valor individual na lista
Atributos –
- <valor> = “” – valor do item da lista
- <type>=”” – tipo do item da lista
Images
<img> – mostra a imagem quando a página carrega Atributos –
- src =”fonte de imagem” – fonte da imagem; url ou localização do ficheiro; obrigatório
- alt = “texto alternativo” – texto alternativo; obrigatório
- align = “left/right/center” – alinhamento em relação aos itens circundantes (texto)
- width = “” – em pixels ou percentagem
- height = “” – em pixels ou percentagem
- margem = “” – espessura da margem em pixels
- hspace = “” – espaço em pixels nos lados da imagem
- vspace = “” – espaço em pixels na parte superior e inferior da imagem
HTML5 Tags
- <aside> – conteúdo que não faz parte de nenhum elemento, mas tem de ser colocado juntamente com o conteúdo principal
- <figure> – qualquer ilustração como fotos, diagramas, listagem de códigos e assim por diante.
- <figcaption> – caption for the <figure> element
- <header> – Título de uma secção (semelhante ao da palavra MS), O cabeçalho pode ter outros conteúdos como ligações de navegação, formulários, etc…
- <footer> – o conteúdo na parte inferior da página/secção, por exemplo. informações sobre direitos de autor, termos e condições, etc…
- <main> – a etiqueta é um indicador de onde o conteúdo principal da página começa
- <div>> – caixa com funcionalidade de expansão/colapso para permitir mais espaço de texto
- <summary> – resumo do conteúdo do elemento particular. Pode ser descrição, legenda, etc…
- <mark> – destacar parte de um texto para dar destaque
- <nav> – secção com ligações de navegação para secções de uma página ou para outras páginas
- <section> – uma parte específica (grupo) na página, por exemplo, sobre nós ou secção de testemunhos de uma página web
- <time> – o tempo mencionado em formato legível por máquina. Pode ter data, hora, compensação de fuso horário, durações, etc…
- <datalista> – semelhante ao autocompletar; opções predefinidas definidas para controlos de entrada
- <keygen> – gerador de par de chaves (públicas e privadas) para formulários. A chave pública é enviada para o servidor quando o formulário é submetido, enquanto a chave privada é armazenada na loja de chaves local
- <output> – resultado de quaisquer cálculos
- <progress> – indica o progresso da tarefa através de uma barra de progresso
- <embed> – embed media from external source
- <source> – fonte para áudio ou vídeo
- <audio> – para conteúdo musical ou som
- <video> – para apresentar um filme ou vídeo
Download HTML Cheat Sheet PDF A partir daqui.
Pessoas também estão a ler:
- Best HTML Courses
- Best HTML Certifications
- Top HTML Interview Questions
- Top HTML5 Interview Questions
- Como se tornar um programador web?
li>Best Web Development IDEli>Best Web Development Frameworks>li>O que é Arquitectura de Desenvolvimento Web?li>CSS vs CSS2li>Top Angular Alternatives