Curso Prático de HTML e CSS
Traduzido por
ScribdTranslationsCurso Prático de HTML e CSS
Traduzido por
ScribdTranslationsCURSO DE HTML E CSS
GUSTavO aDOLfO GRUESO
MENU
Conceitos básicos
Que es HTML
Etiquetas HTML
OS EDITORES DE TEXTO
PROGRAMA COM HTML
Etiquetas HTML
Conceitos básicos
Devemos ter claros alguns conceitos antes de começar a criar uma página web. Por
Olá, te convido a conhecer os aspectos chave neste fim.
Olá, sou Gust
A Internet é um conjunto descentralizado de redes interconectadas, que permite que
muitas redes podem ser incluídas na rede com um protocolo TCPIP, isso quer dizer em
Eu te convido a assistir o seguinte vídeo para esclarecer os conceitos básicos nesta
poucas palavras que recebem todas as redes.
Guía menciona-dos, para esto debes dar clic sobre el tutor para aclara los con-
ceptos
TCPIP é um protocolo de conexão, a forma como os sistemas se entendem, este é
compatível com qualquer sistema operacional, por isso permite que qualquer computador ou
outro dispositivo pode se conectar entre si
Web: Sistema de gestão de informação mais popular para a transmissão de dados a
através da internet
HTTPS Este é um protocolo de transferência de hipertexto que é muito utilizado para
acessar páginas da web
TCP Este é um protocolo de transmissão de informação muito utilizado para transferir
tipos de dados em páginas web.
FTP este é um protocolo de rede para a transferência de arquivos entre sistemas conectados.
conectados a uma rede
Teste seu conhecimento
Levando em conta as informações que você consultou na sessão anterior, resolva o seguinte teste
Nombre completo
Programa de formação
Correio eletrônico
Telefone
Selecione as opções corretas para as seguintes afirmações
HTTP Seleccione las Capas del protocolo TCPIP
É utilizado para guardar informações da web Aplicação
É utilizado para acessar uma página da web Transporte
É utilizado para transferência de dados Internet
É utilizado para transferir hipertexto Conexão
Enviar formulario
QUE ES HTML Historia de HTML
HTML é uma linguagem de marcação que se A origem do HTML remonta a 1980, Clique no tutor para ampliar a
utiliza para o desenvolvimento de páginas de Inter- quando o físico Tim Berners-Lee, trabalhava- definição
net. Trata-se das siglas que correspondem a jador do CERN (Organização Europeia
Linguagem de Marcação de Hipertexto, ou seja, Len-para a Pesquisa Nuclear) propôs
guia de Marcas de Hipertexto um novo sistema de "hipertexto" para
compartir documentos.
Los sistemas de “hipertexto” habían sido
Para que me serve? desenvolvidos anos antes. No âmbito de
a informática, o “hipertexto” permitia
que os usuários acessassem a infor-
informação relacionada com os documentos
Se usa indicar como vai ordenado o conteúdo eletrônicos que estavam visualizando.
do de uma página web. Isso é feito por meio De certa maneira, os sistemas primitivos
das marcas de hipertexto as quais são eti- de “hipertexto” poderiam ser assimilados aos
tags conhecidos em inglês como etiquetas. enlaces de las páginas web actuales.
Como funciona?
A partir de etiquetas as quais são fragmentos
tos de texto rodeados por corchetes angulares
< >, que têm funções e usos específicos e
se utilizan para escribir código HTML.
Etiquetas HTML
Uma estrutura HTML começa com a tag <html> e aqui-
Neste curso, utilizaremos uma série de etiquetas na construção ba con </html>. Tudo o que estiver no meio será a página da web.
ção prática de uma página web, para isso te deixo as etiquetas Dentro de <html></html> se encontram 2 partes diferenciadas.
básicas que se devem ter em conta no momento de realizar A primeira <head></head> é o cabeçalho da página. Aqui
as atividades propostas. irán certa informação que não é diretamente o conteúdo
da página. Aqui se coloca o título da página, os metadados,
<html> (Abrimos o documento) estilos, código javascript (todo esto se estudiará en capítulos
<head> (Abrimos o cabeçalho) venideros). La primera que se suele estudiar es <title></title>,
</head> (Fechamos o head) que indica el título de la página (lo que el navegador pone en la
<body> (Abrimos o corpo) parte superior esquerda).
</body> (Fechamos o corpo)
</html> (Fechamos o documento) La segunda parte es <body></body>. Aquí va propiamente el
<H1> (Encabezado principal) conteúdo da página: fotos, parágrafos, formulários, etc. Por
<br /> (Salto de linha) ejemplo, siguiendo con el ejemplo de la página anterior, el si-
<title>: para definir el titulo de una página com este código, podemos mudar o título da página.
<link> e <style>: ambos vão dentro do <head>, e servem para
aplicar estilos CSS
<h1>, <h2>, <h3>….<h6>: cabeçalhos
<table>, <tr> e <td>: são as tabelas, as linhas e as células
<div>: é um elemento 'contêiner'
<a>: para [Link]
<img> é a tag com a qual as imagens são inseridas
<li>, <ol>, <ul>: são as etiquetas que controlam as listas ordenadas
nadas e desordenadas
<b>: converte o texto em negrito
<i>: o mesmo, mas para aplicar itálico ao formato de um texto
<p>: com esta etiqueta determinamos um texto de parágrafo
<br />: esta outra faz uma quebra de linha simples.
OS EDITORES DE TEXTO
É necessário que para avançar neste curso utilizemos alguns desses editores.
de texto, os quais também são considerados IDES, querendo dizer que você
poderá fazer muito mais com estes do que simplesmente escrever código.
Este é o momento para conhecer os editores mais frequentes no mercado e então
vamos selecionar o que melhor se adapta às necessidades do trabalho a ser desenvolvido.
SublimeText
SublimeText é um editor de texto e editor de código fonte escrito em C++ e
Python para os plugins.1 Desenvolvido originalmente como uma extensão do Vim, com
o tempo foi criando uma identidade própria, por isso ainda conserva um modo de edição
tipo vi chamado Modo Vintage.2
Pode ser baixado e avaliado gratuitamente. No entanto, não é software livre ou de
código aberto3 e deve-se obter uma licença para seu uso continuado, embora a ver-
A sessão de avaliação é plenamente funcional e não tem data de caducidade.
PROGRAMA COM HTML
Temos um editor de texto instalado e conhecemos as etiquetas básicas de HTML, como realizaremos a seguinte atividade?
este es el momento de aplicar nuestros conocimientos e iniciar a programar.
1. Lee detalladamente la explicación
2. Observe o exemplo
3. Escreva na caixa de texto o código contido no exemplo
4. Abra el editor SublimeText y cree un FOLDER llamado Mantenimiento
5. Dentro da pasta manutenção, crie um arquivo chamado [Link]
6. Digite o código no editor de código SublimeText
7. Experimente o código abrindo-o com o navegador de sua preferência
8. Registre os avanços até terminar as sessões
9. Entregue ao instrutor seus avanços ao finalizar
Exercícios
Ahora desarrollaremos las actividades que se plantean a continuación, primero se encuentra la explicación, segundo un ejemplo desa-
rolado e no terceiro momento uma caixa de texto para copiar o código.
Nota: Você deve concatenar
Estrutura básica de uma página
Toda páginaWeb utiliza esta estructura
básica. Os pontos de suspensão (...) mues-
onde eu inseriria a informação adi-
cional. É muito importante que sempre
que se inicie uma página se realize me-
diante da estrutura.
Titulo y párrafo
<title>: Establece el título de la página
Web, vamos a inserir o título “Manteni-
mantenimiento de Equipos de Computo” e cerra-
mos a etiqueta </title>
<p>: Indica um parágrafo, neste momento
selecionaremos um parágrafo que indique
o que é a manutenção de equipamentos de
computo e vamos colá-lo entre as etiquetas-
tas de parágrafo, ao finalizar se fecha a eti-
queta </p>
<H1>: Encabezado principal
<br>: quebra de linha
Defina a relação entre um documento e
um recurso externo
<style>: Defina um estilo para a informação de
un documento
<link> e <style> vão dentro do <head>
<h1>,<h2>,<h3>: são para títulos, subtítulos ou
cabeçalhos
<div>: es un elemento «contendedor»
<table>, <tr> e <td>: são as tabelas, as linhas e as
células
<li>, <ol>, <ul>: são as etiquetas que controlam
las listas ordenadas y desordenadas
<a>: é para adicionar links
<img>: é para inserir imagens
<hr>: é uma quebra de página, mas adicionando uma
linha
<p>: é para adicionar um texto de parágrafo
<i>: converte o texto em itálico
<b>: converte o texto em negrito
É para fazer um comentário sem que
afete a página
<button>: é para fazer um botão clicável
Defina o título de um trabalho
Defina uma pequena seção de um do-
documento para poder ressaltá-lo
Defina um mapa de imagem do cliente
<area>: Define un área dentro de un mapa de
imagem
<iframe>: Defina um quadro em linha, ou seja, uma
página
Ejercicio practico de HTML
Neste espaço, realizaremos um exercício prático de uso das Etiquetas THML.
baseado em um vídeo tutorial do YouTube, este exercício prático tem como objetivo
lidar com o conhecimento do ambiente prático do SublimeText e
reagir com as etiquetas que aprendemos em atividades anteriores.
[Link]
Referentes bibliográficos
[Link]
[Link]
[Link]
[Link]