Scribd
Upload
3 views

1 Introduction to HTML CSS Javascript

The document provides an introduction to web technologies, focusing on HTML, CSS, and JavaScript for creating user interfaces and web applications. It outlines the basic structure of HTML, its syntax, and the importance of using CSS for styling and layout. Additionally, it discusses browser anatomy, testing code, and best practices for organizing HTML content.

Uploaded by

Oliveira JM
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

1 Introduction to HTML CSS Javascript

The document provides an introduction to web technologies, focusing on HTML, CSS, and JavaScript for creating user interfaces and web applications. It outlines the basic structure of HTML, its syntax, and the importance of using CSS for styling and layout. Additionally, it discusses browser anatomy, testing code, and best practices for organizing HTML content.

Uploaded by

Oliveira JM
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 106

Introduction to web

technologies
HTML + CSS + Javascript
Introduction
When you decide to develop an application using any
programming language, one of the first problem you Your Code
face is that programming languages do not include a
library to create User Interfaces.
Framework
You need to use some framework to access the OS
layer. Every programming language has at least one, Operative System
but you need to choose it first.

One of the nice things about developing for the web is


that the web provides a very rich and simple Hardware
framework to create applications that include lots of
features, not only interface but also access to
peripherals (audio, input, gamepads, etc), and this
API is very easy to use.
Goals
Introduction to web technologies:

● HTML to create the document


structure and content

● CSS to control is visual aspect

● Javascript for interactivity


Deploy
What do we need to start:
- a good web-browser (Chrome or Firefox)
- the example HTML code to start
- a good text editor like Editplus (win), VSCode (cross platform),
textWrangler (osx), vim (unix) or sublime text (cross platform)
How can I test my code
Just open the index.html from the template in your text editor and in your
browser.
When you do any change to the code, check it in the browser by pressing
F5 (refresh site)
To open the developer tools press:
Windows: Control + Shift + I or F12
OSX: Command + Opt + I
Other tools are online editors like scratchpad or htmledit
Anatomy of a Browser
Inside a browser
Browsers have very differentiate parts.

We are interested in two of them:

● the Rendering Engine (in charge


of transforming our HTML+CSS in
a visual image).
● The Javascript Interpreter (also
known as VM), in charge of
executing the Javascript code.
Technologies

● HTML
● CSS
● Javascript
Browsers as a renderer
Browser's act as a renderer that takes documents
and construct a visual representation of them.

Starting with the most simple one, a text document, it


will try to visualize it.

You can try, drop any .txt file into your browser to
visualize it.

The problem is that text documents without any


formatting tend to be hard to read for the user (and
quite boring).

That's why HTML was created, to give text some


format.
Markup language
There are many markup languages that
add special tags into the text that the
renderer wont show but use to know
how to display the text.

In HTML this tags use the next notation:

My name is <b>Javi</b>
HTML
HTML means Hyper Text Markup Language.
<html>
The HTML allow us to define the structure of a document or a <head>
website. </head>
<body>
HTML is NOT a programming language, it’s a markup language,
<div>
which means its purpose is to give structure to the content of the
website, not to define an algorithm. <p>Hi</p>
</
It is a series of nested tags (it is a subset of XML) that contain all div>
the website information (like texts, images and videos). Here is an </body>
</html>
example of tags:

<title>This is a title</title>

The HTML defines the page structure. A website can have several
HTMLs to different pages.
HTML: basic rules
Some rules about HTML:

● It uses XML syntax (tags with attributes, can contain other tags).
<tag_name attribute="value"> content </tag_name>
● It stores all the information that must be shown to the user.
● There are different HTML elements for different types of information and behaviour.
● The information is stored in a tree-like structure (nodes that contain nodes inside) called
DOM (Document Object Model).
● It gives the document some semantic structure (pe. this is a title, this is a section, this is
a form) which is helpful for computers to understand websites content.
● It must not contain information related to how it should be displayed (that information
belongs to the CSS), so no color information, font size, position, etc.
HTML: syntax example

<div id="main">
<!-- this is a comment -->
This is text without a tag.
<button class="mini">press me</button>
<img src="me.png" />
</div>
HTML: syntax example
Tag name
attributes

<div id="main"> comment

<!-- this is a comment --> text tag


This is text without a tag.
<button class="mini">press me</button>
<img src="me.png" /> self-closing tag
</div>
DOM is a tree

Every node can only have


one parent, and every node
can have several children,
so the structure looks like a
tree.
HTML: main tags
Although there are lots of tags in the HTML specification, 99% of the webs use a subset of
HTML tags with less that 10 tags, the most important are:

● <div>: a container, usually represents a rectangular area with information inside.


● <img/>: an image
● <a>: a clickable link to go to another URL
● <p>: a text paragraph
● <h1>: a title (h2,h3,h4 are titles of less importance)
● <input>: a widget to let the user introduce information
● <style>: to insert CSS rules
● <script>: to execute Javascript
● <span>: a null tag (doesn't do anything)
HTML: other interesting tags
There are some tags that could be useful sometimes:

● <button>: to create a button


● <audio>: for playing audio
● <video>: to play video
● <canvas>: to draw graphics from javascript
● <iframe>: to put another website inside ours
HTML: wrapping the info
We use HTML tags to wrap different
information on our site.

The more structure has the information, the


easier will be to access it and present it.

We can change the way the information is


represented on the screen depending on the
tags where it is contained, so we shouldn't be
worried about using too many tags.
HTML: tagging correctly
Try to avoid doing this: Do this instead

<div> <div>
Title <h1>Title</h1>
<p>Here is content.</p>
Here is some content <p>Here is more content</p>
Here is more content </div>
</div>
DO THIS
T
DON
HTML good use
It is good to have all the information properly wrapped in tags that give it some
semantics.

We also can extend the code semantics by adding extra attributes to the tags:

● id: tells a unique identifier for this tag


● class: tells a generic identifier for this tag

<div id="profile-picture" class="mini-image">...</div>


HTML references
HTML Reference: a description of all HTML tags.

The 25 Most used tags: a list with information of the more


common tags.

HTML5 Good practices: some tips for starters


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>

</html>
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
</head>
<body>
<h1>Isso é um título</h1>
<p>Isso é um parágrafo</p>
<img src="html.png" alt="Logo do HTML 5">
</body>

</html>
Extensão para atualização automática do Código
Instalar Live server
Estrutura Básica HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>

</html>
Figma - Prototipagem de Interfaces
Depois de estar com uma conta conectada, é a hora de criar uma cópia do layout
para a sua conta do Figma, assim garantindo o acesso de edição. Para fazer isso,
entre no link do layout original que está acima e no menu superior da plataforma,
clique no nome do arquivo: Portfolio - Curso 1. Irão abrir algumas opções, clique
em “Duplicate to your drafts”.

Obs.: No SIGMA podemos exportar os arquivos, imagens, etc.


Deploy steps
1- ! + enter (Cria toda estrutura básica HTML)

2- Alterar o código conforme projeto do FIGMA


HEADER , MAIN, FOOTER
https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics (Mais tags samanticas HTML)

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>

</html>
Technologies

● HTML
● CSS
● Javascript
CSS
CSS allows us to specify how to present
(render) the document info stored in the
HTML.

Thanks to CSS we can control all the


aspects of the visualization and some other
features:
● Colors: content, background, borders
● Margins: interior margin, exterior
margin
● Position: where to put it
● Sizes: width, height
● Behaviour: changes on mouse over
CSS example
* {
color: blue; /*a comment */
margin: 10px;
font: 14px Tahoma;
}

This will change all the tags in my web ( ‘*‘ means all) to look blue with font Tahoma with
14px, and leaving a margin of 10px around.
CSS fields
Here is a list of the most common CSS fields and an example:
● color: #FF0000; red; rgba(255,00,100,1.0); //different ways to specify
colors
● background-color: red;
● background-image: url('file.png');
● font: 18px 'Tahoma';
● border: 2px solid black;
● border-top: 2px solid red;
● border-radius: 2px; //to remove corners and make them more round
● margin: 10px; //distance from the border to the outer elements
● padding: 2px; //distance from the border to the inner elements
● width: 100%; 300px; 1.3em; //many different ways to specify distances
● height: 200px;
● text-align: center;
● box-shadow: 3px 3px 5px black;
● cursor: pointer;
● display: inline-block;
● overflow: hidden;
CSS how to add it

There are four ways to add CSS rules to your website:

● Inserting the code inside a style tag


<style>
p { color: blue }
</style>
● Referencing an external CSS file
<link href="style.css" rel="stylesheet" />
● Using the attribute style on a tag
<p style="color: blue; margin: 10px">
● Using Javascript (we will see this one later).
CSS selectors
Let's start by changing the background color of one tag of our website:

div {
background-color: red;
}

This CSS rule means that every tag DIV found in our website should have a red background
color. Remember that DIVs are used mostly to represent areas of our website.

We could also change the whole website background by affecting the tag body:

body {
background-color: red;
}
CSS selectors
What if we want to change one specific tag (not all the tags of the same type).

We can specify more precise selectors besides the name of the tag. For instance, by class
or id. To specify a tag with a given class name, we use the dot:

p.intro {
color: red;
}

This will affect only the tags p with class name intro:

<p class="intro">
CSS Selectors
There are several selectors we can use to narrow our rules to very specific tags of our website.

The main selectors are:

● tag name: just the name of the tag


○ p { ... } //affects to all <p> tags
● dot (.): affects to tags with that class
○ p.highlight { ... } //affects all <p> tags with class="highlight"
● sharp character (#): specifies tags with that id
○ p#intro { ... } //affects to the <p> tag with the id="intro"
● two dots (:): behaviour states (mouse on top)
○ p:hover { ... } //affects to <p> tags with the mouse over
● brackets ([attr='value']): tags with the attribute attr with the value 'value'
○ input[type="text"] {...} // affects to the input tags of the type
text
CSS Selectors
You can also specify tags by its context, for example: tags that are inside of tags matching a
selector. Just separate the selectors by an space:

div#main p.intro { ... }

This will affect to the p tags of class intro that are inside the tag div of id main

<div id="main">
<p class="intro">....</p> ← Affects this one
</div>

<p class="intro">....</p> ← but not this one


CSS Selectors
And you can combine selectors to narrow it down more.

div#main.intro:hover { ... }

will apply the CSS to the any tag div with id main and class intro if the mouse is over.

And you do not need to specify a tag, you can use the class or id selectors without tag, this
means it will affect to any node of id main

#main { ... }
CSS Selectors
If you want to select only elements that are direct child of one element (not that have an
ancestor with that rule), use the > character:

ul.menu > li { ... }

Finally, if you want to use the same CSS actions to several selectors, you can use the
comma , character:

div, p { … } ← this will apply to all divs and p tags


HTML arrange
It is important to understand how the browser
arranges the elements on the screen.

Check this tutorial where it explains the


different ways an element can be arranged
on the screen.

You can change the way elements are


arranged using the display property:

div { display: inline-block; }

Also check the property float.


Box Model
It is important to note that by default any
width and height specified to an element will
not take into account its margin, so a div with
width 100px and margin 10px will measure
120px on the screen, not 100px.

This could be a problem breaking your


layout.

You can change this behaviour changing the


box model of the element so the width uses
the outmost border:

div { box-sizing: border; }


Layout
One of the hardest parts of CSS is
construing the layout of your website (the
structure inside the window) .

By default HTML tends to put everything in


one column, which is not ideal.

There has been many proposals in CSS to


address this issue (tables, fixed divs, flex,
grid, …).
HTML

Grid system <div class="grid-container">


<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
</div>
Because most sites are structured in a grid, I
recommend to use the CSS Grid system.
CSS

Check this tutorial to create the site structure .grid-container {


easily display: grid;
grid-template-rows: 100px; 100px;
grid-template-columns: 100px; 100px;
100px;
grid-gap: 5px;
}

.grid-item1 {
background: blue;
border: black 5px solid;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
CSS
Fullscreen divs html, body {
width: 100%;
height: 100%;
Sometimes we want to have a div that covers }
the whole screen (to make a webapp),
div {
instead of a scrolling website (more like margin: 0;
padding: 0;
regular documents). }

In that case remember to use percentages to #main {


width: 100%;
define the size of elements, but keep in mind height: 100%;
that percentages are relative to the element's }

parent size, so you must set the size to the


<body> element to use 100%.
Trick to center

Centering divs can be hard sometimes, use this trick:


.horizontal-and-vertical-centering {
display: flex;
justify-content: center;
align-items: center;
}
CSS further reading
There are many more rules for selectors.

Check some of the links to understand them better.

One line layouts tutorials

Understanding the Box Model: a good explanation of how to position the information on your
document.

All CSS Selectors: the CSS selectors specification page.

CSS Transition: how to make animations just using CSS

TailwindCSS: a CSS Framework


Documento styles.css
body {
background-color: black;
color: white;

Na página HTML dentro do <head> tem que linkar o documento .css

<link rel="stylesheet" href="styles.css">

Podemos verificar cores no CSS (google) MDN


https://developer.mozilla.org/pt-BR/docs/Web/CSS/color_value

Roda de Cores Adobe - https://color.adobe.com/pt/


Arquivo .css
body {
background-color: #000000;
color: #F6F6F6;
}

strong {
color: #22D4FD;

}
Trabalhando posicionamento - Projeto 1
.titulo {
height: 100px;
width: 400px;
margin: 100px 200px;
position: absolute;
}
.imagem {

height: 100px;
width: 400px;
margin: 100px 600px;
position: absolute;
}
Trabalhando com Posicionamento - Projeto 1
.botaolink {

height: 100px;
width: 400px;
/* width: 50%; */
margin: 450px 200px;
position: absolute;
display: inline;
left: 30px;
}
Trabalhando com Posicionamento - Projeto 1
button {
border-radius: 12px;
background-color: #22D4FD;
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
padding: 12px 28px;
height: 20px;
width: 150px;
transition-duration: 0.4s;
cursor: pointer;
}
Trabalhando com Posicionamento - Projeto 1

button:hover {

color: white;
}
Criando uma Página Produtos do IFPA
1- Abrir projeto inicial
2- Criar página produtos.html
3- Criar arquivo css produtos.css
Criando links para o Menu com uma Lista
<body>
<header>
<h1>
<img src="/imagens/logo.png">
</h1>
<ul>

<li><a href="http://proen.ifpa.edu.br">Ensino</a> </li>


<li><a href="https://proppg.ifpa.edu.br"> Pesquisa </a></li>
<li><a href="https://proex.ifpa.edu.br"> Extensão </a> </li>
<li><a href="contato.html"> Contato </a> </li>
</ul>
</header>
Inserindo a tag <nav>
<nav>
<ul>

<li><a href="http://proen.ifpa.edu.br">Ensino</a> </li>


<li><a href="https://proppg.ifpa.edu.br"> Pesquisa
</a></li>
<li><a href="https://proex.ifpa.edu.br"> Extensão </a> </li>
<li><a href="contato.html"> Contato </a> </li>
</ul>

</nav>
produtos.css
header {
background: #BBBBBB;
}
nav li{
display: inline; /*coloca um texto ao lado do outro*/
margin:0 0 0 15px; /* coloca espaço ao lado esquerdo de cada item */
}
nav a {
text-transform: uppercase; /* letras maiusculas*/
color:#000000;
font-weight: bold;
font-size: 22px;
text-decoration: none; /* tira toda decoração do texto (tira o sublinhado do link) */
}
Limpando o CSS (excluindo os estilos do navegador)

1- Copiar reset.css para dentro da pasta

Adicionar arquivo de estilo, antes da nossa folha de estilo principal:

<link rel="stylesheet" href="reset.css">


Trabalhando com Posicionamento dos elementos
Verificar manual CSS

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_top_left

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_nav
Construindo o Header - Principais tags
header {
background: #BBBBBB;
padding: 20px 0; /* 20 px para cima e baixo e 0 para direita e esquerda*/
}
nav li{
display: inline; /*coloca um texto ao lado do outro*/
margin:0 0 0 15px; /* coloca espaço ao lado esquerdo de cada item */
}
nav a {
text-transform: uppercase; /* letras maiusculas*/
color:#000000;
font-weight: bold;
font-size: 22px;
text-decoration: none; /* tira toda decoração do texto (tira o sublinhado do link) */
}
Construindo o Header - Principais tags
nav {

position:absolute;
top:125px; /* para ficar no meio da imagen considerand que a imagem tem
250 px (metade 125px) verificar no inspector do navegador*/
right:0;
}
.caixa { /* marcando uma classe do css que veio do html */
width: 940px; /* padrão pois a maioria das resoluções usam 1000 e alguns px */
position: relative; /*para o menu ficar dentro da div*/
margin: 0 auto; /* 0 em cima e embaixo - auto para esquerda e direita */
}
Construindo o <main> - Principais Tags
.produtos li{
display: inline-block;
text-align: center;
width: 30%; /* cada botão ocupa 1/3 da parte relativa */
vertical-align: top; /* alinhamento pela parte de cima*/
/* background: #CCCCCC; para verificar melhor as margens */
margin:0 1.5%; /*0 para cima e baixo e 1,5% para cada lado totalizando 3% para
cada item que no final somando = 9% resultando nos 100% da página uma vez que cada
item ocupa 30%*/
padding: 30px 20px; /* ao fazer isso vai descconfigurar, porém podemos avisar o
navegador para contabilizar o pasdding dentro do limite do total de 100% ajustando
corretamente*/
box-sizing: border-box;
Borders Aplly

/* border-color:#000000 ;
border-width:2px ;
border-style:solid; isso é o mesmo que a linha abaixo
*/
border:2px solid #000000;
Arredondando a Borda
/* border-color:#000000 ;
border-width:2px ;
border-style:solid; isso é o mesmo que a linha abaixo */
border:2px solid #000000;
border-radius: 10px;
/* border-radius: 10px 20ox 30x 40px; arredondando os 4
cantos diferentes*/
Utilizando o hover no <header> <nav>

nav a:hover {
color:#C78C19;
text-decoration: underline;
}
Utilizando hover e active no <main> <li>
.produtos li:hover{
border-color:#C78C19; /*muda a cor da borda da lista quando o mouse passa
em cima*/
}

.produtos li:active{
border-color: #098C19; /*muda a borda quando clica*/
}
.produtos li:hover h2{
font-size: 34px; /*muda o tamanho do h2 quando mouse passa em cima da
lista*/
}
Trabalhando no <footer>
footer {
text-align: center;
background:url("/imagens/bg.jpg"); /* colocando uma imagem de
fundo (pode ser
pequena, pois o css expande ela várias vezes)*/
padding: 40px 0;
}
Copyright -
.copyright {
color:#FFFFFF;
font-size: 13px;
margin-top: 10px;
}
No HTML:
<p class="copyright">&copy;Copyright IFPA 2023</p>
<!-- $copy pode ser buscado no site unicode table (google) , simbolo especial
-->
<!-- https://unicode-table.com/pt/ -->
Formulário
1- Copiar header e footer da página produtos.html
Tags <form>
<main>
<label for="nomesobrenome"> Nome e Sobrenome</label>
<input type="text" id="nomesobrenome">

<label for="email"> Email </label>


<input type="text" id="email">

<label for="telefone"> Telefone </label>


<input type="text" id="telefone">

<input type="Submit" value="Enviar Formulário">


</main>
Estilizando o formulário
main {
width: 940px; /*(centralizando no meio da tela)*/
margin: 0 auto; /* 0 para cima e para baixo e automatico dos ladosß
*/
}
form {
margin: 40px 0; /*definido margem em cima e embaixo de 40px e 0 para
os lados*/
}
Estilizando <label> e <input>
form label {
display: block; /*tirando o padrão do inline e colocando para quebrar a linha*/
font-size: 20px; /*tamanho da fonte do label*/
margin:0 0 10px; /*colocando margem para baixo*/

}
form input {
display: block; /*tirando o padrão do inline e colocando para quebrar a linha*/
margin: 0 0 20px; /*colocando margem para baixo 20px*/
padding: 10px 25px;/* 10 px para cima e para baixo e 25px para os lados
espaçamento interto*/
width: 50%; /*input ocupando 50% da página*/
}
Mais Tags <form>
<label for="mensagem"> Mensagem</label>
<textarea id="mensagem" cols="70" rows="10"> </textarea>
Radio e Checkbox
<label for="radio-email"> Email</label>
<input type="radio" name="contato" value="email" id="radio-email">

<label for="radio-telefone"> Telefone</label>


<input type="radio" name="contato" value="telefone" id="radio-
telefone">

<label for="radio-whatsapp"> Telefone</label>


<input type="radio" name="contato" value="whatsapp" id="radio-
whatsapp">

<label><input type="checkbox">Gostaria de receber nossas informações


por email?</label>
Criando class para especificar estilização
.input-padrao {
display: block; /*tirando o padrão do inline e colocando para quebrar
a linha*/
margin: 0 0 20px; /*colocando margem para baixo 20px*/
padding: 10px 25px;/* 10 px para cima e para baixo e 25px para os
lados
espaçamento interto*/
width: 50%; /*input ocupando 50% da página*/
}
/*Necessidade para que os input chechbok e radio não fiquem display:
block (quebrados), apenas os labels e input text. Deve-se colocar a
class input-padrao em todos os inputs e excluir a class form input.
Hierarquia no CSS

p{
}
É sobrescrito por
Form p{
}
É sobrescrito por:
Inline Classe 10 Tag 1 .teste {
Id 100
1000000000 }
É sobrescrito {
#teste {
}
É sobrescrito por:
<p style="color; rede">
Qual será a cor do Objeto?
<p class="paragrafo">

p{
color: blue;
}

p paragrafo {
color: red;
}

.paragrafo {
color: purple;

}
Mobile inputs types
http://mobileinputtypes.com/

Mudar no nosso formulário os campos necessários.


Campos Obrigatórios - required e placeholder e
checked
input type="email" id="email" class="input-padrao" required
placeholder="seuemail@dominio.com.br">

<label for="radio-whatsapp"><input type="radio" name="contato"


value="whatsapp" id="radio-whatsapp"checked >WhatsApp</label>

<label><input type="checkbox" class="checkbox" checked>Gostaria de receber


nossas informações por email?</label>
Melhorando a semântica do formulário
Substituindo as <div> por <fildset>

Substituindo o <p> por <legend>

Obs: Não esquecer de mudar o seletor form p por legenda no .css


Melhorando Acessibilidade - alt
<img src="/imagens/logoifpa.png" alt="Logo do IFPA">
Trabalhando o Botão do Formulário
.enviar{
width: 40%; /* tamanho do botão*/
padding: 15px 0; /*espaçamento interno 15px para cima e para baixo e 0 para os lados*/
background:orange ;
color: white;
font-weight: bold;
font-size: 18px;
border:none;
border-radius:5px;
transition: 1s background; /*transição apra o hover poder agir*/
cursor:pointer;
}

.enviar:hover {
background: darkorange;
}
Aumentando o Objeto proporcionalmente
(transform)
.enviar:hover {
background: darkorange;
transform: scale(1.2);/*aumentando nosso objeto em 20%*,
aumentando margin, padding, fonte etc.*/
transform: rotate(70deg);/*inclina meu item em graus*/
}

}
Criação de Tabela
<table>
<tr> <!-- Linhas-->
<td>Dia</td> <!-- Colunas-->
<td>Horário</td>
</tr>
<tr>
<td>Segunda</td>
<td>08:00 ~ 20:00</td>
</tr>
<tr>
<td>Quarta</td>
<td>08:00 ~ 20:00</td>
</tr>
<tr>
<td>Sexta</td>
<td>08:00 ~ 20:00</td>
</tr>
</table>
Melhorando a Semântica da Tabela <thead>
<thead> <!-- CABEÇALHO-->
<tr> <!-- Linhas-->
<td>Dia</td> <!-- Colunas-->
<td>Horário</td>
</tr>

</thead>
Melhorando a Semântica da Tabela <tbody>
<tbody>
<tr>
<td>Segunda</td>
<td>08:00 ~ 20:00</td>
</tr>
<tr>
<td>Quarta</td>
<td>08:00 ~ 20:00</td>
</tr>
<tr>
<td>Sexta</td>
<td>08:00 ~ 20:00</td>
</tr>
</tbody>
Estilos da Tabela
table { /* tabela toda*/
margin:20px 0 40px;
}
thead { /*cabeçalho*/
background:#555555;
color: white;
font-weight: bold;
}
td, tr { /*ITENS*/
border: 1px solid #000000;
padding: 8px 15px; /*espaçamento interno para cima e para baixo de 8px e para os
lados de 15px*/
}
Technologies

● HTML
● CSS
● Javascript
Javascript
A regular programming language, easy to start, hard to master.

Allows to give some interactivity to the elements on the web.

Syntax similar to C or Java but with no types.

You can change the content of the HTML or the CSS applied to an element.

You can even send or retrieve information from the internet to update the content
of the web without reloading the page.
Javascript: insert code
There is three ways to execute javascript code in a website:

● Embed the code in the HTML using the <script> tag.

<script> /* some code */ </script>

● Import a Javascript file using the <script> tag:

<script src="file.js" />

● Inject the code on an event inside a tag:

<button onclick="javascript: /*code*/">press me</button>


Javascript: Syntax
Very similar to C++ or Java but much simpler.

var my_number = 10; //this is a comment


var my_string = "hello";
var my_array = [10,20,"name",true];
var my_object = { name: "javi", city: "Barcelona" };

function say( str )


{
for(var i = 0; i < 10; ++i)
console.log(" say: " + str );
}
Javascript example
<html>
<body>
<h1>This is a title</h1>
<script>
var title = document.querySelector("h1");
title.innerHTML = "This is another title";
</script>
</body>
</html>
Javascript API
Javascript comes with a rich API to do many things like:

● Access the DOM (HTML nodes)


● Do HTTP Requests
● Play videos and sounds
● Detect user actions (mouse move, key pressed)
● Launch Threads
● Access the GPU, get the Webcam image, ...

And the API keeps growing with every new update of the standard.

Check the WEB API reference to know more


Javascript: retrieving element
You can get elements from the DOM (HTML tree) using different approaches.

● Crawling the HTML tree (starting from the body, and traversing its children)

● Using a selector (like in CSS)

● Attaching events listeners (calling functions when some actions are


performed)
Javascript: crawling the DOM

From javascript you have different variables that you can access to get
information about the website:

● document: the DOM information (HTML)

● window: the browser window

The document variable allows to crawl the tree:

document.body.children[0] // returns the first node inside body


tag
Javascript: using selectors
You can retrieve elements using selectors:

var nodes = document.querySelectorAll("p.intro");

will return an array with all <p class="intro"> nodes in the web.

Or if we have already a node and we want to search inside:

var node = mynode.querySelectorAll("p.intro")


Javascript: modify nodes
From JS you can change the attributes
mynode.id = "intro"; //sets an id
mynode.className = "important"; //set class
mynode.classList.add("good"); //to add to the current classes

Change the content


mynode.innerHTML = "<p>text to show</p>"; //change content

Modify the style (CSS)


mynode.style.color = "red"; //change any css properties

or add the behaviour of a node


mynode.addEventListener("click", function(e) {
//do something
});
Javascript: create nodes
Create elements:
var element = document.createElement("div");

And attach them to the DOM:


document.querySelector("#main").appendChild( element );

Or remove it from its parent:


var element = document.querySelector("foo");
element.parentNode.removeChild( element );

You can clone an element also easily:


var cloned = element.cloneNode(true);
Javascript: hide and show elements
Sometimes it may be useful to hide one element or show another.

You can change an element CSS directly by accessing its property style.

To avoid being displayed on the web change display to "none"

element.style.display = "none"; //hides elements from being rendered


element.style.display = ""; //displays it again
Using Inputs
If you want the user to be able to input some text we use the tag <input>:

<input type="text"/>

There are other inputs, you can check this list.

From Javascript we can attach events like "click" or "keydown".

To read or modify the content of the input:

my_input_element.value = ""; //this will clear the text inside the input
Example of a website
HTML in index.html Javascript in code.js
<link href="style.css" rel="stylesheet"/> //fetch the button from the DOM
<h1>Welcome</h1> var button = document.querySelector(“button”);
<p>
<button>Click me</button> //attach and event when the user clicks it
</p> button.addEventListener(“click”, myfunction);
<script src=”code.js”/>
//create the function that will be called when
the button is pressed
CSS in style.css
function myfunction()
{
h1 { color: #333; } //this shows a popup window
button { alert(“button clicked!”);
border: 2px solid #AAA; }
background-color: #555;
}
Execution flow
It is important to have a clear understanding of
the execution flow of your code.

Scripts are executed when the html is being


parsed.

Be careful accessing the DOM as the DOM


won’t contain all until all the HTML is parsed.

It is good practice to start your code with an init


function called at the end of your HTML.
jQuery
jQuery is a library that makes working with the DOM much easier, using an unified
syntax and taking advantage of selectors:

$("p").remove(); //remove all tags p


$("#main").hide(); //hides the element of id main
$("#main").append("<h1>titulo</h1>") //adds content to an element

$("#wrap").css({ color: "red" }); //change the css

$("button#send").click( function() { /* code */ });

To include this library just add this to your HTML:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Using the Dev Tools
Press Control + Shift + I (or F12) to open DevTools
Exercise
Create the layout for a
messaging application.

Structured like:

● Main container
○ Messages area
■ message
○ Typing area area
■ input
Further info
API References: DevDocs.io

Selectors: MDN Tutorial

To learn Javascript.

http://codeacademy.com

To learn jQuery:

http://docs.jquery.com/Tutorials

You might also like