Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
<p>Desenvolvimento Web</p><p>Universidade Regional Integrada do Alto Uruguai e das Missões -</p><p>Campus Erechim</p><p>Prof. Jackson Felipe Magnabosco</p><p>Criação e formatação de páginas</p><p>web com HTML</p><p>Introdução</p><p>● Reconhecer as declarações de documentos</p><p>HTML.</p><p>● Identificar e aplicar as tags do HTML.</p><p>● Criar páginas web com HTML.</p><p>Qual o significado de HTML ?</p><p><HTML> <Hypertext Markup Language></p><p>Linguagem de marcação por hipertexto</p><p>Exemplo</p><p>https://docs.google.com/document/d/1qIFgea0S0IXp83P4HjWMLdYgCYn0_BsYDhalPNOc3U8/edit?usp=sharing</p><p>Tags</p><p>Tags Estruturais</p><p><html>: Envolve todo o conteúdo de uma página HTML.</p><p><head>: Contém metadados e links para scripts e estilos.</p><p><body>: Contém todo o conteúdo visível da página.</p><p><header>: Define o cabeçalho de uma seção ou página.</p><p><footer>: Define o rodapé de uma seção ou página.</p><p><main>: Representa o conteúdo principal de uma página.</p><p><section>: Define uma seção do documento.</p><p><article>: Define um artigo independente.</p><p><nav>: Define uma seção de links de navegação.</p><p><aside>: Define conteúdo relacionado ao conteúdo principal, como barras</p><p>laterais.</p><p>Tags de Cabeçalho</p><p><title>: Define o título da página (aparece na aba do navegador).</p><p><meta>: Define metadados, como descrição, palavras-chave, etc.</p><p><link>: Usado para linkar arquivos externos como CSS.</p><p><style>: Contém regras CSS internas.</p><p><script>: Insere ou referência scripts JavaScript.</p><p><base>: Define a URL base para links relativos.</p><p>Tags de Conteúdo</p><p><h1> a <h6>: Define cabeçalhos, com <h1> sendo o mais importante.</p><p><p>: Define um parágrafo.</p><p><ul>: Define uma lista não ordenada.</p><p><ol>: Define uma lista ordenada.</p><p><li>: Define um item de lista.</p><p><a>: Define um link.</p><p><img>: Insere uma imagem.</p><p>Tags de Conteúdo</p><p><video>: Insere um vídeo.</p><p><audio>: Insere um áudio.</p><p><figure>: Representa conteúdo ilustrado, como uma imagem com</p><p>legenda.</p><p><figcaption>: Define uma legenda para um <figure>.</p><p><blockquote>: Define uma citação em bloco.</p><p><cite>: Define uma citação breve.</p><p><code>: Define um trecho de código.</p><p><pre>: Define um texto pré-formatado.</p><p>Tags de Formatação de Texto</p><p><b>: Negrito.</p><p><strong>: Forte ênfase (também renderizado em negrito).</p><p><i>: Itálico.</p><p><em>: Ênfase (também renderizado em itálico).</p><p><u>: Sublinhado.</p><p><mark>: Destaca texto.</p><p><small>: Texto pequeno.</p><p><sup>: Sobrescrito.</p><p><sub>: Subscrito.</p><p><del>: Texto riscado (deletado).</p><p><ins>: Texto inserido (sublinhado).</p><p>Tags de Formulário</p><p><form>: Define um formulário.</p><p><input>: Define um campo de entrada.</p><p><textarea>: Define uma área de texto.</p><p><button>: Define um botão.</p><p><label>: Define um rótulo para um <input>.</p><p><select>: Define uma lista suspensa.</p><p><option>: Define uma opção em uma lista suspensa.</p><p><fieldset>: Agrupa elementos de formulário.</p><p><legend>: Define uma legenda para um <fieldset>.</p><p><datalist>: Define uma lista de opções predefinidas para um <input>.</p><p>Tags Semânticas</p><p><time>: Representa uma data/hora.</p><p><address>: Define informações de contato.</p><p><data>: Liga um dado a um conteúdo de texto.</p><p><mark>: Realça um texto (destaque).</p><p>Tags Multimídia e Incorporadas</p><p><embed>: Incorpora conteúdo de uma fonte externa.</p><p><object>: Define um objeto incorporado.</p><p><param>: Define parâmetros para <object>.</p><p><iframe>: Insere um documento dentro de outro.</p><p>Tags Tabelas</p><p><table>: Define uma tabela.</p><p><tr>: Define uma linha em uma tabela.</p><p><td>: Define uma célula de dados.</p><p><th>: Define uma célula de cabeçalho.</p><p><thead>: Agrupa o cabeçalho de uma tabela.</p><p><tbody>: Agrupa o corpo de uma tabela.</p><p><tfoot>: Agrupa o rodapé de uma tabela.</p><p><caption>: Adiciona um título a uma tabela.</p><p><colgroup>: Define um grupo de colunas.</p><p><col>: Define propriedades para cada coluna dentro de <colgroup>.</p><p>Tags Interativas</p><p><details>: Define detalhes adicionais que o usuário pode visualizar.</p><p><summary>: Define um cabeçalho visível para um elemento <details>.</p><p><dialog>: Define uma caixa de diálogo.</p><p>IDE (Ambiente de Desenvolvimento Integrado)</p><p>IDE - Baixando o Visual Studio Code</p><p>IDE - Baixando o Visual Studio Code</p><p>IDE - Baixando o Visual Studio Code</p><p>IDE - Instalando o Visual Studio Code</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>IDE - Passo a passo da instalação</p><p>Criação do Projeto</p><p>Abrir o projeto na IDE</p><p>Organização</p><p>● O arquivo principal de um site deve ser</p><p>nomeado como "index.html", pois é o</p><p>que o navegador carrega ao visitar o</p><p>site.</p><p>● Organizar os arquivos em pastas e</p><p>subpastas é uma boa prática para</p><p>manter a estrutura do site clara e bem</p><p>organizada</p><p>Figma</p><p>https://www.figma.com/design/2g4bAm7EnKUsyaS7KBmwBD/Portifolio---Desenvolvimento-Web?node-id=1-7&t=4oFjtVjIi5cUBlvA-0</p><p>Hora de codificar!</p><p>Vamos mergulhar no HTML e</p><p>construir a base de uma página</p><p>web.</p><p>Disponível em:</p><p>● Github:https://github.com/jacksonn45</p><p>5/desenvolvimento-web-aula-html/tree</p><p>/master</p><p>● Github Pages:</p><p>https://jacksonn455.github.io/desenv</p><p>olvimento-web-aula-html/</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-html/tree/master</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-html/tree/master</p><p>https://github.com/jacksonn455/desenvolvimento-web-aula-html/tree/master</p><p>https://jacksonn455.github.io/desenvolvimento-web-aula-html/</p><p>https://jacksonn455.github.io/desenvolvimento-web-aula-html/</p><p>Introdução</p><p>● Diferenciar requisitos de negócio, de cliente, de sistema e</p><p>de usuários.</p><p>● Elaborar a documentação de requisitos e regras de</p><p>negócio.</p><p>● Classificar os requisitos por prioridade (essencial,</p><p>importante e desejável</p><p>Dúvidas ou sugestões ?</p><p>Desenvolvimento Web</p><p>Universidade Regional Integrada do Alto Uruguai e das Missões -</p><p>Campus Erechim</p><p>Prof. Jackson Felipe Magnabosco</p>
Mais conteúdos dessa disciplina
Ler em voz alta O frio interno na medicina tradicional chinesa é principalmente causado por: A Exposição prolongada ao frio externo B Deficiênc...- Quais são os sinais e sintomas característicos do calor vazio na medicina tradicional chinesa? A Sensação de calor no final da tarde e boca seca...
- Segundo a Medicina Tradicional Chinesa (MTC), como são caracterizadas as síndromes internas? A Afetam apenas a pele e os meridianos B São causa...
- Algumas características importantes, segundo a ANVISA: Devem serresistenteaágua, serestável,foto-estável, seguroeeconômico. Nãodeve manchar
- Algumas características importantes, segundo a ANVISA: Devem serresistenteaágua, serestável,foto-estável, seguroeeconômico. Nãodeve manc...
- Qual complicação é mais comum em aplicação de toxina botulínica na região frontal? a) Ptose palpebral b) Necrose cutânea c) Reação alérgica gra...
- Existem diversas técnicas de tratamento e recuperação de lesões. Porém, contraindicações devem ser analisadas particularmente. Assinale a alternativa
- Qual associação de protocolos pode ser recomendada para melhorar a textura da pele e estimular a produção de colágeno? Questão 7 Resposta a. Peelin...
- Quanto à associação de microagulhamento com peelings químicos: Questão 4 Resposta a. Uma associação considerada segura é o microagulhamento com pro...
- Propôs a escrever sobre a definição, âmbito e significado da hermenêutica: Questão 7Escolha uma opção: a. Amaral b. Palmer c. Gadamer d. ...
- No tratamento do linfedema, utilizamos como recurso terapêutico o manual a drenagem linfática manual. Com relação a essa técnica, assinale a propositi
- As manobras de drenagem linfática manual é contraindicado em alguns casos. Sobre isso, assinale a alternativa que corresponde aos casos em que essa ma
- No procedimento da mamoplastia, o fisioterapeuta dermatofuncional atua para prevenir as complicações pós-operatórias. Assinale a alternativa em que es
- BHeart Health Tracker - O primeiro rastreador de saúde do mundo Explorando tudo o que há para saber
- Robôs de IA emocionalmente expressivos com ChatGPT aprimoram a colaboração humana diz estudo