Portal
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:Módulo HTML 1: Regras básicas de sintaxe:
< 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:
Algumas 'tags' podem ter atributos. Os atributos obedecem às seguintes regras:<br> (Essa tag é usada para quebra de linha sem fazer parágrafo.)
<hr> (Cria uma régua horizontal de separação)
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)
<!-- Essa tag é essencial para fazer um comentário no HTML, todo o conteudo que estiver dentro desta tag será um comentário e o HTML não irá processar como um código -->
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:
Esta é uma estrutura de uma página em HTML, desse modo já temos uma pagina completa pronta para receber os comandos e códigos!<html>
<head>
<title> Titulo da Pagina </title>
</head>
<body>
Conteudo aqui!
</body>
</html>
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:
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 bgcolor=”#0000FF” >
Lembrando que as cores podem ser em Hexadecimais ou em forma de escrita do nome da cor em inglês.<body background=”Fundo.jpg” >
Exemplo:
Cores também são aplicadas em textos e bordas.<body bgcolor=”#FF0000” > (Essa cor é vermelha e está na forma hexadecimal)
<body bgcolor=”red” > (Essa cor também é vermelha e está na forma escrita)
Exemplo:
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:<font color=”#00FF00” > Esse texto é da cor verde </font>
Exemplo:
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!<a href=” exemplo.com” > <img src=”Clicar.gif” > </a>
Exemplo:
Agora vamos ver quais os tipos de links mais usados.<a href=” exemplo.com” > <img src=”Clicar.gif” border=”0” > </a>
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:
<tr> Funciona como uma quebra de linha da tabela.<table>
<tr> </tr>
<td></td>
<th></th>
</table>
<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:
Explicando o código acima:<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>
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)
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:
- Código:
<html>
<head>
<title> Titulo da Pagina </title>
</head>
<body background="http://i40.servimg.com/u/f40/15/80/98/11/ied7wo11.jpg">
<center>
<table width="80%" border="1">
<tr bgcolor="#CCCCFF" height="100px" align="center">
<td style="font-size:100px;"> Banner </td>
</tr>
<tr bgcolor="#D4BFFF" height="40px" align="center">
<td> INICIO | CONTATO | PARCEIROS </td>
</tr>
<tr bgcolor="#D49FFF" height="200px" align="center">
<td> Conteudo </td>
</tr>
<tr bgcolor="#AA7FFF" height="70px" align="center">
<td> Rodapé </td>
</tr>
</table>
</center>
</body>
</html>
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!
!
