Embedded Files
What you need to know
What you need to know
(a) HTML, CSS and JavaScript.
(b) Search engine indexing.
(c) PageRank algorithm.
(d) Server and client side processing.
HTML, CSS and JavaScript
HTML
HTML
HTML is the language in which most websites are written. HTML is used to create pages and make them functional.
The code used to make them visually appealing is known as CSS.
The History of HTML
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for HyperText Markup Language.
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.
What are Tags and Attributes?
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>. Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is: <img src="mydog.jpg" alt="A photo of my dog.">
<html>
at the start of every script
<head>
contains the metadata
placed between html and body tags
typically defines the document title, character set, styles, links, scripts
<link rel = “reference name” href = “title of css file”>
linking to css file
<title>
defines a title in the browser tab
provides a title for the page when it is added to favorites
displays a title for the page in search engine results
<body>
all content of the page is placed inside the body tag
<h1>,<h2>,<h3>,<p>
gives any text within the tag the attribute of heading 1, heading 2, heading 3 or paragraph
<img src = “image source” width = “desired” height = “desired” ALIGN = “side of page”>
<a href = “page source”>Hyperlink text</a>
links to another page in the website
for example used in a navbar
<div>
defines a division or section in a page
often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript
<form>
creates a form, input field, in the page
can contain a button <button type = “button”>Text</button>
can contain an input field <input id = “input” type = “text”>
<ol>
defines an ordered list, can be alphabetical or numerical
<ul>
defines an unordered list
<li>
defines a list item
<script>
defines client-side javascripts
Task
If you are not familiar with HTML before moving on to CSS try to work through the following programming tutorials:
CSS
CSS
CSS stands for Cascading Style Sheets and basically is how web pages are made to look more appealing.
Internal CSS - Looking at the above code this uses internal CSS that specifies a style for a single HTML page. It is defined in the <head> element of an HTML page, inside of a <style> tag
<h1 style = “color:blue;”>
css script is written in an html line using style =
External style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file. For using an external style sheet, you should add a link to it inside of the element of the HTML page, in the code below you will be able to an external link to a file called styles.css
h1{ color: blue;
}
using classes for example the HTML code to create the class would be <div class ="navbar">
.className { *\n css declarations \n }
for example the class created above for the navbar would look something like:
.navbar{
overflow: hidden;
background-color: #31FF00;
position: fixed;
top: 0;
width: auto;
}
identifiers used in HTML and CSS are:
#text followed by css declarations will apply those declarations to anything with id = “text”#
#h1{ color: blue;
}
The most common properties used in CSS are:
background-color: colour;
border-color: colour;
border-style;
border-width;
font-family;
font-size;
height;
width;
zExternal style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file. For using an external style sheet, you should add a link to it inside of the element of the HTML page, in the code below you will be able to to a enternal link to a file called swag.css Colour can be identified using either name or hex value
JavaScript
JavaScript
Java is a popular programming language, created in 1995. It is owned by Oracle, and more than 3 billion devices run Java.
It is used for:
Mobile applications (specially Android apps)
Desktop applications
Web applications
Web servers and application servers
Games
Database connection
And much, much more!
To write Javascript within a HTML file you need to use the tags <scipt> javacode </script> in the example below this produced a simple alert box (pop up window) That says Hello world!
Task
Look at the code below and see what it does? And then can you:
Create a quiz that asks 5 questions about different capital cities of the world
Add a heading 'CAPITAL CITY QUIZ'
create an external CSS file that edits the heading font size, color and alignment
To create a variable you need to declare it as var
getElementById("Question1") returns an Element object representing the element whose id property matches the specified string
Remember at the end of your code you need to end with a semicolon ;
Task
Using the code extracts shown below amalgamate them to create a website that uses HTML, CSS, and JAVASCRIPT - GoodLuck
Your website needs to:
Have a login page that requests a password to access (no need for PHP / backend services - just yet!)
When the user has accessed the website the user is presented with an HTML, CSS, and JavaScript Quiz page. This will total their score and display it at the end of their quiz.
Make use of CSS to make the webpage look attractive,
Search engine indexing.
Search engine indexing is the process of a search engine collecting and storing data for use by the search engine. The actual search engine index is where all data the search engine has collected is stored.
It is the search engine index that provides the results for search queries, and pages that are stored within the search engine index that appear on the search engine results page. Without a search engine index, the search engine would take considerable amounts of time and effort each time a search query was initiated, as the search engine would have to search not only every web page or piece of data that has to do with the particular keyword used in the search query, but every other piece of information it has access to, to ensure that it is not missing something that has something to do with the particular keyword.
Search engine spiders, also called search engine crawlers, are how the search engine index gets its information, as well as keeping it up to date and free of spam.
How Google Search Works (in 5 minutes)_720P HD.mp4Page Ranking.
PageRank is an algorithm used by Google to measure the authority of a web page. It is generally believed the number and importance of inbound links to a page is a significant factor.
PageRank was the original concept behind Google’s creation by Larry Page and Sergey Brin
https://www.google.com/intl/en_uk/search/howsearchworks/algorithms/
Task
Read the presentation Page Ranking Presentation
Server and Client Side Processing
Server and Client Side Processing
Server-side
Server-side
Processing is used to interact with permanent storage like databases or files. The server will also render pages to the client and process user input. Server-side processing happens when a page is first requested and when pages are posted back to the server. Examples of server-side processing are user validation, saving and retrieving data, and navigating to other pages.
Client-side
Client-side
Embedded on the client’s web page and processed on the client’s internet browser. Client-side scripts are written in scripting language like JavaScript and interact directly with the page’s HTML elements like text boxes, buttons, list-boxes and tables. HTML and CSS are also used in the client. In order for client-side code to work, the client’s internet browser must support these languages.
Client-side scripts
Client-side scripts
A client-side script is a program that is processed within the client browser. These kinds of scripts are small programs which are downloaded, compiled and run by the browser. JavaScript is an important client-side scripting language and widely used in dynamic websites. The script can be embedded within the HTML or stored in an external file.
External scripts are sent to the client from the server when they are requested. Scripts can also be executed as a result of the user doing something like pressing a page button.
Client-side scripts can often be looked at if the user chooses to view the source code of the page. JavaScript code is widely copied and recycled.
Server-side scripts
Server-side scripts
A server-side script is processed on the web server when the user requests information. These kinds of scripts can run before a web page is loaded. They are needed for anything that requires dynamic data, such as storing user login details. Some common server-side languages include PHP, Python, Ruby and Java. These execute like programming languages on the server.
When a server-side script is processed, the request is sent to the server and the result is sent back to the client. This is useful for websites which store large amounts of data, such as search engines or social networks - it would be very slow for the client browser to download all the data.
Twitter's James Harlow explains the difference between back-end and front-end from the BBC Bitesize Website - Click Here
PAST PAPER QUESTIONS
Try and answer the past paper exam questions -You can write your answers on paper or print out the exam paper - Mark Scheme is provided at the end of the paper questions. (try not to look at the answers before attempting all questions)
Question_paper_1.3.4_Web_Technologies.pdfPage updated
Report abuse