1.3.4 Web Technologies Flashcards
Web Programming Languages
HTML (Hypertext Markup Language) : Defines structure, order and content of the website.
CSS (Cascading Style Sheet) : Defines the formatting of the website, uses classes and ID’s and can be within HTML or External.
JavaScript : Allows for Interaction with the website.
HTML Commands Syntax (Image, Hyperlink, Ordered List, Unordered List, link CSS)
Link to Image :
<img></img>
Hyperlink to site :
<a> The Site </a>
Ordered List :
<ol>
<li> 1st item </li>
<li> 2nd item </li>
</ol>
Unordered list :
<ul>
<li> 1st item </li>
<li> 2nd item </li>
</ul>
Link StyleSheet :
<link></link>
Classes and Identifiers
Classes and Identifiers are Attributes given to elements to style
Classes used across multiple elements for consistent style (.)
Identifiers used uniquely for single element (#)
CSS Commands Syntax
IdentifierExample {
body {
background-color: white;
font-family: Arial;
font-size: 18px;
Text-align: center;
color : #E46CG6 }
.ClassExample {
padding: 0px; }
margin: 0px; }
JavaScript Commands Syntax (Alerts, writing, changing attributes)
alert(“Hello World”);
document.write(“Hello World”);
chosenElement = document.getElementById(“example”);
chosenElement.innerHTML = “Hello World”;
HTML General Syntax
<html>
<head>
<title> Headers </title>
</head>
<body>
<h1> (Largest header) </h1>
<h2> (Medium header) </h2>
<h3> (Smallest header) </h3>
<p> Paragraph Text </p>
</body>
</html>
Search engine Indexing
Search engine indexing : Web pages indexed so can be searched quickly by search engines to return relevant IP addresses to search.
- Programs called Web Crawlers, traverse the web following links, take each word in document, adds entry for web page in index alongside words position on page, follows another link.
- (Records information - text, meta-tags etc and stores in an index)
- Spider would previously crawl whole web before indexing - pages change and not relevant when finally indexed
- Meta tags, keywords and links to websites included in index
PageRank algorithm
Page Rank algorithm : Iterative algorithm that gives score to web pages after crawling that defines how pages are ranked and order returned to user once searched.
- Has a damping factor (value between 0 and 1 : Probability that a link is not followed to reduce effect of links that are never followed (1-d))
Affected by : Number of sites linking to target site,
- Page Rank of linking sites
(- Number of outward links from linking sites)
Client Side Processing
Client Side Processing : Data processed by client browser on local device before sent to server.
- Can use JavaScript
Advantages :
- Executes quickly - immediately responds to user action - don’t need to wait for response from server.
- More secure - data not intercepted
- Removes unnecessary processing from server
Disadvantages :
- Source code visible - can be copied (copyright)
- Source code visible - can be circumvented and modified and disabled (prevent validation)
- Not all browsers support scripts or have JavaScript enabled
- Not all browsers have correct interpreter
Server Side Processing
Server Side Processing : Data sent from browser to server, processing takes place on server and server sends back output.
- Can be in PHP
Advantages :
- Allows interaction with permanent databases
- Hides code from user - prevent copyright and circumvented
- Allows for further validation of inputs
- Prevent malicious code e.g. SQL injections
Disadvantages :
- Extra Load on server at cost of company hosting
- Less secure - data can be intercepted
- Can take more time - transmission errors or long wait times.
Form HTML Syntaxes
<form>
<input></input> Displays a single-line text input field
<input></input> Displays a radio button (for selecting one of many choices)
<input></input> Displays a checkbox (for selecting zero or more of many choices)
<input></input> Displays a submit button (for submitting the form)
<input></input> Displays a clickable button
</form>
Button CSS
<button> Content </button>
