Roteiro 01 Professor: Prof. M.Sc. Odilon Corrêa da Silva Curso: Engenharia de Computação Disciplina: Programação para WEB
Roteiro 01 Objetivos Apresentar os conceitos básicos do HTML Criar listas em páginas HTML Inserir imagens em páginas HTML Criar links entre páginas HTML Conhecer a proposta do HTML 5 Sugestão de vídeos aulas 2
Conceitos básicos do HTML HTML Estrutura Básica A estrutura básica que deve ser seguida para que os navegadores interpretem corretamente um documento HTML é apresentada abaixo: 3
Conceitos básicos do HTML HTML Estrutura Básica Exemplo arquivo: exemplo01.html 4
Conceitos básicos do HTML HTML Estrutura Básica Exemplo arquivo: exemplo01.html 5
Conceitos básicos do HTML HTML - Tags utilizadas no exemplo <DOCTYPE>: essa tag define qual é tipo do documento <html>: representa a raiz de um documento HTML. Todas as outros tags devem estar dentro dessa tag <head>: agrupa informações para o navegador entender melhor nossa página, como o título da página e a codificação <meta>: define os metadados que serão utilizados pela. A codificação de caracteres UTF-8 oferece suporte para vários idiomas <title>: essa tag define o título do documento que será apresentado na barra de título do navegador <body>: agrupa as informações que queremos mostrar para os usuários 6
Conceitos básicos do HTML HTML - Tags utilizadas no exemplo <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: são tags que representam os seis níveis de títulos de cabeçalhos dos documentos. <p>: define um texto que será exibido como um parágrafo. <em>: representa a ênfase do texto em itálico. <br>: criar uma quebra de linha. <strong>: representa a ênfase do texto em negrito. 7
Listas em páginas HTML HTML Listas A linguagem HTML contém elementos que permitem criar listas ordenadas, não ordenadas e de definições arquivo: exemplo02.html 8
Listas em páginas HTML HTML Listas arquivo: exemplo03.html 9
Listas em páginas HTML HTML Listas arquivo: exemplo03.html 10
Listas em páginas HTML HTML Tags utilizadas nos exemplos <ul>: a tag (unordered list) representa uma lista de itens sem ordem rígida. <ol>: a tag (ordered list)define uma lista de itens ordenados. <li>: é uma tag (list item) usada para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai de uma lista ordenada (<ol>) ou desordenada (<ul>). <dl>: a tag (definition list) cria uma lista de definições composta por uma lista de pares de termos e descrições. <dt>: a tag (definition term) identifica um termo na lista de definição. <dd>: a tag (definition description) é usada para armazenar a descrição do termo. 11
Imagens em páginas HTML HTML Imagens Usamos a tag <img> para colocar imagens em página HTML. A tag possui o atributo src para indica a imagem que será exibida. O atributo alt permite definir uma descrição da imagem. Sintaxe: 12
Imagens em páginas HTML HTML Imagens arquivo: exemplo04.html 13
Imagens em páginas HTML HTML Imagens arquivo: exemplo04.html 14
Imagens em páginas HTML HTML Tags utilizadas no exemplo <img>: a tag (image) permite a inserção de uma imagem na página HTML. 15
Exercício Crie um arquivo exercicio.html, segundo a ilustração abaixo, utilizando os recursos (tags HTML) apresentados no roteiro. 16
Links em páginas HTML HTML Links Podemos utilizar links para relacionar páginas HTML. Por exemplo, a página de cursos do CEFET que contém os links das páginas dos cursos técnicos. Sintaxe: 17
Links em páginas HTML HTML Links arquivo: exemplo05.html 18
Links em páginas HTML HTML Links arquivo: exemplo05.html 19
Links em páginas HTML HTML Tags utilizadas no exemplo <a>: a tag (anchor) permite definir uma ligação (link) entre páginas HTML. O href é o principal atributo dessa tag. Ele indica o alvo/destino do link. 20
Exercício Crie uma página para cada cursos técnicos do CEFET: Edificações Desenvolvimento de Sistemas Química 21
Exercício Ilustração da página do Curso Técnico em Edificações 22
Exercício Ilustração da página do Curso Técnico em Desenvolvimento de Sistemas 23
Exercício Ilustração da página do Curso Técnico em Química 24
HTML 5 HTML 5 Devemos seguir alguns padrões ao descrever e estruturar uma página Web para que as máquinas de buscas (Google, Yahoo ou BING) consigam processar o seu conteúdo e, assim, tornar a informação mais acessível. Em outras palavras, devemos tentar deixar o nosso código HTML semântico, usando, para isso, as tags mais adequadas a cada tipo de conteúdo. Imagine uma região com links na lateral direita de uma página (Figura - Página principal do site do CEFET). Essa região terá um estilo próprio, diferente do resto do texto. Na versão mais recente do HTML surgiu a tag <nav>, que tem justamente esse propósito: indicar regiões da página que contêm links de navegação. 25
HTML 5 HTML 5 Figura Página principal do site do CEFET Campus Timóteo. 26
HTML 5 HTML 5 Um HTML semântico é tão importante que, em sua última atualização, a linguagem HTML incluiu diversas novas tags cujo único propósito é permitir uma marcação mais semântica para uma página HTML. A estrutura básica de documento dentro desse padrão deve utilizar as tags: <header>: cabeçalho da página ou de uma região <nav>: região para links de navegação <section>: seção de uma página ou texto <article>: conteúdo que tenha um sentido completo (exemplo: uma notícia) <aside>: conteúdo auxiliar ao conteúdo principal <footer>: rodapé da página ou de uma região Atenção: Existem muitas outras tags que estudaremos ao longo da disciplina. Por hora, podemos usar algumas das tags para deixar nosso código mais semântico. 27
HTML 5 HTML 5 A estrutura abaixo ilustra um documento com os recursos do HTML5: arquivo: exemplo06.html 28
HTML 5 HTML 5 A estrutura abaixo ilustra um documento sem os recursos do HTML5: arquivo: exemplo07.html 29
Exercício Modifique as páginas desenvolvidas no exercício anterior e inclua as tags do HTML5 apresentadas no roteiro. 30
Sugestão: assista as vídeos aulas HTML e CSS para iniciantes Parte 1 Nesta primeira vídeo aula a RBtech apresenta os conceitos básicos do HTML. Com esta aula você vai aprender a criar a estrutura mais simples de um documento HTML, definir títulos e também a codificação para seus documentos. HTML e CSS para iniciantes Parte 2 Na segunda vídeo aula a RBtech apresenta os recursos do editor Sublime Text e mais algumas tags do HTML. 31
Sugestão: assista as vídeos aulas HTML e CSS para iniciantes Parte 3 Na terceira aula a RBtech mostrar como criar listas, que são um dos elementos mais usados em páginas web. Existem três tipos de listas em HTML: As não ordenadas As ordenadas As de definição 32
Sugestão: assista as vídeos aulas HTML e CSS para iniciantes Parte 4 Na quarta vídeo aula a RBtech falar um pouco sobre boas práticas de desenvolvimento, tais como, indentação do código fonte, comentários nas páginas e elementos pais e filhos. HTML e CSS para iniciantes Parte 5 Na quinta vídeo aula a RBtech aborda a utilização correta das tags de cabeçalho e também as metas tags para otimizar suas páginas corretamente. 33
Sugestão: assista as vídeos aulas HTML e CSS para iniciantes Parte 6 Na sexta vídeo aula a RBtech apresenta a proposta do HTML 5 e como criar uma estrutura básica de documento dentro desse padrão. HTML e CSS para iniciantes Parte 7 Na sétima vídeo aula a RBtech apresenta três tags, a primeira delas, o blockquote, que serve para fazer citações em suas páginas. A segunda e mais importante tag em páginas web, os links, que servem para "levar" o visitante de uma página para outra dentro de um site. E por fim a terceira, que serve para inserir imagens em páginas. 34