Princípios HTML

PRINCÍPIOS DE
DESENVOLVIMENTO WEB
HTML: Aula 1
HTML
◦ Arquivo de texto com marcações HTML que dão significado ao
conteúdo
Sintaxe
◦ O HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página no navegador.
◦ Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma funcionalidade específica.
◦ As tags são usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código
em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual
da página.
◦ A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” e
“menor que”), ou seja: < >.
◦ As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de
fechamento. As tags que precisam de fechamento possuem a sintaxe <tag> </tag>, já as que não precisam
de fechamento possuem como estrutura <tag/>.
◦ Além disso, uma mesma tag pode receber um ou mais atributos, que possuirá um valor que modifica sua
estrutura ou funcionalidade.
<h1> Parágrafo</h1>
Editor de código - criação
◦ Criação
◦ Para escrever o meu código em html é preciso ter um editor de código:
◦ Notepad
◦ Visual Studio Code
◦ Sublime Text
◦ Brackets
◦ Execução
◦ Browser
Mão na massa
◦ 1 – Criar uma pasta com o nome SPOPWEB_A
◦ 2 – Abrir o editor de textos – no caso Notepad
◦ Escrever: boa noite
◦
Salvar na pasta SPOPWEB1 como “html_exemplo1.html”
◦ 3 – Duplo clique no arquivo
◦ Perceba que abriu o navegador padrão
Principais Tags de texto
 <p></p> – Principal tag de texto, compõe um parágrafo;
 <b></b> – Transforma o conteúdo em negrito;
 <i></i> – Transforma o conteúdo em itálico;
 <br/> – Essa tag não necessita de fechamento, ela executa a função de quebra de linha.
 <hr/> – Essa tag não necessita de fechamento, ela forma uma linha horizontal.
 <font color="green">verde</font> - Muda a cor da fonte para verde
 <body text="blue"> - muda a cor do corpo para azul
 <font face="arial">arial</font>muda o tipo de fonte para Arial.
 <font size=4> Altera o tamanho da fonte para 4
 <body bgcolor="yellow"> - Altera a cor do fundo para amarelo
Exemplo 1
** diferença entre o strong e o itálico:
Testar uma tag de cada vez Ambos ficam em itálico quando a página é executada.
Quando o strong é usado, o mecanismo de busca dá ênfase no
<p>IFSP - Campus São Paulo </p>
conteúdo para exibir a página.
<p><b>IFSP - Campus São Paulo </b></p>

<p><i>IFSP - Campus São Paulo </i></p>
<p><s>IFSP - Campus São Paulo </s></p>
<p><u>IFSP </u> - Campus São Paulo </p>

<p><b><i><s><u>IFSP - Campus São Paulo </u></s></i></b></p>
<strong>Ensino gratuito e de qualidade</strong>
<p> <font color="green">IFSP - Campus São Paulo</font></p>
<p> <font color="red">IFSP - Campus São Paulo</font></p>
<p> <font face="arial"><font size=30><font color="blue">IFSP-Campus São Paulo</font></p>
Exemplo2 - cabeçalho
<h1>IFSP – Campus São Paulo </h1>
<h2> IFSP – Campus São Paulo </h2>
CORES:
Código de cores para páginas HTML
Estrutura de um documento html
◦ No HTML 5, o documento padrão recebe a seguinte estrutura:
◦ <html>, <head> ,<body> e a instrução <!DOCTYPE>
<! Indica uma declaração
- Declaro ao browser qual é o tipo de
<!DOCTYPE html> documento que vou trabalhar.
<html>
<head>
<title>Título da página</title> <html></html> – Esta tag é o elemento básico da estrutura
do HTML. Assim sendo, ela conterá todos os elementos do
<meta charset="utf-8"/> seu documento. Todo documento HTML deve iniciar e
</head> finalizar com essa tag;
<body>
<head></head> – Essa tag delimita o cabeçalho do
documento. Não possui nenhum valor visível, porém é
</body> capaz de transmitir ao navegador diversas informações
muito úteis e essenciais a uma boa apresentação do seu
</html> documento HTML;
https://www.homehost.com.br/blog/tutoriais/tags-html/
Estrutura de um documento html
◦ No HTML 5, o documento padrão recebe a seguinte estrutura:
◦ <html>, <head> ,<body> e a instrução <!DOCTYPE>
<title></title> – Essa tag define o título da sua página, o nome

<!DOCTYPE html>
<html>
<head>
<meta/> – Essa tag permite inserir metadados ao seu documento, no caso
<title>Título da página</title> acima, a informação charset=”UTF-8″, que é a recomendação atual para
<meta charset="utf-8"/> encoding na Web por ser amplamente suportada em navegadores e editores de
código, além de ser compatível com praticamente todos os idiomas do mundo.
</head> Acerta alguns tipos de caracteres como o cedilha e o acento.
<body>
</body> <body></body> – a tag que representa o corpo do documento. Em síntese, é

</html> nessa tag que todos os elementos visíveis do seu site devem ser inseridos.
Metadados
Exemplo3
Exercício 1
Listas
◦ lista desordenada: tem marcadores e começa com a tag <ul> (abreviação de unordered list). A tag <li> (abreviação de List
Item, ou item da lista) é usada antes de cada item da lista. A tag de fechamento </ul> encerra a lista.
◦ Exemplo:
<ul>
<li>Técnico Integrado ao Ensino Médio
<li>Graduação
<li>Licenciatura
</ul>
https://www.tc.df.gov.br/ice4/vordf/outros/html-comandos.html
Exemplo 4
Listas
◦ O tipo de marcador pode ser trocado por "circle" (círculo), "square" (quadrado) ou "disc" (disco), adicionando uma
especificação dentro da tag <ul>
<ul type="circle">
<li>Graduação
<li>Licenciatura
</ul>
Exemplo 5
Listas
◦ Lista ordenada:
1. Técnico Integrado ao Ensino Médio
2. Graduação
3. Licenciatura
◦ Uma lista ordenada é uma lista de itens em uma ordem lógica numérica. Use as tags <ol> (abreviação de ordered list)
e </ol> para começar e terminar este tipo de lista. A tag <li> também é usada na frente de cada item.
<ol>
<li>Graduação
<li>Licenciatura
</ol>
Exemplo 6
Listas
◦ O tipo de organização pode ser alterado, adicionando uma designação de "tipo" dentro da tag <ol>.
<ol type="A"> ordena a lista com letras maiúsculas: (A, B, C...)
<ol type="a"> ordena a lista com letras minúsculas: (a, b, c...)
<ol type="I"> ordena a lista com números romanos: (I, II, III...)
<ol type="i"> ordena a lista com números romanos minúsculos: (i, ii, iii...)
◦ Se você quiser começar sua lista com um valor específico, como "6", use as tags "start" (começar) e "value" (valor) a seguir:
<ol start=5>
<li value=6>
Exemplo 7
Listas
◦ lista descritiva: cria uma lista de itens de texto com a segunda linha recuada:
◦ Graduação
◦ Tecnologia em Análise e Desenvolvimento de Sistemas
◦ Use as seguintes tags assim:

◦ <dl>
<dt>Técnico Integrado ao Ensino Médio
<dd>Informática
</dl>
◦ A tag <dt> (abreviação de descriptive list) corresponde ao texto que você quer que fique alinhado à margem
e <dd> corresponde à linha que você quer que seja recuada.
Exemplo 8
Tags âncora
◦ Com as tags âncora é possível citar trabalhos de outras pessoas e abrir outras páginas:
<a href="http://www.ifsp.edu.br"> IFSP </a>
◦ Abrir o link em uma nova janela:
<a href="https://www.ifsp.edu.br" target="_blank">IFSP</a>
◦ Cor do link: Azul é a cor padrão para links. Mas é possível alterar as cores dos seus links, inserindo estas tags dentro da
tag <body>:
Cor do link: link="cor“ / Cor do link visitado: vlink="cor"
Exemplo 9
Exemplo 10
Exercício 2
Fazer também uma lista com marcadores

quadrados e outra com subitens
Inserir um link na cor purple para abrir o site em uma

página em branco
https://www.adeniumplantshop.com.br/
Inserir Imagem
◦ As imagens na internet são ou arquivos GIF ou arquivos JPG .
◦ Os arquivos que irão aparecer na página deverão estar armazenado na mesma pasta onde está seu arquivo "html".
<img src=“logo.gif">
◦ Por padrão, seu texto e suas imagens serão justificados à esquerda quando exibidos no navegador, o que significa que eles
serão automaticamente alinhados à margem esquerda. Se você quiser "centralizar" qualquer parte da sua página, pode usar a
tag <center> e finalizar com a tag de fechamento correspondente </center>
<center><img src="logo.gif"></center>
Exemplo 11
Exercício 3
Tags de comentários
◦ Dentro de um documento, muitas vezes precisamos fazer comentários, para facilitar no desenvolvimento.
◦ Dessa forma, na tag de comentários (que é aberta com <!– e fechada com –> ), todos elementos incluídos dentro dela serão
apenas comentários, ou seja, não serão visíveis no navegador.

<p> Boa noite estudantes do Campus SPO </p> <!—p significa parágrafo -->
◦ O resultado será:
Boa noite estudantes do Campus SPO
Tabelas
◦ Assim como toda informação que você quiser exibir na janela do navegador, a tabela também deve estar entre as
tags <body> e </body> do seu documento HTML. Comece a tabela com a tag a seguir: <table>
◦ Cada linha horizontal em uma tabela começa com a tag: <tr>
◦ E cada conjunto de dados dentro da linha começa com a tag: <td>
IFSP
São Paulo Guarulhos
Pirituba Bragança Paulista
https://www.tc.df.gov.br/ice4/vordf/outros/html-comandos.html
Exemplo 12
Tabela - Borda
◦ A tag de borda (border="value") é colocada dentro da tag inicial da tabela. Você pode especificar a espessura do contorno,
determinando um valor (vamos estabelecer o valor "1").
<table border = 1>
◦ Mudar a cor do fundo (background color) da tabela toda com a tag "bgcolor" dentro da tag "table" inicial:
<table border = 1 bgcolor="pink">
◦ Uma cor de fundo também pode ser atribuída a uma linha ou a uma célula dentro da tabela. Basta adicionar bgcolor="cor" à
tag <tr> ou <td> para colorir aquela parte específica da tabela.
<tr bgcolor="red">
Tabela – alinhamento
◦ Por padrão, todos os conteúdos das células dentro de uma tabela (com <table border = 1 bgcolor="pink">
exceção dos cabeçalhos) são centralizados verticalmente e justificados <tr bgcolor="red">
à esquerda. Para mudar o alinhamento do conteúdo de uma célula, <td colspan="2" align="center">IFSP</td>
coloque as tags a seguir dentro das tags <td>, <th> ou <tr>: </tr>
◦ <tr align="center"> <tr align="center">
◦ Extensão de célula (cellspanning): o "spanning" acontece quando uma
<td>São Paulo</td>
célula ocupa o lugar de duas ou mais células na tabela. Um exemplo de <td>Guarulhos</td>
spanning de coluna: </tr>
<tr align="center">
<td>Pirituba</td>
<td>Bragança Paulista</td>
</tr>
</table>
Exemplo 13
Formulários
◦ Documento padrão HTML que permite ao usuário entrar com informações que serão processadas ou armazenadas em um
banco de dados.
◦ Normalmente os formulários têm pelo menos dois botões, um para submeter os dados digitados, enviando-os ao servidor para
processamento e outro para cancelar/limpar tudo.
◦ Um formulário pode agrupar diversos tipos de objetos, como campos para digitação de textos e números, botões de opção,
caixa de seleção e listas de opções.
◦ Para criar um formulário utiliza-se o marcador <form> e seu correspondente </form>. Para que ele seja identificado por
rotinas escritas em script como PHP, VBScript, Java Script é imprescindível que contenha um nome, representado por uma
cadeia de caracteres definida para o atributo name.
◦ A adição de um campo de entrada de dados é efetuada com o marcador <input>, o qual exige como atributos o tipo de campo e
um nome para ele. Para caixas de digitação de textos e números, emprega-se o valor text
Atributo type
◦ O atributo mais importante do marcador <input> é o type, pois ele permite que seja determinado o tipo de campo de entrada de dados. Os
valores disponíveis para esse atributo são:
 TEXT – campo de entrada de texto livre em uma única linha.
 HIDDEN – campo oculto, utilizado no envio de dados de um formulário a outro.
 PASSWORD – campo de entrada de senha, no qual o texto digitado é escondido por (*).
 FILE - campo de entrada de nome de arquivo, muito utilizado quando se deseja fazer o upload de um arquivo para o site.
 CHECKBOX – caixa de seleções de opções, utilizada em questões de múltipla escolha.
 RADIO – caixa de opção mutualmente exclusiva.
 SUBMIT – botão para envio dos dados do formulário
 RESET – Botão para limpar os campos do formulário.
 BUTTON – botão genérico, normalmente utilizado para a execução de rotinas escritas em linguagem de script.
 IMAGE – botão com imagem
Formulário
◦ As informações digitadas pelo usuário não tem o mínimo valor se não puderem ser armazenadas em algum lugar,
principalmente um banco de dados. Para efetuar esse envio, o marcador <form> contém dois atributos, sendo um deles
denominado method, que pode ser configurado com um dos seguintes valores:
◦ GET: O envio dos dados do formulário ocorre pela própria URL da página, ou seja, eles são transmitidos junto com o
endereço da página. O inconveniente desse método é que ele torna possível a visualização dessas informações na barra de
endereços do navegador, algo nada confiável.
◦ POST: Os dados são enviados de forma que não é possível ao usuário visualizá-los, ou seja, eles são transmitidos junto com o
corpo do documento, em variáveis ocultas.
◦ O segundo atributo permite determinar o URL que deverá receber os dados do formulário. Nesse URL podemos especificar
uma página que contém rotinas de script e que são responsáveis pelo tratamento das informações. Esse atributo denomina-se
action.
Exemplo 14
Exercício 4
Frames
◦ Frames (quadros) são usadas na Web. Há quem os ama e quem os odeia.
◦ O procedimento para usar ou não os frames é o mesmo, o que muda é que quando usar frames deve-se mudar a
tag <body> pela tag <frameset>
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Página simples </TITLE> <TITLE>Página simples </TITLE>
</HEAD> </HEAD>
<BODY> <FRAMESET>
AQUI ENTRA A PRIMEIRA PÁGINA NORMAL Neste campo entram os comandos em geral
</BODY> </FRAMESET>
</HTML> </HTML>
EXEMPLO:
FRAME 1
Exemplo: frame
EXEMPLO:
FRAME 2
Exercício 5
Visual studio code - download
Caso o Go live não esteja aberto, clicar
com o botão direito na tela e abrir o Live
server
Vsc – live server 4 Fechar a janela

6
3
2
1
5
Exibirá Go live depois

de instalado
Exemplo 4

Princípios HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Princípios HTML

Enviado por

Direitos autorais:

Formatos disponíveis

PRINCÍPIOS DE

<p><b>IFSP - Campus São Paulo </b></p>

<p><u>IFSP </u> - Campus São Paulo </p>

<title></title> – Essa tag define o título da sua página, o nome

</body> <body></body> – a tag que representa o corpo do documento. Em síntese, é

◦ Use as seguintes tags assim:

Fazer também uma lista com marcadores

Inserir um link na cor purple para abrir o site em uma

Vsc – live server 4 Fechar a janela

Exibirá Go live depois

Você também pode gostar