Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company

Curso Online ao Vivo - Primeiros
Passos na Web com HTML e CSS Aprenda Boas Práticas

PROFº GUSTAVO ROMA

Estrutura básica do HTML

O que é HTML?
HTML (abreviação para a expressão inglesa
HyperText Markup Language, que significa
Linguagem de Marcação de Hipertexto) é uma
linguagem de marcação utilizada para produzir
páginas na Web. Documentos HTML podem ser
interpretados por navegadores. Exemplo: Mozilla
Firefox, Google Chrome etc.

PROFº GUSTAVO ROMA


VERSÕES
A primeira linha do documento HTML, deve ser a declaração do
Doctype. Ele é responsável por informar ao navegador, qual a versão
do HTML utilizado.
Apesar da versão mais recente ser o HTML5, a mais utilizada,
continua sendo a HTML4.0.1, pois os navegadores antigos (ex:
internet explorer 8 ou inferior), não renderizam as novas tags do
HTML5.

Exemplo do doctype HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Exemplo do doctype HTML5
<!DOCTYPE html>

PROFº GUSTAVO ROMA


EDITOR
Editor HTML ou editor Web é um software para a criação de páginas web
utilizando a linguagem de marcação HTML. Embora a edição em linguagem
HTML de uma página web possa ser feita com qualquer editor de texto, editores
HTML específicos oferecem vários recursos extras para auxiliar na criação de
páginas, além disso, acrescentam outras funcionalidades, e muitos dão a opção
de visualização do projeto, tanto em linhas de código HTML quanto o resultado
delas no design da página. Editores são ótimas ferramentas para
desenvolvedores e demais profissionais de sistemas para internet, visto que
lhes poupam trabalhos pequenos, mas que consomem muito tempo, e assim
permitem que o foco seja desviado para detalhes mais importantes.
Editor aconselhado: Sublime Text
http://www.sublimetext.com
PROFº GUSTAVO ROMA


TAGS
Tags são rótulos usados para informar ao navegador como deve ser
apresentado o website.
Todas as tags têm o mesmo formato: começam com um sinal de
menor "<" e acabam com um sinal de maior ">".
Exemplo:
<title>Este texto é o título da página</title>
<strong>Este texto deve ser em negrito.</strong>
<em>Este texto deve ser em itálico.</em>
<p>Este texto é um parágrafo.</p>
<h1>Este é um título</h1>
<h2>Este é um sub título</h2>
PROFº GUSTAVO ROMA


Exemplo básico HTML5
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<p>Aqui o texto de um parágrafo</p>
</body>
</html>

PROFº GUSTAVO ROMA

Exemplo básico HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Título da Página</title>
</head>
<body>
<p>Aqui o texto de um parágrafo</p>
</body>
</html>
PROFº GUSTAVO ROMA

Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual
tabela de caractéres a página está utilizando.
No HTML5:
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma
abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
Essa forma antiga será também suportada no HTML5. Contudo, é
melhor que você utilize a nova forma.
PROFº GUSTAVO ROMA


Inserindo uma imagem
A tag utilizada para se inserir imagens é a tag <img />, que pode ser
aberta e fechada no mesmo bloco da tag. Também precisamos
informar o endereço da imagem ao navegador então para isso
utilizaremos o comando src.
Exemplo:
<img src="link_da_imagem"/>
É importante observarmos que o link da imagem deve sempre terminar
com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se
a imagem está em uma pasta no mesmo diretório do documento
HTML, devemos colocar o nome da pasta seguido de barra (/), antes
do nome da imagem.
Exemplo:
<img src="minha_pasta/minha_imagem.png"/>

PROFº GUSTAVO ROMA


Lista não ordenada
Uma lista não ordenada é muito utilizada para construir menu de um
site.
Para criar uma lista não ordenada usa-se a tag <ul>. Dentro desse
elemento os vários itens são criados com outra tag <li>.
Esta é a codificação:
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
É importante notar que dentro de uma lista não ordenada podemos
colocar parágrafos, quebras de linha, imagens, outras listas, etc...
PROFº GUSTAVO ROMA

O que é <div>
Os elementos div e span foram criados com o HTML 4
com a finalidade de fornecer um mecanismo genérico
para agrupar e prover estrutura aos documentos. O
elemento div é um container nível de bloco e span é um
elemento inline. Uma id e/ou class é em geral usada para
fornecer uma identidade a uma div ou span com o
propósito de fornecer uma referência para estilização por
CSS ou captura por um script.

Exemplo:
<div id=”header” class=”textopadrao”>...</div>
PROFº GUSTAVO ROMA

O que é CSS?
CSS é a abreviatura para Cascading Style Sheets - Folha de
Estilos em Cascata
CSS é uma linguagem para estilos que define o layout de documentos
HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e muito mais.
HTML é usado para definir a estrutura do website. Contudo, o CSS
proporciona mais opções e é mais preciso e sofisticado. CSS é
suportado por todos os navegadores atuais.

Conclusão: HTML é usado para estruturar conteúdos. CSS é usado
para formatar conteúdos estruturados.

PROFº GUSTAVO ROMA

Dica:
Não caia na armadilha de construir todo o layout e depois testar, pois você poderá
constatar uma quebra de layout difícil de detectar devido a grande quantidade de
código. Construa em passos pequenos e teste cada passo em diferentes
navegadores. Assim fazendo você irá detectar eventuais problemas com o layout
tão logo eles apareçam, tornando a correção mais fácil.
Valide com freqüência seu HTML e CSS. Muitos problemas com layouts podem ser
corrigidos com auxílio dos relatórios do validador.
W3C - World Wide Web Consortium é o órgão superior de codificação web.
Como padrão da vida, tudo tem regras, certo? Pois é, a web também. Fazer sites
não é somente desenhar e codificar, tem uma serie de padrões a serem seguidos.
Padrões estes que são organizado pela W3C.
Validador W3C: http://validator.w3.org/
PROFº GUSTAVO ROMA

COMENTÁRIO
Os comentários em HTML são muito fáceis de inserir. É como uma etiqueta que tem
um início e um fim. Todo o texto que colocar dentro está comentado, ou seja, não
aparecerá na página. Dentro de um comentário pode colocar o texto ou código
HTML, como etiquetas.
O comentário começa por  Tudo o que colocar entre essas
etiquetas está comentado.
Exemplo:
<div id="header">
<ul class="menu">
<li class="item">Menu</li>
<li class="item">Menu</li>
</ul>
</div><!-- fim header →
Comentário é muito importante para organização do código.
PROFº GUSTAVO ROMA

Definindo o CSS:
Os containers do layout devem ser posicionados com uso dos métodos
CSS de posicionamento. Para isso vamos definir regras de estilo no
CSS.
<style type=”text/css”>
body{
...
}
#container{
...
}
#header{
...
}
#footer{
...
}
</style>

PROFº GUSTAVO ROMA

Definindo o atributos no CSS:
Vamos definir uma fonte, tamanho, cor e background na tag body:

body{
font-family: Arial, Verdana;
font-color: #000;
font-size: 12px;
background-color: #f2f2f2;
}
Atributo
Atributo
Atributo
Atributo

font-family, define a família de fontes utilizadas.
font-color, define a cor da fonte.
font-size, define o tamanho da fonte.
background-color, define a cor do plano de fundo do site.

PROFº GUSTAVO ROMA

Definindo o atributos no CSS:
Vamos definir uma largura,altura e uma borda em uma <div>

#header{
width: 980px;
height: 200px;
border: 1px solid #ccc;
}
Atributo width, define a largura da <div> com id header
Atributo height, define a altura da <div> com id header
Atributo border, define a borda com espessura de 1 pixel sólida com cor
cinza claro da <div> com id header

PROFº GUSTAVO ROMA

Definindo link tag <a> e <link>:
Há dois tipos de links no HTML: a tag <a>, que são links que levam o usuário para outros
documentos e a tag <link>, que são links para fontes externas que serão usadas no documento.
Exemplo link tag <a>:
<a>Link</link>
Exemplo link tag <a> com atributo href:
<a href=”http://www.google.com”>Link</a>
Exemplo link tag <a> com atributo target_blank, o mesmo ao clicar, vai abrir outra janela do
navegador:
<a href=”http://www.google.com” target=”_blank”>Link</a>
Exemplo arquivo tag <link>:
<link rel="stylesheet" type="text/css" href="css/style.css" />

O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a
folhas de estilo css.
PROFº GUSTAVO ROMA


Definindo link mailto tag <a>
Mailto é uma forma de inserir no HTML um link para algum endereço de email. Desta forma, o
usuário tem a possibilidade de enviar uma mensagem para este email apenas clicando no link
gerado. Veja no exemplo abaixo:
<a href=”mailto:gustavo.roma@profite.com.br”>gustavo.roma@profite.com.br</a>
Quando o usuário clica sobre o link de um endereço de email, automaticamente abre-se uma
janela de seu aplicativo de email padrão para criação de uma nova mensagem, que já estará
com o campo do destinatário preenchido com aquele endereço.
É possível também adicionar um parâmetro ao valor do mailto no HTML que irá sugerir um
Subject para a nova mensagem aberta. Assim, na janela de criação da nova mensagem, o
usuário poderá ver que o Subject também já estará preenchido.

<a
href=”mailto:gustavo.roma@profite.com.br?subject=AssuntoEmail”>gustavo.roma@profite.com.br
</a>
PROFº GUSTAVO ROMA

OBRIGADO!

CONTATOS PROFITE
SP: (11) 2503-1012
WWW.PROFITE.COM.BR

COORDENADOR CLAUDIO MACEDO
RIO: (21) 2522-0121
CLAUDIO@PROFITE.COM.BR

PROFESSOR GUSTAVO ROMA
RIO: (21) 2522-0121
GUSTAVO.ROMA@PROFITE.COM.BR

Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company

Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Destaque

Destaque(20)

Similar a Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company

Similar a Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company(20)

Mais de Uni Buscapé Company

Mais de Uni Buscapé Company(20)

Último

Último(20)

Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Universidade Buscapé Company