Pular para o conteúdo principal

Postagens

Estilos Inline no HTML (Não faça isso!)

 Estilos Inline São Rápidos, Mas Perigosos A forma mais rápida de aplicar estilos em elementos é inserindo-os na própria tag html do elemento, através do atributo  style="". Todas propriedades e valores inseridos entre as aspas do atributo style serão aplicados ao elemento que o contiver, porém, não faça isso! Na presente postagem explicaremos melhor o que você deve preferir na hora de estilizar seu código. Por que não devemos usar estilos direto nos elementos (inline) html? Primeiro porque não é considerada uma boa prática misturar código html e css no mesmo local, o que causa desorganização e problemas para pesquisar e corrigir erros. O outro bom motivo para não utilizar estilos inline é que em pequenos projetos como os exemplos html que usamos, onde há poucas linhas de códigos e poucos elementos, você não terá problema em usá-los, porém conforme o código for crescendo e com isso a complexidade dele, você não achará uma boa ideia usar estilos inline. Aqui vai um exemplo: se...
Postagens recentes

Introdução a formulários HTML

 Criando um formulário de contato simples O que iremos fazer hoje Formulários permitem ao usuário de um site ou aplicativo inserirem e enviarem informações para o site ou programa. Em html temos a tag <form></form> que nos permite criar um formulário em nossos documentos. hoje teremos uma visão bem superficial do assunto, já que a intenção é introduzir a funcionalidade de forma simplificada e não entrar nos detalhes de implementação e estilo neste primeiro momento. Fazendo a nossa marcação básica Abra o bloco de notas e insira a nossa tão conhecida estrutura básica html:  <!DOCTYPE html> <html lang="pt-br">   <head>     <title>Formulário de Contato</title>     <meta charset="utf-8">   </head>   <body>       </body> </html> Insira um cabeçalho de nível 1 (<h1>) dentro do body com o seguinte texto: Formulário de Contato Salve o documento com o nome...

Comentando Código em HTML

 Comentários em HTML Imagine que você começou um projeto e no final do dia decide parar e continuar depois. Nessa situação é muito fácil e até comum que o programador se perca ou se esqueça de onde parou de programar. O uso de  comentários pode te ajudar muito. Para comentar em html basta  usar os caracteres <!--   e   -->   ao redor do comentário a ser criado. Comentários são completamente ignorados pelo navegador. Por que usar comentários? Comentários podem ser utilizados por três motivos principais: Explicar parte do código ou funcionalidade Servir como marcação para que o programador se lembre de onde parou Para fazer testes no código e corrigir defeitos no código Em algumas linguagens os comentários também são utilizados para criar a documentação de um projeto. Focaremos nas três utilidades listadas acima.  Comentários de Explicação do Código Quando desejamos explicar ou destacar uma parte do nosso código, podemos usar um comentário par...

Praticando HTML: Receita de Panqueca de Banana

Praticando HTML: Receita de Panqueca de Banana Este é o nosso primeiro projeto praticando alguns conceitos introdutórios de HTML. O que faremos? Vamos marcar uma receita de panqueca de banana e a exibiremos no navegador. A receita é bem simples: Panqueca de Banana (rende 1 porção) Tempo de preparo: 5 min. Ingredientes: 2 bananas 2 ovos 2 colheres de sopa de aveia óleo ou manteiga para untar a frigideira Modo de Preparo: 1 comece amassando as bananas e reserve 2 em uma vasilha junte os ovos, as bananas amassadas e a aveia 3 misture bem até que vire uma mistura homogênea 4 pingue um pouco de óleo na frigideira e deixe-a aquecer 5 despeje a massa na frigideira  6 deixe a panqueca dourar um lado e depois vire-a para que doure o outro 7 após estar devidamente cozida e dourada sirva o nosso projeto ficará assim: Visualização do projeto finalizado Criando um novo documento html para marcar a receita Em seu computador abra o editor de texto simples (wordpad, bloco de notas, notepad++...) e...

Introdução a CSS (Cascading Style Sheets)

O que é CSS  Aprendemos que HTML é a linguagem que estrutura os documentos web, pode ser considerado a espinha dorsal dos documentos web. Da mesma forma, que o html é considerado a espinha dorsal ou estrutura básica dos sites,  CSS (Cascading Style Sheets "Folhas de Estilo em Cascata") é a linguagem responsável por estilizar, colorir e organizar o leiaute da visualização do documento web.  Podemos utilizar uma analogia com o corpo humano para entendermos melhor o papel das CSS em uma página web: Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele...  essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões  de fundo, ed...

Introdução à estilização em HTML

A sua página não precisa ser em preto e branco, nem conter somente texto Na postagem de hoje teremos uma visão geral de como deixar o seu conteúdo mais atraente e destacar o que você deseja transmitir através do estilo da sua página. Estilo se refere a como o conteúdo é apresentado visualmente na tela e envolve tipos de fontes, cor, cor de fundo, tamanho de fontes e elementos, bordas, sublinhados, contraste, posicionamento e muito mais. Exemplo de estilização de elementos em html O argumento style A primeira forma de estilizar elementos no html que veremos é através do atributo style, que deve ser colocado dentro da tag de abertura do elemento que deverá ser estilizado. Depois do argumento devemos inserir sem espaço, um sinal de igual e abrir e fechar aspas duplas "", entre as aspas duplas podemos digitar qualquer característica ou atributo que queremos estilizar em nosso elemento; Veremos algumas características ou atributos que podemos alterar em nossos elementos: cor cor d...

Como aprender HTML se você não possui computador?

Aprendendo html pelo seu smartphone Se você não possui computador, ainda assim é possível aprender html, através do seu smartphone. Tudo que você precisará é de um navegador de internet e acessar algum site que forneça ferramentas de edição e exibição web (html, css e javascript). Visual do site Codepen (editor online de código) Algumas opções gratuitas desses sites são:  Playground | MDN (mozilla.org)  (pode não funcionar em celulares ou navegadores mais antigos) https://codepen.io/  (funciona bem em diversos aparelhos e navegadores) JSFiddle - Code Playground  (pode não funcionar bem em aparelhos antigos e de tela pequena) Glitch: The friendly community where everyone builds the web  (funciona bem, mas pode ser um pouco confuso de entender a interface no início) Embora sejam todas opções gratuitas, algumas, poderão oferecer melhorias ou recursos extras que são pagos, o que não inviabiliza a utilização básica para a finalidade de aprendizado. Uma má notícia par...