Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
+3
Juton
Nanzin
Nietore
7 participantes
Página 1 de 1
A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
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!
_________________
Eu poderia ser a pessoa mais agradavel do mundo! mas optei por ser eu mesmo.
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
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
bom espero por mais aulas suas! abraços
_________________
Para Aqueles que gostam de Min e de meu Trabalho;
Upem Meu Pet nao custa nda!!
- Pet:
Nanzin- Membro de Honra
- Mensagens : 1550
Créditos : 252
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
Muito Legal! Vai ajudar bastante, qualquer dias desses passo ai pra ter umas aulas +1 Cred!
esperado proximas aulas!
esperado proximas aulas!
Juton- Experiente
- Mensagens : 486
Créditos : 129
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
bom, e como RGSS XD estare estudiando sus aulas !
_________________
- Spoiler:
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
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!
_________________
Barra de fan do meu joguinho use voce tambem
[code:1][URL=http://imageshack.us/photo/my-images/163/barradefan.jpg/][IMG]http://img163.imageshack.us/img163/2981/barradefan.jpg[/IMG][/URL]
[/code:1]
tenchumaster- Banido
- Mensagens : 577
Créditos : 76
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
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!
Juton- Experiente
- Mensagens : 486
Créditos : 129
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
Muito bom o tutorial cara, só tive tempo pra ler hoje.
+1 Cred
+1 Cred
_________________
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
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!
_________________
Eu poderia ser a pessoa mais agradavel do mundo! mas optei por ser eu mesmo.
Re: A Junção do Desenvolvimento - Nível: Iniciante - Capitulo 1: Módulo HTML
Legal nietore bem explicado e tals so li metade (eu nao tenho paciencia pra tutoriais porisso faço tudo errado kk) +1 rep ae o/ mt massa
_________________
Tópicos semelhantes
» Curso de HTML - Aula 2 – HTML X Linguagens Web Dinâmicas
» Curso de HTML - Aula 1 - Conhecendo o HTML
» [PEDIDO]Junção de Gráficos
» Modulo de Compatibilidade
» Modulo Input[NP1.7]
» Curso de HTML - Aula 1 - Conhecendo o HTML
» [PEDIDO]Junção de Gráficos
» Modulo de Compatibilidade
» Modulo Input[NP1.7]
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|