Aula WEBI02 (Introdução ao HTML)

Prévia do material em texto

<p>Desenvolvimento</p><p>Web I</p><p>Desenvolvimento de Software Multiplataforma</p><p>Prof. Esp. Wládisson Mancinelli Júnior</p><p>wladisson.mancinelli@fatec.sp.gov.br</p><p>Aula 02 Introdução ao HTML</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>O que é HTML?</p><p>Definição: HTML (HyperText Markup Language) é a linguagem de marcação de hipertexto usada</p><p>para criar e estruturar páginas web.</p><p>"Hipertexto“ refere se aos links que conectam páginas da Web entre si, seja dentro de um único</p><p>site ou entre sites Links são um aspecto fundamental da web Ao carregar conteúdo na Internet e</p><p>vinculá lo a páginas criadas por outras pessoas, você se torna um participante ativo na world</p><p>wide web.</p><p>Função: HTML fornece a estrutura básica de uma página web, organizando o conteúdo em</p><p>elementos e seções.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>O que é HTML?</p><p>O HTML usa " para anotar texto, imagem e outros conteúdos para exibição em um navegador da</p><p>Web.</p><p>A marcação HTML inclui “elementos” especiais, como:</p><p>, , , , , , , , , , ,</p><p>, , , , , , , entre muitos.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Estrutura do HTML</p><p>A Estrutura de qualquer documento HTML é esta.</p><p>As marcações são feitas através de tags, de</p><p>abertura e de fechamento. Usa-se o sinal de maior</p><p>e menor, e nos fechamentos de blocos usa se a</p><p>barra.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags do HTML</p><p>Uma tag é um conjunto de palavras entre sinais de menor maior “”.</p><p>Por exemplo:</p><p>Esta tag representa um parágrafo</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Além da abertura e fechamento, as tags podem ter atributos e valores.</p><p>Link de Contato</p><p>Abertura e fechamento da tag ancora</p><p>Atributo com o caminho de referência href=“ “</p><p>Documento/Caminho de redirecionamento</p><p>Conteúdo de texto exibido na página</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para textos</p><p>linha horizontal (horizontal row)</p><p>quebra de linha (break)</p><p>parágrafo</p><p>transforma o conteúdo em itálico</p><p>transforma o conteúdo em negrito</p><p>utilizada para representar conteúdo pré-formatado</p><p>delimitar o texto que deseja demarcar</p><p>texto que pode ser lido, mais deve ser desconsiderado</p><p>texto deve ser lido e deve prestar atenção nele</p><p>texto acima da linha da fonte</p><p>texto abaixo da linha da fonte</p><p>para exibição de blocos de código de programação</p><p>citação curtas de outros autores</p><p>citações mais longas (blocos)</p><p>abreviações de palavras com legendas</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para ligação entre partes</p><p>Para criarmos hiperlinks devemos criar âncoras através da tag .</p><p>O principal atributo dessa tag é href, ou seja, referência de hipertexto.</p><p>Nome exibido no link</p><p>Nome exibido no link</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para ligação entre partes</p><p>Podemos também passar o atributo indicando o idioma do site do link, permitindo os</p><p>navegadores lidar com tradução.</p><p>Site da W3Schools em Inglês</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para ligação entre partes</p><p>Por padrão, um link é aberto na mesma janela do site que está em exibição.</p><p>Caso desejemos que ao clicar em um link, abra outra janela, podemos adicionar o atributo target.</p><p>Meu link</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para links de downloads</p><p>Temos também links de downloads de arquivos. Para criarmos um, usamos o atributo download e</p><p>o atributo type.</p><p>Baixe o documento aqui</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para links de download</p><p>Além de arquivos PDF, podemos fornecer diversos outras extensões de arquivos.</p><p>• application/zip</p><p>• text/html</p><p>• text/css</p><p>• text/javascript</p><p>• video/mp4</p><p>• video/H264</p><p>• video/JPEG</p><p>• audio/aac</p><p>• audio/mpeg</p><p>• font/ttf</p><p>• image/jpeg</p><p>• image/png</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para comentários</p><p>Comentários são úteis para que nos desenvolvedores anotemos detalhes que possam ser</p><p>esquecidos futuramente.</p><p>Para comentar basta:</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags estruturais</p><p>Tags HTML – estruturais</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags estruturais</p><p>Tags HTML – estruturais</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags para listas</p><p>-Título de maior nível hierárquico</p><p>-Título de menor nível hierárquico</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Tags com web semântica</p><p>- Delimita a tabela</p><p>– Cabeçalho da tabela</p><p>– Corpo da tabela;</p><p>– Rodapé da tabela.</p><p>- Linhas da tabela</p><p>- Colunas do thead</p><p>- Colunas do tbody</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>A declaração é uma instrução no HTML que informa ao navegador qual</p><p>versão do HTML está sendo usada no documento. Ela deve ser a primeira linha do código HTML</p><p>e é crucial para garantir que o navegador renderize a página corretamente, de acordo com o</p><p>padrão especificado.</p><p>Função da Declaração</p><p>Define o Tipo de Documento: A declaração especifica que o documento está</p><p>usando HTML5, a versão mais recente e amplamente suportada do HTML. HTML5 é o padrão</p><p>atual para desenvolvimento web e inclui melhorias em relação às versões anteriores.</p><p>Modo de Renderização: Ajuda os navegadores a entender como interpretar o código HTML.</p><p>Usar faz com que o navegador use o modo de renderização padrão (ou modo</p><p>padrão), que aplica as regras mais recentes e corretas de HTML e CSS.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Compatibilidade e Consistência: Garante que a página seja exibida de maneira consistente em</p><p>diferentes navegadores. Sem a declaração , alguns navegadores podem entrar</p><p>no modo de compatibilidade, que tenta imitar o comportamento de versões mais antigas do</p><p>HTML e pode resultar em inconsistências na renderização.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Importância do HTML</p><p>Papel fundamental: HTML é a base de toda página web. Sem HTML, não haveria conteúdo</p><p>para estilizar com CSS ou interagir com JavaScript.</p><p>Introdução ao HTML</p><p>Desenvolvimento Web I</p><p>Estrutura Básica de um Documento HTML</p><p>Declaração do Tipo de Documento:</p><p>Elementos principais:</p><p>: Elemento raiz que contém todo o documento.</p><p>: Contém metadados e links para recursos externos.</p><p>: Contém o conteúdo visível da página.</p><p>Estrutura e Elementos HTML</p><p>Desenvolvimento Web I</p><p>Estrutura Básica</p><p>Exemplo de Código:</p><p>Minha Primeira Página</p><p>Bem-vindo ao HTML!</p><p>Este é um parágrafo de exemplo.</p><p>Desenvolvimento</p><p>Web I</p><p>Desenvolvimento de Software Multiplataforma</p><p>Prof. Esp. Wládisson Mancinelli Júnior</p><p>wladisson.mancinelli@fatec.sp.gov.br</p><p>Aula 01 Introdução</p><p>Slide 1</p><p>Slide 2</p><p>Slide 3</p><p>Slide 4</p><p>Slide 5</p><p>Slide 6</p><p>Slide 7</p><p>Slide 8</p><p>Slide 9</p><p>Slide 10</p><p>Slide 11</p><p>Slide 12</p><p>Slide 13</p><p>Slide 14</p><p>Slide 15</p><p>Slide 16</p><p>Slide 17</p><p>Slide 18</p><p>Slide 19</p><p>Slide 20</p><p>Slide 21</p><p>Slide 22</p><p>Slide 23</p>