1 - Aula Ferramentas para Sistema WEB

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 do cdigo 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 Language
HyperText - Hiper Texto
Mark-up - Marcao
Language - Linguagem
Quem criou?
HTML foi 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 o HTML ele lanou as
fundaes da Internet tal como a conhecemos atualmente.
Linguagem de Marcao em Hipertexto
Entendendo todo o caminho
A linguagem das Tags
O 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 <abertura> e de fechamento
</fechamento>
Tudo que estiver contido dentro da abertura e fechamendo ou at dentro da
tag sera processado conforme o comando pelo navegador
Como toda regra tem sua exceo no HMTL algumas tags no tero
fechamento ou sero diferemente como o <BR \>
Exemplos
<html> </html>
<title> </title>
<br> ou <br \>
<Img src=my.gif width=50 height=50 align=right alt=My image>
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66>

Hello, today is <?php echo date('l, F jS, Y'); ?>.

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++
Dreamweaver
Microsoft Expression
Aptana
Neatbeans
Bloco de notas ou Notepad++
Usaremos ou Bloco de notas ou Notepad++ de inicio. Exemplo do Notepad++:
O HTML
Toda pgina HTML inicia e termina com o comando <HTML>, havendo um
espao para cabealho <HEAD>, ttulo <TITLE> e corpo da pgina <body>.
Exemplo:

<HTML>
<!COMENTRIOS!>
<HEAD>
<TITLE> TITULO DO DOCUMENTO </TITLE>
</HEAD>
<BODY>

Textos, imagens, links, etc...

</BODY>
</HTML>

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
<body> (corpo):

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

Para cor de fundo
<BODY BGCOLOR=#2F4F4F>

Para usar uma imagem como fundo
<BODY BACKGROUND=imagem.jpg>

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

<BODY BGCOLOR=transparent> ou <BODY BGCOLOR=allowtransparency=true>
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 <BODY> </BODY>
<BODY nome_do_atributo=valor_do_atributo">
Alguns dos Atributos:
BACKGROUND=Sunset.jpg
BGCOLOR=color
TEXT=color
LINK=color (links no visitados)
VLINK=color (links visitados)
ALINK=color (quando selecionado)

Pode haver mais de um atributo no body apenas separado por
espao. Ex:
<BODY text=black link=blue>
Formatao de Texto

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

<H1>texto destacado</H1>
<B>texto em negrito</B>
<I>texto em itlico</I>
<U>texto sublinhado</U>
<BR> ou <BR />quebra linha
<P>novo pargrafo</P>

No lugar de <H1> pode-se utilizar <h2>, <h3>, 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: <H2 ALIGN="center"> Texto 2 (H2)</H2>

Exemplos de Headings (Titulos)

<HTML>
<HEAD>
<TITLE>Titulo do documento</TITLE>
</HEAD>
<BODY>
Exemplos de 6 titulos de texto:
<H1>Texto 1 (H1)</H1>
<H2 ALIGN="center">Texto 2 (H2)</H2>
<H3><U>Texto 3 (H3)</U></H3>
<H4 ALIGN="right">Texto 4 (H4)</H4>
<H5>Texto 5 (H5)</H5>
<H6>Texto 6 (H6)</H6>
</BODY>
</HTML>
Resultados:

Pargrafo
<P> define um pargrafo

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

Multiplos <P> no criam linhas em branco

Use <BR> para criar uma linha em branco

Textos podem ter s alguma parte com pargrafo usando <P> e </P>

Porem </P> opcional.

Textos pr formatados ou cdigos.
Alguns cdigos ou caracteres podem no funcionar, h duas formas de usa-los:
A primeira usando o comando <PRE> </PRE>, exemplo:
<PRE>
if (a < b) {
a++;
b = c * d;
}
</PRE>

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:

<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one
</LI>
<LI> Sub-sublist item two
</LI>
</OL>
</OL>
</OL>
No Ordenadas

<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>

Exemplos das Listas
Ordenada No Ordenada
Mais tags e seus exemplos

<H1>Titulo</H1>
<B>Negrito</B><BR>
<I>Itlico</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Sublinha</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> +y<SUP>2</SUP><BR>
<SMALL>Pequeno</SMALL><BR>
<BIG>Grande</BIG><BR>
<STRIKE>Sobrelinha</STRIKE><BR>
<B><I>Negrito Itlico</I></B><BR>
<BIG><TT>Grande Monospaced</TT></BIG><BR>
<SMALL><I>Pequeno Itlico</I></SMALL><BR>
<FONT COLOR="GRAY">Cinza</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
Links (Anchors)
Link para uma url absoluta:
Contate a <A HREF="htttp:www.microsoft.com"> Microsoft </A> para reportar
um problema.

Links relativos:
Exemplo:
<A NAME=#Topo> Titulo </A>
Texto Texto
Texto Texto
Texto Texto
Texto Texto
<A HREF="#Topo">Topo </A>

O link <A HREF leva diretamente ao topo da mesma pgina.
O mesmo pode ser usando em urls exemplo: www.microsoft.com/#topo
Imagens <IMG>
Atributos usado na TAG de imagem:
SRC obrigatrio
WIDTH, 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:

<IMG SRC=anhanguera.jpg" ALIGN=left" WIDTH="150" HEIGHT="150" ALT=logo">

Tabelas
Tabelas HTML podem ser criadas com os seguintes comandos:

<table border=1> marca o incio de uma tabela e a espessura de sua borda;

<tr></tr> cria/finaliza linhas em uma tabela;

<td></td> cria/finaliza colunas nas linhas de uma tabela;

</table> finaliza uma tabela.
Exemplo de Tabelas
Exemplo com 1 linha e 2 colunas:

<TABLE BORDER=1>
<TR>
<TD>
linha1 coluna1
</TD>
<TD>
linha1 coluna2
</TD>
</TR>
</TABLE>
Frames ou iFrames
Uma mesma pgina em HTML pode exibir outra pagina dentro de si mesma
usando o comando IFRAME, exemplo:

<iframe name=area1 src=tabela.html width=100% height=50%>
<iframe name=area2 src=heading.html width=100% height=50%>

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.
Tabelas
Tabelas HTML podem ser criadas com os seguintes comandos:

<table border=1> marca o incio de uma tabela e a espessura de sua borda;

<tr></tr> cria/finaliza linhas em uma tabela;

<td></td> cria/finaliza colunas nas linhas de uma tabela;

</table> 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 aprendidas
Criar um link para uma pagina local e uma externa
Adicionar uma imagem
Criar uma tabela
Criar um IFRAME

Contato do Professor:

Email: andersoncursino@aedu.com
Skype: anderson.cursino
Gtalk: andersoncursino@aedu.com

1 - Aula Ferramentas para Sistema WEB

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

1 - Aula Ferramentas para Sistema WEB

Caricato da

Copyright:

Formati disponibili

Anlise de Sistemas

Prof. Tutor: Anderson Cursino

Potrebbero piacerti anche