Aprender código HTML inicia-se com o aprendizado básico tags. Ao estudar os exemplos neste artigo, você deve saber o básico de todas as etiquetas HTML que você irá precisar de criar uma simples página web.
Primeiro de tudo, é importante saber que quase todos os tag tem uma abertura e um fechamento. Quando isso ocorre, estamos abertos com <tag>, e fechar com </ tag>. Algumas tags nãoabrir e fechar. Estes são simplesmente inseridos com <tag> e nunca fechou (embora na norma XHTML, iriam ser digitados <tag/>). Nos seguintes exemplos, etiquetas com barras em qualquer deles denotar de que devem ser abertos e fechado, ao passo que as tags com uma barra depois do conteúdo (<tag/>) só precisam ser inseridos e nunca fechou.
Nota: "<tag>" não é um verdadeiro tag.
Além disso, os atributos são pedaços de informação colocadas dentro de uma tag. Por exemplo, para usar a tag atributo cor, iríamos criar este: <Tag color="COLORINFO"> </ tag>, onde COLORINFO seria substituída com o valor apropriado e toda a tag seria fechada apenas com um simples </ tag> (não </ tag color = "COLORINFO">).
QUADRO TAGS - Estas marcas incluem o quadro de base para qualquer página da web.
- <html>Esta tag ocorre no início de qualquer página de HTML. Faz parte do quadro básico de qualquer página.
- Isso vem depois da tag <head> <html> e define a "cabeça" de seu documento, onde você vai colocar as informações que você não quer directamente na sua página web. Aqui você pode colocar informações como o título, metatags e CSS .
- <title>Essa tag indica o título. Pertence no <head> entre as tags. As palavras que você quiser na barra de título do navegador deve ser colocado entre as <title> e </ title> tags.
- <body>Esta etiqueta abre o corpo da sua página web, onde a maioria dos conteúdos que serão inseridos. Tem dois importantes atributos: "background" e "bgcolor." Um fundo valor deve ser o URL de uma imagem (para criar uma imagem de fundo) e uma bgcolor valores devem ser uma palavra ou de cor em formato hexadecimal (ex: "cinza", ou # FF55AA).
Todas as tags são as tags, neste momento, necessária para o quadro da sua página web (exceto título, mas é considerado normal). Isto é o que o quadro de qualquer código HTML deve ser semelhante a este:
<html>
<head>
<title> </ title>
</ head>
<body>
</ body>
</ html>
As palavras, imagens e tabelas que você quer na sua página web deverá situar-se entre as tags <body>. Mais tarde nesse artigo, vou mostrar a fonte de uma página web muito simples.
TEXTO DECORAÇÃO - As seguintes tags são as tags básicas usadas para decorar texto.
- Isto torna tag <b> texto em negrito.
- Isto torna tag <i> texto itálico.
- Isto torna tag <u> texto sublinhado.
- Isto torna tag <big> texto maior.
Estas tags podem ser utilizadas separadamente ou em conjunto para criar mais efeitos. Por exemplo: Este texto é enfatizada, enquanto que este texto é intenso!
- <font>Outro texto efeitos podem ser alcançados utilizando a tag <font>. Atributos O importante aqui são "cores", "tamanho", e "cara". Color valores devem, em formato word ou hexadecimal (ex.: "fúcsia" ou # BB6677), Tamanho valores devem ser um número um por sete (sete a ser o maior), e face valores podem ser o nome de qualquer fonte.
Ex: color="green" <font size="2" face="Georgia"> Este texto é alterada. </ Font>
Este texto é alterada.
Exemplo webpage código
O código de exemplo uma página web poderia ser semelhante a este:
<html>
<head>
<title> Exemplo Website! </ title>
</ head>
<body bgcolor="#AABB33">
<b> Este texto está em negrito! </ b>
Este texto não é negro. Nem é formatado de qualquer outra forma.
</ body>
</ html>
Formatando Texto- As seguintes tags são as tags básicas utilizadas para formatar texto.
- <br/> Esta tag cria uma pausa no texto. Pressionar "entra" no seu editor HTML não irá criar um verdadeiro quebra na página, por isso você deve usar essa tag para criar quebras de linha.
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <h7>Estas são as tags "cabeçalho" tags. <h1> Cria o maior cabeçalho, enquanto <h7> cria o cabeçalho menor. Constituída por um cabeçalho de tamanho alterou o texto com quebras de linha acima e abaixo.
- O parágrafo <p> tag cria uma quebra de linha antes e depois de um parágrafo do texto.
INSTALAÇÃO MEDIA - As seguintes tags são usadas para inserir diversos meios de comunicação.
- <img/>A imagem tag insere uma imagem. Possui um atributo necessário, "src". O valor de "src" deve ser o URL de uma imagem.
Ex: <img src="http://www.images.com/image.jpg">
- A âncora <a> tag insere um hiperlink. Tem também um atributo necessário - "href". O valor de "href" deve ser a URL do site (ou imagem, ou arquivo, etc) ao qual pretende link.
Ex: <a href="http://www.link.org"> Este site é ótimo! </ A>
CRIAR LISTAS - As seguintes tags são usados para criar listas.
Todas as listagens são feita utilizando uma etiqueta principal abertura (<bl>, <ul>, ou <ol>), que deve ser fechado depois que a lista é terminada, e lista de tags (<li>), que deve ser fechado depois de cada cada item da lista.
- <ul>A lista unordered tag cria uma lista negra marcada por pequenos círculos. O "tipo" atributo pode ter valores de "disco", "círculo", ou "praça", que mudam a pequenos círculos pretos em outros marcadores.
Nota: <bl> (lista) é o mesmo que <ul>, exceto que a lista é puxado para a esquerda (geralmente não preferencial).
- <ol>A lista ordenada tag cria uma lista de números marcados. O valor para o "start" atributo pode ser qualquer número, e isto diz-se para começar a lista de numeração. O valor para o "tipo" pode ser atribuído um, um, I, i, ou 1, o que dizer a lista que tipo de numeração para usar (alfabéticos, numéricos ou algarismos romanos).
QUADROS - As seguintes tags são usados para criar tabelas.
Os quadros são os mais avançados tópicos em HTML básico.
- A tabela <table> tag significa o início de uma tabela. atributos são Possíveis "bgcolor", "fronteira", "cellpadding", "cellspacing", "largura", "alinhamento", ou "valign".
- O valor para o "bgcolor" atributo é uma cor em hexadecimal formato (ex. # 33AA44).
- O valor para a "fronteira" atributo é um número que indica a espessura da fronteira.
- O valor para o "cellpadding" atributo é um número que indica a distância (em pixels) entre a fronteira eo conteúdo da tabela.
- O valor para o "cellspacing" atributo é um número que denota grande como será a fronteira.
- O valor para a "largura" atributo é um número que indica como vai ser a tabela de largura (em pixels).
- O valor para a "alinhar" atributo deve ser "esquerda", "direita", ou "centro", e indica onde o conteúdo da mesa alinhado.
- O valor para o "valign" atributo deve ser "top", "baixo", ou "meio", e indica onde o conteúdo da mesa alinhado verticalmente.
- <tr>Esta tag define uma tabela fila. Deve criar-lo antes de criar um <td>. Semper definir as linhas antes de definir nesses células filas (que criam colunas). Você pode usar a "altura" atributo aqui, dando-lhe um valor que, em pixels, vai definir a altura da linha. Você também pode usar uma percentagem (por exemplo, "30%") para definir a quantidade da página vai demorar para cima (verticalmente), mas isso não é recomendado para a tabela fila.
- <td>Esta tag define uma célula de tabela. Informações podem ser colocadas em uma célula de tabela, enquanto o <tr> <td> e definir em conjunto aquilo que vai ser semelhante a uma mesa. Você pode usar a "largura" atributo aqui para definir, em pixels, como será a célula de largura. Você também pode usar uma percentagem (por exemplo, "55%") para definir a quantidade da página vai demorar para cima (na horizontal).
Aqui está um exemplo de algum código que poderia criar uma tabela:
<table>
<tr>
<td> Esta é a primeira linha, primeira coluna! </ td>
<td> Esta é a primeira linha, segunda coluna! </ td>
</ tr>
<tr>
<td> Esta é a segunda linha, primeira coluna! </ td>
<td> Esta é a segunda linha, segunda coluna! </ td>
</ tr>
</ table>
Você pode copiar este código em seu próprio editor HTML para ver qual o produto acabado deve se parecer. Sinta-se livre para mexer com ela, adicionando mais linhas, uma desigualdade de quantidade de células de tabela em cada linha e vários atributos.
Delicious
Digg
Google
Yahoo
