Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
1.3.4
| Question | Answer |
|---|---|
| HTML | HyperText Markup Language: - Standard markup language; used to define web page structure - Tags specify the content elements (<tag>) - Elements can have attributes; provide additional info - Attributes typically come in name/value pairs |
| <html> | The document starts with <html> and ends with </html> - non-visual |
| Link tags (HTML) | links to CSS file, in head (<link rel+”stylesheet” href “---.css”>) - kinda visual?? |
| Head tags (HTML) | stores metadata, placed between html + body (<head> — </head>) - non-visual |
| Title tags (HTML) | stored in head tags, text only, shown in title bar (<title> – </title>) - required; visual |
| Body tags (HTML) | contains main text, one per document, contains headings, paragraphs, images, hyperlinks, tables and lists(<body> — </body>) - visual |
| Headings tags (HTML) | (1,2…6): different levels of heading (get smaller), don't skip levels - visual (<h1> — </h1>) |
| Image tags (HTML) | creates a space for an image to be linked to (will be shown though) - visual (<img src = “” alt = “” width = number height = number>) |
| Image tag attributes | - Src - Alt - Height and width |
| Src (image tags) | define where image is stored |
| Alt (image tags) | text displayed if image cannot be shown |
| height and width (image tags) | dimensions of image in pixels - required |
| A tags (HTML) | Creates a hyperlink to link to pages (<a href “---”> words </a>) - visual By default: - Unvisited link: blue, underlined - Visited link: purple, underlined - Active link: red, underlined |
| href (HTML) | indicates link’s destination |
| Div tags (HTML) | divides page into blocks, used with CSS (<div> — </div>) - kinda visual?? |
| Form tags (HTML) | create a HTML form for input, often used with Javascript (<form — >) - visual |
| Input tags (HTML) | allows data to be entered, used in form: - visual-ish (<input type = “---” name = “input name”>) (name used to input referred to in Java) |
| Type (input tags) | <type> determines data type: - Text: textbox - Submit: submit button |
| P tags (HTML) | makes a paragraph, anything inside is on one line, blank line automatically added before and after each <p> tag (<p> — </p>) - visual |
| Li tags (HTML) | defines each item in a list (used with ol + ul) (<li> — </li>) - visual |
| Ol tags (HTML) | defines an ordered (numbered) list (numerical/alphabetical) (<ol> — </ol>) - visual |
| Ul tags (HTML) | defines unordered (bulleted) list (<ul> — </ul>) - visual |
| Script tags (HTML) | embeds Javascript (<script> — </script>) - visual-ish |
| CSS | (cascading style sheets): - A language that styles web page contents; describes how HTML elements are to be displayed - A property and value (followed by ;) specifies a styling |
| CSS properties | - Background-color - Border-color - Border-style - Border-width - Color - Font-family - Font-size - Height - Width |
| Background-color (CSS) | background colour of an element. Used on <body> for whole page or <div> for just a certain section |
| Border-color (CSS) | colour of border, typically on <div> elements |
| Border-style (CSS) | style of border (dotted, ashed, solid) without one, border just won’t show up |
| Border-width (CSS) | width of border in pixels (px) |
| Color (CSS) | the text’s colour Can be specified by: - 140 standard colour names (e.g. color: DarkRed;) - a hexadecimal number (e.g. color: #E25537;) - an RGB value |
| Font-family (CSS) | if exact font given, it must be installed on user’s device, if font family given a nearest can be selected or several options can be given |
| Font-size (CSS) | size of font ((number)em = number of times bigger than usual, (number)px = pixels, (number)% = percentage of usual font size) |
| Height (CSS) | specifies height of an element in pixels, or percent of element it is in |
| Width (CSS) | same as height, but for width |
| Linking CSS | - Directly in HTML file - External stylesheets |
| External stylesheets (linking CSS) | Can be an external style sheet linked to HTML documents, and then controls many more, and can be changed a lot easier, linked to HTML by (<link> tag) H1{ color:darkblue; } (all text in H1 tags will be dark blue) |
| Included in HTML file (linking CSS) | Can be included directly in HTML file, but will only affect that page (e.g. <h1 style=”color:red;”>) |
| Identifiers (CSS) | Only applys formatting to one tag: HTML: <h2 id = “name given”> text </h2> CSS: #identifier(name given) { Color:red; } |
| Classes (CSS) | An identifier can only be used once per page, so classes are used: HTML: <div class = “name”> txt </div> CSS: .name { Color:gray; } |
| Classes and identifiers overlaps (CSS) | A class and identifier can be used; overlapping attributes will be the identifier as it is specific and thus of higher priority If code is applied to all <p> elements, and then different code for a specific <p> element, the specific code takes precedence |
| Javascript | (written within <script> in HTML tags) Programming language used for websites so you can calculate, manipulate and validate data Input taken by a HTML form |
| Javascript output methods | -Changing HTML tag contents: chosenElement = document.getElementById(“example”); chosenElement.innerHTML = “Hello World”; -Writing directly to Javascript page: document.write(“Hello World”); -An alert box on the screen: alert(“Hello World”); |
| Variables (Javascript) | var x = 2; |
| Casting (Javascript) | - (to string) string(8); or (8).tostring(); - (to integer or float) number(‘3.14’); |
| For loop (Javascript) | for (let i=0; i<5; i++) { (repeats 5 times) Code (i++ is the same as i=i+1) } |
| While loop (Javascript) | while(condition) { Code } |
| Until loop (Javascript) | do { Code } while (condition) |
| Comparison operators (Javascript) | ==, !=, <, >, <=, >=, are all the same as python. === compares data and data type, same as !== AND = &&, NOT = !, OR = ll |
| Arithmetic operators (Javascript) | +, -, *, / are the same as python. MOD = %, DIV = math.floor(), to the power of = ** |
| If/else (Javascript) | if (x<10) { Code } elseif (condition) { Code } else { Code } |
| Switch/case (Javascript) | switch (x) { Case1: Code; Break; Case2: Code; Break; Default: Code; } |
| Length of string (Javascript) | variable.length; |
| Get a substring (Javascript) | variable.substring(start,stop); |
| Function (Javascript) | function functionname (parameter1, p2, etc) { Code Return — } |
| Procedure (Javascript) | function functionname (p1, p2, ect.) { Code } |
| Arrays (Javascript) | let name = {22, 22, 22]; Appending: name.push(“”) |
| Comments (Javascript) | // words |
| Search engine indexing | the process of a search engine collecting, sorting and storing data in its index |
| Search engine | a website used to find other websites. Users enter words and related web pages are returned |
| Building indexes (search engine indexing) | Programs (spiders/crawlers) form a ‘web’ of links and relationships between different web pages + collect info about them. They have a list of websites they need to visit, and any hyperlinks on a website are added. |
| Major search engine web crawlers | visit and update the web every single day Index pages, content, metadata, map links by following all links Records which page each word appears on, and location of word on page, allowing web pages to be efficiently returned if the words match the query |
| Page rank algorithm | Compiles and ranks website pages and list of results returned by a search engine Founded by Larry Page To rank the web pages, it counts the number of links pointing to the page and the number of links going out |
| More links going out (page rank algorithm) | decreases its PageRank value |
| More links going in (page rank algorithm) | the more people its important, so its pagerank value is increased If it has an incoming link from a web page with a high page rank value, it is more important then a link from a web page with a low page rank |
| original pagerank algorithm | PR(A) = (1-d) + d(PR(T1)/C(T1) + … + PR(Tn)/C(Tn)) |
| PR(A) (original pagerank algorithm) | Page rank of page a |
| C(Tn) (original pagerank algorithm) | total no. outbound links from web page n, including inbound link to page A - Each webpage has a notational vote of 1, shared between all web pages it links to |
| PR(Tn)/C(Tn) (original pagerank algorithm) | share of the vote page A gets from pages T1 through Tn - Each of these vote fractions are added together and multiplied by d |
| D (original pagerank algorithm) | damping factor probability that a user will keep clicking on outgoing links. Prevents PR(Tn)/C(Tn) from having too much influence - d=0.85, toughly 6 clickthrough links |
| Features of pagerank algorithm | Pagerank determined by linked pages's pageranks Doesn't need back-linked pages's pagerank Can have millions of iterations Once final pagerank achieved, average of all pages will equal 1 |
| Pagerank algorithm steps | First instance, informed guess is made After several iterations, correct answer achieved |
| Server and client-side processing | Used when accessing services |
| Server-side processing | (must be used when handling user input) Operations are performed on the server providing services to clients E.g. provides further validation, encodes data into readable HTML, performs complex calculations |
| Client-side processing | Operations are performed with the client application that is sending requests to server E.g. CSS, Javascript, manipulating user interface elements |
| Client-side processing pros and cons | Pros - Reduces work for server, making less delays - Reduces bandwidth and web traffic Cons - Malicious data may be sent to a server |
Created by:
FlashCardFun!