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

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

Curso de HTML.

Apresentações semelhantes


Apresentação em tema: "Curso de HTML."— Transcrição da apresentação:

1 Curso de HTML

2 Introdução O curso proposto é resultado da experiência da Pró-Informática em ministrar treinamentos para capacitação na área de TI ao longo dos seus 26 anos. O objetivo principal do curso é ensinar técnicas para construção de sites usando a linguagem HTML. “a única coisa constante no mundo é a mudança”

3 HTML o que é? HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) e a uma linguagem considerada a base de todas as outras linguagens de desenvolvimento de projetos para WEB.

4 Linguagem baseada em tags
A linguagem HTML é baseada me tags, as tags constituem um conjunto comandos interpretados pelo navegador. As tags tem o seguinte formato: <html> </html>

5 Linguagem baseada em tags
As tags tem na maioria das vezes o formato a seguir: <comando> Sinal de menor o comando desejado e sinal de maior para iniciar o bloco de comando. </comando> Sinal de menor, barra o comando para fechar o bloco.

6 Tags iniciais A tag inicial de uma Home Page é: <HTML> </HTML> A tag HTML conta ao navegador que o bloco de comando a seguir é um código HTML e deve ser interpretado pelo navegador.

7 Definindo o titulo do navegador
A tag para definirmos o titulo do navegador é: <TITLE>Minha primeira home page</TITLE>

8 Definindo o titulo da página
A tag para definirmos o titulo da página é: <HEAD>Universidade Galáxia</HEAD>

9 Definindo o titulo da página
A tag HEAD pode ter seu tamanho definido pelas tags: <H1></H1> Maior título possível <H2></H2> Segundo maior título possível <H3></H3> ... <H4></H4> <H5></H5>

10 Formatação do texto Para que possamos melhorar a visualização de nossas páginas, podemos utilizar a tag <FONT></FONT>. A tag font tem os seguintes parâmetros: Color => Cor da fonte em inglês Ex. “Red”. Face => Tipo da font Ex. “Comic Sans Ms” Size => Tamanho da fonte em pixels Ex. “14”

11 Utilização do comando FONT
Para a formatação de um texto podemos usar várias combinações do comando font, como mostrado. <HEAD><FONT COLOR = RED FACE = ARIAL> Universidade Galáxia </FONT></HEAD>

12 Comandos para alinhamento
Para o alinhamento de um texto podemos usar as tags <CENTER> Texto </CENTER> <HEAD><H1><FONT COLOR = “RED” FACE = “ARIAL”> <CENTER> Universidade Galáxia </CENTER></FONT></H1></HEAD>

13 Trabalhando o corpo da página
Determinados pelos marcadores <BODY></BODY>, o corpo e a parte da página que contem informações que serão visualizadas na tela.

14 Cor de fundo com a tag BODY
Para mudarmos a cor de fundo de uma pagina utilizaremos a tag BODY com a seguinte sintaxe. <BODY BGCOLOR = “COR”> O nome da cor deve estar em inglês, ex.: Gray, red, yelow, blue, black. Podemos utilizar ainda o número que identifica a cor em questão.

15 Tabela de Cores

16 Configurando a pagina com a tag BODY
Escolhendo cores padrão para os texto e para os Links <BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor“> Esses atributos determinam as cores para o texto geral da página (TEXT), Links não visitados (LINK), Links já visitados (VLINK) e o Link no momento que ele e ativado (ALINK). As cores devem ser dadas preferencialmente em valores hexadecimais.

17 A tag BODY BACKGROUND Podemos ainda colocar uma figura como plano de fundo em nossas páginas, para isto usamos a seguinte tag: <BODY BACKGROUND = “caminho\imagem”> Exemplo: <BODY BACKGROUND=“img\fundo.gif">

18 Inserindo e formatando imagens
Para se colocar imagens em uma pagina HTML. Usa-se o marcador <IMG> dentro das delimitações do <BODY>. <IMG SRC=“caminho\imagem”> Exemplo: < IMG SRC =“img\foto.gif">

19 Alinhado imagens Este atributo especifica o tipo de alinhamento entre a imagem e o texto da pagina. As opções de alinhamento são: LEFT, RIGHT, TOP, MIDDLE, BOTTOM e CENTER. <IMG SRC="IMAGEM" ALIGN="alinhamento"> Exemplo: < IMG SRC =“img\foto.gif“ ALIGN = “CENTER”>

20 Borda das imagens Este atributo determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este atributo não precisa ser citado. <IMG SRC="IMAGEM" BORDER="valor"> Exemplo: < IMG SRC =“img\foto.gif “BORDER=“2”>

21 Largura e altura das imagens
Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupara na pagina. Uma figura com dimensões proporcionais as vezes sofre um efeito "stretch", ou seja, aparece repuxada na pagina. <IMG SRC="IMAGEM" WIDTH="LARGURA" HEIGHT="ALTURA"> Exemplo: < IMG SRC =“img\foto.gif WIDTH="333" HEIGHT="200">

22 Texto descritivo nas imagens
O atributo ALT exibe uma descrição quando o cursor move-se sobre a imagem. Existem usuários que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para não carregar imediatamente as imagens, devido a demora no carregamento das paginas. <IMG SRC="IMAGEM" ALT="TEXTO DESCRITIVO"> Exemplo: < IMG SRC =“img\foto.gif ALT="Foto de uma casa">

23 Formatando paragrafos
<P> Texto </P> Delimita um parágrafo. E possível omitir o elemento de fim </p> sem que isto cause problemas. Resultado da aplicação deste marcador e uma linha em branco antes do inicio do parágrafo. <P>Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que estou digitando.</P>

24 Alinhando parágrafos O marcador de parágrafo possui um atributo opcional o ALIGN que serve para configurar o alinhamento do parágrafo. O atributo ALIGN pode conter valores como LEFT, CENTER, RIGHT e JUSTIFY que significam respectivamente esquerda, centro, direita e justificado. <P ALIGN = JUSTIFY>Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que estou digitando.</P> Obs.: Não esquecer de explicar o redimensionamento do navegador.

25 Algumas boas práticas1 Existem alguns órgãos nacionais e internacionais que regulamentam algumas norma e práticas em diversas áreas da TI entre eles, podemos destacar: COBIT, ITIL, IEEE, ISO, W3C e outros.

26 Iniciando bem suas páginas
Importância do <TITLE> </TITLE> Alem mostrar o título na barra do navegador, a tag <TITLE> tem grande importância, pois a maioria dos programas de busca iniciam coletagem de informações na tag <TITLE> do arquivo index dos sites. Não devemos escrever textos longos na tag, pois a mesma pode ficar cansativa se muito longa. Algumas informações são pertinentes, nome da empresa e principal produto.

27 Iniciando bem suas páginas
O HEAD é ruim, mas é bom. A tag <HEAD> é extremamente limitada acerca da formatação do texto e alinhamento e pode ser substituída pela tag <FONT> mas a mesma tem muita importância, pois mecanismos de busca lêem o seu conteúdo para cache do site1. 1 – Cache: técnica que armazena diversas informações do sites para tornar a busca mais rápida.

28 Formatando um bom parágrafo
Para melhor utilização dos códigos HTML podemos utilizar alguns melhores métodos de formatação, neste caso aplica-se aos parágrafos. Parágrafos mau definidos tornam os códigos HTML confusos e de difícil compreensão, por isso, a codificação da pagina deve ser feita de forma clara e organizada. <P align="justify"><font color="#003399" face="Courier New, Courier, monospace“ size = 4> Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que estou digitando </font></P>

29 ________________________________________________________
TAGs ESPECIAIS <BR> - Marcador utilizado para separar duas linhas. E importante observar que o marcador <BR> deve vir no final da linha que se quer separar. ________________________________________________________ <HR> - Utilizadas para dar destaque a títulos ou para criar a sensação de quebra entre um item de informação e outro. O marcador <HR> (Horizontal Line) pode ser utilizado com ou sem parâmetros. O comprimento da linha WIDTH pode ser a largura exata da linha ou uma porcentagem da largura da tela. <HR SIZE="espessura da linha em pixels" WIDTH="comprimento da linha“ ALIGN="alinhamento da linha">   - (Mágico) Faz com que o navegador mostre um espaço em branco.

30 Outros comandos de formatação
<B> TEXTO EM NEGRITO </B><BR> <BIG> TEXTO EM FONTE MAIOR </BIG><BR>***** <BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR>***** <I>TEXTO EM ÍTALICO </I><BR> <U>EXIBE O TEXTO SUBLINHADO </U><BR> <SMALL>TEXTO EM FONTE MENOR </SMALL><BR> <STRIKE>TEXTO RISCADO </STRIKE><BR> <SUB>TEXTO EM SUBSCRITO </SUB><BR> <SUP>TEXTO SOBRESCRITO </SUP><BR> <TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT>

31 Outros comandos de formatação
<ADDRESS> TEXTO </ADDRESS> - Exibe o texto em itálico é utilizado para indicar o endereço (postal, ou ambos) do autor do documento HTML. Insere uma quebra de parágrafo <BR> antes e outra depois do texto e geralmente e o ultimo item exibido no documento. <BLOCKQUOTE> texto com margem </BLOCKQUOTE> - Destaca o texto deixando-o com uma margem maior. <CITE> TEXTO </CITE> - Exibe o texto em itálico é utilizado para citações de livros, filmes, obras, etc. <CODE> TEXTO </CODE> - Exibe o texto em fonte tamanho fixo (como Courier) e e utilizado para identificar trechos de códigos de programas.

32 Outros comandos de formatação
<EM> TEXTO </EM> - Exibe o texto em itálico é usado para enfatizar um texto. <KBD> texto em fonte mono espaçada </KBD> - Exibe o texto em fonte tamanho fixo é utilizado para indicar dados introduzidos pelo teclado. <SAMP> TEXTO </SAMP> Exibe o texto em uma fonte tamanho fixo (como Courier) é utilizado para indicar textos representados seqüenciais de caracteres literais e mensagens de computador. <STRONG> TEXTO </STRONG> Exibe o texto em negrito é utilizado para destacar um texto. <VAR> TEXTO </VAR> Exibe o texto em itálico é utilizado para destacar um nome de variável que o usuário deve substituir por um valor real.

33 Tabelas Utilizadas como um recurso essencial para o layout geral da pagina através do posicionamento de imagens e texto, as tabelas são compostas de linhas dentro das quais são colocadas células de conteúdo. O conteúdo de cada célula pode ser texto, imagem ou ate mesmo outra tabela. Uma tabela e delimitada com os marcadores <TABLE></TABLE>, sendo que dentro destes marcadores são colocadas as linhas e as colunas da tabela. <TR> Indica o início de uma nova linha na tabela <TD> Indica uma coluna na tabela </TD> Indica o final daquela coluna na tabela </TR> Indica o final da linha na tabela Contar pra que serve realmente o <div align="center">

34 Tabelas <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </table> 1 2 3 4 5 6 7 8 9

35 Tabelas Podemos ainda alinhar o texto da tabela usando os seguintes parâmetros: <TABLE ALIGN="LEFT"> <TABLE ALIGN="RIGHT"> <TABLE ALIGN="CENTER"> Para definir o tamanho usaremos: <TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela"> Para largura da borda usaremos: <TABLE BORDER="espessura da borda"> Especificar o deslocamento do conteúdo da célula em relação as bordas: <TABLE CELLPADDING="valor"> Especifica o espaçamento entre as células da tabela. <TABLE CELLPACING="valor">

36 Tabelas BORDERCOLOR e BGCOLOR <TABLE BORDERCOLOR="valor hexadecimal" BGCOLOR="valor hexadecimal"> Especifica respectivamente a cor da borda e a cor da tabela. As cores devem ser dadas em valores hexadecimais. BACKGROUND <TABLE BACKGROUND="imagem">

37 Algumas boas práticas2 O mundo é maior do que pensamos. E a internet? E os usuários? E os computadores? E os Navegadores, quantos são. (IE6, IE7, IE8, Firefox, Slim Browser, Conqueror, Acoo Browser, Google Chrome, Avant Browser, Opera Tor , Safari, e etc) são hoje mais de 450 publicados.

38 Algumas boas práticas2 A grande pergunta é: O meu site vai funcionar bem em todos? R1: Crie um ambientes de teste, instale pelo menos os mais utilizados em seu PC e navegue pelo seu site. R2: Capture as telas dos que apresentarem diferenças estéticas ou de resultado dos comandos. R2: Contrate empresas especializadas em teste de software.

39 Interpretação do código das principais linguagens WEB.
Os códigos dos sites, portais e intranets são interpretados de duas formas: Interpretados pelo cliente: O próprio navegador é responsável pela interpretação do código. Ex.: HTML, DHTML, CSS, VBScript e JavaScript. Interpretados pelo servidor: É obrigado que haja um servidor que interpreta o código e retorna para cliente em forma de HTML. Ex.: ASP, PHP e Ruby On Rails.

40 ASP

41 PHP

42 Ruby com Rails

43 Hyperlinks Hyperlinks são caminhos dinâmicos para outros site, paginas, ou áreas do mesmo documento.

44 Os quatro os principais comandos de hyperlink:
1 - Para Sites: <a href = “http://site”> Texto do site</a> 2 - Para páginas: <a href = “pagina.htm”>Texto da pagina</a> 3 - Para áreas do documento: Ancoras <a name=“área"></a> cria a área <a href="#área"> vai para a área 4 - para áreas em paginas. <a href = “pagina.htm#área>Texto da pagina / área</a>

45 Formatos adicionais para links
Exemplo de link a partir de uma imagem <a href="outrapagina.html"><img src=“Imagen" border="0"></a> Exemplo de link de download de arquivo <a href="arquivo.zip“>Clique para baixar</a> Exemplo de link para <a Conosco </a>

46 Inserindo vídeos com DYNSRC
E possível colocar vídeo em uma pagina HTML utilizando o marcador <IMG>. A única diferença e que se acrescenta o atributo DYNSRC. <IMG DYNSRC="origem do vídeo“ START="opção“ LOOP="número"> Para que o vídeo seja iniciado, automaticamente no carregamento da pagina e preciso utilizar START="FILEOPEN“ Para que o vídeo seja iniciado quando o usuário passar o mouse sobre ele e preciso usar START="MOUSEOVER“ LOOP: Especifica o numero de vezes que o vídeo vai ser exibido. Para que o vídeo seja exibido continuamente e preciso utilizar LOOP=INFINITE Obs.: Não precisa especificar o atributo START; apenas se não quiser a função FILEOPEN, pois essa opção e padrão.

47 Inserindo vídeos com EMBED
<EMBED SRC="vídeo" WIDTH="valor" HEIGHT="valor" AUTOSTART="opção“ LOOP="opção"> O Mercado embed mostra os videos com um mini player com os botões de EXECUTAR, PARAR, PAUSAR, ETC O mesmo comando pode ser usado para sons.

48 Listas não ordenadas Tipos: "DISC" , "CIRCLE" ou "SQUARE" Sintaxe: <UL Type = “Disc”> <LI> Lista cada um dos subitens da lista </LI> </UL> Exemplo: <ul> <li> Curitiba </li> <li> São Paulo </li> <li> Rio de Janeiro </li> </ul>

49 Listas ordenadas <OL start=“Valor"> Onde start define o número inicial da lista <LI> Lista cada um dos subitens da lista </LI> </OL> Exemplo: <ol start = “3”> <li> Curitiba </li> <li> São Paulo </li> </ol> TYPE: Define o tipo de numeração aplicada na lista. <ol type="A"> Assim em vez de aparecer 1, 2, ira aparecer A, B, C ...

50 Listas de definção <DL> <DT> Termos a ser definidos </DT> </DL> Exemplo: <DT> Banana </DT> <DD>Banana Maçã </DD> <DD>Banana Nanica </DD> <DT> Mamão </DT> <DD>Mamão Papaia </DD>

51 Formulários É um utilitário HTML que possibilita cadastros, pesquisas, envio de comentários, s desde que combinado com uma linguagem estruturada aumentando (Java, ASP, PHP Rubi) um formulário HTML é uma pagina Web que contem, alem de texto, elementos especiais chamados controles, representados por caixas de checagem, botões, caixas de seleção, campos de textos, etc. A TAG usado e <FORM></FORM> para marcar o inicio e o fim do Formulário. A tag form pode receber alguns parâmetros como veremos a seguir.

52 Formulários <FORM NAME=”nome” METHOD=”valor” ACTION=”Ação”>
elementos do formulários </FORM> Para o parâmetro NAME informamos o nome do formulário. Para o parâmetro METHOD informaremos GET OU POST onde: GET é uma cadeia de pedido, por exemplo: ydoc.asp?var1. POST é uma cadeia de envio de dados, por exemplo: respostas.php. Para o parâmetro ACTION o nome da pagina, banco de dados que cedera ou recebera os dados.

53 Controles de formulários
Caixa de texto: São campos onde o usuário poderá entrar com dados do tipo texto como nome, fone, . Exemplo: <p>Entre com seu nome:<INPUT TYPE=”TEXT” NAME=”Nome”></p> Input: Comando que indica uma entrada de dados. Type = “text”: Indica que a entrada é uma caixa de texto Name: Indica o nome da caixa de texto, é usada para a interação com outros programas. “Opcionalmente podemos utilizar o parâmetro VALUE = “valor” para mostrar a caixa de texto já preenchida.” Podemos ainda utilizar os parâmetros Size e MAXLENGTH para definir o tamanho da caixa e o máximo de caracteres permitidos, me pixels.

54 Controles de formulários
Caixa de texto como senha: São campos onde o usuário poderá entrar com dados do tipo texto e utilizar * para ocultar o texto. Exemplo: <p>Entre com sua senha<INPUT TYPE = "password" name=“Senha”> Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Password.

55 Controles de formulários
Caixa de texto com múltiplas linhas: São campos onde o usuário poderá entrar com dados do tipo texto em uma área maior e mais visível, pode conter ate 4000 caracteres. Exemplo: Sugestões:<BR> <textarea name="sugestao" cols="25" rows="6"> </textarea> Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Password e os comandos cols (número de colunas, cada coluna é um caracter) rows (numero de linhas, cada linha mostra uma linha de texto).

56 Controles de formulários
Caixa de combinação: O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo usuário. Exemplo: Sexo:<SELECT NAME=”sexo” SIZE=”2”> <OPTION VALUE=”Masculino”> Masculino </OPTION> <OPTION VALUE=”Feminino”> Feminino </OPTION> </SELECT>

57 Controles de formulários
Caixa de listagem: Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma. A criação de caixas de listagem com múltipla seleção é idêntica a criação de caixas de listagem sem múltiplas seleções com exceção do atributo MULTIPLE que deve ser acrescentado. Exemplo: <SELECT NAME=”interesses” SIZE=”5” MULTIPLE> <OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION> <OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION> <OPTION VALUE=”formprof”>Formação profissional</OPTION> <OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION> <OPTION VALUE=”todos”>Todos</OPTION> </SELECT>

58 Controles de formulários
Caixa de listagem: Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma. A criação de caixas de listagem com múltipla seleção é idêntica a criação de caixas de listagem sem múltiplas seleções com exceção do atributo MULTIPLE que deve ser acrescentado. Exemplo: <SELECT NAME=”interesses” SIZE=”5” MULTIPLE> <OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION> <OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION> <OPTION VALUE=”formprof”>Formação profissional</OPTION> <OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION> <OPTION VALUE=”todos”>Todos</OPTION> </SELECT>

59 Controles de formulários
Caixa de Checagem: O valor CHECKBOX no atributo TYPE define uma caixa de checagem. Na pratica, as caixas de checagem aparecem em grupos e os usuários podem escolher uma ou mais opções.. Exemplo: <p>Escolha a área de interesse</p> <INPUT TYPE=”CHECKBOX” NAME=”caixa1” VALUE=”iniciant”> Cursos para iniciantes<Br> <INPUT TYPE=”CHECKBOX” NAME=”caixa2” VALUE=”formprof”> Cursos de formação profissional<Br> <INPUT TYPE=”CHECKBOX” NAME=”caixa3” VALUE=”ctec”> Cursos da Microsoft® CTEC CHECKED: atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na pagina.

60 Controles de formulários
Botão de opção: O valor RADIO no atributo TYPE define um botão de escolha. Na pratica os botões de escolha aparecem em grupos e podem permitir que apenas uma opção seja escolhida dentre as existentes. Exemplo: <p>Escolha a área de interesse</p> <INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”iniciante”> Cursos para iniciantes<Br> <INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”formprof”> Cursos formação profissional<Br> <INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”ctec”> Cursos Microsoft® CTEC<Br> CHECKED: atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na pagina.

61 Controles de formulários
Botão LIMPA/CANCELA <INPUT TYPE=”RESET” VALUE=”texto que aparece no botão”> O valor RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os mesmos valores de quando a pagina foi carregada. No atributo VALUE, pode-se definir o que será escrito no botão. Caso nenhum valor seja definido, aparecera somente RESET. Botão SUBMIT <INPUT TYPE=”SUBMIT” VALUE=”texto que aparece no Botão”> O valor SUBMIT no atributo TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador. O atributo VALUE define o que será escrito no botão. Caso nenhum valor seja definido, aparecera somente SUBMIT.


Carregar ppt "Curso de HTML."

Apresentações semelhantes


Anúncios Google