O documento discute as principais funcionalidades do HTML5, como facilitar o desenvolvimento de páginas de acordo com os padrões da web, melhorar a semântica das páginas e implementar novas funcionalidades. Ele também apresenta novas tags do HTML5 como <header>, <nav>, <article> e <aside> e explica como elas organizam melhor a estrutura semântica das páginas. Por fim, discute novas funcionalidades do HTML5 como tags para áudio, vídeo e formulários.
O documento discute as novas funcionalidades do HTML5, incluindo novas tags semânticas como <header>, <nav>, <article> e <aside>, que organizam melhor o conteúdo da página. Também apresenta novas tags para mídia como <audio> e <video>, além de novos controles de formulário que substituem código JavaScript.
1. O documento apresenta uma introdução ao HTML, CSS e JavaScript, incluindo a estrutura básica de um arquivo HTML, formatação de texto e elementos como cabeçalhos e separadores.
2. É fornecida uma explicação detalhada sobre a estrutura de um arquivo HTML, incluindo as tags <html>, <head> e <body>, e exemplos de como formatar texto.
3. O documento também discute a inserção e formatação de texto em HTML, como cores, fontes, tamanhos e blocos de texto, assim como diferentes níveis de cabeç
1) O documento apresenta uma introdução ao CSS (Cascading Style Sheets), explicando que ele permite criar layouts de websites de forma diferente do HTML e de forma mais eficiente.
2) É dada orientação sobre os softwares e navegadores necessários para acompanhar o tutorial, sendo recomendado um editor de texto simples.
3) O tutorial ensinará propriedades CSS como cores, imagens de fundo e posicionamento ao longo de três lições.
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
O documento discute os conceitos básicos de HTML, incluindo:
1) O que é HTML e como é usado para estruturar páginas da web;
2) As principais tags HTML como <head>, <body>, <h1>, <p>, <img>;
3) Como adicionar estilos a páginas HTML usando CSS.
Este documento fornece uma introdução sobre HTML, CSS e XHTML. Ele explica o que são essas linguagens, como funcionam e quais são suas principais tags e comandos. Além disso, fornece exemplos de como estruturar páginas web usando essas tecnologias.
O documento descreve as tags HTML para formatar texto, como <b>, <i>, <pre>, <blockquote>, <font> e <div>. Explica como usar essas tags para alterar estilos de fonte, tamanho, cor e alinhamento de texto. Também lista caracteres especiais que requerem códigos HTML como < e >.
O documento apresenta uma aula introdutória sobre HTML, abordando seus principais conceitos e tags. Em 3 frases:
Apresenta o que é HTML, sua estrutura básica e tags importantes como <head>, <body>, <title>, <p>, <h1-6>, <ul>, <ol>, <br>, entre outras. Explica atributos como align, style e tipo de listas. Por fim, pede um exercício prático aplicando as tags estudadas para criação de uma página HTML.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
O documento discute as novas funcionalidades do HTML5, incluindo novas tags semânticas como <header>, <nav>, <article> e <aside>, que organizam melhor o conteúdo da página. Também apresenta novas tags para mídia como <audio> e <video>, além de novos controles de formulário que substituem código JavaScript.
1. O documento apresenta uma introdução ao HTML, CSS e JavaScript, incluindo a estrutura básica de um arquivo HTML, formatação de texto e elementos como cabeçalhos e separadores.
2. É fornecida uma explicação detalhada sobre a estrutura de um arquivo HTML, incluindo as tags <html>, <head> e <body>, e exemplos de como formatar texto.
3. O documento também discute a inserção e formatação de texto em HTML, como cores, fontes, tamanhos e blocos de texto, assim como diferentes níveis de cabeç
1) O documento apresenta uma introdução ao CSS (Cascading Style Sheets), explicando que ele permite criar layouts de websites de forma diferente do HTML e de forma mais eficiente.
2) É dada orientação sobre os softwares e navegadores necessários para acompanhar o tutorial, sendo recomendado um editor de texto simples.
3) O tutorial ensinará propriedades CSS como cores, imagens de fundo e posicionamento ao longo de três lições.
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
O documento discute os conceitos básicos de HTML, incluindo:
1) O que é HTML e como é usado para estruturar páginas da web;
2) As principais tags HTML como <head>, <body>, <h1>, <p>, <img>;
3) Como adicionar estilos a páginas HTML usando CSS.
Este documento fornece uma introdução sobre HTML, CSS e XHTML. Ele explica o que são essas linguagens, como funcionam e quais são suas principais tags e comandos. Além disso, fornece exemplos de como estruturar páginas web usando essas tecnologias.
O documento descreve as tags HTML para formatar texto, como <b>, <i>, <pre>, <blockquote>, <font> e <div>. Explica como usar essas tags para alterar estilos de fonte, tamanho, cor e alinhamento de texto. Também lista caracteres especiais que requerem códigos HTML como < e >.
O documento apresenta uma aula introdutória sobre HTML, abordando seus principais conceitos e tags. Em 3 frases:
Apresenta o que é HTML, sua estrutura básica e tags importantes como <head>, <body>, <title>, <p>, <h1-6>, <ul>, <ol>, <br>, entre outras. Explica atributos como align, style e tipo de listas. Por fim, pede um exercício prático aplicando as tags estudadas para criação de uma página HTML.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
O documento fornece uma introdução sobre HTML, destacando que é uma linguagem de marcação usada para exibir conteúdo na web. Explica que a HTML passou por muitas alterações desde sua criação até a versão atual (HTML5) e que o foco será apenas na linguagem HTML e o que pode ser feito com ela.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
O documento apresenta um resumo sobre a história e conceitos básicos da linguagem HTML, desde sua criação no CERN até as versões atuais. Aborda também tags e elementos importantes como cabeçalhos, parágrafos, imagens, links e tabelas para estruturar conteúdo em páginas web.
O documento apresenta uma aula introdutória sobre HTML, abordando suas principais tags e estrutura básica. É explicado o que é HTML e suas tags, como <html>, <head>, <title>, <body>, <h1>-<h6> para títulos, <p> para parágrafos, <br> para quebras de linha, <hr> para linhas horizontais, <ul> e <li> para listas não ordenadas, <ol> e <li> para listas ordenadas, <dl>, <dt> e <dd> para listas de definição e cores em HTML
O documento apresenta uma introdução ao HTML e CSS, com uma linha do tempo histórica destas tecnologias e explicações sobre elementos estruturais e chaves como tags, seções head e body, listas e tabelas. É fornecido um guia sobre quais tags devem e não devem ser usadas atualmente.
Este documento fornece uma introdução sobre HTML, ensinando como criar uma página web básica através de marcações HTML. Ele explica o que é HTML, como funcionam as tags e elementos HTML, e fornece exemplos de como adicionar cabeçalhos, parágrafos, links e imagens.
Este documento fornece um resumo do conteúdo de um curso sobre HTML5 e CSS3. Ele inclui tópicos como estrutura HTML5, elementos semânticos, formulários, canvas, links, listas, tabelas e introdução ao CSS3.
O documento descreve a linguagem HTML para formatação de páginas da web. HTML usa tags para formatar texto, imagens, links e outros elementos. É possível formatar texto de várias formas como negrito, itálico e cabeçalhos. O documento também explica como inserir imagens, hiperlinks e quebrar linhas.
1) O documento apresenta um curso sobre HTML e CSS ministrado por Herbet Ferreira Rodrigues, com introdução à história e conceitos básicos dessas linguagens, além de explicar diversas tags e elementos em HTML.
2) São explicados elementos como cabeçalhos, parágrafos, formatação de texto, inserção de imagens e links, além de tabelas.
3) O curso tem o objetivo de ensinar os principais conceitos e ferramentas de HTML para criação de páginas web.
O documento discute as principais mudanças e recursos do HTML5, incluindo:
1) Novas tags semânticas como <header>, <nav> e <section> que tornam a estrutura da página mais organizada e acessível;
2) Novos tipos de entrada para formulários como data, hora, cor, número, etc.;
3) Recursos para armazenamento offline e cache de páginas para uso offline.
O documento introduz os conceitos básicos de HTML, incluindo:
1) HTML é uma linguagem de marcação usada para criar páginas da web;
2) Documentos HTML são compostos por elementos como tags, cabeçalhos, parágrafos e links;
3) Atributos fornecem informações adicionais sobre elementos HTML.
Este documento apresenta os conceitos básicos da linguagem HTML para iniciantes, incluindo a estrutura básica de uma página HTML, as principais tags como <div>, <span>, <h1-6>, <p>, <br>, âncoras, listas não ordenadas e ordenadas, inserção de imagens, formulários, entre outros. O documento também explica como estilizar páginas HTML com CSS e adicionar dinamismo com JavaScript.
O documento descreve as características gerais do HTML, incluindo que documentos HTML são arquivos de texto, podem ser criados em qualquer editor de texto e existem editores específicos para HTML. O documento também discute as marcações básicas do HTML como títulos, cabeçalhos, parágrafos e quebras de linha.
O documento explica a estrutura básica do HTML, incluindo as tags <html>, <head>, <title> e <body>. Também discute tags comuns como <h1>, <h2>, <h3> e <p> e como elas ajudam a estruturar e dar significado a páginas da web.
Este documento fornece uma introdução às características gerais do HTML e como criar documentos HTML. Ele explica como HTML usa marcações para formatar texto e como vincular partes de um documento ou diferentes documentos através de hiperlinks. O documento também descreve como criar listas, cabeçalhos e parágrafos em HTML.
O documento descreve o que é HTML, a linguagem usada para criar páginas da web. HTML usa tags para estruturar o conteúdo em elementos como títulos, parágrafos e listas. O documento também explica como criar páginas HTML básicas usando um editor de texto.
Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro
Palestrante: Leonardo Balter (iLearn/RJ)
Local: Auditório da Faculdade São Lucas
O documento explica que (1) HTML é a linguagem usada para codificar páginas da web, (2) HTML define a estrutura básica das páginas web enquanto o HTTP permite a transferência das páginas pela internet, e (3) HTML não é uma linguagem de programação propriamente dita mas sim uma linguagem de marcação usada para estruturar documentos.
O documento discute os conceitos básicos de HTML e XHTML, incluindo sua história, estrutura, tags e regras. Também aborda CSS, imagens e otimização para mecanismos de busca. É dividido em três módulos tratando de HTML/XHTML, CSS e imagens respectivamente.
A mensagem resume uma conversa entre amigas sobre a importância da amizade, incluindo uma imagem de beijo e links para redes sociais e eventos da remetente.
O documento fornece uma introdução sobre HTML, destacando que é uma linguagem de marcação usada para exibir conteúdo na web. Explica que a HTML passou por muitas alterações desde sua criação até a versão atual (HTML5) e que o foco será apenas na linguagem HTML e o que pode ser feito com ela.
O documento discute as principais mudanças e recursos introduzidos pelo HTML5, incluindo nova estrutura, elementos e atributos. Também analisa o suporte dos navegadores a esses recursos e estratégias para uso, como a detecção de recursos com Modernizr e o desenvolvimento modular dos motores de renderização. Por fim, apresenta em detalhes os novos recursos multimídia como vídeo, áudio e codecs, além de novas APIs como Storage e offline.
O documento apresenta um resumo sobre a história e conceitos básicos da linguagem HTML, desde sua criação no CERN até as versões atuais. Aborda também tags e elementos importantes como cabeçalhos, parágrafos, imagens, links e tabelas para estruturar conteúdo em páginas web.
O documento apresenta uma aula introdutória sobre HTML, abordando suas principais tags e estrutura básica. É explicado o que é HTML e suas tags, como <html>, <head>, <title>, <body>, <h1>-<h6> para títulos, <p> para parágrafos, <br> para quebras de linha, <hr> para linhas horizontais, <ul> e <li> para listas não ordenadas, <ol> e <li> para listas ordenadas, <dl>, <dt> e <dd> para listas de definição e cores em HTML
O documento apresenta uma introdução ao HTML e CSS, com uma linha do tempo histórica destas tecnologias e explicações sobre elementos estruturais e chaves como tags, seções head e body, listas e tabelas. É fornecido um guia sobre quais tags devem e não devem ser usadas atualmente.
Este documento fornece uma introdução sobre HTML, ensinando como criar uma página web básica através de marcações HTML. Ele explica o que é HTML, como funcionam as tags e elementos HTML, e fornece exemplos de como adicionar cabeçalhos, parágrafos, links e imagens.
Este documento fornece um resumo do conteúdo de um curso sobre HTML5 e CSS3. Ele inclui tópicos como estrutura HTML5, elementos semânticos, formulários, canvas, links, listas, tabelas e introdução ao CSS3.
O documento descreve a linguagem HTML para formatação de páginas da web. HTML usa tags para formatar texto, imagens, links e outros elementos. É possível formatar texto de várias formas como negrito, itálico e cabeçalhos. O documento também explica como inserir imagens, hiperlinks e quebrar linhas.
1) O documento apresenta um curso sobre HTML e CSS ministrado por Herbet Ferreira Rodrigues, com introdução à história e conceitos básicos dessas linguagens, além de explicar diversas tags e elementos em HTML.
2) São explicados elementos como cabeçalhos, parágrafos, formatação de texto, inserção de imagens e links, além de tabelas.
3) O curso tem o objetivo de ensinar os principais conceitos e ferramentas de HTML para criação de páginas web.
O documento discute as principais mudanças e recursos do HTML5, incluindo:
1) Novas tags semânticas como <header>, <nav> e <section> que tornam a estrutura da página mais organizada e acessível;
2) Novos tipos de entrada para formulários como data, hora, cor, número, etc.;
3) Recursos para armazenamento offline e cache de páginas para uso offline.
O documento introduz os conceitos básicos de HTML, incluindo:
1) HTML é uma linguagem de marcação usada para criar páginas da web;
2) Documentos HTML são compostos por elementos como tags, cabeçalhos, parágrafos e links;
3) Atributos fornecem informações adicionais sobre elementos HTML.
Este documento apresenta os conceitos básicos da linguagem HTML para iniciantes, incluindo a estrutura básica de uma página HTML, as principais tags como <div>, <span>, <h1-6>, <p>, <br>, âncoras, listas não ordenadas e ordenadas, inserção de imagens, formulários, entre outros. O documento também explica como estilizar páginas HTML com CSS e adicionar dinamismo com JavaScript.
O documento descreve as características gerais do HTML, incluindo que documentos HTML são arquivos de texto, podem ser criados em qualquer editor de texto e existem editores específicos para HTML. O documento também discute as marcações básicas do HTML como títulos, cabeçalhos, parágrafos e quebras de linha.
O documento explica a estrutura básica do HTML, incluindo as tags <html>, <head>, <title> e <body>. Também discute tags comuns como <h1>, <h2>, <h3> e <p> e como elas ajudam a estruturar e dar significado a páginas da web.
Este documento fornece uma introdução às características gerais do HTML e como criar documentos HTML. Ele explica como HTML usa marcações para formatar texto e como vincular partes de um documento ou diferentes documentos através de hiperlinks. O documento também descreve como criar listas, cabeçalhos e parágrafos em HTML.
O documento descreve o que é HTML, a linguagem usada para criar páginas da web. HTML usa tags para estruturar o conteúdo em elementos como títulos, parágrafos e listas. O documento também explica como criar páginas HTML básicas usando um editor de texto.
Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro
Palestrante: Leonardo Balter (iLearn/RJ)
Local: Auditório da Faculdade São Lucas
O documento explica que (1) HTML é a linguagem usada para codificar páginas da web, (2) HTML define a estrutura básica das páginas web enquanto o HTTP permite a transferência das páginas pela internet, e (3) HTML não é uma linguagem de programação propriamente dita mas sim uma linguagem de marcação usada para estruturar documentos.
O documento discute os conceitos básicos de HTML e XHTML, incluindo sua história, estrutura, tags e regras. Também aborda CSS, imagens e otimização para mecanismos de busca. É dividido em três módulos tratando de HTML/XHTML, CSS e imagens respectivamente.
A mensagem resume uma conversa entre amigas sobre a importância da amizade, incluindo uma imagem de beijo e links para redes sociais e eventos da remetente.
O documento lista 13 passos para o bem, incentivando o leitor a continuar sorrindo, perdoando, confiando e espalhando o bem, apesar das dificuldades, decepções e mentiras do mundo, acreditando na capacidade dada por Deus.
La pandemia de COVID-19 ha tenido un impacto significativo en la economía mundial. Muchos países experimentaron fuertes caídas en el PIB y aumentos en el desempleo debido a los cierres generalizados y las restricciones a los viajes. Aunque las vacunas ofrecen esperanza de una recuperación económica en 2021, el camino a seguir sigue siendo incierto dado el riesgo de nuevas variantes del virus.
O documento fornece uma introdução sobre HTML e CSS, descrevendo suas principais características e elementos. Ele explica o que são HTML, tags e estrutura básica de um documento HTML. Também apresenta as propriedades e elementos essenciais de CSS, como fontes, bordas, fundos e listas. Por fim, fornece dicas sobre como aprender mais sobre esses temas através da prática.
1) O documento introduz os padrões HTML, SGML e HyTime que deram origem à linguagem HTML.
2) HTML usa etiquetas entre sinais de menor e maior para formatar texto, e os elementos podem ter atributos.
3) Há editores de texto e WYSIWYG para criar documentos HTML.
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que definem o formato.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo, definidos em folhas de estilo externas para facilitar manutenção.
3) O documento explica elementos básicos de HTML como tags, hiperlinks, imagens e tabelas, e conceitos de CSS como seletores, propriedades e valores
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que formatam o conteúdo.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo visual, definindo regras de estilo em folhas externas aplicáveis a vários documentos.
3) O documento fornece exemplos básicos de como usar tags HTML comuns e como criar regras CSS para definir propriedades de est
Este documento fornece uma introdução rápida ao HTML5 em 15 minutos, ensinando as principais mudanças da sintaxe em relação ao HTML4/XHTML. Inclui exemplos do novo doctype, meta charset, elementos estruturais como header, nav, section e article, e como estilizá-los com CSS. Também discute compatibilidade com navegadores mais antigos usando um script JavaScript.
1) O documento apresenta uma introdução ao HTML, incluindo elementos, atributos e estrutura básica de um documento HTML.
2) São descritos elementos como cabeçalhos, parágrafos, listas e hiperlinks, além de atributos como cores e alinhamento.
3) O documento fornece instruções sobre como editar, publicar e incluir informações em documentos HTML.
1) O documento apresenta uma introdução ao HTML, descrevendo elementos como tags e atributos.
2) São descritos editores HTML e como publicar documentos na web através de diretórios WWW.
3) A estrutura básica de um documento HTML é explicada, incluindo as seções <head> e <body>.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
O documento resume vários artigos sobre HTML5. Apresenta as principais mudanças trazidas pelo HTML5 como novas tags semânticas que melhoram a acessibilidade e a estrutura do código, novas APIs para mídia e formulários e compatibilidade aprimorada entre navegadores. Também discute técnicas para garantir compatibilidade do HTML5 em navegadores mais antigos.
Conceitos básicos para desenvolvimento de um site, utilizando as novas tecnologias proporcionadas pela mais nova versão do HTML. O uso é livre, desde que seja dado os devidos créditos.
Ressalto que, muitos dos conteúdos exibidos foram retirados do site da w3c school.
Obrigado !
O documento apresenta os principais conceitos e comandos básicos da linguagem HTML para criação de páginas web, incluindo tags, atributos, elementos como cabeçalhos, parágrafos, links e imagens.
O documento descreve os conceitos básicos de HTML, incluindo sua criação por Tim Berners-Lee para permitir a inserção de conteúdo e estrutura básica na web. Explica como HTML, CSS e JavaScript trabalham juntos para criar sites modernos, com HTML fornecendo a estrutura, CSS o estilo e JavaScript a interatividade.
O documento introduz a World Wide Web (WWW), descrevendo sua origem na década de 1980 como forma de facilitar o acesso a documentos científicos e o uso de hipertextos para links entre documentos. Atualmente, a WWW é usada para diversos fins como comércio eletrônico e divulgação científica. Documentos na WWW precisam seguir o padrão HTML para serem acessados universalmente por diferentes computadores.
O documento fornece uma introdução sobre como criar sites HTML. Explica que HTML é a linguagem subjacente usada por navegadores e foi inventada por Tim Berners-Lee em 1990. Também discute alguns softwares e editores de texto que podem ser usados para criar páginas HTML e que não é necessário estar online para desenvolver sites.
Este documento é um e-book que ensina os principais elementos do HTML5 em 15 minutos. Ele explica o doctype, tags HTML, meta charset e outros elementos de cabeçalho. Também apresenta os novos elementos estruturais como header, nav, section, article e footer, dando um exemplo de como usá-los. Por fim, discute como estilizar esses elementos com CSS e a compatibilidade com navegadores antigos.
O documento explica os conceitos básicos de HTML, incluindo: (1) O que é HTML e como é usado para criar páginas da web; (2) As partes fundamentais de um documento HTML, como cabeçalho e corpo; (3) Como formatar texto usando etiquetas como parágrafos, negrito e itálico.
O documento explica o que é HTML, a linguagem usada para criar páginas web. Inicialmente, HTML foi criado para divulgação, mas evoluiu para permitir conteúdo multimídia. Aprender HTML requer um editor de texto e saber sobre etiquetas, cabeçalhos, parágrafos e formatação de texto.
Este documento fornece instruções para criar uma página HTML básica em 3 etapas: 1) Adicionar as tags HTML, head e body; 2) Incluir um título entre as tags title; 3) Formatar texto com a tag bold. O documento também explica elementos básicos de HTML como tags, extensão de arquivos e espaçamento.
O documento introduz os principais conceitos de HTML5, incluindo: (1) suas novas tags semânticas como <section>, <nav> e <article>; (2) seus novos recursos como vídeo, áudio e armazenamento local; e (3) como substitui o XHTML ao oferecer maior flexibilidade e retrocompatibilidade.
Semelhante a Iniciandoemhtml5 seleogustavo-121106173712-phpapp02 (20)
1. Iniciando em HTML5
O HTML5 veio com a finalidade de preencher necessidades no desenvolvimento das
linguagens de marcação de texto. Necessidades estas que surgiram com o advento de
novas tecnologias e novos paradigmas e padrões. Hoje o HTML não pode simplesmente
ser organizado e bem visto pelos desenvolvedores, existem outros clientes que podem se
beneficiar desta nova arquitetura. Entre as diversas funcionalidade do HTML5, as
principais são: facilitar o desenvolvimento de paginas que estejam de acordo com os
fundamentos dos padrões web, melhorar a semântica das paginas para diversos clientes
e implementar novas funcionalidades.
Neste post vou tentar mostrar algumas novidades do HTML5, exibindo algumas
vantagens, novas tags, atributos, estilos e técnicas de desenvolvimento que facilitam o
que antigamente (ou atualmente) era ser feito com varias linhas de código e envolvendo
outras tecnologias.
Para começar vamos falar um pouco sobre as estruturas das paginas antigas e compara-
las com as que serão usadas futuramente.
Quando a parte HTML de uma pagina era desenvolvovida, a estrutura ficava quase
sempre da seguinte forma:
<divclass="principal">
<divclass="header"></div>
<divclass="nav"></div>
<divclass="conteudo"></div>
<divclass="footer"></div>
</div>
Reparem que tudo se baseava em torno de div’s (isso quando não se baseava em table =
S) e classes para mapear e fazer o reconhecimento de sessões da pagina. Esta forma de
desenvolvimento é bastante cabível e de certa forma consegue separar os tipos
de conteúdo, deixando a semântica do HTML relativamente organizada. No entanto
com a aplicação do HTML5 esta forma de desenvolvimento vai sofrer algumas
pequenas mudanças. Como já se sabe o HTML5 trouxe consigo algumas novas tags que
podem ajudar não somente o reconhecimento ou a organização ou a visibilidade de um
código HTML. Vejamos algumas novas tags em uma estrutura feita sobre a nova versão
desta linguagem:
<section>
<header></header>
<nav></nav>
<article></article>
<footer></footer>
</section>
Perceba que todos os nomes das tags sofreram alterações, entretanto a estrutura não.
O conteúdo da pagina não é organizada sobre div’s mas sim sobre uma divisão natural
feita pelas tags. Uma pergunta muito comum ao ver esta diferença é “Mas e daí, qual a
2. diferença entre isto e div’s?”. Bem, fora as varias funcionalidades que eu mostrarei logo
mais neste post ainda tem o fato de organizar de forma obrigatória e definitiva
a semântica em todos os aspectos. O que estou querendo dizer é que não somente os
desenvolvedores terão o prazer de mapear o código de forma bem mais simples
mastambem o CSS será feito de forma mais especifica e os sites de busca terão mais
facilidade para fazer o mapeamento das paginas.
Um exemplo, vamos supor que a forma de mapeamento do Google seja feita através dos
menus dos sites. Agora vamos supor que o AbasB já esteja em HTML5 e o menu seja
feito utilizando a tagnav. O Google pode se preocupar em começar o mapeamento
pelo conteúdo das tagsnav e fazer um mapeamento bem mais eficiente do que um site
em que o menu esteja dentro de div’s e listas tais quais o resto da pagina.
Bom, agora que já mostrei algumas vantagens das novas tags e estrutura do HTML5
vamos ver algumas novas funcionalidades mais a fundo.
A tagheader pode ser usada tanto na aplicação do header do site, conforme mostrado na
estrutura acima, como pode se usado para representar a header de outras sessões do site.
Por exemplo, o AbasB poderia utilizar a tagheader para guardar informações do
cabeçalho de um post como o titulo, a data de criação, o autor e alguns outros dados.
Vamos à um exemplo:
<article>
<header>
<hgroup>
<h2>Titulo do Post</h2>
<h3>Autor do Post</h3>
<hgroup>
<timedatetime=”2010-11-02 23:00:00”>02 de novembro de 2010</
time>
</header>
</article>
Duas das tags acima ainda não foram apresentadas, mas não são menos importantes. A
taghgroup tem a finalidade de agrupar todas as tags de cabeçalho h*. A tag “time” como
o próprio nome diz tem a finalidade de armazenar valores de tempo como datas e hóras.
A tagnav pode ser usada para representar determinadas áreas de navegação de um site.
Dois exemplo simples são o menu e mapa do site que normalmente são feitos com
listas. A seguir um exemplo:
<spanstyle="font-size: medium;"><nav>
<ul>
<li><arel=”item1” href=”#”>item1</a></li>
<li><arel=”item2” href=”#”>item2</a></li>
<li><arel=”item3” href=”#”>item3</a></li>
<li><arel=”item4” href=”#”>item4</a></li>
</ul>
</nav></span>
3. Repare que dentro das ancoras existe um atributo chamado rel. Bem, este atributo
existe apenas para deixar explicito o conteúdo no qual a ancora esta sendo fazendo
referencia. Mais uma vez algo util para o mapeamento dos sistemas de busca, já que
eles podem passar de link em link e ter uma previa do conteúdo que aquela ancora
guarda.
Uma nova tag bastante interessante é a article. Ela permite marcar explicitamente em
que parte do seu HTML estão os artigos e conteúdos em geral. Esta tag foi utilizada
para ilustrar exemplos mais acima.
Deve se ter muito cuidado para não substituir <divclass=”conteudo”> por article.
Mesmo porque o conceito de “conteúdo” varia de desenvolvedor para desenvolvedor, ao
passo que o conceito da tagarticle é único.
Outra tag nova bastante inteligente é a aside. Esta visa guardar todos os links que
podem estar relacionados ao conteúdo principal da pagina ou mesmo ao conteúdo de um
artigo. É bem mais facil entender o funcionamento desta tag através de um exemplo:
<span style="font-size: medium;"><article>
<!--CONTEUDO DO ARTIGO--->
</article>
<p>Conteudos relacionados:</p>
<aside>
<ul>
<li><a rel=” artigo2” href=”#”> artigo2</a></li>
<li><a rel=” artigo3” href=”#”> artigo3</a></li>
<li><a rel=” artigo4” href=”#”> artigo4</a></li>
<li><a rel=” artigo5” href=”#”> artigo5</a></li>
</ul>
</aside></span>
Perceba que esta tag pode ser confundida com o uso da tagnav, embora suas
competências sejam nitidamente diferentes.
As tagsaudio e video foram provavelmente uma das mais esperadas pelos
desenvolvedores. Mas a verdade é que apesar de ter facilitado muito (muito mesmo!) a
inclusão destas midias em uma pagina a falta de customização pode acabar diminindo a
utilidade destas tags. Até porque não é dificil pegar a tag de video do YouTube, por
exemplo, e disponibilizar em uma pagina HTML. Mesmo assim a facilidade no uso
destas duas tagssão surpreendentes. Ambas possuem os atributos src e controls. A
primeira se referente ao caminho da musica ou video que a pagina irá rodar. O segundo
se refere ao controles que irão aparecer para que o video/audio possa ser gerenciado
pelo usuario. A tagaudio pode rodar arquivos no formato .mp3 e a tagvideo .webm,
.mp4 e .ogv. Estes provavelmente não são todos os formatos que estas tags suportam. A
medida que encontrar novos tipo de fontes que funcionem atualizo este post.
A ultimatag para ser tratada neste post é a tagfooter. Como o próprio nome diz esta tag
deve ser inserida no final das paginas do site. Geralmente representa o espaço que
contem informações como “Copyright”, um link para a home ou mapa do site.
Novas tags de formulario do HTML5 e CSS3
4. HTML5 e CSS3 trouxeram consigo varias melhorias para o gerenciamento de formularios.
Varios controles que antes eram feitos com a mistura de CSS, HTML e JavaScript já podem ser
substituidos por apenas um controle HTML. Os estilos de validação que eram feito com CSS e
inseridos com JavaScript já podem ser substituidos por estilos de validação via CSS.
Isso é possivel pois o HTML5 dividiu o <input type=”text”/> em vários elementos especificos e
criou outros controles que não existiam mas que eram improvisados. Algumas tags do HTML5
estão listas abaixo:
<input type="date" min="0001-01-01" max="2011-08-14" value="2010-08-14"/>
<input type="tel" placeholder="(XXX) XXX-XXXX" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$"
/>
<input type="color" />
<input type="number" step="1" min="-5" max="10" value="0" />
<input type="email" />
Perceba que na linha 1 o tipo do campo é date o que indica que o campo serve para receber
datas. Neste e em outros campos como o number (utilizado para trabalhar com números) é
possivel definir propriedades como min, max e value.
Na linha 2 o tipo do controle é tel, que significa que aquele campo serve para telefones. O
formato do telefone pode ser definido com o atributo pattern que recebe um regex e verifica
se o valor segue o padrão ali estabelecido. O atributo placeholder pode ser usado em outros
campos e serve para criar uma máscara para o respectivo campo.
Na linha 3 o campo é do tipo color, que como o proprio nome diz serve para validar cores. As
cores podem ser tanto em hexadecimal (#FFF) como descrito em ingles (red).
Outras tags importantes do HTML estão listas abaixo. São elas respectivamente:
controle do tipo range;
progressbar que visa informar que um determinado evento está ocorrendo;
progressbar que informar quanto do tempo de execução de um evento falta para
acabar.
<input type="range" min="0" max="100" step="1" value="10" />
<progress>working...</progress>
<progress value="75" max="100">3/4 complete</progress>
Já do lado do CSS dois novos seletores facilitam muito a estilização de controles de formulario.
Vale lembrar que nem de longe estas são todas as novas ferramentas que o HTML5 e CSS3
5. disponibilizam para controles de formulario. É apenas uma prévia para mostrar o basico e para
que saibam da existencia de ferramentas mais simples que fazem o trabalho pesado.
[required] { background-color: lightyellow; }
:invalid { background-color: #FF9; }
A primeira linha do trecho de código acima estiliza todos os elementos de formulário que não
podem sofrer submit com valor vazio. A pergunta é “como o css sabe quais controles
de formulário não podem ficar vazio?”. A resposta é simples, para que o seletor [required]
estilize todos os elementos que não podem estar vazios basta inserir nas tags HTML a
propriedade required. Dessa forma o CSS reconhece que aquele controle não pode estar vazio.
A segunda linha também contempla um novo seletor que estiliza todos os elemenetos
inválidos da pagina. Por exemplo, uma tag com a seguinte configuração <input type=”email” />
fica com a propriedade background-color igual a #ff9 até que o usuário escreva um e-mail
valido dentro da caixa de texto.
Veja que a mistura dos novos campos HTML5 com os novos elementos CSS3 é possivel
incrementar a validação e o gerenciamento do formulario de forma muito poderosa e simples.
Recursos interessantes do CSS3
Na verdade a pouco tempo o AbasB tinha um unico post com tudo de CSS3 e tudo de
HTML5. Faz pouco tempo decidi dividir melhor os temas para facilitar a busca e os
temas do assunto. Neste post tento passar dois elementos que a meu ver são
indispensáveis para quem pretende começar com CSS3.
- Colunas automaticas:
É muito comum em sites a necessidade da divisão de um container em diversas colunas
com o mesmo tamanho, afim de organizar textos, formularios, imagens ou outros
elementos HTML. Antes do surgimento do CSS3 era necessario a criação de classes
com o atributo floatdefinido com o valor left ou rightpara que as divsse organizem
conforme anecessidade. Apartir do CSS3 basta definir três atributos para que as colunas
sejam definidas dentro de um container.
.colunas {
-webkit-column-count: 3;
-webkit-column-rule: 1pxdashed#999;
-webkit-column-gap: 20px;
}
Não vou perder tempo explicando cada atributo pois pelo nome já é possovel identificar
suas responsabilidades. Para visualizar as colunas basta associar a classe colunas a um
container e inserir conteudo. O conteudo inserido será divido de acordo com o
configurado na classe.
6. - Novos seletores do CSS3:
Este é um assunto extenso que exige um post inteiro. Por isso vou mostrar o que são os
seletores , com o intuito de ilustrar algumas das novas técnicas que visam aumentar o
controle e a produtividade do CSS. Para ver todos os novos seletores do CSS3 clique
aqui.
Os seletores são usados para definir e posteriormente associar classes a um elemento.
Os seletores mais usados são por tag, por classe e por ID. Mutios dos sites hoje utilizam
conceitos de herença e combinam os seletores de tag com classe ou ID.
.classe {}
#id {}
tag{}
tag.classe {}
.classe tag{}
Os novos seletores visam aumentar o controle e a produtividade das folhas de estilo e
dos elementos HTML. Um exemplo de novos seletores que já foram mostrados neste
post foi:
[required] { background-color: lightyellow; }
:invalid { background-color: #FF9; }
tabletr:nth-child(odd) { background: #999; }
Apartir do seletor da linha 2 é possivel adicionar estilo a todos os elementos invalidos
da pagina. Já com o seletor da linha 1 é possivel adicionar estilo em todos o elementos
que possuem o atributo required. O terceiro seletor acessa todos os elementos tr
impares que estão dentro da tagtable e adiciona uma cor de fundo diferenciada. Muito
usado para fazer a alternancia de cores nas linhas de uma tabela.
Borda arredondada, gradiente, sombriamento e espelhamento
no CSS3
Depois de tantos posts sobre CSS3 vamos a parte considerada por muitos a parte mais
interessante de toda a brincadeira. Como os novos atributos são tão intuitivos quanto os
antigos tentarei mostrar a maior quantidade possivel e de forma rapida.
Muitas das formas de desenvolvimento de layout exigiam a inserção de imagens para se
criar uma pagina com visual convidativo, com logo colorido, bordas arredondadas,
degrade, sombras em caixas e textos. Com CSS3 o uso de imagens pode ser reduzido
drasticamente devido a facilidade de se produzir efeitos visuais. Por consequencia as
7. paginas ficarão muito mais leves, farão menos requests no servidor e não terão mais o
efeito de carregar primeiro os elementos simples do HTML, depois as imagens.
Todos os códigos citados neste post estão dentro da tag<style> e fazem parte de uma
folha de estilo.
- Borda arredondada:
div{border-radius:15px; border:1px solid #000; }
O trecho de código acima arredonda as bordas de todas as div’sda pagina. Além disso
insere uma borda de 1 pixel que acompanha o novo formato da div. O elemento
responsavel pelo efeito é o border-radius que além de prover o estilo arredondado ainda
controla através do valor inserido o nivel da curvatura das bordas.
- Gradiente:
div {
background: -webkit-gradient(linear, leftbottom, lefttop,
from(#eee), color-stop(0.50, #fff),
to(#eee), color-stop(0.50, #fff));
}
Este código insere um degrade de cima para baixo e de baixo para cima em todas as divs
do site, deixando centro da divbranca. É um código diferenciado se comparado com o
primeiro exemplo.
O elemento background recebe qual será o modelo do gradiente. Neste caso foi usado o
linear, no entanto existem outros tipo d gradiente que podem diversificar o visual. Além
do tipo é necessario configurar ainda a cor em que o degrade começa e em qual cor ele
vai parar, tanto de cima para baixo, como é possivel ver na linha 3, quando de baixo
para cima, como é possivel ver na linha 4. Neste caso ele vai de “azul” para “branco” de
forma linear.
- Sombra em caixas e textos:
div{
/*sombra de texto*/
text-shadow: #99902px5px;
/*sombra de container*/
-moz-box-shadow: 3px3px10px#666666;
-webkit-box-shadow: 3px3px10px#666666;
8. box-shadow: 3px3px10px#666666;
}
O código acima adiciona efeito de sombra em todas as divs e em todos os caracteres que
estão dentro das divs. O elemento responsável pelo aombriamento de textos esta na
linha 3. Ele configura a cor, profundidade e lado que a sombra aparecerá. O trechos de
códigos das linhas 6 a 8 são os responsaveis por inserir sombra nas divs.
- Espelhamento de container:
div {
-webkit-box-reflect: below10px-webkit-gradient(linear, lefttop,
leftbottom, from(transparent), color-stop(0.3, transparent),
to(rgba(255,255,255,0.8)));
}
O código acima insere espelhamento nos containers. É na linha 1 que se configura qual
será a posição e o tipo de reflexo. A linha 2 determina qual será a cor e a opacidade que
o reflexo terá no inicio e fim.
Para maiores informação (muito maiores) acessem este site espetacular.