Introdução a HTML

Prof. Jesiel Viana

@jesielviana

# Objetivos Conhecer a liguagem de marcação HTML e entender como utiliza-la para desenvolvimento de página Web.
## Contexto Web: documentos em hipermídia que podem ser interligados
## Problema Um formato de documento que permita adicionar texto, imagens, vídeos, etc de forma padronizada o mais simples possível e que possam ser interligados.
# Hypertext Markup Language - HTML
## HTML É uma linguagem de marcação, formada por um conjunto de ***tags***

Estrutua básica de uma Página HTML


						<!DOCTYPE html>
						<html>
						  <head>
						   
						  </head>

						  <body>
						   
						  </body>
						</html>

Exemplo de página Web

Projeto Supervisionado
Disciplina do IV módulo curso do Técnico em Informática do Instituto Federal do Piauí - Campus Picos

Código HTML para exibir a página anterior


						<!DOCTYPE html>
						<html>
						 <head>
						  
						 </head>
						 <body>
					   <h1>Projeto Supervisionado</h1>
						  <p>Disciplina do IV módulo curso do Técnico em Informática do Instituto Federal do Piauí - Campus Picos </p>
						 </body>
						</html>
OBS: todo arquivo/documento HTML deve ser salvo com a extensão .html (nomearquivo.html)

Anatomia de uma elemento HTML

Uma página Web é formada por um conjunto de elementos

## Vamos praticar!!! Vamos começar criando um site pessoal, um site sobre você.
## Ferramentas do desenvolvedor - Computador - Navegador Web (Chrome, Firefox, etc) - Editor de texto - [Visual Studio Code](https://code.visualstudio.com/) - [Codepen](https://codepen.io/) (Editor Online) - [Repl.it](https://repl.it/)
## Começando - Sobre o que é seu site? - Quais informações você vai colocar no site (textos, imagens, etc)? - Como será seu site (cor de fundo, fonte, alihamento)?

Rascunhando seu design

Pegue papel e caneta e faça um rascunho de como você deseja o modelo do seu site.

Código HTML da minha página


					<!DOCTYPE html>
					<html lang="pt-br">
					 <head>
					  <title>Jesiel Viana</title>
					 </head>
					 <body>
					  <header>
					   <img src="https://pbs.twimg.com/profile_images/1254857099391238144/gpdJCD7R_400x400.jpg">
					   <h1>Jesiel Viana</h1>
					  </header>
					  <main>
					   <h2>Formação</h2>
					   <p><b>Graduação:</b> Sistemas de Informação</p>
					   <h2>Experência</h2>
					   <ul>
					    <li>Programador</li>
					    <li>Professor</li>
					   </ul>
					  </main>
					  <footer>
					   2020 - @jesielviana 
					  </footer>
					 </body>
					</html>
## Atividade 1. Faça o rascunho da sua página Web pessoal 1. Envie o rascunho da sua página para o Google Classroom 1. Escreva o código HTML da sua página 1. Envie o código HTML da sua página para o Google Classroom
## Referências - [Com será o seu site?](https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer) - [Quais ferramentas os profissionais usam?](https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos) - [HTML Básico](https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico) - [Elementos HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element) - [Apostila Caelum - Introdução a HTML e CSS](https://www.caelum.com.br/apostila-html-css-javascript/introducao-a-html-e-css/)

Introdução a HTML

@jesielviana

Fim!