0% acharam este documento útil (0 voto)

19 visualizações8 páginas

Joystline-Web-Course Module 1

Enviado por

johnsimonjs21

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

19 visualizações8 páginas

Joystline-Web-Course Module 1

Enviado por

johnsimonjs21

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 8

JAYSTLINE-WEB

MÓDULO 1

## Módulo – Nível 1
O que é HTML?

 HTML significa Hyper Text Markup Language;

 HTML é a linguagem de marcação padrão para criação de páginas da Web;
 HTML descreve a estrutura de uma página da Web;
 HTML consiste em uma série de elementos;
 Os elementos HTML informam ao navegador como exibir o conteúdo;
 Os elementos HTML rotulam partes de conteúdo como "este é um título", "este
é um parágrafo", "este é um link", etc.

Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>

<h1>Meu Primeiro Cabeçalho</h1>

<p>Meu primeiro parágrafo</p>

</body>
</html>

Exemplo Explicado

 A <!DOCTYPE html> declaração define que este documento é um documento

HTML5
 O <html> elemento é o elemento raiz de uma página HTML
 O <head> elemento contém meta informações sobre a página HTML
 O <title> elemento especifica um título para a página HTML (que é mostrado na
barra de título do navegador ou na guia da página)
 O <body> elemento define o corpo do documento e é um contêiner para todo o
conteúdo visível, como títulos, parágrafos, imagens, hiperlinks, tabelas, listas,
etc.
 O <h1> elemento define um grande título
 O <p> elemento define um parágrafo

O que é um elemento HTML?

Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final:

< tagname > O conteúdo vai aqui... < /tagname >

JAYSTLINE-WEB
MÓDULO 1

Tag inicial Conteúdo do elemento Tag final

<h1> Meu primeiro cabeçalho </h1>

<p> Meu primeiro parágrafo. </p>

<br> nenhum nenhum

1- 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 inicial
 Os atributos geralmente vêm em pares nome/valor como: nome="valor"

 O atributo href

A <a> tag define um hyperlink. O href atributo especifica a URL da página

para a qual o link vai:

Exemplo: <a href="https://www.chat-jay.com">Visitar Chat-jay</a>

JAYSTLINE-WEB
MÓDULO 1

 O atributo src

A <img> tag é usada para incorporar uma imagem em uma página HTML.
O src atributo especifica o caminho para a imagem a ser exibida:

Exemplo: <img src="img_girl.jpg">

Há duas maneiras de especificar a URL no src atributo:

1. URL Absoluta - Links para uma imagem externa que está hospedada
em outro site.

Exemplo: src="https://www.chat-jay.com/images/img_girl.jpg".

Observações: Imagens externas podem estar protegidas por direitos

autorais. Se você não obtiver permissão para usá-las, poderá estar violando
as leis de direitos autorais. Além disso, você não pode controlar imagens
externas; elas podem ser removidas ou alteradas repentinamente.

2. URL relativa - Links para uma imagem que está hospedada dentro do
site. Aqui, a URL não inclui o nome do domínio. Se a URL começar sem uma
barra, ela será relativa à página atual. Exemplo: src="img_girl.jpg". Se a
URL começar com uma barra, ela será relativa ao domínio. Exemplo:
src="/images/img_girl.jpg".

Dica: É quase sempre melhor usar URLs relativas. Elas não quebrarão se
você mudar de domínio.

 Os atributos de largura e altura

A <img> tag também deve conter os atributos width e height, que

especificam a largura e a altura da imagem (em pixels):

Exemplo: <img src="img_girl.jpg" width="500" height="600">

 O atributo alt

O atributo alt para a <img> tag especifica um texto alternativo para uma
imagem, se a imagem por algum motivo não puder ser exibida. Isso pode
ser devido a uma conexão lenta, ou um erro no src atributo, ou se o
usuário usar um leitor de tela.

Exemplo: <img src="simon_img.jpg" alt="Imagem do Simon estudando">

 O atributo de estilo

O style atributo é usado para adicionar estilos a um elemento, como cor,

fonte, tamanho e muito mais.

Exemplo: <p style="color:red;">Este é um parágrafo com texto

vermelho.</p>
JAYSTLINE-WEB
MÓDULO 1

 O atributo lang

Você deve sempre incluir o lang atributo dentro da <html> tag, para
declarar o idioma da página da Web. Isso é para auxiliar mecanismos de
busca e navegadores.

O exemplo a seguir especifica o inglês como idioma:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

 O atributo do título

O title atributo define algumas informações extras sobre um elemento.

O valor do atributo title será exibido como uma dica de ferramenta quando
você passar o mouse sobre o elemento:

Exemplo: <p title="Dica de ferramenta">Este é um parágrafo.</p>

Sugestões da w3c.:

- Sempre use atributos em letras minúsculas;

- Sempre use aspas em torno de valores de atributos.

Resumo do Capítulo

 Todos os elementos HTML podem ter atributos

 O href atributo de <a> especifica a URL da página para a qual o link vai
 O src atributo de <img> especifica o caminho para a imagem a ser exibida
 Os atributos width e fornecem informações de tamanho para imagens
height <img>
 O alt atributo de <img> fornece um texto alternativo para uma imagem
 O style atributo é usado para adicionar estilos a um elemento, como cor,
fonte, tamanho e muito mais
 O lang atributo da <html> tag declara o idioma da página da Web
 O title atributo define algumas informações extras sobre um elemento
JAYSTLINE-WEB
MÓDULO 1

2- Cabeçalhos HTML
Títulos HTML são títulos ou subtítulos que você deseja exibir em uma página
da web.

Os títulos HTML são definidos com as tags <h1> até <h6>.

<h1> define o título mais importante.

<h6> define o título menos importante.

Exemplo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Nota: Use títulos HTML somente para títulos. Não use títulos para deixar o texto GRANDE ou
em negrito.

3- Parágrafos HTML

O elemento HTML <p> define um parágrafo.

Um parágrafo sempre começa em uma nova linha, e os navegadores

adicionam automaticamente algum espaço em branco (uma margem) antes
e depois de um parágrafo.

Exemplo: <p>Este é um parágrafo.</p>

<p>Este é outro parágrafo.</p>
JAYSTLINE-WEB
MÓDULO 1

Regras horizontais HTML

A <hr> tag define uma quebra temática em uma página HTML e é mais
frequentemente exibida como uma régua horizontal.

O <hr> elemento é usado para separar conteúdo (ou definir uma alteração)
em uma página HTML:

Exemplo:
<h1>Este é título 1</h1>
<p>Este é um texto qualquer.</p>
<hr>
<h2>Este é título 2</h2>
<p>Este é outro texto qualquer.</p>
<hr>

A <hr> tag é uma tag vazia, o que significa que não tem tag final.

Quebras de linha HTML

O elemento HTML <br> define uma quebra de linha.

Use <br> se quiser uma quebra de linha (uma nova linha) sem iniciar um
novo parágrafo:

Exemplo: <p>Este é<br>um parágrafo <br>como quebras de linha.</p>

O Problema do Poema

Este poema será exibido em uma única linha:

Exemplo:
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Solução - O elemento HTML <pre>

O elemento HTML <pre>define texto pré-formatado.

JAYSTLINE-WEB
MÓDULO 1

O texto dentro de um <pre>elemento é exibido em uma fonte de largura fixa

(geralmente Courier) e preserva espaços e quebras de linha:

Exemplo:
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

4- Estilos HTML

O atributo HTML style é usado para adicionar estilos a um elemento, como

cor, fonte, tamanho e muito mais.

O atributo HTML style tem a seguinte sintaxe:

A propriedade é uma propriedade CSS. O valor é um valor CSS.

4.1 - Cor de fundo

A background-color propriedade CSS define a cor de fundo de um elemento

HTML.

Exemplo

Defina a cor de fundo de uma página como azul:

<h1>Este é um título </h1>

<p>Este é um parágrafo.</p>

</body>

4.2 - Cor do texto

A color propriedade CSS define a cor do texto para um elemento HTML:

JAYSTLINE-WEB
MÓDULO 1

Exemplo:
<h1 style="color:blue;">Este é um título</h1>
<p style="color:red;">Este é um parágrafo.</p>

4.3 - Tamanho do texto

A font-size propriedade CSS define o tamanho do texto para um elemento

HTML:

Exemplo:
<h1 style="font-size:300%;">Este é um título</h1>
<p style="font-size:160%;">Este é um parágrafo.</p>

4.4 - Alinhamento de texto

A text-align propriedade CSS define o alinhamento horizontal do texto

para um elemento HTML:

Exemplo:
<h1 style="text-align:center;">Título centralizado</h1>
<p style="text-align:center;">Parágrafo centralizado.</p>

Resumo do Capítulo

 Use o style atributo para estilizar elementos HTML

 Usar background-color para cor de fundo
 Usar colorpara cores de texto
 Usar font-family para fontes de texto
 Usar font-size para tamanhos de texto
 Usar text-align para alinhamento de texto