1 of 19

Introduction to web technologies

HTML + CSS + Javascript

Created by: Javi Agenjo

Edited: Jeff Borland

2 of 19

Goals

Introduction to web technologies:

  • HTML to create the document structure and content
  • CSS to control how it looks
  • Javascript for interactivity/functionality

​

3 of 19

Technologies

  • HTML
  • CSS
  • Javascript

4 of 19

HTML

HTML means Hyper Text Markup Language.

The HTML allow us to construct the visible part of a website.

HTML is NOT a programming language, it’s a markup language, which means its purpose is to give structure to the content of the website.

It is a series of nested tags (it is a subset of XML) that contain all the website information (like texts, images and videos). Here is an 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>

<head>

</head>

<body>

<div>

<p>Hi</p>

</div>

</body>

</html>

5 of 19

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>

6 of 19

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>

Tag name

attributes

comment

text tag

self-closing tag

7 of 19

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)

​

8 of 19

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>

9 of 19

Technologies

  • HTML
  • CSS
  • Javascript

10 of 19

CSS

Allows to specify how to present (render) the document info stored in the HTML.

​

Allows to controls 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

11 of 19

CSS example

someTag {

color: blue; /*a comment */

margin: 10px;

font: 14px Tahoma;

}

​

This will change someTag to look blue with font Tahoma with 14px, and leaving a margin of 10px around.

12 of 19

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;

13 of 19

Layout

CSS also deals with how the entire page looks and how you arrange pieces on the screen.

​

​

14 of 19

Technologies

  • HTML
  • CSS
  • Javascript

15 of 19

Javascript

A regular programming language, easy to start, hard to master.

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

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.

16 of 19

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>

17 of 19

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 );�}

18 of 19

Javascript API

Javascript comes with a rich API to do many things like:

  • Access the HTML (including input)
  • 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

19 of 19

Example of a website

HTML in index.html

<link href="style.css" rel="stylesheet"/>

<h1>Welcome</h1>

<p>

<button>Click me</button>

</p>

<script src=”code.js”/>

CSS in style.css

h1 { color: #333; }

button {

border: 2px solid #AAA;

background-color: #555;

}

Javascript in code.js

//fetch the button from the DOM

var button = document.querySelector(“button”);

​

//attach and event when the user clicks it

button.addEventListener(“click”, myfunction);

​

//create the function that will be called when the button is pressed

function myfunction()

{

//this shows a popup window

alert(“button clicked!”);

}