O documento apresenta uma aula introdutória sobre HTML, abordando suas principais tags e estrutura básica. É explicado o que é HTML e suas tags, como <html>, <head>, <title>, <body>, <h1>-<h6> para títulos, <p> para parágrafos, <br> para quebras de linha, <hr> para linhas horizontais, <ul> e <li> para listas não ordenadas, <ol> e <li> para listas ordenadas, <dl>, <dt> e <dd> para listas de definição e cores em HTML
Aprenda através dessa sequência de slides que serão como capítulos de um livro, como funciona essa linguagem sensacional que é o HTML, atualmente sendo a linguagem mais utilizada para estruturação de páginas web no mundo inteiro. Conheça de uma maneira interessante e nem um pouco chata, como essa linguagem é fascinante e tem gerado abertura de horizontes no mercado de trabalho para todos nós.
Aprenda através dessa sequência de slides que serão como capítulos de um livro, como funciona essa linguagem sensacional que é o HTML, atualmente sendo a linguagem mais utilizada para estruturação de páginas web no mundo inteiro. Conheça de uma maneira interessante e nem um pouco chata, como essa linguagem é fascinante e tem gerado abertura de horizontes no mercado de trabalho para todos nós.
PHP Aula 06 - Include, Require e QuerystringDaniel Brandão
Aula sobre o uso das funções Include e Require, importantes na importação e ligação de scripts em arquivos distintos, além do uso da Query_string para acesso a dados em PHP.
[Veja mais em http://www.monolitonimbus.com.br/como-funciona-a-internet/] Aula de introdução à linguagem HTML, para quem vai começar do zero a escrever páginas de internet (apresentação do que é CSS, PHP, MySQL e JavaScript)
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
PHP Aula 06 - Include, Require e QuerystringDaniel Brandão
Aula sobre o uso das funções Include e Require, importantes na importação e ligação de scripts em arquivos distintos, além do uso da Query_string para acesso a dados em PHP.
[Veja mais em http://www.monolitonimbus.com.br/como-funciona-a-internet/] Aula de introdução à linguagem HTML, para quem vai começar do zero a escrever páginas de internet (apresentação do que é CSS, PHP, MySQL e JavaScript)
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
Utilizado para a atividade da disciplina de Metodologia do Ensino Superior do curso de Especialização em Engenharia de Software da Universidade Federal do Paraná - UFPR.
1. HTML – AULA 1
Microlins - Web e Design – Capítulo 1
Rondonópolis 07 de Maio de 2011
Mayza de Oliveira
@mayzaoliveira
Mayza.deoliveira@gmail.com
2. INTRODUÇÃO
HTML – Hypertext Markup Language;
É uma linguagem de marcação utilizadas para
produzir páginas web;
Formada por sequência de comandos – tags – que
são lidas e interpretadas pelo navegador –
browser;
O HTML trabalha em conjunto com outras
tecnologias, como o JavaScript e CSS
proporcionando páginas mais dinâmicas e
interativas.
3. CONHECENDO AS TAGS
O que é uma tag?
<html></html>
Essa TAG indica o começo e o final do
documento HTML.
- Instruções - códigos - que possuem
funções especificas.
- Códigos interpretados pelo navegador.
4. ESTRUTURA BÁSICA DO DOCUMENTO HTML
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da pagina
</body>
</html>
*página 3 da apostila
- Escrevam a estrutura utilizando o bloco de notas e
salvem com o nome de index.html
5. ESTRUTURA BÁSICA DO DOCUMENTO HTML
<html></html> - indica o início e o fim da
estrutura HTML;
<head></head> - indica onde começa e termina
o cabeçalho do documento html, que contém
informações específicas e que não são exibidas no
navegador, apesar de existirem e possuírem
enorme importância;
<title></title> - contém o título da página;
<body><body> - é o corpo do documento HTML,
é onde são inseridos todos os elementos – textos,
links, imagens - que queremos que apareçam na
nossa página.
6. ESTRUTURA BÁSICA DO DOCUMENTO HTML
- O navegador interpretou o código HTML e exibiu o layout da página.
7. ESTRUTURA BÁSICA DO DOCUMENTO HTML
- Para visualizar o código da página:
Clique com o botão direito do mouse > exibir código fonte.
8. AS TAGS HTML E SEUS ATRIBUTOS
O HTML possui tags além das
apresentadas na estrutura básica do
documento;
Com as tags, podemos formatar a nossa
página, por exemplo, determinar fontes,
especificar cores e aplicar imagens no
fundo da página;
Veremos a seguir algumas Tags e as
suas funções.
9. TAG <META>
Ordena informações no cabeçalho da página <head>
e define o que ele contém;
Fornece informações que podem ser utilizadas pelos
mecanismos de busca na web.
<meta http-equiv=“content-type”
content=“text/html; charset=utf-8”>
*página 5 da apostila
http-equiv: Faz uma correspondência com campos de
cabeçalho do protocolo HTTP. Uma ação é desencadeada
quando lidos pelo navegador;
content: Especifica meta-informação para que seja
associada com o valor especificado no http-equiv.
10. MAS O QUE É PROTOCOLO HTTP?
• Hyper Text Transfer Protocol é o protocolo usado na
World Wide Web para a distribuição e recuperação de
informação.
A troca de informações entre um browser e um servidor
Web é toda feita através desse protocolo, que foi criado
especificamente para a World Wide Web – www.
Outro exemplo de <meta>
<meta http-equiv=“refresh” content=“10;
url=http://google.com”>
*página 5 da apostila
11. ATRIBUTOS DA TAGS <BODY>
<body></body> - Corpo da nossa página;
<body bgcolor=“#000000” text=“#FFFFFF”>
Corpo da página
</body>
- bgcolor: especifica a cor do fundo da página
- – em hexadeciaml;
- text: especifica a cor do texto da página;
12. ATRIBUTOS DA TAGS <BODY>
link: especifica a cor do link do documento;
vlink: especifica a cor do link visitado;
alink: especifica a cor do link ativo;
background: indica a cor ou o endereço de uma
imagem que será aplicada no fundo da página;
bottommargin: especifica o tamanho da margem
inferior do documento;
topmargin: especifica o tamanho da margem superior
do documento;
leftmargin: especifica o tamanho da margem esquerda
do documento;
rightmargin: especifica o tamanho da margem direita
do documento;
13. ATRIBUTOS DA TAGS <BODY>
<body bgcolor=“#000000” text=“#FFFFFF”
link=“#3300cc” vlink=“#FF0000”
alink=“#0066CC” leftmargin=“15”
topmargin=“15” rightmargin=“12”
bottommargin=“12”>
Corpo da página
</body>
*página 5 da apostila
15. TAG <H> - NÍVEIS DE TÍTULOS
<h> Utilizada para formatar um título ou tópico de
uma seção.
Disponibiliza 6 níveis - <h1></h1> - <h6></h6>
16. TAG <H> - NÍVEIS DE TÍTULOS
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Nível 1</h1>
<h2>Nível 2</h2>
<h3>Nível 3</h3>
<h4>Nível 4</h4>
<h5>Nível 5</h5>
<h6>Nível 6</h6>
</body>
</html>
*página 6 da postila
17. TAG <CENTER> - CENTRALIZAR
<center> Utilizada para centralizar blocos de
texto, tabelas e etc.
18. TAG <CENTER> - CENTRALIZAR
<html>
<head>
<title> Título da página
</title>
</head>
<body>
<center><h3>Frase centralizada
na página</h3></center>
</body>
</html>
*página 6 da apostila
19. TAG <P> - PARÁGRAFO
<p> Delimita parágrafos e insere o espaço de uma
linha em branco entre eles.
20. TAG <P> - PARÁGRAFO
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
</body>
</html>
*página 6 da apostila
21. TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS
align: define uma posição de alinhamento para o
elemento que está sendo formatado pela tag.
Os valores podem ser:
left: esquerda;
center: centralizado;
right: direira;
justify: justificado;
style: os valores do estilo alteram as propriedades
da apresentação do texto, como cor, tamanho,
estilo do texto, etc.
24. TAG <BR> - QUEBRA DE LINHAS
<br> Utilizado quando é necessário que se faça
uma quebra de linha em uma frase.
25. TAG <BR> - QUEBRA DE LINHAS
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Casa da colina <br> Av. 21 de
Junho, 66 <br> Bairro Centro <br>CEP:
16560-000</p>
</body>
</html>
*página 7 da apostila
26. TAG <HR> - LINHA HORIZONTAL
<hr> Cria uma linha horizontal no documento,
também utilizada para separar seções de
informação.
Atributos opcionais:
align: define o alinhamento da linha que pode ser:
left, center ou right;
width: determina a largura da linha em pixels;
noshade: especifica se a linha deve ser sólida.
27. TAG <HR> - LINHA HORIZONTAL
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>HTML</h1>
<hr size="2" width="100%" noshade>
</body>
</html>
*página 7 da apostila
28. TAG <UL> - LISTAS NÃO ORDENADAS
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ul>
<li>Um item da lista</li>
<li>Um outro item da lista</li>
<li>O último item da lista</li>
</ul>
</body>
</html>
*página 7 da apostila
29. TAG <UL> - LISTA NÃO ORDENADA DE
VÁRIOS NÍVEIS
O símbolo que rotula o item é substituído a cada
mudança de nível.
30. TAG <UL> - LISTA NÃO ORDENADA DE
VÁRIOS NÍVEIS
<body>
<ul>
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<ul>
<li>Formulários</li>
<ul>
<li>CGI</li>
</ul>
<li>Contadores</li>
<li>Relógios</li>
</ul>
<li>Outras informações</li>
</ul>
</body>
*página 8 da apostila
31. TAG <UL> - TYPE
Utilizando TYPE é possível especificar o tipo de
marcador a ser utilizado – square, circle e disc.
<body>
<ul type="circle">
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<li>Outras informações</li>
</ul>
</body>
*página 8 da apostila
32. TAG <OL> - LISTA ORDENADA
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
</body>
</html>
*página 8 da apostila
33. TAG <OL> - LISTA ORDENADA DE VÁRIOS
NÍVEIS
Este tipo de lista não apresenta uma numeração de
níveis (ex: 1.1, 1.2, 1.1.1.)
34. TAG <OL> - LISTA ORDENADA DE VÁRIOS
NÍVEIS
<body>
<ol>
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<ol>
<li>Formolários</li>
<ol>
<li>CGI</li>
</ol>
<li>Contadores</li>
<li>Relógios</li>
</ol>
<li>Outras informações</li>
</ol>
</body>
*página 8 da apostila
35. TAG <OL> - TYPE
Com o TYPE na lista ordenada é possível iniciar a
numeração da lista.
<body>
<ol start="5" type="A">
<li>Mato Grosso</li>
<li>Espirito Santo</li>
<li>Paraná</li>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
</ol>
</body>
*página 9 da apostila
36. TAGS <DL> <DT> E <DD> - LISTA DE
DEFINIÇÃO
O texto é formatado como uma lista de termos na
esquerda para direita.
37. TAGS <DL> <DT> E <DD> - LISTA DE
DEFINIÇÃO
<body>
<dl>
<dt>Internet
<dd>São milhões de
computadores interligados pelo protocolo de
internet TCP/IP que permitem o acesso a
informações e transferência de dados.
<dt>HTML
<dd>HiperText Markup
languagem
</dl>
</body>
*página 9 da apostila
38. VALOR DAS CORES
As cores em html são especificadas em padrões
alfanuméricos, no modo RGB, com base hexadecimal.
RGB
Red – vermelho
Green – verde
Blue – azul
Branco = #FFFFFF
Preto é a ausência de cores = #000000
*página 9 da apostila
39. EXERCÍCIO
Para compreender a utilização simultânea das
tags, vamos fazer uma página, utilizando todas as
tags e formatações de cores que vimos durante a
aula de hoje.
Para isso, vamos dividir por seções e criar a página
por partes.
O Resultado deverá ser semelhante a este:
41. EXERCÍCIO
Parte 1 – Bloco do H1:
<h1> - Primeira aula de HTML;
<p> - Conhecemos durante a aula de hoje a utilização
das TAGS básicas do HTML;
<center> que envolverá e centralizará a tag <p>
abaixo;
<p> com style="color:#c1e904; font-
size:14px;” - Mas vamos praticar para aprender;
<hr> com size="2" width="100%" noshade
42. EXERCÍCIO
Parte 2 – Bloco do H2:
<h2> - Vimos como utilizar a tag BR para quebrar
linhas;
<p> com style="color:#06F000;” -
Microlins<br>Curso de Web e Design<br>Horario:
<br>16:00 - 19:00 horas;
<hr> com size="4" width="100%" noshade
43. EXERCÍCIO
Parte 3 - Bloco do H3
<h3> - Hoje é sabado;
<p> com style="color:#F93;“ - Conhecemos
também como utilizar as listas não ordenadas;
<ul> com type="square“ que envolverá as tags
<li>
<li> - Primeiro, segundo, terceiro, quarto, quinto;
<hr> com size="6" width="100%" noshade
44. EXERCÍCIO
Parte 4 – Bloco do H4
<center> que envolverá a tag <h4>;
<h4> - E também aprendemos a utilizar as listas ordenadas;
<p> com style="color:#090000“ - Quais são os
módulos do curso?
<ol> com start="1" type="I“ e que envolverá as tags
<li>
<li> - Corel Draw, Photoshop, Flash, HTML, Dreamweaver;
<hr> com size="9" width="100%" noshade
45. EXERCÍCIO
Parte 5 – Bloco do H5
<h5> - Vimos o que é uma lista de definição;
<dl> que envolverá as tags <dt> e <dd>;
<dt> - Nível 1
<dd> - Nível 2
<dt> - Nível 1
<dd> - Nível 2
<hr> com size="2" width="100%" noshade
46. EXERCÍCIO
Parte 6 – Bloco do H6
<h6> - As cores são no padrão RGB;
<center> que envolverá as tags <p>;
<p> com style="color:#F00“ – RED;
<p> com style="color:#060“ – GREEN;
<p> com style="color:#00F“ – BLUE.