Exam Flashcards
(85 cards)
1
Q
What is the web’s architecture?
A
client-server
2
Q
List and define the Web Protocols.
A
- IP - Protocol that allows data to be chuncked into packets and sent to an IP address
- TCP - Underlying protocol ensureing data is reliably delivered
- HTTP - is used as the network protocol to define how messaged are formatted and transmitted
3
Q
What language is HTML?
A
HTML is a semantic language
4
Q
Write an HTML comment.
A
<!-- HTML Comment -->
5
Q
What makes up the project plan?
A
- Identify goals and scope of the project
- Identify the target audience
- Identify the type of web site
6
Q
What is “creating a storyboard” about?
A
A storyboard is a sketch that outlines Web page components and links between web pages
Main steps:
* Identify compnents to include
* Sketch possible layouts and select one
* Map the relationships between web pages
7
Q
What is “creating a Hierarchy chat” about?
A
Map relationship between Web pages (aka Hierarchy Chart)
* Crucial when creating navigation system for the web site
* Include links between pages in the web site as well as external links
8
Q
Why is Accessibility important?
A
Including accessibility into web pages widens potential auidence
9
Q
List and define the Link Types.
A
- Relative Link: path/filename information needed to locate target document. The path is relative to the directory of the current web page
- Absolute link: complete address of target document (URI)
- Anchor link: is a link to a location in the current web page
- Created using id attribute
- id prceded by # in href value - Skip link: A link that targets an anchor at the start of the main page content and allows users to bypass navigation
10
Q
What is a block level element?
A
A block level element will take up the full width of its parent element. It will start at the line of flow and then the line of flow will be moved to a position directly below the element and as far as the the left of screen as it can go.
11
Q
What is an inline element?
A
An inline element starts at the line of flow. The line of flow is moved to the end of the element.
12
Q
Name the parts of the Uniform Resource Identifier(URI)
A
Can’t’ upload images here so check desktop for answer
13
Q
What are the two image types?
A
- Vector
- Bitmap
14
Q
List and define the Image Formats
A
-
JPG: optimized for many colors
- Photographs
- Variable Compression rates -
GIF: optimized for areas with defined borders, few colors
- Line drawings
- Supports transparent pixels (of a single color) - PNG: Includes a full alpha channel for full transparency with gradients. PNG is a non patented replacement for GIF.
- SVG: no decrease in quality when scaled
15
Q
What are the three image attributes?
A
- src
- alt
- title
16
Q
What is the difference between HTML and CSS?
A
- HTML is used to indicate the meaning of things (headings, paragraphs, etc.) but not to specify how they should appear.
- Cascading Style Sheets (CSS) is a presentational language is used to specify how things appear.
17
Q
What is a CSS syntax?
A
A CSS syntax contains two main parts
1. Selector - points to the HTML elements/s you want to style
2. Declaration block - the declaration block contains one or more declaration separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Example of a declaration is saved on my desktop
18
Q
Write an CSS comment.
A
/* your comment */
19
Q
External vs Embedded vs Inline style sheets
A
- Inline – CSS is the default style rules (closest to the element)
- Embedded – CSS is defined within a <style> tag in the head section of a document (further from the element)</style>
- External – CSS is defined with an separate file and linked, using a <link></link> tag, in the head section of a HTML document (futherest from the element)
20
Q
Explain the Box Model
A
The box model treats each HTML element as a box with some global properties to create space around the contents of a HTML element
* Margin
* Border
* Padding
21
Q
Explain div and span
A
Div and span is a generic block level element with no presentational or semantic value. Its purpose is to allow us to group together a number of elements so as to treat them as a single entity.
22
Q
List and define the type of selectors.
A
- Element/type selector:
- applies to all HTML elements of a specific type, such as h1 elements - id selector:
- applies to a single element having a specific unique id - class selector:
- applies to all elements having a specific class attribute
23
Q
Relative v Absolute measurement systems
A
- Absolute length units are fixed and will always appear at that size.
- Relative length units specify a length relative to another property.
24
Q
Ordered list vs Unordered list
A
- An ordered list is a list in which items are numbered or lettered.
- An unordered list is a list in which items have no specific order
25
Name the list styles for ordered list
* Decimal
* Lower-roman
* Upper-roman
* lower-alpha
* upper-alpha
* None
26
Name the list styles for unordered list
* disc
* circle
* square
* none
27
Explain a description list
The default appearance is that each pair takes 2 lines:
*Term (name) on first line
*Description (value) indented on second line
28
Explain Pseudo classes
* A pseudo class is a keyword added to a selector the specifies a special state of the selected element. A pseudo class starts with a colon. Eg: visited.
* The main example of this is for representing the states a button has when a mouse moves over a link, selects a link, comes back from the link and denotes a visited link. These are called anchor pseudo-classes.
29
What is Relative Positioning?
An element with position : relative; is positioned relative to its normal position in the line of flow.
30
What is Absolute Positioning?
* An element with position : absolute; is positioned relative to its nearest positioned ancestor. If the element has no positioned ancestors then it uses the document body.
* When positioned absolute, an item is no longer in the line of flow. And is positioned using the X, Y, Z coordinates assigned to it.
31
What is Fixed Positioning?
* An element with position : fixed; is positioned relative to the viewport, which mean it always stays in the same location, even if the page is scrolled.
* When positioned fixed, an item is no longer in the line of flow. And is positioned using the X, Y, Z coordinates assigned to it.
32
What is Float?
Floats can be useful to allow content to flow around a smaller floating element (like an image for an article), but if we want more precise control over the location of elements, we need to use positioning.
33
What is Clear?
The clear property specifies on which sides of an element floating elements are not allowed to float. Clear is a companion property to float. Wherever you use floats you will probably also be using a clear.
34
What is z-order?
* When using positioning it is possible to stack overlapping items into the same space.
* This is possible with the use of the z-index property
* The plane in which the normal line of flow operates is at z-index : 0; A positive integer number represents a higher level coming out if the screen. A negative number represents a layer below the plane that contains the line of flow.
35
What is Multi-Column Layout?
You can use Relative or Absolute positioning to create multicolumn layouts that look and behave just like multicolumn layouts using the CSS float property
36
List and define the HTML table elements.
* **:** start and end of table
* **:** marks the header rows of a table
* **:** marks the rows that make up the body of the tbale
* **:** marks footer rows of the table
* **
| :** content of a header cell * ** | :** content of a data cell
37
Explain **Colspan**
The colspan attribute is used to span a cell across multiple columns.
38
Explain **Rowspan**
The rowspan attribute is used to span a cell across multiple rows
39
Explain **Colgroup**
The HTML
40
What is **display: flex**?
By defining the parent container to display: flex , we set up each child element of that container to be elements of the grid.
41
What are the values for flex-direction?
1. column - stack item vertically (top to bottom)
2. column-reverse - stacks vertically (bottom top top)
3. row - stacks items horizontally (left to right)
4. row-reverse - stacks items horizontally (right to left)
42
What are the values for flex-wrap?
1. wrap - item will wrap if necessary
2. nowrap - item will not wrap (default)
3. warp-reverse - item will wrap is necessary but in reverse
43
What are the values for justify-content?
1. center - algin items fron the center of the container
2. flex-start - aligns items from the beginning of the container
3. flex-end - aligns items from the end of the container
4. space-around - displays items with space before, between and after the lines
5. space-between - displays items with space between the items.
44
What are the values for align-items
1. center - align items from the middle of the container
2. flex-start - aligns items from the top of the container
3. flex-end - aligns items at the bottom of the container
4. stretch - stretches the items to fill the container (default)
5. baseline - aligns items such that there text baselines align
45
What is flex-grow?
Items can be assigned proportional widths with the flex-grow property
46
What is responsive design?
Responsive Design allows a website to appear differently on different kinds of devices, for example: desktop, tablet, and mobile
47
Write the code for Viewport Scaling
48
What is Media Queries?
Wrap a style with the @media rule to define a breakpoint.
If you are designing mobile-first, define your mobile rules first, then create rules for each larger breakpoint in your design beneath these in your CSS file.
| Example of the @media rule is saved on desktop
49
Explain how to design a form (before coding)
* Identify the types of information to collect
* Create a logical flow for the user to follow
* Use labels and legends to clearly identify the meaning of each Web form element
50
List the form UI elements
* A Web form is created using the HTML element
* The HTML
51
What is a Dynamic Web?
* Up to this point we have only built static web pages
* What if we wanted the user to be able to search our site
* How could the user login and enter information?
* These features require a dynamic website
52
What is templating languages?
* We need a way to dynamically insert content into HTML
* In modern web sites this is done using a templating language
* It is called a templating language because we specify the HTML as a template, where the data will be filled in later
53
What is programming languages
programming languages will perform the backend logic on websites the tasks that programming languages do include:
* Processing user login
* Performing database searches
* Adding, updating, and deleting database records
54
What is PHP's history?
* PHP was developed by Rasmus Lerdorf in 1995
* Initially it was primarily a templating language with a C-like syntax
* Due to its simplicity it became very popular very quickly
* As it became widely adopted PHP went through several major changes
* PHP is currently at version 7.3 (December 2018)
* Versions older than 7.1 are not actively supported.
55
What are arithmetic operators?
Arithmetic operators are used with numeric values to perform common arithmetical operations, such asaddition, subtraction, multiplication, modulus etc.
56
What are comparison operators?
Comparison operators are used to compare two values (number or string)
57
What are logical operators?
Logical operators are used to combine conditional statements
58
What are conditional statements?
* Often, when you write code, you will want to perform different action for different conditions.
* PHP provides a range of statements that allow us to evaluate a condition and proceed or not, based on a True or False evaluation of that condition.
59
Associative vs Indexed Array
* An indexed array is simply a list of values.
* Associative array will be a list that features keys and values. You set a key with a value for example first_name would be a key and the key would have a value of Dylan
60
What is a foreach loop?
* The foreach loop is designed to loop through the contents of an array
* Each time through the loop, the loop variable will contain the next element
in the array
61
What is a For Loop?
The for loop is used when you know in advance how many times a loop should be run.
62
What is while loop?
loops through a block of code as long as the condition is true
63
What is a Do while loop?
loops a block of code once and then repeats as long as the condition is true
64
What are the differences between isset, empty and is_null
* isset checks if the variable existes
* empty checks if the variable is empty
* is_null checks is the variable NULL
65
What are the two types of database modern websites use?
* Relational Database
* NOSQL Database
66
What are the differences between Relational databases and NoSQL databases
* Relational databases are well established.
* NoSQL can be difficult to query due to lack of joins and expressive query language.
* However, NoSQL can be quick to get a prototype working.
* Relational databases have a schema which leads to better design and code.
67
How do you access data with PHP?
* There are several ways to access the database
* The preferred approach is to use PDO (PHP Data Objects)
68
List and define the code to "include files"?
* **include** - if the file is not found it will continue without error
* **require** - File is required and an arror will be generated if not found
* **require_once** - same as require except does not not add files if they already exists.
69
Explain "calling functions"
* Functions are a way for us to reuse blocks of code
* Functions have: inputs and outputs
* Inputs: We pass information into a function
* Outputs: The outputs are the result or return value of a function
70
What is SEO?
* Search engine optimisation is a process of tailoring the structure and content of a Web page with search engines in mind
* The goal of a search engine to provide links to content that the searcher thinks is trustworthy, reliable and an authority on the subject.
Two main benefits of SEO:
1. Increasing a site’s priority in search results
2. Giving Web applications useful semantic information about your site.
71
What is the SEO algorithm?
A search engine algorithm is a procedure that examines a number of factors to decide the priority of search results. Some important factors for SEO are:
* Mobile Friendliness
* Domain Age, Url and Authority
* Technical SEO
* Keyword Phrases in page titles
* Use headers to show content
hierarchy
* Meta Descriptions
* Keyword Phrases in image alt
tags
* Using Schema Markup
(including Microdata)
* Secure and Accessible Website
* Optimised Content
* Social Signals
* Links to your content on social
networks.
* Links
* Inbound, outbound and internal
72
What is indexable content?
To make a Web site search engine friendly depends on the content
* Even small adjustments to your content can improve the accuracy of indexing
* The title, heading, image, and linked text elements play important roles
* In particular, the content of the title element may be what the user sees in a set of search results and should clearly identify the content of the page.
73
What is metadata?
You can add several types of code to your Web pages to provide information
specifically for search engines.
You can add metadata using the HTML element
* Easy implementation
* You've already used meta to indicate the character encoding of your Web
documents Eg.
or metadata is data about data. tag content is not displayed in the
page but can be used by browsers and other services to get information about a
page.
74
What is microdata?
While meta elements allow you to describe the overall content of the page, microdata
enables you to define keyword values for specific types of information on the page. This
allows search engines to better understand the information and provide better results.
75
What is sitemap?
The relationships between pages on your site and their understandability to users is
important
- The site needs to be usable
- All links should be well organised and clear
It is also important that a search engine is able to find all of your Web site pages in
order to index them
- Search indexes should search all pages on the site
A sitemap is a file in a specific format that lists all the pages in a Web site. If the site
map only includes web page URL’s then a simple text file is required with a single
URL per line.
- This file may include URL’s for each page in your site.
- This file must be called: sitemap.txt
- This file must be encoded using utf-8
76
What is robots.txt?
Bots, also known as crawlers, are programs that search engines use to index Web
pages automatically
* Bots look for files named robots.txt to indicate which files should not be
indexed (added to the search engine)
* Bots are not bound to have to follow the robots.txt suggestions.
* Note that you cannot rely on a robots.txt file to keep a document hidden.
If you want a page to be hidden from the outside world, you might instead
use a password-based system
77
List and define the video codecs
* H.264 (MPEG-4) - commercial use requires licensing and royalty payments
* Theora - no licensing or royalty payments
* VP8 - no licensing or royalty payments
78
List and define audio codecs
* AAC - no licensing or royalty payments for users
* MP3 - no licensing or royalty payments for users
* Vorbis - no licensing or royalty payments
79
What is the source element?
Source elements allow you to provide multiple copies of the file in different formats
80
What is the picture element?
An image can be added using a picture element to provide responsive specific images.
81
Picture v img srcset
* img srcset is about resolution switching. The images are the same just at different resolutions.
* picture allows us to define completely different images (sizes, aspect ratios etc.) to be
loaded at different responsive points.
82
How do you add javascript to HTML?
We can define our scripts locally in the document or the script can by added from an external script file by using a “src” attribute of the
|
|---|