Criando um Site #5 - Fomatação

*Outros Capítulos Aqui!
Saudações para nossa 5ª aula. Vamos aprender agora sobre a formatação. Negrito, Itálico, e Sublinhado.
Estas também são muito simples e não possuem atributos.

<b>Texto</b> , <i>Texto</i> , <u>Texto</u>

Dica para gravar:
<b> significa bold(negrito, em ingles)
<i> signigica italic(itálico, em ingles)
<u> significa underline(linha inferior, em ingles).

Agora para fixar, faça no seu editor um texto utilizando esses três tipos de texto.

Próxima aula, vamos aprender imagens!!

Criando um Site #4 - Links

Saudações!! Quarta aula de HTML, e agora vamos começar a aprender algo mais interessante: Links!
A inserção de links é mais complicada que tudo que vimos até agora, devido à necessidade de atributos das tags.
A tag de inserção delinks é a tag <a> e um atributo dela.
Portanto, vou dividir ela agora: A parte em vermelho não é literal, ou seja, será alterada.
<a href="link da página">Nome do Link (A pessoa vai clicar aqui) </a>
Pode ser inserido um outro atributo também muito útil, para informar ao navegador onde ele deve abrir a página em questão.
Este atributo é o target e os valores dele são diversos, mas vou expor apenas o para abrir em nova guia/aba:
<a href="http://www.fromcodemylife.blogspot.com" target="_blank">Acesse o From Code My Life. Ao clicar neste link, a página será aberta numa outra guia!</a>
Não esquecer a underline antes do nome.

title=""
O link também pode ganhar um título. Esse título será exibido quando o mouse "pousar" sobre o link:
LINK, pare o mouse aqui
Para definir o título, adicione mais um atributo: title
<a href="//www.fromcodemylife.blogspot.com" target="_blank" title="Título">Link com título</a>
Fácil.

Na próxima aula vamos aprender como colocar Negrito, Itálico, e Sublinhado.

Criando Um Site #3 - O Conteúdo

Saudações! Terceira aula de HTML. Vamos aprender agora como colocar parágrafos, e como inserir textos maiores por predefinição do HTML.

Inserir parágrafo, é muito fácil. Basta usar <p>.
Exemplo:

<p>Olá! Este é o primeiro parágrafo. Vamos ver o segundo:</p>
<p>Este é o segundo parágrafo. O Terceiro será muuuuuuuuuuuuuuito grande:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere velit eget libero cursus sodales. Praesent porta vel risus ut interdum. Morbi sit amet lorem cursus, elementum nibh non, varius tellus. Phasellus quis tellus orci. Nulla quis elit gravida, rhoncus neque eget, cursus purus. Suspendisse mattis dolor nec leo pulvinar placerat. Nunc accumsan ultrices est at semper. Vivamus at lobortis felis. Aliquam euismod sem nisi, a bibendum diam sodales ac. Phasellus rhoncus sollicitudin ligula, in convallis nulla ultricies ac. Praesent porttitor eros a lorem aliquet, ultricies eleifend neque dictum. Nullam et iaculis ante. Fusce non volutpat felis. Vivamus sed neque ornare, adipiscing massa ut, euismod ligula.
Vestibulum consectetur, magna non laoreet interdum, sem augue tincidunt erat, sit amet tempus lorem justo at mauris. Quisque id congue enim. Donec non laoreet nisl. Curabitur at dapibus justo, sed lacinia nulla. Praesent tristique dictum tempus. Etiam velit tortor, cursus vel malesuada in, iaculis nec elit. Duis sit amet fringilla nisl, non convallis enim. Quisque ac ullamcorper urna, quis volutpat enim. Ut venenatis ipsum justo, in fringilla orci scelerisque ut. Vivamus pulvinar orci ut dictum egestas. Nulla facilisi. Praesent eget mauris commodo, venenatis felis ac, porta tellus. In placerat erat non sapien semper, in.</p>

#Visualizar#

Os tres parágrafos foram bem definidos. Agora, vamos por um título na nossa página.
Os cabeçalhos são definidos com <h1> até <h6>. <h1> é o maior, enquanto <h6> é o menor. Vamos ver:
<h1> Cabeçalho H1.</h1>

<h2> Cabeçalho H2.</h2>
<h3> Cabeçalho H3.</h3>
<h4> Cabeçalho H4.</h4>
<h5> Cabeçalho H5.</h5>
<h6> Cabeçalho H6.</h6>

#Visualizar#

Pronto! Agora que você já viu os cabeçalhos, vamos ver mais uma tag, a tag de quebra de linha.
No primeiro exemplo, nossos três parágrafos funcionaram corretamente, mas no terceiro, eu queria que estivesse dividido em duas partes, mas sem o espaço que a parágrafo deixa. Para isso, uso <br />
<p> texto aqui <br /> Outra linha <br /> Outra Linha <br> Quebra de linha sem barra no final </p>
Teste no seu editor!

Até a próxima aula!!

Criando um Site #2 - Primeiros Passos

*Veja os outros capítulos aqui!
Vimos na aula passada o que é HTML e o que é necessário para criar um documento HTML. Na aula de hoje, vamos começar a criar um site.

A primeira coisa à se fazer em um html é declarar o tipo de documento.
Há muitas diferenças entre o HTML 4.01 e o HTML5. Vamos aprender o html5.

No HTML, qualquer marcação é feita entre tags. As tags, são comandos dentro de < e >.
exemplo:

<html>

A declaração necessária ao HTML5 é a seguinte:

<!DOCTYPE html>

Podemos ver: DOCTYPE como Tipo de Documento.

Agora que já declaramos o DOCTYPE, vamos à tag mais importante do html:

<html>

TODO o conteúdo html deve ficar envolto por essa tag.
Mas tudo com exceção dos meus sites tem início e fim. As tags também.
Para fechar uma tag, basta inserir / antes do nome da tag:

</html>

Então quando abrir uma tag, feche-a (existem excessões, como o !DOCTYPE).
Outra tag importante, é a head. Ela deve ser inserida dentro de <html>
E abaixo da tag </head>, insira <body>:

<!DOCTYPE html>

<html>
<head>

</head>
<body>

</body>
</html>

#Visualize no seu navegador!
Antes de finalizar esta aula, vamos ver mais uma tag html:
o <title>. TITLE define um título à página. Título, é o que aparece na guia do seu navegador e no título da janela. Note que sem definir um título, aparecerá o endereço do documento. O TITLE sempre fica na <head> :

<!DOCTYPE html>

<html>
<head>
    <title>Titulo da Pagina</title>
</head>
<body>

</body>
</html>

Até a próxima aula!!

Criando um Site #1 - Introdução ao HTML

*Veja os outros capítulos aqui!
Na criação de um site, a principal linguagem envolvida é o HTML.

HTML é a 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.
Os requisitos para começar a aprender HTML são:

• Um Editor de Texto (o Bloco de Notas serve, mas veja as recomendações no fim da página)
• Um Navegador (se você esta visualizando isso, deve ter um)

Depois que o documento estiver pronto, salve como index.html lembrando que: INDEX não é obrigatório, mas ele geralmente é a página inicial do servidor (índice). Salvar como .html é obrigatório, pois do contrário o navegador pensará ser um TXT.

Ótimo. Na próxima aula vamos começar a criar nosso html.

Editores

Bem, há muitos editores HTML na internet, e a melhor forma de descobrir o melhor é testando. Mesmo assim, eu recomendo esses:

• Notepad ++
• SublimeText