Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
TecWeb - HTML
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
TecWeb – Elementos fundamentais 1. HTML Tags Elementos obrigatórios <!DOCTYPE html>: Declaração do documento em HTML 5 <html>, </html> <head>, </head>: Cabeçalho <meta charset="utf-8" /> <title>, </title>: Sempre dentro da tag “<head>” <body>, </body>: Conteúdo do documento Outros elementos <br>: Quebra de linha ou break <p>, </p>: Parágrafo <!-->: Comentário, *1 <hr>: Linha horizontal, *2 <h1> à <h6>: Tamanhos de cabeçalhos <ol>, </ol>: Lista ordenada, *3 <ul>, </ul>: Lista não ordenada <li>, </li>: Elementos da lista <li value =”4”>: O atributo value permite fixar um valor para elementos da lista <sup>: Texto sobrescrito <sub>: Texto subscrito <b>: Negrito <em>: Texto enfatizado, na prática significa texto em itálico <i>: Itálico <small>: Texto pequeno <strong>: Texto grande Exemplo <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Título do documento </title> </head> <body> Conteúdo do documento </body> </html> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.: <abbr> serve para abreviação <address>: Serve para colocar endereços – inclusive de e-mail. <bdo dir="rtl">This paragraph will go right-to-left.</bdo>: <bdo> inverte a ordem do texto (.tfel-ot-thgir og hpargarap sihT) *INÚTIL <blockquote cite="http://www.worldwildlife.org/who/index.html">: Útil para citações de outras fontes. <q>: Serve para pequenas citações <cite>: Define um título de um trabalho, como uma pintura <dfn>: Define um termo, <div>: Seções de um site. No HTML 5 é Seções: <header>, <nav>, <article> e <footer>; respectivamente: cabeçalho, seção de links para navegação, artigos e rodapé <section>: Define um bloco ou um grupo de um assunto específico. É importante entender que a section agrupa diversos elementos que tenham relação entre si. <aside>: Define um elemento lateral que pode conter blocos de navegação (NAVs), citações e outras informações que costumamos colocar em uma sidebar <dl>, <dd> e <dt>: Servem para agrupamento de especificações <table>: Tabela <tr>: Linha da tabela <td>: Célula da tabela <th>: Célula de topo <th colspan:”4”> Tabela de preços </th>: O atributo colspan mescla colunas da tabela <th rowspan:”4”> Tabela de preços </th>: O atributo rowspan mescla linhas da tabela <tbody>: Corpo da tabela <tfoot>: Rodapé da tabela <colgroup>: Grupo de colunas <colgroup span=”3”></colgroup>: O atributo span declara quantas colunas estão agrupadas <col>: Coluna – só será nomeada no caso de diversas classes ou grupos. Obs.: Para formatar colunas com estilos diferentes, o atributo class deve ser usado. <caption>: Título da tabela <form>: Formulário - <form> input elements(ex: <input type="text">)</form> <input>: É seguido de um comando controle <textarea>: Nome do formulário, geralmente aparece no corpo do site. <fieldset>: Elementos relacionados em um grupo <legend>: Dá um nome pra função “<fieldset>” <select>: Caixa de seleção: <optgroup>: Classificação dentro da caixa de seleção <option>: Opções da caixa de seleção <button>: Um botão clicável <datalist>: Um elemento com valores pré-definidos <keyegen>: É uma encriptação de um valor recebido <output>: Uma espécie de calculadora Inserindo e-mail Exemplo <form> First name: <input type="text" name="firstname"> <br /> Last name: <input type="text" name="lastname"> <br/> Password: <input type="password" name="pwd"> <br /> Declarando “pwd” tudo que for digitado será ocultado <input type="radio" name="sex" value="male">Male <br /> <input type="radio" name="sex" value="female">Female <br /> Caixa de seleção com bolinha <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> Caixa de seleção com “✓” ou “☑” <input type="checkbox" name="vehicle" value="Car">I have a car<br /> <input type="submit" value="Submit"> Reconhece como algo a ser enviado ou submetido </form> O elemento <label> fornece uma melhoria de usabilidade para usuários de mouse, porque se o usuário clica sobre o texto dentro do elemento <label>, alterna o controle. O atributo for da tag <label> deve ser igual ao atributo iddo elemento relacionado: <label for="male">Male</label><input type="radio" id="male" value="male“ /> <a href="mailto:webmaster@example.com">Jon Doe</a> Inserindo Imagens <img src=“ imagens\arquivo.jpg” alt=“um texto alternativo” /> Links3 Link comum Direcionado: <a href = "http://www.mackenzie.br/"> </a> Nova aba: <a href="URL DO LINK" target="_blank">TEXTO </a> Link em imagem Direcionado: <a href = "http://www.mackenzie.br/"> <img src = “mackenzie.gif" alt = “Mackenzie" /></a> Nova aba: Mesmo macete do comum figure/figcaption Acrescenta uma descrição na imagem <figure> <img src="/macaque.jpg" alt="Macaco nas árvores"> <figcaption> Macaco do rio Lower Kintaganban, Borneo. </figcaption> </figure> Ancora Cria uma ancora para o item - desejado - FCI: <a id=“fci”> FCI</a> Observações *1: <!--Isso é um comentário--> *2: __________________________ *3: O atributo reversed permite inverter a ordem dos elementos: <olreversed> O atributo start permite determinar o número inicial da lista: <olstart="15"> *4: Atributo summary é um metadado invisível destinado apenas às tecnologias assistivas. Cria uma ancora para o link - desejado – “visite a FCI”: <a href=“#fci”> visite a FCI </a> Cria um link para o “visite a FCI” de outra página: <a href=“http://www.mackenzie.br/fci.html#fci”> visite a FCI </a>
Continue navegando
Materiais relacionados
15 pág.
116 pág.
Perguntas relacionadas
Compartilhar