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 and styling of the website, uses classes and ID’s and can be within HTML or External.
JavaScript : Programming language in web browser that can be embedded in HTML that 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>
