0% acharam este documento útil (0 voto)
7 visualizações7 páginas

Estrutura e Tags Básicas de HTML

Este documento fornece uma visão geral das tags e conceitos HTML. Ele discute tags comuns como , , , , cabeçalhos, parágrafos, listas, tabelas e formulários. Descreve para que as tags são usadas, seus atributos e como estruturam e organizam o conteúdo em um documento HTML. Várias tags de formatação de texto e caracteres especiais também são abordados. O documento tem como objetivo ensinar o básico de HTML por meio de explicações e exemplos de tags.

Traduzido por

ScribdTranslations
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
7 visualizações7 páginas

Estrutura e Tags Básicas de HTML

Este documento fornece uma visão geral das tags e conceitos HTML. Ele discute tags comuns como , , , , cabeçalhos, parágrafos, listas, tabelas e formulários. Descreve para que as tags são usadas, seus atributos e como estruturam e organizam o conteúdo em um documento HTML. Várias tags de formatação de texto e caracteres especiais também são abordados. O documento tem como objetivo ensinar o básico de HTML por meio de explicações e exemplos de tags.

Traduzido por

ScribdTranslations
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

visite @[Link]

in

Chapter 11 & 12 - HTML

HTML: HTML significa Linguagem de Marcação de Hipertexto. É uma especificação de layout de documentos e hyperlinks.
idioma ou seja, uma língua que é usada para projetar o layout do documento da web.

Q1. O que é uma Tag?


Uma Tag é um comando HTML codificado que indica como parte de uma página da web deve ser exibida.

Q2. O que é um Atributo?


Um atributo é uma palavra especial usada dentro de uma tag para especificar informações adicionais à tag, como cor.
alinhamento etc.

TAGs HTML

1. HTML TAG :This tag identifies that the document is a HTML document. Each and every HTML
o documento começa com <HTML> e termina com </HTML>

2. Tag HEAD: Esta tag contém informações sobre o documento, incluindo o título, scripts, estilos, etc.

3. TITLE Tag :This tag contains the document title. The title appears on the title bar of the webpage.

4. Tag BODY: Esta tag envolve todas as tags, atributos e informações a serem exibidas na página da web.

ESTRUTURA DO DOCUMENTO HTML


<HTML>
<HEAD>
<TITLE> . . . . . . . . </TITLE>
</HEAD>
<BODY>
.....
.....
</CORPO>

Educação em Computação INFOTECH, Kishangarh (Raj) 9829171122 Page 1


visitar @[Link]

Q3. O que é um elemento contêiner?


[Link] type of HTML elements require pair tags i.e. a starting tag as well as ending tag.

Q4. O que é um Elemento vazio?


Este tipo de elementos HTML requer apenas uma tag de início e não uma tag de fechamento.

Tags HTML BÁSICAS e seus Atributos

1. Tag HTML: Essas tags são usadas para marcar o início e o fim do documento HTML.
Attributes :
(a) DIR: Este atributo especifica em que direção o navegador deve apresentar o texto dentro de todo o documento.
os valores podem ser da esquerda para a direita (ltr) ou da direita para a esquerda (rtl)

(b) LANG: Este atributo especifica o idioma que você geralmente usou dentro do documento. seus valores
pode ser en(inglês), it(italiano), fr(françês) etc.

2. Tag HEAD: É usada para definir o cabeçalho do documento. Contém informações sobre estilo, script, título, etc.

3. TAG TÍTULO: Contém o título do documento que será exibido na barra de título da página da web.
4. Tag BODY: Esta tag envolve todas as tags, atributos e informações a serem exibidas na página da web.
Attributes :
(a) bgcolor: Este atributo é usado para especificar a cor de fundo da página da web. A cor pode ser especificada como
nome da cor ou código da cor. Códigos de cor são combinações de seis letras e dígitos começando com o símbolo #.
os dígitos estão entre 0 e 9 e as letras podem estar entre a e f. alguns códigos de cores
Aqua : #00FFFF Black : # 000000 Blue : # 0000FF etc

(b) fundo: Este atributo é usado para especificar qualquer imagem a ser exibida como fundo de
página da web.

Este atributo é usado para especificar a cor do texto

(d) link: Este atributo é usado para especificar a cor do link.

(e) alink: Este atributo é usado para especificar a cor do link ativo.

(f) vlink: Este atributo é usado para especificar a cor do link visitado.

(g) leftmargin :It is used to specify the left margin of contents of body tag

(h) topmargin :It is used to specify the top margin of contents of body tag

Educação em Computação INFOTECH, Kishangarh (Raj) 9829171122 Page 2


visite @[Link]

5. Hx(x=1 a 6) Tag: HTML tem seis níveis de cabeçalho numerados de 1 a 6. O cabeçalho 1 é o maior e 6 é
menor.

6. Tag de Parágrafo: A tag usada para parágrafo é <p> .... </p>


Attributes :
1. Align :This Attributes specifies the alignment of paragraph. values can be left, center, right or justify.

7. Tag de Quebra: A tag usada para isso é <br>. Este é um elemento vazio e leva o controle para o próximo.
linha. não tem atributos.

8. Tag Center: É usada para alinhar qualquer conteúdo no centro da página. Começa com <center> e termina com
</center>. Não tem atributos.

9. Tag Basefont: Esta tag permite que você defina o tamanho básico para a fonte. É usada com seu atributo tamanho cujo
o valor determina o tamanho do texto.
Attributes :
1. size :This attribute is used to specify the size of text. size can also be spefied as negative or positive
incremento.

2. face: É usado para especificar o nome da fonte

3. cor: É usada para especificar a cor da fonte.

10. Tag de Fonte: A tag usada para isso é <font>......</font>. Ela é usada para mudar o tamanho, fonte e cor de
texto.
Attributes :
1. face: It is used to specify the font name
2. cor: É usado para especificar a cor
3. size :It is used to specify he font size

11. Tag HR: Esta tag é usada para inserir uma Regra Horizontal na página da web.
Attributes :
1. size: it is used to specify the height of Horizontal Rule
2. largura: é utilizada para especificar a largura da Regra Horizontal
3. noshade :it will display the rule in 2d format
4. cor: é utilizado para especificar a cor da regra
5. alinhar : alinhamento da Regra Horizontal

12. Comentários <!.... e ...> : Esta tag é usada para especificar comentários em HTML. Comentários em HTML são apenas
como Java. Uma linha de comentário não é renderizada pelo navegador.

Educação em Computadores INFOTECH, Kishangarh (Raj) 9829171122 Page 3


visite @[Link]

Vários Estilos de Texto

12. <b> Tag: Esta tag é usada para especificar o Texto em Negrito.

13. <i> Tag :Essa tag é usada para especificar o Texto em Itálico.

14. <u> Tag: Esta tag é usada para especificar o texto sublinhado.

15. <tt> Tag: Esta tag é usada para especificar o Texto Teletipo.

16. <strong> Tag: Esta tag é semelhante à tag de negrito. Ela torna o texto forte ou em negrito

17. <small> Tag :Esta tag torna o texto um pouco menor que o normal

18. <big> Tag :Esta tag faz com que o texto fique um pouco maior do que o texto normal

19. <sup> Tag: Esta tag faz o texto ser sobrescrito

20. <sub> Tag: Esta tag torna o texto subscrito.

Caracteres Especiais: Em um documento HTML, temos que usar vários tipos de tags de caracteres especiais para exibir
few special characters like
< para < símbolo
&gt; for > symbol
&amp; para o sinal de ampersand etc

Capítulo 12 HTML - II

Lista em HTML: Existem três tipos de lista em HTML


(a) Lista Numerada (Também chamada de Lista Ordenada) - Tag utilizada é <OL>
(b) Lista sem numeração (também chamada de lista não ordenada) - A tag usada é <UL>
(c) Lista de Definições - A Tag Usada é <DL>

<OL> - Esta tag é chamada de Tag de Lista Ordenada. A Lista Ordenada pode ser dos seguintes Tipos.
1. Type="1"
2. Type="a"
3. Type="A"
4. Tipo="i"

Educação em Computação INFOTECH, Kishangarh (Raj) 9829171122 Page 4


visite @[Link]

5. Type="I"

<UL> - Esta tag é chamada de Tag de Lista Não Ordenada. A Lista Não Ordenada pode ser dos seguintes tipos.
1. type="disc"
2. type="circle"
3. type="square"

Nota: podemos usar o atributo start com as tags OL e UL, que é usado para especificar o ponto de partida da lista.

<DL> - Esta tag é chamada de Tag de Lista de Definição. Ela é exibida sem nenhum símbolo de marcador. Tags usadas em
A lista de definições é a seguinte -
(a) DL - Lista de Dados
(b) DT - Termo de Dados
(c) DD - Definição de Dados

Lista Aninhada - Quando uma lista é especificada dentro de outra lista, ela é chamada de lista aninhada.

TAGS de TABELA em HTML


(a) <table>- Esta tag é usada para criar uma tabela, contém todos os principais atributos da tabela
(b) <tr> - Esta Tag Define a Linha da Tabela
(c) <th> -This tag Defines the Table Heading or Table Header
(d) <td> - Esta tag define os dados da tabela do conteúdo da célula da tabela
(e) <caption> -Esta tag define o título ou legenda da tabela
(f) <thead>- Esta tag é usada para definir um conjunto de linhas de cabeçalho.
(g) <tfoot> -Esta tag é usada para definir o rodapé da tabela.
(h) <tbody> -This tag is used to specify the table body.

Atributos da Tag da Tabela


------------------------------
1. Bordas - é usado para especificar a largura da borda
2. Cor da borda - é usada para especificar a cor da borda (pode ser o nome da cor ou o código)
3. Frame - é usado para especificar o quadro como borda da tabela (os valores podem ser - acima, abaixo, borda, caixa, lados horizontais,

lhs, rhs, vsides etc)


4. Regras - é usado para especificar quais bordas da tabela devem ser visíveis (os valores podem ser todos, colunas, linhas etc.)
5. Espacamento de Células - é utilizado para especificar o espaço entre as células da tabela

6. Cellpadding - é usado para especificar o tamanho de uma célula


7. Alinhar - é usado para especificar o alinhamento da tabela (os valores podem ser à esquerda, à direita, centralizado etc.)

8. Fundo - é usado para especificar a imagem a ser exibida como fundo da tabela
9. Bgcolor - é usado para especificar a cor de fundo ou tabela
10. Altura - é usada para especificar a altura da tabela
11. Largura - é usada para especificar a largura da tabela

INFOTECH Educação em Computação, Kishangarh (Raj) 9829171122 Page 5


visite @[Link]

12. resumo - é usado para especificar o resumo da tabela

Atributos da Tag TD
1. Alinhar - é usado para especificar o alinhamento do conteúdo das células da tabela
2. Largura - é usada para definir a largura da célula da tabela
3. Bgcolor - é usado para especificar a cor de fundo da célula da tabela
4. Fundo - é usado para especificar a imagem de fundo da célula da tabela
5. Rowspan - é utilizado para especificar a altura da linha (linhas cobertas pela célula) de uma célula de tabela
6. Colspan - é usado para especificar o span da coluna (colunas cobertas pela célula) da célula da tabela
7. Valign - é usado para especificar o alinhamento vertical da célula da tabela

FORMULÁRIOS HTML

Os formulários HTML são meios de coletar informações/dados dos visitantes do site. Isso é feito com a ajuda de
controles que coletam as informações e as enviam

Controles
1. Botões - Podem haver três tipos de Botões
O botão Enviar é ativado quando enviamos o formulário
(b). Reset Button -is activated when we reset the form
(c). Botão de pressão - este botão não tem comportamento padrão, precisamos escrever um script específico para ele.

2. Caixas de seleção - Estes são botões de alternância que podem estar ativados/desativados. Várias caixas de seleção podem ser selecionadas ao mesmo tempo.

tempo.

3. Botão de Rádio - Esses são botões de alternância como caixas de seleção, mas podemos selecionar apenas um botão de rádio por vez.

tempo

4. Menus - Os menus oferecem aos usuários opções das quais escolher.

5. Senha - Este controle é usado para obter a senha do usuário. O texto inserido não será exibido para o usuário.

6. Entrada de Texto - Um usuário pode criar dois tipos de controles para inserir texto. Um é a Caixa de Texto e o outro é
Caixa de texto é usada para inserir texto limitado ou pequeno, enquanto a área de texto é usada para texto grande.

7. Controles Ocultos - Esses são os controles que não são renderizados, mas cujos valores são submetidos com um
forma.

Educação em Computação INFOTECH, Kishangarh (Raj) 9829171122 Page 6


visite @[Link]

Como Criar Controles de Formulário

1. Formulário -<form action="script de back-end" method="método de postagem">

2. Caixa de Texto -<input type="text" name="tname" value="Sr." size=20 maxlength=50>

3. Caixa de Senha -<input type="password" name="pass">

4. Área de Texto -<Textarea rows=50 cols=80 name="description"> </Textarea>

5. Submit Button -<input type="submit" name="submit" value="submit">

6. Reset Button- <input type="reset" name="reset" value="reset">

7. Botão Simples -<input type="button" value="Clique em Mim">

8. Checkbox- <input type="checkbox" name="hobby1" value="Swimming">Swimming

9. RadioBox - <input type="radio" name="sex" value="Male">Male


<input type="radio" name="sex" value="Feminino">Feminino

10. Caixa de Seleção - <selecionar nome="stream">


<option>Comércio</option>
<option> Ciência </option>
<option>Arts</option>
</select>

INFOTECH Educação em Computação, Kishangarh (Raj) 9829171122 Page 7

Você também pode gostar