02 - Linguagem HTML

•

Escola Meta

0

pedrin

02/05/2024

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Ciência da Computação

6.445 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Programação WEB Responsiva
Prof. Me. Fernando Stela
fernando.stela@docente.unip.br
Linguagem HTML
Linguagem HTML
Editores HTML
Comandos HTML
O que é HTML?
• Significa Hyper Text Markup Language
• É a linguagem de marcação padrão 
para criar páginas da Web
• Descreve a estrutura de uma página 
da Web
• Consiste em uma série de elementos
• Os elementos HTML informam ao 
navegador como exibir o conteúdo
• Os elementos HTML rotulam partes 
do conteúdo como "isto é um título", 
"isto é um parágrafo", "isto é um 
link", etc.
Linguagem HTML
Com o uso da linguagem HTML, o
desenvolvedor consegue fazer a
especificação de atributos para
determinado texto, como fonte,
tamanho e cor, e criar hipertextos,
marcações que definem um vínculo
entre o texto e outro documento.
Aqui, usamos o conceito do hipertexto
relativo ao estabelecimento de vínculos
entre diversos documentos,
normalmente conhecidos como
páginas, criados a partir de marcações
específicas.
Editores HTML
Um editor de texto simples é tudo que precisamos para
criar páginas web em HTML.
As páginas da Web podem ser criadas e modificadas usando
editores de HTML profissionais, mas, no entanto, para
aprender HTML, recomendamos um editor de texto simples
como o Bloco de Notas, Notepad++(PC Windows) ou o
TextEdit (Mac) ou o Visual Studio Code.
Usar um editor de texto simples é uma boa maneira de
aprender HTML.
Instalando o Notepad++
Caso não tenha instalado o notepad++ em seu computador,
faça o download em:
https://notepad-plus-plus.org/downloads/
e instale a última versão.
O Notepad++ é um editor de código-fonte gratuito (como
em “liberdade de expressão” e também como em “cerveja
grátis”) e substituto do bloco de notas que oferece suporte
a vários idiomas.
https://notepad-plus-plus.org/downloads/
Usando editores HTML
Passo 1: Abra o Bloco de Notas ou o Notepad++ (PC)
Abra a tela inicial (o símbolo da janela no canto inferior esquerdo
da tela). Digite Bloco de Notas ou Notepad++ e abra o aplicativo.
Altere para que o editor o auxilie na digitação de código, em:
Linguagem > H > HTML.
Passo 1: Abra o TextEdit (Mac)
Abra o Finder > Aplicativos > TextEdit
Altere também algumas preferências para que o aplicativo salve
os arquivos corretamente. Em Preferências > Formato > escolha
"Texto Simples“.
Em seguida, em "Abrir e salvar", marque a caixa que diz "Exibir
arquivos HTML como código HTML em vez de texto formatado".
Passo 2: Digite um código HTML.
<!DOCTYPE html>
<html>
<head>
<title>Linguagem HTML</title>
</head>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Passo 3: Salve a página HTML
Salve o arquivo em seu computador.
Selecione Arquivo > Salvar como no menu.
Escolha uma pasta onde o arquivo será salvo e nomeie o
arquivo como "index.html“.
É importante lembrar a pasta onde seus arquivos serão
salvos.
Etapa 4: visualize a página HTML em seu navegador
Abra o arquivo HTML salvo em seu navegador favorito
(clique duas vezes no arquivo ou clique com o botão
direito do mouse - e escolha "Abrir com").
Estrutura do documento HTML
Um documento HTML é dividido em seções, e cada seção
deve conter um tipo específico de informação. Temos um
marcador para definir cada seção do documento.
A estrutura básica de um documento HTML é formada pelos
componentes citados a seguir:
Estrutura da página HTML
Estrutura da página HTML
Todos os documentos HTML devem começar com 
uma declaração de tipo de documento: 
<!DOCTYPE html>
O próprio documento HTML começa 
<html> e termina com </html>
A parte visível do documento HTML está entre 
<body> e </body>
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags
<h1><h6>
Onde:
<h1>define o cabeçalho mais importante. 
<h6>define o título menos importante
<h1>Cabeçalho/Título 1</h1>
<h2>Cabeçalho/Título 2</h2>
<h3>Cabeçalho/Título 3</h3>
Parágrafos HTML
Os parágrafos HTML são definidos com a tag <p> 
tag:
<p>Esse é um parágrafo.</p>
<p>Esse é um outro parágrafo.</p>
Mais uma forma de parágrafo.<p>
Links HTML
Os links HTML são definidos com a tag <a>:
<a href="https://www.google.com">Página do google</a>
O destino do link é especificado no atributo href. 
Os atributos são usados para fornecer informações 
adicionais sobre os elementos HTML.
Aprenderemos mais sobre atributos nas próximas 
aulas!
Imagens no HTML
As imagens HTML são definidas com a tag <img>:
<img src="daw/Figuras/logo_FourHeads.jpg"
width="104" height="142">
O atributo src=‘’, define o caminho da imagem
Os atributos width e height definem a largura e a 
altura respectivamente.
Elementos HTML Vazios
Elementos HTML sem conteúdo são chamados de 
elementos vazios.
<p>Esse é um <br> parágrafo com um quebra de linha.</p>
HTML não diferencia maiúsculas de 
minúsculas
As tags HTML não diferenciam maiúsculas de
minúsculas:
<P> significa o mesmo que <p>.
O padrão HTML não requer tags em letras
minúsculas, mas o W3C recomenda letras minúsculas
em HTML e exige letras minúsculas para tipos de
documento mais restritos, como XHTML que
veremos no futuro.
Atributos HTML
• Todos os elementos HTML podem ter atributos
• Os atributos fornecem informações adicionais 
sobre os elementos
• Os atributos são sempre especificados na tag de 
início
• Os atributos geralmente vêm em pares de 
nome/valor como: 
nome=“valor”
O Atributo src
A tag <img> é usada para incorporar uma imagem em uma página 
HTML. O atributo scr especifica o caminho da imagem :
<img src="img_teste.jpg">
Há duas maneiras de especificar a URL no scr atributo:
URL absoluta - Links para uma imagem externa que está hospedada 
em outro site.
src="https://www.minhapagina.com/images/imgCasa.jpg"
URL relativa - Links para uma imagem hospedada no site. Aqui, a 
URL não inclui o nome de domínio. Se a URL começar sem uma 
barra, ela será relativa a página atual. 
src="img_teste.jpg"
Se a URL começar com uma barra, ela será relativa ao domínio. 
src=“/imagens/img_teste.jpg".
	Slide 1: Programação WEB Responsiva
	Slide 2: Linguagem HTML
	Slide 3: O que é HTML?
	Slide 4: Linguagem HTML
	Slide 5: Editores HTML
	Slide 6: Instalando o Notepad++
	Slide 7: Usando editores HTML
	Slide 8: Passo 2: Digite um código HTML.
	Slide 9: Passo 3: Salve a página HTML
	Slide 10: Etapa 4: visualize a página HTML em seu navegador
	Slide 11: Estrutura do documento HTML
	Slide 12: Estrutura da página HTML
	Slide 13: Estrutura da página HTML
	Slide 14: Cabeçalhos HTML
	Slide 15: Parágrafos HTML
	Slide 16
	Slide 17: Links HTML
	Slide 18: Imagens no HTML
	Slide 19: Elementos HTML Vazios
	Slide 20: HTML não diferencia maiúsculas de minúsculas
	Slide 21: Atributos HTML
	Slide 22: O Atributo src