Formação T.2 do Modulo I da Formação HTML & CSS

Aprender HTML e CSS em 25 Horas.
Pedro Matos
Mestre Engenharia Informáticas
IdC { IoT } - (internet das Coisas)
Formação T.2

Agenda
2 – HTML.
2.3 – Semântica
2.4 – Sintaxe
2.5 – Estrutura geral de um documento

2.3 – Semântica
- Semântica em HTML é a estrutura da página;
- Estrutura define-se por marcadores de HTML (Tags);
- As Tags são interpretadas pelos Navegadores (Browsers);
- A estrutura básica é obrigatória (tags - HTML, Head, Body);
- Os elementos semânticos contribuem para aspeto/design, da página;
- A semântica facilita a identificação e mantem o código mais legível;
- A semântica evolui-o com o HTML, aparecendo novos tags.

2.3 – Semântica
<html>
</html>
<head>
</head>
<body>
</body>
<footer> </footer>
Inicio
Cabeçalho
Corpo
Rodapé (opcional)
Fim
Estrutura BÁSICO de uma página

2.3 – Semântica
<! DOCTYPE html>
</html>
Inicio
Fim
Estrutura BÁSICO de uma página
Não é o Tag, más sim uma
informação ao navegador que é
um documento em HTML. <html>
Toda a informação que queremos:
- Carregar (ficheiros “CCS” “jQuery”, etc..)
- Mostrar conteúdos
- Aceder / manipular (Base de dados, ficheiros,
API, etc..)

2.3 – Semântica Estrutura BÁSICO de uma página
Cabeçalho
<head>
</head>
Configurações e Recursos utilizadas pelo Documento (Página)
Ex:
<title>IPT – TeSP DM</title>
<meta charset=“UTF-8”>
.. CSS
.. Javascript

2.3 – Semântica Estrutura BÁSICO de uma página
Conteúdos exibidos pelo Navegador (browser)
Ex:
Texto
imagens / vídeos
links para outras páginas
Animação
Menu
etc…
</body>
Corpo
<body>
Rodapé
<footer> </footer>

2.3 – Semântica Vários tipos de estruturas

2.4 – Sintaxe
- A sintaxe são as regras de qualquer linguagem de programação;
- Os Marcadores em HTML (Tags), são representados entre parênteses
angulares < e >;
- Um elemento Tag, é modificado da sua caraterística padrão, com
atributos e valores.
- Tags podem estar dentro de outras tags, alterando ou completando as
caraterísticas pretendidas.
- Os atributos modificam os resultados padrões.
- Os valores caraterizam essa mudança.

2.4 – Sintaxe
<html> marcador (Tag) aberto
</html> marcador fechado
<html> </html>
Sintaxe Igual – o mesmo resultado
Melhor perceção do código
Código difícil de ler, com a sua
evolução.
Código Exemplo marcador (tag) - <a>…</a>
<a href = http://www.ipt.pt> IPT – Tomar </a>
- Atributo href é quem define a URL que será aberto ao clicar nele
(hiperligação

2.4 – Sintaxe

Comentários em HTML
<h1> IPT – Tomar </h1>
<h2 style="color: red;"> DM IPT</h2>
Sintaxe normal e simples
Sintaxe com atributos
<p class="CSS_IPT">Paragrafo</p>
propriedades de estilo
<p id=”1ºparagrafo” style=”color: red; background: blue”> IPT – DM </p>
propriedades de estilo
o atributo id, representa a identificação do elemento, com o valor
“1ºparagrafo”.

- Os Documentos em HTML são arquivos simples que podem ser
criados em qualquer editor de texto comum, como o bloco de notas do
Windows, ou TexEdit do MacOS.
- Todo o documento HTML são constituídos por:
- Arquitetura
- Semântica
- Sintaxe
- Os ficheiros em HTML são constituídos por nome e extensão.
HOME.html contatos.html etc.html

- Estruturas do Documentos em HTML.
FICHEIRO
CABEÇALHO
CORPO
MENU DE NAVEGAÇÃO

- Código da Estruturas do Documentos em HTML.
CABEÇALHO
CORPO

Formação T.2 do Modulo I da Formação HTML & CSS

Formação T.2 do Modulo I da Formação HTML & CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Formação T.2 do Modulo I da Formação HTML & CSS

Semelhante a Formação T.2 do Modulo I da Formação HTML & CSS (20)

Último

Último (20)

Formação T.2 do Modulo I da Formação HTML & CSS