IFPE PWEB1 03 HTML5 1 Marcacao de Texto

Programação para
Web I
Tecnólogo em Análise e Desenvolvimento de Sistemas
3 HTML5 - Marcação de texto

E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que
experimenteis qual seja a boa, agradável e perfeita vontade de Deus?
Romanos 12:2
HTML5 - Marcação de texto
3
Contatos
Carlos José
carlos.silva@jaboatao.ifpe.edu.br
@carlosjoser2n
Eric Sales
eric.sales@jaboatao.ifpe.edu.br
3
Objetivo
Apresentar a linguagem de marcação
HTML5 com seus conceitos básicos,
bem como a construção de
documentos.
3
Introdução
3
Introdução
As tags apresentadas aqui formam uma compilação das
definições oficiais da linguagem disponível em:
§ http://www.w3schools.com
§ http://www.w3.org/TR/html5/
3
<html>
Definição e forma de uso
A Tag html é o elemento raiz na estrutura principal de um
documento web.
Esta é uma tag que em se apresenta em pares.
Atributo opcional:
xmlns=“http://www.w3.org/1999/xhtml”
3
<head>
O elemento <head> é um contêiner para todos os elementos do
cabeçalho do documento.
O <head> pode incluir scripts, folhas de estilo, fornecer
informações através da tag meta e o título do documento.
3
<body>
O elemento <body> contém todos os elementos do corpo do
documento HTML como textos, links, imagens, tabelas, listas,
etc.
Todos os atributos de apresentação do elemento <body> estão
em desuso.
3
<header>
O elemento <header> especifica um cabeçalho de um
documento, seção ou artigo.
O elemento <header> deve ser usado como um recipiente para
o conteúdo introdutório ou conjunto de ligações de navegação.
Você pode ter vários elementos <header> no mesmo
documento.
3
<h1>...<h6>
O elemento <h1> a <h6> são usados para definir um título ou
subtítulo em um documento, seção ou artigo.
O elemento <h1> define o título de maior hierarquia.
3
<footer>
O elemento <footer> especifica um rodapé de um documento,
seção ou artigo.
Normalmente um rodapé contém o autor do documento,
informações de copyright, links para termos de uso,
informações de contato, etc.
3
<address>
Define as informações de contato do autor/proprietário de um
documento, seção(section) ou um artigo(article).
Se o elemento <address> for marcado dentro do elemento <body> em um
<footer>, representa informações de contato para o documento. Se o
elemento <address> for marcado dentro de um elemento <article>,
representa informações de contato para esse artigo.
3
<p>
O elemento <p> define um parágrafo.
O elemento <br/> inseri uma única quebra de linha dentro de
um parágrafo. O elemento <br> é uma tag vazia, o que significa
que não vem em pares.
3
<em>, <strong>
Todas são tag`s de marcação inline em uma frase.
As tag’s <b></b> e <i></i> foram substituídas pelas tag’s <strong></strong> e
<em></em> respectivamente.
Por que foram substituídas se o resultado visual é o mesmo? Por causa da semântica! Como
Assim?
O texto precisar receber uma marcação que de ênfase e não uma marcação de formatação,
por isso, <em> para texto enfatizado e <strong> para texto fortemente enfatizado.
3
<article>
É usado para marcar um conteúdo autossuficiente em um
documento.
O elemento <article> é utilizado para definir uma marcação em
post em um forum, artigo de revista ou jornal, matéria em um
blog, um comentário postado por um visitante, um widget ou
gadget interativo ou qualquer outro conteúdo independente.
3
<section>
É usado para marcar seções em um documento.
O elemento <section> define uma marcação do tipo capítulos,
cabeçalhos, rodapés ou qualquer outra seção de um
documento.
3
<hr/>
O elemento <hr/> marca e cria uma linha horizontal em uma
página HTML com a finalidade de separar um conteúdo.
O elemento <hr/> é uma tag vazia, o que significa que não vem
em pares.
3

É uma tag de comentário utilizado para inserir um comentário
no código-fonte.
O comentário será ignorado pelo navegador e não será exibido.
Você pode usar os comentários para explicar o código HTML.
3
exer-01.html
3
exer-02.html
3
exer-02.html
3
Dúvidas?
3
Bibliografia
§ Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo,
Novatec Brasil, julho 2011;
§ SILVA, Maurício Samy. Web Design Responsivo. São Paulo. Novatec, 2014;
§ http://www.w3schools.com
§ http://www.w3.org/TR/html5/

IFPE PWEB1 03 HTML5 1 Marcacao de Texto

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

IFPE PWEB1 03 HTML5 1 Marcacao de Texto

Enviado por

Direitos autorais:

Formatos disponíveis

Programação para

3 HTML5 - Marcação de texto

Você também pode gostar