A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

por **Nietore** Qui Dez 01, 2011 5:52 pm

A Junção do Desenvolvimento - Nível: Iniciante

Aqui se inicia aulas cujo eu Nietore julgo importantes! Sei que existe milhões e milhões de sites ensinando a fazer um site, a maioria é tudo a mesma coisa, eu venho ensinar as maneiras mais usadas e fáceis de trabalhar!

Nos exemplos que irei mostrar ao longo das aulas, são layouts simples pôs vai servir apenas como demonstração de tal TAG ou Código.

Vamos ver em todas as aulas assuntos relacionados há: HTML, CSS, PHP, MYSQL.
Os assuntos serão mostrados nessa mesma ordem, começando por HTML, integrando o CSS, Criando os comandos pro HTML e CSS em Conjunto, por ultimo vamos conhecer o básico do MYSQL para poder trabalharmos com Banco de Dados!

Como todo site começa com a Introdução de tal linguagem, eu farei diferente não vou contar como que foi criada a linguagem e nem o porquê, quero ter mais espaços para mostrar muitos conteúdos por tópico!
Antes de começarmos quero que conheça um pouco sobre o que faço:

Me chamo Carlos Henrique, tenho 19 anos, trabalho com desenvolvimento de sites desde 2008, tenho certificados de cursos profissionalizantes como HTML + CSS , PHP + MYSQL, atualmente estudo Orientação de Objetos(PHP 5), Administração de Empresa e Economia , tenho como propósito em 2012 entrar na faculdade de analise de sistemas, trabalhei 1 ano como auxiliar de web designer, dou aulas particulares a jovens que não tem nenhum conhecimento no assunto, mas que tem grande vontade de aprender, não possuo nenhum Portfólio pôs faço sistemas e isso poucas pessoas entendem o grau de dificuldade da criação.

Capitulo 1:
Módulo HTML 1: Regras básicas de sintaxe:

Basicamente, a sintaxe do HTML inclui as etiquetas - 'Tags' - que são os comandos da linguagem, e os 'elementos', que são os itens a posicionar no documento. As etiquetas antecedem e precedem os elementos:

< tag > inicio do elemento
</tag > fim do elemento

Exemplo:

<b> Está tag será em negrito e todo o conteúdo que estiver fora desta tag não será alterada. </b>
O resultado será:

Está tag será em negrito e todo o conteúdo que estiver fora desta tag não será alterada.

Para fechar um tag é bem simples, utilize uma “/” barra antes da palavra chave da tag.

Exemplos:

<h1> Conteúdo </h1>
<p> Conteúdo </p>

Lembre-se que essa regra não se aplica em alguns casos cujo a tag é apenas um comando sem fechamento.

Exemplos:

<br> (Essa tag é usada para quebra de linha sem fazer parágrafo.)
<hr> (Cria uma régua horizontal de separação)

Algumas 'tags' podem ter atributos. Os atributos obedecem às seguintes regras:
São colocados no 'tag' de início;
Podem ser opcionais ou obrigatórios;
Vão afetar o elemento que se segue a esse 'tag';
São afetos de valores, cuja natureza, depende do 'tag'.

Exemplo:

<IMG SRC="Nietore.jpg" ALT="Banner">

O atributo 'SRC' é obrigatório na Etiqueta <IMG> mas o atributo ALT é opcional.
Se o navegador não mostrar gráficos aparecerá: 'Banner'. Caso contrário mostra a imagem. Note que os valores dos atributos escrevem-se sempre entre aspas.
Vamos comparar o HTML com o corpo Humano:

Cabeça
Rosto
Corpo
Barriga
Pernas

As tags que representa as partes citadas do ser Humano são:

<html>
<head>
<body>

Claro que dentro dessas tags virão outras tags que deixa claro por completo a comparação com o corpo Humano.

Módulo HTML 2: Organização e Tags:

A estrutura de uma página em HTML tem que ser feita obedecendo sempre a mesma ordem.
É importante e de grande facilidade o modo que você organiza seus códigos! Eu mesmo tenho mania de organização na maioria das vezes. Ou seja, quando eu digo organização eu to me referindo a posições dos códigos.

Exemplo:

<html>
<head>
<body>
</body>
</head>
</html>

Tenho certeza que se você montar uma estrutura dessa forma, tanto você quanto as outras pessoas quando for alterar alguma coisa não terá tanta dificuldade para encontrar o que ela quer modificar nas páginas!

As Tags mais usadas no HTML são:

<center> Serve para centralizar objetos.
<div> As divisórias são praticamente a estrutura e colocação das partes na pagina. (Iremos ver em aulas futuras)
<img src=”Imagen.jpg”> A tag “img” não pode ser escrita sem sua sintaxe ‘src’.
<a href="URL"> Cria um link para o texto ou objeto.
<table> Muito usado nos primeiros anos do nascimento do HTML e até hoje é praticamente essencial! (Iremos ver em aulas futuras)
<span> Praticamente a mesma função da tag <div>.
<font> Tag usada para a manipulação de textos (Iremos ver em aulas futuras)


Essas tags não sem nem 1% de todas as tags importantes que existe no HTML, mas essas serão as que mais usarei aqui nas aulas!

Módulo HTML 3: Estrutura HTML:

Vamos agora montar a estrutura correta do HTML:

<html>
<head>
<title> Titulo da Pagina </title>
</head>
<body>
Conteudo aqui!
</body>
</html>

Esta é uma estrutura de uma página em HTML, desse modo já temos uma pagina completa pronta para receber os comandos e códigos!

Módulo HTML 4: Trabalhando Imagens, Links e Cores:

Se você quer mudar a cor do fundo de uma página! Basta usar a sintaxe (bgcolor=”#FFF”) dentro da tag <body> do HTML.

Exemplo:

Se você quer uma cor azul para seu fundo da página use:

<body bgcolor=”#0000FF” >

Se você quer usar uma imagem como fundo da página use a sintaxe (background=”URL da Imagen”) dentro da tag <body> do HTML.

<body background=”Fundo.jpg” >

Lembrando que as cores podem ser em Hexadecimais ou em forma de escrita do nome da cor em inglês.

Exemplo:

<body bgcolor=”#FF0000” > (Essa cor é vermelha e está na forma hexadecimal)
<body bgcolor=”red” > (Essa cor também é vermelha e está na forma escrita)

Cores também são aplicadas em textos e bordas.

Exemplo:

<font color=”#00FF00” > Esse texto é da cor verde </font>

Para adicionar uma imagem vimos acima que devemos usar a tag <img> acompanhada com o “src” , mas e se você quiser colocar um link nessa imagem! Veja abaixo:

Exemplo:

<a href=” exemplo.com” > <img src=”Clicar.gif” > </a>

Desse modo temos uma imagem com link, mas, se você fizer só isso a imagem irá ficar com uma borda desagradável , é por isso que usamos a sintaxe “border” para resolver o problema!

Exemplo:

<a href=” exemplo.com” > <img src=”Clicar.gif” border=”0” > </a>

Agora vamos ver quais os tipos de links mais usados.

O mais usado de todos é o <a href> ele PE uma forma simples para linkar um texto ou um objeto.

<link href> É usado para fazer uma referencia como, por exemplo, o arquivo CSS, lembrando que a sintaxe “link href” é diferente da sintaxe “a href”, pôs a “link href” não precisa fechar a tag como a “ a href (</a>) ”.
Para fazer um link de contato use a sintaxe ”MAILTO”.

Exemplo:

<a href=”MAILTO:carloshenrique-rox@hotmail.com”> Contato </a>

Módulo HTML 5: Manipulando Tabelas:

As tabelas são muito usadas em conjunto com o PHP, como por exemplo nos campos de formulários de cadastro e login.

Vamos estudar um pouco sobre tabelas e suas respectivas tags.
Para começarmos usamos a tag de abertura <table> seguido de suas “tags filhas”.

Exemplo:

<table>
<tr> </tr>
<td></td>
<th></th>
</table>

<tr> Funciona como uma quebra de linha da tabela.
<th> É usado para criar tabelas onde as posições serão listadas com a descrição na vertical
<td> Serão os quadros usados para guardar e mostrar as informações.

Exemplos:

<table>
<tr>
<th> Nome </th>
<th> Idade </th>
<th> Profissão </th>
<th> Nacionalidade </th>
</tr>

<tr>
<td> Carlos </td>
<td> 19 Anos </td>
<td> Web Master </td>
<td> Brasileiro </td>
</tr>
</table>

Explicando o código acima:

Eu fiz uma linha usando a tag <tr> , depois eu criei 4 campos usando a tag <th> que será a legenda de cada descrição da tabela, e criei 4 campos usando a tag <td> correspondentes as legendas.
O resultado será esse:

Você pode personalizar sua tabela usando imagens, cores, bordas com as sintaxes de exemplo:

Código:: width: (Largura) height: (Altura) border: (Borda) style: (Estilos em CSS) align: (Alinhar o conteúdo da tabela) bgcolor: (Alterar a cor do fundo) background: (Usar uma imagem como fundo) bordercolor: (Alterar a cor da borda)

Claro que existe muitas outras!

Módulo HTML 6: Listando Textos e Objetos:

Vamos aprender a criar listas que servirá para a criação de Painéis, Menus e outras coisas.
Uma lista contem as seguintes tags:

<dd>
<ul>
<li> Texto 1 </li>
<li> Texto 2 </li>
<li> Texto 3 </li>
<li> Texto 4 </li>
</ul>
</dd>

Módulo HTML 7: Montando sua primeira página usando tabelas ao invés de divisórias:

Concluindo o aprendizado:

Spoiler:

Estou preparando a próxima aula: CSS

Obs. Não consegui fazer com que fica-se totalmente alinhados os códigos como eu queria aqui no tópico ;/ , espero que dê pra entender!

Dúvidas, poste um comentário!

por Nanzin Qui Dez 01, 2011 6:20 pm

Bem legal Nietore, começou do 0 mesmo XD, legal saber mias sobre voce, apesar de ja sacar HTML, fico interessado em pegar php e tbm PHP OO! e muito interessante essas programaçoes (PHP 5 nao utiliza FEED de Noticias Automatico?)

bom espero por mais aulas suas! abraços

por Juton Qui Dez 01, 2011 7:03 pm

Muito Legal! Vai ajudar bastante, qualquer dias desses passo ai pra ter umas aulas +1 Cred!
esperado proximas aulas!

por Jonny Qui Dez 08, 2011 7:03 pm

bom, e como RGSS XD estare estudiando sus aulas Successful

!

por tenchumaster Sáb Dez 10, 2011 11:25 am

Legal Nietore apesar que eu ja tiro issso de letra de vez enquando quando esuqeçe tem lugar legal pra dar uma relidada. Nietore qual a diferença entre php e html? eu ja vi 10 video aulas de html php 1 e nunca mais quis ver mas acho bem legal tbm php!

por Juton Sáb Dez 10, 2011 12:23 pm

HTML é uma linguagem padrão, uma linguagem de marcação, ja o PHP ele é interpretado no servidor, onde transformar em HTML, com o PHP pode-se criar sites dinâmicos, interagir com banco de dados, e com outras linguagens!

por **Paulo Soreto** Seg Dez 12, 2011 2:50 pm

Muito bom o tutorial cara, só tive tempo pra ler hoje.
+1 Cred

por **Nietore** Seg Dez 12, 2011 3:06 pm

tenchumaster escreveu:Legal Nietore apesar que eu ja tiro issso de letra de vez enquando quando esuqeçe tem lugar legal pra dar uma relidada. Nietore qual a diferença entre php e html? eu ja vi 10 video aulas de html php 1 e nunca mais quis ver mas acho bem legal tbm php!

Praticamente HTML é o visual do Site, PHP vai determinar as funções que o site vai exercer!

por BrunoFox Seg Dez 12, 2011 4:02 pm

Legal nietore bem explicado e tals Successful

so li metade (eu nao tenho paciencia pra tutoriais porisso faço tudo errado kk) +1 rep ae o/ mt massa

por Conteúdo patrocinado

Hitskin.com

A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML

Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML