Please enable JavaScript.
Coggle requires JavaScript to display documents.
SLR 12: Web Technologies - Coggle Diagram
SLR 12: Web Technologies
HTML
Stands for Hypetext Mark-up language, the standard for web pages.
HTML pages are built via
HTML elements
. They are represented by the <> tag
Elemants can havbe attributes that provide additional details about them
Attributes come in pairs consisting of a name and the value assigned to it
The 18 required HTML elements are: <html>, <link>, <head>, <title>, <body>, <h1>, <h2>, <h3>, <img>, <div>, <a>, <form>, <input>, <p>, <li>, <ol>, <ul>, <script>
Elenents in HTML consist of a start tag and an end tag, with the content of the element placed inbetween the two (for example, the page itself begins with <html> and ends with </html>)
HTML element descriptions
<head> contains metadata (data about the HTML page). It is not displayed on the webpage.
<title> is required for all HTML documents, contains the title that is displayed in the page's title bar/web tab. It must be text only.
<body> contains the main body of the page. All text, images, links, tables, etc... are contained within the body. Like <title>, it is limited to one per HTML document.
The <h*> tags are used to create headings. They range from <h1> to <h6>, with the larger numbers detoning less important (and therefore smaller) headings.
<p> tags are used to show paragraphs. Each paragraph automatically has a free line inserted before and after it.
In order to embed images into the web page, the <img> tag must be used. The image is not inserted directly into the web page, they are instead linked to the page.
<img> has several additional tags that must be included. 'src' stands for source, and specifies the image file path, while 'alt' provides alternate text if the image is not available. 'width' and 'height' define the image's size attributes.
<a> is used to create hyperlinks to other pages. An important attribute is 'href', which includes the destoiation page of the link
By default, unvisited links are blue, visited links are purple, and links that are active are red.
<ol> and <ul> are used to create ordered (lists with numerical/alphabetical order) and unordered lists. <li> is used to mark list items in both cases.
<link>, <div>, <form>, <input> and <script> are all used for CSS and Javascript.
HTML pages are read by web browsers which interpret the elements and visually render the code.
A HTML page
CSS (Cascading Style Sheets)
Defines how HTML elemtnts are displayed on various media such as screens and paper.
Allows developers to control the appearences of multiple webapages at once
Using the <style> tag, CSS can be used directly in an HTML file, affecting that webpage only.
External CSS sheets can be used to allow multiple
web pages to be changed via a single alteration to the code.
HTML files are linked to external CSS sheets via the <link> tag.
In order to connect an external stylesheet, the <link> tag is needed, along with the href tag containing information on the file path.
By utilizing denoting a class in the CSS sheet, a present arrangement of characteristics can be created. These classes can be applied by encasing
sections of the HTML document within the <div> tag.
The #id selector can be used to create styles used to select sppecific things to possess a style
The tag can be integrated within individual elemtns, or set to apply to the page as a whole.
Common properties used in CSS sheets are background-colour, border-colour, border-style, border-width, color, font-family, font-size, height and width.
When defining fonts in CSS sheets, multiple fonts can be noted in order. If the first font is not supported by the current web browser, it will fall back to the next font.
Javascript
JavaScript is used to manipulate data/behaviour in web pages. It can be used to control both CSS and HTML
OCR SPEC: EXACT JS DETAILS ARE NOT NEEDED. JAVASCRIPT STRUCTURE FAMILIARTY NEEDED, EXCLUDING INPUT OUTPUT. JAVASCRIPT NOT EXPECTED FOR OOP/FILE HANDLING
<form> is an HTML tag use to create user input forms.
The element can contain a variety of tags: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>, <output>
<input> is used to create area for user input. It has its own attributes.
The 'type' attribute determines the type of input. For example, "text" is used for a text input, while "submit" is for a submission button
'id' is used to give each elemnt of the form a name, allowing it to be referred to using Javascript as the
id is essentially a variable.
<form> is almost always used with JS in order to process inputs.
The action tag is used to mark where inputted data is sent.
<script> is used to embed Javascript code that can be triggered under certain conditions.
For example, using <button onclick = "myfunction ()"> creates a clickable button that executes whatever myfunction() contains inside the <script> tag
<script> has several key differences in its code: Command lines end with semicolons, Functions and variables must be defined, and sections of code are encapsulated in curly brackets.
JS reduces server-side load
Search Engine Indexing
There are almost 2 billion websites in existence, which can make finding specific website incredibly hard.
When a search engine has a search submitted, results are checked against the 'index'.
Index searching is very fast, but it must be constantly updated to add new sites/pages, remove old ones and update broken links.
In order to do this, 'crawler' programs index (add to their search engine's index) any pages, along with their metadata and content. They also follow all internal/external links, mapping them out.
Sever vs Client-side
The internet usually involves interactions between the 'client' (the user device) and the server containing the resources required
During these interactions, decisions on weather to process on the client or server side are made based on performance, security and usability.
Client-side is used for initial data validation via Javascript, manipulation of UI elements and applying CSS website styles. It is useful for reducing the load on the server and reducing the amount of web traffic.
Server-side processing performs additional validation, queries/updates the server's internal database and encodes data into readable HTML. It is useful for keeping important information secure and for performing complex calculations.
PageRank algorithm
PageRank is an algorithm developed by Larry Page, one of Google's founders. It is used to compile and website pages, and use that data to display results when a search engine is used.
PageRank works by checking the number and quality of links to a webpage in order to determine its importance (it is assumed that an important website is likely to be referred to more often).
PageRank has several different components.
PR(A) is the assigned ranking of page A
C(Tn) is the total number of outgoing links from web page n, including the link that connects it to page A.
All pages have a vote count of 1, split between all pages it links to.
PR(Tn)/C(Tn) is the total vote quantity page A receives from pages T1 through Tn.
The factors are then multiplied by a dampening number, preventing PR(Tn)/C(Tn) from being too inflential.
Pagerank's overall process is: It takes an initial value (usually one), then it is multiplied by the dampening factor. This number is then split up among all pages that a page links to. This process is repreated many times.
Initially, the number vary greatly, only leveling out after a number of iterations
A page's rank is determined partially by the rank of connected pages. Additionally, the algorithm does not need to know the rank of any back-linked pages
The algorithm initially makes an informed guess on the intended rank, then iterates until the correct rank is found. It can take millions of iterations for the correct rank to be found
When the final rankings are achieved, the average rank of all pages is close to 1