Please enable JavaScript.
Coggle requires JavaScript to display documents.
Semantica das tags (HTML) Continuacao (Tags relacionadas a fazer…
Semantica das tags (HTML) Continuacao
Elementos de divisao do codigo (Serve para fazer uma separacao de uma parte tipo em uma caixinha..)
<span> - significa curto espaco. entao é para coisas pequenas como poucas palavras.
<div> - Quando o texto é maior, como um paragrafo por exemplo. Tudo que foi escrito fica dentro do div (caixa)
Atributo "Style" - serve para estilizar o texto.
Ex: <div style = "border: 1px solid red"> - Entao a borda da div vai ser vermelha solida com 1 pixel
Criando TABELAS
<table> define uma tabela! Obs: Quando ele fala define, quer fizer criar!
<table> - Define e a tabela
<th> Define uma celula de cabecalho em uma tabela. OBS: Podemos utilizar um th em vez de td! ele é Sempre em negrito e centralizada
<tr>Define uma linha em uma tabela
<td> - define uma celula em uma tabela
Mais usadas
<thead> Agrupa o conteudo da primeira linha de uma tabela
<tbody> Agrupa o conteudo do corpo (entre cabecalho e rodape) linha de uma tabela
<tfoot> Agrupa o conteudo do rodape de uma tabela
Obs: os tr, th e td (escrevendo o codigo) ficam dentro do thead, tbody, tfoot), MASSS th so fica dentro de thead, e td (que é a celula) fica dentro de tr( que é a linha)
Para mesclar celulas
Duas linhas: usar <td rowspan = "2" > 2 linhas </td>
(Duas colunas): usar <td colspan = "2" > 2 colunas </td>
Se ligar que tem tags para criacao de linhas, colunas, rodape, cabecalho, definicao de celula. A ordem das coisas na tabela independe da ordem de programacao. Eu posso fazer o rodape primeiro e depois o titulo, mas vai ta tudo certinho na visualizacao do html
Tags relacionadas a fazer FORMULARIOS e ENTRADA de DADOS (INPUTS)
Obs: é comum (para html) aparecer o termo "controles" para entradas
<form> - Cria formulario
<Label> Cria Roulo (titulo) do campo. Obs: Ele é escrito assim: <Label for = "titulo> O titulo </label> <br>"
Quando for especificar qual tipo de campo é, ai coloca id=titulo, pq ta definindo a localizacao do label que é acima do campo definido depois
<input> - é um tipo de campo que abre caixa de texto PEQUENA(é filho de label). Ex: <input type = "text" id="título" > - Entao definiu o tipo de campo e identificou o label do qual ficara embaixo.
<select> - Define um tipo de campo de selecao! Dentro dele vao ter que ser colocadas as opcoes. (E obs: teria que ser criado um label antes em que seria identificado aqui tbm)
Sendo filho de <select>, vem o <option> que tras as opcoes de seleca. Ex: <option value = "aula 1"> Aula 1 </option> <option value="aula2"> Aula 2 </option> E entao fecharia o <select> que foi aberto
<textarea> - é um tipo campo em que pode escrever texto GRANDE. Ex: <textarea id="descricao"> </textarea>. No caso, ja foi criado um label com nome descricao e aqui identificou-se a localizacao e criou o campo
<button type="submit"> Enviar duvida </button> </form> - Entao foi criado um botao do tipo submit para enviar uma pergunta por exemplo. No final, perceber que fecha o formulario
Atrubutos de <form>
enctype - Qual codigo vai ser utilizado para enviar os dados ao servidor
method - metodo http que vai ser utilizado
autocomplete - se é pro navegador tentar completar os campos que estiverem dentro do formulario
name - nome do formulario
action - Pra onde vai enviar formulario depois de preenchido
novalidate - servidor nao vai tentar validar o formulario
acceptcharset - diz que tipos de charsets que o formulario aceita
target - Depois que submetido o formlario, onde vai receber a resposta
Atributos de input (para entrada de dados)
required: Pra dizer se é campo obrigatorio
placeholder: é uma sugestao. Ex: Deicar embaixo do campo "Ex: 12345"
type: define o tipo do input. Se é data, texto, mes. color...
Outros tipos de tags de input
<datalist> é tipo o select, mas permite preenchimento
<output> OBSSS: é um campo de saida de dados, nao de entrada. Mostra o processamento do dado