HTML HyperText Markup Language (Linguagem de Marcação de HiperTexto)
|
|
|
- Matheus Rosa Marreiro
- 8 Há anos
- Visualizações:
Transcrição
1 HTML HyperText Markup Language (Linguagem de Marcação de HiperTexto) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1
2 Noções Básicas Estrutura de uma página HTML 2
3 Noções Básicas Versões do HTML desde sua criação: 3
4 Estrutura Básica de Um Site <html> <head> <title>título da sua página</title> <meta name= description content= Breve descrição do seu site > <meta name= keywords content= Palavras chave do seu site > </head> <body> Nesta área fica tudo aquilo que se visualiza no navegador da internet, ou seja, textos, imagens, animações, juntamente com todas as tags HTML de formatação. </body> </html> 4
5 Tags 5
6 <!-- --> Comentário A maioria das TAGS são suportadas por todos os principais browsers do mercado, assim sendo, o Browser Support só aparecerá nos próximos slides quando algum dos nagadores não der suporte à TAG em questão. 6
7 <!DOCTYPE> Diz ao navegador como deverá ser interpretada os comandos HTML. 7
8 Variações de <!DOCTYPE> A declaração <!DOCTYPE> ajuda o navegador a mostrar a página corretamente: (DTD Document Type Definition) Variações da declaração <!DOCTYPE> 8
9 <html> Esta TAG: diz ao navegador que este é um um documento HTML; é um contâiner para todos os outros elementos, exceto o <!DOCTYPE>; representa a raiz de um documento HTML. 9
10 Cabeçalho do Documento 10
11 <head> Neste elemento podem-se incluir: um título para o documento, scripts, estilos, meta informação e etc. 11
12 <head> 12
13 <title> Define um título para o documento; Define um título na barra de ferramentas do navegador; Provê um título a página quando esta é adicionada aos favoritos; Provê um título para os mecanismos de busca. 13
14 <style> Dentro desta TAG especifica-se como o navegador deverá desenhar as informações (textos, imagens e etc.). 14
15 <style> MIME Multipurpose Internet Mail Extensions 15
16 <base> Especifica a URL/target base para todas as URL's relativas existentes no documento; Só pode existir uma <base> e esta deve ficar dentro da TAG <head>. 16
17 <base> 17
18 <link> Usada para criar uma ligação entre um documento HTML e recursos externos; Muito usada para ligar arquivos de folha de estilo (CSS). 18
19 <link> 19
20 <link> 20
21 <meta> Metadados são informações sobre dados; Metadados não são mostrados pelo navegador, mas podem ser analisados por outras máquinas; Metaelementos são tipicamente usados para especificar: a descrição da página, autor do documento, última modificação e etc. Metadados podem ser usados por navegadores, máquinas de busca e web-services. 21
22 <meta> 22
23 <meta> 23
24 <script> Usada para definição de scripts que rodam no lado cliente (e. g. JavaScript); Uso comum: validação, manipulação de imagens e mudança dinâmica de conteúdo. 24
25 <script> 25
26 <noscript> Usada para prover conteúdo alternativo para usuários que desabilitaram a execução de scripts no navegador e/ou para navegadores que não suportam scripts do lado cliente. 26
27 <noscript> 27
28 Corpo do Documento 28
29 <body> Define o corpo do documento; Contém todo conteúdo HTML, como: texto, hyperlinks, imagens, tabelas e etc. 29
30 <body> 30
31 <h1> a <h6> As TAGS de <h1> até <h6> são usadas na definição de títulos. Sendo o <h1> o mais significativo e <h6> o menos significativo. 31
32 <hr> Usado para separar conteúdos (definir uma mudança) na página HTML. 32
33 <hr> 33
34 <a> Define um hyperlink, usado para ligar uma página em outra; O atributo mais importante desta TAG é o href, que indica o link de destino. Por padrão um link aparecerá no navegador sublinhado e: link não visitado, aparece na cor azul, link já visitado, aparece na cor roxa e um link ativo (no clique), aparece na cor vermelho. 34
35 <a> 35
36 <a> 36
37 <div> Define uma divisão ou uma seção num documento HTML. 37
38 <div> 38
39 <span> Usada para agrupar elementos em linha num documento; Usada também para prover mudança visual (e. g. cor) em parte do texto ou do documento; 39
40 <table> Define uma tabela; Um tabela em HTML tem em sua composição outras TAGS: <tr> que define uma linha; <th> que define um cabeçalho e <td> que define uma célula. Pode possuir elementos complexos, como: <caption>, <col>, <colgroup>, <thead>, <tfoot> e <tbody>. 40
41 <table> 41
42 <caption> Define uma legenda (ou título) para a tabela; Deve ser usada imeditamente depois da TAG <table>; Só pode ser usado um por tabela. 42
43 <col> Especifica as propriedades para cada coluna dentro de uma TAG <colgroup>; Muito útil quando se quer aplicar uma formatação para uma coluna inteira sem replicá-la para as demais colunas e linhas. 43
44 <col> 44
45 <colgroup> Espeficifica um grupo de uma ou mais colunas em uma tabela para formatação; Útil para aplicação de estilos em colunas; Deve estar dentro de uma TAG <table> e, caso exista a TAG <caption>, deve ficar depois dela e antes das TAG's <thead>, <tbody>, <tfoot> ou <tr>. 45
46 <colgroup> 46
47 <thead>, <tbody> e <tfoot> Estes elementos são usados em conjunto para especificar cada parte da tabela, respectivamente: Cabeçalho, Corpo e Rodapé; Quando uma tabela é grande (se estendendo por mais de uma página), estes elementos podem habilitar a impressão do cabeçalho e rodapé da tabela em todas as páginas que ela ocupar; Estes elementos devem ser usados em conjunto, sendo que <thead> deve vir sempre depois de uma TAG <table> e <colgroup> (se exisitr). E antes das TAG's <tbody>, <tfoot> ou <tr>. 47
48 <thead>, <tbody> e <tfoot> 48
49 <thead>, <tbody> e <tfoot> 49
50 <nav> Define uma seção de links de navegação. 50
51 <map> Usada para definição de uma imagem mapa no lado cliente; Uma imagem mapa é uma imagem que contém áreas de clique (definidas através de coordenadas) na figura; Uma imagem mapa contém um determinado número de elementos <area>, que definem as áreas de clique na imagem mapa. 51
52 <map> 52
53 <area> Esta TAG define uma área de clique dentro da imagem mapa; Esta TAG deve vir sempre dentro de uma TAG <map>. 53
54 <area> 54
55 Entrada de Dados 55
56 <form> Usada para criação de um formulário para entrada de dados pelo usuário do software; O elemento <form> pode conter um ou mais dos seguintes elementos: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset> ou <label>. 56
57 <form> 57
58 <input> Especifica um campo no formulário onde o usuário pode entrar com dados; Pode variar os tipos de entrada de dados de acordo com o atributo type. 58
59 <input> 59
60 <input> 60
61 <input> 61
62 <input> 62
63 <textarea> Define um campo para entrada de dados com múltiplas linhas; O tamanho do campo pode ser definido pelos atributos cols e rows ou ainda melhor, por CSS por meio das propriedades height e width. 63
64 <textarea> 64
65 <button> Cria um botão; Dentro deste botão você poderá colocar textos ou imagens. Esta é a diferença para os botões criados com a TAG <input>; Sempre especifique o atributo type do <button>, pois há diferença entre os diversos navegadores, para o valor padrão deste atributo. 65
66 <button> 66
67 <select> Usada para criar um combobox; A TAG <option> definida dentro da <select> define os elementos que estarão disponíveis na lista de escolha. 67
68 <select> 68
69 <option> Define uma opção numa lista de seleção; Esta TAG sempre vai dentro de uma TAG <select> ou <datalist>. 69
70 <option> 70
71 <datalist> Especifica uma lista de opções pré-definidas para um elemento <input>; <datalist> é utilizada para prover o recurso de autocompletar ao <input>. Quando o usuário começar a digitar será mostrada a ele uma lista com as opções pré-definidas; Use o atributo list do elemento <input> para fazer a ligação deste com o <datalist>. 71
72 <optgroup> Usada para agrupar opções relacionadas em uma lista de seleção. 72
73 <fieldset> Usado para agrupar elementos relacionados em um formulário; Um quadro é desenhado ao redor dos elementos; A TAG <legend> dá um rótulo ao quadro. 73
74 <fieldset> 74
75 <label> Define um rótulo para um elemento <input>; O atributo for do elemento <label> deve ser igual ao atributo id do elemento relacionado para que se crie uma ligação entre ambos. Desta forma, ao clicar o no elemento <label> o usuário será remetido ao elemento ao <label> relacionado. 75
76 <label> 76
77 Formatação de Texto e Parte da Teoria Acima mais Trabalhada 77
78 Tags para Formatação de Fonte e Texto Itálico: <i>texto</i> Sublinhado: <u>texto</u> Negrito: <b>texto</b> Texto Riscado: <s>texto</s> Novo Parágrafo: <p>texto</p> Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior. Quebra de linha: <br> Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo. Unidade 01 HTML 78
79 Tags para Formatação de Fonte e Texto Centralizar: <center>texto</center> Alinhar à esquerda: <p align="left">texto</p> Alinhar à direita: <p align="right">texto</p> Mudar cor do texto: <font color="red">texto</font> Pode também ser utilizado os códigos hexadecimais para definir as mais variadas cores. Mudar a fonte: <font face="freemono">texto</font> Mudar o tamanho da fonte: <font size="2">texto</font> (pode-se escolher o tamanho entre 1 e 7) 79
80 Dica Pode-se formatar um texto usando diversas tags simultaneamente: <b><u><i>teste</i></u><b> Resultado: Teste 80
81 Cor de Fundo Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto, de modo que não dificulte a leitura. Normalmente as cores claras funcionam bem com uma cor escura para o texto; Para usar uma cor de fundo na sua página você deve usar o seguinte código: <body bgcolor="blue"> Pode também utilizar os códigos hexadecimais para definir as cores que combinem melhor. 81
82 Inserindo Imagem de Fundo Se você quiser definir uma imagem de fundo para sua página use o seguinte código: <body background="fotos/imagem.jpg"> Lembre-se que fotos/imagem.jpg" é o caminho (pastas) onde se encontra o arquivo da imagem.jpg. Trata-se de um URL (Uniform Resource Locator) relativo que aponta para a pasta "fotos" que está no seu site. Pode-se também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada em outros sites na Internet. Um exemplo do código da imagem de fundo com URL absoluto é: <body background=" 82
83 Inserir Imagem no Site A tag para se inserir imagens é: <img src="imagem.jpg"> Deve-se ter atenção ao endereço da imagem a ser introduzida em "src" (abreviação de source, do inglês, origem), deve-se levar em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deve ser: <img src="fotos/imagem.jpg"> 83
84 Texto Descritivo de Imagem (Quando a Exibição Estiver Desabilitada) O atributo "alt" para imagens é de uso obrigatório e sua funcionalidade é que um texto descritivo de uma imagem apareça sempre que a exibição das imagens não estier ativa no browser. Tag: <img src="imagem.jpg" alt="aniversário da Joana"> Observação: No Internet Explorer o alt erroneamente é utilizado por muitos como hint de imgem. Em outros browsers como Opera, Firefox, Safari, Epiphany e outros, o alt não funciona assim. 84
85 Título Para Imagens O atributo title quando utilizado em imagens tem a função de mostrar o título que foi dado àquela imagem, quando o usuário passar o mouse sobre ela. 85
86 Definindo Altura e Largura Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em porcentagem: <img src="imagem.jpg" width="200" height="100"> 86
87 Definindo Contorno na Imagem Para definir um contorno numa imagem usa-se o atributo "border"; O valor 0 (zero) faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior será a espessura do contorno; Exemplo: <img src="imagem.jpg" border="5"> 87
88 Usando Múltiplos Atributos Se quisermos definir as dimensões da imagem, um contorno e um texto explicativo ("alt"), podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante: <img src="imagem.jpg" border="5" alt="aniversário da Joana" width="200" height="100"> 88
89 Inserindo Hyperlinks A tag para se inserir hyperlinks é: <a href= > Um rótulo para o link </a> Exemplo: <a href= >O site mais bonito do mundo!</a> 89
90 Inserir Hyperlinks em Imagens Para fazer com que os visitantes de um site possam ser levados para outra página ao clicar numa imagem, basta juntar a tag para imagem com a tag para link, exemplo: <a href=" mg src="fotos/imagem.jpg"></a> 90
91 Abrir Links em Nova Janela Se você não quer que as pessoas abandonem completamente o seu site quando clicarem nos links, você pode definir que os links sejam abertos numa nova janela. Basta usar o atributo: target='_blank' <a href=" target="_blank">nome do Link</a> 91
92 Endereços Absolutos URL, em português, Localizador Padrão de Recursos, é o endereço dos sites que estamos habituados a colocar na barra de endereços dos navegadores; Pode-se fazer links para outras páginas usando URL's absolutos ou relativos; Um URL absoluto contém o caminho completo para a localização do arquivo no site que se pretende acessar. Se por exemplo você quisesse abrir uma página chamada camoes.html, que se encontra no interior de uma pasta chamada "poetas", e esta pasta se encontra na raiz do seu site, então o URL absoluto seria: <a href=" É preferível o uso de URL's absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links continuarão a funcionar. 92
93 Endereços Relativos Um URL relativo indica apenas o caminho a percorrer desde a posição em que se está; Se por exemplo estivermos na página camoes.html (que se encontra dentro da pasta "poetas") e quisermos fazer um link para trás, ou seja, para a página principal (por exemplo a página index.html na raiz do site), então o URL relativo seria: <a href="../index.html">página Principal</a> os dois pontos, seguidos de uma barra, dizem ao browser para subir um nível na hierarquia na estrutura de pastas do site; O URL relativo permite que o site possa ser testado off-line, quando tivermos as pastas e os arquivos html no HD. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do HD. 93
94 Hyperlinks, Âncoras ou Marcadores Um link ou hyperlink ou âncora ou marcador nada mais é que uma ligação para dentro da própria página. É um link que leva o visitante para outra seção da mesma página (em vez de o levar para outro site). Para fazer um marcador primeiro vá ao local no seu código HTML para onde você quer que o link aponte. Este é o local para onde o visitante será encaminhado quando clicar no link âncora. <a name="nomedaancora">este é o Texto Onde a âncora vai parar</a> "nomedaancora" é o nome da âncora que você escolher. Agora para fazer um link para aquele local da página, use a tag para hyperlinks, e no endereço é só colocar cerquilha (#) seguido do nome escolhido para a âncora: <a href="#nomedaancora">clique aqui</a> 94
95 Links para s Para criar um link que permite que os seus visitantes lhe enviem s basta colocar a função "mailto" na tag de hyperlink: <a href="mailto:seuendereço@ .com.br ">Envie-me um </a> 95
96 Mudar as Cores dos Links Por padrão os hyperlinks têm a cor azul. Mas você pode alterar as cores usando o atributo "link" no interior da tag <body>; Exemplo: <body link="red" vlink="green" alink="yellow"> link - cor dos links, vermelho neste caso, vlink - links visitados, verde neste caso, alink - links ativos, amarelo neste caso. 96
97 Tabelas Digamos que tabelas são análogas a Bombril, ou seja, têm mil e uma utilidades! :-) Com elas pode-se fazer muita coisa no design do site; Por exemplo: ordenar o conteúdo de uma determinada forma, ordenar imagens lado a lado, ou em fila, criar colunas para o layout do site, criar uma barra lateral e etc. 97
98 Tabelas - Tags Básicas São 3 as tags básicas para inserir tabelas: <table> é a tag que inicia e finaliza uma tabela, <tr> significa "table row"( linha de tabela), é a tag que representa uma linha na tabela <td> significa "table data" (dados da tabela), é a tag que representa uma célula da tabela e deve estar dentro da linha Vamos então criar uma tabela simples: <table> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> e o resultado desta tabela é: Célula 1 Célula 4 Célula 2 Célula 5 Célula 3 Célula 6 98
99 Definindo um Contorno para a Tabela Para definir um contorno para uma tabela basta colocarmos o atributo "border" e a espessura do contorno que queremos: <table border="2"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> e o resultado é: 99
100 Alterando a Cor do Contorno da Tabela Para alterar a cor do contorno da tabela colocamos no atributo "bordercolor" a cor que queremos: <table border="2" bordercolor="red"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> neste teremos um contorno vermelho: 100
101 Definindo Espaço Entre as Céluas Podemos aumentar ou diminuir o espaço no interior da tabela entre as células. Para isso usamos o atributo "cellspacing": <table border="2" cellspacing="15"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> então teremos algo assim: 101
102 Definindo Espaço no Interior das Células Para aumentar ou diminuir o espaço no interior das células usamos o atributo "cellspadding": <table border="2" cellpadding="10"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> então teremos: 102
103 Definindo a Largura da Tabela Para definirmos a largura de uma tabela usamos o atributo "width". O valor pode ser em pixels ou em porcentagem; Se usarmos uma percentagem, por exemplo, um valor de 100%, a tabela vai ocupar todo o espaço disponível dentro da seção onde se encontra; <table border="2" width="100%"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> resultado: 103
104 Definindo a Largura da Tabela Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa de 400px; <table border="2" width="400"> <tr> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td>célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> resultado: 104
105 Definindo a Largura das Colunas Se não quisermos que todas as colunas tenham a mesma largura temos que definir um atributo de largura dentro da tag <td> (célula). Se usarmos percentagens temos: <table border="2" width="400"> <tr> <td width="50%">célula 1</td> <td>célula 2</td> <td>célula 3</td> </tr> <tr> <td width="50%">célula 4</td> <td>célula 5</td> <td>célula 6</td> </tr> </table> e como o resultado temos: 105
106 Definindo a Altura das Células Podemos também definir uma altura para a tabela adicionando o atributo "height": <table border="2" height="200" width="400"> <tr> <td width="250">c 1</td> <td width="75">c 2</td> <td width="75">c 3</td> </tr> <tr> <td width="250">c 4</td> <td width="75">c 5</td> <td width="75">c 6</td> </tr> </table> resultado: 106
107 Alinhamento Horizontal do Conteúdo da Células Por padrão o conteúdo das células vem alinhado à esquerda, mas é possivel também centralizar o conteúdo e alinhá-lo à direita. Para isso usamos o atributo "align" no interior da tag <td>: <table border="2" width="400"> <tr> <td width="250" align="center">c 1</td> <td width="75">c 2</td> <td width="75">c 3</td> </tr> <tr> <td width="250" align="center">c 4</td> <td width="75">c 5</td> <td width="75">c 6</td> </tr> </table> resultado: 107
108 Alinhamento Vertical do Conteúdo das Células Por padrão os dados ficam alinhados verticalmente no meio (middle) da célula, mas é possível alinhar o conteúdo para o fundo (bottom) e para o topo (top) da célula. Para isso usamos o atributo "valign" no interior da tag <td>: <table border="2" height="200" width="400"> <tr> <td width="250" valign="bottom">c 1</td> <td width="75">c 2</td> <td width="75">c 3</td> </tr> <tr> <td width="250" valign="top">c 4</td> <td width="75">c 5</td> <td width="75">c 6</td> </tr> </table> resultado: 108
109 Definindo Listas Numeradas Para apresentar uma lista de itens numerados usamos a tag <ol>, iniciais de "ordered list", para a lista, e a tag <li>, iniciais de "list item", para cada item: <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> e o resultado é: 1) Item 1 2) Item 2 3) Item 3 109
110 Definindo Listas Não Numeradas Para apresentar uma lista de itens não numerada usamos a tag <ul>, iniciais de "unordered list", para a lista, e a tag <li>, iniciais de "list item", para cada item: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> e o resultado é: Item 1 Item 2 Item 3 110
111 HTML Layouts Muitos websites são criados em tabelas, disponibilizando seu conteúdo em colunas (como se fossem revistas ou jornais); Embora seja possível a criação de bons layouts utilizando HTML tables, este recurso não foi criado para isto; Vejamos dois exemplos: 111
112 Layout Utilizando <table> Imagem site com layout utilizando <table> 112
113 Layout Utilizando <div> Imagem de site utilizando layout com <div>. 113
114 Caracteres Especiais 114
115 Bibliografia LUCAS, Avelino. Como Fazer um Site. Disponível em: < tml.html> Acesso em: 06 jan SANTOS, Lauro. Uso Correto do Atributo Alt em Imagens. Disponível em: < Acesso em: 06 jan W3Schools. HTML. Disponível em: < Acesso em: 06 jan
Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
HTML Página 36. Índice
PARTE - 6 HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table
HTML: INTRODUÇÃO TAGS BÁSICAS
HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento
TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo
TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.
CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML
INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma
HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)
HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
Tabelas. table <table>...</table>
Tabelas table ... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas
> Herbet Ferreira Rodrigues > [email protected]
Curso HTML & CSS > Herbet Ferreira Rodrigues > [email protected] Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML
INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Introdução a HTML. André Tavares da Silva.
Introdução a HTML André Tavares da Silva [email protected] HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)
Introdução à Tecnologia Web
Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>
Tabelas HTML Tabelas Tabelas São definidas pela tag Uma tabela é dividida em linhas -com a tag Cada linha divida em células de dados (com a tag ). As letras td são um acronimo
Curso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
<title>introdução a HTML</title>
introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs
Programação para Web HTML - Parte 2
Programação para Web HTML - Parte 2 Professor: Harlley Lima E-mail: [email protected] Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 2 de março
Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva
Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1
Programação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa [email protected] 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Prof. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
Programação para Internet I 3. HTML. Nuno Miguel Gil Fonseca
Programação para Internet I 3. HTML Nuno Miguel Gil Fonseca [email protected] Um dos principais responsáveis pela evolução da Internet; Tida como a linguagem da Internet; Não é na verdade uma
3. Construção de páginas web Introdução ao HTML
3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,
HTML (HyperText. Markup Language)
Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução
HTML - Definição e Conceitos
1 HTML - Definição e Conceitos HTML e uma abreviação para Hyper Text Markup Language ou Linguagem de Marcação de Hipertexto. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas"no
HTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio [email protected] #Objetivo Descrever os principais elementos da XHTML, Quando, Porque
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Tabelas A tag permite a criação de tabelas com linhas e colunas Tabelas devem ser utilizadas para organizar e apresentar dados
Lista e Tabelas. Fundamentos da Linguagem Web
Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização
Plano de Aula - Dreamweaver CS5 - cód Horas/Aula
Plano de Aula - Dreamweaver CS5 - cód.4149 24 Horas/Aula Aula 1 Capítulo 1 - Introdução Aula 2 Continuação do Capítulo 1 - Introdução Aula 3 Capítulo 2 - Site do Dreamweaver 1.1. Novidades do Dreamweaver
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes
PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes [email protected] http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas
Claudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML [email protected] 2 Recapitulando - Estrutura básica título DA PÁGINA
1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina
Introdução ao HTML André Luiz Silva de Moraes Hypertext Markup Language Linguagem de Marcação de Hipertexto Padroniza a Escrita do texto Permite que um navegador reconheça elementos para inserir em uma
Guia de Bolso HTML e XHTML
Guia de Bolso HTML e XHTML Este guia de bolso oferece uma listagem concisa, porém abrangente, dos elementos e atributos especificados nas Recomendações HTML 4.01 e XHTML 1.0. O texto utiliza a abreviação
Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript
1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
MÓDULO 1 - xhtml Básico
MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide
Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15
APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
<CENTER> <iframe src="http://www.universo.edu.br" width=740 height=255> </iframe> </CENTER>
6.4 iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando . Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto
Introdução a Tecnologia da Informação
Introdução a Tecnologia da Informação Informática Básica Software de apresentação Prof. Jonatas Bastos Power Point p Faz parte do pacote Microsoft Office; p Software com muitos recursos para construção
WebDesign. Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
Apostila de Excel 2007
1 Apostila de Excel 2007 Índice 1-Guias do excel... 3 1.1 Início... 3 1.2 Inserir... 4 1.3 Layout de Página... 5 1.4 Formulas... 6 1.5 Dados... 7 1.6 Revisão... 8 1.7 Exibição... 9 2 Conceito de células...
Sumário. 1- Notícias. 1.1 Publicando uma nova notícia Blocos de edição
O site desenvolvido pela SH3 é intuitivo, totalmente gerenciado através de um painel de administração. Nele o usuário responsável será mantenedor de todas as informações e configurações existentes, podendo
Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo:
Título: Alinhamento Central com CSS Descrição: Neste artigo serão mostrados os atributos e recursos necessários para alinhamentos de elementos inscritos no HTML, que no caso é o CSS. Login: alcideswenner
Formatação de Textos e Caracteres
Formatação de Textos e Caracteres Os comandos de formatação de caracteres são divididos em dois grupos: lógicos e físicos. Estilos físicos: ... - destaca o texto em negrito ... - exibe o
Programação para web HTML: Formulários
Programação para web HTML: Formulários Professor: Harlley Lima E-mail: [email protected] Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março
SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível
SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente
1 Introdução ao HTML e formatação de texto
1 Introdução ao HTML e formatação de texto Vinicius A. de Souza [email protected] São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Introdução...3 Uma visão geral do HTML...3 Estrutura do documento...3
OPERAÇÃO DE SOFTWARE E APLICATIVOS
OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6
IEFP Instituto de Emprego e Formação Profissional Sector Terciário do Porto. Curso: Internet. Módulo: Estrutura de um sítio para a Internet
IEFP Instituto de Emprego e Formação Profissional Sector Terciário do Porto Curso: Internet Módulo: Estrutura de um sítio para a Internet Formador: Hélder Oliveira 1 Índice Introdução... 3 Planeamento
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria ([email protected]) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
Desenvolvimento Web. XHTML tag head e tags de texto. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web XHTML tag head e tags de texto Professor: Bruno Gomes 2012 INTRODUÇÃO
Manual Prático. Elisabete Aguiar
Manual Prático Elisabete Aguiar Índice A BARRA DE OPÇÕES... 4 Abrir um documento existente... 6 Guardar um documento Word... 7 Ambiente de Trabalho no Microsoft Word 2007... 9 Configuração de Páginas...
DICAS PARA DESENVOLVER SITE ACESSÍVEL
DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário
Programação e Designer para WEB
Programação e Designer para WEB html Prof. Rodrigo Rocha [email protected] http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação
Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B
Projeto Integrador Green Friday Pesquisa HTML5 Gestão em Tecnologia da Informação Turma 1º B Versão : 1.0.0 Equipe Cristiano Margarida Rodrigues Idealização e arquitetura Tiago Dariel Gois Marques - Teste
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
Roteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Desenvolvimento de Aplicações para. Prof.: Bruno Rafael de Oliveira Rodrigues
Desenvolvimento de Aplicações para Internet Prof.: Bruno Rafael de Oliveira Rodrigues Videos nas Páginas Existem várias maneiras de inserir um vídeo em sua página. O vídeo pode aparecer sob a forma de
Construção de Páginas html com o editor NVU
1 Curso de Formação de Professores em Tecnologia de Informação e de Comunicação Acessível APRESENTAÇÃO CONHEÇA O EDITOR DE PÁGINAS HTML NVU Construção de Páginas html com o editor NVU Crie e edite páginas
Aula 11 Introdução ao Java Script
Aula 11 Introdução ao Java Script Java Script é uma linguagem que permite trabalhar com a Lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se
Manual do usuário people
Manual do usuário people http://people.ufpr.br/ Sumário 1. O que é?... 3 2. Como é feito o acesso... 3 3. O Que pode ser feito no people.ufpr.br?... 3 4. Espaço de Armazenamento... 3 5. Como é feito a
Conhecendo a aba Início
Conhecendo a aba Início Grupo: Células... pág. 2 1º Exercício... pág. 6 Grupo: Alinhamento... pág. 7 2º Exercício... pág. 7 Grupo: Número... pág. 8 3º Exercício... pág. 9 Grupo: Fonte... pág. 10 4º Exercício...
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
#Fundamentos de uma página web
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Fundamentos de uma página web Eliezio Soares [email protected] Aula de
UNIVERSIDADE FEDERAL DE PELOTAS. Índice
Índice Capítulo 11 Formatação... 2 Guias e Réguas... 2 Definindo ações a objetos... 2 Botões de ação... 4 Inserindo Cabeçalho e Rodapé... 4 Propriedades... 5! Informações Gerais... 5! Informações de Resumo...
Adicionar uma figura, como um botão Submeter, a um formulário
PPaaggi innaa 1 Parte 2 Adicionar uma figura, como um botão Submeter, a um formulário Adicione uma figura a um formulário para usá-la no lugar de um botão Submeter. Após preencher o formulário, o visitante
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
Receita. Introdução HTML & CSS. Neste projeto você aprenderá a criar uma página de internet para sua receita favorita. Lista de atividade
HTML & CSS 1 Receita All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You can register
Introdução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
Linguagem WEB Prof. Alexandre Unterstell [email protected] - www.alex.inf.br/cesc
Linguagem WEB Prof. Alexandre Unterstell [email protected] - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),
Apostila Impress 01. Partes da Janela Principal do Impress
1 Apostila Impress 01 Partes da Janela Principal do Impress A janela principal do Impress tem três partes: - o Painel de Slides; - Área de Trabalho; - e Painel de Tarefas. Adicionalmente, diversas barras