Criado por Paulo Sérgio
quase 7 anos atrás
|
||
Questão | Responda |
HTML | A Linguagem de Marcação de Hipertexto (HTML - HyperText Markup Language) é uma linguagem de marcação utilizada para produzir páginas na Web que são interpretadas pelos navegadores. Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows. |
<meta charset="UTF-8"> | Quando gravamos arquivos, há diferentes formatos de armazenar os caracteres em bytes, O Chrome, por padrão, tentará lê-lo em uma codificação conhecida por latin1. Se gravamos nosso arquivo em outro formato, precisamos colocar essa informação no HTML que possui uma série de tags que nem mesmo marcam o texto, e sim dão meta informações ao arquivo. |
<meta name="description" content="Free Web tutorials"> | Definir uma descrição da sua página da Web: |
<meta name="author" content="John Doe"> | Definir o autor de uma página |
<meta http-equiv="refresh" content="30"> | Atualize o documento a cada 30 segundos |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Configurando a viewport para tornar o seu site bom em todos os dispositivos |
Metadados são dados (informações) sobre dados. | A marca <meta> fornece metadados sobre o documento HTML. Os metadados não serão exibidos na página, mas serão analisáveis por máquina. Os elementos meta normalmente são usados para especificar a descrição da página, as palavras-chave, o autor do documento, a última modificação e outros metadados. Os metadados podem ser usados por navegadores (como exibir conteúdo ou recarregar página), motores de busca (palavras-chave) ou outros serviços da Web. O HTML5 introduziu um método para permitir que os web designers assumissem o controle sobre a viewport (a área visível do usuário de uma página da web), através da marca <meta> (veja o exemplo "Configuração do Viewport" abaixo). |
<! DOCTYPE> | A declaração <! DOCTYPE> deve ser a primeira coisa no seu documento HTML, antes da tag <html>. A declaração <! DOCTYPE> não é uma tag HTML; é uma instrução para o navegador web sobre a versão do HTML em que a página está escrita. |
<! --...--> | A etiqueta de comentário é usada para inserir comentários no código-fonte. Os comentários não são exibidos nos navegadores. |
<a> | A tag <a> define um hiperlink, que é usado para vincular de uma página para outra. |
<abbr> | A marca <abbr> define uma abreviatura ou um acrônimo, como "Sr.", "Dec.", "ASAP", "ATM". Dica: uma abreviatura e um acrônimo são versões abreviadas de outra coisa. Ambos são frequentemente representados como uma série de letras. As abreviaturas de marcação podem fornecer informações úteis para navegadores, sistemas de tradução e mecanismos de pesquisa. |
<address></address> | A marca <endereço> define as informações de contato para o autor / proprietário de um documento ou um artigo. Se o elemento <address> estiver dentro do elemento <body>, ele representa as informações de contato para o documento. Se o elemento <endereço> estiver dentro de um elemento <artigo>, ele representa as informações de contato para esse artigo. O texto no elemento <endereço> normalmente é traduzido em itálico . A maioria dos navegadores irá adicionar uma quebra de linha antes e depois do elemento de endereço. |
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> | A tag <área> define uma área dentro de um mapa de imagem (um mapa de imagem é uma imagem com áreas clicáveis). O elemento <area> está sempre aninhado dentro de uma marca <map>. Nota: O atributo usemap na marca <img> está associado ao atributo do nome do elemento <map> e cria uma relação entre a imagem e o mapa. |
<article></article> | A tag <article> especifica conteúdo autônomo independente. Um artigo deve ter sentido por conta própria e deve ser possível distribuí-lo independentemente do resto do site. Fontes potenciais para o elemento <article>: Postagem do fórum Postagem do blog Notícia Comente |
<body style="background-color:powderblue;"> | A propriedade background-color define a cor de fundo para um elemento HTML. |
<h1 style="color:blue;">This is a heading</h1> | A propriedade de cor define a cor do texto para um elemento HTML: |
<h1 style="font-family:verdana;">This is a heading</h1> | A propriedade font-family define a fonte a ser usada para um elemento HTML |
<h1 style="font-size:300%;">This is a heading</h1> | A propriedade font-size define o tamanho do texto para um elemento HTML |
<h1 style="text-align:center;">Centered Heading</h1> | A propriedade text-align define o alinhamento de texto horizontal para um elemento HTML |
<b> | texto em negrito |
<strong> | Texto importante |
<i> | texto itálico |
<em> | texto enfatizado |
<marca> | texto marcado |
<small> | Texto pequeno |
<q> | O elemento HTML <q> define uma pequena cotação. |
<blockquote> | O elemento HTML <blockquote> define uma seção que é citada de outra fonte. |
Você pode definir a cor das bordas: | <h1 style="border:2px solid Tomato;">Hello World</h1> |
. | class |
# | id |
(9, 100%, 64%, 0.5) | hsl ( tonalidade , saturação , leveza ) |
(255, 99, 71, 0.5) | rgba ( vermelho, verde , azul, alfa ) |
#ff6347 | hex m HTML, uma cor pode ser especificada usando um valor hexadecimal na forma: |
Tipos de CSS | Inline - usando o atributo de estilo em elementos HTML Interno - usando um elemento <style> na seção <head> Externo - usando um arquivo CSS externo |
Os links HTML são hiperlinks | <a href="url">link text</a> |
Em HTML, as imagens são definidas com a marca <img> | <img src="img_chania.jpg" alt="Flowers in Chania"> |
Use a marca <map> | <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map> |
Para adicionar uma imagem de fundo em uma página da Web, | <body style="background-image:url('clouds.jpg')"> |
Mostre uma imagem se a janela do navegador (viewport) for um mínimo de 650 pixels, e outra imagem se não, mas maior que 465 pixels. | <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> |
<table> | Uma tabela HTML é definida com a tag <table> |
<tr> | Cada linha de tabela é definida com a marca <tr> |
<th> | Um cabeçalho da tabela é definido com a tag <th> Por padrão, os cabeçalhos das tabelas são negrito e centrado |
<td> | Um dado de tabela / célula é definido com a tag <td> |
<caption> | Use o elemento HTML <caption> para definir uma legenda da tabela |
text-align | Use a propriedade CSS text-align para alinhar o texto da célula |
colspan | Use o atributo colspan para criar uma célula várias colunas <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> |
rowspan | Para tornar uma célula mais de uma linha, use o atributo rowspan : <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> |
<colgroup> e <col> | Especifica um grupo de uma ou mais colunas em uma tabela para formatação <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> |
<thead> | A tag <thead> é usada para agrupar conteúdo de cabeçalho em uma tabela HTML. thead { display: table-header-group; vertical-align: middle; border-color: inherit; } |
<tbody> | A marca <tbody> é usada para agrupar o conteúdo do corpo em uma tabela HTML. tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } |
<tfoot> | A marca <tfoot> é usada para agrupar o conteúdo do rodapé em uma tabela HTML. tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; } |
<ul> | Uma lista não ordenada começa com a tag <ul> Cada item de lista começa com a marca <li> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
<ol> | Uma lista ordenada começa com a marca <ol> . Cada item de lista começa com a marca <li> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
<div> | O elemento <div> é um elemento de nível de bloco. |
<form> | Um formulário HTML com dois campos de entrada e um botão enviar: <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> |
<input> | A tag <input> especifica um campo de entrada onde o usuário pode inserir dados. |
<textarea> | A tag <textarea> define um controle de entrada de texto de várias linhas. |
<button> | A marca <button> define um botão clicável. |
<select> | O elemento <select> é usado para criar uma lista suspensa. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> |
<option> | A tag <option> define uma opção em uma lista de seleção. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> |
<optgroup> | O <optgroup> é usado para agrupar opções relacionadas em uma lista suspensa. <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> |
<fieldset> | A tag <fieldset> é usada para agrupar elementos relacionados em um formulário. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> |
<label> | A marca <label> define um rótulo para um elemento <input>. <form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form> |
<video> | Para mostrar um vídeo em HTML, use o elemento <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
<audio> | Para reproduzir um arquivo de áudio em HTML, use o elemento <audio> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
<object> | O elemento <object> é suportado por todos os navegadores. <object width="400" height="50" data="bookmark.swf"></object> |
<canvas> | O elemento HTML <canvas> é usado para desenhar gráficos em uma página da Web. O elemento HTML <canvas> é usado para desenhar gráficos, sobre a marcha, via JavaScript. |
SVG | O que é SVG? SVG significa gráficos vetoriais escaláveis SVG é usado para definir gráficos para a Web SVG é uma recomendação do W3C |
Quer criar seus próprios Flashcards gratuitos com GoConqr? Saiba mais.