FUNDAMENTOS DE INTERFACE WEB E SUA IMPORTÂNCIA NO
I Encontro de Produção e Iniciação Científica – EPIC – UniFatecie – 12 de novembro de 2019
Interface web é a criação de uma página, é onde o programador interage com o aplicativo para o desenvolvimento de um site, ou seja, onde é colocada todas as informações desejadas, portanto é o esqueleto do site ou aplicativo (Tableless, 2011).
2.2 Conceito de HTML
HTML é uma das linguagens de marcação utilizada para desenvolvimento de websites.
É uma linguagem com base na internet e foi criada para ser de fácil entendimento por máquinas e por programadores. A estrutura principal de um documento HTML possui duas partes básicas: o cabeçalho e o corpo do programa. Todo documento deve ser iniciado com marcação <HTML> e finalizado com </HTML> (Devmedia, 2012).
O HTML é definido como se a parte por trás de um site aonde se cria os códigos para que possam exibir imagens e fazer a parte visual do site, portando o layout do site, ela é conhecida como uma linguagem de marcação (MHS, 2019).
A área do cabeçalho, embora muito conveniente, é opcional e delimitada pelas marcações <HEAD> e </HEAD>.
HTML é a sigla em Inglês HyperText Markup Language/Linguagem de Marcação de Hipertexto, A estrutura da codificação do HTML não se altera, tendo sempre um início o um fim, conforme Figura 1 (Infonauta, 2015).
<!DOCTYPE html>
<html lang=”pt-br”>
<meta charse=”utf-8”>
<titlle> Título da página</title>
</head>
<body>
Aqui vai todo código html
</body>
</html>
Figura 1 - Estrutura da codificação HTML. Fonte: O autor
2.3 A Tag (HTML)
Tag é utilizada para a marcação de ponto para os programas e tem a finalidade semelhante de uma etiqueta, ou seja, aonde somente o programador consegui ver.
Na estrutura é utilizado e inserindo uma Tag e dentro dela é declarado mais outras duas Tags que são a <head> e a <body>, conforme Figura 2 (Codigofonte, 2007).
Figura 2 – Tags em HTML. Fonte: O autor.
2.4 A Tag <head>
A Tag <head> é o cabeçalho do documento a ser criado, onde se encontram as informações de inicialização do documento. Essas informações são invisíveis para os visitantes que estiverem navegando pelo seu website, somente o programador verá o que existe na Tag <head>, conforme Figura 3 (Caelum, 2015).
<html>
<head>
<meta charset=”utf-8”>
<title> Exemplo </title>
</head>
<body>
</body>
<html>
Figura 3 – Tag HEAD no HTML. Fonte: O autor.
2.5 A Tag <BODY> no HTTML
A Tag <body> é o corpo do site, dentro dela pode colocar outras Tags e elementos. Tudo que aparece no site está dentro de um <body>, conforme Figura 4 (Caelum, 2015).
<html>
<head>
<meta charset=”utf-8”>
<title> Exemplo </title>
</head>
<h1> Exemplo </h1>
</body>
</html>
Figura 4 – A Tag BODY no HTML. Fonte: O autor.
2.6 CSS
<html>
<head></head>
<body></body>
</html>
I Encontro de Produção e Iniciação Científica – EPIC – UniFatecie – 12 de novembro de 2019
CSS é a sigla para o termo em inglês Cascading Style Sheets/Folha de Estilo em Cascatas, com ele é possível mudar o fundo de tela, fonte, cor, layout e outros elementos (Junior, 2014).
O CSS ilustra os elementos em HTML de um site, devendo ser apresentados nas tela. De uma forma direta, é o CSS que determina o layout do site, desde o tamanho da fonte até a imagem de fundo, todos os elementos visuais de um site podem ser alterado através do CSS, conforme Figura 5 (Junior, 2014).
/* estilo geral do site /*
body { margin: 0 ;
font-family:Arial, Sans-Serif;
}
@media screen and (max-width:500px) { .coluna
Width: 100%;
} .all
Width: 100%;
}
.conteudo1 { Width: 100%
} }
/* estilo de fontes*/
H1 {
Font-family-align: left;
}
Figura 5 – Codificação da Folha de Estilo em Cascatas Fonte: O autor
2.7 Limitações do CSS
O CSS possui alguns limitantes, exemplos:
Nem todos os browsers suportam todas as especificações das folhas de estilo;
Não é possível ler um arquivo usando CSS;
Não interage com a base de dados;
Não pode solicitar uma página da web;
Dependendo no nível de sofisticação requer testes de validação;
Funcionamento diferente de acordo com cada browser, sendo que para cada browser pode ser criado sua própria folha de estilo (Hostinger, 2019).
2.8 Inovação Visual com CSS3
O CSS3 é uma nova versão e famosa do CSS que fornece mais estilo para sites e uma ampla forma de editar e deixar com um visual mais inovador.
Uma da sua principal função é editar uma imagem de várias formas, tais como arredondar bordas, usar imagens de fundos, criar várias transições animadas deixando o design do layout fantástico (Infosti, 2016).
3 MATERIAL E MÉTODOS
Este trabalho foi elaborado a partir de uma revisão de literatura com caráter descritivo, iniciando de modo seletivo sobre livros, revistas e artigos eletrônicos sobre o tema, utilizando-se das bases de dados do Google Acadêmico, Scielo, Periódicos Capes e Minha Biblioteca no período de fevereiro a julho de 2019. As buscas foram realizadas através das palavras-chave “Html”,”tags” e “CSS”, assim como suas correspondentes em língua inglesa
Agrupando todas as bases de dados, foram elencados 10 artigos com a finalidade do estudo. Seguido de uma análise, crítica e analítica sobre os dados levantados, a fim de sintetizar e organizar as informações.
4 CONCLUSÃO E DISCUSSÃO
O presente artigo apresentado, aborda sobre o tema “Interface Web”, o texto apresenta primeiramente uma revisão sobre as principais teorias do tema, descrevendo as funcionalidades das Tags e seus significados, traz os problemas e como funciona o CSS dentro da linguagem de marcação HTML, abordando também os conceitos e funcionalidades de HTML.
REFERÊNCIAS
CAELUM. Desenvolvimento Introdução a HTML e CSS. 2015. Disponível em:
<https://www.caelum.com.br/apostila-html-css-javascript/introducao-a-html-e-css/>.
Acesso em: 22 Jul. 2019.
CODIGOFONTE. Principais Tags de HTML. 2007. Disponível em: <
https://www.codigofonte.com.br/artigos/principais-tags-de-html>. Acesso em: 26 Jul.
2019.
I Encontro de Produção e Iniciação Científica – EPIC – UniFatecie – 12 de novembro de 2019
DEVMEDIA. HTML. 2012. Disponível em:
<https://www.devmedia.com.br/guia/html/38051>. Acesso em: 24 Jul.2019
HOSTINGER. O que é CSS?: Guia Básico para Iniciantes. 2019. Disponível em:
<https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/>. Acesso em:
05 Set. 2019.
INFONAUTA. Linguagem de marcação de hipertexto - HTML Linguagem de Marcação de Hipertexto - HTML. 2015. Disponível em:
<https://infonauta.com.br/producao-multimidia/221/linguagem-marcacao-hipertexto-- html/>. Acesso em: 20 Jul. 2019.
INFOSTI. CSS3 Inovação. 2016. Disponível em: <https://www.infosti.com.br/css3- inovacao/>. Acesso em: 05 Set. 2019.
MHS. O que é HTML: entenda o que significa e para que serve. 2019. Disponível em:
<https://www.melhorhospedagemdesites.com/dicas-e-ferramentas/o-que-e-html/>.
Acesso em: 25 Jul. 2019.
TABLELESS. O Básico: O que é HTML. 2011. Disponível em:
<https://tableless.com.br/o-que-html-basico>. Acesso em: 22 Jul. 2019.
VILSON JUNIOR. Introdução ao CSS. 2014. Disponível em:
<http://docente.ifsc.edu.br/vilson.junior/pi/03_Introducao_CSS.pdf>. Acesso em: 20 Jul.
2019.