Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
733 views

Introduction To HTML+CSS+Javascript

The document is a PowerPoint presentation about programming foundations with HTML, CSS, and JavaScript for industrial training. It introduces the goals of learning web technologies like HTML for document structure, CSS for visual design, and JavaScript for interactivity. It then provides overviews of each technology, explaining concepts like how browsers interpret HTML and CSS to render pages and the JavaScript interpreter. The presentation defines common HTML tags, how CSS can control visual properties, and basic JavaScript syntax. It gives examples of how the three can be combined in a simple website.

Uploaded by

Kalam Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
733 views

Introduction To HTML+CSS+Javascript

The document is a PowerPoint presentation about programming foundations with HTML, CSS, and JavaScript for industrial training. It introduces the goals of learning web technologies like HTML for document structure, CSS for visual design, and JavaScript for interactivity. It then provides overviews of each technology, explaining concepts like how browsers interpret HTML and CSS to render pages and the JavaScript interpreter. The presentation defines common HTML tags, how CSS can control visual properties, and basic JavaScript syntax. It gives examples of how the three can be combined in a simple website.

Uploaded by

Kalam Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

PowerPoint Presentation

on
Industrial Training
Programming Foundations with HTML + CSS
+ Javascript
Submitted to:- Submitted By:-
Mr. Papendra Kumar Abhishek Kumar
Assistant Professor 180201
Computer Science and Engineering CSE- 4th year
Goals
Introduction to web technologies:

● HTML to create the document


structure and content

● CSS to control is visual aspect

● Javascript for interactivity


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>
<head>
The HTML allow us to construct the visible part of a website. </head>
<body>
<div>
HTML is NOT a programming language, it’s a markup language, <p>Hi</p>
which means its purpose is to give structure to the content of the </div>
website. </body>
</html>
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: basic rules
Some rules about HTML:

● It uses XML syntax (tags with attributes, can contain other tags).
<tag_name> 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
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>
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: 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.
Technologies

● HTML
● CSS
● Javascript
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
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 three 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">
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:

p.intro {
color: red;
}

This will affect only the tag <p class="intro">


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


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: 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>
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;
}
Further info
HTML + CSS:

http://www.w3schools.com/

Selectors: https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors

To learn Javascript.

http://codeacademy.com

To learn jQuery:

http://docs.jquery.com/Tutorials
The End

You might also like