HTML 01 Basico

FIC FACULDADE INTEGRADA DO CEARA e ESTACIO DE AS CURSO DE HTML BASICO
Conceitos Bsicos O que uma Pgina Web (WEP PAGE): Um pgina WEB um documento composto basicamente de textos e cdigos especiais chamados tags que possibilitam a exibio do documento na World Wide Web. Alm da informao textual, este documento pode conter imagens, sons, animaes e at mesmo vdeos. Pode conter ainda links ou ligaes para outras pginas armazenadas em seu micro ou em qualquer local da Web. Como se acessa uma Pgina Web: O acesso a uma pgina Web feito por um programa chamado browser. Existem vrios programas desta categoria disponvel no mercado. ( Internet Explorer, Netscape) Como se cria um Pgina Web: Uma Pgina Web composta por textos e comandos especiais (tags) de uma linguagem de programao chamada HTML ( Hipertext Markup language) Como qualquer outra linguagem o programador deve escrever o cdigo-fonte seguindo as regras de sintaxe da linguagem. Este cdigo-fonte posteriormente interpretado pelo browser, que se encarregar de executar os comandos ou tags para formatar e acessar recursos de Web. O cgido fonte pode ser escrito usando o mais simples dos editores de texto (notepad). Contudo, a forma mais prtica e produtiva para escrever uma pgina web usar um editor de HTML. Esses editores encurtam o tempo de gerao da pgina pois possuem atalhos que escrevem parte dos comandos para voc. Como a linguagem HTML A HTML uma linguagem especializada , dedicada exibio e acesso de pgina Web. A linguagem consiste em um texto comum e cdigos especiais chamados tags, que na verdade, so comandos da linguagem HTML. Como so as Tags do HTML: Quando um browser exibe uma pgina We, ele l o texto da pgina e procura smbolos especiais demoninados tags, que dizem como o texto, ou informao, deve ser exibido. Por exemplo, um tag pode dizer que o texto deve ser exinibo em itlico, negrito, etc. Os tags normalmente so identificados por serem envolvidos pelos sinais < > ou </> Entre os sinais < > so identificados os comandos prorpriamente ditos. No caso de tags que necessitam envolver um texto, a sua finalizao deve ser feita usando a barra de diviso /, indicando que otag est finalizando a marcao de um texto. O formato genrico de um tag <nome do tag> texto </nome do tag> O que necessrio para criar uma pgina Web: A rigor, somente um editor de texto necessrio para gerar o cdigo fonte da pgina. Contudo para testar a pgina, voc deve possuir um browser.
A estrutura de uma pgina HTML: <html> <head> <title> Ttulo da Pgina </title> </head> <body> rea para os comandos da linguagem </body> </html> Comandos Iniciais: <HTML>...</HTML> Envolvem todas as sees de um documento (HEAD e BODY). <HEAD>...</HEAD> Envolvem a seo de cabealho do documento. <TITLE>...</TITLE> Indica o ttulo do documento para o Browser. Geralmente os Browsers apresentam este ttulo na barra de ttulo da sua Janela no Windows. <BODY>...</BODY> Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opo: BACKGROUND. Heading Cabealhos O comando <H> Os cabealhos so linhas de documento qua aparecem com o tamanho de letra diferenciado do restante do texto com a finalidade de identificar o incio de uma seo ou tpico. Existem 6 tamanhos ou modelos de cabealhos. O comando H tem a seguinte sintaxe: <Hn> texto do cabealho </Hn> onde n deve ser substitudo por um nmero de 1 a 6. O maior cabealho especificado com o comando H1 e o menor com H6.
Crie uma pasta com o nome HTML (Verifique se j no existe) Dentro desta pasta crie outra com o seu nome (Nela voc dever guardar os exerccios realizados na aula e sua homepage final Abra o bloco de notas Digite o texto a seguir (exatamente igual) E x e r c c i o <html> <head> <title> Exerccio 01 </title> </head> <body> <h1>Cabealho de nvel 1</h1> <h2>Cabealho de nvel 2</h2> <h3>Cabealho de nvel 3</h3> 1 <h4>Cabealho de nvel 4</h4> <h5>Cabealho de nvel 5</h5> <h6>Cabealho de nvel 6</h6> </body> </html> Grave esse arquivo na sua pasta Verifique com o browser como ficou esse arquivo com o nome de exercicio1.htm E x e r c c i o 2
Aps ter digitado e visto como ficou a pgina inicial criada por voc, abra novamente o arquivo exercicio1.htm utilizando o Notepad e salve-o com o nome de exercicio2.html . Abra o seu navegador e utilize-o para verificar o resultado do exerccio Quando estiver OK, faa as seguintes alteraes, testando uma a uma : Mude o ttulo do seu documento Retire as tags <HTML> e </HTML> Retire a tag </HEAD> Retire as tags <TITLE>
Comandos Bsicos do Corpo do Documento O comando <BODY> ... </BODY> Todo o contedo do documento HTML deve estar entre as tags <BODY> e </BODY> . Na verso 3.0 do HTML a tag <BODY> passou a admitir os atributos BGCOLOR, TEXT, LINK, ALINK e VLINK, que definem as cores de preenchimento da pgina, texto, links no visitados, link ativos e links visitados respectivamente e BACKGROUND, que define uma imagem de fundo para a pgina. Se no forem especificadas nem BGCOLOR e nem BACKGROUND, a cor de fundo da pgina ser a padro do navegador. Dicas As imagens mostradas pelos navegadores normalmente devem estar nos formatos GIF (.gif) e JPEG (.jpg) . Outros formatos no so aceitos por todos os navegadores. As cores devem ser especificadas no formato RGB (Red, Green, Blue) e em hexadecimal . Na forma geral #RRGGBB.
Alguns exemplos : #FFFFFF (Branco) #000000 (Preto) #FF0000 (Vermelho) Exemplo para teste:
#00FF00 (Verde) #0000FF (Azul) #FF00FF (Magenta)
#00FFFF (Cian) #FFFF00 (Amarelo) #A8A8A8 (Cinza claro)
#C0C0C0 (Cinza) #BC8F8F (Pink) #4F2F4F (Violeta)
<HTML> <HEAD> <TITLE>Esse documento tem o fundo amarelo !! </TITLE> </HEAD> <BODY BGCOLOR=#FFFF00> </BODY> </HTML>
E x e r c c i o 3
Digite o Exemplo para teste utilizando o Notepad e salve-o com o nome de exercicio21.htm. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Quando estiver OK, faa as seguintes alteraes, testando uma a uma : Mude a cor de fundo Teste outras combinaes no formato RGB Encontre um arquivo dos tipos GIF ou JPEG e coloque como fundo do seu documento Retire a tag </BODY>
Comandos do Texto do Documento O texto que compe o documento HTML deve estar contido entre as tags <BODY> e </BODY> e isso pode ser facilmente testado. Existem ento algumas tags modificadoras para formatar esse texto, como a seguir. Tag Faz uma quebra de linha no texto. O texto em um documento HTML no faz quebras de linha automticas. Essas devem ser inseridas utilizando-se tags .
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio4.html Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Insira tags nesse documento para que seja melhor visualizado. E x e r c c i o <HTML> <HEAD> <TITLE> Exemplo que mostra quebras de linhas </TITLE> </HEAD>
<BODY> O HTML precisa de tags especiais de quebra de linha . 4 Os ENTERs colocados no texto no geram quebras de linhas . </BODY> </HTML> Tags ... Essas tags criam pargrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag . Admitem tambm atributo de alinhamento ALIGN=left ( esquerda), ALIGN=right ( direita) e ALIGN=center (ao centro). Tags ... Coloca em negrito o texto envolvido. Tags ... Coloca em itlico o texto envolvido. Tags ... Sublinha o texto envolvido. Tags ... e ... O texto envolvido fica Subscrito e Sobrescrito , respectivamente. E x e r c c i o 5
Altere o exerccio anterior trocando as tags por e observe a diferena. Aumente o texto e deixe algumas linhas com para facilitar a visualizao. Utilize variaes de alinhamento nos pargrafos. Coloque algumas tags de formatao de fontes para criar textos enfatizados (negrito, itlico, sublinhado, subscrito e sobrescrito)
E x e r c c i o
Utilize o Notepad para criar um documento em HTML, que d um resultado semelhante ao que temos a seguir, note que ser necessrio misturar o uso de diversas tags. Faa alteraes no atributo TEXT da tag <BODY> para variar a cor do texto.
Faculdade Integrada do Cear Disciplina de eCommerce
Na disciplina de eCommerce da FIC os alunos desenvolvem sua pgina pessoal utilizando a linguagem HTML* , 6 HyperText Markup Language
*
HTML a linguagem utilizada nas pginas da Internet
Comandos de Formatao de Fontes Tags ... As tags ... fazem a formatao de fonte no texto que envolvem no documento HTML. Juntamente a essas tags utilizam-se os atributos SIZE, FACE e COLOR para definir tamanho, tipo do fonte e cor, respectivamente. Dicas Os tamanhos de fontes podem variar entre 1 e 7 apenas. Cuidado com a utilizao excessiva de fontes, no garantido que exista a fonte especificada no computador que est acessando a sua pgina na Internet. Se forem colocados vrios tipos de fontes separados por vrgulas, o navegador utilizar a primeira fonte da lista que estiver disponvel na mquina. Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio6.htm. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa alteraes nos atributos e coloque quebras de linhas onde for necessrio.
E x <HTML> e <HEAD> r <TITLE> c Exemplo que mostra os possveis variaes com fontes. </TITLE> c </HEAD> i o <BODY> Arial, tamanho 1 6 Helvetica, tamanho 3 Fonte de tamanho 5 Times o padro </BODY> </HTML>
Tag <BASEFONT> Tem a finalidade de definir um padro para a fonte que ser utilizada no documento todo. Ainda assim possvel utilizar as tags ... para alterar esse padro.
E x e <HTML> r <HEAD> c <TITLE> Exemplo que mostra os possveis variaes com fontes. c </TITLE> i </HEAD> o <BASEFONT SIZE=4 COLOR=#00FFFF FACE=arial, helvetica, times> 7 Todo esse texto deve estar em fonte Arial de tamanho 4 e cor azul claro. Se na mquina no tiver o fonte Arial, ser utilizado o Helvetica e em ltimo caso, Times. </BODY> </HTML>
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer62.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa alteraes nos atributos e coloque quebras de linhas onde for necessrio.
Comando para fazer ligaes entre documentos - Links
Uma das coisas mais interessantes em um documento HTML a ligao entre os documentos (links).
Comando <A>...</A>
Faz a ncora entre documentos ou partes de um mesmo documento. Deve sempre ser utilizada acompanhada de um atributo que far a especificao do tipo de ncora que se deseja. O texto que est includo entre as tags <A> e </A> ser apresentado como link no documento (sublinhado e em cor destacada). Abaixo alguns dos atributos mais comuns que podem ser utilizados com a tag <A> :
HREF : Marca a ncora como um link para outro document o, recurso ou parte do mesmo documento. NAME : Marca a ncora para um possvel local do documento com um nome para que possa ser referido como alvo de um link . O nome especificado deve ser nico no documento (no podem haver duas ncoras com o mesmo nome no mesmo documento).
Dicas Existem ainda os atributos REL, VER, URN, TITLE e TARGET, menos utilizados atualmente na programao HTML.
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de execicio8.htm. Abra o seu navegador e utilize -o para verificar o resultado do exerccio. E x e r c c i o <HTML> <HEAD> <TITLE> Link para o exerccio 7. </TITLE> </HEAD>
<BODY> <H1> Ser que possvel ligar dois documentos ?? </H1> 8 <A HREF="exercicio7.htm"> Clique aqui para ir ao exerccio 7 </A> <A NAME="Final">Essa parte est no final do documento.</A> </BODY> </HTML> Dicas Coloque textos curtos e significativos para seus links. Na tag <BODY> possvel especificar a cor dos links no visitados, links visitados e link ativo, utilizando os atributos LINK, VLINK e ALINK, respectivamente. Quando referindo pginas que esto fora do diretrio onde seu documento est armazenado no se esquea de colocar o caminho completo para o link, por exemplo, http://www.facens.br para fazer um link para o site da FACENS.
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercicio9.htm. Abra o seu navegador e utilize -o para verificar o resultado do exerccio. E x e r c c i o <HTML> <HEAD> <TITLE> Link para o exerccio 8. </TITLE> </HEAD>
<BODY> <H1> Vamos ligar esse documento parte inferior do exerccio 9 </H1> 9 <A HREF="exercicio9.html#Final"> Clique aqui para ir ao final do exerccio 9 </A> <A HREF="#Final"> Clique aqui para ir ao final desse exerccio </A> <A NAME="Final">Final desse documento.</A> </BODY> </HTML>
E x e r c c i o 1 0
Crie um documento HTML que faa um espcie de menu com os exerccios feitos at agora, utilizando um link para cada um deles. Gaste o que voc aprendeu, utilize a variao de cores, fontes e efeitos em fontes. Tudo o que for escrito entre as tags <A> e </A> ser considerado parte do link.
Imagens Tag <IMG>
Insere uma imagem dentro de um documento HTML. As imagens, assim como em <BODY BACKGROUND >, devem estar nos formatos GIF ou JPEG. Os atributos normalmente utilizados so : - SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag <IMG> no tem finalidade. - ALT : Texto alternativo para a imagem (muito til quando o usurio no est exibindo as figuras. O texto auxilia no entendimento do significado daquela imagem). - ALIGN : Alinhamento do texto em relao imagem. - HEIGHT : Altura da figura em pixels (se no utilizada, a figura ser mostrada em sua altura original). - WIDTH : Largura, semelhante a HEIGHT.
Dicas
Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponveis para a tag <IMG>.
E x e <HTML> r <HEAD> c <TITLE> Mostrando figuras no documento HTML. c </TITLE> i </HEAD> o <BODY> 1 1 <IMG SRC="figura1.gif"> Veja uma figura no documento... <IMG SRC="figura2.gif" ALIGN="top"> Essa figura tem o texto alinhado acima <IMG SRC="figura3.gif" ALT="Texto alternativo"> Passe o mouse sobre a figura <IMG SRC="figura4.gif" HEIGHT="100"> Essa figura esta com a altura modificada </BODY> </HTML>
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exercico11.htm Encontre algumas figuras em seu disco e substitu-a os nomes figura colocados nas tags <IMG> do documento. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa experincias com a combinao de atributos e crie links utilizando as imagens para os exerccios anteriores.
Dicas
possvel colocar imagens como links. Basta inclu-la entre as tags <A> e </A>.
Texto Pr-formatado
Tags <PRE> ... </PRE>
Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente formatado. Com a utilizao desse elemento, todos os espaos e saltos de linha so considerados de acordo com o que inserido no documento. Escreva um documento em HTML que apresente uma pequena tabela conforme E mostrada abaixo : x e +----------------------------------------+ r | Tabela de Preos | c +--------------------------+-------------+ | Maa argentina | R$ 10,00 | c | Laranja Pera | R$ 5,00 | i | Banana Nanica | R$ 2,50 | o +--------------------------+-------------+ 1 3

HTML 01 Basico

Enviado por

Dados do documento

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

HTML 01 Basico

Enviado por

Direitos autorais:

Formatos disponíveis

FIC FACULDADE INTEGRADA DO CEARA e ESTACIO DE AS CURSO DE HTML BASICO

#00FF00 (Verde) #0000FF (Azul) #FF00FF (Magenta)

#00FFFF (Cian) #FFFF00 (Amarelo) #A8A8A8 (Cinza claro)

#C0C0C0 (Cinza) #BC8F8F (Pink) #4F2F4F (Violeta)

Faculdade Integrada do Cear Disciplina de eCommerce

HTML a linguagem utilizada nas pginas da Internet

Comando para fazer ligaes entre documentos - Links

Imagens Tag <IMG>

Tags <PRE> ... </PRE>

Você também pode gostar