UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 Introdução ao HTML Linguagem de marcação baseada em tags. Tags possuem uma ordem formando o corpo da página. Arquivos possuem extensão htm ou html. Arquivos são interpretados pelo navegador ao serem abertos. Introdução ao HTML Existem editores online que permitem visualizar os resultados em tempo real! http://liveweave.com/ é um bom exemplo! Iremos utilizar a ide Eclipse ou qualquer editor de texto para codificação. Introdução ao HTML Cabeçalho - Contém as informações básicas da página, como título, URL base para todas as URIs da página, inclusão de arquivos, informações sobre estilo e metadados. Introdução ao HTML Tags do Head: <head> </head> - Indica início e fim do bloco de cabeçalho. <title></title> - Título da página <base></base> - URL base para todas as URIs da página <link> </link> - Arquivos externos importados pela página. <style> </style> - Configurações de estilo (CSS) da página <meta></meta> - Configurações de metadados (autor,descrição, palavras-chave,atualização periódica, codificação) da página. <script> </script> - Scripts contidos na página ou importados por ela. Introdução ao HTML • Exemplo de bloco Head simples: • Exemplo de bloco Head mais completo: Introdução ao HTML Bloco Body Bloco contendo o corpo da página, como formulários, textos, etc. Tudo que será efetivamente visível ao usuário final. Introdução ao HTML • Estrutura básica do corpo de uma página HTML: Introdução ao HTML Comentários – Comentários em HTML são feitos através da tag <!-- -->, servindo para bloco ou linha. Quebra de linha – Feito através da tag <br> Espaçamento – Utiliza-se o comando Introdução ao HTML Tags para títulos – Aumentam ou reduzem o tamanho da fonte de acordo com a tag escolhida. Existem seis tipos: <h1> ... <h6> Introdução ao HTML Linhas – Feitas através da tag <hr>. Listagem – Podem ser ordenadas (tag <ol>), não ordenadas (tag <ul>) ou de descrição (dl). Cada item é identificado com a tag <li> (tags <ol> e <ul>) e <dt> (tag <dl>). Parágrafos – Definidos através da tag <p>. Navegador adiciona uma quebra automática entre parágrafos. Caso seja utilizado o atributo title, teremos uma DICA quando o mouse for posicionado em cima do texto! Introdução ao HTML • Exemplo de lista ordenada: • Exemplo de lista não ordenada: Introdução ao HTML • Exemplo de lista descritiva: Introdução ao HTML Exercício rápido! Criar uma página básica HTML com título, lista ordenada, lista não ordenada, uma lista descritiva e uma linha separadora entre cada uma das listas. Listas podem conter novas listas! Como fazer isso? Testem! Introdução ao HTML Listas ordenadas podem conter identificadores próprios. Exemplo: <ol type=“A”> - Ordenamento com letras maiúsculas. <ol type=“a”> - Ordenamento com letras minúsculas. <ol type=“I”> - Ordenamento com algarismos romanos em maiúsculo. <ol type=“i”> - Ordenamento com algarismos romanos em minúsculo. Introdução ao HTML Exercício! Modifique as listas criadas anteriormente para algarismos romanos em maiúsculo e crie uma nova lista com numeração alfabética em minúsculo. Introdução ao HTML Listas não ordenadas podem conter delimitadores próprios. Exemplos: <ul style="list-style-type:disc"> - Adiciona círculos preenchidos aos itens. <ul style="list-style-type:circle"> Adiciona círculos não preenchidos aos itens. <ul style="list-style-type:square"> Adiciona quadrados preenchidos aos itens. Introdução ao HTML Exercício! Modifique a lista não ordenada criada anteriormente para o tipo circle. Crie uma lista encadeada dentro desta lista modificada com o tipo square. Introdução ao HTML Novos elementos foram adicionados com o HTML 5, as principais são: <article> - Define um artigo no documento; <aside> - Define um conteúdo fora do conteúdo da página; <details> - Define detalhes adicionais que o usuário pode ver ou esconder; <dialog> - Uma caixa de diálogo ou janela; <figure> - Define imagens, diagramas, ilustrações, fotos, códigos, etc... <footer> e <header> - Conteúdos para rodapé e cabeçalho; <main> - Conteúdo principal do documento; <section> - Define uma seção no documento; <time> - Define data/hora. Introdução ao HTML Formatação de texto: <i> e <em> - Coloca o texto em itálico (ênfase). <s> e <del> - Risca o texto. <b> e <strong> - Coloca o texto em negrito (destaque). <small> - Reduz o tamanho do texto. <sub> e <sup> - Texto sobrescrito e superscrito. <ins> - Define um texto inserido (sublinhado). Introdução ao HTML Exercício! Escreva o seguinte texto utilizando as tags de formatação <ins>, <b>,<i>, <sup>, <dell>,<small> e <sub>: “É IMPORTANTE destacar expressões ad-hoc como 2 elevado n , log n na base 10 ...” Introdução ao HTML Tabelas Definidas com a tag <table> Possui linhas (<tr>) e colunas (<td>), podendo possuir cabeçalho (<th>). Principais Atributos: Border – Adiciona bordas da espessura desejada. Bordercolor – Modifica a cor da borda. Colspan – Dá um merge em mais de uma coluna, numa mesma linha. Rowspan – Dá um merge em mais de uma linha, numa mesma coluna. Width – Define comprimento da tabela. Height – Define largura da tabela. Cellspacing – Define espaçamento entre colunas. Cellpadding – Define espaçamento entre conteúdo da coluna e suas bordas. Align – Alinhamento de conteúdo. Pode assumir os valores left (esquerda), center (centro), right (direita). Introdução ao HTML No HTML 5 as propriedades das tabelas citadas anteriormente não são mais suportadas. Como, então, resolver? Utilizando estilos via CSS! Introdução ao HTML • Exemplo de tabela simples: • Exemplo de tabela com bordas vermelhas: Introdução ao HTML • Exemplo de tabela com cabeçalho horizontal: • Exemplo de tabela com cabeçalho vertical: Introdução ao HTML Cores Existem duas formas de informar as cores: Valor hexadecimal (segunda figura) Nome da cor (primeira figura) Introdução ao HTML Exercício! Fazer uma tabela com 3 colunas e 3 linhas, tendo rótulos vertical E horizontal. Possuir comprimento de 100% e alinhamento do conteúdo centralizado. Colocar borda de 3px, na cor verde claro.Resultado esperado: Introdução ao HTML Tags importantes em HTML: <img> - Adiciona um arquivo de imagem. <a> - Adiciona links relativos ou absolutos ao conteúdo. <iframe> - Exibe uma página dentro de outra página. Introdução ao HTML Tag <img> Atributos: Src – Indica o caminho da imagem a ser anexada. Alt – Indica um texto alternativo quando se posiciona o mouse em cima da imagem. Width – Largura da imagem. Height – Altura da imagem. Align – Alinhamento (center, left, right). Introdução ao HTML Tag <a> Atributos: Href – Indica o link para o direcionamento. Target – Indica a janela alvo (_blank,_parent) para abrir o link. Id – Indica um link interno na própria página. Introdução ao HTML Exercício! Adicionar uma figura na página de aprendizado já criada e colocar esta figura como um link para a página do Google. Em seguida, colocar esta figura como parte da informação da tabela anteriormente criada, com alinhamento centralizado. Introdução ao HTML Tag <iframe> Atributos básicos: Src – Indica o endereço da página a ser carregada. Width – Comprimento do quadro na página. Height – Largura do quadro na página. Novos atributos adicionados no HTML 5: Sandbox – Habilita um conjunto de restrições de conteúdo para o iframe; Suportado em todos os navegadores. Seamless – Especifica que o iframe deve parecer uma parte do documento em que está contido; Ainda não suportado em nenhum navegador. Srcdoc – Especifica o conteúdo HTML para ser exibido no iframe. Caso o navegador suporte HTML5 e esta tag, o iframe irá substituir o conteúdo da tag src pelo conteúdo desta tag. Caso a tag não seja suportada, o navegador irá exibir o link da tag src. Não suportado no IE. Introdução ao HTML Exercício! Criar uma segunda página com título testeIframe.html e, nesta nova página, criar dois parágrafos com um texto qualquer,sendo que em um deles inserir uma tabela e em outro uma imagem. Chamar esta nova página via iframe na primeira página criada. Utilizar as novas tags do HTML 5 para verificar sua funcionalidade. Introdução ao HTML Referência http://www.w3schools.com/html
Download
