Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com
Mostrando postagens com marcador Conceitos Básicos de HTML. Mostrar todas as postagens
Mostrando postagens com marcador Conceitos Básicos de HTML. Mostrar todas as postagens

Vídeo aula - Criando o primeiro site, o "Olá Mundo" em HTML

Confira, através desta vídeo aula, como criar seu primeiro site em HTML, o "Hello, World!" ou "Olá, Mundo!", além de aprender as noções básicas sobre as tags mais importantes para a criação de um site.
Ler Tutorial

bgcolor - Como mudar a cor de fundo de um site - A tabela de cores

No tutorial passado de HTML, explicamos o que é, para que serve e como usar a tag <body>, usada para trabalhar com elementos que serão exibidos para o usuário.

Como fizemos, e vamos continuar fazemos, durante todo nosso curso online grátis de HTML, vamos dar exemplos práticos de código, afinal, só ler teoria não é muito legal.
Para aprender, temos que realmente por a mão na massa, escrever códigos HTML e criar sites.

Neste tutorial, vamos ensinar como mudar a cor de fundo de um site, e falaremos mais da relação das cores com o HTML.

Curso de HTML online e grátis, com certificado. Como ser um webmaster
Ler Tutorial

Vídeo aula - Introdução ao estudo do HTML, XHTML e criação de sites

Nesta vídeo-aula introdutória, será ensinado os conceitos básicos da linguagem HTML, XHTML e da criação de páginas para sites.

Esta aula foi feita pela Universidade XTI, e está disponibilizado gratuitamente no Youtube, para qualquer um estudar.
Ler Tutorial

< body > tag - O que é, para que serve e como usar a < body >

Tutorial de HTML
Webmasters entenderão
Para finalizar os estudos básicos de nosso curso de HTML, vamos apresentar a tag <body>, que junto com a tag <html> e a <head> formam a tríade de tags mais importantes e essenciais de qualquer site feito em HTML.

Ao final deste tutorial de HTML, você fará um site completo, embora simples, pois já irá dominar as principais estruturas básicas de qualquer página na Internet.

Como irá entender como um site é feito, como funciona e já terá criado um 'na unha', já poderá se considerar um Webmaster :)


Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

Curso de Webmaster (criação de sites HTML) online com certificado
Ler Tutorial

Como criar um Link em HTML: A tag < a >

Embora seja simples e bem básica, essa aula sobre links é provavelmente a mais importante em nosso curso de HTML, pois toda a internet se baseia no conceito de links, de tão importantes e essenciais ao HTML que eles são.

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

Curso de Webmaster (criação de sites HTML) online com certificado


O que é um link em linguagem HTML

Link, em inglês, significa ligação, elo ou conexão.

E é isso que os links fazem em HTML, eles conectam uma página da internet até outra, eles levam o usuário de um local a outro.

Um link pode ser um uma página HTML, uma imagem, um e-mail, um endereço de FTP etc.

Os links são, portanto, um endereço, uma referência de um 'local' para outro.

Para que serve um link

Com certeza já entrou em algum site de notícia, deu uma olhada e clicou naquilo que mais te interessa.
Esse local onde você clicou é um link, que pode estar em forma de texto (geralmente sublinhado) ou uma imagem.
Quando posicionamos o mouse em cima de link, a seta do mouse geralmente vira uma 'mãozinha', o que sinaliza ao usuário leigo que aquilo é um link.

Você usa um link quando procura algo no google, e clica no resultado desejado.
Quando abre seu e-mail, e clica em "Caixa de Entrada", está usando um link.
Também quando clica em 'curtir' no Facebook, está usando um link também.
Enfim, poderíamos criar um site somente para falar sobre o uso e importância dos links, mas com certeza você já deve ter certeza disso.

Portanto, durante todo nosso curso de HTML, vamos falar dos links, tags que envolvem links, atributos e várias outras coisas que envolvem links.

A tag âncora <a> </a> - Como criar um link em HTML

Sim, para criar um link vamos usar mais uma tag, chamada anchor tag: <a>
Porém, você não verá seu uso sozinha, sem atributos.

Como dissemos previamente, o uso dos links são inúmeros, bem como a quantidade de atributos dessa tag.
Por hora, nesse artigo de HTML, vamos aprender a maneira mais simples e usar de criar um link, com o atributo href.
A sintaxe é:

<a href="URL do site"> Texto visível </a>

Ou seja, se você estudou os outros tutoriais de nosso curso, não verá nenhum problema sobre o uso dessa tag.
Vamos criar o código de um link para o HTML Progressivo, o código seria:
<a href="http://www.htmlprogressivo.net/"> HTML Progressivo </a>

E o que veríamos, na prática, seria: HTML Progressivo

É bem comum o seguinte código HTML para um link:
<a href="http://www.htmlprogressivo.net/"> clique aqui </a>

O resultado seria:
E isso é bem comum em textos do tipo: "Se quiser acessar um curso de HTML gratuito e online, clique aqui."
Ou seja, não importa o que você escreve entre as tags <a> </a>, é apenas a parte visível ao usuário.





Exemplo de código HTML:
Vamos criar um site baseado nos conhecimentos ensinados até o momento, em nossa apostila online de HTML.
Nessa página, vamos descrever nosso curso de HTML, com vários links, vamos usar as meta tags keyword e description, <html>, <body>, título e, claro, as tags âncora de lin <a>:
<!DOCTYPE html>
 
<html>
 <head>
      <meta name="description" content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito">
      <meta name="keywords" content="HTML, CSS, SEO, Monetização, Curso, Apostila, Online, Grátis">
      <title> HTML Progressivo - Curso de HTML completo, online e gratuito </title>
 </head>
 
 <body> 
Conheça o site <a href="http://www.htmlprogressivo.net/">HTML Progressivo</a>, um site que oferece um curso de HTML totalmente gratuito e online. <p>
 
No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre <a href="http://www.htmlprogressivo.net/p/seo-trabalhando-com-o-google.html">SEO</a> e <a href="http://www.htmlprogressivo.net/p/monetizacao-de-sites_12.html">Monetização</a>.
 </body>
</html>
Salvem o arquivo com a extensão .html e cliquem no arquivo, para ver os sites que criou.
O resultado visto será o seguinte:
Conheça o site HTML Progressivo, um site que oferece um curso de HTML totalmente gratuito e online.

No site HTML Progressivo, você não aprende somente a criar sites, mas também sobre SEO e Monetização.


Exercício sobre links em HTML:
Crie uma página completa, com as tags <html>, <head> e <body>, bem como as meta tags description e keywords, título e com 3 links.
No texto de seu site, descreve estes 3 links, e use-os como foi mostrado no exemplo passado.
Use a tag <br> para pular de linha, ou <p> para pular para o próximo parágrafo.
Ler Tutorial

< meta > tag refresh - Como redirecionar ou recarregar um site em HTML

Conforme vamos avançando em nosso curso de HTML, vamos ensinando algumas coisas bacanas e úteis, para que vocês possam aprender não só de maneira teórica (somente lendo), pois é chato e cansativo. Vamos mostrando, aos poucos, como fazer alguns efeitos e sites interessantes, como o efeito marquee, que mostra um texto deslizando em um site.

Nesse simples e curto tutorial, vamos ensinar como redirecionar uma página para outra, somente para você ver como criar sites é algo simples e bacana de se fazer.
Para isso, vamos usar nossos conhecimentos sobre as <meta> tags.
Ler Tutorial

Tags aninhadas e indentação de código HTML

A medida que formos estudando mais e mais tags em nossa apostila online de HTML, você irá notar que nosso código vai ficando cada vez maior e mais complexo, e será necessário ter organização, e isso é conseguido através das tags aninhadas e indentação de código.

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

Curso de Webmaster (criação de sites HTML) online com certificado
Ler Tutorial

Efeito em HTML, < marquee >: Fazendo um texto rolar na tela

Como o curso HTML Progressivo visa ensinar tudo sobre HTML, vamos sempre, ao longo de nossa apostila online de HTML, mostrar alguns efeitos e truques bacanas do HTML, que saem um pouco do escopo sério e teórico do aprendizado de HTML.

Nesse simples tutorial, vamos mostrar como fazer o seguinte efeito:
Texto rolando na tela


Ler Tutorial

A tag < HTML > - O que é, para que serve, como e quando usar

Agora que você já aprendeu no tutorial de HTML passado, oque são tags, vamos começar a apresentar as mais importantes.

Vamos começar pelo elemento <HTML>

Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):

Curso de Webmaster (criação de sites HTML) online com certificado
Ler Tutorial

O que são tags em HTML - < > e < / >

Nesse tutorial de HTML de nosso curso, vamos ensinar o principal conceito das linguagens de marcação (dentre elas, o HTML, para criação de sites): as tags.

Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):
 
Estudar pela Apostila HTML Progressivo

Ler Tutorial

Tutoriais de HTML e CSS