Hypertext Markup Language - Introdução ao HTML
luisfernandes229825
1 views
57 slides
Oct 13, 2025
Slide 1 of 57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
About This Presentation
HTML
Slide Content
HTML Hypertext Markup Language
É um sistema de hipertexto e hipermédia à escala planetária. Hipertexto - representa um texto em formato digital, ao qual se agrega outro conjunto de informação na forma de blocos de textos, imagens, sons ou vídeos, cujo acesso se dá através de referências específicas denominadas hiperligações, ou simplesmente links. A informação apresentada neste sistema reside em documentos escritos numa linguagem específica - HTML WWW – World Wide Web
(1) O cliente que acede ao sistema WWW envia um pedido de um documento HTML a um servidor, através do envio para a rede de um endereço URL (2) O pedido é canalizado pela Internet até ao servidor indicado no endereço (3) O servidor, ao receber o pedido, procura a página indicada. (4) A página correspondente é enviada para a Internet e conduzida até ao computador que fez o pedido. (5) Por fim, o browser abre a página recebida. Acesso a páginas Web
A transferência de informação dá-se entre computadores que actuam como servidores ( web servers) e outros que actuam como clientes ( cujo o software de acesso são os web browsers) O protocolo que assegura essa transferência é o HTTP – Hypertext Transfer Protocol HTTP – Hypertext Transfer Protocol
As páginas enviadas pelos servidores Web são documentos HTML que representam uma espécie de linguagem de formatação, um simples ficheiro de texto que é formatado através de uma série de comandos – ‘ tags ’ O código HTML formata os documentos no sentido de definir onde e com que aspecto é apresentada a informação: texto, imagens, animação gráfica e outros conteúdos multimédia. Documentos HTML
Na designação HTML ( Hypertext Markup Language ), a palavra Markup remete para um código baseado em “marcas” ou etiquetas ( tags ). Estas tags ou etiquetas consistem em códigos escritos em texto simples que indicam como deve ser a estrutura e formatação de cada página. Documentos HTML
Web Browser (Ex: Internet Explorer) – tem como função interpretar os códigos recebidos de um Website e a partir daí, dar forma às páginas Web. Website – conjunto de páginas Web relacionadas entre si e alojadas num servidor Web. Web Browser
Antes de mais, importa esclarecer que para a criação de uma página em HTML não é necessário nenhum software especial. Se bem que existam programas especializados, o Notepad do Windows é mais que suficiente para a criação de uma página web . HTML consiste em texto formatado por ‘ tags ’. Embora existam várias dezenas destas ‘ tags ’, apenas uma pequena parte destes é utilizada normalmente. Características HTML
Há algumas regras básicas que é necessário compreender antes de se começar com a criação de páginas... Todas as ‘ tags ’ são inseridas entre o sinal de menor e maior: < tag > Tirando as que representam a posição de um objecto (a inserção de uma imagem, por exemplo), todos as ‘ tags ’ de formatação devem ser abertas e fechadas (utilizando o caracter ‘/’): < tag > </ tag > Características HTML
Todos as ‘ tags ’ obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </ c > </b> </a> A primeira a abrir é a última a fechar, e vice-versa. <a> <b> <c> </a> </b> </c> É ERRADO . É indiferente utilizar maiúsculas ou minúsculas nas ‘ tags ’. Características HTML
Todas as páginas em HTML são identificadas pela ‘ tag ’ <HTML>, que terá obrigatoriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>. <HTML>…</HTML> Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página. <HTML> <HEAD> </HEAD> <BODY></BODY> </HTML> Estrutura Básica HTML
As tags <TITLE> … </TITLE> definem um título a ser exibido na barra de titulo da janela do navegador. Devem estar sempre entre as tags <HEAD> e </HEAD> O título serve de referência para os motores de busca. Serve de nome quando adicionamos a página aos favoritos. Estrutura Básica HTML
Formatação da tag <BODY> através do recurso a CSS’s Cor de fundo body { … background-color : Blue ; … } Cor do texto body { … color:Red ; … } Estrutura Básica HTML
Tag <META> Deve estar sempre entre as tags <HEAD> e </HEAD> Útil para realizar algumas tarefas, tais como: Passar informações aos motores de busca ; Actualizar automaticamente a página num intervalo de tempo predefinido, etc. Os campos <META> possuem 3 atributos principais: name : indica um nome para a informação; http-equiv : “ Content-Type ”; “ Refresh ” content : define o conteúdo Estrutura Básica HTML
Tag <META> Existem poucos valores para o atributo http-equiv , sendo o mais comum o Content-Type , cuja função é indicar o conjunto de caracteres utilizado pela página. Língua portuguesa <meta http-equiv=“Content-Type ” content=“text / html ; charset=iso-8859-1” /> Estrutura Básica HTML
Tag <META> Outra aplicação para o atributo http-equiv é o Refresh que tem por objectivo fazer com que o navegador execute uma determinada página após algum tempo. <meta http-equiv=“Refresh ” content=“5; URL=http :// www.google.pt ” /> Estrutura Básica HTML
Tag <META> O atributo name pode conter uma série de palavras-chave, sendo a mais comum KeyWords cuja função é ajudar os motores de busca. <meta name=“Keywords ” content=“HTML , internet, web , livro” /> O atributo name pode conter a palavra-chave Author cuja função é definir o autor da página. <meta name=“Author ” content=“Your Name ” /> Estrutura Básica HTML
Estas tag’s são utilizadas para dar destaques a títulos e subtítulos. Apresentam seis níveis que são numerados de 1 a 6 por ordem de importância. (1 - Titulo principal, - 2 titulo secundário, 3 – subtítulo...) Ex. <h1> Este é o meu titulo principal </h1> <h2> Este é meu titulo secundário </h2> <h3> Este é o meu subtítulo </h3> Textos - Títulos e Subtítulos
Os títulos podem ser alinhados via CSS através da propriedade text-align Ex: h1 { … text-align : center ; … } Os valores possíveis para esta propriedade são: left – Alinhamento à esquerda right – Alinhamento à direita center – Alinhamento ao centro justify – Alinhamento justificado Textos - Títulos e Subtítulos
A tag < br /> dá instruções ao browser para fazer uma mudança de linha. Não possui tag de fecho. Pode ser incluída dentro de outros elementos: parágrafos ou itens de uma lista. As tag’s <p> e </p> definem um novo parágrafo. A propriedade Css text- align também define o alinhamento de parágrafos Textos – Quebras de Linha e Parágrafos
As linhas horizontais < hr /> podem ser usadas para separar visualmente secções de uma página Web. Propriedades definidas via CSS : height – Define a espessura da linha. width – Define o comprimento da linha, que pode ser expresso em % (adapta-se ao tamanho da janela do browser) ou em pixéis. text-align – Define o alinhamento da linha. background-color – Define a cor da linha Não possui tag de fecho. Textos – Linha Horizontal
As tag’s < div > </ div > delimitam um bloco de texto permitindo a formatação do texto desse mesmo bloco. Vantagens: Definição da formatação de uma só vez Diminuição da digitação de código HTML Aumento de performance Ex: div { …; text-align : right ; …} < div > <h3>Este título está alinhado à direita< /h3> <p>Este parágrafo está alinhado à direita< /p> </ div > Textos – Alinhamento de um bloco de texto
Outra forma de centrar o texto é através das tags < center > e </ center > < center > <h3>Este título está centrado na página< /h3> <p>Este parágrafo está centrado na página< /p> </ center > As tags < blockquote > e </ blockquote > permitem aumentar o tamanho das margens esquerda e direita de todos os elementos que estão dentro destas tags . Textos – Centralização de texto e Margens
Para criar listas numeradas é necessário envolver toda a lista a ser exibida entre as tags <OL> e </OL> Cada elemento da lista deve ser iniciado pela tag <LI> A tag <LI> não possui tag de fecho. O browser aplica um recuo a cada um dos itens da lista e numera-os automaticamente de forma sequencial de 1 até n <OL> <LI> Primeiro item da lista numerada <LI> Segundo item da lista numerada </OL> Para criar sublistas numeradas basta encadear várias tags <OL> Textos – Listas numeradas
As listas numeradas possuem uma série de atributos que podem ser usados para personalizar a sua apresentação no browser. A forma como as listas são numeradas é definida pelo HTML através da propriedade Css List-style-type : ol { list-style-type : upper-latin ;} None – Sem numeração decimal – Números no formato decimal upper-latin – Letras maiúsculas lower-latin – Letras minúsculas upper-roman – Numeração romana em maiúsculas lower-roman – Numeração romana em minúsculas O atributo Value define o número em que se inicia a numeração. EX: <OL Type=“A ” Value=“5”> Textos – Listas numeradas
Iniciam com um marcador ou símbolo. São definidas pelas tags <UL> e </UL> Os elementos da lista são separados pela tag <LI> tal como nas listas numeradas Podem ser personalizadas através da propriedade List-style-type : ul { list-style-type : disc ;} “ disc ” – Exibe um círculo “ circle ” – Exibe uma circunferência “ square ” – Exibe um quadrado Textos – Listas com marcadores
Cada item da lista possui um termo e a sua respectiva definição. Normalmente são utilizadas para definir termos, criar textos explicativos, dicionários online, etc. É composta por duas partes: Um termo; A definição do termo. Uma lista de glossário deve estar entre as tags <DL> e </DL> Cada componente da lista deve possuir uma tag para o termo <DT> e uma tag para a respectiva definição <DD> Ex: <DL> <DT> Chip <DD>Circuito integrado. O termo designa… </DL> Textos – Listas de glossário
<B>…</B> Exibe o texto em negrito. <I> … </I> Exibe o texto em itálico. <U>…</U> Exibe o texto em sublinhado. <S>…</S> Exibe o texto rasurado <BIG>…</BIG> Exibe o texto um pouco maior em relação ao texto em seu redor. <SMALL>…</SMALL> Exibe o texto um pouco menor em relação ao texto em seu redor. <SUB> … </SUB> Exibe o texto inferior à linha <SUP> … </SUP> Exibe o texto superior à linha <TT> … </TT> Exibe o texto com fonte de máquina de escrever ( monoespaçada .) Textos – Formatação de caracteres
As características de exibição de uma fonte de um texto podem ser alteradas recorrendo a propriedades Css . O tamanho da fonte é definido pela propriedade font-size O tipo de letra (fonte) é definido pela propriedade font-family O estilo da fonte é definido pelas propriedades font-weight e font-style Textos – Controle das fontes
A cor da fonte é definida pela propriedade color : Nome da cor ( yellow , red , blue , green , etc ) Hexadecimal (#FFFFFF, #000000, etc ) Ex: h1{ color : #FF67EE; } Textos – Controle das fontes
Caracteres especiais < ; define o caracter < > ; define o caracter > & ; define o caracter &   ; define o caracter “espaço” Comentários <!-- texto do comentário --> Textos – Caracteres especiais e Comentários
A inclusão de imagens num documento HTML é realizada através da tag <IMG> Não possui tag de fecho; O atributo mais usado nesta tag é SRC (abreviatura de SouRCe ), ou seja, a sua localização. <IMG SRC = “[Caminho] [Nome da imagem]”> O caminho representa a pasta que contém a imagem. O nome da imagem representa a imagem a ser exibida. Imagens e Sons
Quando se projecta um site, é comum criar uma pasta raiz, que normalmente recebe os documentos html e uma série de outras pastas destinadas a ficheiros específicos, tais como: Imagens Sons Downloads Bases de dados Esta divisão visa facilitar a sua localização durante o desenvolvimento do projecto, ou a manutenção posterior do mesmo. Imagens e Sons - Caminhos
Se o ficheiro a ser inserido numa página não estiver na mesma pasta que contém o documento HTML, será necessário indicar o caminho a ser percorrido. Tipos de caminhos: Relativo ; Absoluto . Caminho Relativo : Localiza os ficheiros com base na sua posição relativa, ou seja, a sua posição em relação ao documento HTML. Ex. < Img SRC=“logo.gif ”> < Img SRC=“imagens / logo.gif ”> < Img SRC=../imagens/ logo.gif ”> Imagens e Sons - Caminhos
Caminho Absoluto É utilizado sempre que for necessário inserir uma imagem que esteja localizada noutro servidor. O caminho deve conter o endereço completo (URL) do local onde se encontra a imagem. Ex. <IMG SRC=“http :// www.online-carro.com / wp-content /uploads/2008/06/ bmw-limited.jpg ”> Imagens e Sons - Caminhos
propriedade BORDER Responsável por inserir um limite à volta da imagem, sendo a sua espessura definida em pixéis. img { border-width : 1px; /* espessura do limite */ border-style : solid ; / *estilo do limite */ border-color: blue; /* cor do limite */ } Imagens e Sons Outras propriedades da tag <IMG>
Propriedades WIDTH e HEIGHT Responsável por dimensionar as imagens (em pixéis) que serão exibidas no browser. Ex: img { width : 500px; height : 400px; } Estes atributos também aceitam valores em %. A ampliação de uma imagem pode provocar distorções, diminuindo a sua qualidade de exibição. Imagens e Sons Outras propriedades da tag <IMG>
A propriedade MARGIN Permite controlar o espaço à volta da imagem. img { margin : 0 5px 5px 0; } Imagens e Sons Outras propriedades da tag <IMG>
A inserção de uma imagem de fundo numa página web é realizada através da propriedade BACKGROUND-IMAGE . EX. body { background-image : url(images /img02.jpg); } Imagens e Sons – Imagens de Fundo
Existem duas formas de inserir sons numa página web : Utilizando a tag <BGSOUND> (Cabeçalho) Utilizando a tag <EMBED> (Corpo) Ex. <BGSOUND SRC = “ficheiro de som”> <EMBED SRC = “ficheiro de som”> Estas tags podem ser usadas com alguns atributos que permitem controlar a execução do áudio na página: LOOP = “número de vezes de repetição do áudio” AUTOSTART = “ true ” – Define se o som será executado automaticamente. Imagens e Sons - Áudio
A tag <A> é utilizada para criar uma hiperligação num documento HTML. Esta tag possui vários atributos, sendo os mais usados: HREF : Indica o ficheiro de destino da ligação de hipertexto ou endereço de uma página HTML NAME : Marca um indicador, ou seja uma região de um documento como destino de uma ligação. < A HREF = " http://www.google.pt "> Google </A> Hiperligações
Hiperligações na mesma página <A HREF=“#ecommerce ”> Comércio Electrónico </A> … … <A NAME=“ecommerce ”> Comercio Electrónico </A> Hiperligações - Marcadores
A inclusão de hiperligações em imagens segue o mesmo princípio das hiperligações adicionadas num texto. A única diferença está em usar uma imagem ao invés de um texto. <A HREF=“http :// www.google.pt ”> <IMG SRC=“imagens / auto.jpg ”> </A> Hiperligações - Imagens
Utilização da tag <A> para a criação de uma hiperligação para um e-mail. Ex: <A HREF=mailto: [email protected] > Envie-me um e-mail </A> Hiperligações - Emails
Uma tabela é composta por linhas e colunas que formam células . Estas células podem conter textos , imagens e até mesmo outras tabelas . Sintaxe mais comum: <TABLE> <TR> <TD></TD> </TR> </TABLE> Tabelas
Propriedade PADDING Atribui um espaçamento entre as células que compõem a tabela. Propriedade WIDTH Tem como função definir a largura da tabela ou das células. Propriedade BORDER Atribui um limite à tabela Tabelas
Cada uma das linhas da tabela é iniciada pela tag <TR> e finalizada com a tag </TR> Cada uma dessas linhas contém colunas cujo conteúdo está entre as tags <TD> e </TD> <TABLE> <TR> <TD>…</TD> <TD>…</TD> </TR> </TABLE> Tabelas - Linhas e Colunas
A propriedade Margin permite alinhar a tabela de três modos diferentes: margin-right : auto; – Alinha a tabela na margem esquerda margin : auto; – Alinha a tabela no centro do browser margin-left : auto; – Alinha a tabela na margem direita Tabelas – Alinhamento de tabelas
A propriedade text-align permite efectuar um alinhamento horizontal do conteúdo das células. O atributo vertical-align permite efectuar um alinhamento vertical do conteúdo das células. vertical-align : top; – Alinha os dados do topo da célula para baixo. vertical-align : bottom ; – Alinha os dados do fundo da célula para cima. vertical-align : middle ; – Centraliza verticalmente os dados de uma célula Tabelas – Alinhamento do conteúdo
O HTML permite unir células de linhas ou de colunas de uma tabela. Para unir colunas de uma determinada linha, utiliza-se o atributo COLSPAN inserido na tag <TD> <TD colspan=“n ”> … </TD> Para unir colunas de uma determinada linha, utiliza-se o atributo ROWSPAN inserido na tag <TD> <TD rowspan=“n ”> … </TD> Tabelas – Unir células
Um formulário consiste num conjunto de dados preenchidos pelo utilizador e recebidos pelo servidor web afim de serem processados. A criação de um formulário envolve duas etapas distintas: Criação do layout do formulário Desenvolvimento de scripts Formulários
A criação de um formulário é realizada através das tags <FORM> e </FORM> A tag <FORM> apenas possui os elementos que permitem recolher as informações digitadas num formulário e atributos que informam o navegador sobre a forma como os dados recolhidos devem ser encaminhados para o servidor. Formulários – Criação
O atributo ACTION da tag <FORM> define o tipo de acção a ser realizada com o formulário. As acções podem ser: O formulário é enviado a um endereço de e-mail. <FORM ACTION=“mailto:[email protected] ”>…</FORM> O formulário é enviado para uma página que contém um programa de script que interpreta e processa os dados enviados. <FORM ACTION=“endereço da página”>…</FORM> Formulários – Criação
O atributo METHOD da tag <FORM> define a forma como o formulário será enviado. Os métodos podem ser: GET: Os dados inseridos no formulário fazem parte da URL associada à consulta enviada para o servidor. As informações digitadas neste modo são visualizadas na barra de endereço do navegador. http://www.myweb.com/leitor.asp?id=7309 POST: Os dados inseridos no formulário fazem parte do corpo da mensagem encaminhada ao servidor que suporta uma grande quantidade de dados. As informações digitadas neste modo não são visualizadas na barra de endereço do navegador . Formulários – Criação
O HTML disponibiliza um conjunto de elementos destinados ao preenchimento dos dados de um formulário. Os principais são: Caixa de Texto ( Text ) Área de Texto ( TextArea ) Caixas de Verificação ( CheckBox ) Botões de Opção ( Radio ) Caixa de Selecção ( Select ) Botão Envio/Reset ( Submit /Reset) Formulários – Campos de entrada de dados
Caixa de Texto Consiste numa caixa de texto em linha. <input type=”text” name=” nome ”> Atributos: Name (Obrigatório) - Representa o nome da caixa de texto Type (Obrigatório) - Representa o nome do elemento usado Id (Opcional) - Representa o identificador da caixa de texto Value (Opcional) - Exibe um texto pré-preenchido na caixa de texto. Size (Opcional) - Define a largura, em caracteres de uma caixa de texto. MaxLenght (Opcional) – Indica o número máximo de caracteres que pode ser digitado. Formulários – Campos de entrada de dados
Área de Texto Consiste numa área de texto que permite escrever um texto livre < textarea rows= ”30” cols= ”30”> Exemplo de texto. </ textarea > Atributos: Name (Obrigatório) - Representa o nome da área de texto Id (Opcional) - Representa o identificador da área de texto Rows (Opcional) - Define o nº de linhas a ser exibido no campo de visão da área de texto. Cols (Opcional) - Define o nº máximo de caracteres, a ser exibido no campo de visão da área de texto. MaxLenght (Opcional) - Indica o número máximo de caracteres que pode ser digitado. Formulários – Campos de entrada de dados
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1
- Slides 57
- Age 49 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
45 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views