HTML – Curso Básico
São Paulo – Brasil
1
HTML
CURSO BÁSICO
Aprenda os conceitos iniciais de HTML em
alguns minutos.
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Curso básico de HTML
Tipologia: Notas de estudo
2011
1 / 13
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe HTML básico e outras Notas de estudo em PDF para Cultura, somente na Docsity!
São Paulo – Brasil
HTML
CURSO BÁSICO
Aprenda os conceitos iniciais de HTML em
alguns minutos.
São Paulo – Brasil
- 1 - INTRODUÇÃO Índice
- 2 - TAGS
- 3 - EDITORES
- 4 - SALVANDO UMA PAGINA HTML
- 5 - INICIANDO UMA PÁGINA
- 6 - CONSTRUINDO UMA PÁGINA HTML
- 7 - TEXTOS
- 8 - CORES
- 9 - LISTAS
- 10 - IMAGENS
- 11 - LINKS
- 12 - TABELAS
- 13 - FORMULÁRIOS
São Paulo – Brasil
Mas, para manter organização, recomenda-se, uma “configuração” padrão. Por exemplo:
6 - Construindo Uma página
HTML
Para se construir uma página HTML, é necessário primeiramente abrir o editor, aqui, nós vamos usar sempre o Bloco de Notas. Primeiramente, digita-se os comandos básicos.
Para se colocar um título na página (veja figura 2.1), é necessário digitar- se as tags e , que vai fora da tag <BODY>. <HTML> <HEAD> <TITLE>Primeira Página
, A página será exibida assim.
Figura 2.1 – Título da Página
Na tag body, pode ser adicionada as configurações padrões da página.
Atributo “bgcolor” Serve para alterar a cor de fundo da página HTML.
= Define a cor de fundo (Veja mais sobre as cores no capítulo 8 ) da página. Veja figura 2.
Figura 2.2 – O atributo “bgbolor”, e a cor definida com ele pelo código, resultam no fundo azul da página.
Atributo “background” Serve para adicionar uma imagem como pano de fundo da página HTML.
= Define a imagem “Imagem_fundo.jpg”, como pano de fundo da página HTML. Veja a Figura 2.3.
São Paulo – Brasil
Figura 2.3 – Repare que como a imagem é menor que o fundo, ela se repete, e isso acontece quantas vezes forem preciso.
Atributo text Serve para definir a cor do texto padrão da página HTML. = Define a cor padrão de tudo aquilo que for escrito na página HTML como texto, sem configurações. Veja Figura 2.4.
Figura 2.4 – Repare que o texto no começo da página está vermelho.
7 - Textos
Há vários tipos de forma de se fazer textos em páginas HTML. A mais simples delas é com a tag (x, corresponde a um número de 1 a 6, sendo 1 o maior e seis o menor). Por Exemplo:
**** Aqui será Exibido o texto com a cor padrão da página, e no maior tamanho possível ** ** Aqui será exibido um texto menor... ** ...a** qui será exibido um texto menor... ** ...a** qui será exibido um texto menor... ** ...a** qui será exibido um texto menor... ** ...E a** qui será exibido o menor texto possível com a tag “” (Veja a figura 3.1).
Figura 3.1 – Todos os tamanhos possíveis do “H”
Parágrafos
Observe que com o H, não é necessário que se mude de parágrafo, mas caso você prefira usar uma tag que não seja o H, ou não usar tags, é preciso que você use uma quebra de linhas, pois o HTML, não quebra de linha no mesmo momento que você digita a tecla “Enter”. Veja a figura 3.2. Por Exemplo: Observe que se eu não aciono nenhum comando para quebra de linha o HTML, não quebra
São Paulo – Brasil
Figura 3.5 – Atributo Font
Comentário Para se fazer um comentário em uma página HTML, ou seja escrever um texto que não será exibido no gráfico, mas sim no código, e é fundamental para manter aquela organização citada no começo da apostila. Por Exemplo:
Veja figura 3.6 e 3.
Figura 3.6 – Código com um comentário.
Figura 3.7 – Gráfico, observe que o comentário adicionado não aparece.
Estilos de caracteres
Você pode no HTML, formatar uma palavra, frase ou letra, como negrito, itálico, sublinhado, subscrito e sobrescrito. Para isso, usa-se os comandos: Formatação Comando Negrito Itálico Sublinhado Subscrito Sobrescrito Por Exemplo: Esse é o texto, e essa palavra está em Negrito, essa está em Itálico, essa sublinhada, essa subscrita, e essa sobrescrita. Veja Figura 3.6.
Figura 3.6 – As formatações podem ser atribuídas a palavras, frases ou letras.
8 – Cores
Numa página HTML, as cores são fundamentais para decorar a página. No HTML, as cores podem ser nomeadas pelo nome (em Inglês), como White para branco, green, para verde, blue, para azul e assim por diante. Podem ser codificadas, por números decimais, como 255,160,200,
São Paulo – Brasil
ou números hexadecimais, como, FFAA00, na verdade os códigos são como uma misturas de cores RGB ( R ed – Vermelho, G reen – Verde, B lue – Azul), então se o código decimal, for 185,0,0, é sinal de que a cor é vermelha, pois ele adicionou 185 ao vermelho, 0 ao verde e 0 também ao azul, se o código hexadecimal for 006600, deduz-se que a cor é verde, pois os dois primeiros números (que correspondem ao vermelho – RRGGBB), são 0, os dois números do meio, são 6 e os dois números finais são 0. Para escrever uma cor, é mais fácil usar-se códigos, e mais fácil ainda usar os códigos hexadecimais. Na tag body, bgcolor, define a cor do pano de fundo da página e text, a cor do texto padrão na pagina, na tag font, color define a cor do texto. Para se escrever uma cor codificada, usa- se # antes do códico, e dentro das aspas, por exemplo, “#550000”
9 – Listas
As listas são muito úteis, servem para organizar assuntos em tópicos, números, ou menus. Por Exemplo:
Introdução Dedicatória Capitulo 1
A Lista acima será exibida conforme mostrada na figura 4.1, onde , é a tag que define lista ordenada, ou seja, numerada, e , é a tag que define os itens da lista.
Figura 4.1 – Uma lista numerada.
Introdução Dedicatória Capitulo 1
A Lista acima será exibida conforme mostrada na figura 4.2, onde , é a tag que define lista não-ordenada, ou seja, tópicos, e , é a tag que define os itens da lista.
Figura 4.2 – Observe que os números deram lugar aos tópicos.
Introdução Aqui vai a introdução do livro Dedicatória Aqui vai a dedicatória do livro
São Paulo – Brasil
Figura 5.3 – Observe que a imagem está alinhada a esquerda.
Você pode também adicionar borda a sua imagem. Por Exemplo: Essa é a Foto. Veja na figura 5.4.
Figura 5.4 – Observe que a figura ganhou uma borda.
Você pode definir também o espaçamento com os atributos hspace (para horizontal) e vspace (para Vertical) em pixels. Por Exemplo: Essa é a Foto. Observe a figura 5.5.
Figura 5.5 – Observe que a imagem ficou bem abaixo do escrito, e bem longe da borda.
11 – Links
Na web, o link é fundamental. Para navegar de uma página para outra, é fundamental o “linkamento”. A tag que define o “linkamento”, é a . Por Exemplo: Vá para a página 2 Veja a Figura 6.1.
Figura 6.1 – Observe que a frase “linkada”, está sublinhada e em azul.
As cores no link pode ser mudada com os comandos link (Cor dos Links), alink (Cor de um link que foi pressionado) e vlink (Cor de um link já visitado), podem ser colocados no body. Por Exemplo:
São Paulo – Brasil
Vá para a página 2
Vá Para a Página 3
Vá para a página 4
. Veja a figura 6.2.
Figura 6.2 – Observe que o link nunca clicado, está verde escuro, o já clicado, verde claro, e o que está pressionado, azul.
Pode-se também linkar figuras, basta substituir a frase, pelo destino da figura. Por Exemplo: .
Você pode mandar um e-mail, usando o link. Por Exemplo: Env ia o e-mail para o destino [email protected]. Veja a figura 6.3.
Figura 6.3 – Observe que ao clicar no link, o Outlook Express Abre uma Janela.
12 – Tabela
Para manter aquela organização já citada antes, também na parte gráfica, é necessário a criação de tabelas, para que imagens e textos fiquem organizados em harmonia em sua página, para isso, usa-se a tag . Na tag table, atributos como align, alinha a tabela na tela, border, coloca uma borda na tabela. Essa tag possui sub tags, , que representa as linhas, e devem vir dentro da table, e podem usar tags como align, para alinhar o conteúdo da célula, e a tag , que representa as colunas e devem vir dentro da tag . Por Exemplo:
Esse é o texto
São Paulo – Brasil
Figura 8.1 – Observe que há o escrito e depois o campo do formulário, e que o campo é bem maior que o padrão.
Campo de Senha (Incluso na tag form) Por Exemplo: Entre com a senha:Veja a figura 8.2.
Figura 8.2 – Observe que o campo da senha é a metade do campo do nome, e que no lugar de letras, há * no campo senha.
Você pode adicionar ainda botões de radio, caixas de seleção, lista ou menus, campos de textos com várias linhas, botão simples, botão de envio e reset e botão com imagem. Vamos ver:
CheckBox
Banco de DadosWeb Design
Programação
Radio Button
MasculinoFeminino
Menu
.