HTML e CSS

HTML E CSS

>> ESTE BLOG FOI CRIADO POR: ANGEFFERSON ÉRICO.

INÍCIO COREL PS FW FL HTML / CSS DW PHP

INTRODUÇÃO

Olá pessoal!

Web master: Angefferson Érico

Bem vindos às aulas de HTML!

Mas, afinal de contas, o que é o HTML?

> DEFINIÇÃO: Abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.

TAGS = Chamamos "Tags" os comandos do código HTML para execução de elementos no site.

TIPOS DE TAGS

○ ABERTURA= INICIA O COMANDO.
○ FECHAMENTO= FINALIZA O COMANDO.
○ VAZIA= NÃO NECESSITA DE TAG DE FECHAMENTO PARA EXECUTAR SUA AÇÃO.

A COLOCAÇÃO DA TAGS

As tag's devem está alocadas em lugares que explicitem a ordem de subordinação e localização em relação a sua tag de abertura e as tags que são mais relevantes do que elas.

Dica do professor: Analise bem se está colocando as tag's de forma que se subordinem aos comandos de outras tags de maior relevância; doutra sorte, seu site poderá conter erros e até mesmo ficar em péssimas condições de ser executado nas diversas plataformas (sistemas Operacionais) e Browsers (navegadores).

<INTRODUÇÃO>

ESTRUTURA BÁSICA - COM COR DE PLANO DE FUNDO

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>HTML5 Estrutura básica</title>
</head>
<body bgcolor="#aaddff" text="#006699">
Exemplo
</body>
</html>

LISTA DE TAGS HTML 5

Tags	Resumo	Suporte
<!- ->	Comentário: os comentários são exibidos apenas em código, não sendo mostrados no navegador	Suportado pelos principais navegadores*
<!DOCTYPE>	Tipo de documento: define quais especificações que o documento segue	Suportado pelos principais navegadores*
<a>	Âncora: usado para ligar a outro recurso web	Suportado pelos principais navegadores*
<abbr>	Abreviação	Suportado pelos principais navegadores*
<address>	Endereço	Suportado pelos principais navegadores*
<area>	Área	Suportado pelos principais navegadores*
<article>	Elemento artigo	Suportado pelos principais navegadores*
<aside>	Elemento à parte	Suportado pelos principais navegadores*
<audio>	Conteúdo de som	Suportado pelos principais navegadores*
<b>	Texto em negrito	Suportado pelos principais navegadores*
<base>	Elemento base	Suportado pelos principais navegadores*
<bdo>	Representa explicitamente a direção do texto	Suportado pelos principais navegadores*
<blockquote>	Bloco de citação	Suportado pelos principais navegadores*
<body>	Corpo da página	Suportado pelos principais navegadores*
<br>	Insere uma quebra de linha	Suportado pelos principais navegadores*
<button>	Botão	Suportado pelos principais navegadores*
<canvas>	Utilizado para a renderização de gráficos	Suportado pelos principais navegadores*
<caption>	Legenda da tabela	Suportado pelos principais navegadores*
<cite>	Citação	Suportado pelos principais navegadores*
<code>	Texto de código computacional	Suportado pelos principais navegadores*
<col>	Coluna	Suportado pelos principais navegadores*
<colgroup>	Grupo de colunas	Suportado pelos principais navegadores*
<command>	Botão de comando	Suportado apenas pelo navegador Internet Explorer
<datalist>	Lista suspensa	Suportado apenas pelos navegadores Firefox e Opera
<dd>	Definição da descrição	Suportado pelos principais navegadores*
<del>	Texto suprimido	Suportado pelos principais navegadores*
<details>	Detalhes	Suportado apenas pelo Chrome
<div>	Bloco de documento	Suportado pelos principais navegadores*
<dl>	Lista de definição	Suportado pelos principais navegadores*
<dt>	Termo de definição	Suportado pelos principais navegadores*
<em>	Texto enfatizado	Suportado pelos principais navegadores*
<embed>	Elemento embutido	Suportado pelos principais navegadores*
<fieldset>	Grupo de campos	Suportado pelos principais navegadores*
<figcaption>	Colocar legenda na imagem	Suportado pelos principais navegadores*
<figure>	Figura	Suportado pelos principais navegadores*
<footer>	Rodapé da página	Suportado pelos principais navegadores*
<form>	Formulário	Suportado pelos principais navegadores*
<h1> à <h6>	Títulos, onde o valor 1 representa um título maior do que o valor 6	Suportado pelos principais navegadores*
<head>	Cabeçalho principal do documento	Suportado pelos principais navegadores*
<header>	Cabeçalho principal da página	Suportado pelos principais navegadores*
<hgroup>	Grupo de títulos	Suportado pelos principais navegadores*
<hr>	Linha horizontal	Suportado pelos principais navegadores*
<html>	Raiz de um documento HTML	Suportado pelos principais navegadores*
<i>	Texto em itálico	Suportado pelos principais navegadores*
<iframe>	Janela de navegação aninhada	Suportado pelos principais navegadores*
<img>	Inclui um imagem	Suportado pelos principais navegadores*
<input>	Campo de entrada	Suportado pelos principais navegadores*
<ins>	Texto inserido	Suportado pelos principais navegadores*
<kbd>	Texto do teclado	Suportado pelos principais navegadores*
<label>	Etiqueta	Suportado pelos principais navegadores*
<legend>	Título de um grupo de controles formulário	Suportado pelos principais navegadores*
<li>	Item de uma lista	Suportado pelos principais navegadores*
<link>	Link de recursos	Suportado pelos principais navegadores*
<map>	Mapa de imagens	Suportado pelos principais navegadores*
<mark>	Marcação	Suportado pelos principais navegadores*
<menu>	Menu de comandos	Não suportado
<meta>	Define um meta-informação	Suportado pelos principais navegadores*
<meter>	Elemento de medida	Suportado apenas pelo Ópera e Chrome
<nav>	Elemento de navegação	Suportado pelos principais navegadores*
<noscript>	Exibido se scripts estiver desativados	Suportado pelos principais navegadores*
<object>	Objeto incorporado	Suportado pelos principais navegadores*
<ol>	Lista ordenada	Suportado pelos principais navegadores*
<optgroup>	Grupo de opções	Suportado pelos principais navegadores*
<option>	Opção	Suportado pelos principais navegadores*
<output>	Resultado/saída de um cálculo	Não suportado pelo Explorer
<p>	Parágrafo	Suportado pelos principais navegadores*
<param>	Define parâmetro de plugins invocados pelos elementos object, não representando nada por si só	Suportado pelos principais navegadores*
<pre>	Texto pré-formatado	Suportado pelos principais navegadores*
<progress>	Progresso da conclusão de uma ação, como por exemplo um download	Não suportado pelo Explorer e pelo Safari
<q>	Breve citação	Suportado pelos principais navegadores*
<ruby>	Anotação ruby	Suportado pelos principais navegadores*
<rp>	Parenteses de texto ruby	Suportado pelos principais navegadores*
<rt>	Componentes de texto ruby	Suportado pelos principais navegadores*
<samp>	Amostra de programa ou sistema de computação	Suportado pelos principais navegadores*
<script>	Representa um script	Suportado pelos principais navegadores*
<section>	Seção do documento	Suportado pelos principais navegadores*
<select>	Lista selecionável	Suportado pelos principais navegadores*
<small>	Texto pequeno	Exemplo
<source>	Permite indicar diversas fontes para elentos de midia	Suportado pelos principais navegadores*
<span>	Utilizado para um elemento dentro do fluxo de texto	Suportado pelos principais navegadores*
<strong>	Texto grande	Suportado pelos principais navegadores*
<style>	Define um estilo	Suportado pelos principais navegadores*
<sub>	Texto com subscrição	Suportado pelos principais navegadores*
<sup>	Texto sobrescrito	Suportado pelos principais navegadores*
<tbody>	Corpo da tabela	Suportado pelos principais navegadores*
<td>	Célula da tabela	Suportado pelos principais navegadores*
<textarea>	Área de texto	Suportado pelos principais navegadores*
<tfoot>	Rodapé da tabela	Suportado pelos principais navegadores*
<th>	Célula de cabeçalho da tabela	Suportado pelos principais navegadores*
<thead>	Representa o cabeçalho da tabela	Suportado pelos principais navegadores*
<time>	Indica horas	Não suportado
<title>	Título da pagina	Suportado pelos principais navegadores*
<tr>	Linha da tabela	Suportado pelos principais navegadores*
<ul>	Lista não ordenada	Suportado pelos principais navegadores*
<var>	Variável	Suportado pelos principais navegadores*
<video>	Elemento de vídeo ou filme	Suportado pelos principais navegadores*

--- --- ---

ACERCA DO CÓDIGO FONTE BÁSICO ACIMA DESCRITO; DEVE O WEB DESIGN DIGITAR O CÓDIGO NO EDITOR CONVENIENTE (BLOCO DE NOTAS OU NOTEPAD ++) E EM SEGUIDA SALVAR COM A EXTENÇÃO .htm OU .html .
"CADA CASO É UM CASO!" ISSO É BEM VERDADE; POR ISSO ATENHA-SE AO FATO DE TER CONVICÇÃO DE QUAL EXTENÇÃO IRÁ UTILIZAR; DEPENDENDO DO CASO; PODERÁ SER SALVO COM EXTENÇÕES:

.HTM
.HTML
.CSS
.PHP
.ASPX

BAIXE O NOTEPAD ++ >>> DOWNLOAD

--- ---

<VÍDEO AULAS - HTML BÁSICO>

<ATRIBUTOS, FONTE E COR DE FUNDO>

<FORMULÁRIOS>

<DIV'S E CSS>

<LISTA, LINKS E COMENTÁRIOS>

<VÍDEO AULAS - CSS BÁSICO>

TESTE FINAL HTML E CSS

Profº: Angefferson Érico (Professor de HTML Avançado)

01- O QUE É A LINGUAGEM HTML?
02- O QUE SÃO TAGS?QUANTAS E QUAIS SÃO, SEGUNDO OS CRITÉRIOS DE CLASSIFICAÇÃO?
03- PREFERENCIALMENTE, AS TAGS DEVEM SER DIGITADAS MAIÚSCULAS OU MINÚSCULAS?
04- HÁ UM PADRÃO DE POSICIONAMENTO DE TAGS?JUSTIFIQUE SUA RESPOSTA.
05- QUAL A EXTENÇÃO PARA SALVAR UMA PÁGINA HTML DESENVOLVIDA EM HTML?
06- A ACENTUAÇÃO NÃO DEVE SER FEITA COMO ESTAMOS HABITUADOS A FAZER SEGUNDO OS PADRÕES DA MORFO-SINTAXE DA LÍNGUA PORTUGUESA. EXPLIQUE A CAUSA E CITE EXEMPLOS DE COMO DEVE SER FEITA A ACENTUAÇÃO?
07- O QUE É A TABELA HEXADECIMAL?
08- O QUE É O NOTEPAD ++?
09- POR QUE É MAIS PRÁTICO TRABALHAR O CÓDIGO FONTE DE UM SITE NO DREAMWEAVER?
10- PARA QUE SERVEM AS TAGS:
A- HEAD -
B- BODY -
C- HR -
D- BR -
E- P -
F- IMG -
G- FONT -
H- H1 -
I- B -
J- S -
K- I -
L- U-
M- BIG -
O- IFRAME -

11- DESENVOLVER AS PÁGINAS...

EXERCÍCIO 1

<html>
<head>
<title>Aula 1 - Parágrafos</title>
</head>
<body bgcolor="#ccffcc" text="#0033cc" buttommargin="20" leftmargin="20" topmargin="20" rightmargin="20">
 
<h1 align="center"> Aula 1 Páginas simples </h1>
 
 
Easy.com - Aula de Web Design
 
<big><big><big>HTML Treinando as tags body e p </big></big></big>
 
 
<big><big><big><big><big><s>Informática</s></big></big></big></big></big>
 
<hr size="5" width="1000" height="10" align="center" noshade="20%" color="#ffffff">
 
</body>
</html>

EXERCÍCIO 2

crie uma página simples

TESTE FINAL PRÁTICO

1- Trazer um site de no mínimo 3 páginas feito por você em html (Use o máximo de conhecimentos).

2- Trazer uma pesquisa sobre o HTML 5.

EM ANDAMENTO...

Angefferson System Network - Design Gráfico e Web Design

HTML e CSS

Arquivo do blog

Pesquise no Wikipedia