Anlise de Sistemas

Prof. Tutor: Anderson Cursino

O que HTML?HTML uma linguagem que possibilita apresentar informaes (documentao de pesquisas cientficas) na Internet. Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz docdigo HTML. Para visualizar o cdigo HTML de uma pgina a maioria dos navegadores possuem uma opo de visualizar o Cdigo Fonte (Source).HTML HyperText Mark-up LanguageHyperText - Hiper Texto Mark-up - MarcaoLanguage - LinguagemQuem criou?HTMLfoi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possvel o acesso e a troca de informaes e de documentao de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar oHTMLele lanou as fundaes da Internet tal como a conhecemos atualmente.Linguagem de Marcao em Hipertexto

Entendendo todo o caminho

A linguagem das TagsO HTML utiliza-se de tags (rtulos) para identificar e informar ao navegador como apresentar o site ao usurio.Todas as tags tem o mesmo formato comeando com < e terminando com > Existem 2 tipos de tags de abertura e de fechamento Tudo que estiver contido dentro da abertura e fechamendo ou at dentro da tag sera processado conforme o comando pelo navegadorComo toda regra tem sua exceo no HMTL algumas tags no tero fechamento ou sero diferemente como o Exemplos ou

Hello, today is.

Php?

HMTL, PHP, XML, ASP, HTML5.... O que tudo isso?Constante mudanas e atualizao. O mundo no para.

HTML e HTML 5 Linguagens Interpretadas por Software no usurio final (Navegador).

PHP, ASP, Python, etc.. Linguagens Interpretadas por software antes do usurio final.

Onde programo HTML?A programao em HTML leva a vantagem de poder ser feita at mesma no Bloco de Notas de qualquer sistema operacional seja windows, mac, linux, etc... Porem h programas que facilitam e auxiliam ao desenvolvimento seja apenas texto ou facilitando com a edio grafica o chamado WYSIWYG What You See Is What You Get ("O que voc v o que voc obtm). Alguns programas:

Notepad++DreamweaverMicrosoft ExpressionAptanaNeatbeans

Bloco de notas ou Notepad++Usaremos ou Bloco de notas ou Notepad++ de inicio. Exemplo do Notepad++:

O HTMLToda pgina HTML inicia e termina com o comando , havendo um espao para cabealho , ttulo e corpo da pgina . Exemplo:

TITULO DO DOCUMENTO

Textos, imagens, links, etc...

Funes dentro de TAGS

Algumas Tags possuem funes dentro delas onde determinam cores, locais, nomes e uma vasta gama de opoes para personalizao, como exemplo do (corpo):

A cor de fundo ou papel de parede de uma pgina HTML pode ser informada no comando ou . Exemplo:

Para cor de fundo Para usar uma imagem como fundo

Obs: e podem ser aplicados a outras tags. Tambm pode-se utilizar bgcolor=transparent allowtransparency=true para fundo transparente.

ou

Cores e seus cdigos

As cores para internet e navegadores e softwares de edio de imagem usam padres RGB (red, green, blue) e CMYK (cyan, magenta, yellow, black).

A numerao sua numerao em hexadecimal sendo #000000 o mais escuro e #ffffff o mais claro.

Uma tabela pode ser encontrada em www.nevermore.com.br/tads/cores.html

Elementos do

Formatao de Texto

Vrios comandos podem ser utilizados para formatao de texto, dentre eles alguns que podemos destacar:

texto destacadotexto em negritotexto em itlicotexto sublinhado ou quebra linhanovo pargrafo

No lugar de pode-se utilizar , , etc. Alm do comandos citados acima, existem outros disponveis para pesquisas em diversos sites na Internet.

Algumas dessas formataes podem conter ALIGN como atributo e eles podem ser: LEFT, RIGHT, CENTER.

Ex: Texto 2 (H2)

Exemplos de Headings (Titulos)

Titulo do documentoExemplos de 6 titulos de texto:Texto 1 (H1)Texto 2 (H2)Texto 3 (H3)Texto 4 (H4)Texto 5 (H5)Texto 6 (H6)

Resultados:

Pargrafo define um pargrafo

Adicione ALIGN="posio" (left, center, right)

Multiplos no criam linhas em branco

Use para criar uma linha em branco

Textos podem ter s alguma parte com pargrafo usando e

Porem opcional.

Textos pr formatados ou cdigos.Alguns cdigos ou caracteres podem no funcionar, h duas formas de usa-los:A primeira usando o comando , exemplo:

if (a < b) { a++; b = c * d;}

A segunda usando uma tabela de caracteres para HTML, exemplo:

http://www.w3schools.com/tags/ref_entities.asp

Listas

Para se criar listas, podemos usar dois mtodos que so:

Ordenadas:

Item one Item two Sublist item one Sublist item two Sub-sublist item one Sub-sublist item two

No Ordenadas

One Two Three Four Five Six

Exemplos das ListasOrdenadaNo Ordenada

Mais tags e seus exemplos

Titulo Negrito Itlico Teletype (Monospaced) Sublinha Subscripts: f0 + f1 Superscripts: x2 +y2 Pequeno Grande Sobrelinha Negrito Itlico Grande Monospaced Pequeno Itlico Cinza Delete Insert

Links (Anchors)Link para uma url absoluta:Contate a Microsoft para reportar um problema.

Links relativos: Exemplo: Titulo Texto TextoTexto TextoTexto TextoTexto TextoTopo O link

Imagens Atributos usado na TAG de imagem:SRC obrigatrioWIDTH, HEIGHT podem ser usados para definir altura e largura da imagem, deve ser especificado em numero de pixels ou porcentagem:WIDTH="357"HEIGHT="50%"As imagens se dimensionam automaticamente para ocupar todo espao setado ou original.ALT pode ser usado para dar titulo de popup quando se para o mouse em cima da imagem.

Exemplo:

TabelasTabelas HTML podem ser criadas com os seguintes comandos:

marca o incio de uma tabela e a espessura de sua borda;

cria/finaliza linhas em uma tabela;

cria/finaliza colunas nas linhas de uma tabela;

finaliza uma tabela.

Exemplo de TabelasExemplo com 1 linha e 2 colunas:

linha1 coluna1 linha1 coluna2

Frames ou iFramesUma mesma pgina em HTML pode exibir outra pagina dentro de si mesma usando o comando IFRAME, exemplo:

NAME nome do frame.SRC a pagina a ser aberta, pode ser usar sites externos.WIDTH largura da frame em pixels ou porcentagem.HEIGHT altura do frame em pixels ou porcentagem.

TabelasTabelas HTML podem ser criadas com os seguintes comandos:

marca o incio de uma tabela e a espessura de sua borda;

cria/finaliza linhas em uma tabela;

cria/finaliza colunas nas linhas de uma tabela;

finaliza uma tabela.

Exercicio:Criar um HTML aplicando todos os conceitos aprendidos na aula de hoje:

Utilizar o cabealho com abertura do HTML, titulo, body (modificando cores de fundo e link)Utilizar formataes de texto como heading, paragrafo, pulo de linha, tamanho, textos pr formatados.Criar 2 listas (ordenadas e no ordenada)Utilizar algumas das Tags aprendidasCriar um link para uma pagina local e uma externaAdicionar uma imagemCriar uma tabelaCriar um IFRAME

Contato do Professor:

Email: andersoncursino@aedu.comSkype: anderson.cursinoGtalk: andersoncursino@aedu.com