Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML 01

    Enviado por

    Vinicius Lovato
    16 visualizações5 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    16 visualizações5 páginas

    HTML 01

    Enviado por

    Vinicius Lovato

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 5

    Tutorial Mdulo 1: Introduo e primeiros passos Por Daniel Chicayban (dan@trendnet.com.

    .br) Introduo A HyperText Markup Language e a Web No ncleo de toda pgina da Web, encontramos a HyperText Markup Language, uma linguagem de diagramao baseada em marcadores, ou tags como mais comumente conhecido. A HTML (HyperText Markup Language) uma linguagem simples baseada em texto que podemos visualizar em qualquer plataforma. Pode ser visualiza em navegadores somente texto, como o Lynx ou em navegadores mais avanados como Netscape Navigator e Internet Explorer. A HTML , na verdade, apenas texto com cdigos de formatao que especificam diferentes fontes e estilos ou at mesmo outras funes mais avanadas, que sero abordadas ao longo deste tutorial. Ela muito semelhante aos antigos editores de texto que exigiam a insero de tags para especificar tipos em itlico, negrito ou sublinhado. Convenes utilizadas neste tutorial importante destacar algumas observaes antes de comearmos a trabalhar diretamente com a linguagem. Este tutorial objetivo, gradativo e exemplificado, ou seja, a cada nova tag ou instruo, ser dado um exemplo e desprezaremos informaes complementares, quando possvel, para evitar disperso no aprendizado. Ser indicado um editor HTML quando necessrio, ou seja, at a dada instruo, aconselhvel um editor de texto simples, como o Bloco de Notas do Windows, por exemplo. Algumas vezes, sero apresentados tpicos como Dica, Observao ou alguma nota adicional que ajudar o leitor a compreender o que est sendo estudado. Quando for apresentado o tpico LINK, significa que uma URL ser indicada para posterior referncia. Neste caso, o leitor poder anotar o endereo para enriquecer seus conhecimentos posteriormente. Utilizaremos a expresso Mos Obra! para especificar que trechos na linguagem HTML sero apresentados como exemplos. Diagramando com a HTML Introduo Os navegadores seguem trs regras bsicas ao apresentarem a pgina. So elas:

    Os espaos em brancos so ignorados. Isto significa que inserir espaos, como os causados pelas teclas [tab] e [enter], no afetar em nada a interpretao do documento pelo navegador. As tags de formatao no se distinguem pelas caixas, ou seja, uma tag escrita em caixas altas ter o mesmo efeito do que uma tag escrita em caixas baixas. Caixas altas so as letras maisculas. Ex: CAIXA ALTA. Em sua maioria, as tags de formatao formam pares. Ex: <HTML> e </HTML> Estrutura de um documento Todo documento HTML inicia-se por uma tag <HTML> e encerra-se por uma tag </HTML>. Um documento HTML consiste em duas partes um cabealho e um corpo. O cabealho contm informaes a respeito do documento como, por exemplo, o ttulo. O corpo contm o documento propriamente dito. O cabealho e o corpo se distinguem pelo uso das tags <HEAD> e <BODY>. Observe a estrutura. <HTML> <HEAD> elementos contidos no cabealho </HEAD> <BODY> documento apresentado pelo browser </BODY> </HTML> Elementos do cabealho Ttulo do documento O cabealho de um documento tem apenas um elemento de uso praticamente obrigatrio: <TITLE>Ttulo da pgina</TITLE>. Existem outros elementos adicionais de importncia grande, mas abordaremos tais elementos mais frente. NOTA: Mecanismos de buscas, na Internet, utilizam os elementos <TITLE> e </TITLE> para definir um ttulo na apresentao do resultado da procura. Se o diagramador no insere um ttulo na sua pgina HTML, o mecanismo de busca define o ttulo com o endereo da pgina, ou seja, a URL da pgina. Elementos do corpo Ttulos A HTML aceita seis estilos de ttulos, que so usados para fazer o texto se destacar em diversos nveis. Esses ttulos so numerados de 1 a 6, sendo <H1> o maior deles e, obviamente, <H6> o menor.

    Pargrafos A insero de uma tag <P>, diz ao navegador que o texto a seguir inicia um pargrafo. Dessa forma, o navegador apresenta o texto com uma linha abaixo dos elementos anteriores. Pargrafos com <P> no precisam de um correspondente de fechamento, embora uma boa prtica seja inserir a </P> encerrando o pargrafo, pois em documentos que utilizam componentes avanados da linguagem, necessrio. Uma vez que pretendemos avanar o nosso conhecimento, interessante se habituar, desde j, com a tag </P>. Mos obra! Insira o trecho abaixo em um novo arquivo no Bloco de Notas. <HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> <BODY> <H1>A linguagem HTML muito simples</H1> Comeo aqui o meu aprendizado para que no ano que vem esteja concorrendo ao maior prmio da Internet brasileira. <P>Crio aqui um pargrafo para visualizar, na prtica, o efeito desta tag.</P> </BODY> </HTML> Depois de inserir, salve-o com a extenso .htm ou .html. O uso da extenso .htm importante e obrigatrio para que o navegador saiba que se trata de um documento HTML. Agora, abra o arquivo no seu navegador preferido e observe os resultados. DICA: Faa uma experincia. Remova as tags <P> e </P> ou as <H1> e </H1> para ver como o navegador interpretar o documento. Estilos de formatao Os estilos aceitos pela HTML so o negrito, o itlico, o sublinhado e o de mquina de escrever (fonte monoespaada), vamos inser-los no documento. Mos obra! Insira no mesmo documento criado anteriormente, o seguinte trecho. <P> Aprendendo com tutoriais passo-a-passo muito mais fcil.<BR> Agora j posso trabalhar com a utilizao de estilos<BR> So exemplos: <B>Negrito</B>, <I>Itlico</I>, <U>Sublinhado</U> e <TT>Monoespaado</TT>

    OBSERVAO: Ateno ao inserir o trecho abaixo no documento j existente. Coloque o trecho depois de qualquer elemento, mas antes das tags </BODY> e </HTML>, caso contrrio o navegador ao encontrar as tags </BODY> e </HTML> interpreta que o documento acabou e no apresentar mais nada aps. NOTA: Houve a insero de uma tag nova, no trecho acima. A tag <BR> semelhante <P>, porm com uma diferena, ela apenas quebra o texto para uma nova linha, enquanto que a tag <P> pula uma linha. Repare tambm que no houve tag de fechamento para a <BR>, isso se deve ao fato de no ser necessrio. LINK: Existe um consrcio regulamentador da linguagem HTML na Web. o famoso W3C (Wolrd Wide Web Consortium) e pode ser visitado na URL http://www.w3c.org. Separadores J estamos acostumados com linhas que delimitam textos e pargrafos, que ajudam a diagramar o contedo dos documentos. Essas linhas so simples de fazer. Mos obra! Insira em qualquer parte do documento a tag <HR> <P>Aprendendo HTML o primeiro passo para construir a minha homepage.</P> <HR> importante praticar para manter o conhecimento afiado. Listas A linguagem aceita diversos tipos de listas formatadas para apresentao dos dados. Todas as listas exigem um par de tags que indica o tipo de lista, alm de uma tag no incio de cada item da lista. As mais importantes so as seguintes. Listas ordenadas Utitlizam as tags <OL> e </OL> Listas no ordenadas Utilizam as tags <UL> e </UL> Mos obra! Insira no seu documento HTML, inicialmente uma lista no ordenada com as suas frutas favoritas. <H3>Minhas frutas <U>favoritas</U></H3> <UL> <LI>Ma <LI>Pra <LI>Uva <LI>Tamarindo

    </UL> <P>Agora, vamos formatar uma lista ordenada e comparar as duas.</P> <H3>Meus livros preferidos</H3> <OL> <LI>A Lei do Triunfo, Napoleon Hill <LI>Descartes, coleo Os Pensadores <LI>Memorial de Maria Moura, Rachel de Queiroz </OL> DICA: considerado uma boa prtica em formatar listas, criar uma margem esquerda para os itens das listas, mantendo as tags organizadas no documento. Normalmente, esta margem feita teclando uma s vez a tecla [tab], o que no afeta em nada o resultado na interpretao do navegador, pois como j foi dito, espaos em branco so ignorados.

    Você também pode gostar