Dentro da tag <script> escreveremos o nosso codigo javascript, que sera a ultima parte do tutorial.Na tag <style> definiremos os codigos de estilos CSS.E finalmente a tag <body>, dentro desta, colocaremos tudo o que fizer parte do corpo da nossa pagina, como no nosso exemplo faremos apenas uma barra de menus, nossa tag body vai conter a tag <ul> que e a tag responsavel por criar listas e menus. 2 - Construiremos a barra de navegacao com 3 links, mas voce podera adicionar mais links, ou alterar estilos como dimensao e cores da forma como preferir.<ul> <li><a id="home" href="#home" onclick="curSec(this.id)">Home</a></li> <li><a id="news" href="#news" onclick="curSec(this.id)">Noticias</a></li> <li><a id="contact" href="#contact" onclick="curSec(this.id)">Contato</a></li></ul>A tag <ul> e usada para definir uma lista, em que cada elemento desta lista e definido pela tag <li>, dentro dessas criamos os nossos links com a tag <a>. Dentro da tag <a> usamos a propriedade id para identificarmos o menu que clicamos ao passar o id para a funcao javascript que vamos criar por ultimo e href que e necessaria para informar o URL do link, a propriedade onclick, eu vou explicar mais a frente, por enquanto apenas copie como esta.3 - Os estilos CSS devem ser definidos dentro da tag <style>, como disse anteriormente. O estilo da nossa <ul> sera o seguinte:ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}Primeiramente criamos os estilos da nossa <ul>, que deve ser uma lista sem os estilos padroes dela, entao usamos list-style-type: none; e tambem tiramos as margens e o enchimento, margin: 0; padding: 0;Para que nao apareca barra de rolagem, usamos ovreflow: hidden;E finalmente, definimos nossa cor de fundo, background-color: #333; que e um tom de cinza escuro.4 - Precisamos que a nossa barra de navegacao comece da esquerda, na horizontal, entao definimos o seguinte estilo: float: left; que "empurra" nossa barra para a esquerda.Para separar os menus de forma que nao fiquem muito colados um no outro, definimos uma borda: border-right:1px solid #bbb; Essa borda tera 1 pixel de largura e sera cinza claro.li { float: left; border-right:1px solid #bbb;}Aqui definimos o estilo dos links da nossa lista: li a { display: block; color: white; font-family: arial; font-weight: bold; text-align: center; padding: 14px 16px; text-decoration: none;}display: block; Mostra os links como o esilo block, que faz a tag <a>se comportar como a tag de paragrafos <p>. Tente apagar esse estilo para ver como a barra ficaria sem ele, assim pode-se entender melhor.color: white; Define a cor da fonte como branco.font-family: Arial; define a fonte como Arial.font-weight: bold; Fonte em negrito "bold".text-align: center; O texto dos links sao centralizados.padding: 14px 16px; Define o espacamento dos links como 14px para cima e para baixo, e 16px para os lados.text-decoration: none; Elimina o sublinhado padrao dos links.5 - O estilo seguinte e para que os menus da lista mudem de cor quando o cursor do mouse passar por cima:li a:hover { background-color: #111;}background-color: #111; Muda a cor de fundo do menu para cinza escuro.6 - Em CSS as classes sao usadas para definir estilos para elementos com especificos atributos de classe, dentro da