Mapa mental
HTML5
Conteúdo do mapa
HTML5
Hypertext Markup Language, versão 5
este é o tema Principal
Informação do mapa mental
- Autor: Jorge L. Quirino
- Leia Isso: Mais Informações
- status: incompleto
- aqui você tem informação sobre o mapa mental
- criado: 17/04/2020
- Você pode baixar e editar
- Estou estudando e criando o mapa mental
- Cor de fundo agradável aos olhos
Como funciona meus mapas mentais
- Tema Principal
- Um comentario qualquer
- subconteúdo do tema principal
- qualquer coisa, quem sabe um novo tema
- <nome de uma tag>
- Quando querer saber sobre uma tag procure por caixas rosas
- Elemento|Atributo
- valor de um atributo ou elemento
- Informação Informante
ferramentas do desenvolvedor
- editores de textos
- notepad++
- ✔ HTML ✔ CSS ✔ JavaScript ✔ PHP
- sublime text
- ✔ HTML ✔ CSS ✔ JavaScript ✔ PHP
- atom
- notepad++
- IDE
- Adobe Dreamweaver CC
- servidores Localhost
- WampServer
- xampp
- brawser para preview
- google chrome
- mozilla firefox
- opera
- microsoft edge
- internet explore
- editores de textos
aprender
- 1º html5
- 2º css3
- 3º javascript
- jquery
- react
- 4º php7
- 5ºmys ql
dicas de desenvolvimento
- não usar tags e atributos obsoletas e descontinuadas
- manter a estrutura do site semântico
- evitar misturar html, css e javascript
- aprenda inglês
- compreenda a sintaxe do html
atributos globais
- saiba quando usar cada atributo e outros nesta tabela -->> https://developer.mozilla.org/pt-BR/docs/HTML/Attributes
- class
- aplica o estilo de uma classe a tag
- style
- aplica um estilo inline
- id
- hidden
- deixa o onteúdo da tag oculta
- pode ser usadas em qualquer tag
- is
- lang
<!DOCTYPE html>
- Sintaxe
- <tag atributo="valor">
- Os atributos sempre serão informados na tag de abertura dos elementos
- nem todos os atributos possuem valor
- <input type="checkbox" checked>
- atributos globais
- São atributos que todas as tags possuem acesso.
- Atributos Específicos
- São atributos que apenas uma ou algumas tags possuem acesso
- <tag atributo="valor">
- <html>
- <head>
- <title>
- Define o título da página
- Pode Receber qualquer tipo de caractere
- <title>Meu primeiro site</title>
- <script>
- possui código javascript
- src
- link
- <style>
- Possui a estilização da página
- meta dados
- <link>
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- rel=""
- "stylesheet"
- define que o arquivo é uma folha de estilo
- importa uma folha de estilo
- define que o arquivo é uma folha de estilo
- apple-touch-icon-precomposed
- shortcut icon
- "help"
- "license"
- "stylesheet"
- href
- link do arquivo
- type=""
- imagem/gif
- especifica o tipo de arquivo o atributo href="link"esta recebendo
- image/x-icon
- imagem/jpeg
- imagem/png
- text/css
- sizes
- define resolução da imagem de atalho
- usar este atributo em conjunto
- rel="apple-touch-icon-precomposed"
- usar este atributo em conjunto
- 144x144
- <!-- iPad de terceira geração com tela retina de alta resolução: -->
- 114x114
- <!-- iPhone com tela retina de alta resolução: -->
- 72x72
- <!-- iPad de primeira e segunda geração: -->
- define resolução da imagem de atalho
- semantica
- <link rel="stylesheet" type="text/css" href="styles.css">
- title
- media
- print
- tela e impressão
- all
- para todas as midias
- tv
- estilo para televisões
- projection
- screen
- speech
- print
- <meta charset="utf-8">
- suporta caracteres especiais
- <meta>
- name
- author
- description
- especifica o tipo de elemento meta que é; que tipo de informação contém
- keywords
- content
- especifica o conteúdo real do meta
- name
- <link>
- <noscript>
- quando o navegador não suporte javascript
- usar depois de um script
- quando o navegador não suporte javascript
- <title>
- <body>
- Função: Conter todos os códigos de marcação
- Tabelas
- <table>
- define uma tabela
- <tr>
- <td>
- define uma célula
- define uma linha da tabela
- <td>
- <th>
- define um cabeçalho
- <<caption>
- define o título da tabela
- <colgroup>
- define um grupo de colunas
- <col>
- <thead>
- define um cabeçalho de tabela
- <tbody>
- efine um corpo de tabela
- <tfoot>
- define o rodapé da tabela
- <table>
- Mídia
- <video>
- <audio>
- Texto
- <hr>
- Função: Adiciona uma linha horizontal
- define uma linha horizontal
- <h1> a <h6>
- <span>
- span
- <strong>
- define texto em negrito
- <b>
- texto em negrito
- <i>
- texto em italico
- <hr>
- linha horizontal
- <br>
- define uma quebra de linha
- <pre>
- define texto pre formatado
- <em>
- texto enfatizado, itálico
- <code>
- define um pedaço de código de computador.
- <kbd>
- <samp>
- <var>
- <hr>
- imagem
- <img>
- src: endereço da imagem width: Define a largura da imagem Heigth: define a altura da imagem
- width
- Define a largura da imagem
- 280px
- 280 pixel de largura
- 280p
- 280 pontos de largura
- 100%
- Ocupara toda a area do container disponível
- height
- Define a altura da imagem
- src
- se a imagem estiver em uma sub pasta ou na mesma pasta não precisa digitar o endereço link completo
- uso: <img src="meusite.com/img/img.jpg"
- asdfas
- recebe link de imagem
- <img src="meusite.com/imgs/img.jpg">
- a imagem pode estar em outro site
- alt
- texto alternativo
- <figure>
- <figcaption>
- <img>
- Listas
- <ul>
- define uma lista não ordenada
- <ol>
- define uma lista ordenada
- type
- a
- indica letras minúsculas,
- A
- indica letras maiúsculas,
- i
- indica algarismos romanos minúsculos
- I
- indica algarismos romanos maiúsculos
- 1
- indica números (padrão).
- a
- start
- <ol start="3">
- reversed
- Este atributo boleano especifica que as partes desta lista serão especificadas em ordem reversa, isto é, a menos importante será listada primeiro.
- <li>
- define um item da lista
- sub tag de <lu> e <lo>
- pode conter qualquer conteúdo até mesmo outra lista
- <dl>
- Definition List lista de definição ou descrição
- <dt>
- difinition term | termo de definição
- <dd>
- definition definition | definição definição
- <ul>
- formulários
- <form>
- define um formulário
- <input>
- type
- text
- submit
- button
- Define um botão
- checkbox
- Define uma caixa de checagem
- color
- date
- datetime-local
- file
- hidden
- image
- month
- number
- password
- radio
- range
- define o tipo de entrada de dados
- name
- value
- Esse atributo define um valor inicial para o campo de entrada.
- placeholder
- esse atributo permite digitarmos uma “descrição” que será visualizada enquanto o campo de entrada não possuir nenhum valor.
- Define um campo de entrada de dados;
- required
- preenchimento de um campo obrigatório, basta utilizar este atributo.
- type
- method
- post
- Notas sobre o POST: Anexa dados do formulário dentro do corpo da solicitação HTTP (os dados não são mostrados na URL)Não tem limitações de tamanhoOs envios de formulários com POST não podem ser marcados como favoritos fonte: https://www.w3schools.com/tags/att_form_method.asp
- get
- Notas sobre GET: Anexa dados do formulário ao URL nos pares nome / valorO comprimento de um URL é limitado (cerca de 3000 caracteres)Nunca use GET para enviar dados confidenciais! (ficará visível no URL)Útil para envios de formulários nos quais um usuário deseja marcar o resultado como favoritoGET é melhor para dados não seguros, como cadeias de consulta no Google fonte: https://www.w3schools.com/tags/att_form_method.asp
- post
- <label>
- for
- Define um rótulo ou legenda para um campo ou controle do formulário;
- action
- <button>
- define um botão
- <select>
- <option>
- Define uma lista de opções dentro de um drop-down;
- <optgroup>
- Define um grupo de opções;
- <fieldset>
- Define um grupo de campos;
- <output>
- Define elementos de saída para o formulário;
- <legend>
- Define um título para o conjunto de campos.
- <form>
- tag principal
- lang
- pt-BR
- define que o idioma da página é português do Brasil
- define o idioma principal da página
- pt-BR
- <head>
- todas as tags estarão entre "<" e ">"
- define que a página esta em html5
- define-se na primeira linha do código
- Sintaxe
Informações
- Descrição
- Mapa Mental sobre HTML5, criado por Jorge Quirino em 18-04-2020.
- Criado por
- Jorge Quirino
- Visualizações
- 1
- Avaliação