Como criar lista ordenada com HTML
Para criar listas ordenadas usaremos a tag OL e a tag LI que define os itens da lista.
https://1.bp.blogspot.com/-8ph_SYYwZdo/UPN3BbLWv7I/AAAAAAAAAY4/JFv9YhSN5RM/s1600/IMG14.png
Como criar lista não ordenada com HTML
Para criar listas não ordenadas usaremos a tag UL e a tag LI que define os itens da lista. Esse tipo de lista é muito utilizado para implementar menus.
Tipo de listas
Para listas ordenadas temos os tipos:
type="1", os itens da lista serão numerados com números (padrão).
type="A", os itens da lista serão numerados com letras maiúsculas.
type="a", os itens da lista serão numerados com letras minúsculas.
type="I", os itens da lista serão numerados com números romanos em letras maiúsculas.
type="i", os itens da lista serão numerados com números romanos em letras minúsculas.
Para listas não ordenadas temos os estilos:
list-style-type:disc, os itens da lista serão marcados com círculos preenchidos (padrão).
list-style-type:circle, os itens da lista serão marcados com círculos.
list-style-type:square, os itens da lista serão marcados com quadrados.
list-style-type:none, nenhum dos itens da lista serão marcados.
Atenção: o último estilo apresentado pode ser utilizado em menus.
Como inserir imagem com HTML
A imagem é inserida utilizando a tag IMG. Nesta tag podemos definir o tamanho, alinhamento, a borda etc.
img src ="foto.png" height="200" width="250"
width, define a largura da imagem.
height, define a altura da imagem.
Para colocarmos precisamos identificar o nome do destino da imagem, seu diretório.
tag alt, para texto alternativo (caso a imagem não carregue, esse texto aparecerá).
tag title, para título da imagem (identificador do que está sendo apresentado).
Para subir um diretório: img src="../foto.png" e acessar um diretório: img src="../11-teste/foto.png".
Quando acessamos um diretório que está no mesmo nível do arquivo html: img src="imagem/foto.png" .
Como criar link com HTML
Link de site para site
Para criar links utilizaremos a tag A junto com o atributo href ="página_redirecionada.html ", a palavra apresentada ao usuário e o fechamento da tag A.
target="_blank", o atributo target e valor _blank geram uma nova página ao clicar no link.
Link entre páginas de um mesmo site
Criação de mais de um arquivo .html. Você pode usar a tag UL para implementar um menu.
Link para determinado ponto de uma página
Colocamos o #, que indica o ID:
a href="#elemento"
,ou seja, esse link o redirecionará para o local que o ID elemento.
Criando o local com o ID elemento:
span id="elenco" /span
Criando link para uma imagem
Dentro da tag A, escreva a tag IMG, indicando os diretórios.
Como criar formulário com HTML
Para criação de formulários é utilizado a tag FORM. A tag INPUT é utilizada para criar campos dentro do formulário.
Exemplo:
INPUT TYPE = "TEXT"
LABEL, indica o que o usuário deve preencher.
PLACEHOLDER, permite mostrar um texto no campo em que o usuário preenche.
SUBMIT, utilizado para submeter (criar um botão).
Atenção: Pesquise os TYPES de INPUT.
Como criar campo checkbox e radio com HTML
INPUT TYPE = "CHECKBOX"
Essa tag ´permite que o usuário selecione zero ou mais opções (ou todas).
VALUE = "a", indica o valor que será enviado.
RADIO, define um botão de opção. Apenas um termo pode ser selecionado.
CHECKED , define um termo pré-selecionado (é possível selecionar mais de um quando usamos checkbox).
Como criar campo select e textarea com HTML
SELECT, define uma lista. OPTION, define as opções da lista.
SELECTED, deixa qualquer termo pré-selecionado.
TEXTAREA, define um campo de entrada de várias linhas.
Exemplo:
TEXTARE ROWS="5" COLS='30'
ROWS, refere-se as linhas e COLS, refere-se as linhas.
BUTTON, define um botão (quando não é preciso submeter o formulário).
ONCLICK, é uma função Javascript (permite transmitir mensagens).
Atenção: é recomendável usar o formato INPUT TYPE.
Como usar as TAG do HTML para criar o layout
O HTML possui vários elementos que definem diferentes partes de uma página web:
HEADER, define um cabeçalho para um documento ou seção.
NAV, define um conjunto de links de navegação (menu).
SECTION, define uma seção em um documento.
ARTICLE, define um conteúdo.
ASIDE, define o conteúdo complementar (como uma barra lateral)
FOOTER, define um rodapé para um documento ou seção.
DETAILS, define detalhes adicionais que o usuário pode abrir e fechar sob demanda
SUMMARY, define um título para o DETAILS elemento.
