Web technologies

Presentation

•

Computers

•

11th - 12th Grade

•

Practice Problem

•

Medium

Michelle Parton

Used 30+ times

FREE Resource

27 Slides • 31 Questions

Web Technologies

A Level H446 Computer Science

There are 3 main technologies you need to know about

HTML
CSS
JavaScript

HTML

It stands for Hypertext Markup Language.

Hypertext, because it can allows sections of text to be connected by links.

Markup, because it specifies the layout and style of a page, and

Language because it has a grammar and syntax that must be followed.

HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.

It is a text-based language and its commands are stored in a text file usually with the extension .html or .htm

HTML

If the file is opened in a browser, the commands are interpreted by the browser resulting in a rendered web page.

HTML markup commands allow an author to include the following in a web page

Text, images, headings, tables, lists, Online forms for sending data to the server, Media objects such as video and sound, Hyperlinks to jump to other web pages or even parts of its own page

Development of HTML is ongoing and the organising body is the W3C consortium.

It is now in its 5th major revision. This revision is called HTML 5

HTML Tags

HTML is fairly simple to learn as it is just made up of a number of 'tags'.
A tag is a formatting command for the browser to interpret.
A tag is formatted like this
<tag>
Most tags come in pairs - one to mark the start of the formatted block and the other to mark the end of the formatted block.
The end marker includes a forward slash. The pair of tags look like this
<tag> </tag>
For example a paragraph is marked with
<p> </p>
Any text in-between the tags is treated by the browser as its own paragraph of text.

HTML Browser Support

The major issue with HTML is that there are many different browsers. For example, Chrome, Internet Explorer, Firefox and Android.
In addition, each of these browsers have multiple versions, as the code is updated to add features or remove bugs.
These different browsers and browser versions all interpret HTML formatting commands slightly differently.
This means the same HTML code ends up creating a different looking page depending on which browser and which version number is being used.

Syllabus Content

<html>
<link> to link to a CSS file
<head>
<title>
<body>
<h1> <h2> <h3>
<img> including the src, alt, height and width attributes.
<a> including the href attribute.
<div>

HTML Syllabus Content

<html>

<head>

<title>

<body>

<img> including the src, alt, height and width attributes.

<a> including the href attribute.

<div>

<form>

<input> where the input is a textbox (has the attribute type=”text” and another attribute name to identify it) or a submit button (i.e. has the attribute type=”submit”)

<p>

<li>

Multiple Choice

What is the internet?

A worldwide network of networks

The World Wide Web

An internal network

A net

Multiple Choice

Which tag would correctly display an image called logo.jpeg?

Multiple Choice

Which tag should be used to create a main heading on a page?

<h1>

<head>

<main>

Multiple Choice

Inside which tags should a <title> appear?

Multiple Choice

How can you make a numbered list?

<list>

<ol>

<dl>

<ul>

Multiple Choice

Which of the following is an advantage of creating a web page using web authoring software?

Design is unlimited - if you can imagine it, you can build it

You need to learn code before you can create even a simple web page

The software you need to write the code can be expensive

Simple pages can be created very quickly

Multiple Choice

Which of the following is an advantage of creating a web page using HTML?

Design is unlimited - if you can imagine it, you can build it

You need to learn code before you can create even a simple web page

The software you need to write the code can be expensive

Simple pages can be created very quickly

Multiple Choice

How can you make a bulleted list?

<ol>

<ul>

<list>

<dl>

Multiple Choice

What is the name of the software you need to view web pages?

A router

A network interface card

A web borwser

A firewall

CSS

CSS is short for Cascading Style Sheets. It is a "page styling language". This means that is where HTML describes what is on a web page, CSS describes how it looks.

Styling includes defining colours, layouts and fonts of various parts of the page.

CSS is now in its 3rd major revision, which is called CSS3.

The way it works is to describe, with one or more css properties, how a HTML tag should look in terms of size, colour, font and so on. It uses "style" tags to do this

CSS Benefits

Benefits

CSS allows styling to be separate from content. An entire site can be controlled from a single external css file The same html code can be displayed on many different screen sizes and devices without alteration

Easier to allow visually impaired people to personally adjust the way the page looks

CSS Issues

Issues

The biggest issue is browser support for specific CSS properties. All browsers support the original CSS1 properties. But later versions such as CSS3 have less support, especially for browsers on non-desktop computers such as smart phones and tablets.

CSS Placement - Inline

This is where the css is placed inside the tag being styled.

Inline css placements are handy for making changes to small parts of a page, such as centering an image or highlighting a single piece of text.

CSS Placement - External

You can also keep CSS commands in a separate text file. The file will have the extension .css . This allows you to use the stylesheet file on multiple web pages by linking to it in the headers. Pages can link to multiple style sheets if you want. For example you might keep CSS styling for tables in one stylesheet, and styling for hypertext links in another. External css file allow you to change the styling of an entire web site from a single location

CSS Placement - Header

CSS style commands can also be placed in the <head> section of the page. From here, it affects every instance of the selector on the page (all <p> tags, for example). If you wanted to style every paragraph to look the same on the page, you do it like this

CSS Syntax

The declaration block begins and ends with curly brackets { } or style =" " for inline css
Each declaration is a property (eg: color) followed by a colon and a value (eg: red).
Declarations are separated by semicolons.
You can have any number of declarations within the block.
CSS3 supports dozens of different properties including animation and video support.

CSS - Syllabus Content

h1{

color:blue;

}

classes

.infoBox{

background-color: green;

}

and Identifiers

#menu{

background-color: #A2441B;

}

background-color

border-color

border-style

border-width

color with named and hex colours

font-family

font-size

height

width

Multiple Choice

What does CSS stand for?

Creative Style Sheets

Cascading Style Sheets

Colorful Style Spread

Computer Style Spread

Multiple Choice

________ positioning keeps the element in the normal document flow, while ________ positioning takes it out of the normal flow.

relative, absolute

absolute, relative

fixed, static

parallel, universal

Multiple Choice

Which is the selector in this CSS?
p {color: red;}

color

red

Multiple Choice

If you want to have more than one property for a CSS selector, what character separates them?

comma (,)

semi-colon (;)

colon (:)

dash (-)

Multiple Choice

What is this an example of?
/* This is a multi-line comment */

Syntax

Property

Value

Comment

Multiple Choice

_______ is generally any single line of CSS that appears between the curly braces, whether shorthand or longhand.

Keyword

Declaration

Value

Boogers

Multiple Choice

The style that you are applying to a selector, e.g. border.

Property

Value

Keyword

Length Units

Multiple Choice

What is the difference between HTML and CSS?

CSS is one type of HTML

HTML gives a webpage structure. CSS provides styling.

CSS structures a webpage. HTML strictly provides styling.

There is no difference.

Multiple Choice

Which is the selector for a link?

a { }

link { }

href { }

a href { }

Multiple Choice

Which is the value in this CSS?
p {color: red;}

color

red

Multiple Choice

Which is correct CSS syntax?

{ body; color=black;}

body: color= black

body {color:black;}

(body color is black)

Multiple Choice

Where in the HTML document is the correct location to insert code to link to your external CSS?

In the <head> section

In the <body> section

At the very end of the document

At the very beginning of the document

Javascript

Javascript is a programming language for making web pages interactive. It has all the attributes you would expect of a language such as variables, operators, arrays and so on.

Javascript is an interpreted programming language. Browsers need to have a Javascript interpreter installed in order to run it.

You can write Javascript code directly into a web page. Or you can keep it as a separate .js text file, that you include on a web page using <script> .... </script> HTML tags.

DOM

When a browser open a web page, it parses (interprets) the html to find all of the tags. From the tags, it creates a Document Object Model (DOM), which it stores in memory. The DOM tells the browser how all of the tags are arranged and which tags are nested inside of others, so that the browser can display the page correctly. Javascript manipulates DOM elements. It might make them visible or hidden, or change the element's styling, or even insert text.

Javascript - Syllabus Content

Learners will be expected to be familiar with the JavaScript equivalents of the structures listed in the pseudocode section (with the exception of input and output (see below).

Questions will not be asked in JavaScript where something is passed to a subroutine by value or reference is relevant.

Input Input will be taken in by reading values from a form.

NB learners will not be expected to memorise the method for doing this as focus will be on what they do with that input once it is received.

Output By changing the contents of an HTML element chosenElement = document.getElementById(“example”); chosenElement.innerHTML = “Hello World”; By writing directly to the document document.write(“Hello World”);

By using an alert box alert(“Hello World”);

Summary

There are three key technologies for the web - html, css and javascript
HTML stands for Hypertext Markup Language
HTML is made up of tags such as <html> </html> A web page has a structure within where the tags are placed.
The first part of a web page is <head> where page information and external file references are made
The second part is <body> </body> which contains the visible part of the page in the browser
Browser support for web technologies varies across brands and version numbers
CSS stands for Cascading Style Sheet CSS is used to format the style of the page and its contents

Summary cont

The latest version is CSS3
Browser support of CSS3 commands varies across brand and version number
Javascript is a programming language for providing interactivity within web pages
Javascript in an interpreted language that runs within the browser
The official name of the language is ECMAScript
A web page is render in browser memory as a Document Object Model or DOM
Javascript can manipulate the DOM of a page

Multiple Choice

JavaScript is designed for following purpose -

To Style HTML Pages

To Perform Server Side Scripting Opertion

To add interactivity to HTML Pages.

To Execute Query Related to DB on Server

Multiple Choice

JavaScript is an ________ language.

compiled

interpreted

Multiple Choice

Javascript is _________ language.

Programming

Scripting

Application

applet

Multiple Choice

We cannot Place JS Code in the body tag . True/false.

True

False.

Multiple Choice

JavaScript Code is written inside file having extension __________.

.jsc

.jvs

.js

.javascript

Multiple Choice

Is this correct syntax to include JS Code inside HTML Page ?

...

</script>

Yes

Multiple Choice

Why JavaScript is called as Lightweight Programming Language ?

because JS can provide programming functionality inside but up to certain extent

because JS is client side scripting

because JS is available free of cost.

because we can add programming functionality inside JS

Multiple Select

JavaScript can be written -

( may select multiple answers)

directly into JS file and included into HTML

directly into HTML pages

directly on the Server Script

None of these

Multiple Choice

JavaScript is ______ Side Scripting Language.

JSP

Servlet

Server

Browser

Challenge

Make a web site by the end of the lesson
You must now decide the topic of your website......

Open Ended

The topic of my website will be....

Type response here

Challenge Task - Rules

You MAY use other people's code
You MAY use an online development site or software
You MUST edit some HTML code
You MUST show 3 steps of the progress of your website
You should try to include CSS
You should try to include Javascript

Challenge Task - Evidence

You MUST print screen the initial setup
You MUST print screen evidence of editing code
You MUST provide evidence of the final page at the end of the lesson.
You should provide evidence of any Javascript
You should provide evidence of any CSS

Web Technologies

A Level H446 Computer Science

Show answer

Auto Play

Slide 1 / 58

SLIDE

Similar Resources on Wayground

53 questions

5| Step 3: Graphing by Slope-Intercept

Lesson

•

7th - 8th Grade

53 questions

Biomolecule Structure

Lesson

•

11th - 12th Grade

53 questions

Cardiovascular System: Heart Anatomy

Lesson

•

11th Grade - University

53 questions

Algoritma & Pemrograman 2

Lesson

•

9th - 12th Grade

51 questions

Introduction to the Nervous System

Lesson

•

11th - 12th Grade

52 questions

FIRE HAZARDS

Lesson

•

11th Grade

54 questions

AP Physics Thanksgiving Pheast

Lesson

•

11th - 12th Grade

Popular Resources on Wayground

7 questions

History of Valentine's Day

Interactive video

•

4th Grade

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

15 questions

Valentine's Day Trivia

Quiz

•

3rd Grade

20 questions

Main Idea and Details

Quiz

•

5th Grade

20 questions

Context Clues

Quiz

•

6th Grade

Discover more resources for Computers

18 questions

Valentines Day Trivia

Quiz

•

3rd Grade - University

20 questions

-AR -ER -IR present tense

Quiz

•

10th - 12th Grade

21 questions

Presidents Day Trivia

Quiz

•

6th - 12th Grade

10 questions

Valentine's Day: History and Modern Celebration

Interactive video

•

9th - 12th Grade

11 questions

Valentine's Day Trivia

Quiz

•

8th - 12th Grade

10 questions

Factor Quadratic Expressions with Various Coefficients

Quiz

•

9th - 12th Grade

10 questions

Evaluating Piecewise Functions Practice

Quiz

•

11th Grade

18 questions

Success Strategies

Quiz

•

9th - 12th Grade