Mapa mental

DSI HTML

Valdir Donizete Portugués

Contenido del mapa

DSI HTML

Caracteres Especiais
- Para que as paginas Web possam reconhecer alguns caracteres especiais, como o "ç" e os acentos do português, é necessario estabelecer no cabeçalho o padrão de caracteres da pagina
  - Padrão UTF-8 (Unicode)
  - Padrão ISO-8859-1
Tags
- Uma tag é um conjunto dos caracteres <, /, >, mais uma nomenclatura, que ainda pode conter atributos que possibilitam a sua customização
  - Tags HTML também podem ser definidas como palavras-chave ocultas em uma página web que definem como o navegador deve formatar e exibir o conteúdo
- Atributos
  - Os atributos possibilitam personalizar uma tag e são definidos na tag de abertura, Os atributos são frequentemente conferidos a um valor usando o sinal de igual "="
    - A maior parte dos atributos é opcional para a maioria das tags e são usadas apenas quando você deseja alterar algo sobre a maneira padrão como uma tag é exibida pelo navegador. Porém algumas tags, como a <img>, precisam de atributos como src e alt, que são necessárias para que o navegador exiba a página web corretamente
- Estrutura Basica
  - Existem quatro conjuntos de tags HTML que são necessárias para formar a estrutura básica de cada arquivo HTML
    - A explicação de cada um ao lado
  - Exemplo de uma Estrutura se site Web (Não sei ao certo como estruturar assim e a imagem não explica muito, mas é bonitona)
- Principais Tags
  - Cabeçalho
    - A tag <h> é utilizada para títulos, legendas e destaques para textos. Existem seis níveis de títulos disponíveis, desde h1 (maior e mais importante título) até h6 (menor). Algumas tags são responsáveis pelo auxílio da formatação do texto, em que ajudam a melhorar a aparência da página web.
  - Formatação de texto
    - Negrito
      - Para deixar as palavras em negrito usar a tag <b></b>
    - Itálico
      - Para deixar as palavras em italico usar a tag <i></i>
    - sublinhado
      - Para deixar os textos em Sublinhado usar a tag <u></u>
    - Small
      - em vez de definir um tamanho de fonte, pode se utilizar a tag small para renderizar um texto um pouco menor que o texto ao seu redor
    - Alterar cor da Fonte
      - Possibilidade de alterar a cor de algumas palavras ou de uma seção de texto
        <font color=”#F5F5F5”>Teste</font>
        As cores são informadas em hexadecimal, tem uma tabela no livro texto unidade I
    - Tamanho da fonte
      - Incluir um número para alterar o tamanho da fonte na propriedade size, usando <font size=””></font>
      - também podemos realizar uma alteração imediata do tamanho da fonte em relação ao tamanho da fonte anterior com <font size=”+/-”></font>
    - Centralizar
      - É uma tag útil, que possibilita com que tudo que esteja entre as tags fique centralizado usando <center> </center>
    - Enfase
      - Usada para enfatizar o texto, que geralmente aparece em itálico, mas pode variar de acordo com o browser, usando <em> </em>
    - Strong
      - Utilizada para enfatizar mais o texto, que geralmente aparece em negrito, mas pode variar de acordo com o browser, <strong> </strong>
  - Paragrafos
    - A maior parte do conteúdo de uma página web simples aparecerá em parágrafos ou seções. Para definirmos parágrafos, utilizaremos as tags <p> e </p>, e os navegadores colocaram o texto automaticamente na próxima linha assim que atingir a borda da tela. Quando uma tag <p> for utilizada, indicará o próximo parágrafo e o navegador adicionará um espaço em branco entre os parágrafos
      - Alguns atributos dos paragrafos
  - Quebra de linha
    - Utilizado para iniciar o texto em uma nova linha. Várias tags <br> em uma linha criarão um grande espaço vertical em uma página web
  - Divisão
    - A tag <div> define uma seção ou divisão dentro de um arquivo HTML. Geralmente, contém títulos, parágrafos, tabelas ou outros elementos que precisam ser agrupados. Também pode se agregar css (cascading style sheets), definindo na tag <div class=””>. O atributo class é utilizado para definir a aparência de uma seção de uma página web
      - Não tenho certeza mas acho que as divs dividem a pagina horizontalmente. E ainda não sei muito sobre esse "class"
  - Tabelas
    - Usado para definir uma tabela. Ela contém todas as tags de linha e coluna, além de seu conteúdo. Aplica-se como a tag body, embora sempre deva haver pelo menos uma linha em uma tabela
      - <table> … </table>
    - Alguns atributos das tabelas
    - Linhas da tabela
      - Para iniciar uma linha da tabela, as tags <tr></tr> devem aparecer dentro das tags da <table>
    - Celulas da Tabela
      - Uma célula da tabela é onde o conteúdo será apresentado. As células devem existir dentro de linhas, sendo que o número de células em uma linha determina o número de colunas na tabela
      - <td> </td>
      - Alguns atributos das celulas das tabelas
    - Cabeçalho da tabela
      - Semelhante a uma célula da tabela, uma célula do cabeçalho deve aparecer dentro de uma linha da tabela. Normalmente encontradas na primeira linha, as células do cabeçalho são mostradas em negrito e centralizadas pelo navegador. <th></th>
  - Ligações
    - Os links são necessários para que os usuários pulem de uma página para outra. Na estrutura da página, as tags são sinalizadas como <a href>
      - Podem ser links basicos ou com algumas estruturas
    - Link Basico
      - Há duas partes principais em uma tag de link: o texto em que um usuário pode clicar e o endereço da web para o qual ele acessa, se clicar nele. O texto aparece entre as tags, A href=”url” é o endereço da web, onde url pode ser definido de várias maneiras
      - <a href=”url”>link text</a>
    - Link com fragmento
      - São links para outros lugares na mesma página web, como outras seções ou capítulos mais abaixo na página. O termo técnico para isso é vinculado a um fragmento, em que os browsers tentam automaticamente rolar para a parte da página
        Fragmentos precisam ser estabelecidos em algum local de uma página, dando-lhes um nome. Em seguida, links para esse fragmento são criados, usando o caráter de hash (#): <a href=”#fragment_ name”> name Link</a>. Para realizar um link de um fragmento em outra página, é necessário acrescentar o nome do fragmento para o endereço da página solicitada
    - Link para nova guia
      - Para abir uma nova guia ao invés de redirecionar a pagina usamos o atributo target. Para realizar essa implementação, utiliza-se target=”_blank”
        Semelhante ao _blank, os comandos “_self”, “_parent”, ou “_top” abrirá o link na janela atual, na janela pai (usada com quadros) ou na janela de nível superior, respectivamente
    - Link com imagens
      - Ao colocar uma tag de imagem entre as tags <a> e </a>, podemos transformar uma imagem em um link, e clicar nessa imagem carregará a página referenciada
    - Link com e-mail
      - Um tipo especial de link, o mailto, instrui o browser a compor e enviar um e-mail com o endereço especificado, utilizando o programa de e-mail padrão (Outlook, por exemplo)
  - Imagens
    - Adicionar fotos ou outras imagens à página web é muito simples, utilizando a tag <img>
      - utilizou-se os atributos para definição de bordar (border), rótulo da imagem (alt), altura e largura da figura (height e width) e a localização da imagem através do source (src)
    - Para exibir uma imagem, precisamos especificar a sua URL utilizando o atributo src, substituindo url pelo nome do arquivo da sua imagem. Existem várias maneiras de fazer isso
    - Atributos
      - Alt
        O alt é o atributo que define o texto apresentado no lugar de uma imagem quando ela não pode ser carregada. Na verdade, esse é um atributo necessário para o HTML válido e deve descrever brevemente o que a imagem normalmente faria
      - width e height
        Uma imagem normalmente será mostrada no tamanho real, mas utilizando os atributos width (largura) e height (altura), podemos alterar o tamanho da imagem a ser exibida. Podemos especificar o tamanho em pixels ou como uma porcentagem
        Uma dica é especificar o tamanho usando o tamanho real da imagem em pixels para forçar os browsers a alocar espaço para a imagem antes que ela seja carregada, garantindo que o layout da página permaneça o mesmo, com ou sem imagens exibidas
      - Border
        Tag utilizada para especificar a espessura em pixels de uma borda. Podemos definir o atributo border=”0” como a remoção da borda adicionada quando as imagens são utilizadas como links
      - Align
        Por padrão, uma imagem aparece no local especificado no código HTML (como em qualquer outra tag). No entanto, podemos alinhar uma imagem com o texto ou parágrafo ao redor, definindo qualquer um deles align=”left | right | top | bottom | middle”,
      - vspace e hspace
        Atributos vspace e hspace da tag <img> proporcionam ajuste de espaço em branco (ou espaço de contorno) ao redor de uma imagem, em pixels. Utiliza-se vspace para ajustar o espaçamento vertical acima e abaixo, ou hspace, para os lados esquerdo e direito
      - Exemplo de Utilização
  - Formularios
    - Os formulários nos permitem automatizar o envio e o recebimento de dados de uma página web e são úteis para logins de sites e fóruns, assinatura de livros de visitas, e-mail baseado na web, questionários on-line etc
    - <form> … </form>
      - Todos os elementos do formulário, como entradas e botões, devem estar dentro das tags form. Na maioria dos casos, um formulário deve ter os atributos name, action e method definidos
        Alguns de seus atributos são mostrados ao lado
      - Alguns atributos extras
      - Tipos de métodos de envio (method)
        method = "get"
        O método HTTP padrão, que pode ser utilizado ao enviar dados de formulário, é Get, no entanto, quando ele é utilizado, todos os dados do formulário ficam visíveis no campo de endereço da página web Exemplo: /action_page.htm?disciplina=DSI&unidade=2
        Caracteristicas Metodo get
        method = "post"
        Sempre utilizar o método Post quando os dados do formulário possam conter informações confidenciais ou pessoais, sendo assim, ele não apresentará os dados do formulário no campo de endereço da página web
        Caracteristicas Metodo post
    - <input>
      - Usado para criar um campo de entrada de texto simples ao seu formulário, mas também é a base para muitos outros tipos de entrada de formulário usando o type para o atributo
        Alguns de seus atributos são mostrados ao lado
    - <button>
      - Um botão de formulário, é semelhante a outras entradas de formulário, mas possui seu próprio conjunto de atributos
        Alguns de seus atributos são mostrados ao lado
    - <select> … </select>
      - Uma lista suspensa, também chamada de caixa de combinação, permitindo a seleção de uma lista de itens, deve conter em seu interior <option> </option> para cada item selecionavél
        Alguns Atributos:
      - <option> </option>
        Uma tag option é necessária para cada item da lista e deve aparecer dentro das tags select. O texto a ser mostrado para a opção precisa aparecer entre as tags option
    - <textarea> </textarea>
      - Uma entrada que permite que uma grande quantidade de texto seja inserida e que possibilite a altura da caixa de entrada seja especificada, diferente da tag input padrão
    - Exemplo
      - Resultado
    - <fieldset></fieldset>
      - É usada para agrupar elementos relacionados em um formulário, desenhando uma caixa ao redor dos elementos relacionados
        Também pode ser usada fora de formulario
        <legend></legend>
        A tag <legend> é usada para definir uma legenda para o elemento fieldset
      - Resultado
    - <label></label>
      - Não foi Explicado ao certo sua função, mas creio que seja para inserir textos que possam ser estilizados pelo CSS nos formularios
        Também pode ser inserido outras tags além do texto, como span, inputs, select, etc
        <span></span>
        Também não foi explicado, mas creio que serve para demarcar os textos tornando mais faceis de serem estilizadas por CSS ou manipuladas com JavaScript usando o atributo class ou id
  - Validações
    - Tornar o Atributo obrigatório
      - Para tornar um atributo obrigatorio é necessario utilizar o atributo "required "
        O atributo required é um atributo booleano, e quando presente, especifica que o elemento deve ser preenchido antes de enviar o formulário
        Ele pode ser utilizado nas tags <input>, <select> e <textarea>
    - Alguns Tipos de "type" do input
      - No HTML5 existem outros tipos de "type", como e-mail, URL, número, telefone, data e muitas outras
      - Email
        Alterando o tipo de entrada para e-mail, enquanto também utiliza o atributo necessário, o navegador pode ser usado para validar (de forma limitada) os endereços de e-mail
      - Numeros e faixa
        Os tipos de entrada de número e faixa também aceitam parâmetros para min, max e step. Na maioria dos casos, você pode excluir a etapa, pois o padrão é 1
        number para validar numeros e range para disponibilizar uma seekbar para escolher um valor
        seekbar ex
      - readonly e disabled
        Servem para travar o input e não permitir que o usuario altere
        readonly deixa a barra normal, disabled deixa com um aspecto de "desabilitado"
  - Listas
    - As listas HTML são usadas para apresentar a lista de informações de maneira bem formada e semântica. Existem três tipos diferentes de lista em HTML e cada uma tem uma finalidade e significado específicos
      - Lista não ordenada: usada para criar uma lista de itens relacionados, em nenhuma ordem específica
        Uma lista não ordenada criada usando a tag <ul> e cada item da lista começa com a tag <li>. Os itens da lista em listas não ordenadas são marcados com marcadores
        Alterar o simbolo
        Por padrão, um navegador mostra um marcador redondo. Isso pode ser alterado usando o tipo de atributo "type" da tag <ul>, que mudará o tipo de marcador para a lista inteira
        <ul type=”disc | circle | square”>
        Pode-se definir o tipo de marcador para um item no meio da lista, definindo o tipo de atributo de uma tag <li>, também com o "type"
      - Lista ordenada: usada para criar uma lista de itens relacionados, em uma ordem específica
        Uma lista ordenada criada usando a tag <ol> e cada item da lista começa com a tag <li>. As listas ordenadas são usadas quando a ordem dos itens da lista é importante e são marcadas por numeros(padrão) ou letras
        A numeração de itens em uma lista ordenada geralmente começa com “1.”. No entanto, se você deseja alterar, pode usar o start no atributo, conforme apresentado a seguir
        Também é possivel definir o valor de um item no meio da lista manualmente, basta definir o "value" do atributo do item que você deseja alterar. Nota: os itens subsequentes seguirão o novo valor
      - Lista de descrição: usada para criar uma lista de termos e suas descrições.
        Uma lista de descrição é uma lista de itens com uma descrição ou definição de cada um. A lista de descrição é criada usando a tag <dl>, em conjunto à tag <dt>, que especifica um termo, e à tag <dd>, que especifica a definição do termo. Os browsers geralmente processam as listas de definições colocando os termos e definições em linhas separadas, em que as definições do termo são ligeiramente recuadas
- Observação Importante
  - Pode usar mais de uma tag para uma mesma frase
    - Pode usar mais de um atributo para uma mesma tag
      - Pode separar os atributos com o enter
  - No Livro-Texto da Unidade II trata um pouco sobre o XHTML e suas diferenças para o HTML, entretanto isso não será abordado aqui pois o objetivo deste material é oferecer suporte para a codificação do HTML em sí, especialmente o 5
    - Então, caso queira saber mais do XHTML é só olhar o livro texto
- Resumo das Principais Tags unidade I
Site para Consulta da documentação
- https://www.w3schools.com/html/default.asp
Bootstrap
- Para saber como usar o bootstrap acesse: https://www.w3schools.com/bootstrap5/index.php
- Em suma ele hospeda um arquivo CSS e JavaScript em um servidor e fornece para uso, podendo personalizar as tags HTML com mais facilidade
  - É gratuito e diversos templates estão no site indicado
    - https://www.w3schools.com/bootstrap5/index.php