SlideShare uma empresa Scribd logo
1 de 8
Baixar para ler offline
Características
      Documentos HTML são arquivos escritos em ASCII – texto. Podem ser criados
em qualquer editor de texto, (VI, EMACS, EDIT, NOTEPAD), existem editores
específicos para várias plataformas e conversores de vários formatos, por exemplo,
doc para HTML e a unidade mínima de informação é a “página”.
Estrutura básica de uma página




<!doctype>

<html>

          <head>

                      <title> <title>

          <head>

          <body>

          <header> <header>

          <nav> <nav>

          <section>

          <header> <header>

          <article> <article>

          <footer> <footer>

          <section>

          <aside> <aside>

          <footer> <footer>

<body>

<html>
Metadados: head, title, link, meta, style


Head - A Tag HEAD é onde fica toda a parte inteligente da página. São as informações
sobre a página e o conteúdo ali publicado.

Title – Define o título da barra de títulos no navegador.

Link – Importa uma de estilos na página.

Meta – Adiciona informações sobre a página como autor, palavras e chave.

Stile - Incorpora uma folha de estilos na página.
Sessões: body, article, section, nav, aside, h1, h2, h3, h4, h5,
h6, hgroup, header, footer, address

Body – Define o corpo da página HTML.

Article - Representa uma parte da página que poderá ser distribuído e reutilizável.

Section – Define uma nova seção genérica do documento.

Nav – Representa uma seção da página que contem links.

Aside – Representa um bloco de conteúdo que referência o conteúdo.

H1, H2, H3, H4, H5, H6 – Definem uma seção de cabeçalhos.

Hgroup – Este elemento consiste em um grupo de títulos.

Header – Representa um grupo de introdução ou elementos de navegação.

Footer – Representa literalmente o radapé da página.

Address – Endereço.
Comentário

Os comentários em HTMl, é como uma etiqueta que tem um início e um fim. Todo o
texto que colocar dentro está comentado, ou seja, aparecerá na página. Dentro de um
comentário pode colocar o texto ou código HTML, como etiquetas.



Exemplo: Todo comentário começa por <! -- e finaliza por -- >, tudo o que colocar entre
essas etiquetas está comentado.
Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt,
dd, div.

P – Define um parágrafo.

Hr – Define uma divisão no conteúdo da página.

Blockquote – Define um parágrafo de citação.

Ol – Lista ordenada.

Ul – Lista não ordenada.

Li – Item de uma lista.

Dl – Lista de definição.

Dt – Termo a ser definido.

Dd - Definição do termo.

Div – Define uma divisão ou seção no documento.
Elementos de texto semânticos: a, abbr, span, strong, em, br

A – Define um hyperlink na página.

Abbr – Utilizado para marcar abreviações.

Span – Agrupa elementos em linha de um documento.

Strong – Dá uma forte ênfase.

Em – Dá uma ênfase.

Br – Quebra de linha.
Conteúdo embutido: img

Img – Determina a inserção de uma imagem.

Mais conteúdo relacionado

Semelhante a AULA - 1 (20)

Aula II - Criação de sites I
Aula II - Criação de sites IAula II - Criação de sites I
Aula II - Criação de sites I
 
Apostila De Html
Apostila De HtmlApostila De Html
Apostila De Html
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
O que é html
O que é htmlO que é html
O que é html
 
Html
HtmlHtml
Html
 
html
html html
html
 
Html
HtmlHtml
Html
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Html completo
Html completoHtml completo
Html completo
 
Apostila microsoft word 2010
Apostila microsoft word 2010Apostila microsoft word 2010
Apostila microsoft word 2010
 
Apostila de html
Apostila de htmlApostila de html
Apostila de html
 
Html
HtmlHtml
Html
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Css basico
Css basicoCss basico
Css basico
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
FIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sicaFIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sica
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 

Mais de diogolevel3

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcagdiogolevel3
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadediogolevel3
 
Design universal
Design universalDesign universal
Design universaldiogolevel3
 
Design responsivo
Design responsivoDesign responsivo
Design responsivodiogolevel3
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3diogolevel3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2diogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 
Bases para internet
Bases para internetBases para internet
Bases para internetdiogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 

Mais de diogolevel3 (20)

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcag
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidade
 
Design universal
Design universalDesign universal
Design universal
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Taquigrafia css
Taquigrafia cssTaquigrafia css
Taquigrafia css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Modelo TCP/IP
Modelo TCP/IPModelo TCP/IP
Modelo TCP/IP
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Tutorial css
Tutorial cssTutorial css
Tutorial css
 
Css avançado
Css avançadoCss avançado
Css avançado
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Bases para internet
Bases para internetBases para internet
Bases para internet
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Post 5
Post   5Post   5
Post 5
 

AULA - 1

  • 1. Características Documentos HTML são arquivos escritos em ASCII – texto. Podem ser criados em qualquer editor de texto, (VI, EMACS, EDIT, NOTEPAD), existem editores específicos para várias plataformas e conversores de vários formatos, por exemplo, doc para HTML e a unidade mínima de informação é a “página”.
  • 2. Estrutura básica de uma página <!doctype> <html> <head> <title> <title> <head> <body> <header> <header> <nav> <nav> <section> <header> <header> <article> <article> <footer> <footer> <section> <aside> <aside> <footer> <footer> <body> <html>
  • 3. Metadados: head, title, link, meta, style Head - A Tag HEAD é onde fica toda a parte inteligente da página. São as informações sobre a página e o conteúdo ali publicado. Title – Define o título da barra de títulos no navegador. Link – Importa uma de estilos na página. Meta – Adiciona informações sobre a página como autor, palavras e chave. Stile - Incorpora uma folha de estilos na página.
  • 4. Sessões: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address Body – Define o corpo da página HTML. Article - Representa uma parte da página que poderá ser distribuído e reutilizável. Section – Define uma nova seção genérica do documento. Nav – Representa uma seção da página que contem links. Aside – Representa um bloco de conteúdo que referência o conteúdo. H1, H2, H3, H4, H5, H6 – Definem uma seção de cabeçalhos. Hgroup – Este elemento consiste em um grupo de títulos. Header – Representa um grupo de introdução ou elementos de navegação. Footer – Representa literalmente o radapé da página. Address – Endereço.
  • 5. Comentário Os comentários em HTMl, é como uma etiqueta que tem um início e um fim. Todo o texto que colocar dentro está comentado, ou seja, aparecerá na página. Dentro de um comentário pode colocar o texto ou código HTML, como etiquetas. Exemplo: Todo comentário começa por <! -- e finaliza por -- >, tudo o que colocar entre essas etiquetas está comentado.
  • 6. Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt, dd, div. P – Define um parágrafo. Hr – Define uma divisão no conteúdo da página. Blockquote – Define um parágrafo de citação. Ol – Lista ordenada. Ul – Lista não ordenada. Li – Item de uma lista. Dl – Lista de definição. Dt – Termo a ser definido. Dd - Definição do termo. Div – Define uma divisão ou seção no documento.
  • 7. Elementos de texto semânticos: a, abbr, span, strong, em, br A – Define um hyperlink na página. Abbr – Utilizado para marcar abreviações. Span – Agrupa elementos em linha de um documento. Strong – Dá uma forte ênfase. Em – Dá uma ênfase. Br – Quebra de linha.
  • 8. Conteúdo embutido: img Img – Determina a inserção de uma imagem.