Estrutura HTML – Parte I

Estrutura HTML – Parte I
Programação WEB Prof. Flávio Izo Aula 03 Estrutura HTML – Parte I

Objetivos da Aula 1.0 Ferramentas necessárias; 2.0 O que é HTML?
3.0 O que são tags HTML? 4.0 Criando seu primeiro Website; 5.0 Outras tags HTML; 6.0 Atributos das tags HTML; 7.0 Criando links; 8.0 Exercício;

Introdução Criar um site não é tão difícil quanto parece;
É necessário ter disciplina e estar atento aos conceitos abordados e suas formas de aplicação;

1.0 Ferramentas Necessárias
Utilizaremos o notepad ou Notepad ++, tendo em vista que é um programa encontrado em qualquer equipamento; O que almeja-se agora é simplicidade, pois se aprendermos a criar um website (mesmo que simples) no notepad, posteriormente poderar-se-á utilizar qualquer outra ferramenta mais robusta (Frontpage, Dreamweaver etc.);

1.0 Ferramentas Necessárias
Outros editores que podem ser utilizados são: Pico (Linux) ou TextEdit (Mac); Outro programa que será necessário é o browser; Pode-se utilizar qualquer um: Firefox; Internet Explorer; Opera; etc.

2.0 O que é HTML? Língua mãe do navegador;
Inventado em 1990 por Tim Berners-Lee (troca de informações); HTML é uma linguagem que possibilita apresentar informações na Internet; Quando abre-se uma página na Internet, vê-se a interpretação que seu navegador faz do HTML;

2.0 O que é HTML? Façamos um teste: Acesse um site qualquer;
Clique com o botão direito; E clique em “código fonte” ou “exibir código fonte”;

2.0 O que é HTML? Existem diversas linguagens para construção de Websites: PHP, ASP, Java, Coldfusion etc. No entanto, o HTML é a base para todas, ou seja, de nada adianta utilizar umas dessas linguagens citadas se não conhecermos o HTML;

2.0 O que é HTML? HTML: HyperText Mark-up Language;
Hyper é o oposto de linear. Você pode ir de onde estiver para onde quiser. Não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net. Text é texto e não há mais nada a acresentar. Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc Language significa linguagem e é exatamente o que HTML é; uma linguagem.

3.0 O que são tags HTML? Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

3.0 O que são tags HTML? Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Existe uma exceção: para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br /> ou régua <hr />.

3.0 O que são tags HTML? A seguir veremos alguns exemplos;
Para testar seus exemplos deve-se salvar o arquivo (notepad) com a extensão .html Posteriormente deve-se: Abrir o Navagador; Clicar em Arquivo (file) -> Abrir (open); Procurar o arquivo e abrir;

3.0 O que são tags HTML? Exemplos:
Criar um texto negrito com as tags <b> e </b>; Criar um texto em itálico com as tags <i> e </i>; Vamos colocar entre esses textos a tag <br />; <b>Aqui tem um texto em negrito</b><br /> <i>Aqui tem um texto em itálico</i>

3.0 O que são tags HTML? As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ). Sendo <h1> o cabeçalho maior e o <h6> o cabeçalho menor; <h1>Aqui tem um texto em tamanho grande</h1><br /> <h3>Aqui tem um texto em tamanho médio</h3><br /> <h6>Aqui tem um texto em tamanho pequeno</h6>

3.0 O que são tags HTML? Lembre-se que por padrão escrevemos as tags em minúsculo;

4.0 Criando seu primeiro Website
A estrutura HTML básica é composta das seguintes tags: A tag <html> indica o início/fim do conteúdo do site; A tag <head> indica o início/fim do cabeça do site. Fornece informações sobre o site. Ex.: Onde fica o título da página; A tag <body> indica o início/fim do corpo do site. Todo o conteúdo do site fica entre essas tags. <html lang=“pt-br”> <head> <meta charset=“UTF-8” /> </head> <body> </body> </html> Não esqueça de identar!

Agora vamos criar uma página: Insira as tags básicas do HTML; Insira o título “Minha primeira página na disciplina PW” do site entre as tags <title> e </title>; Insira o conteúdo “Você está acessando a página do Fulano (colocar seu nome)” entre as tags <p> e </p>; Salve a página (extensão .html) Abra a página pelo navegador web (vimos anteriormente);

Resultado: Agora, teste no navegador! <html lang=“pt-br”> <head> <meta charset=“utf-8” /> <title>Minha primeira página web na disciplina PW</title> </head> <body> <p>Você está acessando a página do Flávio!</p> </body> </html>

Faça esse outro exemplo (Observe o que acontece): Agora, teste no navegador! <html lang=“pt-br”> <head> <meta charset=“UTF-8” /> <title>Meu website</title> </head> <body> <h1>Um cabeçalho</h1> <p>texto, texto texto, texto</p> <h2>Subtítulo</h2> <p>texto2, texto2 texto2, texto2</p> </body> </html>

5.0 Outras tags HTML <i>texto itálico</i>
<b> texto em negrito </b> <b><i>texto itálico e negrito </i></b> <br /> // quebra de linha <hr /> // insere uma régua horizontal <ul> // início da Unordered List <li>Um item de lista</li> // item <li>Outro item de lista</li> // item </ul> Item da lista Outro item da lista

5.0 Outras tags HTML <ol> // início da Ordered List
<li>Um item de lista</li> // item <li>Outro item de lista</li> // item </ol> <blockquote>Indentação</blockquote> Primeiro item da lista Segundo item da lista

6.0 Atributos das tags HTML
Os atributos auxiliam às tags para que elas sejam personalizadas de acordo com a necessidade do desenvolvedor; Pode-se alterar cor, fundo, tipo de objeto etc.

Exemplos em Listas Desordenadas:

Exemplos em Listas Ordenadas:

Utilize a disciplina Aplicativos Gráficos para aprender CSS e utilizer na programação web;

Tabela de cores: Em hexadecimal O Uso Cores em Interfaces com o Usuário

7.0 Criando links Criar um link é muito simples, basta utilizar a tag <a>texto com link</a>; É necessário também utilizar o atributo “href” que conterá o endereço onde o usuário será remetido ao clicar no link; <a href=" tem um link para o site Globo.com</a> <a href="pagina2.htm">Aqui um link para a pagina 2</a> <a href=“subdiretorio/pagina2.htm">Aqui tem um link para a página 2</a> <a href="../pagina1.htm">Aqui um link para a pagina 1</a>

7.0 Criando links Pode-se criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#". Use o atributo id para marcar uma área de link; E chame o link: <h1 id="heading1">Cabeçalho 1</h1> <a href="#heading1">Link para o cabeçalho 1</a>

7.0 Criando links Vejamos o exemplo: <html lang=“pt-br”>
<head> ... </head> <body> <p><a href="#heading1">Link para cabeçalho 1</a></p> <p><a href="#heading2">Link para cabeçalho 2</a></p> <h1 id="heading1">Cabeçalho 1</h1> <p>Texto texto texto texto</p> <h1 id="heading2">Cabeçalho 2</h1> </body> </html>

7.0 Criando links Link para , ou seja, ao clicar será aberta a tela do programa de correio eletrônico; Adicionando outros atributos: <a para Flávio</a> <a href="pagina2.html" title="Essa é a página 2">Link para a página 2</a>

7.0 Criando links Atributo “target”:
O atributo “target” possibilita abrir ó link de diversas formas: Abrir na mesma página, usa-se target=“_self”; Abrir em uma nova página, usa-se target=“_blank”; “_parent” e “_top” são muito utilizados quando utilizamos frames, por isso não iremos abordar seu estudo neste momento; <a href=“pagina2.html“ target=“_self”>Link para a página 2</a> <a href=“pagina2.html“ target=“_blank”>Link para a página 2</a>

8.0 Exercícios de fixação Faça a lista01.pdf

Dúvidas! FLÁVIO IZO

Estrutura HTML – Parte I

Apresentações semelhantes

Apresentação em tema: "Estrutura HTML – Parte I"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Estrutura HTML – Parte I

Apresentações semelhantes

Apresentação em tema: "Estrutura HTML – Parte I"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback