<html> Estrutura básica e cabeça

PR Universidade Tecnológica Federal do Paraná

Sítios Web I

<html> Estrutura básica e cabeça

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

HTML

Especificação do HTML link

▼

O que é o HTML

Acrônimo para Hyper Text Markup Language
HTML é uma linguagem de MARCAÇÃO
É marcado com as tags
As tags estruturam o conteúdo do documento (arquivo)
Um arquivo HTML contem tags e texto (conteúdo)

As versões

Versão	Ano
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML4.01 link	1999
XHTML 1.0 link	2000
XHTML 2.0 link	2010 (Working Group)
HTML 5 link	2014
HTML 5.1 link	2017
HTML 5.2 link	2017

O amarelo, é para destacar que a "versão" não existe mais e os links vão todos para a mesma página. Agora é só html (sem número) e gerenciado por outro grupo.

As marcações! tags

Todas as tags tem palavra-chave (nome) entre maior e menor (< e >)
A maioria das tags PRECISA ter início e fim (abre e fecha): Ex <p></p>

Os navegadores Web (Chrome, Firefox, Safari, Opera, IE , edge) lêem os arquivos HTML e apresentam a interpretação realizada das marcações (DOM).

Primeira linha do HTML

O <!DOCTYPE >

Existem muitos tipos de documentos Web, o navegador só vai conseguir mostrar um HTML perfeitamente, se conhecer a sua "versão".

Declarações comuns de DOCTYPE:

html

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

OBS: <!DOCTYPE> não é sensível a maiúscula ou minúscula.

HTML 5

Estrutura Bem Básica

▼

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Sítio Web 1</title>
    <meta charset="UTF-8">
    <!-- <meta charset=ISO-8859-1"> -->
  </head>
  <body>
    <h1>Aula de Sítios Web 1</h1>
    <p>
      Estou aprendendo ou evoluindo 
      meus conhecimentos de criação de sites 
      com a tecnologia HTML.
    </p>
  </body>
</html>

Importante sobre HTML

Não esqueça de fechar as tags
Usar SEMPRE letras minúsculas
Colocar a barra nas tags vazias (/>)

Atributos

▼

Os atributos

Marcações HTML podem ter atributos
Atributos oferecem informações adicionais
Os atributos SEMPRE aparecem na tag de abertura
Atributos são escritos com o par nome/valor. Ex: name="value"

Atributos básicos globais

Attribute	Description
class	Specifies one or more classnames for an element (refers to a class in a style sheet)
id	Specifies a unique id for an element
style	Specifies an inline CSS style for an element
title	Specifies extra information about an element (displayed as a tool tip)

Lista de atributos: HTML Global Attributes Reference [EN] link

Software para escrever HTML

Visual Studio Code [All] link
NetBeans [All] link
Visual Studio [Win] link
NotePad++ [Win] link

atom [All] link
Sublime Text [All] link
Brackets [All] link

WebStorm [All] link

Mais sugestões, por favor, falem e me enviem...

Indo mais a fundo na

<head>

▼

A marcação <head>

Contém informações não visíveis do HTML, configurações e chamada de outros códigos, como script (javascript) e visual (css)

As seguintes marcações podem ser inseridas na cabeça:

<title>
<meta>
<link>
<style>
<script>
<base>

A marcação <title>

É necessário em todos os arquivos HTML e XHTML. Define o título na barra (ou aba) do navegador, oferece o nome quando adicionado aos favoritos e aparece nos mecanismos de busca (google, yahoo, bing)

A marcação <meta>

Adiciona informações extras. Exemplos:


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30">

A marcação <link>

Faz a ligação entre arquivos com conteúdo externo, como arquivos de estilo ou script.


<link rel="stylesheet" type="text/css" href="mystyle.css">

A marcação <style>

Chamada do CSS. Só pode ser colocado no <head>


<style type="text/css">
  body {background-color:yellow}
  p {color:blue}
</style>

A marcação <script>

Chamada de código JavaScript. Pode ser chamado tanto no <head> quanto no <body>

A marcação <base>

Criar uma estrutura padrão para todos os links relativos do HTML corrente.


<base href="http://www.w3schools.com/images/" target="_blank">

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link