aula 1- introdução a html
DESCRIPTION
..TRANSCRIPT
Web
• Parte visual;
• Documentos escritos em HTML;
• Protocolo HTTP;
Introdução a HTML
• Hyper Text Markup Language (HTML) é uma linguagem para edição de documentos web;
• Linguagem de Marcação;
• Possui etiquetas (tags) que formatam o texto ou figuras;
• As tags informam ao navegador como o texto e imagens serão exibidos;
Introdução a HTML
• Histórico
– Surgiu por pesquisas feita por Tim Berners Lee;
– No ano 1995 surgiu de fato a linguagem;
– W3C;
Introdução a HTML
• As páginas Web são gravadas com extensão teste.htm (Windows) e teste.html (Unix);
• São gravadas em um servidor;
• Lado cliente solicita;
• Servidor responde com o HTML da página;
HTML 5
• Versão atual;
• Novos recursos;
• Novas tags;
• Semântica;
A NOVA VERSÃO
• Tags novas!!!
• Semântica!!
Introdução HTML
HTTP
request responce
HTML – Comandos
• Tags – Todo texto é formatado mediante a tag que
o cerca.
– Formato <tag> texto </tag> (abre e fecha tag)
HTML – Comandos
• O doctype:
– Informação da versão do html para os navegadores.
– <!DOCTYPE html>
• Declaração do idioma:
– <html lang=“pt-br”>
• Metatag charset- responsável pelos caracteres da página, ou seja, qual tabela será utilizada.
HTML – Comandos
• Comentários –Colocar comentários
–Boa prática de programação
– Futuras manutenção
– Formato
• inicia com <! e termina com ->
HTML - Estrutura
<html>
<head> <title> Teste html </title>
</head>
<body> ..........corpo da página....
</body>
</html>
HTML - Estrutura
HTML - Estrutura
Exemplo
• Crie uma pasta no diretório C;
• Sempre salve seus documento HTML nesta pasta;
Exemplo
Exemplo
HTML - Cabeçalhos
• Tag <header></header>- cabeçalho de páginas e seções, artigos.....
• Cria cabeçalhos com tag <h> na área de visualização das páginas;
• 6 tipos <h1> até <h6>;
<html> <head>
<title> Teste html </title>
</head> <body> <header> Logo da página, título de algum artigo, seção ou qualquer coisa. </header> </body> </html>
Exemplo - cabeçalhos
Rodapé
• Tag <footer></footer> <html> <head>
<title> Teste html </title>
</head> <body> <header> Logo da página, título de algum artigo, seção ou qualquer coisa. </header> <footer> rodapé de algum artigo, seção ou qualquer coisa. </footer> </body> </html>
HTML - Cabeçalhos
• Possuem o atributo de alinhamento align;
– Exemplo:
Agrupando cabeçalhos
• <hgroup></hgroup>- 2 ou mais cabeçalho h1-h6
Navegação e listas
• Tag <nav> </nav> elemento de navegação da página.
Listas
• 1. Listas Não Numeradas
• 2. Listas Numeradas
• 3. Listas de Definições
• 4. Listas Intercaladas
Listas Não Numeradas
• 1. Comece com a marcação de início de lista: <UL>.
• 2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar a marcação com </LI> )
• 3. Encerre com a marcação de fim de lista: </UL>.
Listas Não Numeradas
• Exemplo: • <UL>
• <LI> maçãs
• <LI> bananas
• </UL>
Listas Numeradas
• marcação <OL>;
• Os itens são identificados utilizando-se a mesma notação <LI>;
<OL>
<LI> laranjas
<LI> peras
<LI> uvas
</OL>
Listas Numeradas
Listas de Definições
• Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT) e uma definição (abreviado como DD).
Listas de Definições <DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications, is located on the campus
of the University of Illinois at Urbana-Champaign. <DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca, New York
</DL>
Listas de Definições
Listas Intercaladas
• Exemplo de lista intercalada: <UL> <LI> Estados da região sul do Brasil: <UL> <LI> Rio Grande do Sul <LI> Santa Catarina </UL> <LI> Um estado da região nordeste: <UL> <LI> Pernambuco </UL> </UL>
Listas Intercaladas
• Exemplo no quadro de listas e navegação.
Criando artigos
• <article></article>
• Recebe conteúdos na página. Ex: jornal, texto informativo etc..
• Exemplo no quadro.
Criando seções
• <section></section>
• As páginas podem conter textos e podemos separar em seções. Ex: esporte, política...
Tag Aside
• <aside></aside>
• Quando um conteúdo é relacionando a outro de forma que complemente usamos o conceito de aside. Ex: um texto sobre esporte falando dos jogos do gauchão 2014, tem um complemento informando os horários dos jogos com a tag aside.
Criando containers
• <div></div>
• Pense como um divisão na página. Pode ser estilizado para se destacar na página.
• Um container agrupando tags html.
<div >
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
Aria
• role=“banner”- adicionar no header- pois fica a região do logo, identificação da página.
• role=“navigation”- elementos de navegação como links, adicione na tag nav.
• role=“main”- conteúdo principal da página. Usado nas tag div, article e section.
• role=“complementary”- complementa o conteúdo principal da página. Usado na aside.
• role=“contentinfo” – informação sobre o conteúdo pai. Usado no footer.
HTML - Parágrafos
• O HTML não quebra e nem avança linhas sem que um comando especifico mande ele fazer isso;
• Dois comandos <br> e <p>;
Tag <br>
• Este comando quebra uma linha, continuando o texto na linha abaixo;
• Esta tag inicia com <br> seguida de seu fechamento </br>;
Tag <br>
• Exemplo <html>
<head>
<title> Minha Página </title>
</head>
<body>
<h1 align=center > teste br </h1>
Este é um teste de <br> de quebra de linha
</body>
</html>
Tag <p>
• Quebra linha também, mas adiciona uma linha em branco;
• Exemplo:
..............
<body>
<p align= center> Teste <p></p>
Este é um teste <p> da tag P
</body>
Separadores – Tag <hr>
• Linhas horizontais que dividem o texto;
• Exemplo
..........
<body>
<h1 align=center> Teste Separador</h1><hr>
Teste de separador em texto.<hr>
Fim
</body>
Formatação de Texto
• Existem tags correspondentes a formatação;
• Lembrando sempre o início e o fim de uma tag;
Formatação de Texto
Exemplo-Formatação
Formatação - Blocos
• Com HTML é possível criar blocos de textos destacando-os do restante da página;
• Tags <blockquote> e <pre>
Blockquote- Formatação - Blocos
• Destaca um bloco de texto separando-o em um novo parágrafo;
• <blockquote> </blockquote>
Blockquote- Formatação - Blocos
Pre- Formatação - Blocos
• Com a tag <pre> o texto fica formatado como foi digitado, respeitando a formatação, espaçamento..
• <pre> </pre>
Pre- Formatação - Blocos --------
--------
Informação sobre o autor
• <address></address>- inserido no footer para informar contao com o autor do texto por exemplo.
Enfatizando e marcando o texto
• O elemento strong denota um texto importante, enquanto o em transmite ênfase.
• <strong></strong>
• <em></em>
Citação, marcação, definição de um termo
• <cite></cite>- citação
• <mark></mark>- marcação de texto com se fosse através de uma caneta marca texto;
• <dfn></dfn>- definição de termo, colocar em volta do termo.
Informando edições e textos imprecisos
• <ins></ins> ex: teste
• <del></del> ex: teste
Marcando um código
• <code></code> indica que o texto é um código ou arquivo.
Fine print
• <small></small> o texto aparece de forma pequena como se fosse uma ressalva, direitos autorais etc...
outros
• Meter- barra de medição
• <meter> time1 </meter>
• Progress- barra de progresso
• <progress> votação1 </progress>
Inserção de Link
Inserção de Link
• A marca mais utilizada quando se trata de links. Tudo o que se encontrar entre a abertura e o fecho da marca, será considerado como um link para o documento cujo endereço figure no local onde se encontra o ponto de interrogação. Por exemplo:
• <a
href=”http://www.faculdadeeee.com.br”>Faculdade</a>
Inserção de Link
• vlink = Esta propriedade designa a cor dos links das páginas que já foram visitadas. Possui uma sintaxe equivalente à propriedade anterior;
• alink = Esta propriedade designa a cor dos links de uma página que se encontrem ativos;
Inserção de Link
Exemplo- Link
Exercício
• Crie uma página de apresentação de você mesmo utilizando os comandos passados em aula.
Referências
• MARCONDES, Christian Alfim. HTML 4.0 Fundamental. 1ª Ed. São Paulo. Érica, 2005.
• Livro HTML 5 definido na bibliografia do plano de ensino