Web 101

HTML

Basic tags

Headings

<h1>Title</h1>

Paragraph

<p></p>

Strong

Can be used nested

<strong></strong>

Unordered List

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Ordered List

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

HTML Attributes

Values you can use in your HTML to modify its appareance.

Link

<a href=“URL HERE”>This is a link</a>

Input Some tags do not need to be close. Because of that, is recommended to check the documentation about each tag you use.

<input type="text">

<img src="img_girl.jpg">

HTML Basic Structure

<!DOCTYPE HTML>

<html>

  <head>
    <title>Your Website</title>
  </head>

  <body>
  </body>

</html>

CSS

Guide

Los estilos son incluidos dentro del tag <head></head>

<style>
</style>

Examples:

body{
  background-color: #4A547F;
  font-family: Garamond, Georgia, serif;
}

h1{
  font-size: 60px;
  text-align: center;
}

ul{
  text-align: center;
  background-color: #939CBF;
  padding: 10px;
}

#a-id {
  font-size: 60px;
  text-align: center;
}

.a-class{
  color: red;
}

Chrome (or any browser) Developer Tools

Windows: F12

Mac: CMD + option + i

Javascript

Include in a script tag in the <head></head>

<script>
</script>

Functions

function name_of_function(){

}

Variables

You don't need to specify the variable type.

var a = 1;
var b = "b";
var c = [];
var d = {
  book: "PBL"
}

Comments

// This is a comment

DOM access

You can access elements in the DOM (HTML) using Javascript and dynamically change them. One of the functions that allow you to do that is:

document.getElementById("yourElementID");

Each element has its own DOM Attributes. Here is the one for headings, for example. You can find the DOM attributes for all the other html tags on the left side of that website.

For example, for modifying the text in the HTML tag, we access the innerHTML property:

document.getElementById("yourElementID").innerHTML = "My new text";

In order to make sure we access the HTML element after it's been rendered (created), we can use:

window.onload = function(){
  // this will run when the whole page is loaded
  document.getElementById("yourElementID").innerHTML = "My new text";
}

HTML Events attributes

You can use HTML event attributes to trigger some javascript functions

<button onclick="say_hello();">Say Hello</button>

To learn more about javascript syntax, please read this guide on your own.

Example

 <!DOCTYPE html>

<html>

    <head>
        <style>

            h1 {
                font-size: 10px;
            }

            #mititulo {
                font-size: 60px;
                text-align: center;
            }

            .rojito {
                color: red;
            }

        </style>
        
        <script>
            window.onload = function(){

                document.getElementById("mititulo").innerHTML = "Mi titulo cambiado";
            }


            function mostrarMensaje(){
                alert("Hola amigos")
            }

            
        </script>

    </head>

    <body>
                
        <h1 id="mititulo">Este es mi titulo</h1>

        <p class="rojito">Esta es mi descripcion que estoy <strong>incluyendo en el DEMO</strong> durante la clase.</p>

        <p>Estos son los lenguajes que domino:</p>

        <ol>
            <li>C++</li>
            <li>Java</li>
            <li>Python</li>
        </ol>

        <h1 class="rojito">Este es otro h1</h1>

        <p>Entre las cosas que me gusta hacer esta:</p>

        <ul class="rojito">
            <li>Programanar</li>
            <li>Ver combate</li>
            <li>Hacer Tiktoks</li>
        </ul>

        <p>
            <a href="http://www.google.com">Este es un link</a>
        </p>

        <p>
            <button onclick="mostrarMensaje();">Mi boton</button>
        </p>

        <p>
            <img src="https://www.google.com.pe/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
        </p>


    </body>

</html>