what is the purpose of the HTML tag?

- divides a page into separate areas which can be referred to uniquely be name and styled differently using CSS - eg. `...

Web technologies Flashcards by Anz Biju

what is HTML and CSS?

HyperText Markup Language - the language web pages are written in
describes content and structure of a web page for the browser to interpret + render page for the user
Cascading Style Sheets is used with HTML for style + formatting of a webpage

How well did you know this?

Not at all

Perfectly

what is the general structure of HTML?

written with tags in angle brackets
opening pair = <html>, closing pair = </html>

How well did you know this?

Not at all

Perfectly

what are the 2 main sections of a standard webpage?

head - title of webpage in window header/browser tab + any scripts that may enrich page content
body - main content of the page (eg. text, images, hyperlinks)

How well did you know this?

Not at all

Perfectly

what are the most common HTML tags and their functions?

<html> - all code enclosed within these tags is interpretted as HTML
<body> - defines content in the main browser content area
<head> - defines browser tab/window heading area
<title> - defines text that appears with the tab/window heading area
<h1>, <h2>, <h3>, etc - heading styles in decreasing sizes
<p> - a paragraph separated with line spaces above + below it
<img> - self closing image tag with parameters
<a> - anchor tag defining a hyperlink with location parameter
-<ol> - ordered list (numbered)
<ul> - unordered list (bulleted)
<li> - individual list element

How well did you know this?

Not at all

Perfectly

how can CSS affect a webpage?

can change:
- the style of an entire website
- a single webpage
- a section of a webpage, defined by <div> tags

How well did you know this?

Not at all

Perfectly

what is the purpose of the HTML <div> tag?

divides a page into separate areas which can be referred to uniquely be name and styled differently using CSS
eg. `<div id="page">…</div>

How well did you know this?

Not at all

Perfectly

what are the 3 methods of applying CSS to HTML?

inline styling - apply unique style within a HTML tag - eg. <p style="float:left">...</p>
internal embedded style - defined <style> tags in <head> section
using an external stylesheet + linking it to HTML files for a whole website - using <link> tag

How well did you know this?

Not at all

Perfectly

why might you use an external CSS stylesheet over inline/embedded CSS?

can link to multiple HTML/webpage files within the same site
allows consistent formatting across the site without needing to duplicate CSS styles

How well did you know this?

Not at all

Perfectly

how do you define the styles for an identifier/class selector using CSS?

h1{color:red}

the symbol for whether its an identifier or class
the selector name
curly brackets
the style contents

How well did you know this?

Not at all

Perfectly

what is the difference between an identifier and class?

identifier - unique to one element per webpage
class - can identify more than one element per webpage

How well did you know this?

Not at all

Perfectly

how are identifiers and classes defined in CSS?

identifier - using a # in front of the id name
class - using a . in front of the class name

How well did you know this?

Not at all

Perfectly

what is the float property in CSS?

positions an element to the left or right of its container
surrounding text and inline elements can wrap around it

How well did you know this?

Not at all

Perfectly

why might you need to clear a floating object and how do you do this?

floating objects may not add up to the height of the divider they reside in properly
can cause content to wrap unintentionally
fix like this: <div style="clear:both;"><div>

How well did you know this?

Not at all

Perfectly

what is a web form for?

enable website to collect user input data + selections
inputs = text boxes, check boxes, radio buttons, etc.
input can be validated + submitted to website owner’s database or processed as part of a search query

How well did you know this?

Not at all

Perfectly

how can web forms be created using HTML and Javascript?

form content is contained within <form> tags
form objects have specific type attributes
input types and names
submit and reset buttons can be created easily by specifying the button type
specify form action + method (eg. POST)

How well did you know this?

Not at all

Perfectly

how do the reset and submit button of a web form work?

Study These Flashcards

reset - clears form data
submit - sends data to form handler (specified in action attribute of form tag)
form handler on the server will then process form data

what is JavaScript?

Study These Flashcards

script language used to add interactivity to websites - manipulate page objects, animations, navigation tools + form validation
interpreted language
browser interpreter reads JavaScript code -> interprets each line -> runs it

what is just in time compilation?

Study These Flashcards

used in the latest browsers
compiles JavaScript into executable bytecode just before execution

what JavaScript code structures exist?

Study These Flashcards

variables - assign, re-assign, local + global scope
functions - group code into functions, pass arguments to them, return values from them
conditionals - if/else statements + logical expressions
loops - while + for loops to repeat code
arrays - storing multiple pieces of data under a single variable

how can JavaScript code be included in a website?

Study These Flashcards

embedded (inline) JavaScript - fewer files open at a time
denoted using <script> tags
external .js file - HTML code is cleaner to read
also links to multiple HTML files - can change multiple files instead of repeating code

how can JavaScript be used for inputs to webforms/webpages?

Study These Flashcards

used to process data on user machines as it is entered
validate data, animate objects or other interactivity
once data is processed -> may be passed onto server

how do you create a variable in JavaScript and manipulate it?

Study These Flashcards

var x = document.getElementById("box");
x.style.fontsize = 30px;
x.style.color = "blue";

this sets the value of x to be the HTML element “box”.
then it changes the style of the HTML element

how do you define a function in JavaScript?

Study These Flashcards

<script>
function myFunction() {
    ..........
}
</script>

parameters can be passed into the normal brackets after the name of the function
the actual code should be contained inside the curly brackets

how do you call a JavaScript button on a call press?

Study These Flashcards

<button type="button"
onClick = "myFunction()">Click Me!</button>

onClick should contain the name of the function you want to call
every time the button is pressed, myFunction will be executed

how do you use an alert box to provide an output to the user?

implement it inside a function: ```function Greeting() { alert("Hello") }```

why are alert boxes a good form of output to the user?

- effective to make sure the user conveys a piece of info - asks for confirmation - wont allow the user to interact with the webpage without confirming

how do you get information from a HTML form using JavaScript?

imagine you have a form called question with an answer field. the critical line of code is: ```var x = document.forms["question"]["answer"].value;``` this sets variable x to the value in the 'answer' input box of the 'question' form

how do you write text directly onto a webpage using JavaScript?

``````

how do you delete the entire contents of a HTML document after execution?

``` ``` this is mostly used for testing

how do you represent arrays using JavaScript?

```var colours = ["red.jpg", "green.jpg", "blue.jpg"];``` this one contains image files but they can contain any data type eg. strings, integers, floats

search engine indexing

pg 142 + pagerank notes

Web technologies Flashcards

(32 cards)