A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I.

Apresentações semelhantes


Apresentação em tema: "PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I."— Transcrição da apresentação:

1 PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I

2 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;

3 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;

4 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.);

5 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.

6 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;

7 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”;

8 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;

9 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.

10 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 " ".  Genericamente falando, existem dois tipos de tags - tags de abertura: e tags de fechamento:. A diferença entre elas é que na tag de fechamento existe um barra "/".

11 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 ou régua.

12 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;

13 3.0 O que são tags HTML?  Exemplos:  Criar um texto negrito com as tags e ;  Criar um texto em itálico com as tags e ;  Vamos colocar entre esses textos a tag ; Aqui tem um texto em negrito Aqui tem um texto em itálico

14 3.0 O que são tags HTML?  As tags,,,, e informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ). Sendo o cabeçalho maior e o o cabeçalho menor; Aqui tem um texto em tamanho grande Aqui tem um texto em tamanho médio Aqui tem um texto em tamanho pequeno

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

16 4.0 Criando seu primeiro Website  A estrutura HTML básica é composta das seguintes tags: • A tag indica o início/fim do conteúdo do site; • A tag 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 indica o início/fim do corpo do site. Todo o conteúdo do site fica entre essas tags. Não esqueça de identar!

17 4.0 Criando seu primeiro Website  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 e ;  Insira o conteúdo “Você está acessando a página do Fulano (colocar seu nome)” entre as tags e ;  Salve a página (extensão.html)  Abra a página pelo navegador web (vimos anteriormente);

18 4.0 Criando seu primeiro Website  Resultado:  Agora, teste no navegador! Minha primeira p á gina web na disciplina PW Você está acessando a página do Flávio!

19 4.0 Criando seu primeiro Website  Faça esse outro exemplo (Observe o que acontece):  Agora, teste no navegador! Meu website Um cabeçalho texto, texto texto, texto Subtítulo texto2, texto2 texto2, texto2

20 5.0 Outras tags HTML texto itálico texto em negrito texto itálico e negrito // quebra de linha // insere uma régua horizontal // início da Unordered List Um item de lista // item Outro item de lista // item • Item da lista • Outro item da lista

21 5.0 Outras tags HTML // início da Ordered List Um item de lista // item Outro item de lista // item Indentação 1.Primeiro item da lista 2.Segundo item da lista

22 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.

23 6.0 Atributos das tags HTML  Exemplos em Listas Desordenadas:

24 6.0 Atributos das tags HTML  Exemplos em Listas Ordenadas:

25 6.0 Atributos das tags HTML  Utilize a disciplina Aplicativos Gráficos para aprender CSS e utilizer na programação web;

26 6.0 Atributos das tags HTML  Tabela de cores:  Em hexadecimal Em hexadecimal  O Uso Cores em Interfaces com o Usuário O Uso Cores em Interfaces com o Usuário

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

28 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: Cabeçalho 1 Link para o cabeçalho 1

29 7.0 Criando links  Vejamos o exemplo:... Link para cabeçalho 1 Link para cabeçalho 2 Cabeçalho 1 Texto texto texto texto Cabeçalho 2 Texto texto texto texto

30 7.0 Criando links  Link para , ou seja, ao clicar será aberta a tela do programa de correio eletrônico;  Adicionando outros atributos: para Flávio Link para a página 2

31 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; Link para a página 2

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

33 Dúvidas! FLÁVIO IZO


Carregar ppt "PROF. FLÁVIO IZO Programação WEB AULA 03 ESTRUTURA HTML – PARTE I."

Apresentações semelhantes


Anúncios Google