Mais Populares Artigos

  • HTML BÁSICO – PARTE 3 – LISTA E LINKS

    Lista e Links em HTML

    Olá pessoal, tudo joia?
    Hoje iremos falar sobre Listas e Links.
    É muito importante que vocês prestem bastante atenção neste tutorial.

    Conheça os outros artigos

    LISTAS

    As listas em HTML são utilizadas para dar destaque, linha por linha, passo por passo, sobre algum determinado assunto.
    Pense em uma lista de mercado, onde se destacam itens que devem ser lembrados.

    O HTML suporta 3 tipos de listas:

    • listas ordenadas;
    • não ordenadas;
    • e de definições.

    LISTAS NÃO ORDENADAS

    As listas não ordenadas são utilizadas para listar itens que não possuem ordem lógica.
    Por padrão recebem ao lado esquerdo de cada item um bullet (tipicamente pequenos círculos) que podem ser alterados conforme sua necessidade.
    São construídas pelas tags  e .

    LISTAS ORDENADAS

    Muito parecida com as listas não ordenadas, as listas ordenadas, como o nome já diz, são listas que apresentam ordenação, possuem uma sequência lógica.
    Por padrão cada item é numerado.
    São construídas pelas tags  e .

    LISTAS DE DEFINIÇÕES

    Não é lista de itens, mas de definições.
    Imagine que você escreveu a mesma lista de itens de mercado, mas ao invéz de apenas listar os itens, você descreveu detalhes de cada item.
    São construídas pelas tags ,  e .

    : Define o início de uma lista de definição.
    : Define o nome do item que receberá alguma definição.
    : Definição do item.

    Leia mais
  • Android Studio: Tutorial completo do básico ao avançado (9 lições!)

    Em 2012 eu comecei a me interessar por Android. Não me orgulho de ter entrado tão atrasado no mercado, uma vez que um colega de faculdade já havia me mostrado a plataforma em 2010, quando estava me formando. Se eu tivesse dado atenção à época, quando qualquer app alcançava um volume grande de downloads, talvez toda minha carreira tivesse sido diferente. Não que eu esteja reclamando do que consegui alcançar nestes 11 anos como desenvolvedor, mas né!

    Mas o que eu estava me lembrando agora é que em 2012 era muito difícil programar para Android. Os aparelhos ainda eram poucos, menos ainda os que prestavam.  Android 2.3 era luxo e as ferramentas, terríveis. Usávamos muito Eclipse com os plugins do ADT. Quando um atualizava, quebrava o outro, perdia muito tempo configurando a ferramenta. Logo descobri o MotoDev, um Eclipse modificado pela Motorola que já vinha pronto para programar para Android. Foi a ferramenta que mais utilizei até o lançamento oficial do Android Studio.

    Ah, o Android Studio (suspiro)!

    Tenho uma relação de amor e ódio com a ferramenta. Ao mesmo tempo em que ela tornou o desenvolvimento nativo para a plataforma muito mais fácil, ela acaba com os recursos da máquina onde você usa ela, principalmente seu espaço e IO de disco. Mas fazer o quê, não há bônus sem ônus.

    E é dessa ferramenta que vou falar hoje. Não apenas falar, vou destrinchar tudo que sei sobre ela (e o que não sei vou pesquisar) para lhe entregar o post mais completo que você possa encontrar na Internet sobre o assunto. Um tutorial completo de Android Studio, do básico ao avançado.

    Vou falar aqui de (clique para ver algum tópico específico que mais lhe interesse):

    1. Como baixar e instalar a ferramenta?
    2. Como e por que manter atualizado?
    3. Como instalar os pacotes corretos do Android?
    4. Como criar e executar seu primeiro AVD?
    5. Como criar meu primeiro app Android?
    6. Como fazer testes mais avançados?
    7. Como copiar e inserir arquivos no AVD?
    8. Como gerar o APK para publicação?
    9. IDEs concorrentes do Android Studio

    Tem algum tópico que você gostaria de saber e que eu não cobri aqui? Me manda nos comentários!

    #1 – Como baixar e instalar o Android Studio?

    O Android Studio é a ferramenta oficial para desenvolvimento Android. Apesar dos seus contras e de existirem alternativas (como listo na dica #12), ele ainda é a melhor opção.

    Para baixar, acesse o site oficial da ferramenta neste link. A página detecta seu sistema operacional e lhe fornece a versão mais atualizada da ferramenta. Após baixar, dê um duplo-clique nele para instalar na sua máquina.

    Assim que ela terminar de instalar, execute-a para que sejam efetuadas as primeiras atualizações e você possa finalmente utilizá-la.

    #2 – Como e por que manter o Android Studio atualizado?

    Assim que você instala a ferramenta, a mesma já executa uma atualização de suas dependências. No momento em que escrevo este post ela está versão 2.3.1, mas todo mês sai alguma atualização nova: updates de segurança, de performance, para corrigir bugs, etc. Além disso não é apenas o Android Studio em si que atualiza, mas sempre tem alguma de suas dependências para atualizar. E são muitas:

    • novos SDKs surgem para as novas e antigas versões do Android
    • atualização da ferramenta de compilação (Android Build Tools)
    • novos Add-ons para facilitar a sua vida enquanto desenvolvedor
    • novas versões do Gradle, o gerenciador de build do Android Studio

    E essas são apenas algumas!

    Para manter o Android Studio atualizado é bem simples, pois a própria ferramenta te avisa quando saem novas atualizações dela própria, bastando aceitar o download e reiniciar a mesma quando solicitado. Ainda assim, você pode mandar verificar atualizações manualmente, usando a opção Android Studio > Check for updates.

    É importante manter sua ferramenta atualizada para evitar exploits de segurança que possam ser usados por pessoas maliciosas e até mesmo para que a performance da ferramenta (que não é lá grande coisa) fique um pouco melhor.

    #3 – Como baixar os pacotes corretos do Android SDK Manager?

    O Android Studio possui integração com o SDK Manager, a ferramenta que gerencia as versões e add-ons de desenvolvimento Android presentes na sua máquina. Você consegue acessar o SDK Manager a partir da splash screen, no meu Configure como abaixo:

    Por dentro da ferramenta você também pode acessar o SDK Manager a partir do menu Tools > Android > SDK Manager:

    E usando o ícone presente na toolbar (é o Android com a seta de download):

    Qualquer uma das opções vai te levar até a seguinte tela do SDK Manager:

    Nesta janela temos algumas informações bem importantes que valem ressaltar:

    No topo, temos o caminho onde o SDK do Android está instalado na sua máquina. Certifique-se de que este local possui muito espaço em disco disponível, tipo uns 20GB, só pra garantir.

    Logo abaixo, temos três abas, sendo a primeira a que mostra as versões de plataforma Android que você possui na sua máquina e que consequentemente conseguirá criar apps. O jeito mais fácil (e que mais ocupa espaço) de instalar esses SDKs é apenas marcando o checkbox correspondente e mandando instalar. Mas há uma maneira mais inteligente, que vou falar mais adiante.

    Por ora, certifique-se de que você possui ao menos a versão mais recente instalada, Nougat no meu caso, como pode ver na imagem.

    A segunda aba mostra as ferramentas e add-ons das plataformas, como na imagem abaixo:

    Aqui não precisamos de muita coisa, mas ao menos você terá de ter sempre a versão mais recente instalada do Android SDK Build-Tools, do Android Emulator, do Android SDK Platform-Tools e do Android SDK Tools. Quando sai alguma atualização desses elementos geralmente a ferramenta avisa, mas não custa nada abrir essa tela de vez em quando para checar por você mesmo.

    A terceira aba mostra apenas as URLs dos repositórios de onde as dependências estão sendo baixadas e, a menos que você tenha certeza do que está fazendo, não deve mexer aí.

    E por fim, eu mencionei no início desse tópico de que tinha um jeito melhor de baixar as dependências que não apenas marcando o checkbox da versão do Android, não é mesmo?

    Pois bem, primeiro, volte à aba inicial do SDK Manager e marque o checkbox inferior-direito que diz “Show package details”. Agora você deveria ver uma árvore de dependências muito mais intrincada, como segue:

    Note que abaixo da raiz do Android 7.1.1 que eu tenho instalado no meu note, que apenas três opções estão marcadas: Android SDK Platform 25 (essa é obrigatória), Sources for Android 25 (opcional, para melhorar o debugging) e Google APIs ARM EABI v7a System Image. Neste último que está o segredo para economizar espaço em disco!

    Para realizar os testes dos seus apps, como mostrarei adiante, você precisar ter imagens das máquinas virtuais Android baixadas no seu computador. As System Images, que nesse caso eu tenho apenas uma dentre as diversas disponíveis. Uma breve explicação sobre as imagens que aparecem nessa listagem, e que praticamente são as mesmas em todas as versões de Android:

    • Android TV …: é a imagem para testar apps feitos para Smart TVs;
    • Android Wear …: é a imagem para testar apps feitos para wearables (Smart Watches, por exemplo);
    • Google APIs …: é a imagem para testar apps feitos para smartphones e tablets, que usem APIs do Google (Mapas, por exemplo)
    • ARM …: imagens que comecem com esse nome são de smartphones/tablets usando CPU ARM;
    • Intel x86: imagens que comecem com esse nome são de smartphones/tables usando CPU Intel;

    Estas são as opções mais frequentes que aparecem para download, e aqui entra mais uma explicação importante:

    • se você possui um computador com processador Intel recente (uns 3 anos pra cá), instale o Add-on Intel Accelerator HAXM que vai melhorar a performance dos testes na sua máquina, bem como baixe somente imagens que possuam arquitetura Intel x86 no nome.
    • agora, se você possui um computador mais antigo ou que não tenha processador Intel, sugiro baixar somente imagens que contenham arquitetura ARM EABI v7 mais fáceis de emular

    Mas o mais importante é: você não precisa ter todas essas imagens instaladas em sua máquina. Eu costumo ter apenas uma da versão mais recente do Android e outra da versão 4 (Kitkat, por exemplo), para criar apps com maior suporte na Google Play.

    Como assim?

    Se você faz um app usando a plataforma 4, por exemplo, todos os smartphones com Android 4+ poderão instalar o seu app. Agora, se você faz um app apenas para Nougat (7), somente quem tem smartphones de ponta, na data em que escrevo este post, é que conseguirá utilizá-lo.

    Capicce?!

    #4 – Como criar meu primeiro AVD?

    Primeiro, você sabe o que é um AVD?

    AVD é a sigla para Android Virtual Device, ou Dispositivo Virtual Android. Basicamente um AVD é uma máquina virtual Android que você usa para testar seus apps enquanto desenvolve, para que não precise ter um ou mais dispositivos Android de verdade. É especialmente útil para testar diferentes configurações de smartphone e principalmente dispositivos mais difíceis de termos, como wearables.

    Sendo assim, saber como criar um AVD é muito importante para poder prosseguir nos estudos com Android. E o primeiro passo para isso é acessar o AVD Manager, que fica no menu Tools > Android > AVD Manager, por dentro da ferramenta:

    Ou ainda, pela toolbar (é o ícone do smartphone com a cabeça do Android no canto direito):

    Independente da opção escolhida, o AVD Manager se abrirá, como abaixo:

    Neste meu print, já tenho dois AVDs criados, mas isso não importa no momento. Para criar seu primeiro ou décimo, os passos são os mesmos. Primeiro, clique no botão “Create Virtual Device”, no canto inferior esquerdo, isso irá abrir o assistente de criação de AVD:

    Na primeira tela, selecione a categoria Phone e depois Nexus One, um modelo de smartphone simples porém suficiente para testarmos nossos apps. Na verdade essa escolha afeta mais a resolução do seu dispositivo do que qualquer outra coisa, então não importa tanto assim neste momento. Avance para a próxima tela no botão inferior direito.

    Aqui você escolhe qual versão do Android que seu AVD vai ter, dentre as opções que você já tem baixadas na sua máquina e as demais, que possuem o link para download aqui mesmo, o que facilita bastante o gerenciamento das mesmas. Neste print estou selecionando uma imagem de Nougat que já tenho baixada e que encontra-se na aba “Other images”. Na aba x86 você encontra as imagens de smartphones Intel e na aba Recommended, bem, você tem as recomendas pelo Android Studio, sabe-se lá o que isso signifique…

    Avance novamente e verá a seguinte tela.

    Aqui você define o nome do seu AVD, revisa a resolução e plataforma do dispositivo, se ele iniciará em posição retrato ou paisagem (que pode ser alterado depois) e se a performance dos gráficos será via software ou via hardware (deixe automático, a menos que for desenvolver algum jogo).

    Note que tem um botão ali de “Show Advanced Settings”. Se você clicar nesta opção, poderá personalizar melhor as configurações de hardware do seu aparelho, sendo as mais importantes:

    • Câmera: você decide se o dispositivo vai ter câmera ou não, e se ela usará a webcam do seu notebook ou apenas uma imagem da sua pasta de imagens;
    •  Network: a velocidade da rede do seu celular, podendo simular redes lents e antigas como GPRS, EDGE, etc ou deixar Full para usar a Internet completa do seu computador.
    • Memory & Storage > RAM: define a quantidade de memória RAM o seu dispositivo vai ter. Sugiro 1024MB para a maioria dos AVDs.
    • Memory & Storage > Internal Storage: espaço de armazenamento interno disponível no seu AVD. A menos que vá armazenar muitos arquivos ou um banco de dados muito grande, a sugestão de 800MB é suficiente.
    • Memory & Storage > SD Card: define se você vai ter um SD gerenciado pela ferramenta ou salvo em um arquivo externo que simulará o SD. Em ambos os casos, você deve definir a capacidade do SD virtual em MB.

    Caso não tenha certeza do que fazer com cada uma dessas configurações, deixe as mesmas como estão, alterando apenas a RAM para 1024MB. Clicando em Finish finalizará o processo e voltará à tela de gerenciamento dos AVDs, que deve demorar alguns segundos e ficar travada enquanto o AVD está sendo criado.

    Note que cada AVD consome um significativo espaço no seu HD (Size on Disk), então não fique criando um monte deles ao mesmo tempo que não vale a pena.

    Para editar o AVD, clique no ícone de lápis e o assistente de configuração será aberto novamente. A seta para baixo exibe opções como formatar (Wipe) o AVD e excluí-lo. Obviamente o play verde manda executar o AVD.

    A execução pode demorar mais ou menos, dependendo da configuração do seu AVD vs a configuração da sua máquina. Em geral, algo em torno de 1-5 minutos é normal. Sim, a inicialização é bem lenta e consome muitos recursos da máquina. Quem já mexeu com máquinas virtuais antes sabe do que estou falando.

    Ao término do processo de inicialização do Android, você terá uma máquina virtual Android para mexer à vontade, sendo o comportamento e aparência equivalentes ao de um Android nativo completo, incluindo funcionalidades como instalar apps e navegar na Internet.

    Uma dica: depois que você inicializa seu AVD, não feche ele. Assim, a cada projeto que precisar testar, basta mandar executar no AVD que já está rodando, sem precisar inicializar um novo. Somente encerre o AVD depois que terminar todos seus testes. Também encerre se ele estiver travado ou se demorar mais de 5 minutos para inicializar.

    #5 – Como criar meu primeiro app Android?

    Eu não vou entrar em detalhes neste passo, uma vez que já fiz isso em diversas outras oportunidades aqui no blog. Sendo assim, leia um dos seguintes materiais antes de prosseguir nesse tutorial:

    Com o app criado, use o botão verde de play que fica na toolbar para executá-lo:

    O Android Studio vai levar alguns segundos para compilar seu projeto e empacotar usando o Gradle e depois vai lhe perguntar onde deseja testar o mesmo:

    Neste exemplo, meu AVD já está inicializado por completo, por isso que aparece na lista de dispositivos conectados. Basta selecionar ele e dar um Ok para que o app que estamos testando seja instalado e executado no mesmo.

    #6 – Como fazer testes mais avançados?

    Consulte este post aqui que está bem completo, focado nesta questão de testes de apps usando diferentes configurações e recursos, incluindo como testar no seu smartphone.

    #7 – Como copiar e inserir arquivos no AVD?

    O AVD se comporta como um autêntico dispositivo Android, certo? E num dispositivo Android você consegue colocar e tirar arquivos do armazenamento interno dele, certo? Logo, o mesmo é possível de ser feito com o AVD!

    A tarefa é simples, primeiro execute o seu AVD e deixe-o inicializar completamente. Em seguida, abra a ferramenta DDMS da sua IDE, no caso Android Studio é o Android Device Monitor, que fica no menu Tools > Android.

    Uma vez com o Device Monitor aberto, que permite entre outras coisas ver como anda o consumo de recursos de hardware do seu AVD, você tem a aba File Explorer que permite mexer nas pastas e arquivos do mesmo (dê uma olhada na imagem e como estou mostrando o que está salvo dentro do AVD)! Use os botões da toolbar da direita da imagem para fazer as operações:

    • ícone do disquete para copiar um arquivo do seu smartphone pro computador;
    • ícone do smartphone para copiar um arquivo do seu computador pro smartphone.

    Para quê você iria querer copiar arquivos do AVD? Para fazer um dump da sua base SQLite, por exemplo. Ou o inverso, para colocar arquivos estáticos dentro do AVD e usar eles no seu app. Na verdade você faz o que quiser com esse conhecimento, eu só queria te mostrar que era possível.  

    #8 – Como gerar o APK para publicação?

    O APK é o arquivo que permite a instalação do seu app em outros smartphones, ou seja, você precisa ter o APK do seu app criado para poder vendê-lo ou mesmo dá-lo de graça, não importa.

    Eu falo em mais detalhes dessa dúvida aqui em ambos meus livros Meu primeiro app Android e Criando apps para empresas com Android, incluindo como configurar seu app pra download na Google Play e tudo mais. Pra resumir a geração do APK e não ser repetitivo, use o menu Build > Generate Signed APK, crie suas chaves de assinatura caso nunca tenha criado elas (elas assinam o seu app com seus dados pessoais, pra garantir depois que ele é seu mesmo) e escolha em qual pasta o APK será salvo.

    Fácil, fácil!

    #9 – IDEs concorrentes do Android Studio

    Existem diversas maneiras de programar para Android usando desde a linguagem Lua com Corona SDK até HTML + CSS + JS com Phonegap. Mas se você ainda quiser se manter no Java, usando o SDK nativo tradicional, existem duas excelentes opções para programar seus aplicativos Android:

    Clique nos links das ferramentas para ver tutoriais completos de como prepará-las para uso com Android, visto que elas não oferecem suporte nativo à plataforma.

    Leia mais
  • MEGA MENU DROPDOWN

    Como criar um Mega Menu Dropdown com apenas CSS

    Olá pessoal, tudo bom?
    Neste tutorial irei ensinar como desenvolver um Mega Menu dropdown com apenas CSS3, sem a necessidade de script.
    Espero que gostem.
    Vamos lá!

    Você já leu nossos artigos anteriores?

    MEGA MENUS

    Mega Menus são normalmente utilizados em sites de e-commerce, mas eles se tornam mais populares porque eles são uma ótima maneira de visualizar/organizar o conteúdo.
    Podemos subdividir um submenu em diversos menus para facilitar a usabilidade do site.

    mega-menu-2

    HTML

    Em HTML nós vamos criar um menu normal <nav>, com uma lista não ordenada <li> e vamos adicionar os links.

    Veja Também: ANIMAÇÃO COM CSS3 – TRANSITION

     

     

    RESETANDO PROPRIEDADES CSS

    Agora precisamos resetar algumas configurações padrão de css:

     

     

    Agora adicionamos algumas propriedades para deixar os itens de nav inline:

     

     

    ESTILIZANDO O NAV

    Vamos começar com os estilos comuns, como o padding, height, position, etc. Em seguida, vamos definir os estilos de tipografia, como font-size, color, text-shadow, etc. Também vamos definir um background-color e um border-left e border-right. Para suavizar as transições (animações), vamos adicionar um transition do CSS3.

     

     

    Agora vamos adicionar o estilo para quando passarmos o mouse sobre os links (:hover):

     

     

    ESTILIZANDO O FORMULÁRIO DE BUSCA

    Vamos começar estilizando a tag <form> adicionando width, height e algumas outras propriedades:

     

     

    Agora vamos estilizar o elemento <input type="text">. Vamos formatar seu estilo padrão e seu estilo ao clicarmos sobre ele (:focus).

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

     

     

    Agora vamos estiliar o botão de pesquisa <button type="submit">.
    Os estilos que iremos aplicar são semelhantes ao campo de texto, só vamos definir uma largura fixa e altura e adicionar cantos arredondados usando a propriedade border-radius. Temos também que definir transições para as duas entradas, a fim de ter algumas animações suaves e agradáveis.
    Também vamos estilizar o ícone do botão.

     

     

    EXEMPLO ATÉ AGORA

    mega menu dropdown 2

    MEGA NAVS DROPDOWNS

    Esta é uma das partes mais importantes. Vamos começar por definir um position: absolute, width: 100%, display: block e os valores top e left. Então, vamos esconder o nav usando as propriedades de opacity, de visibility e overflow. Depois disso, vamos adicionar o background-color, border-radius e algumas transições. A razão pela qual nós estaremos usando essas três propriedades para ocultar os navs suspensos e não o display: none; é porque se usarmos display: none; as transições não vão funcionar.

     

     

    Para mostrar o nav, nós vamos mudar a opacity para 1, a propriedade visibility para visible e overflow para visible:

     

     

    CONTEUDO DO MEGA MENU

    Agora nosso mega nav suporta qualquer tipo de linguagem (html, php, js, etc).
    Para adicionarmos os subnavs ao mega menu, precisamos informá-los dentro de uma <div> como uma nova lista não ordenada <ul><li>:

     

     

    Então, vamos adicionar alguns estilos básicos para este conteúdo. Vamos definir a largura de cada coluna a 20%, o pading de 2,5% e float à esquerda. Para terminar, vamos adicionar alguns estilos de tipografia para o título e os links.

     

     

    RESULTADO FINAL

    Exemplo: http://jsfiddle.net/gcdesigner/MbEt6/4/embedded/result/

    mega menu dropdown 3

    FINALIZANDO

    É isso ai galera.
    Espero que tenham gostado.
    Não deixem de comentar, ok?

    Muito obrigado e até a próxima.

    Leia mais
  • HTML BÁSICO – PARTE 1 – INTRODUÇÃO

    Conhecendo o HTML

    Olá pessoal, boa tarde!
    Nessa aula iremos falar sobre a existência do HTML e sua estrutura.
    Espero que gostem!

    Conheça os outros artigos

    O QUE É HTML?

    HTML (abreviação para a expressão inglesa “HyperText Markup Language”, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
    Foi publicada pela primeira vez em 1993 pelo físico Britânico Tim Bernes-Lee e Dan Connolly, e desde então vem sendo estudada e aperfeiçoada.
    Atualmente o HTML5 é a mais nova versão do HTML que está sendo estudada desde 2008.

    É SÓ PARA SITES?

    Não! O HTML é utilizado também para desenvolver sistemas web e é a linguagem mais utilizada para desenvolvimento qualquer tipo de aplicativo web, sendo para dispositivos mobile (Tablets, Smartphones) como para desktop.
    Tudo que enxergamos na internet possui HTML, seja a visualização de uma imagem como a de um vídeo.

    PRECISO REALMENTE APRENDER?

    Se a sua escolha, ao ler esse artigo, é tentar compreender a grandeza dessa linguagem para realizar qualquer tipo de implementação web, então sua resposta é SIM!
    Existem diversos aplicativos na internet que te auxiliam a desenvolver um website sem a menor necessidade de tocar no código, mas vai chegar um momento, durante o desenvolvimento, em que esse trabalho vai fazer a diferença e vai evitar grandes dores de cabeça, pois por mais que esses aplicativos possuam uma ótima programação, nada é perfeito quanto a mente humana e o trabalho braçal.

    COMO COMEÇAR A APRENDER

    O HTML é uma linguagem de programação que não exige nenhum conhecimento em raciocínio lógico, portanto é de simples compreensão e exige apenas que você tenha uma boa memória, dedicação e conheça a tecnologia e suas aplicações.
    Para desenvolver em HTML não é necessário a utilização de qualquer aplicativo pesado, bastando apenas que tenhamos um computador e o “bloco de notas” instalado.
    Portanto, para iniciar o aprendizado do HTML, vamos, inicialmente, abrir o “bloco de notas” do nosso computador e começar a digitar o código abaixo:

    ESTRUTURA BÁSICA

     

     

    ANALISANDO

    LinhaCódigoExplicação
    1 <!DOCTYPE html> Doctype do documento
    2 <html> Abertura da tag html
    3 <title>Título do site</title> Tag para inserção do título do site
    4 </head> Fechamento da tag head
    5 <body> Abertura da tag body
    6 <!– … –> Comentário
    7 </p>Texto<p> Parágrafo
    8 </body> Fechamento da tag body
    9 </html> Fechamento da tag html

    Vocês perceberam que a maioria do código HTML é feito através de abertura e fechamento de *tags?

    *Tags são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página.

    TAGS

    O HTML possui dezenas de tags como essas que vocês observaram. Existe uma tag para cada tipo de situação, mas para começar, vamos analisar as que foram digitadas no código acima.

    DOCTYPE!

    O Doctype é utilizado para informar ao navegador qual o tipo de documento que você está utilizando.
    Como vocês já devem saber, existem algumas versões do HTML e algumas ramificações, como é o caso do XML, portanto precisamos identificar o código para que o navegador saiba o que realmente está escrito no documento e possa interpreta-lo da forma correta.
    O DOCTYPE que utilizamos no modelo de código acima, é utilizado para o HTML5, existem outras versões desse código:

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

    DoctypeVersão
    <!DOCTYPE html> HTML5
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> HTML 4.01 Frameset

    Cada tipo de Doctype possui uma característica, mas atualmente com a ultima versão do HTML, o HTML5, utilizamos somente o modelo mais simples, o que ajudou muitos programadores.

    <HTML>, <HEAD> E <TITLE>

    <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
    <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
    <title>: define o título da página, que é exibido na barra de título dos navegadores

    <BODY>, COMENTÁRIOS E <P>

    <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.
    <!– –>: os comentários são utilizados para deixar o código compreensível. Eles não aparecem na tela, somente nó código fonte.
    <p>: definição de parágrafo de texto.

    TESTANDO O CÓDIGO

    Para podermos testar o código é necessário que salvemos o documento com a extensão “.html”.
    Geralmente utilizamos a nomenclatura “index.html” para dizer aos navegadores que aquele documento pertence a página principal do site, portanto, salve o documento como: index.html.
    Após salvar, clique duas vezes sobre o ícone do documento e espere ele abrir em seu browser principal.

    Caso você tenha feito tudo certo, deverá aparecer o texto “Início do conteúdo” no topo da página.

    FINALIZANDO

    Essa primeira aula é somente uma introdução bem básica sobre o que é HTML.
    Nas próximas aulas nós começaremos a ver códigos mais complexos e iremos estudar diversas novas Tags que o html nos proporciona.

    Espero que vocês tenham gostado. Em caso de dúvidas não deixem de perguntar e caso tenham gostado da aula deixem seus comentários para ajudar a TWD a continuar com o trabalho de transmitir conhecimento.

    Muito obrigado e até a próxima.

    BIBLIOGRAFIA

    http://pt.wikipedia.org/wiki/HTML
    http://www.w3schools.com/tags/tag_doctype.asp

    Leia mais
  • HTML BÁSICO – PARTE 5 – FORMULÁRIO

    HTML Básico – Parte 5 – Formulário

    Introdução a Formulário em HTML

    Olá pessoal, bom dia!
    Hoje iremos falar sobre formulários em HTML, a necessidade, variações de elementos e definições da estrutura.
    Espero que gostem!

    Conheça os outros artigos

    FORMULÁRIO

    Os formulários são utilizados para entrada de dados e são uma das formas de maior interação entre o usuário e o web site.
    Caso o usuário queira entrar em contato pelo próprio site, por exemplo, nós temos o formulário de contato para que ele digite suas dúvidas e nos envie para que possamos responder e interagir com ele.
    Muito importantes no meio web.

    CONSTRUÇÃO

    O formulário é definido pela tag <form>. Essa tag indica o começo de um formulário e tudo que estiver dentro dela será compreendido como elementos de formulário.

     

     

    LABEL

    <label> é o título, rótulo do campo. Com ele sinalizamos ao usuário o que gostaríamos que ele informasse no campo.

    Sua sintaxe é muito simples:

     

     

     

     

    INPUT

    Como eu disse anteriormente, o formulário é utilizado para inserção de dados, portanto precisamos de campos (inputs) para que o usuário possa digitar tais informações.

    Os campos mais utilizados são os famosos (inputs) que são definidos pela tag <input>. Com eles podemos construir campos de texto, campos para seleção e até mesmo botões de ação.

    Para definirmos qual o tipo do campo que queremos, precisamos informar o atributo (type). Com esse atributo do input nós dizemos ao HTML qual o tipo de campo vai ser construído.

    Os tipos de <input> mais utilizados são:

    Tipos de input

    TipoFinalidadeExemplo
    text Inserção de texto
    checkbox Caixa de seleção. Muito utilizado para que o usuário possa selecionar mais de uma opção    
    radio Campo radial de opção. Muito utilizado para restringir o usuário a somente uma seleção de opção.    
    password Campo para inserção de senhas. Idêntico ao “text”, mas os dados informados são apresentados são omitidos por uma série de asterísticos (*).
    email Campo para inserção de email.
    submit Cria um botão que é utilizado para enviar as informações do formulário. Necessita do atributo “value” para definir o nome do botão.
    button Cria um simples botão. Necessita do atributo “value” para definir o nome do botão.
    reset Cria um botão, que ao ser clicado, elimina todos os dados informados nos campos do formulário. Necessita do atributo “value” para definir o nome do botão.
    file Cria campo para seleção de arquivos.

    Além dos (inputs) nós temos outros elementos de formulário para seleção e inserção de texto.

    ESTÁ GOSTANDO DESTE ARTIGO?

    Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

     

    TEXTAREA

    O textarea é utilizado para a inserção de uma grande quantidade de texto.
    Muito utilizado para inserção de comentários e especificações de produto.

    Obs: observe que este elemento necessidade da tag inicial e do fechamento, diferente da tag input, que somente necessita da tag de abertura.

     

    Este elemento possui alguns atributos importantes: ‘rows=””‘ e ‘cols=””‘.

    rows: Defini a quantidade de linhas que o textarea terá como default;
    cols: Defini a quantidade de colunas que o textarea terá como default;

    Se aplicarmos ao textarea os atributos acima com os valores “cols=’100′ e rows=’5′”, nós teremos o seguinte resultado.

     

    SELECT

    O select é um menu suspenso que permite a seleção de um ou mais itens.
    Muito utilizado para seleção de localidade, quantidade e etc.

    Este elemento possui alguns atributos importantes: multiple e size.

    multiple: Defini que o campo será de seleção múltipla;
    size: Defini quantos itens serão apresentados inicialmente. Por default o campo já vem com 4 itens a amostra;

    Aplicando os atributos acima, temos:

    CONSTRUINDO O FORMULÁRIO

    Agora que vocês já aprenderam sobre alguns elemento de formulário em HTML, vamos construir nosso primeiro formulário.





     Aceita receber nossas novidades

    FINALIZANDO

    Esse tutorial foi uma introdução sobre formulários em HTML. Existem outras tags e formas de se construir formulários.

    Na próxima aula irei apresentar mais informações. Esse tema é bastante delicado e precisamos estudar mais aprofundadamente.

    Qualquer dúvida estou a disposição para responder.

    Se gostram do tutorial, não deixem de comentar. ok?!

    Muito obrigado e até a próxima

    Leia mais