Introdução a Linguagem de Marcação HTML - Principios
JoberthSilva
7 views
33 slides
Oct 30, 2025
Slide 1 of 33
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
About This Presentation
Introdução a linguagem de marcação HTML. Aborda seus fundamentos
Slide Content
Fundamentos do Desenvolvimento Web
Ciclo das Páginas Web HTML Principais TAGS Hiperlinks Tabelas Formulários Folhas de Estilos Conteúdos
O que é HTML? HTML – é uma linguagem de marcação de hipertexto. H - Hyper T – Text M - Markup L – Language
HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas:
TAGS HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas. Tag é uma palavra-chave (comando) que define um item (imagens, texto, hyperLink, etc.) que irá fazer parte da página Lembrando que a grande maioria trabalha em pares. As tags são identificadas por estarem entre os sinais < > e < />
Tags <Comando> Seu Texto </Comando>
Tags - Principais <HTML> </HTML> Marca o início e o fim do documento <HEAD> </HEAD> Marca o início e o fim do Cabeçalho <TITLE> </TITLE> Mostra o título na barra de título <BODY> </BODY> Determina o que vai ser o “corpo” do programa.
Tags – Na prática <HTML> <HEAD> <TITLE> Minha primeira Aula de HTML </TITLE> </HEAD> <BODY> Bom dia a todos, quem esta com sono levanta a mão .. </BODY> </HTML>
Tags – Na prática
Tags – Na prática
Tags – Na prática <HTML> <HEAD> <TITLE> Minha primeira Página </TITLE> </HEAD>
Tags – Na prática <BODY> Sejam bem vindo ao mundo HTML! </BODY> </HTML>
Tags - Principais <BODY> <H1> Cabeçalho de tamanho 1 </H1> <H2> Cabeçalho de tamanho 2 </H2> <H3> Cabeçalho de tamanho 3 </H3> <H6> Cabeçalho de tamanho 6</H6> </BODY>
<H1> Cabeçalho de tamanho 1 <H2> Cabeçalho de tamanho 2 <H3> Cabeçalho de tamanho 3 <H6> Cabeçalho de tamanho 6
TAG – Parágrafo <P> <HTML> <HEAD> <TITLE> Minha primeira Página </TITLE> </HEAD> <BODY> Sejam bem vindo ao mundo HTML, <P>agora viajaremos <P>no html <P>!!!!! </BODY> </HTML>
TAG – Parágrafo <P>
TAG - QUEBRA DE LINHA <BR> O comando < br > faz uma quebra de linha. Este comando também insere uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido.
TAG - QUEBRA DE LINHA <BR> <HTML> <HEAD> <TITLE> Minha primeira página HTML </TITLE> </HEAD> <BODY> Quando um comando <BR> é inserido em um local do programa, o browser irá<BR> fazer uma quebra de linha, <BR> posiciona-se na linha seguinte ao comando.<BR> </BODY> </HTML>
TAG - QUEBRA DE LINHA <BR>
Formatação Sintaxe Função NEGRITO <b>texto</b> Aplica o estilo negrito ITÁLICO <I>texto</I> Aplica o estilo itálico SUBLINHADO <u>texto</u> Aplica um sublinhado SMALL <small>texto</small> Reduz e altera a fonte BIG <big>texto</big> Aumenta a fonte e aplica negrito Cor da fonte < font color =?></ font > Altera a cor da fonte
Formatação TEXTO <b></b> Texto negrito. <i></i> Texto em itálico. < tt ></ tt > Texto estilo máquina de escrever , mono espaçamento . < font size =?></ font > Tamanho das letras. < font color =?></ font > Cor das letras.
Mais algumas tags Formatação ATRIBUTOS DO CORPO <body bgcolor =?> Cor de fundo. <body text =?> Cor de texto.
Formatação TEXTO <b></b> Texto negrito. <i></i> Texto em itálico. < tt ></ tt > Texto estilo máquina de escrever , mono espaçamento . < font size =?></ font > Tamanho das letras. < font color =?></ font > Cor das letras.
GRAFISMO <img src =“imagem.jpg"> Insere uma imagem. <img src =“imagem.jpg“ align=?> Alinha uma imagem em relação ao resto do texto. <img src =“imagem.jpg“ border =?> Define a borda da imagem. <img src=“ imagen " width=“ %"> Define o tamanho da exibição da Imagem. Formatação
Vamos montar uma nova pagina Inserir texto fomatar cor, fonte, tamanho da fonte Inserir 15 imagens Inserir 10 gif animados Não quero que reste nenhuma duvida sobre inserir imagem na pagina de vcs ..... Exercício
Atividades Faça os exemplos
Atividade
Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7
- Slides 33
- Age 32 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 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