Scribd
Upload
2 views

Introduction to HTML+CSS+Javascript

The document provides an introduction to web technologies, focusing on HTML for document structure, CSS for visual presentation, and JavaScript for interactivity. It outlines the necessary tools to get started, including web browsers and text editors, and explains the roles of the rendering engine and JavaScript interpreter in a browser. Additionally, it covers basic rules and examples for HTML, CSS, and JavaScript, illustrating how they work together to create interactive web pages.

Uploaded by

aryan Bohra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Introduction to HTML+CSS+Javascript

The document provides an introduction to web technologies, focusing on HTML for document structure, CSS for visual presentation, and JavaScript for interactivity. It outlines the necessary tools to get started, including web browsers and text editors, and explains the roles of the rendering engine and JavaScript interpreter in a browser. Additionally, it covers basic rules and examples for HTML, CSS, and JavaScript, illustrating how they work together to create interactive web pages.

Uploaded by

aryan Bohra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Introduction to web

technologies
HTML + CSS + Javascript
Introduction to web technologies:

● HTML to create the document


structure and content

● CSS to control is visual aspect

● Javascript for interactivity


Tools
What do we need to start:
● a good web-browser (Chrome or Firefox)
● a good text editor like:
○ VSCode (cross platform)
○ Notepad++ (win)
○ textWrangler (osx)
○ sublime text (cross platform)
○ ecode (cross platform)
● the example HTML code to start
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
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.
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.
Technologies

● HTML
● CSS
● Javascript
Javascript
A regular programming language, easy to start, hard to var my_number = 10;
master.
function say( str )
Allows to give some interactivity to the elements on the web. {
console.log( str
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. say("hello");

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 example
<html>
<body>
<h1>This is a title</h1>
<script>
var title = document.querySelector("h1");
title.innerHTML = "This is another title";
</script>
</body>
</html>
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;
}

You might also like