SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
Trabalho realizado por : Patrícia Morais
T3E
ÍNDICE:
 Introdução;
 Que editor utilizar;
 Os quatro conceitos fundamentais
1. Elementos
2. Etiquetas ou Tags
3. Atributos e valores
4. Aninhamento (Nesting)
 Estrutura básica
 Biografia
INTRODUÇÃO
O HTML (HyperText Markup Language) é um conjunto
estruturado de instruções, conhecidas
por etiquetas ou tags (em inglês), que dizem a um browser
como publicar uma página web, ou seja, o browser
interpreta essas etiquetas e desenha a página no ecrã. Estes
conjuntos de instruções estão agrupados em ficheiros de
tipo texto, i.e., sem qualquer tipo especial de formatação.
QUE EDITOR UTILIZAR?
A forma mais simples, e básica, de fazer programas em HTML
será a utilização de simples editores de texto como é o caso,
por exemplo, do Notepad. No entanto, os utilizadores mais
experientes utilizam diversos tipos de aplicações, mais ou
menos sofisticadas, para desenvolverem as partes
fundamentais de uma página em HTML. Algumas dessas
aplicações permitem que numa primeira fase o programador
faça um desenho gráfico daquilo que pretende e que
posteriormente seja gerado, de uma forma automática, o código
HTML correspondente.
OS QUATRO CONCEITOS
FUNDAMENTAIS
1º - Elementos:
Todas as páginas de HTML são compostas por elementos.
Um elemento pode ser visto com um contentor em que é
colocada uma secção de uma página web. Tudo o que estiver
dentro desse contentor fica com as características desse
mesmo elemento. Se, por exemplo, se quiser fazer uma tabela
toda a informação referente a essa tabela terá que estar
colocado no interior do elemento.
OS QUATRO CONCEITOS
FUNDAMENTAIS
2º - Etiquetas ou tags:
Por vezes os termos elemento ou tag, de uma forma
errada são usados indistintamente. Um elemento é
composto por duas etiquetas: uma a abrir e outra a
fechar. Apesar de no HTML esta distinção não ser
muito importante já no caso do XHTML ela torna-se
fundamental.
OS QUATRO CONCEITOS
FUNDAMENTAIS
2º - Etiquetas ou tags:
Alguns elementos não precisam de uma tag de
terminação porque não incluem qualquer tipo de
conteúdo e são por isso denominados elementos
vazios. É assim que, por exemplo, o elemento de
quebra de linha <br> não requer uma etiqueta de
terminação.
OS QUATRO ELEMENTOS
FUNDAMENTAIS
3º - Atributos e valores:
Os atributos são outro elemento importante da linguagem
HTML. Um atributo é utilizado para definir as características de
um elemento e é colocado no interior da tag de abertura
do elemento. Por exemplo, para atribuir a cor a uma palavra
utiliza-se o elemento FONT em conjunto com o atributo COLOR:
<font color=" ">. O sinal de igual e as aspas são fundamentais
pois atribuem um valor a um atributo.
OS QUATRO ELEMENTOS
FUNDAMENTAIS
3º - Atributos e valores:
Se for escrita uma etiqueta que não exista em HTML
ou que um determinado browser não entenda essa
etiqueta será ignorada não produzindo qualquer
output.
OS QUATRO ELEMENTOS
FUNDAMENTAIS
4º - Aninhamento (Nesting):
Numa página web existem quase sempre
múltiplos elementos que nunca se devem sobrepor.
Os elementos devidamente aninhados são sempre
independentes uns dos outros.
ESTRUTURA BÁSICA
Os elementos referidos em baixo são os mais básicos e
aqueles estritamente necessários para programar uma
página em HTML.
 <html> </html> Definem o início e o fim do programa.
 <head> </head> É o cabeçalho do programa
e, normalmente, não aparece na janela web.
 <title> </title> Este elemento está aninhado no HEAD e
escreve o título da página na barra de título no cima da
janela do browser.
 <body> </body> Contém o conteúdo principal da
página web.
 <!--Coloque aqui os seus comentários --> Serve para
inserir notas ou comentários sobre o programa e não
são mostrados na janela do browser.
ESTRUTURA BÁSICA
A ordem de abertura e fecho dos tags, como se pode
ver, não é arbitrária e tem uma sequência
hierárquica. Quando se está a escrever um programa
muitas vezes sente-se a necessidade de fazer alguns
comentários a uma parte específica do código, para
tal utilizam-se as tags <!--e-->, os comentários não
têm qualquer output.
BIOGRAFIA
 http://pt.wikipedia.org/wiki/Editor_HTML
 http://pt-br.html.net/tutorials/html/lesson2.php
 http://unix.wmonline.com.br/html/tutorialhtml.html

Mais conteúdo relacionado

Mais procurados (16)

Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Html
HtmlHtml
Html
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Aula 09
Aula 09Aula 09
Aula 09
 
Xhtml
XhtmlXhtml
Xhtml
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Aula 02
Aula 02Aula 02
Aula 02
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 

Destaque (20)

Problema
ProblemaProblema
Problema
 
016
016016
016
 
Institucion Educativa Normal Superior
Institucion Educativa Normal SuperiorInstitucion Educativa Normal Superior
Institucion Educativa Normal Superior
 
Pago A Mrs Pedido Andres Ibarra
Pago A Mrs Pedido Andres IbarraPago A Mrs Pedido Andres Ibarra
Pago A Mrs Pedido Andres Ibarra
 
Dhunote Doridro 13 Mohila Songsar Chere Paliye Beracchen1
Dhunote Doridro 13 Mohila Songsar Chere Paliye Beracchen1Dhunote Doridro 13 Mohila Songsar Chere Paliye Beracchen1
Dhunote Doridro 13 Mohila Songsar Chere Paliye Beracchen1
 
William Shakespeare
William ShakespeareWilliam Shakespeare
William Shakespeare
 
Tutorial slideshare
Tutorial slideshareTutorial slideshare
Tutorial slideshare
 
El marco de analisis de la planificacion de la region
El marco de analisis de la planificacion de la regionEl marco de analisis de la planificacion de la region
El marco de analisis de la planificacion de la region
 
Cob 20091020 2
Cob 20091020 2Cob 20091020 2
Cob 20091020 2
 
Joey Truong
Joey TruongJoey Truong
Joey Truong
 
Adwait Poem
Adwait PoemAdwait Poem
Adwait Poem
 
Oct 2009 Jacksonville Market Stats
Oct 2009 Jacksonville Market StatsOct 2009 Jacksonville Market Stats
Oct 2009 Jacksonville Market Stats
 
123
123123
123
 
AfED_1-08-abkhazia_book_eng
AfED_1-08-abkhazia_book_engAfED_1-08-abkhazia_book_eng
AfED_1-08-abkhazia_book_eng
 
Calling Card
Calling CardCalling Card
Calling Card
 
aula de filosofia 7 nilton
aula de filosofia 7 niltonaula de filosofia 7 nilton
aula de filosofia 7 nilton
 
Cob 20090806 2
Cob 20090806 2Cob 20090806 2
Cob 20090806 2
 
Cuadra Catedral
Cuadra CatedralCuadra Catedral
Cuadra Catedral
 
Filosofia de vida
Filosofia de vidaFilosofia de vida
Filosofia de vida
 
Actividad 4
Actividad 4Actividad 4
Actividad 4
 

Semelhante a Html (20)

426 curso html
426 curso html426 curso html
426 curso html
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
Html 01
Html 01Html 01
Html 01
 
Html manual
Html manualHtml manual
Html manual
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Web design
Web designWeb design
Web design
 
Manual completo de_html 01
Manual completo de_html 01Manual completo de_html 01
Manual completo de_html 01
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Html
HtmlHtml
Html
 
5098 html
5098 html5098 html
5098 html
 
5098 html
5098 html5098 html
5098 html
 
Linguagem de-programacao-html 2
Linguagem de-programacao-html 2Linguagem de-programacao-html 2
Linguagem de-programacao-html 2
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 

Mais de Patrícia Morais (20)

Violência
ViolênciaViolência
Violência
 
Sistemas operativos
Sistemas operativosSistemas operativos
Sistemas operativos
 
Processadores
ProcessadoresProcessadores
Processadores
 
Matemática na natureza
Matemática na naturezaMatemática na natureza
Matemática na natureza
 
Linguagem html
Linguagem htmlLinguagem html
Linguagem html
 
Importância da internet
Importância da internetImportância da internet
Importância da internet
 
História e utilização da internet
História e utilização da internetHistória e utilização da internet
História e utilização da internet
 
Futebol
FutebolFutebol
Futebol
 
Ferramentas web 2
Ferramentas web 2Ferramentas web 2
Ferramentas web 2
 
Facebook
FacebookFacebook
Facebook
 
Evolução dos modelos atómicos
Evolução dos modelos atómicosEvolução dos modelos atómicos
Evolução dos modelos atómicos
 
Equipamentos de proteção individual
Equipamentos de proteção individualEquipamentos de proteção individual
Equipamentos de proteção individual
 
Dhcp
DhcpDhcp
Dhcp
 
Criação de uma rede
Criação de uma redeCriação de uma rede
Criação de uma rede
 
Bastidores
BastidoresBastidores
Bastidores
 
Atletismo
AtletismoAtletismo
Atletismo
 
Animação sociocultural
Animação socioculturalAnimação sociocultural
Animação sociocultural
 
Active directory
Active directoryActive directory
Active directory
 
A importância do exercício físico para uma vida
A importância do exercício físico para uma vidaA importância do exercício físico para uma vida
A importância do exercício físico para uma vida
 
A batalha de aljubarrota
A batalha de aljubarrotaA batalha de aljubarrota
A batalha de aljubarrota
 

Html

  • 1. Trabalho realizado por : Patrícia Morais T3E
  • 2. ÍNDICE:  Introdução;  Que editor utilizar;  Os quatro conceitos fundamentais 1. Elementos 2. Etiquetas ou Tags 3. Atributos e valores 4. Aninhamento (Nesting)  Estrutura básica  Biografia
  • 3. INTRODUÇÃO O HTML (HyperText Markup Language) é um conjunto estruturado de instruções, conhecidas por etiquetas ou tags (em inglês), que dizem a um browser como publicar uma página web, ou seja, o browser interpreta essas etiquetas e desenha a página no ecrã. Estes conjuntos de instruções estão agrupados em ficheiros de tipo texto, i.e., sem qualquer tipo especial de formatação.
  • 4. QUE EDITOR UTILIZAR? A forma mais simples, e básica, de fazer programas em HTML será a utilização de simples editores de texto como é o caso, por exemplo, do Notepad. No entanto, os utilizadores mais experientes utilizam diversos tipos de aplicações, mais ou menos sofisticadas, para desenvolverem as partes fundamentais de uma página em HTML. Algumas dessas aplicações permitem que numa primeira fase o programador faça um desenho gráfico daquilo que pretende e que posteriormente seja gerado, de uma forma automática, o código HTML correspondente.
  • 5. OS QUATRO CONCEITOS FUNDAMENTAIS 1º - Elementos: Todas as páginas de HTML são compostas por elementos. Um elemento pode ser visto com um contentor em que é colocada uma secção de uma página web. Tudo o que estiver dentro desse contentor fica com as características desse mesmo elemento. Se, por exemplo, se quiser fazer uma tabela toda a informação referente a essa tabela terá que estar colocado no interior do elemento.
  • 6. OS QUATRO CONCEITOS FUNDAMENTAIS 2º - Etiquetas ou tags: Por vezes os termos elemento ou tag, de uma forma errada são usados indistintamente. Um elemento é composto por duas etiquetas: uma a abrir e outra a fechar. Apesar de no HTML esta distinção não ser muito importante já no caso do XHTML ela torna-se fundamental.
  • 7. OS QUATRO CONCEITOS FUNDAMENTAIS 2º - Etiquetas ou tags: Alguns elementos não precisam de uma tag de terminação porque não incluem qualquer tipo de conteúdo e são por isso denominados elementos vazios. É assim que, por exemplo, o elemento de quebra de linha <br> não requer uma etiqueta de terminação.
  • 8. OS QUATRO ELEMENTOS FUNDAMENTAIS 3º - Atributos e valores: Os atributos são outro elemento importante da linguagem HTML. Um atributo é utilizado para definir as características de um elemento e é colocado no interior da tag de abertura do elemento. Por exemplo, para atribuir a cor a uma palavra utiliza-se o elemento FONT em conjunto com o atributo COLOR: <font color=" ">. O sinal de igual e as aspas são fundamentais pois atribuem um valor a um atributo.
  • 9. OS QUATRO ELEMENTOS FUNDAMENTAIS 3º - Atributos e valores: Se for escrita uma etiqueta que não exista em HTML ou que um determinado browser não entenda essa etiqueta será ignorada não produzindo qualquer output.
  • 10. OS QUATRO ELEMENTOS FUNDAMENTAIS 4º - Aninhamento (Nesting): Numa página web existem quase sempre múltiplos elementos que nunca se devem sobrepor. Os elementos devidamente aninhados são sempre independentes uns dos outros.
  • 11. ESTRUTURA BÁSICA Os elementos referidos em baixo são os mais básicos e aqueles estritamente necessários para programar uma página em HTML.  <html> </html> Definem o início e o fim do programa.  <head> </head> É o cabeçalho do programa e, normalmente, não aparece na janela web.  <title> </title> Este elemento está aninhado no HEAD e escreve o título da página na barra de título no cima da janela do browser.  <body> </body> Contém o conteúdo principal da página web.  <!--Coloque aqui os seus comentários --> Serve para inserir notas ou comentários sobre o programa e não são mostrados na janela do browser.
  • 12. ESTRUTURA BÁSICA A ordem de abertura e fecho dos tags, como se pode ver, não é arbitrária e tem uma sequência hierárquica. Quando se está a escrever um programa muitas vezes sente-se a necessidade de fazer alguns comentários a uma parte específica do código, para tal utilizam-se as tags <!--e-->, os comentários não têm qualquer output.